Add MDsveX and projects page

packages/website/src/routes/(tools)/bookmarklets/+page.svelte

@@ -3,6 +3,8 @@
     import SvelteSeo from "svelte-seo";
     import { bookmarkify, parseMeta } from "./bookmarklets";
     import type { Config } from "./config";
+    
+    import { SITE_URL } from '$lib/metadata';
 
     /** @type {import('./$types').Snapshot<string>} */
     export const snapshot = {
@@ -29,7 +31,7 @@
 <SvelteSeo
     title="Bookmarklet Maker"
     description="Make booklets in your browser with this tool. Make handy shortcuts to save time."
-    canonical="https://jade.ellis.link/bookmarklets"
+    canonical={SITE_URL + "/bookmarklets"}
 />
 <h1>Bookmarklet Maker</h1>
 <Editor

packages/website/src/routes/projects/[slug]/+page.server.ts

@@ -0,0 +1,18 @@
+import { pages } from './projects'
+import { error } from '@sveltejs/kit'
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+    const { slug } = params
+
+    // get post with metadata
+    const page = pages.find((post) => slug === post.slug)
+
+    if (!page) {
+        throw error(404, 'Post not found')
+    }
+
+    return {
+        page
+    }
+}

packages/website/src/routes/projects/[slug]/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    // https://github.com/mattjennings/sveltekit-blog-template/blob/main/src/routes/post/%5Bslug%5D/%2Bpage.svelte
+    
+    import SvelteSeo from "svelte-seo";
+    export let data;
+    import { SITE_URL } from '$lib/metadata';
+</script>
+
+<SvelteSeo
+    title={data.post.title}
+    canonical={SITE_URL + "/projects/" + data.post.slug}
+/>
+<h1>{data.post.title}</h1>
+<svelte:component this={data.component} />

packages/website/src/routes/projects/[slug]/+page.ts

@@ -0,0 +1,21 @@
+// import { pages } from './projects'
+import { error } from '@sveltejs/kit'
+
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ data }) {
+
+    // if (!post) {
+    //   throw error(404, 'Post not found')
+    // }
+    // load the markdown file based on slug
+    const component =
+        // await import(data.page.filepath)
+        await import("Notes/Projects/" + data.page.filepath.name + ".md")
+    // console.log(data.page.filepath)
+
+    return {
+        post: data.page,
+        component: component.default
+    }
+}

packages/website/src/routes/projects/[slug]/posts.ts

@@ -0,0 +1,61 @@
+// import { browser } from '$app/environment'
+// import { format } from 'date-fns'
+// import { parse } from 'node-html-parser'
+// import readingTime from 'reading-time/lib/reading-time.js'
+
+// // we require some server-side APIs to parse all metadata
+// if (browser) {
+//   throw new Error(`posts can only be imported server-side`)
+// }
+
+// // Get all posts and add metadata
+// export const posts = Object.entries(import.meta.glob('/posts/**/*.md', { eager: true }))
+//   .map(([filepath, post]) => {
+//     const html = parse(post.default.render().html)
+//     const preview = post.metadata.preview ? parse(post.metadata.preview) : html.querySelector('p')
+
+//     return {
+//       ...post.metadata,
+
+//       // generate the slug from the file path
+//       slug: filepath
+//         .replace(/(\/index)?\.md/, '')
+//         .split('/')
+//         .pop(),
+
+//       // whether or not this file is `my-post.md` or `my-post/index.md`
+//       // (needed to do correct dynamic import in posts/[slug].svelte)
+//       isIndexFile: filepath.endsWith('/index.md'),
+
+//       // format date as yyyy-MM-dd
+//       date: post.metadata.date
+//         ? format(
+//             // offset by timezone so that the date is correct
+//             addTimezoneOffset(new Date(post.metadata.date)),
+//             'yyyy-MM-dd'
+//           )
+//         : undefined,
+
+//       preview: {
+//         html: preview.toString(),
+//         // text-only preview (i.e no html elements), used for SEO
+//         text: preview.structuredText ?? preview.toString()
+//       },
+
+//       // get estimated reading time for the post
+//       readingTime: readingTime(html.structuredText).text
+//     }
+//   })
+//   // sort by date
+//   .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+//   // add references to the next/previous post
+//   .map((post, index, allPosts) => ({
+//     ...post,
+//     next: allPosts[index - 1],
+//     previous: allPosts[index + 1]
+//   }))
+
+// function addTimezoneOffset(date) {
+//   const offsetInMilliseconds = new Date().getTimezoneOffset() * 60 * 1000
+//   return new Date(new Date(date).getTime() + offsetInMilliseconds)
+// }

packages/website/src/routes/projects/[slug]/projects.ts

@@ -0,0 +1,33 @@
+import { browser } from '$app/environment'
+// import { format } from 'date-fns'
+
+import slugify from 'slugify';
+import { parse, format, relative } from "node:path";
+
+// we require some server-side APIs to parse all metadata
+if (browser) {
+    throw new Error(`posts can only be imported server-side`)
+}
+
+export const pages = Object.entries(import.meta.glob('/node_modules/Notes/Projects/*.md', { eager: true }))
+    .map(([filepath, post]) => {
+        let path = parse(filepath);
+        let slug = slugify(path.name, { lower: true })
+        return {
+            title: path.name,
+            // @ts-ignore
+            ...post.metadata,
+            slug,
+            // filepath: relative(import.meta.dirname, filepath)
+            filepath: path
+        }
+    })
+// Get all posts and add metadata
+// sort by date
+// .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+// // add references to the next/previous post
+// .map((post, index, allPosts) => ({
+//   ...post,
+//   next: allPosts[index - 1],
+//   previous: allPosts[index + 1]
+// }))

packages/website/src/routes/sitemap[[page]].xml/+server.ts

@@ -3,9 +3,31 @@ import * as sitemap from 'super-sitemap';
 import { SITE_URL } from '$lib/metadata';
 import type { RequestHandler } from '@sveltejs/kit';
 
+import slugify from 'slugify';
+
+import { parse, format } from "node:path";
+
+const pages = Object.entries(import.meta.glob('/node_modules/Notes/Projects/*.md', { eager: true }))
+    .map(([filepath, post]) => {
+        return parse(filepath)
+    })
+    .map((path) => {
+        return format({
+            // ...path,
+            name: slugify(path.name, { lower: true }),
+            // base: undefined,
+            // root: "",
+            // ext: undefined,
+            // dir: path.dir.replace("/node_modules/Notes/Projects", "")
+        })
+    })
+
 export const GET: RequestHandler = async ({ params }) => {
     return await sitemap.response({
         origin: SITE_URL,
         page: params.page,
+        paramValues: {
+            '/projects/[slug]': pages
+        }
     });
 };