UofGAnalytics · dmca-glasgow · Jan 17, 2024 · Jan 17, 2024
diff --git a/compiler/src/code/__test__/code.test.ts b/compiler/src/code/__test__/code.test.ts
@@ -35,7 +35,9 @@ describe('code regex', () => {
     expect(unindentStringAndTrim(md)).toBe(expectedMd);
 
     const expectedHtml = unindentStringAndTrim(`
-      <h2>a</h2>
+      <h2 id="a"><a class="link" href="#a"><svg class="icon link-icon">
+            <use href="#link-icon"></use>
+          </svg></a>a</h2>
       <p>bbb</p>
       <div class="code-wrapper">
         <pre><code>%macro sortid(dsn);
@@ -66,7 +68,9 @@ describe('code regex', () => {
     expect(unindentStringAndTrim(md)).toBe(expectedMd);
 
     const expectedHtml = unindentStringAndTrim(`
-      <h2>a</h2>
+      <h2 id="a"><a class="link" href="#a"><svg class="icon link-icon">
+            <use href="#link-icon"></use>
+          </svg></a>a</h2>
       <p>bbb <code>e = mc2</code> ccc</p>
     `);
 

diff --git a/compiler/src/hast/__test__/autolink-headings.test.ts b/compiler/src/hast/__test__/autolink-headings.test.ts
@@ -0,0 +1,26 @@
+import {
+  ignoreWhitespace,
+  testProcessor,
+} from '../../test-utils/test-processor';
+
+describe('footnotes', () => {
+  it('should render a footnote', async () => {
+    const { html } = await testProcessor(`
+      ## test
+
+      hello
+    `);
+
+    const expected = ignoreWhitespace(`
+      <h2 id="test">
+        <a class="link" href="#test">
+          <svg class="icon link-icon"><use href="#link-icon"></use></svg>
+        </a>
+        test
+      </h2>
+      <p>hello</p>
+    `);
+
+    expect(ignoreWhitespace(html)).toBe(expected);
+  });
+});
diff --git a/compiler/src/hast/index.ts b/compiler/src/hast/index.ts
@@ -1,10 +1,13 @@
 import { Root } from 'mdast';
 import rehypeRaw from 'rehype-raw';
 import remark2rehype from 'remark-rehype';
+import slug from 'rehype-slug';
+import headings from 'rehype-autolink-headings';
 import { unified } from 'unified';
 import { VFile } from 'vfile';
 
 import { Context } from '../context';
+import { createSvg } from '../utils/icons';
 import { inlineRelativeAssets } from './inline-files';
 import { responsiveTables } from './responsive-tables';
 
@@ -17,7 +20,12 @@ export async function hastPhase(
   const processor = unified()
     .use(remark2rehype, { allowDangerousHtml: true })
     .use(rehypeRaw)
-    .use(responsiveTables);
+    .use(responsiveTables)
+    .use(slug)
+    .use(headings, {
+      content: createSvg('link-icon') as any,
+      properties: { className: 'link' },
+    });
 
   if (!ctx.options.noEmbedAssets) {
     processor.use(inlineRelativeAssets, ctx);

diff --git a/compiler/src/mdast/__test__/boxouts.test.ts b/compiler/src/mdast/__test__/boxouts.test.ts
@@ -31,7 +31,9 @@ describe('example', () => {
 
     const expected = unindentString(`
       <div class="boxout example" id="example-1"><span class="type">Example 1</span>
-        <h3>My Example</h3>
+        <h3 id="my-example"><a class="link" href="#my-example"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a>My Example</h3>
         <p>An example of <em>this</em>!</p>
       </div>
     `);
@@ -80,7 +82,9 @@ describe('example', () => {
 
     const expected = unindentString(`
       <div class="boxout example hello-icon" id="example-1"><span class="type">Example 1</span>
-        <h3>My Example</h3>
+        <h3 id="my-example"><a class="link" href="#my-example"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a>My Example</h3>
         <p>An example of <em>this</em>!</p>
       </div>
     `);
@@ -179,7 +183,9 @@ describe('weblink', () => {
 
     const expected = unindentString(`
       <div class="boxout weblink" id="weblink-1"><span class="type">Weblink 1</span>
-        <h3><a href="https://cran.r-project.org" target="_blank" class="target">https://cran.r-project.org</a></h3>
+        <h3 id="httpscranr-projectorg"><a class="link" href="#httpscranr-projectorg"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a><a href="https://cran.r-project.org" target="_blank" class="target">https://cran.r-project.org</a></h3>
         <p>A weblink of <em>this</em>!</p>
       </div>
     `);
@@ -196,7 +202,9 @@ describe('weblink', () => {
 
     const expected = unindentString(`
       <div class="boxout weblink" id="weblink-1"><span class="type">Weblink 1</span>
-        <h3><a href="https://cran.r-project.org" target="_blank" class="target">CRAN</a></h3>
+        <h3 id="cran"><a class="link" href="#cran"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a><a href="https://cran.r-project.org" target="_blank" class="target">CRAN</a></h3>
         <p>A weblink of <em>this</em>!</p>
       </div>
     `);
@@ -206,14 +214,12 @@ describe('weblink', () => {
 
   it('should render LaTeX in a title', async () => {
     const { html } = await testProcessor(`
-      ###[theorem] Sampling/asymptotic distribution of $X^2$
+      ###[theorem] Test $X^2$
       Bla bla
       ###[/theorem]
     `);
 
-    const expected = '<h3>Sampling/asymptotic distribution of <svg';
-
-    expect(ignoreWhitespace(html)).toContain(ignoreWhitespace(expected));
+    expect(html).toMatch(/Test\s+<svg/);
   });
 
   it('should render a ggplot inside', async () => {

diff --git a/compiler/src/mdast/__test__/footnotes.test.ts b/compiler/src/mdast/__test__/footnotes.test.ts
@@ -14,7 +14,9 @@ describe('footnotes', () => {
     const expected = unindentString(`
       <p>Bla bla <sup><a href="#user-content-fn-1" id="user-content-fnref-1" data-footnote-ref="" aria-describedby="footnote-label">1</a></sup>.</p>
       <section data-footnotes="" class="footnotes">
-        <h2 class="sr-only" id="footnote-label">Footnotes</h2>
+        <h2 class="sr-only" id="footnote-label"><a class="link" href="#footnote-label"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a>Footnotes</h2>
         <ol>
           <li id="user-content-fn-1">
             <p>Bla <a href="#user-content-fnref-1" data-footnote-backref="" aria-label="Back to reference 1" class="data-footnote-backref">↩</a></p>

diff --git a/compiler/src/mdast/__test__/move-answers-to-end.test.ts b/compiler/src/mdast/__test__/move-answers-to-end.test.ts
@@ -16,7 +16,9 @@ describe('moveAnswersToEnd', () => {
 
     const expected = unindentString(`
       <div class="boxout task" id="task-1"><span class="type">Task 1</span>
-        <h3>My task title</h3>
+        <h3 id="my-task-title"><a class="link" href="#my-task-title"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a>My task title</h3>
         <p>This is the <em>task</em> content</p>
         <div class="answer"><span class="answer-trigger" data-answer-id="1">Show answer</span>
           <div class="answer-reveal" id="answer-1">

diff --git a/compiler/src/mdast/__test__/references.test.ts b/compiler/src/mdast/__test__/references.test.ts
@@ -15,7 +15,9 @@ describe('references', () => {
 
     const expected = unindentString(`
       <div class="boxout example" id="example-1"><span class="type">Example 1</span>
-        <h3>My title</h3>
+        <h3 id="my-title"><a class="link" href="#my-title"><svg class="icon link-icon">
+              <use href="#link-icon"></use>
+            </svg></a>My title</h3>
         <p>Argh</p>
       </div>
       <p>And once I saw a <a href="#example-1">Example 1</a> and another <a href="#example-1">Example 1</a></p>

diff --git a/compiler/src/mdast/index.ts b/compiler/src/mdast/index.ts
@@ -1,15 +1,12 @@
-import headings from 'rehype-autolink-headings';
 import directive from 'remark-directive';
 import frontmatter from 'remark-frontmatter';
 import gfm from 'remark-gfm';
 import markdown from 'remark-parse';
-import slug from 'rehype-slug';
 import { unified } from 'unified';
 import { VFile } from 'vfile';
 
 import { Context } from '../context';
 import { aliasDirectiveToLatexSvg } from '../latex/directive-to-svg';
-import { createSvg } from '../utils/icons';
 import { browserWindow } from './browser-window';
 import { codeBlocks } from './code-blocks';
 import { columns } from './columns';
@@ -33,13 +30,10 @@ export async function mdastPhase(file: VFile, ctx: Context) {
     .use(directive)
     .use(frontmatter)
     .use(gfm)
-    .use(slug)
-    .use(headings, {
-      content: createSvg('link-icon') as any,
-      properties: { className: 'link' },
-    })
     // custom plugins:
-    .use(() => (tree) => {})
+    // .use(() => (tree) => {
+    //   console.dir(tree, { depth: null });
+    // })
     .use(columns)
     .use(embedAssetUrl, ctx)
     .use(youtubeVideos)
@@ -55,6 +49,5 @@ export async function mdastPhase(file: VFile, ctx: Context) {
     .use(pagebreaks);
 
   const parsed = processor.parse(file);
-  // @ts-expect-error
   return processor.run(parsed, file);
 }