Blog listing

src/routes/Projects/Project.svelte

@@ -25,6 +25,7 @@
     class="project__gallery grid gap-1 grid-flow-col mb-4 mt-auto md:rounded"
   >
     {#each project.images as image}
+      <!-- svelte-ignore a11y-no-noninteractive-element-interactions a11y-click-events-have-key-events -->
       <img
         class="rounded"
         alt={`${$t(project.nameSlug)} screenshot`}

src/routes/blog/+page.server.ts

@@ -1,18 +1,14 @@
+import {metadata as htmlInCssMetadata} from "./html-in-css/+page.svx"
+
+const posts = [
+  {
+    href: '/blog/html-in-css',
+    ...htmlInCssMetadata
+  }
+]
+
 export const load = async () => {
-  const posts = import.meta.glob("./**/*.svx", {eager: true})
-  const postPaths = Object.keys(posts)
-
-  const pages = await Promise.all(postPaths.map(async (pp) => {
-    const {metadata} = await import(pp)
-    return {
-      path: pp
-        .replace('/+page.svx', '')
-        .replace('.', '/blog'),
-      ...metadata
-    }
-  }))
-
   return {
-    pages
+    posts
   }
 }

src/routes/blog/+page.svelte

@@ -3,9 +3,9 @@
 </script>
 
 <section class="px-2 md:px-8 mb-16 max-w-[1280px] mx-auto">
-  {#each data.pages as page}
-    <a href={page.path}>
-      <h2 class="text-3xl mb-4 md:text-4xl">{page.title}</h2>
+  {#each data.posts as post}
+    <a href={post.href}>
+      <h2 class="text-3xl mb-4 md:text-4xl">{post.title}</h2>
     </a>
   {/each}
 </section>