@graphcommerce/docs 3.1.4 → 4.0.0

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

@@ -1,391 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,22 +0,0 @@
-// 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

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

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

@@ -1,69 +0,0 @@
-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

@@ -1,12 +0,0 @@
-<?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

@@ -1,4 +0,0 @@
-<?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

@@ -1,20 +0,0 @@
-{
-  "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"
-    }
-  ]
-}