@terrafirmagreg-team/mdx 1.2.5 → 1.2.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/mdx",
-  "version": "1.2.5",
+  "version": "1.2.7",
   "type": "module",
   "description": "MDX/markdown pipeline",
   "license": "LGPL-3.0-only",
@@ -16,14 +16,14 @@
       "./src/components/*/index.ts"
     ],
     "./types/*": "./src/types/*.ts",
-    "./types": "./src/types/index.ts"
+    "./types": "./src/types/index.ts",
+    "./lib/markdown": "./src/lib/markdown/index.ts"
   },
   "dependencies": {
     "@fumadocs/story": "^1.5.3",
     "@fumari/stf": "^1.1.2",
-    "@terrafirmagreg-team/translate": "^1.2.6",
-    "@terrafirmagreg-team/ui": "^1.2.7",
-    "@types/turndown": "^5.0.6",
+    "@terrafirmagreg-team/translate": "^1.2.8",
+    "@terrafirmagreg-team/ui": "^1.2.9",
     "fumadocs-core": "16.17.10",
     "fumadocs-docgen": "^3.2.0",
     "fumadocs-twoslash": "^4.0.4",
@@ -37,8 +37,6 @@
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "remark-parse": "^11.0.0",
-    "turndown": "^7.2.5",
-    "turndown-plugin-gfm": "^1.0.2",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.2.0"
   },

package/src/components/mdx-components.tsx

@@ -38,6 +38,7 @@ import { Mermaid } from '@terrafirmagreg-team/ui/components/mdx/mermaid';
 import { Callout, CalloutContainer } from '@terrafirmagreg-team/ui/components/mdx/callout';
 import { Input, Output, Preview } from '@terrafirmagreg-team/ui/components/mdx/preview';
 import { DocsImage } from './docs-image';
+import { MdxStory } from './mdx-story';
 import { Multiblock } from '@terrafirmagreg-team/ui/components/mdx/multiblock';
 import { Icon } from '@terrafirmagreg-team/ui/components/mdx/icon';
 import { Video } from '@terrafirmagreg-team/ui/components/mdx/video';
