add anchor links to headers

jcubic · Apr 5, 2024 · edf6830 · edf6830
1 parent 2f42ab0
commit edf6830
Show file tree

Hide file tree

Showing 7 changed files with 12 additions and 8 deletions.
diff --git a/docs/src/components/Acknowledgment/index.tsx b/docs/src/components/Acknowledgment/index.tsx
@@ -4,7 +4,7 @@ import styles from '../styles.module.css';
 export default function Acknowledgment(): JSX.Element {
     return (
       <div className={styles.section}>
-        <Heading as="h2" className={styles.header}>Acknowledgments</Heading>
+        <Heading as="h2" id="acknowledgment" className={styles.header}>Acknowledgments</Heading>
         <ul>
           <li>Font used in logo is <a href="https://www.dafont.com/telegrafico.font">Telegrafico</a> by <a href="https://www.deviantart.com/ficod">ficod</a>.</li>
           <li>Current Parser is inspired by implementation in <a href="https://www.biwascheme.org/">BiwaScheme</a> by Yutaka HARA (yhara).</li>

diff --git a/docs/src/components/Intro/index.tsx b/docs/src/components/Intro/index.tsx
@@ -5,7 +5,7 @@ import styles from '../styles.module.css';
 export default function Intro(): JSX.Element {
   return (
     <div className={styles.section}>
-      <Heading as="h2" className={styles.header}>Summary</Heading>
+      <Heading as="h2" id="summary" className={styles.header}>Summary</Heading>
       <p>
         LIPS Scheme is powerful lisp interpreter written in JavaScript. The aim of the project
         is to fully support <a href="https://standards.scheme.org/#r7rs">R7RS</a> specification

diff --git a/docs/src/components/License/index.tsx b/docs/src/components/License/index.tsx
@@ -4,7 +4,7 @@ import styles from '../styles.module.css';
 export default function License(): JSX.Element {
     return (
       <div className={styles.section}>
-        <Heading as="h2" className={styles.header}>License</Heading>
+        <Heading as="h2" id="license" className={styles.header}>License</Heading>
         <p>
           LIPS Scheme is <a href="https://opensource.com/resources/what-open-source">Open Source</a>
           {' '}and released on <a href="https://github.com/jcubic/lips/blob/master/LICENSE">MIT license</a></p>

diff --git a/docs/src/components/Reference/index.tsx b/docs/src/components/Reference/index.tsx
@@ -1,5 +1,7 @@
 import { useState, useEffect, useMemo, ChangeEvent } from 'react';
 import Fuse, { FuseIndex } from 'fuse.js'
+import Heading from '@theme/Heading';
+
 
 import styles from './index.module.css';
 
@@ -54,8 +56,8 @@ export default function Reference({ docs }: ReferenceProps) {
       <ul>
         {result.map(({item}) => {
           return (
-            <li key={item.name} id={item.name}>
-              <h2>{ item.name }</h2>
+            <li key={item.name}>
+              <Heading as="h2" id={item.name}>{ item.name }</Heading>
               <pre>{ item.doc }</pre>
             </li>
           );

diff --git a/docs/src/components/Tools/Screenshooter.tsx b/docs/src/components/Tools/Screenshooter.tsx
@@ -9,7 +9,9 @@ export default function Screenshooter(): JSX.Element {
     <section id="bookmarklet">
       <div className="container">
         <ScreenshotSVG className={styles.svg} role="img" />
-        <Heading as="h3"><Link to="/screenshooter">Screenshooter</Link></Heading>
+        <Heading as="h3" id="screenshooter">
+          <Link to="/screenshooter">Screenshooter</Link>
+        </Heading>
         <p>This tool allow you to create nice screenshot of code. The screenshot tool is aware of
         any syntax added on top of Scheme. The tool is created using Codemirror and custom style
         build on top of Scheme syntax.</p>

diff --git a/docs/src/components/Tools/index.tsx b/docs/src/components/Tools/index.tsx
@@ -8,7 +8,7 @@ import Screenshooter from './Screenshooter';
 export default function Tools(): JSX.Element {
   return (
     <div className={styles.tools}>
-      <Heading as="h2" className={styles.header}>Tools</Heading>
+      <Heading as="h2" id="tools" className={styles.header}>Tools</Heading>
       <Bookmark />
       <Screenshooter />
     </div>

diff --git a/docs/src/components/Video/index.tsx b/docs/src/components/Video/index.tsx
@@ -5,7 +5,7 @@ import styles from '../styles.module.css';
 export default function Video(): JSX.Element {
   return (
     <div className={styles.section} id="video">
-      <Heading as="h2" className={styles.header}>Video Presentation about LIPS Scheme</Heading>
+      <Heading as="h2" id="video" className={styles.header}>Video Presentation about LIPS Scheme</Heading>
       <p>
         Video presentation given during <a href="https://archive.fosdem.org/2023/">FOSDEM 2023</a> in <a href="https://archive.fosdem.org/2023/schedule/track/declarative_and_minimalistic_computing/">Declarative and Minimalistic Computing devroom</a>. It discuss different aspect of LIPS Scheme. It first gives quick intro to Lisp and Scheme and later show different features of LIPS Scheme.
       </p>