@primer/doctocat-nextjs 0.0.2-rc.1da8f9a → 0.0.2-rc.5b7f8ce

package/CHANGELOG.md

@@ -6,4 +6,8 @@
 
 - [#4](https://github.com/primer/doctocat-nextjs/pull/4) [`4f28982`](https://github.com/primer/doctocat-nextjs/commit/4f28982e327e75f199f28fad987f1e827deafeb2) Thanks [@joseph-lozano](https://github.com/joseph-lozano)! - Wrap links with Next's Link component
 
+- [#6](https://github.com/primer/doctocat-nextjs/pull/6) [`afd4e17`](https://github.com/primer/doctocat-nextjs/commit/afd4e1762f6294a14942d415c693319a874cd3fb) Thanks [@rezrah](https://github.com/rezrah)! - - Add MDX to HTML overrides mechanism and apply to headings and anchors
+
+  - Added anchor links to headings to match current functionality on primer.style
+
 - [#2](https://github.com/primer/doctocat-nextjs/pull/2) [`2742b32`](https://github.com/primer/doctocat-nextjs/commit/2742b3214e7a53416d23f0459dc389f7c22cf5a1) Thanks [@rezrah](https://github.com/rezrah)! - Remove code blocks stylesheet, now merged into global.css

package/components/layout/root-layout/Theme.tsx

@@ -2,9 +2,11 @@ import React, {useMemo} from 'react'
 import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
+import {MDXProvider} from 'nextra/mdx'
 import {useFSRoute} from 'nextra/hooks'
 import {PencilIcon} from '@primer/octicons-react'
 import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
+
 import {
   Animate,
   AnimationProvider,
@@ -32,6 +34,7 @@ import {TableOfContents} from '../table-of-contents/TableOfContents'
 import bodyStyles from '../../../css/prose.module.css'
 import {IndexCards} from '../index-cards/IndexCards'
 import {useColorMode} from '../../context/color-modes/useColorMode'
+import {getComponents} from '../../mdx-components/mdx-components'
 
 const {publicRuntimeConfig} = getConfig()
 
@@ -162,7 +165,11 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                               </>
                             )}
                             <article className={route !== '/' && !isIndexPage ? bodyStyles.Prose : ''}>
-                              {isIndexPage ? <IndexCards folderData={flatDocsDirectories} route={route} /> : children}
+                              {isIndexPage ? (
+                                <IndexCards folderData={flatDocsDirectories} route={route} />
+                              ) : (
+                                <MDXProvider components={getComponents()}>{children}</MDXProvider>
+                              )}
                             </article>
                             <footer>
                               <Box marginBlockStart={64}>

package/components/mdx-components/mdx-components.module.css

@@ -0,0 +1,14 @@
+.Heading__anchor {
+  color: var(--brand-color-text-default) !important;
+  text-decoration: none !important;
+}
+
+.Heading__anchorIcon {
+  visibility: hidden;
+  margin-left: var(--base-size-8);
+  vertical-align: middle !important;
+}
+
+.Heading__anchor:hover .Heading__anchorIcon {
+  visibility: visible;
+}

package/components/mdx-components/mdx-components.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import type {ComponentProps, ReactElement} from 'react'
+import clsx from 'clsx'
+import type {Components} from 'nextra/mdx'
+
+import {LinkIcon} from '@primer/octicons-react'
+import NextLink from 'next/link'
+
+import styles from './mdx-components.module.css'
+
+// Anchor links for Headings
+function HeadingLink({
+  tag: Tag,
+  context,
+  children,
+  id,
+  className,
+  ...props
+}: ComponentProps<'h2'> & {
+  tag: `h${2 | 3 | 4 | 5 | 6}`
+  context: {index: number}
+}): ReactElement {
+  return (
+    <Tag {...props} id={id} className={clsx(className)}>
+      <NextLink href={`#${id}`} className={styles.Heading__anchor}>
+        {children} <LinkIcon className={styles.Heading__anchorIcon} size={16} />
+      </NextLink>
+    </Tag>
+  )
+}
+
+export const Link = ({href = '', className, ...props}) => <NextLink href={href} {...props} />
+export const getComponents = (): Components => {
+  const context = {index: 0}
+  return {
+    h2: props => <HeadingLink tag="h2" context={context} {...props} />,
+    h3: props => <HeadingLink tag="h3" context={context} {...props} />,
+    h4: props => <HeadingLink tag="h4" context={context} {...props} />,
+    h5: props => <HeadingLink tag="h5" context={context} {...props} />,
+    h6: props => <HeadingLink tag="h6" context={context} {...props} />,
+    a: Link,
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.2-rc.1da8f9a",
+  "version": "0.0.2-rc.5b7f8ce",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "scripts": {