@@ -86,6 +87,7 @@ export function getMDXComponents(components?: MDXComponents) {
     Input,
     Output,
     DocsImage,
+    Story: MdxStory,
     Multiblock,
     Icon,
     Video,

package/src/components/mdx-story.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { storyFor } from '../lib/story';
+
+export function MdxStory({ name }: { name?: string }) {
+  const entry = name ? storyFor(name) : undefined;
+  return entry ? <entry.WithControl /> : null;
+}

package/src/lib/markdown/index.ts

@@ -1,4 +1,3 @@
-export * from './dom';
 export * from './providers';
 
 export async function renderSectionMarkdown(page: {

package/src/lib/mdx/github-autolinks.ts

@@ -3,6 +3,7 @@ type MdastNode = {
   value?: string;
   url?: string;
   children?: MdastNode[];
+  data?: { hProperties?: Record<string, unknown> };
 };
 
 const ISSUE_REF = /^#\d+$/;
@@ -18,15 +19,21 @@ const SKIP = new Set([
   'html',
 ]);
 
-const DEFAULT_PATH = /[/\\]changelog[/\\]([^/\\]+)[/\\]/;
+const DEFAULT_PATHS = [
+  /[/\\]changelog[/\\]([^/\\]+)[/\\]/,
+  /[/\\]docs[/\\]([^/\\]+)[/\\][^/\\]+[/\\]major-changelogs[/\\]/,
+];
 
 export function remarkGithubAutolinks(options: {
   datasetConfig?: Record<string, { repo?: string }>;
-  path?: RegExp;
+  paths?: RegExp[];
 } = {}) {
-  const { datasetConfig = {}, path = DEFAULT_PATH } = options;
+  const { datasetConfig = {}, paths = DEFAULT_PATHS } = options;
   return (tree: MdastNode, file: { path?: string }) => {
-    const pack = path.exec(file.path ?? '')?.[1];
+    const filePath = file.path ?? '';
+    const pack = paths
+      .map((pattern) => pattern.exec(filePath)?.[1])
+      .find(Boolean);
     const repo = pack ? datasetConfig[pack]?.repo : undefined;
     if (!repo) return;
     const repoUrl = `https://github.com/${repo}`;
@@ -43,12 +50,14 @@ export function remarkGithubAutolinks(options: {
                 type: 'link',
                 url: `${repoUrl}/issues/${part.slice(1)}`,
                 children: [{ type: 'text', value: part }],
+                data: { hProperties: { className: 'gh-issue' } },
               }
             : USER_REF.test(part)
               ? {
                   type: 'link',
                   url: `https://github.com/${part.slice(1)}`,
                   children: [{ type: 'text', value: part }],
+                  data: { hProperties: { className: 'gh-mention' } },
                 }
               : { type: 'text', value: part },
         );

package/src/lib/story.ts

@@ -1,11 +1,32 @@
 'use client';
 
 import { defineStoryFactory } from '@fumadocs/story/next/client';
+import type {
+  Story,
+  StoryOptions,
+} from '@fumadocs/story/next/client';
 import { DocsWithControl } from '../components/story-panel';
+import type { ComponentType } from 'react';
 
 export { md } from './md';
 
-export const { defineStory } = defineStoryFactory({
+const factory = defineStoryFactory({
   WithControl: DocsWithControl,
 });
 
+const registry = ((globalThis as Record<symbol, unknown>)[
+  Symbol.for('terrafirmagreg.mdx.stories')
+] ??= {}) as Record<string, Story>;
+
+export function defineStory<C extends ComponentType<any>>(
+  options: StoryOptions<C>,
+): Story<C> {
+  const story = factory.defineStory(options);
+  if (options.displayName)
+    registry[options.displayName] = story as Story;
+  return story;
+}
+
+export function storyFor(name: string): Story | undefined {
+  return registry[name];
+}

package/src/lib/markdown/dom.ts

@@ -1,104 +0,0 @@
-'use client';
-import type TurndownService from 'turndown';
-
-function decodedUrl(raw: string): string {
-  const url = raw.replace(/(?:%[0-9A-Fa-f]{2})+/g, (run) => {
-    let decoded: string;
-    try {
-      decoded = decodeURIComponent(run);
-    } catch {
-      return run;
-    }
-    return /[/?#&=%+]/.test(decoded) ? run : decoded;
-  });
-  return /[\s<>()]/.test(url) ? `<${url}>` : url;
-}
-
-let servicePromise: Promise<TurndownService> | undefined;
-
-function turndownService(): Promise<TurndownService> {
-  servicePromise ??= (async () => {
-    const [{ default: TurndownServiceImpl }, { gfm }] = await Promise.all([
-      import('turndown'),
-      // @ts-expect-error -- no published type declarations
-      import('turndown-plugin-gfm'),
-    ]);
-    const service = new TurndownServiceImpl({
-      headingStyle: 'atx',
-      codeBlockStyle: 'fenced',
-      bulletListMarker: '-',
-    });
-    service.use(gfm);
-    service.remove([
-      'script',
-      'style',
-      'noscript',
-      'template',
-      'button',
-      'select',
-      'nav',
-      'aside',
-      'footer',
-    ]);
-    service.remove(
-      (node) =>
-        node.nodeName === 'SVG' ||
-        (node instanceof HTMLImageElement &&
-          (node.src.startsWith('data:') ||
-            (node.width > 0 && node.width <= 48))) ||
-        (node instanceof HTMLElement && node.dataset.mdSkip !== undefined),
-    );
-    service.addRule('decodedLink', {
-      filter: 'a',
-      replacement(content, node) {
-        const anchor = node as HTMLAnchorElement;
-        const href = anchor.getAttribute('href');
-        if (!href) return content;
-        const title = anchor.getAttribute('title');
-        const titlePart = title ? ` "${title.replace(/"/g, '\\"')}"` : '';
-        return `[${content}](${decodedUrl(href)}${titlePart})`;
-      },
-    });
-    service.addRule('decodedImage', {
-      filter: 'img',
-      replacement(_content, node) {
-        const image = node as HTMLImageElement;
-        const src = image.getAttribute('src');
-        if (!src) return '';
-        const alt = image.getAttribute('alt') ?? '';
-        const title = image.getAttribute('title');
-        const titlePart = title ? ` "${title.replace(/"/g, '\\"')}"` : '';
-        return `![${alt}](${decodedUrl(src)}${titlePart})`;
-      },
-    });
-    return service;
-  })();
-  return servicePromise;
-}
-
-export async function domToMarkdown(
-  root: Element | null | undefined,
-): Promise<string> {
-  if (!root) return '';
-  return (await turndownService()).turndown(root as HTMLElement);
-}
-
-export function pageMarkdown(
-  root: Element | null | undefined,
-  title: string,
-): Promise<string> {
-  return domToMarkdown(root).then((body) => `# ${title}\n\n${body}`);
-}
-
-export async function openPageMarkdown(
-  root: Element | null | undefined,
-  title: string,
-): Promise<void> {
-  const markdown = await pageMarkdown(root, title);
-  const url = URL.createObjectURL(
-    new Blob([markdown], { type: 'text/markdown;charset=utf-8' }),
-  );
-  window.open(url, '_blank', 'noopener');
-  setTimeout(() => URL.revokeObjectURL(url), 60_000);
-}
-