Update website & Add list for local private documents

app/app/src/components/I18n.astro

@@ -0,0 +1,26 @@
+---
+import { Fragment } from 'astro/jsx-runtime'
+
+import { i18nFactory } from '~/i18n'
+const _ = i18nFactory(Astro.currentLocale as any)
+
+const {
+	type: elementType,
+	...i18nProps
+} = Astro.props
+
+const ElementType = elementType || Fragment
+
+for (const key in Astro.slots)
+{
+	if (Astro.slots.has(key))
+	{
+		const content = await Astro.slots.render(key)
+		i18nProps[key] = content
+	}
+}
+---
+
+<ElementType>
+	{_(i18nProps as any)}
+</ElementType>

app/app/src/pages/[document].astro → app/app/src/components/RenderDocument.astro

@@ -1,30 +1,6 @@
 ---
-import { getCollection } from 'astro:content'
-
-import Layout from '~/layouts/Layout.astro'
-
 import logosrc from '~/assets/logo.png?url'
 
-import '@fontsource-variable/noto-serif'
-
-export async function getStaticPaths()
-{
-	const blogEntries = await getCollection('documents');
-	return blogEntries.map((entry: any) =>
-		({
-			params: {
-				document: entry.slug,
-			},
-			props: {
-				entry,
-			},
-		})
-	)
-}
-
-const { entry } = Astro.props
-const { Content, headings } = await (entry as any).render()
-
 function splitHash(hash: string)
 {
 	const numParts = Math.max(1, Math.min(4, Math.floor(hash.length / 4)))
@@ -42,66 +18,59 @@ function splitHash(hash: string)
 }
 ---
 
-<Layout title={headings[0].text}>
-
-	<div class="main">
-		<div class="content-wrapper">
-
-			<div class="content-header">
-				<!-- <div class="side">
-					&nbsp;
-				</div> -->
-				<img src={logosrc} alt="FluffEvent logo" />
-				<div class="overlay">
-					<p class="version">
-						<Fragment set:html={splitHash(import.meta.env.GITHUB_SHA || 'dev').join('<br />')} />
-					</p>
-				</div>
+<div class="main">
+	<div class="content-wrapper">
+
+		<div class="content-header">
+			<!-- <div class="side">
+				&nbsp;
+			</div> -->
+			<img src={logosrc} alt="FluffEvent logo" />
+			<div class="overlay">
+				<p class="version">
+					<Fragment set:html={splitHash(import.meta.env.GITHUB_SHA || 'dev').join('<br />')} />
+				</p>
 			</div>
+		</div>
 
-			{!import.meta.env.GITHUB_SHA && (
-				<div class="content-watermark">
-					<p class="specimen">
-						SPECIMEN
-					</p>
-				</div>
-			)}
+		{!import.meta.env.GITHUB_SHA && (
+			<div class="content-watermark">
+				<p class="specimen">
+					SPECIMEN
+				</p>
+			</div>
+		)}
 
-			<!-- Table hack for print layout -->
-			<!-- https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a -->
-			<table>
-			<thead><tr><td>
+		<!-- Table hack for print layout -->
+		<!-- https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a -->
+		<table>
+		<thead><tr><td>
 
-				<div class="header-space">
-					&nbsp;
-				</div>
+			<div class="header-space">
+				&nbsp;
+			</div>
 
-			</td></tr></thead>
-			<tbody><tr><td>
+		</td></tr></thead>
+		<tbody><tr><td>
 
-				<div class="content-body">
-					<Content />
-				</div>
+			<div class="content-body">
+				<slot /> <!-- Rendered content -->
+			</div>
 
-			</td></tr></tbody>
-			<tfoot><tr><td>
+		</td></tr></tbody>
+		<tfoot><tr><td>
 
-				<div class="footer-space">
-					&nbsp;
-				</div>
+			<div class="footer-space">
+				&nbsp;
+			</div>
 
-			</td></tr></tfoot>
-			</table>
+		</td></tr></tfoot>
+		</table>
 
-		</div>
 	</div>
-
-</Layout>
+</div>
 
 <style lang="scss" is:global>
-@media print {
-}
-
 @page {
 	size: A4;
 	margin-top: 13.2mm; // Instead of 19mm for the header
@@ -209,12 +178,6 @@ function splitHash(hash: string)
 		}
 	}
 
