@graphcommerce/docs 3.1.4

package/pages/[[...url]].tsx

@@ -0,0 +1,391 @@
+import { PageOptions } from '@graphcommerce/framer-next-pages'
+import { PageMeta } from '@graphcommerce/next-ui'
+import {
+  Container,
+  Divider,
+  Typography,
+  Link,
+  alpha,
+  Table,
+  TableBody,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableContainer,
+  Paper,
+  darken,
+  Box,
+} from '@mui/material'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import PageLink from 'next/link'
+import { useRouter } from 'next/router'
+import rehypeAutolinkHeadings from 'rehype-autolink-headings'
+import rehypePrism from 'rehype-prism-plus'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+import { SetRequired } from 'type-fest'
+import { LayoutFull, LayoutFullProps } from '../components/Layout/LayoutFull'
+import {
+  getDirectoryPaths,
+  getDirectoryTree,
+  getFileContents,
+  MatterFields,
+  urlToPath,
+} from '../lib/files'
+
+type MDXSource = SetRequired<MDXRemoteSerializeResult, 'frontmatter'>
+type Props = { source: MDXSource } & LayoutFullProps
+type Param = { url: string[] }
+type GetStatic = GetStaticProps<Props, Param>
+
+/**
+ * Handle relative hrefs
+ *
+ * - If a link doesn't start with a slash OR it starts with './' it should replace the latest slug
+ *   with the new path
+ * - If a link starts with a slash it shouldn't be relative
+ * - If a link starts with '../' it should move one segment up.
+ * - If a link starts with '../../' it should move two segments up, so this should be recursive
+ */
+function relativeUrl(href: string[], currentHref: string[]): string[] {
+  if (href[0].startsWith('http') || href[0].startsWith('/')) return href
+
+  if (href[0].startsWith('#')) return [...currentHref, href[0]]
+
+  if (href[0] === 'readme') return relativeUrl(['', ...href.slice(1)], currentHref)
+
+  if (href[0] === '..') {
+    return relativeUrl(href.slice(1), currentHref.slice(0, -1))
+  }
+
+  if (href[0] === '.') {
+    return ['', ...currentHref.slice(0, -1), ...href.slice(1)]
+  }
+
+  return relativeUrl(['.', ...href], currentHref)
+}
+
+function RelativeLink(props: Omit<JSX.IntrinsicElements['a'], 'ref'>) {
+  const asPath = useRouter().asPath?.split('?')[0].split('#')[0]
+  const { href = '', children, ...otherProps } = props
+
+  let newUrl = href.replace('.mdx', '')
+  newUrl = newUrl.replace('.md', '')
+  newUrl = newUrl.replace('readme', '')
+
+  newUrl = relativeUrl(newUrl.split('/'), asPath.split('/').slice(1)).join('/')
+
+  if (newUrl.startsWith('/packages') || newUrl.startsWith('/examples')) {
+    newUrl = `https://github.com/ho-nl/m2-pwa/tree/master${newUrl}`
+  }
+
+  const isExternal = newUrl.startsWith('http')
+
+  if (!newUrl.startsWith('/') && !isExternal) newUrl = `/${newUrl}`
+  if (newUrl.endsWith('/')) newUrl = newUrl.slice(0, -1)
+
+  return (
+    <PageLink href={newUrl} passHref>
+      <Link {...otherProps} target={isExternal ? '_blank' : undefined}>
+        {children}
+      </Link>
+    </PageLink>
+  )
+}
+
+const mdxComponents: React.ComponentProps<typeof MDXRemote>['components'] = {
+  h1: ({ ref, ...props }) => (
+    <Typography
+      component='h1'
+      variant='h1'
+      {...props}
+      sx={{ mt: '2em', mb: '1em', '&:first-of-type': { mt: '1em' } }}
+    />
+  ),
+  h2: ({ ref, ...props }) => (
+    <Typography
+      component='h2'
+      variant='h2'
+      {...props}
+      sx={{ mt: '2em', mb: '0.5em', borderBottom: (theme) => `1px solid ${theme.palette.divider}` }}
+    />
+  ),
+  h3: ({ ref, ...props }) => (
+    <Typography component='h3' variant='h3' {...props} sx={{ mt: '2em', mb: '0.5em' }} />
+  ),
+  h4: ({ ref, ...props }) => <Typography component='h4' variant='h4' {...props} sx={{}} />,
+  h5: ({ ref, ...props }) => <Typography component='h5' variant='h5' {...props} sx={{}} />,
+  h6: ({ ref, ...props }) => <Typography component='h6' variant='h6' {...props} sx={{}} />,
+  p: ({ ref, ...props }) => (
+    <Typography variant='body1' {...props} sx={{ mt: '0.5em', mb: '1em' }} />
+  ),
+  // img: ({ ref, src, ...props }) => {
+  //   if (!src) return null
+  //   return <Image layout={!props.width ? 'intrinsic' : 'responsive'} src={src} {...props} />
+  // },
+  hr: ({ ref, ...props }) => (
+    <Divider {...props} variant='middle' sx={(theme) => ({ my: theme.spacings.md })} />
+  ),
+  blockquote: ({ ref, ...props }) => (
+    <Typography
+      variant='body1'
+      component='blockquote'
+      {...props}
+      sx={[
+        (theme) => ({
+          display: 'inline-block',
+          mt: '1em',
+          mb: '0.5em',
+          fontStyle: 'italic',
+          pl: '1em',
+          pr: '1em',
+          pt: '0.5em',
+          borderRadius: 2,
+          backgroundColor: alpha(theme.palette.primary.main, 0.1),
+          border: `1px solid ${theme.palette.primary.main}`,
+          boxShadow: 4,
+          '&:first-of-type': { mt: '2em' },
+        }),
+      ]}
+    />
+  ),
+  pre: ({ ref, ...props }) => (
+    <Box
+      component='pre'
+      {...props}
+      sx={{
+        fontFamily: `Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace`,
+        borderRadius: 1.5,
+        maxWidth: (theme) => `calc(100vw - ${theme.page.horizontal} * 2)`,
+
+        // "&:not([class*='language-'])": {
+        //   backgroundColor: (theme) => [alpha(theme.palette.text.primary, 0.08), '!important'],
+        //   p: '1em',
+        // },
+
+        "&[class*='language-']": {
+          backgroundImage: 'linear-gradient(to top, #003c6780, #00264180 )',
+        },
+        '&.language-txt': {
+          background: 'none',
+          border: (theme) => `1px solid ${theme.palette.divider}`,
+          '& code': {
+            color: (theme) => [theme.palette.text.primary, '!important'],
+          },
+        },
+      }}
+    />
+  ),
+  code: ({ ref, ...props }) => (
+    <Box
+      component='code'
+      {...props}
+      sx={{
+        fontSize: '0.85em',
+        "&:not([class*='language-'])": {
+          fontFamily: `Menlo, Monaco, Consolas, 'Andale Mono', 'Ubuntu Mono', 'Courier New', monospace`,
+          borderRadius: 1.5,
+          pt: 0.1,
+          pb: 0.3,
+          px: 0.7,
+          backgroundColor: (theme) => [alpha(theme.palette.text.primary, 0.08), '!important'],
+        },
+      }}
+    />
+  ),
+  a: RelativeLink,
+  table: ({ ref, ...props }) => (
+    <TableContainer component={Paper} elevation={4} sx={{ mb: 5 }}>
+      <Table {...props} size='small' aria-label='a dense table' />
+    </TableContainer>
+  ),
+  thead: ({ ref, ...props }) => <TableHead {...props} />,
+  tbody: ({ ref, ...props }) => <TableBody {...props} />,
+  tr: ({ ref, ...props }) => <TableRow {...props} />,
+  th: ({ ref, align, ...props }) => <TableCell {...props} />,
+  td: ({ ref, align, ...props }) => <TableCell {...props} />,
+}
+
+function IndexPage(props: Props) {
+  const { source } = props
+  const { metaTitle, menu, metaDescription } = source.frontmatter as MatterFields
+  const prettyRoute = useRouter()
+    .asPath.split('?')[0]
+    .split('/')
+    .map((v) => v.replace(/-/g, ' ').replace(/^./, (x) => x.toUpperCase()))
+    .reverse()
+    .filter(Boolean)
+
+  return (
+    <>
+      <PageMeta
+        title={metaTitle ?? menu ?? prettyRoute.join(' - ')}
+        metaDescription={metaDescription}
+      />
+      <Container
+        maxWidth='md'
+        sx={(theme) => ({
+          position: 'relative',
+          '& figure': {
+            display: 'block',
+            margin: '0 auto',
+            maxWidth: '100%',
+            mb: 8,
+            mt: 8,
+            aspectRatio: '16 / 9',
+            width: '100%',
+          },
+          '& img, & video': {
+            display: 'block',
+            margin: '0 auto',
+            maxWidth: '100%',
+            boxShadow: '0 0px 40px 0 rgba(0,0,0,0.15)',
+          },
+          '& strong': {
+            fontVariationSettings: "'wght' 600",
+          },
+          '& pre': {
+            borderRadius: 2,
+            mt: '1em !important',
+            mb: '1em !important',
+          },
+          '& figure > figcaption': {
+            paddingLeft: '1em',
+            marginTop: '1em',
+            typography: 'caption',
+            color: 'text.secondary',
+          },
+          '& > details': {
+            width: '100%',
+            mt: '2em',
+            mb: '0.5em',
+            p: '1em',
+            borderRadius: 2,
+            backgroundColor: alpha(theme.palette.primary.dark, 0.1),
+            border: `1px solid ${theme.palette.primary.dark}`,
+            boxShadow: 4,
+            a: {
+              color: theme.palette.primary.dark,
+              textDecorationColor: theme.palette.primary.dark,
+            },
+          },
+          '& > div > details': {
+            summary: {
+              mb: 1,
+            },
+            h3: {
+              ...theme.typography.h3,
+              display: 'inline-block',
+            },
+            a: {
+              color: theme.palette.text.primary,
+              textDecorationColor: theme.palette.text.primary,
+            },
+          },
+          '& hr': {
+            m: 0,
+            mt: 5,
+            mb: 5,
+          },
+          '& figure > p': { display: 'none' },
+
+          '& .icon.icon-link': {
+            background: 'url(/link.svg) no-repeat',
+            backgroundSize: 'contain',
+            display: 'inline-block',
+            verticalAlign: 'middle',
+            fontSize: '0.8em',
+            mr: '0.2em',
+            width: '1.1em',
+            height: '1.2em',
+            ml: `calc(-0.2em - 1.2em)`,
+            opacity: 0.0,
+          },
+          '& .contains-task-list': {
+            padding: 0,
+            '& li': {
+              listStyle: 'none',
+            },
+          },
+          '& h2:last-of-type': {
+            pl: 3,
+            pr: 3,
+            pt: 2,
+            pb: 2,
+            background: alpha(theme.palette.divider, 0.05),
+            mb: 0,
+            mt: 8,
+            borderTopLeftRadius: 10,
+            borderTopRightRadius: 10,
+            border: 0,
+          },
+          '& ul:last-of-type': {
+            pl: 3,
+            pr: 3,
+            pt: 0,
+            pb: 3,
+            mt: 0,
+            background: alpha(theme.palette.divider, 0.05),
+            borderBottomLeftRadius: 10,
+            borderBottomRightRadius: 10,
+            '& li': {
+              listStyle: 'none',
+              '&:before': {
+                content: '"— "',
+                mr: 1,
+              },
+            },
+          },
+          '& h1:hover .icon.icon-link, & h2:hover .icon.icon-link, & h3:hover .icon.icon-link, & h4:hover .icon.icon-link, & h5:hover .icon.icon-link, & h6:hover .icon.icon-link':
+            { opacity: 0.5 },
+        })}
+      >
+        <MDXRemote {...source} components={mdxComponents} />
+      </Container>
+    </>
+  )
+}
+
+const pageOptions: PageOptions<LayoutFullProps> = {
+  Layout: LayoutFull,
+}
+IndexPage.pageOptions = pageOptions
+
+export default IndexPage
+
+export const getStaticPaths: GetStaticPaths<{ url: string[] }> = async () => {
+  const paths = await getDirectoryPaths('content')
+
+  return {
+    fallback: 'blocking',
+    paths: paths.map((p) => ({ params: { url: p.split('/') } })),
+  }
+}
+
+export const getStaticProps: GetStatic = async ({ params }) => {
+  const url = params?.url ?? []
+  const menuData = await getDirectoryTree('content')
+  if (!menuData) return { notFound: true }
+
+  const filePath = urlToPath(url, menuData)
+  if (!filePath) return { notFound: true }
+
+  const res = await getFileContents('content', filePath)
+
+  if (res === false) return { notFound: true }
+
+  // todo: https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
+  // todo: https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
+  const source = (await serialize(res, {
+    mdxOptions: {
+      format: 'detect',
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypePrism, rehypeSlug, rehypeAutolinkHeadings],
+    },
+    parseFrontmatter: true,
+  })) as MDXSource
+
+  return { props: { menuData, source } }
+}

