feat(org): Fixed MDX dynamic page
This commit is contained in:
Joost De Cock
parent
4bef80dd08
commit
d048596052
3 changed files with 122 additions and 119 deletions
|
|
@ -1,10 +1,13 @@
|
|||
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'
|
||||
import components from 'site/components/mdx/index.js'
|
||||
|
||||
const MdxPage = props => {
|
||||
|
||||
|
|
@ -27,16 +30,24 @@ const MdxPage = props => {
|
|||
<meta property="og:type" content="article" key='type' />
|
||||
<meta property="og:description" content={props.intro} key='type' />
|
||||
<meta property="og:article:author" content='Joost De Cock' key='author' />
|
||||
<meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/org/${props.page.slug}`} key='image' />
|
||||
<meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:url" content={`https://freesewing.org/${props.page.slug}`} key='url' />
|
||||
<meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' />
|
||||
<meta property="og:locale" content="en_US" key='locale' />
|
||||
<meta property="og:site_name" content="freesewing.org" key='site' />
|
||||
<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} components={components} />
|
||||
</div>
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
|
@ -58,13 +69,14 @@ export default MdxPage
|
|||
*
|
||||
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
||||
*/
|
||||
export async function getStaticProps({ params }) {
|
||||
export async function getStaticProps({ params, locale }) {
|
||||
|
||||
const { mdx, intro } = await mdxLoader('en', 'org', params.mdxslug.join('/'))
|
||||
const { mdx, intro, toc } = await mdxLoader('en', 'org', params.mdxslug.join('/'))
|
||||
|
||||
return {
|
||||
props: {
|
||||
mdx,
|
||||
toc,
|
||||
intro: intro.join(' '),
|
||||
page: {
|
||||
slug: params.mdxslug.join('/'),
|
||||
|
|
@ -72,7 +84,8 @@ export async function getStaticProps({ params }) {
|
|||
slugArray: params.mdxslug,
|
||||
...mdxMeta[params.mdxslug.join('/')],
|
||||
},
|
||||
params
|
||||
params,
|
||||
...(await serverSideTranslations('en')),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,3 +107,4 @@ export async function getStaticPaths() {
|
|||
fallback: false
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,110 +0,0 @@
|
|||
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'
|
||||
|
||||
const MdxPage = props => {
|
||||
|
||||
// This hook is used for shared code and global state
|
||||
const app = useApp()
|
||||
|
||||
/*
|
||||
* Each page should be wrapped in the Page wrapper component
|
||||
* You MUST pass it the result of useApp() as the `app` prop
|
||||
* and for MDX pages you can spread the props.page props to it
|
||||
* to automatically set the title and navigation
|
||||
*
|
||||
* Like breadcrumbs and updating the primary navigation with
|
||||
* active state
|
||||
*/
|
||||
return (
|
||||
<Page app={app} {...props.page}>
|
||||
<Head>
|
||||
<meta property="og:title" content={props.page.title} key="title" />
|
||||
<meta property="og:type" content="article" key='type' />
|
||||
<meta property="og:description" content={props.intro} key='type' />
|
||||
<meta property="og:article:author" content='Joost De Cock' key='author' />
|
||||
<meta property="og:image" content={`https://canary.backend.freesewing.org/og-img/en/dev/${props.page.slug}`} key='image' />
|
||||
<meta property="og:image:type" content="image/png" />
|
||||
<meta property="og:image:width" content="1200" />
|
||||
<meta property="og:image:height" content="630" />
|
||||
<meta property="og:url" content={`https://freesewing.dev/${props.page.slug}`} key='url' />
|
||||
<meta property="og:locale" content="en_US" key='locale' />
|
||||
<meta property="og:site_name" content="freesewing.dev" key='site' />
|
||||
</Head>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* Default export is the NextJS page object
|
||||
*/
|
||||
export default MdxPage
|
||||
|
||||
|
||||
/*
|
||||
* getStaticProps() is used to fetch data at build-time.
|
||||
*
|
||||
* On this page, it is loading the mdx (markdown) content
|
||||
* from the markdown file on disk.
|
||||
*
|
||||
* This, in combination with getStaticPaths() below means this
|
||||
* page will be used to render/generate all markdown/mdx content.
|
||||
*
|
||||
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
||||
*/
|
||||
export async function getStaticProps({ params, locale }) {
|
||||
|
||||
const { mdx, intro, toc } = await mdxLoader('en', 'dev', params.mdxslug.join('/'))
|
||||
|
||||
return {
|
||||
props: {
|
||||
mdx,
|
||||
toc,
|
||||
intro: intro.join(' '),
|
||||
page: {
|
||||
slug: params.mdxslug.join('/'),
|
||||
path: '/' + params.mdxslug.join('/'),
|
||||
slugArray: params.mdxslug,
|
||||
...mdxMeta[params.mdxslug.join('/')],
|
||||
},
|
||||
params,
|
||||
...(await serverSideTranslations('en')),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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.
|
||||
* That list comes from mdxMeta, which is build in the prebuild step
|
||||
* and contains paths, titles, and intro for all markdown.
|
||||
*
|
||||
* To learn more, see: https://nextjs.org/docs/basic-features/data-fetching
|
||||
*/
|
||||
export async function getStaticPaths() {
|
||||
return {
|
||||
paths: Object.keys(mdxMeta).map(slug => '/'+slug),
|
||||
fallback: false
|
||||
}
|
||||
}
|
||||
|
||||
99
packages/freesewing.org/pages/docs/index.js
Normal file
99
packages/freesewing.org/pages/docs/index.js
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
import { useEffect } from 'react'
|
||||
import Page from 'shared/components/wrappers/page.js'
|
||||
import useApp from 'site/hooks/useApp.js'
|
||||
import Popout from 'shared/components/popout.js'
|
||||
|
||||
const TypographyPage = (props) => {
|
||||
const app = useApp()
|
||||
const { updateNavigation } = app
|
||||
|
||||
useEffect(() => {
|
||||
updateNavigation(
|
||||
['typography'],
|
||||
{
|
||||
__title: 'Typography',
|
||||
__linktitle: 'Typography',
|
||||
__slug: 'typography',
|
||||
__order: 'typography'
|
||||
})
|
||||
}, [updateNavigation])
|
||||
|
||||
const p = (
|
||||
<p>
|
||||
This paragraph is here to show the vertical spacing between headings and paragraphs.
|
||||
In addition, let's make it a bit longer so we can see the line height as the text wraps.
|
||||
</p>
|
||||
)
|
||||
|
||||
return (
|
||||
<Page app={app} title='Typography'>
|
||||
<div className="text-primary mdx max-w-prose text-base-content max-w-prose text-lg lg:text-xl">
|
||||
<p>This typography page shows an overview of different elements and how they are styled.</p>
|
||||
<p>It's a good starting point for theme development.</p>
|
||||
<h2>Headings (this is h2)</h2>
|
||||
{p}
|
||||
<h3>This is h3</h3>{p}
|
||||
<h4>This is h4</h4>{p}
|
||||
<h5>This is h5</h5>{p}
|
||||
<h6>This is h6</h6>{p}
|
||||
<h2>Links and buttons</h2>
|
||||
<p>A regular link <a href="#">looks like this</a>, whereas buttons look like this:</p>
|
||||
<h3>Main button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-neutral">Neutral button</button>
|
||||
<button className="btn btn-primary">Primary button</button>
|
||||
<button className="btn btn-secondary">Secondary button</button>
|
||||
<button className="btn btn-accent">Accent button</button>
|
||||
</div>
|
||||
<h3>State button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-info">Info button</button>
|
||||
<button className="btn btn-success">Success button</button>
|
||||
<button className="btn btn-warning">Warning button</button>
|
||||
<button className="btn btn-error">Error button</button>
|
||||
</div>
|
||||
<h3>Other button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-ghost">Ghost button</button>
|
||||
<button className="btn btn-link">Link button</button>
|
||||
</div>
|
||||
<h3>Outlined button styles</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-outline btn-neutral">Neutral button</button>
|
||||
<button className="btn btn-outline btn-primary">Primary button</button>
|
||||
<button className="btn btn-outline btn-secondary">Secondary button</button>
|
||||
<button className="btn btn-outline btn-accent">Accent button</button>
|
||||
</div>
|
||||
<h3>Button sizes</h3>
|
||||
<div className="flex flex-row gap-2 flex-wrap">
|
||||
<button className="btn btn-primary btn-lg">Large</button>
|
||||
<button className="btn btn-primary">Normal</button>
|
||||
<button className="btn btn-primary btn-sm">Small</button>
|
||||
<button className="btn btn-primary btn-xs">Tiny</button>
|
||||
<button className="btn btn-primary btn-lg btn-wide">Large wide</button>
|
||||
<button className="btn btn-primary btn-wide">Normal wide</button>
|
||||
<button className="btn btn-primary btn-sm btn-wide">Small wide</button>
|
||||
<button className="btn btn-primary btn-xs bnt-wide">Tiny wide</button>
|
||||
</div>
|
||||
<h2>Popouts</h2>
|
||||
<p>The Popout component is what powers various custom MDX components under the hood:</p>
|
||||
{['note', 'tip', 'warning', 'fixme', 'link', 'related', 'none'].map(type => {
|
||||
const props = {}
|
||||
props[type] = true
|
||||
return (
|
||||
<div key={type}>
|
||||
<h3 className="capitalize">{type}</h3>
|
||||
<Popout {...props}>
|
||||
<h5>I am the {type} title</h5>
|
||||
{p}
|
||||
</Popout>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
export default TypographyPage
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue