VSinerva/freesewing
1
0
Fork 0
Code Activity

feat(freesewing.dev): ToC and layout changes

Browse source
This commit is contained in:
Joost De Cock 2022-05-11 16:29:46 +02:00
parent fbbad22dcc
commit 6c41b1d941
17 changed files with 478 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

21
packages/freesewing.dev/pages/[...mdxslug].js
View file

@ -1,8 +1,9 @@
import Page from 'shared/components/wrappers/page.js'
import Page from 'site/components/wrappers/page.js'
import useApp from 'site/hooks/useApp.js'
import mdxMeta from 'site/prebuild/mdx.en.js'
import mdxLoader from 'shared/mdx/loader'
import MdxWrapper from 'shared/components/wrappers/mdx'
import TocWrapper from 'shared/components/wrappers/toc'
import Head from 'next/head'
import HelpUs from 'site/components/help-us.js'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
@ -22,7 +23,7 @@ const MdxPage = props => {
* active state
*/
return (
<Page app={app} {...props.page}>
<Page app={app} {...props.page} layout="docs">
<Head>
<meta property="og:title" content={props.page.title} key="title" />
<meta property="og:type" content="article" key='type' />
@ -36,8 +37,17 @@ const MdxPage = props => {
<meta property="og:locale" content="en_US" key='locale' />
<meta property="og:site_name" content="freesewing.dev" key='site' />
</Head>
<MdxWrapper mdx={props.mdx} app={app}/>
<HelpUs mdx slug={`/${props.page.slug}`} />
<div className="flex flex-row-reverse flex-wrap xl:flex-nowrap justify-end px-8 xl:px-0">
{props.toc && (
<div className="mb-8 px-0 w-full xl:w-80 2xl:w-96 xl:pl-8 2xl:pl-16">
<TocWrapper toc={props.toc} app={app}/>
</div>
)}
<div className="px-0 xl:pl-8 2xl:pl-16">
<MdxWrapper mdx={props.mdx} app={app}/>
<HelpUs mdx slug={`/${props.page.slug}`} />
</div>
</div>
</Page>
)
}
@ -61,11 +71,12 @@ export default MdxPage
*/
export async function getStaticProps({ params, locale }) {
const { mdx, intro } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
return {
props: {
mdx,
toc,
intro: intro.join(' '),
page: {
slug: params.mdxslug.join('/'),