diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000000..cdd56bd501 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,3 @@ +# Ignore all mdx files in src/pages - we need to be able to render components on one line for inlining +src/pages/**/*.mdx +src/pages/**/*.md diff --git a/content/chat/index.textile b/content/chat/indexold.textile similarity index 100% rename from content/chat/index.textile rename to content/chat/indexold.textile diff --git a/content/chat/rooms/messages.textile b/content/chat/rooms/messagesold.textile similarity index 100% rename from content/chat/rooms/messages.textile rename to content/chat/rooms/messagesold.textile diff --git a/data/createPages/index.ts b/data/createPages/index.ts index b20f250c24..3034259962 100644 --- a/data/createPages/index.ts +++ b/data/createPages/index.ts @@ -104,6 +104,7 @@ export const createPages: GatsbyNode['createPages'] = async ({ graphql, actions: } } `); + /** * We could log here, the reason we don't right now is that the error should already have been caught and logged. * Because Gatsby spawns a bunch of async processes during the onCreateNode step, though, and errors don't prevent diff --git a/data/onCreatePage.ts b/data/onCreatePage.ts index b82aedb854..31e75fff26 100644 --- a/data/onCreatePage.ts +++ b/data/onCreatePage.ts @@ -1,7 +1,10 @@ import { GatsbyNode } from 'gatsby'; +import path from 'path'; export type LayoutOptions = { sidebar: boolean; searchBar: boolean; template: string }; +const mdxWrapper = path.resolve('src/components/Layout/MDXWrapper.tsx'); + const pageLayoutOptions: Record = { '/docs': { sidebar: false, searchBar: false, template: 'index' }, '/docs/api/control-api': { sidebar: false, searchBar: true, template: 'control-api' }, @@ -13,15 +16,17 @@ const pageLayoutOptions: Record = { export const onCreatePage: GatsbyNode['onCreatePage'] = ({ page, actions }) => { const { createPage } = actions; - const pathOptions = Object.entries(pageLayoutOptions).find(([path]) => page.path === path); + const isMDX = page.component.endsWith('.mdx'); - if (pathOptions) { - page.context = { - ...page.context, - layout: pathOptions[1], - }; - - createPage(page); + if (pathOptions || isMDX) { + createPage({ + ...page, + context: { + ...page.context, + layout: pathOptions ? pathOptions[1] : { sidebar: true, searchBar: true, template: 'base' }, + }, + component: isMDX ? `${mdxWrapper}?__contentFilePath=${page.component}` : page.component, + }); } }; diff --git a/gatsby-config.ts b/gatsby-config.ts index 3fc16a2060..3fb0e300ea 100644 --- a/gatsby-config.ts +++ b/gatsby-config.ts @@ -1,4 +1,5 @@ import dotenv from 'dotenv'; +import remarkGfm from 'remark-gfm'; dotenv.config({ path: `.env.${process.env.NODE_ENV}`, @@ -50,7 +51,29 @@ export const plugins = [ HowTos: `${__dirname}/how-tos`, }, }, - 'gatsby-plugin-mdx', + { + resolve: 'gatsby-plugin-mdx', + options: { + gatsbyRemarkPlugins: [ + { + resolve: `gatsby-remark-autolink-headers`, + }, + ], + mdxOptions: { + remarkPlugins: [ + // Add GitHub Flavored Markdown (GFM) support + remarkGfm, + ], + }, + }, + }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `pages`, + path: `${__dirname}/src/pages`, + }, + }, // Images { resolve: 'gatsby-source-filesystem', diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx index 8da52b1e28..50d152a36b 100644 --- a/gatsby-ssr.tsx +++ b/gatsby-ssr.tsx @@ -1,6 +1,5 @@ import React from 'react'; import { getSandpackCssText } from '@codesandbox/sandpack-react'; - const onRenderBody = ({ setHeadComponents }: { setHeadComponents: (components: React.ReactNode[]) => void }) => { const inlineScripts: React.ReactNode[] = []; diff --git a/package.json b/package.json index 8a63fa4123..1732a78f76 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "no-githooks": "git config --unset core.hooksPath" }, "dependencies": { - "@ably/ui": "16.1.1", + "@ably/ui": "16.2.0-dev.9ce2c4c9", "@codesandbox/sandpack-react": "^2.9.0", "@mdx-js/react": "^2.3.0", "@react-hook/media-query": "^1.1.1", @@ -57,11 +57,13 @@ "gatsby-plugin-image": "^3.3.0", "gatsby-plugin-layout": "^4.14.0", "gatsby-plugin-manifest": "^5.3.0", - "gatsby-plugin-mdx": "^5.12.0", + "gatsby-plugin-mdx": "^5.14.0", "gatsby-plugin-react-helmet": "^6.3.0", "gatsby-plugin-root-import": "^2.0.9", "gatsby-plugin-sharp": "^5.8.1", "gatsby-plugin-sitemap": "^6.12.1", + "gatsby-remark-admonitions": "^0.1.1", + "gatsby-remark-autolink-headers": "^6.14.0", "gatsby-source-filesystem": "^5.12.0", "gatsby-transformer-remark": "^6.12.0", "gatsby-transformer-sharp": "^5.3.0", @@ -79,6 +81,8 @@ "react-helmet": "^6.1.0", "react-medium-image-zoom": "^5.1.2", "react-select": "^5.7.0", + "remark-directive": "^4.0.0", + "remark-gfm": "^1.0.0", "textile-js": "^2.1.1", "turndown": "^7.1.1", "typescript": "^4.6.3", diff --git a/src/components/Layout/MDXWrapper.tsx b/src/components/Layout/MDXWrapper.tsx new file mode 100644 index 0000000000..314266a223 --- /dev/null +++ b/src/components/Layout/MDXWrapper.tsx @@ -0,0 +1,62 @@ +import React, { PropsWithChildren } from 'react'; +import { navigate, PageProps } from 'gatsby'; +import CodeSnippet, { CodeSnippetProps } from '@ably/ui/core/CodeSnippet'; + +import '../../styles/global.css'; +import PageTitle from '../PageTitle'; +import { MarkdownProvider } from '../Markdown'; +import Article from '../Article'; +import If from './mdx/If'; +import { useLayoutContext } from 'src/contexts/layout-context'; +import cn from '@ably/ui/core/utils/cn'; +import Aside from '../blocks/dividers/Aside'; +import { HtmlComponentPropsData } from '../html-component-props'; + +type PageContextType = { + frontmatter: { + title: string; + }; +}; + +type MDXWrapperProps = PageProps; + +const MDXWrapper: React.FC = ({ children, pageContext }) => { + const { + frontmatter: { title }, + } = pageContext; + + const { activePage } = useLayoutContext(); + + const WrappedCodeSnippet: React.FC = (props) => { + return ( + { + navigate(`${location.pathname}?lang=${lang}`, { replace: true }); + }} + className={cn(props.className, 'mb-20')} + {...props} + /> + ); + }; + + const WrappedAside = (props: PropsWithChildren<{ 'data-type': string }>) => { + return ( +