adding some sort of articles section
This commit is contained in:
@ -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;
|
||||
};
|
||||
|
||||
@ -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" >
|
||||
|
||||
12
src/routes/api/guides/+server.ts
Normal file
12
src/routes/api/guides/+server.ts
Normal file
@ -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);
|
||||
};
|
||||
18
src/routes/guides/+page.svelte
Normal file
18
src/routes/guides/+page.svelte
Normal file
@ -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>
|
||||
@ -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.
|
||||
8
src/routes/guides/+page.ts
Normal file
8
src/routes/guides/+page.ts
Normal file
@ -0,0 +1,8 @@
|
||||
export const load = async ({ fetch }) => {
|
||||
const response = await fetch(`/api/guides`);
|
||||
const guides = await response.json();
|
||||
|
||||
return {
|
||||
guides
|
||||
};
|
||||
};
|
||||
12
src/routes/guides/[slug]/+page.svelte
Normal file
12
src/routes/guides/[slug]/+page.svelte
Normal file
@ -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>
|
||||
11
src/routes/guides/[slug]/+page.ts
Normal file
11
src/routes/guides/[slug]/+page.ts
Normal file
@ -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
|
||||
};
|
||||
}
|
||||
10
src/routes/guides/guides.svelte
Normal file
10
src/routes/guides/guides.svelte
Normal file
@ -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>
|
||||
7
src/routes/guides/one.md
Normal file
7
src/routes/guides/one.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Premier article
|
||||
date: '2023-12-22'
|
||||
author: "Raphaël Maurice Forment"
|
||||
---
|
||||
|
||||
Premier article
|
||||
7
src/routes/guides/three.md
Normal file
7
src/routes/guides/three.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Troisième article
|
||||
date: '2022-12-14'
|
||||
author: "Raphaël Maurice Forment"
|
||||
---
|
||||
|
||||
Troisième article
|
||||
7
src/routes/guides/two.md
Normal file
7
src/routes/guides/two.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Deuxième article
|
||||
date: '2022-12-14'
|
||||
author: "Raphaël Maurice Forment"
|
||||
---
|
||||
|
||||
Second article
|
||||
@ -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>
|
||||
Reference in New Issue
Block a user