---
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: 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 { 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()
}
---

<Layout title={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} /> -->
  </main>
</Layout>

<style lang="sass">
  @media only screen and (max-width: 767px)
    .title
      font-size: 3rem
</style>