🚧 Create remark-link-card

contentlayer.config.js

@@ -6,6 +6,8 @@ import readingTime from 'reading-time';
 import remarkFootnotes from 'remark-footnotes';
 import remarkGfm from 'remark-gfm';
 import remarkUnwrapImages from 'remark-unwrap-images';
+import { RemarkLinkCard } from './lib/remark-link-card';
+import { cfg } from './utils/constants';
 
 /** @type {import('contentlayer/source-files').ComputedFields} */
 const computedFields = {
@@ -81,6 +83,7 @@ export default makeSource({
       // remark-gfm 4.0.0 has an issue to render table.
       // @see https://github.com/remarkjs/remark-gfm/issues/57
       remarkGfm,
+      RemarkLinkCard,
       [remarkFootnotes, { inlineNotes: true }],
     ],
     rehypePlugins: [

lib/mdast/node-is.ts

@@ -0,0 +1,43 @@
+import type { Paragraph, Link, Text } from 'mdast';
+import type { Node, Literal, Parent } from 'unist';
+
+function isObject(target: unknown): target is { [key: string]: unknown } {
+  return typeof target === 'object' && target !== null;
+}
+
+export function isNode(node: unknown): node is Node {
+  return isObject(node) && 'type' in node;
+}
+
+export function isParent(node: unknown): node is Parent {
+  return isObject(node) && Array.isArray(node.children);
+}
+
+export function isLiteral(node: unknown): node is Literal {
+  return isObject(node) && 'value' in node;
+}
+
+export function isParagraph(node: unknown): node is Paragraph {
+  return isNode(node) && node.type === 'paragraph';
+}
+
+export function isText(node: unknown): node is Text {
+  return (
+    isLiteral(node) && node.type === 'text' && typeof node.value === 'string'
+  );
+}
+
+export function isLink(node: unknown): node is Link {
+  return isNode(node) && node.type === 'link';
+}
+
+export function isBareLink(
+  node: unknown
+): node is Paragraph & { children: [Link & { children: [Text] }] } {
+  return (
+    isParagraph(node) &&
+    node.children.length === 1 &&
+    isLink(node.children[0]) &&
+    isText(node.children[0].children[0])
+  );
+}

lib/remark-link-card.ts

@@ -0,0 +1,38 @@
+import { visit } from 'unist-util-visit';
+
+import type { Root } from 'mdast';
+import type { Plugin } from 'unified';
+import type { Parent } from 'unist';
+import { isBareLink, isParent } from './mdast/node-is';
+
+const LIST_ITEM = 'listItem';
+
+export const RemarkLinkCard: Plugin<void[], Root> = () => {
+  return (tree) => {
+    visit(tree, isBareLink, (node, _index, parent: Parent | undefined) => {
+      if (!isParent(parent)) {
+        return;
+      }
+
+      if (parent.type === LIST_ITEM) {
+        return;
+      }
+
+      const child = node.children[0];
+
+      if (!child.url.startsWith('http')) {
+        return;
+      }
+
+      child.data = {
+        ...child.data,
+        // TODO: fix
+        // hProperties: {
+        //   ...(child.data?.hProperties ?? {}),
+        //   dataLinkcard: true,
+        // },
+      };
+      console.log(child);
+    });
+  };
+};

package.json

@@ -20,9 +20,6 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@tailwindcss/typography": "^0.5.10",
-    "@types/node": "18.16.1",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "18.2.1",
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "autoprefixer": "10.4.14",
@@ -41,25 +38,36 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-share": "^5.1.0",
-    "reading-time": "^1.5.0",
-    "rehype-code-titles": "^1.2.0",
-    "rehype-prism-plus": "^2.0.0",
-    "rehype-slug": "^6.0.0",
-    "remark-footnotes": "^4.0.1",
-    "remark-gfm": "^3.0.1",
-    "remark-unwrap-images": "^4.0.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss": "3.3.2",
     "tailwindcss-animate": "^1.0.7",
     "typescript": "5.0.4"
   },
   "devDependencies": {
     "@microsoft/eslint-formatter-sarif": "^3.0.0",
+    "@types/node": "18.16.1",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "18.2.1",
+    "@types/hast": "^3.0.4",
+    "@types/mdast": "^4.0.3",
+    "@types/unist": "^3.0.2",
     "eslint": "8.39.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-unused-imports": "^3.1.0",
+    "reading-time": "^1.5.0",
+    "rehype-code-titles": "^1.2.0",
+    "rehype-prism-plus": "^2.0.0",
+    "rehype-slug": "^6.0.0",
+    "remark-footnotes": "^4.0.1",
+    "remark-gfm": "^3.0.1",
+    "remark-unwrap-images": "^4.0.0",
+    "hastscript": "^9.0.0",
     "inquirer": "^9.2.16",
+    "mdast": "^3.0.0",
+    "mdast-util-to-hast": "^13.1.0",
     "prettier": "^3.2.5",
-    "prettier-plugin-tailwindcss": "^0.5.12"
+    "prettier-plugin-tailwindcss": "^0.5.12",
+    "unified": "^11.0.4",
+    "unist-util-visit": "^5.0.0"
   }
 }