Web 3888 mdx

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

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<string, LayoutOptions> = {
   '/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<string, LayoutOptions> = {
 
 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,
+    });
   }
 };

gatsby-config.ts

@@ -50,7 +50,23 @@ export const plugins = [
       HowTos: `${__dirname}/how-tos`,
     },
   },
-  'gatsby-plugin-mdx',
+  {
+    resolve: 'gatsby-plugin-mdx',
+    options: {
+      gatsbyRemarkPlugins: [
+        {
+          resolve: `gatsby-remark-autolink-headers`,
+        },
+      ],
+    },
+  },
+  {
+    resolve: `gatsby-source-filesystem`,
+    options: {
+      name: `pages`,
+      path: `${__dirname}/src/pages`,
+    },
+  },
   // Images
   {
     resolve: 'gatsby-source-filesystem',

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[] = [];
 

package.json

@@ -57,11 +57,12 @@
     "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-autolink-headers": "^6.14.0",
     "gatsby-source-filesystem": "^5.12.0",
     "gatsby-transformer-remark": "^6.12.0",
     "gatsby-transformer-sharp": "^5.3.0",

src/components/Layout/MDXWrapper.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { PageProps } from 'gatsby';
+
+import '../../styles/global.css';
+import PageTitle from '../PageTitle';
+import { MarkdownProvider } from '../Markdown';
+import Article from '../Article';
+import If from './mdx/If';
+import CodeBlock from './mdx/CodeBlock';
+
+type PageContextType = {
+  frontmatter: {
+    title: string;
+  };
+};
+
+type MDXWrapperProps = PageProps<unknown, PageContextType>;
+
+const MDXWrapper: React.FC<MDXWrapperProps> = ({ children, pageContext }) => {
+  const {
+    frontmatter: { title },
+  } = pageContext;
+
+  return (
+    <Article>
+      <MarkdownProvider components={{ If, CodeBlock }}>
+        {title && <PageTitle>{title}</PageTitle>}
+        {children}
+      </MarkdownProvider>
+    </Article>
+  );
+};
+
+export default MDXWrapper;

src/components/Layout/mdx/CodeBlock.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+
+interface CodeBlockProps {
+  children: ReactNode;
+}
+
+const CodeBlock: React.FC<CodeBlockProps> = ({ children }) => {
+  return <div className="code-block">{children}</div>;
+};
+
+export default CodeBlock;

src/components/Layout/mdx/If.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useLayoutContext } from 'src/contexts/layout-context';
+import { LanguageKey } from 'src/data/languages/types';
+
+interface IfProps {
+  lang: LanguageKey;
+  className?: string;
+  children: React.ReactNode;
+  as?: React.ElementType;
+}
+
+const If: React.FC<IfProps> = ({ lang, children, className, as: Component = 'div' }) => {
+  const { activePage } = useLayoutContext();
+  const { language } = activePage;
+  const splitLang = lang.split(',');
+
+  return splitLang.includes(language) ? children : null;
+};
+
+export default If;

src/components/Markdown/LanguageBlock.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { useLayoutContext } from 'src/contexts/layout-context';
+
+interface LanguageBlockProps {
+  language: 'react' | 'javascript';
+  children: React.ReactNode;
+}
+
+export const LanguageBlock: React.FC<LanguageBlockProps> = ({ language, children }) => {
+  const {
+    activePage: { language: currentLanguage },
+  } = useLayoutContext();
+
+  if (currentLanguage !== language) {
+    return null;
+  }
+
+  return <>{children}</>;
+};

src/components/Markdown/MarkdownProvider.tsx

@@ -89,7 +89,7 @@ const Pre: FC<JSX.IntrinsicElements['pre']> = ({ children }) => {
   );
 };
 
-const components = {
+const defaultComponents = {
   h1: H1,
   h2: H2,
   h3: H3,
@@ -101,6 +101,11 @@ const components = {
   pre: Pre,
 };
 
-export const MarkdownProvider = ({ children }: { children: React.ReactNode }) => (
-  <MDXProvider components={components}>{children}</MDXProvider>
-);
+export const MarkdownProvider = ({
+  children,
+  components,
+}: {
+  children: React.ReactNode;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  components: Record<string, React.FC<any>>;
+}) => <MDXProvider components={{ ...defaultComponents, ...components }}>{children}</MDXProvider>;

src/pages/docs/chat/index.mdx

@@ -0,0 +1,51 @@
+---
+title: About Chat
+slug: /docs/chat
+meta_description: 'Learn more about Ably Chat and the features that enable you to quickly build functionality into new and existing applications.'
+redirect_from: /docs/products/chat
+---
+
+Ably Chat is a product dedicated to making it quick and easy to build chat functionality into new and existing applications. Use Ably Chat to build things such as a 1:1 customer support feature, or add a chat component to a livestreaming platform that serves hundreds of thousands of users.
+
+The Chat SDK contains a set of purpose-built APIs that abstract away the complexities involved in how you would architect chat features. It utilizes Ably's platform to benefit from all of the same performance guarantees and scaling potential.
+
+## Chat features
+
+Ably Chat provides the following key features:
+
+- [Rooms and messages](#rooms)
+- [Online status](#online)
+- [Typing indicators](#typing)
+- [Room reactions](#reactions)
+
+<If lang="javascript,react,swift">
+  start
+  <If lang="javascript">hello matey</If>
+  <If lang="react">hello pal</If>
+  <If lang="swift">hello sir</If>
+  end
+</If>
+
+### Rooms and messages
+
+[Rooms](/docs/chat/rooms) are used to organize and separate your users and chat messages into 'chat rooms'. They are the entry object into chat and provide access to all other chat features, such as messages, online status, and typing indicators.
+
+Each room can represent a 1:1 chat between an agent and a customer, a private message between two users in a chat application, a group conversation, or the chat section of a livestream with thousands of users.
+
+[Messages](/docs/chat/rooms/messages) enable users to communicate with one another in the room. Messages sent by users are received by all those who have subscribed to receive them within that room.
+
+### Online status
+
+[Online status](/docs/chat/rooms/presence) enables you to display the status of every user in the room, such as whether a user is online or offline. Users can also set additional information about their profile or set a custom status, such as 'Away'.
+
+### Typing indicators
+
+[Typing indicators](/docs/chat/rooms/typing) let users see when others start and stop typing a message. They enable you to display a message such as _John is typing..._ or when too many users are typing, something like _Multiple people are typing..._ or _12 people are typing..._
+
+### Room reactions
+
+[Room reactions](/docs/chat/rooms/reactions) enable users to broadcast ephemeral sentiments using emojis, such as 👍 or ❤. Room reactions are used to broadcast a general sentiment to the entire room rather than reacting to a single message. A common use case is sports fans all sending a heart when their team scores.
+
+## Demo
+
+Take a look at a [livestream basketball game](https://ably-livestream-chat-demo.vercel.app) with some simulated users chatting built using the Chat SDK. The [source code](https://github.com/ably/ably-chat-js/tree/main/demo) is available in GitHub.