add content pages & md suport

package.json

@@ -23,6 +23,8 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@fontsource/outfit": "^5.0.13"
+		"@fontsource/outfit": "^5.0.13",
+		"@ts-stack/markdown": "^1.5.0",
+		"svelte-preprocess": "^6.0.2"
 	}
 }

src/lib/components/ImageLinkTile.svelte

@@ -8,7 +8,7 @@
   export let target = "_self";
 </script>
 
-<div class="hover:invert">
+<div>
   <ImageTile {src}>
     <a {href} {target} class="flex items-center justify-center h-full">
       <slot />

src/lib/components/Markdown.svelte

@@ -0,0 +1,77 @@
+<script>
+  import { Marked, Renderer } from "@ts-stack/markdown";
+  import { onMount } from "svelte";
+
+  Marked.setOptions({
+    renderer: new Renderer(),
+    gfm: true,
+    tables: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: false,
+    smartLists: true,
+    smartypants: false,
+  });
+  /* @type {string} */
+  export let src;
+
+  /* @type {Element[]} */
+  let content = [];
+
+  onMount(async () => {
+    const DOM_PARSER = new DOMParser();
+    const markdown = await (await fetch(src)).text();
+    const parsedMarkdown = DOM_PARSER.parseFromString(
+      Marked.parse(markdown ? markdown : "__nothing to see here__"),
+      "text/html",
+    );
+
+    content = [...parsedMarkdown.body.children];
+    // content.forEach((element) => console.log(element.nodeName));
+  });
+</script>
+
+<div class="markdown">
+  {#if content != null}
+    {#each content as element, i}
+      {@html element.outerHTML}
+    {/each}
+  {/if}
+</div>
+
+<style global>
+  .markdown {
+    color: white;
+  }
+  .markdown h1 {
+    font-size: 2rem;
+  }
+  .markdown h2 {
+    font-size: 1.75rem;
+  }
+  .markdown h3 {
+    font-size: 1.5rem;
+  }
+  .markdown h4 {
+    font-size: 1.25rem;
+  }
+
+  .markdown * {
+    margin-bottom: 1rem;
+  }
+
+  .markdown img {
+    max-height: 60vh;
+  }
+
+  .markdown table, .markdown tr, .markdown th, .markdown td {
+    border-collapse: collapse;
+    border: 1px solid;
+
+    padding: 0.3rem 1rem;
+  }
+
+  .markdown th {
+    font-size: 1.2rem;
+  }
+</style>

src/routes/+page.svelte

@@ -1,32 +1,34 @@
 <script>
   import ImageLinkTile from "$lib/components/ImageLinkTile.svelte";
 
-  import mouse from "$lib/images/mouse.webp";
+  import mouse from "$lib/images/home/mouse.webp";
-  import drummachine from "$lib/images/drummachine.webp";
+  import drummachine from "$lib/images/home/drummachine.webp";
-  import scouts from "$lib/images/scouts.webp";
+  import scouts from "$lib/images/home/scouts.webp";
-  import console_image from "$lib/images/console.webp";
+  import console_image from "$lib/images/home/console.webp";
 </script>
 
-<ImageLinkTile src={console_image} href="">
+<main>
+  <ImageLinkTile src={console_image} href="/informatik">
     <h2 class="text-3xl font-bold text-white hover:underline text-shadow-lg">
       Informatik
     </h2>
-</ImageLinkTile>
+  </ImageLinkTile>
 
-<ImageLinkTile src={scouts} href="https://pfadifrisco.ch/" target="_blank">
+  <ImageLinkTile src={scouts} href="https://pfadifrisco.ch/" target="_blank">
     <h2 class="text-3xl font-bold text-white hover:underline text-shadow-lg">
       Pfadi
     </h2>
-</ImageLinkTile>
+  </ImageLinkTile>
 
-<ImageLinkTile src={mouse} href="">
+  <ImageLinkTile src={mouse} href="/fotos">
     <h2 class="text-3xl font-bold text-white hover:underline text-shadow-lg">
       Fotos
     </h2>
-</ImageLinkTile>
+  </ImageLinkTile>
 
-<ImageLinkTile src={drummachine} href="">
+  <ImageLinkTile src={drummachine} href="/musig">
     <h2 class="text-3xl font-bold text-white hover:underline text-shadow-lg">
-    Musik
+      Musig
     </h2>
-</ImageLinkTile>
+  </ImageLinkTile>
+</main>

src/routes/brief/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+  import ImageTile from "$lib/components/ImageTile.svelte";
+  import Markdown from "$lib/components/Markdown.svelte";
+  import HeadImage from "$lib/images/niklas_bw.webp";
+</script>
+
+<ImageTile src={HeadImage}>
+  <h2
+    class="flex items-center justify-center h-full text-3xl font-bold text-white text-shadow-lg"
+  >
+    ä Brief
+  </h2>
+</ImageTile>
+<main class="flex items-center justify-center pt-8 bg-black min-h-screen px-12">
+  <section class="max-w-screen-md">
+    <Markdown src="Brief.md" />
+  </section>
+</main>

src/routes/fotos/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+  import ImageTile from "$lib/components/ImageTile.svelte";
+  import Markdown from "$lib/components/Markdown.svelte";
+  import HeadImage from "$lib/images/fotos/sunne_untergang.webp";
+</script>
+
+<ImageTile src={HeadImage}>
+  <h2
+    class="flex items-center justify-center h-full text-3xl font-bold text-white text-shadow-lg"
+  >
+    Fotos
+  </h2>
+</ImageTile>
+<main class="flex items-center justify-center pt-8 bg-black min-h-screen px-12">
+  <section class="max-w-screen-md">
+    <Markdown src="Fotos.md" />
+  </section>
+</main>

src/routes/informatik/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+  import ImageTile from "$lib/components/ImageTile.svelte";
+  import Markdown from "$lib/components/Markdown.svelte";
+  import HeadImage from "$lib/images/informatik/monitor.webp";
+</script>
+
+<ImageTile src={HeadImage}>
+  <h2
+    class="flex items-center justify-center h-full text-3xl font-bold text-white text-shadow-lg"
+  >
+    Informatik
+  </h2>
+</ImageTile>
+<main class="flex items-center justify-center pt-8 bg-black min-h-screen px-12">
+  <section class="max-w-screen-md">
+    <Markdown src="Informatik.md" />
+  </section>
+</main>

src/routes/musig/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+  import ImageTile from "$lib/components/ImageTile.svelte";
+  import Markdown from "$lib/components/Markdown.svelte";
+  import HeadImage from "$lib/images/musig/plattespiler.webp";
+</script>
+
+<ImageTile src={HeadImage}>
+  <h2
+    class="flex items-center justify-center h-full text-3xl font-bold text-white text-shadow-lg"
+  >
+    Musig
+  </h2>
+</ImageTile>
+<main class="flex items-center justify-center pt-8 bg-black min-h-screen px-12">
+  <section class="max-w-screen-md">
+    <Markdown src="Musig.md" />
+  </section>
+</main>

svelte.config.js

@@ -1,10 +1,11 @@
 import adapter from '@sveltejs/adapter-auto';
+import { sveltePreprocess } from 'svelte-preprocess';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
   kit: {
     adapter: adapter()
   },
-  preprocess: vitePreprocess()
+  preprocess: [vitePreprocess(), sveltePreprocess({})]
 };
 export default config;