package/pages/_app.tsx

@@ -0,0 +1,26 @@
+import { FramerNextPages } from '@graphcommerce/framer-next-pages'
+// import { GoogleAnalyticsScript } from '@graphcommerce/googleanalytics'
+// import { GoogleRecaptchaV3Script } from '@graphcommerce/googlerecaptcha'
+// import { GoogleTagManagerScript } from '@graphcommerce/googletagmanager'
+import { CssAndFramerMotionProvider, GlobalHead, PageLoadIndicator } from '@graphcommerce/next-ui'
+import { CssBaseline, ThemeProvider } from '@mui/material'
+import { AppProps } from 'next/app'
+import { lightTheme } from '../components/theme'
+import '../components/prism.css'
+import '../components/rehype-prism-plus.css'
+
+export default function ThemedApp(props: AppProps) {
+  return (
+    <CssAndFramerMotionProvider>
+      <ThemeProvider theme={lightTheme}>
+        {/* <GoogleAnalyticsScript /> */}
+        {/* <GoogleRecaptchaV3Script /> */}
+        {/* <GoogleTagManagerScript /> */}
+        <GlobalHead name='GraphCommerce Docs' />
+        <CssBaseline />
+        <PageLoadIndicator />
+        <FramerNextPages {...props} fallbackRoute='/[[...url]]' />
+      </ThemeProvider>
+    </CssAndFramerMotionProvider>
+  )
+}

