81831f1dc4
Having build a documentation system at my job as well as the frontend for it, it was rather surprised that a surprisingly large proportion of my colleagues complained that the text was 'too narrow'. When reading documentation, the horizontal space is constrained to limit the amount of characters on a line. Long lines make for very hard to read text, because each time your eyes dart back from the end of the line to the beginning of the next line, it becomes harder to stay vertically anchored on the correct line. It's best practice to limit the line length like this, and so I've always been doing it. However, after someone at work asked, I added a toggle to allow the text to fill the available space. Much to my surprise, this was hailed like some sort of significant improvement. I still don't think it makes sense, but I've added a similar checkbox to the docs pages of both dev and org sites anyway.
108 lines
3.5 KiB
JavaScript
108 lines
3.5 KiB
JavaScript
// 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,
|
|
}
|
|
}
|