Update

src/pages/read/[article].astro

@@ -0,0 +1,46 @@
+---
+import Layout from '../../layouts/Layout.astro'
+import Article from '../../components/Article.astro'
+
+import { Picture } from 'astro:assets'
+
+import * as fiveTech from '../../content/articles/5-tech-icons.md'
+import * as letsMake from '../../content/articles/lets-make-this.md'
+
+export async function getStaticPaths() {
+  const articles = await Astro.glob('../../content/articles/*.md')
+  const paths = articles.map((article: any) => ({ params: { story: article.frontmatter.slug } }))
+  return paths
+}
+const { story } = Astro.params
+
+let title = ''
+let content = ''
+
+if (story === fiveTech.frontmatter.slug) {
+  title = fiveTech.frontmatter.title
+  content = await fiveTech.compiledContent()
+} else if (story === letsMake.frontmatter.slug) {
+  title = letsMake.frontmatter.title
+  content = await letsMake.compiledContent()
+}
+---
+
+<Layout title="Read" description="Story Page - <story>">
+  <main class="page">
+    <section class="toolbar">
+      <a href="/" style="text-decoration: none; color: inherit;" aria-label="Go to index page">
+        <div class="toolbar--title" style="text-decoration: none; color: inherit;">Snuffverse</div>
+      </a>
+    </section>
+
+    <Article title={title} />
+    <p set:html={content} />
+  </main>
+
+  <style lang="sass">
+    @media only screen and (max-width: 767px)
+      .title
+        font-size: 3rem
+  </style>
+</Layout>