inject-link-classes into rehype

src/plugins/rehype/index.ts

@@ -5,8 +5,10 @@ import rehypeRaw from 'rehype-raw';
 import { checkReferencedAnchorsPlugin } from './check-referenced-anchors.ts';
 import { injectDtIdsPlugin } from './inject-dt-ids.ts';
 import { injectHeadingSlugsPlugin } from './inject-heading-slugs.ts';
+import { injectLinkClassesPlugin } from './inject-link-classes.ts';
 
 const rehypePlugins: RehypePlugins = [
+  injectLinkClassesPlugin,
   injectHeadingSlugsPlugin,
   [rehypeAutolinkHeadings, { behavior: 'append' }],
   rehypeRaw,

src/plugins/rehype/inject-link-classes.ts

@@ -0,0 +1,50 @@
+import type { Element } from 'hast';
+import type { Root } from 'hast';
+import { visit } from 'unist-util-visit';
+
+import hasPage from '../registry/has-page.js';
+import { initRegistry } from '../registry/registry.js';
+import getSlugFromUrl from '../utils/get-slug-from-url.js';
+
+const EXTERNAL_LINK_CLASS = 'wd-external';
+const MISSING_LINK_CLASS = 'wd-nav-link-not-translated';
+
+function getClassesByUrl(url: string): string[] {
+  if (url.startsWith('#')) {
+    return [];
+  }
+  if (url.startsWith('http')) {
+    return [EXTERNAL_LINK_CLASS];
+  }
+  const slug = getSlugFromUrl(url);
+  if (slug === '') {
+    // Link to the root
+    return [];
+  }
+  const isPresent = hasPage(slug);
+  if (!isPresent) {
+    return [MISSING_LINK_CLASS];
+  }
+  return [];
+}
+
+export default async function injectLinkClasses(tree: Root) {
+  await initRegistry();
+
+  visit(tree, 'element', (node: Element) => {
+    if (node.tagName !== 'a') return;
+    const url = node.properties?.href;
+    if (typeof url !== 'string') return;
+    const classes = getClassesByUrl(url);
+    node.properties.class = classes.join(' ');
+    if (classes.includes(EXTERNAL_LINK_CLASS)) {
+      node.properties.target = '_blank';
+      node.properties.rel = 'noopener noreferrer';
+      node.properties['data-astro-prefetch'] = 'false';
+    }
+  });
+}
+
+export function injectLinkClassesPlugin() {
+  return injectLinkClasses;
+}

src/plugins/remark/index.ts

@@ -7,15 +7,13 @@ import { extractSectionPlugin } from './extract-section.ts';
 import { fixLocalImagesPlugin } from './fix-local-images.ts';
 import { fixNolintLanguagePlugin } from './fix-nolint-language.ts';
 import injectHistoryPlugin from './inject-history/index.ts';
-import { injectLinkClassesPlugin } from './inject-link-classes.ts';
 import expandMacrosPlugin from './macros/plugin.ts';
 const remarkPlugins: RemarkPlugins = [
   // headings,
   // remarkFrontmatter,
   extractSectionPlugin,
   extractDescriptionPlugin,
   expandMacrosPlugin,
-  injectLinkClassesPlugin,
   fixLocalImagesPlugin,
   extractCoverPlugin,
   fixNolintLanguagePlugin,