Merge pull request #168 from GSA/mmeyer/refactor-link-plugin

refactor link / image plugins

astro.config.mjs

@@ -1,7 +1,7 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
-import uswds_links from "./src/plugins/uswds_links";
-import prefix_links from './src/plugins/prefix_links';
+import process_anchors from "./src/plugins/process_anchors";
+import process_image_urls from './src/plugins/process_image_urls';
 import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
@@ -11,7 +11,9 @@ export default defineConfig({
     integrations: [mdx(), sitemap()],
     outDir: '_site',
     markdown: {
-      rehypePlugins: [uswds_links],
-      remarkPlugins: [[prefix_links, {baseURL: process.env.BASEURL || '/'}]]
+      rehypePlugins: [
+        [process_anchors, {baseURL: process.env.BASEURL || '/'}],
+        [process_image_urls, {baseURL: process.env.BASEURL || '/'}]
+      ],
     }
 });

src/plugins/process_anchors.js

@@ -0,0 +1,66 @@
+/*
+ * The purpose of this is to process links in content sources to prevent 
+ * local links on cloud.gov pages feature branches from breaking.
+ * Markdown links like [some text](somelink) will be prefixed with the 
+ * Base_URL and have the class `usa-link` added. If the link is a
+ * non-smartpay link it will additionally get the usa-link--external class
+ * 
+ * Inline html links like <a href="somelink">some text</>
+ * will only be prefixed with the baseURL. Classes can be added inline
+ */
+
+
+import {visit} from 'unist-util-visit'
+
+import path from 'path'
+
+function isInternalDomain(url) {
+  try { 
+    const domain = new URL(url)
+    return domain.hostname.endsWith('smartpay.gsa.gov')
+  } catch(e) {
+    // this represents urls like "/some/path" without domain
+    return true
+  }
+}
+
+function process_mdx_anchor(node, baseURL) {
+  /**  
+   * Process raw links in source content 
+   * like <a href="/some_link">text</a>
+   */
+
+  node.attributes.forEach(attr => {
+    if (attr.name === 'href' && attr.value.startsWith('/') && !attr.value.startsWith('//')) {
+      attr.value = path.join('/', baseURL, attr.value)
+    }
+  }); 
+}
+
+function process_markdown_link(node, baseURL) {
+   /**  
+   * Process raw links in source content 
+   * like [some text](/some_link)
+   */
+
+  const properties = node.properties
+  properties.className = isInternalDomain(properties.href) 
+  ? 'usa-link'
+  : 'usa-link  usa-link--external';
+
+  if (properties.href.startsWith('/') && !properties.href.startsWith('//')) {
+    properties.href = path.join('/', baseURL, properties.href)
+  }
+}
+export default (options) => {
+  return tree => {
+    visit(tree,  [{"type": "element", "tagName": "a"}, {"type":'mdxJsxTextElement', "name": "a"}], (node, index, parent) => {
+      if (node.type === 'mdxJsxTextElement') {
+        process_mdx_anchor(node, options.baseURL)
+      } else {
+        process_markdown_link(node, options.baseURL)
+      }
+    })
+  }
+};
+

src/plugins/process_image_urls.js

@@ -0,0 +1,51 @@
+/*
+ * The purpose of this is to process image in content sources to prevent 
+ * local srcs (those starting with `/`) on cloud.gov pages feature branches from breaking.
+ * This should work for both markdown image like ![some text](somelink) as well as
+ * inline html image like <img src="somelink" alt="some text"/>
+ */
+
+
+import {visit} from 'unist-util-visit'
+
+import path from 'path'
+
+
+function process_mdx_image(node, baseURL) {
+    /**  
+     * Process raw img tags in source content 
+     * like <img src="/some_link" />
+     */
+
+    node.attributes.forEach(attr => {
+      if (attr.name === 'src' && attr.value.startsWith('/') && !attr.value.startsWith('//')) {
+        attr.value = path.join('/', baseURL, attr.value)
+      }
+    }); 
+  }
+
+  function process_markdown_image(node, baseURL) {
+     /**  
+     * Process raw links in source content 
+     * like ![some text](/some_link)
+     */
+
+    const properties = node.properties
+
+    if (properties.src.startsWith('/') && !properties.src.startsWith('//')) {
+      properties.src = path.join('/', baseURL, properties.src)
+    }
+  }
+  export default (options) => {
+    return tree => {
+      visit(tree,  [{"type": "element", "tagName": "img"}, {"type":'mdxJsxFlowElement', "name": "img"}], (node, index, parent) => {
+        if (node.type === 'mdxJsxFlowElement') {
+            process_mdx_image(node, options.baseURL)
+        } else {
+            process_markdown_image(node, options.baseURL)
+        }
+      })
+    }
+  };
+
+