Updated

src/content/articles/lets-make-this.md

@@ -4,6 +4,7 @@ title: "Let’s Make This Hello World Joke More Interesting"
 subtitle: "hello_world(“print”)"
 date: "Sep 23, 2024"
 minutes: 8
-url: "read/lets-make-this.astro"
+url: "read/lets-make-this"
 ---
 
+An icon is a small image or symbol used to represent a concept, idea, or, in this case, a function or a technological indication. And digital icons are found everywhere, especially on software and website designs. Thanks to online resources like Material Fonts, Flaticon, Font Awesome, and many more.

src/pages/read/5-tech-icons.astro

@@ -1,20 +0,0 @@
----
-import Layout from '../../layouts/Layout.astro'
-import * as fiveTech from '../../content/articles/5-tech-icons.md'
-import Article from '../../components/Article.astro'
-
-const title = fiveTech.frontmatter.title
-const content = await fiveTech.compiledContent()
----
-
-<Layout title={title}>
-  <main class="page">
-    <Article title={fiveTech.frontmatter.title} subtitle={fiveTech.frontmatter.subtitle} category={fiveTech.frontmatter.category} date={fiveTech.frontmatter.date} minutes={fiveTech.frontmatter.minutes} content={content} />
-  </main>
-</Layout>
-
-<style lang="sass">
-  @media only screen and (max-width: 767px)
-    .title
-      font-size: 3rem
-</style>

src/pages/read/[article].astro

@@ -1,42 +1,26 @@
 ---
 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'
+import ArticleComponent from '../../components/Article.astro'
 
 export async function getStaticPaths() {
-  // const articles: any = await Astro.glob('../../content/articles/*.md')
-  // const paths = articles.map((article: any) => ({ params: { story: article.frontmatter.slug } }))
-  // return paths
-  return [{ params: { article: '5-tech-icons' } }, { params: { article: 'lets-make-this' } }]
+  const articles: any = await Astro.glob('../../content/articles/*.md')
+  const paths = articles.map((article: any) => ({
+    params: { article: article.frontmatter.slug },
+  }))
+  return paths
 }
+
 const { article } = Astro.params
 
-let title = ''
-let content = ''
-
-if (article === fiveTech.frontmatter.slug) {
-  title = fiveTech.frontmatter.title
-  content = await fiveTech.compiledContent()
-} else if (article === letsMake.frontmatter.slug) {
-  title = letsMake.frontmatter.title
-  content = await letsMake.compiledContent()
-}
+// Dynamically import the article based on the slug
+const articleModule: any = await import(`../../content/articles/${article}.md`)
+const frontmatter = articleModule.frontmatter
+const content = await articleModule.compiledContent()
 ---
 
-<Layout title={title}>
+<Layout title={frontmatter.title}>
   <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} /> -->
+    <ArticleComponent title={frontmatter.title} subtitle={frontmatter.subtitle} category={frontmatter.category} date={frontmatter.date} minutes={frontmatter.minutes} content={content} />
   </main>
 </Layout>