adding some sort of articles section

mdsvex.config.js

@@ -2,6 +2,9 @@ import { defineMDSveXConfig as defineConfig } from "mdsvex";
 
 const config = defineConfig({
   extensions: [".svelte.md", ".md", ".svx"],
+  layout: {
+    guides: 'src/routes/guides/guides.svelte'
+  },
 
   smartypants: {
     dashes: "oldschool",
@@ -11,4 +14,4 @@ const config = defineConfig({
   rehypePlugins: [],
 });
 
-export default config;
+export default config;

public/favicon/browserconfig.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<browserconfig>
-    <msapplication>
-        <tile>
-            <square150x150logo src="/mstile-150x150.png"/>
-            <TileColor>#ffc40d</TileColor>
-        </tile>
-    </msapplication>
-</browserconfig>

public/favicon/safari-pinned-tab.svg

@@ -1,16 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="1350.000000pt" height="1350.000000pt" viewBox="0 0 1350.000000 1350.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.14, written by Peter Selinger 2001-2017
-</metadata>
-<g transform="translate(0.000000,1350.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M13310 8119 c-1618 -85 -3061 -244 -4722 -519 -1678 -279 -3360 -641
--5698 -1226 -623 -156 -995 -251 -2467 -630 l-423 -109 0 -2117 0 -2118 6750
-0 6750 0 0 3365 c0 3199 -1 3365 -17 3364 -10 -1 -88 -6 -173 -10z"/>
-</g>
-</svg>

src/lib/utils.ts

@@ -5,9 +5,20 @@ export const shuffleArray = (array: any[]) => {
   }
 };
 
-function changePage(pages: any, pageName: string): void {
-  const pageKey = pageName.toLowerCase();
-  if (pages[pageKey as keyof typeof pages]) {
-    active_page = pages[pageKey as keyof typeof pages];
-  }
-}
+export const fetchMarkdownGuides = async () => {
+const allPostFiles = import.meta.glob('/src/routes/guides/*.md');
+const iterablePostFiles = Object.entries(allPostFiles);
+
+const allPosts = await Promise.all(
+  iterablePostFiles.map(async ([path, resolver]) => {
+    const { metadata } = await (resolver() as Promise<{ metadata: any }>);
+    const postPath = path.slice(11, -3);
+    return {
+      meta: metadata,
+      path: postPath
+    };
+  })
+);
+
+	return allPosts;
+};

src/routes/+layout.svelte

@@ -10,8 +10,7 @@
     <nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
       <div class="flex items-center justify-between">
         <a href="/" class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
-          >livecoding.fr</a
-        >
+          >livecoding.fr</a>
         <!-- Mobile menu button -->
         <div on:click={toggleNavbar} class="flex md:hidden">
           <button type="button" class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400" >

src/routes/api/guides/+server.ts

@@ -0,0 +1,12 @@
+import { fetchMarkdownGuides } from '$lib/utils';
+import { json } from '@sveltejs/kit';
+
+export const GET = async () => {
+    const allPosts = await fetchMarkdownGuides();
+
+    const sortedPosts = allPosts.sort((a, b) => {
+        return new Date(b.meta.date).getTime() - new Date(a.meta.date).getTime();
+    });
+
+    return json(sortedPosts);
+};

src/routes/guides/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+	export let data;
+</script>
+
+<h1>Blog</h1>
+
+<ul>
+	{#each data.guides as post}
+		<li class="px-4 my-4 rounded-lg bg-base-300 dark:bg-base-300">
+			<h2>
+				<a href={post.path}>
+					{post.meta.title}
+				</a>
+			</h2>
+			<p class="pt-2">Publié le : {post.meta.date} par {post.meta.author}</p>
+		</li>
+	{/each}
+</ul>

src/routes/guides/+page.svelte.md

@@ -1,8 +0,0 @@
-<svelte:head>
-    <title>Guides</title> 
-</svelte:head>
-
-# Guides
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec odio et
-quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec.

src/routes/guides/+page.ts

@@ -0,0 +1,8 @@
+export const load = async ({ fetch }) => {
+	const response = await fetch(`/api/guides`);
+	const guides = await response.json();
+
+	return {
+		guides
+	};
+};

src/routes/guides/[slug]/+page.svelte

@@ -0,0 +1,12 @@
+<script>
+	export let data;
+</script>
+
+<article>
+	<h1>{data.title}</h1>
+	<div class="pt-4 flex justify-between">
+		<p class="inline font-bold">Publié le : {data.date}</p>
+		<p class="inline font-bold">Auteur : {data.author}</p>
+	</div>
+	<svelte:component this={data.content} />
+</article>

src/routes/guides/[slug]/+page.ts

@@ -0,0 +1,11 @@
+export async function load({ params }) {
+	const post = await import(`../${params.slug}.md`);
+	const { title, date, author} = post.metadata;
+	const content = post.default;
+	return {
+		content,
+		title,
+		date,
+		author
+	};
+}

src/routes/guides/guides.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    //@ts-ignore
+	export let title;
+    //@ts-ignore
+	export let date;
+</script>
+
+<svelte:head>
+    <title>{title}</title> 
+</svelte:head>

src/routes/guides/one.md

@@ -0,0 +1,7 @@
+---
+title: Premier article
+date: '2023-12-22'
+author: "Raphaël Maurice Forment"
+---
+
+Premier article

src/routes/guides/three.md

@@ -0,0 +1,7 @@
+---
+title: Troisième article
+date: '2022-12-14'
+author: "Raphaël Maurice Forment"
+---
+
+Troisième article

src/routes/guides/two.md

@@ -0,0 +1,7 @@
+---
+title: Deuxième article
+date: '2022-12-14'
+author: "Raphaël Maurice Forment"
+---
+
+Second article

src/routes/posts/+page.svelte

@@ -1,187 +0,0 @@
-<script lang="ts">
-  import Accueil from "$lib/base/Accueil.svelte.md";
-  import Evenements from "$lib/base/Evenements.svelte.md";
-  import Contact from "$lib/base/Contact.svelte.md";
-  import Presse from "$lib/base/Presse.svelte.md";
-  import Membres from "$lib/base/Membres.svelte.md";
-  import Outils from "$lib/base/Outils.svelte.md";
-  import Reseaux from "$lib/base/Reseaux.svelte.md";
-  import Ressources from "$lib/base/Ressources.svelte.md";
-  const pages = {
-    accueil: Accueil,
-    evenements: Evenements,
-    membres: Membres,
-    outils: Outils,
-    réseaux: Reseaux,
-    presse: Presse,
-    ressources: Ressources,
-    contact: Contact,
-  };
-  let active_page = pages["accueil"];
-
-  let showMenu = false;
-
-  function toggleNavbar() {
-    showMenu = !showMenu;
-  }
-
-  /**
-   * Changes the active page based on the provided page name.
-   *
-   * @param {string} pageName - The name of the page to activate.
-   */
-  function changePage(pageName: string): void {
-    const pageKey = pageName.toLowerCase(); // Convert to lowercase to match the keys in the pages object.
-    if (pages[pageKey]) {
-      active_page = pages[pageKey];
-    }
-  }
-</script>
-
-<div>
-  <div class="bg-neutral-800 dark:bg-base-300">
-    <nav class="pl-8 py-2 md:flex md:justify-between md:items-center pr-8">
-      <div class="flex items-center justify-between">
-        <a
-          on:click={() => changePage("Accueil")}
-          class="text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-orange-300 to-orange-200 uppercase"
-          >livecoding.fr</a
-        >
-        <!-- Mobile menu button -->
-        <div on:click={toggleNavbar} class="flex md:hidden">
-          <button
-            type="button"
-            class="text-gray-100 hover:text-gray-400 focus:outline-none focus:text-gray-400"
-          >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="w-6 h-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <!-- Mobile Menu open: "block", Menu closed: "hidden" -->
-      <div
-        class="flex-col mt-8 space-y-4 md:flex md:space-y-0 md:flex-row md:items-center md:space-x-10 md:mt-0 {showMenu
-          ? 'flex'
-          : 'hidden'}"
-      >
-        <a
-          on:click={() => changePage("Evenements")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden"
-          >Évènements</a
-        >
-        <a
-          on:click={() => changePage("Membres")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden">Membres</a
-        >
-        <a
-          on:click={() => changePage("Outils")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden">Outils</a
-        >
-        <a
-          on:click={() => changePage("Réseaux")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden">Réseaux</a
-        >
-        <a
-          on:click={() => changePage("Ressources")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden"
-          >Ressources</a
-        >
-        <a
-          on:click={() => changePage("Presse")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden">Presse</a
-        >
-        <a
-          on:click={() => changePage("Contact")}
-          class="text-gray-100 hover:text-orange-300 flex md:hidden">Contact</a
-        >
-      </div>
-    </nav>
-  </div>
-</div>
-
-<main class="bg-gray-100 dark:bg-base-100">
-  <div class="drawer lg:drawer-open">
-    <input id="my-drawer-2" type="checkbox" class="drawer-toggle" />
-    <div class="drawer-content space-y-4 flex flex-col lg:px-16 px-4 py-8">
-      <svelte:component this={active_page} />
-    </div>
-    <div class="drawer-side">
-      <label
-        for="my-drawer-2"
-        aria-label="close sidebar"
-        class="drawer-overlay"
-      />
-      <ul
-        class="menu p-4 w-40 min-h-full bg-neutral-800 dark:bg-base-300 text-base-content"
-      >
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Evenements")}>Évènements</a
-          >
-        </li>
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Membres")}>Membres</a
-          >
-        </li>
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Outils")}>Outils</a
-          >
-        </li>
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Réseaux")}>Réseaux</a
-          >
-        </li>
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Ressources")}>Ressources</a
-          >
-        </li>
-
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Presse")}>Presse</a
-          >
-        </li>
-        <li class="text-xl">
-          <a
-            class="text-white hover:text-orange-300"
-            on:click={() => changePage("Contact")}>Contact</a
-          >
-        </li>
-      </ul>
-    </div>
-  </div>
-
-  <footer
-    class="footer ml-0 pl-0 pb-4 pt-4 bg-neutral-800 dark:bg-base-300 justify-between pr-16"
-  >
-    <p class="indent-4 text-bold text-white">Raphaël Forment</p>
-    <p>
-      <a class="pl-4" href="https://github.com/Bubobubobubobubo/livecodingfr"
-        >GitHub</a
-      >
-    </p>
-  </footer>
-</main>