Test push of first markdown project

package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^1.0.0-next.50",
 		"@sveltejs/kit": "^1.20.4",
+		"mdsvex": "^0.11.0",
 		"sass": "^1.69.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",

src/MDLayout.svelte

@@ -0,0 +1,9 @@
+<div class="markdown">
+  <slot />
+</div>
+
+<style lang="scss">
+  .markdown {
+    position: relative;
+  }
+</style>

src/lib/components/ImageGallery.svelte

@@ -5,7 +5,7 @@
   import ImageLoader from "$lib/components/common/ImageLoader.svelte";
   import { loadImagesFromModule } from "$lib/util";
   import { playgroundModules, PlaygroundModule } from "$lib/imageModules";
-  import data from "$lib/data/playground.yml";
+  import data from "$lib/data/yml/playground.yml";
 
   export let module: PlaygroundModule;
   let dataTyped: PlaygroundYaml[] = data.images;
@@ -34,6 +34,7 @@
       {#if !image.filename.includes("-video")}
         {@const id = parseInt(image.filename) - 1}
         {@const title = dataTyped[id].title ?? "Untitled"}
+        {@const date = dataTyped[id].date}
         {@const isVideo = dataTyped[id].video ?? false}
         {@const imageData = Object.assign(image, dataTyped[id])}
 
@@ -42,7 +43,7 @@
             <!-- svelte-ignore a11y-media-has-caption -->
             <video poster={image.url} controls>
               {console.log(images)}
-                <source src={images[i+1].url} type="video/mp4" />
+              <source src={images[i + 1].url} type="video/mp4" />
             </video>
           </div>
         {:else}
@@ -52,7 +53,7 @@
             class="item"
             on:click={() => openModal(GalleryModal, { imageData: imageData })}>
             <div class="hover-overlay" />
-            <p>{title}<br /><small><i>{imageData.date}</i></small></p>
+            <p>{title}<br /><small><i>{date}</i></small></p>
             <LazyImage src={image.url} alt={title} />
           </div>
         {/if}

src/lib/components/timeline/Timeline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { pxStringToFloat } from "$lib/util";
-  import data from "$lib/data/projects.yml";
+  import data from "$lib/data/yml/projects.yml";
   import TimeNode from "./TimeNode.svelte";
   import TimelineFill from "./TimelineFill.svelte";
   import { onMount } from "svelte";

src/lib/data/md/re-store.md

@@ -0,0 +1,34 @@
+---
+title: Re:STORE
+date: 2021
+---
+
+<script lang="ts">
+  import "$lib/scss/markdown.scss";
+  import banner from "$lib/images/md-assets/re-store/banner.png";
+  import altBanner from "$lib/images/md-assets/re-store/alt-banner.png";
+  import screenshot from "$lib/images/md-assets/re-store/screenshot.png";
+  import assets from "$lib/images/md-assets/re-store/assets.png";
+</script>
+
+<img alt="Re:STORE banner" src={banner}>
+
+<div class="split">
+    <img alt="Re:STORE in-game screenshot" src={screenshot}>
+    <div>
+
+        ### Introduction 
+
+        RE:Store is an isometric shooter featuring a potion-wielding shopkeeper. When your toy store is taken over by cursed, murderous teddy bears, you must "restore" your store back to its former state with your potions.
+
+        *MEGA Newbies and Vets Game Jam 2021*
+        
+    </div>
+</div>
+
+### Game assets
+
+<img alt="Re:STORE in-game assets" src={assets}>
+
+<img alt="Re:STORE ending banner" src={altBanner}>
+

src/lib/data/yml/archive.yml

@@ -0,0 +1,9 @@
+# next_id: 2
+projects:
+  - id: 1
+    title: Re:STORE
+    desc: Your toy shop is suddenly taken over by murderous teddy bears! Use your potions to restore them back to their normal state and save your store.
+    date: 2021
+    slug: /archive/re-store
+    link: https://jteaaa.itch.io/re-store
+    link_text: Play the game

src/lib/scss/markdown.scss

@@ -0,0 +1,10 @@
+img {
+    width: 100%;
+    margin: 1em 0;
+}
+
+.split {
+    display: inline-grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 3em;
+}

src/routes/(app)/archive/+page.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
   import Heading from "$lib/components/common/Heading.svelte";
+  import LazyImage from "$lib/components/common/LazyImage.svelte";
+  import data from "$lib/data/yml/archive.yml";
+
+  let projects: any = data.projects;
 </script>
 
 <svelte:head>
@@ -11,3 +15,10 @@
   Older and smaller projects for record-keeping. Game jams, hackathons, and
   other projects that didn't make the main page.
 </p>
+
+{#each projects as project}
+  <a href={project.slug}
+    ><p>{project.title}<br /><small><i>{project.date}</i></small></p>
+    <!-- <LazyImage src={image.url} alt={title} /> -->
+  </a>
+{/each}

src/routes/(app)/archive/[slug]/+page.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  /** @type {import('./$types').PageData} */
+  export let data: any;
+</script>
+
+<svelte:head>
+  <title>{data.title} | Milkcee Studios</title>
+</svelte:head>
+
+<p>
+  <a href="/archive">Archive</a> &gt;
+  <a href="/archive/{data.slug}">{data.title}</a>
+</p>
+
+<h2 class="title">{data.title}</h2>
+<p>{data.date}</p>
+
+<svelte:component this={data.content}/>
+
+<style lang="scss">
+    .title {
+        margin-bottom: 0;
+    }
+</style>

src/routes/(app)/archive/[slug]/+page.ts

@@ -0,0 +1,19 @@
+import { error } from "@sveltejs/kit";
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params }) {
+  const modules = import.meta.glob("../../../../lib/data/md/*.md");
+  const project: any = await modules[
+    `../../../../lib/data/md/${params.slug}.md`
+  ]();
+
+  const { title, date } = project.metadata;
+  const content = project.default;
+
+  return {
+    slug: params.slug,
+    title: title,
+    date: date,
+    content: content,
+  };
+}

svelte.config.js

@@ -1,11 +1,23 @@
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { mdsvex } from 'mdsvex';
+
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: vitePreprocess(),
+	preprocess: [
+		vitePreprocess(),
+		mdsvex({
+			extensions: ['.md'],
+			layout: {
+				_: './src/MDLayout.svelte'
+			},
+		}),
+	],
+
+	extensions: ['.svelte', '.md'],
 
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.