Chalarangelo/30-seconds-of-code

---
import { promises as fs } from 'fs';
import path from 'path';

import Layout from '#src/astro/layouts/Layout.astro';
import Hero from '#src/astro/components/Hero.astro';
import Pagination from '#src/astro/components/Pagination.astro';
import PreviewList from '#src/astro/components/PreviewList.astro';
import Chips from '#src/astro/components/Chips.astro';

export async function getStaticPaths() {
  const pagePath = path.join(
    process.cwd(),
    '.content',
    'pages',
    '[lang]',
    '[...listing].json'
  );
  const pageData = await fs.readFile(pagePath, 'utf8').then(JSON.parse);
  return Object.values(pageData).map(({ params, props }) => {
    return {
      params: {
        lang: params.lang,
        listing: params.listing.join('/'),
      },
      props,
    };
  });
}

const {
  slug,
  pagination = null,
  collection,
  collectionItems,
  largeImages = false,
  pageDescription,
  structuredData,
} = Astro.props;
---

<Layout
  title={structuredData ? structuredData.name : collection.title}
  description={pageDescription}
  logoSrc={collection.cover ? collection.cover : undefined}
  structuredData={structuredData}
  canonical={slug}
>
  <main slot='main-content'>
    <Hero
      title={collection.title}
      description={collection.content}
      cover={collection.cover}
      coverSrcset={collection.coverSrcset}
    />
    {
      collection.sublinks.length ? (
        <Chips items={collection.sublinks} />
      ) : <div aria-hidden='true' data-area-gap />
    }
    <PreviewList contentItems={collectionItems} largeImages={largeImages}>
      {pagination ? <Pagination pagination={pagination} slot='bottom-nav' /> : null}
    </PreviewList>
  </main>
</Layout>