-	:global(p) {
-		+ :global(ul), + :global(ol) {
-			@apply -mt-4;
-		}
-	}
-
 	:global(ul), :global(ol) {
 		@apply ml-8 list-outside;
 		list-style-type: '-';

app/app/src/config.ts

@@ -2,7 +2,7 @@ import type { AstroUserConfig } from 'astro/config'
 
 export const i18n =
 {
-	defaultLocale: 'en',
+	defaultLocale: 'fr',
 	locales: [
 		{
 			codes: ['en', 'en-US'],

app/app/src/pages/document/[document].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from 'astro:content'
+
+import Layout from '~/layouts/Layout.astro'
+import RenderDocument from '~/components/RenderDocument.astro'
+
+import '@fontsource-variable/noto-serif'
+
+export async function getStaticPaths()
+{
+	const blogEntries = await getCollection('documents');
+	return blogEntries.map((entry: any) =>
+		({
+			params: {
+				document: entry.slug,
+			},
+			props: {
+				entry,
+			},
+		})
+	)
+}
+
+const { entry } = Astro.props
+const { Content, headings } = await (entry as any).render()
+---
+
+<Layout title={headings[0].text}>
+
+	<RenderDocument>
+		<Content />
+	</RenderDocument>
+
+</Layout>

app/app/src/pages/index.astro

@@ -2,52 +2,118 @@
 import { getCollection, getEntry } from 'astro:content'
 import Layout from '~/layouts/Layout.astro'
 
+import logosrc from '~/assets/logo.png?url'
+
 import { i18nFactory } from '~/i18n'
 const _ = i18nFactory(Astro.currentLocale as any)
 
 const documents = await getCollection('documents')
+const privateDocuments = await getCollection('private-documents')
+
+function getTitleFromBody(body: string): string | undefined
+{
+	// Get text from heading 1 in markdown body
+	const match = body.match(/^#\s+(.*)$/m)
+	return match ? match[1] : undefined
+}
 ---
 
 <Layout>
 
+	<div class="header">
+		<img src={logosrc} alt="Logo" />
+		<h1>
+			{_({
+				fr: 'Documents de l\'association Fluff Event',
+				en: 'Fluff Event Association Documents',
+			})}
+		</h1>
+	</div>
+
 	<div class="main">
 
 		<p>
 			<span class="icon icon-[mdi--hand-wave] icon-align icon-fw"></span>
 			{_({
-				en: 'Welcome!',
 				fr: 'Bienvenue !',
+				en: 'Welcome!',
 			})}
 		</p>
 
-		<p>
-			{_({
-				en: 'See association documents:',
-				fr: 'Voir les documents de l\'association :',
-			})}
-		</p>
+		{documents.length > 0
+			? (
+				<p>
+					{_({
+						fr: 'Consulter les documents de l\'association :',
+						en: 'See association documents:',
+					})}
+				</p>
+
+				<ul>
+					{documents.map((document) => (
+						<li>
+							<a href={`/documents/${document.slug}`}>{getTitleFromBody(document.body) || document.slug}</a>
+						</li>
+					))}
+				</ul>
+			)
+			: (
+				<p>
+					{_({
+						fr: 'Aucun document disponible.',
+						en: 'No documents available.',
+					})}
+				</p>
+			)
+		}
+
+		{privateDocuments.length > 0 && (
+			<p>
+				{_({
+					fr: 'Consulter les documents privés de l\'association :',
+					en: 'See association private documents:',
+				})}
+			</p>
 
-		<ul>
-			{documents.map(({ slug }) => (
-				<li>
-					<a href={`/${slug}`}>{slug}</a>
-				</li>
-			))}
-		</ul>
+			<ul>
+				{privateDocuments.map((document) => (
+					<li>
+						<a href={`/private-documents/${document.slug}`}>{getTitleFromBody(document.body) || document.slug}</a>
+					</li>
+				))}
+			</ul>
+		)}
 
 	</div>
 
 </Layout>
 
 <style lang="scss">
-.main {
-	@apply m-2 border-l-2 border-gray-300 px-6 py-4;
+:global(body) {
+	@apply p-6;
+}
+
+.header, .main {
+	@apply mb-8;
+}
+
+.header {
+	@apply flex items-center gap-4;
 }
 
 *:last-child {
 	@apply mb-0;
 }
 
+h1 {
+	@apply text-2xl font-bold;
+}
+
+
+.header img {
+	@apply max-h-12;
+}
+
 p {
 	@apply mb-2;
 }

app/app/src/pages/private-document/[document].astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from 'astro:content'
+
+import Layout from '~/layouts/Layout.astro'
+import RenderDocument from '~/components/RenderDocument.astro'
+
+import '@fontsource-variable/noto-serif'
+
+export async function getStaticPaths()
+{
+	const blogEntries = await getCollection('documents');
+	return blogEntries.map((entry: any) =>
+		({
+			params: {
+				document: entry.slug,
+			},
+			props: {
+				entry,
+			},
+		})
+	)
+}
+
+const { entry } = Astro.props
+const { Content, headings } = await (entry as any).render()
+---
+
+<Layout title={headings[0].text}>
+
+	<RenderDocument>
+		<Content />
+	</RenderDocument>
+
+</Layout>