Merge pull request #96 from UofGAnalytics/figure-anchor-links

add automatic anchor links to figures

compiler/src/mdast/__test__/images.test.ts

@@ -0,0 +1,36 @@
+import {
+  ignoreWhitespace,
+  testProcessor,
+} from '../../test-utils/test-processor';
+
+// <figure class="img-wrapper" id="#my-alt-text">
+//   <img src="/var/folders/dy/tzrrqxmx7_701rcnq9dnvfvh0000gp/T" alt="My alt text">
+//   <figcaption>
+//     <a href="#my-alt-text">
+//       <span class="caption-count">Figure 1: </span>
+//       My alt text
+//     </a>
+//   </figcaption>
+// </figure>
+
+describe('images', () => {
+  it('should render an html figure', async () => {
+    const { html } = await testProcessor(`
+      ![]()
+    `);
+
+    expect(ignoreWhitespace(html)).toMatch(
+      /<figureclass="img-wrapper"id="figure-1"><imgsrc=".+"alt=""><figcaption><ahref="#figure-1"><spanclass="caption-count">Figure1<\/span><\/a><\/figcaption><\/figure>/
+    );
+  });
+
+  it('should render an html figure with alt text', async () => {
+    const { html } = await testProcessor(`
+      ![My alt text]()
+    `);
+
+    expect(ignoreWhitespace(html)).toMatch(
+      /<figureclass="img-wrapper"id="my-alt-text"><imgsrc=".+"alt="Myalttext"><figcaption><ahref="#my-alt-text"><spanclass="caption-count">Figure1:<\/span>Myalttext<\/a><\/figcaption><\/figure>/
+    );
+  });
+});

compiler/src/mdast/images.ts

@@ -1,5 +1,6 @@
-import { Element } from 'hast';
-import { Image, Text } from 'mdast';
+import { Element, ElementContent } from 'hast';
+import kebabCase from 'lodash/kebabCase.js';
+import { Image } from 'mdast';
 import { Node } from 'unist';
 import { visit } from 'unist-util-visit';
 
@@ -31,25 +32,40 @@ function template(node: Image, count: number) {
     };
   }
 
-  const caption = createCaption(node, count);
+  const alt = getAltText(node);
+  const slug = kebabCase(alt ? alt : `Figure ${count}`);
+
+  const caption = {
+    type: 'element',
+    tagName: 'figcaption',
+    children: [
+      {
+        type: 'element',
+        tagName: 'a',
+        properties: {
+          href: `#${slug}`,
+        },
+        children: createLabel(alt, count),
+      },
+    ],
+  };
 
   Object.assign(node, {
     type: 'custom-image',
     data: {
       hName: 'figure',
       hProperties: {
         className: ['img-wrapper'],
+        id: slug,
       },
       hChildren: [image, caption],
     },
   });
 }
 
-function createCaption(node: Image, count: number) {
-  const result: Element = {
-    type: 'element',
-    tagName: 'figcaption',
-    children: [
+function createLabel(alt: string, count: number): ElementContent[] {
+  if (alt) {
+    return [
       {
         type: 'element',
         tagName: 'span',
@@ -59,25 +75,37 @@ function createCaption(node: Image, count: number) {
         children: [
           {
             type: 'text',
-            value: `Figure ${count}`,
+            value: `Figure ${count}:`,
           },
         ],
       },
-    ],
-  };
+      {
+        type: 'text',
+        value: ` ${alt}`,
+      },
+    ];
+  }
+  return [
+    {
+      type: 'element',
+      tagName: 'span',
+      properties: {
+        className: 'caption-count',
+      },
+      children: [
+        {
+          type: 'text',
+          value: `Figure ${count}`,
+        },
+      ],
+    },
+  ];
+}
 
+function getAltText(node: Image) {
   const altText = node.alt || '';
-
-  if (altText !== '' && !altText.includes('unnamed-chunk')) {
-    const currentCaption = result.children[0] as Element;
-    const currentValue = currentCaption.children[0] as Text;
-    currentValue.value += ': ';
-
-    result.children.push({
-      type: 'text',
-      value: `${node.alt}`,
-    });
+  if (altText.includes('unnamed-chunk')) {
+    return '';
   }
-
-  return result;
+  return altText;
 }

template/src/styles/images.scss

@@ -13,12 +13,14 @@ figure {
   }
   figcaption {
     margin-bottom: 3rem;
-    text-align: center;
     padding-top: 0.5rem;
-    font-style: italic;
-    color: var(--fadedTextColor);
-    .caption-count {
-      color: var(--highlightColor);
+    text-align: center;
+    a {
+      font-style: italic;
+      color: var(--fadedTextColor);
+      .caption-count {
+        color: var(--highlightColor);
+      }
     }
   }
 }