VSinerva/freesewing
1
0
Fork 0
Code Activity

chore(dev): Updated docs page layout

Browse source
This commit is contained in:
joostdecock 2023-07-15 10:38:10 +02:00
parent bb8eef0504
commit 3a5a00fcfe
1 changed files with 26 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

31
sites/dev/pages/[...slug].mjs
View file

@ -4,6 +4,7 @@ import { mdxPaths } from 'site/prebuild/mdx-paths.en.mjs'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
// Hooks
import { useState, useEffect } from 'react'
import { useNavigation } from 'site/hooks/use-navigation.mjs'
// Components
import Head from 'next/head'
import { PageWrapper, ns } from 'shared/components/wrappers/page.mjs'
@ -13,6 +14,8 @@ 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 { ReadMore } from 'shared/components/mdx/read-more.mjs'
import { NavLinks, Breadcrumbs, MainSections } from 'shared/components/navigation/sitenav.mjs'
/*
* This page is auto-generated by the prebuild script.
@ -23,6 +26,11 @@ import { PrevNext } from 'shared/components/prev-next.mjs'
const DocsPage = ({ page, slug }) => {
const [frontmatter, setFrontmatter] = useState({ title: 'FreeSewing.dev' })
const [MDX, setMDX] = useState(<Spinner />)
/*
* Get the siteNav object from the useNavigation hook
* FIXME: ignorecontrol is not yet implmented here
*/
const { siteNav } = useNavigation({ ignoreControl: true })
/* Load MDX dynamically */
useEffect(() => {
@ -56,17 +64,28 @@ const DocsPage = ({ page, slug }) => {
<meta property="og:site_name" content="freesewing.dev" key="site" />
<title>{frontmatter.title} - FreeSewing.dev</title>
</Head>
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end">
{frontmatter.toc && frontmatter.toc.length > 0 && (
<div className="mb-8 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
<MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
<div className="flex flex-row items-start mt-8 w-full justify-between 2xl:px-36 xl:px-12 px-4">
<div className="max-w-96 w-1/4 mt-8 hidden lg:block">
<MainSections {...{ siteNav, slug }} />
<NavLinks {...{ siteNav, slug }} />
</div>
<div className="grow w-full m-auto max-w-prose mt-0 mb-8">
<div className="w-full">
<Breadcrumbs {...{ siteNav, slug }} />
<h1 className="break-words searchme">{frontmatter.title}</h1>
<div className="block xl:hidden">
<Toc toc={frontmatter.toc} wrap />
</div>
)}
<div>
</div>
<MdxWrapper>{MDX}</MdxWrapper>
<PrevNext slug={slug} />
</div>
<div className="max-w-96 w-1/4 mt-8 hidden xl:block">
<MdxMetaData frontmatter={frontmatter} slug={slug} locale="en" />
<div className="hidden xl:block">
<Toc toc={frontmatter.toc} wrap />
</div>
</div>
</div>
</PageWrapper>
)