---
import Layout from '../../layouts/Layout.astro'
import ArticleComponent from '../../components/Article.astro'
import { Page, Column } from '../../../@dasig'

export async function getStaticPaths() {
  const articles: any = Object.values(import.meta.glob('../../content/articles/*.md', { eager: true }))
  const paths = articles.map((article: any) => ({
    params: { article: article.frontmatter.slug },
  }))
  return paths
}

const { article } = Astro.params

const articleModule: any = await import(`../../content/articles/${article}.md`)
const frontmatter = articleModule.frontmatter
const content = await articleModule.compiledContent()
---

<Layout title={frontmatter.title}>
  <Page>
      <ArticleComponent title={frontmatter.title} subtitle={frontmatter.subtitle} category={frontmatter.category} date={frontmatter.date} minutes={frontmatter.minutes} content={content} />
  </Page>
</Layout>

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