freesewing/sites/dev/pages/[...slug].mjs

// Used in static paths
import { pages } from 'site/prebuild/docs.en.mjs'
// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { loadMdxAsStaticProps } from 'shared/mdx/load.mjs'
// Hooks
import { useState } from 'react'
// Components
import { PageWrapper, ns } from 'shared/components/wrappers/page.mjs'
//import { components } from 'shared/components/mdx/index.mjs'
import { MdxWrapper } from 'shared/components/wrappers/mdx.mjs'
import { Toc } from 'shared/components/mdx/toc.mjs'
import { MdxMetaData } from 'shared/components/mdx/meta.mjs'
import { PrevNext } from 'shared/components/prev-next.mjs'
import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
import {
  BaseLayout,
  BaseLayoutLeft,
  BaseLayoutProse,
  BaseLayoutRight,
} from 'shared/components/base-layout.mjs'
import { NarrowIcon, WideIcon } from 'shared/components/icons.mjs'

/*
 * This page is auto-generated by the prebuild script.
 * Any changes you make will be overwritten on the next (pre)build.
 *
 * See the page-templates folder for more info.
 */
const DocsPage = ({ page, slug, frontmatter, mdx, mdxSlug }) => {
  const [wide, setWide] = useState(false)

  return (
    <PageWrapper {...page} title={frontmatter.title} intro={frontmatter.intro}>
      <BaseLayout>
        <BaseLayoutLeft>
          <MainSections />
          <NavLinks />
        </BaseLayoutLeft>
        <BaseLayoutProse wide={wide}>
          <div className="w-full">
            <div className="flex flex-row gap-2">
              <div className="grow">
                <Breadcrumbs />
              </div>
              <button className="hidden lg:inline" onClick={() => setWide(!wide)}>
                {wide ? <NarrowIcon className="w-8 h-8" /> : <WideIcon className="w-8 h-8" />}
              </button>
            </div>
            <h1 className="break-words searchme">{frontmatter.title}</h1>
            <div className="block xl:hidden">
              <Toc toc={frontmatter.toc} wrap />
            </div>
          </div>
          <MdxWrapper mdx={mdx} site="dev" slug={mdxSlug} wide={wide} />
          <PrevNext slug={slug} />
        </BaseLayoutProse>
        <BaseLayoutRight>
          <MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
          <div className="hidden xl:block">
            <Toc toc={frontmatter.toc} wrap />
          </div>
        </BaseLayoutRight>
      </BaseLayout>
    </PageWrapper>
  )
}

export default DocsPage

/*
 * getStaticProps() is used to fetch data at build-time.
 * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
 */
export async function getStaticProps({ params }) {
  return {
    props: {
      ...(await serverSideTranslations('en', ['docs', 'tutorial', 'popout', ...ns])),
      ...(await loadMdxAsStaticProps({
        language: 'en',
        site: 'dev',
        slug: params.slug.join('/'),
      })),
      slug: params.slug.join('/'),
      mdxSlug: params.slug,
      page: {
        locale: 'en',
        path: params.slug,
      },
    },
  }
}

/*
 * getStaticPaths() is used to specify for which routes (think URLs)
 * this page should be used to generate the result.
 *
 * On this page, it is returning a list of routes (think URLs) for all
 * the mdx (markdown) content.
 *
 * To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
 */
export async function getStaticPaths() {
  return {
    paths: Object.keys(pages).map((slug) => '/' + slug),
    fallback: false,
  }
}