anchorlinks

components/Heading/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+export type Depth = 1 | 2 | 3 | 4 | 5 | 6;
+
+const CreateHeading = (depth: Depth) => {
+  const Tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = `h${depth}`;
+
+  const Heading = ({ id, children, ...attrs }: React.PropsWithChildren<HTMLHeadingElement>) => {
+    if (!children) return '';
+
+    return (
+      // @ts-expect-error
+      <Tag {...attrs} className={`heading heading-${depth} header-scroll`}>
+        <div key={`heading-anchor-${id}`} className="heading-anchor anchor waypoint" id={id} />
+        <div key={`heading-text-${id}`} className="heading-text">
+          {children}
+        </div>
+        <a
+          key={`heading-anchor-icon-${id}`}
+          aria-label={`Skip link to ${children[1]}`}
+          className="heading-anchor-icon fa fa-anchor"
+          href={`#${id}`}
+        />
+      </Tag>
+    );
+  };
+
+  return Heading;
+};
+
+export default CreateHeading;

contexts/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import GlossaryContext from './GlossaryTerms';
 import BaseUrlContext from './BaseUrl';
 import { VariablesContext } from '@readme/variable';
-import { RunOpts } from '../index';
+import { RunOpts } from '../lib/run';
 
 type Props = React.PropsWithChildren & Pick<RunOpts, 'baseUrl' | 'terms' | 'variables'>;
 

docs/headings.md

@@ -1,17 +1,18 @@
 ---
-title: "Headings"
+title: 'Headings'
 category: 5fdf7610134322007389a6ed
 hidden: false
 ---
+
 ## Examples
 
 > ### Heading Block 3
 >
-> ####  Heading Block 4
-> 
-> #####  Heading Block 5
-> 
-> ######  Heading Block 6
+> #### Heading Block 4
+>
+> ##### Heading Block 5
+>
+> ###### Heading Block 6
 
 ## Edge Cases
 
@@ -20,33 +21,40 @@ hidden: false
 ####Compact Notation
 
 Headers are denoted using a space-separated `#` prefix. While the space is technically required in most standard Markdown implementations, some processors allow for a compact notation as well. ReadMe supports this style, so writing this
-
-    ###A Valid Heading
-
-    Lorem ipsum dolor etc.
 
-> 🛑 
+```
+###A Valid Heading
+
+Lorem ipsum dolor etc.
+```
+
+> 🛑
 > Compact headings must be followed by two line breaks before the following block.
 
 #### ATX-Style Notation ####
 
 If you prefer, you can "wrap" headers with hashes rather than simply prefixing them:
 
-    ## ATX Headings are Valid ##
+```
+## ATX Headings are Valid ##
+```
 
 #### Underline Notation
 
 For top-level headings, the underline notation is valid:
 
-    Heading One
-    ===========
-
-    Heading Two
-    ---
+```
+Heading One
+===========
+
+Heading Two
+---
+```
 
 ### Incremented Anchors
 
 Occasionally, a single doc might contain multiple headings with the same text, which can cause the generated anchor links to conflict. ReadMe's new markdown processor normalizes heading anchors by auto-incrementing similar heading's IDs. Try it out by clicking on this section header _or_ the following sub-section title:
 
 #### Incremented Heading Anchors
+
 #### Incremented Heading Anchors

lib/run.tsx

@@ -9,6 +9,7 @@ import * as Components from '../components';
 import Contexts from '../contexts';
 import { VFileWithToc } from '../types';
 import { GlossaryTerm } from '../contexts/GlossaryTerms';
+import { Depth } from '../components/Heading';
 
 interface Variables {
   user: Record<string, string>;
@@ -26,6 +27,11 @@ export type RunOpts = Omit<RunOptions, 'Fragment'> & {
 type ComponentOpts = Record<string, (props: any) => React.ReactNode>;
 
 const makeUseMDXComponents = (more: RunOpts['components']): (() => ComponentOpts) => {
+  const headings = Array.from({ length: 6 }).reduce((map, _, index) => {
+    map[`h${index + 1}`] = Components.Heading((index + 1) as Depth);
+    return map;
+  }, {});
+
   const components = {
     ...more,
     ...Components,
@@ -37,8 +43,12 @@ const makeUseMDXComponents = (more: RunOpts['components']): (() => ComponentOpts
     img: Components.Image,
     table: Components.Table,
     'table-of-contents': Components.TableOfContents,
+    // @ts-expect-error
+    ...headings,
   };
 
+  console.log(headings);
+
   return () => components;
 };