package/pages/_document.tsx

@@ -0,0 +1,22 @@
+// import { GoogleTagManagerNoScript } from '@graphcommerce/googletagmanager'
+import { EmotionCacheProps, withEmotionCache } from '@graphcommerce/next-ui'
+import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
+
+class Document extends NextDocument<EmotionCacheProps> {
+  render() {
+    return (
+      <Html>
+        <Head>
+          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          {this.props.emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default withEmotionCache(Document)

package/pages/api/reindex.ts

@@ -0,0 +1,4 @@
+import { DocumentIndexer } from '../../lib/DocumentIndexer'
+import { typesenseIndexerHandler } from '../../lib/typesense/typesenseIndexerHandler'
+
+export default typesenseIndexerHandler([new DocumentIndexer('content')])

package/pages/menu/[[...url]].tsx

@@ -0,0 +1,69 @@
+import { PageOptions } from '@graphcommerce/framer-next-pages'
+import { LayoutOverlay, LayoutOverlayProps, PageMeta } from '@graphcommerce/next-ui'
+import { GetStaticPaths, GetStaticProps } from 'next'
+import { useRouter } from 'next/router'
+import { Search } from '../../components/Search'
+import SidebarMenu from '../../components/SidebarMenu'
+import {
+  FileNode,
+  getDirectoryPaths,
+  getDirectoryTree,
+  getFileContents,
+  urlToPath,
+} from '../../lib/files'
+
+type Props = { menuData: FileNode } & LayoutOverlayProps
+type Param = { url: string[] }
+
+export default function MenuPage(props: Props) {
+  const { menuData } = props
+  const url = (useRouter().query.url as Param['url'] | undefined)?.join('/') ?? ''
+
+  return (
+    <>
+      <PageMeta title='GraphCommerce Documentation' />
+      <Search />
+      <SidebarMenu {...menuData} selected={`/${url}`} />
+    </>
+  )
+}
+
+const pageOptions: PageOptions<LayoutOverlayProps> = {
+  Layout: (props: LayoutOverlayProps) => (
+    <LayoutOverlay
+      {...props}
+      variantSm='bottom'
+      variantMd='left'
+      sizeMd='floating'
+      sizeSm='floating'
+      justifySm='start'
+      justifyMd='start'
+    />
+  ),
+  overlayGroup: 'menu',
+}
+MenuPage.pageOptions = pageOptions
+
+export const getStaticPaths: GetStaticPaths<{ url: string[] }> = async () => {
+  const paths = await getDirectoryPaths('content')
+
+  return {
+    fallback: 'blocking',
+    paths: paths.map((p) => ({ params: { url: p.split('/') } })),
+  }
+}
+
+export const getStaticProps: GetStaticProps<Props, Param> = async ({ params }) => {
+  const url = params?.url ?? []
+  const menuData = await getDirectoryTree('content')
+  if (!menuData) return { notFound: true }
+
+  const filePath = urlToPath(url, menuData)
+  if (!filePath) return { notFound: true }
+
+  const res = await getFileContents('content', filePath)
+
+  if (res === false) return { notFound: true }
+
+  return { props: { menuData } }
+}

package/public/favicon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="120px" height="120px" viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>favicon</title>
+    <g id="favicon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Path" transform="translate(17.000000, 10.000000)">
+            <polygon fill="#000000" fill-rule="nonzero" opacity="0.200000003" points="42.81 50 9.46 69.47 9.46 69.47 9.46 69.47 9.46 69.48 9.46 69.48 42.81 88.95 76.16 69.47"></polygon>
+            <polygon fill="#000000" fill-rule="nonzero" opacity="0.400000006" points="42.81 31.55 9.46 51.02 9.46 51.02 9.46 51.02 9.46 51.03 9.46 51.03 42.81 70.5 76.16 51.02"></polygon>
+            <polygon fill="#000000" fill-rule="nonzero" points="42.81 11.05 9.46 30.52 9.46 30.52 9.46 30.52 9.46 30.53 9.46 30.53 42.81 50 76.16 30.52"></polygon>
+            <polygon stroke="#000000" stroke-width="5" points="0 25 0 75 42.81 100 85.62 75 85.62 25 42.81 0"></polygon>
+        </g>
+    </g>
+</svg>

package/public/link.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+	<path d="M15.387 4.33c-2.1 0-3.6 1.9-5.1 3.3.2 0 .5-.1.8-.1.5 0 1 .1 1.5.3.8-.8 1.6-1.7 2.8-1.7.6 0 1.3.3 1.8.7 1 1 1 2.6 0 3.6l-2.6 2.6c-.4.4-1.2.7-1.8.7-1.4 0-2.1-.9-2.6-2l-1.3 1.3c.8 1.5 2 2.6 3.8 2.6 1.2 0 2.3-.5 3-1.3l2.6-2.6c.9-.9 1.5-2 1.5-3.3-.2-2.2-2.2-4.1-4.4-4.1zm-4.3 12.1l-.9.9c-.4.4-1.2.7-1.8.7-.6 0-1.3-.3-1.8-.7-1-1-1-2.7 0-3.6l2.6-2.6c.4-.4 1.2-.7 1.8-.7 1.4 0 2.1 1 2.6 2l1.3-1.3c-.8-1.5-2-2.6-3.8-2.6-1.2 0-2.3.5-3 1.3l-2.6 2.6c-1.7 1.7-1.7 4.4 0 6 1.6 1.6 4.4 1.7 5.9 0l1.9-1.9c-.3.1-.6.1-.9.1-.5 0-.9 0-1.3-.2z"/>
+</svg>

package/public/manifest.webmanifest

@@ -0,0 +1,20 @@
+{
+  "name": "GraphCommerce",
+  "short_name": "GraphCommerce",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#FFFFFF",
+  "start_url": "/",
+  "icons": [
+    {
+      "src": "/manifest/favicon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/manifest/favicon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ]
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}