@terrafirmagreg-team/mdx 1.2.4 → 1.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrafirmagreg-team/mdx",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "type": "module",
   "description": "MDX/markdown pipeline",
   "license": "LGPL-3.0-only",
@@ -21,14 +21,16 @@
   "dependencies": {
     "@fumadocs/story": "^1.5.3",
     "@fumari/stf": "^1.1.2",
-    "@terrafirmagreg-team/translate": "^1.2.5",
-    "@terrafirmagreg-team/ui": "^1.2.6",
+    "@terrafirmagreg-team/translate": "^1.2.6",
+    "@terrafirmagreg-team/ui": "^1.2.7",
     "@types/turndown": "^5.0.6",
     "fumadocs-core": "16.17.10",
     "fumadocs-docgen": "^3.2.0",
     "fumadocs-twoslash": "^4.0.4",
     "fumadocs-typescript": "5.6.0",
+    "gemoji": "^8.1.0",
     "lucide-react": "^1.63.0",
+    "mdast-util-to-string": "^4.0.0",
     "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-directive": "^4.0.0",

package/src/components/mdx-components.tsx

@@ -39,9 +39,9 @@ import { Callout, CalloutContainer } from '@terrafirmagreg-team/ui/components/md
 import { Input, Output, Preview } from '@terrafirmagreg-team/ui/components/mdx/preview';
 import { DocsImage } from './docs-image';
 import { Multiblock } from '@terrafirmagreg-team/ui/components/mdx/multiblock';
-import { GradientText } from '@terrafirmagreg-team/ui/components/mdx/gradient-text';
-import { GlowHeader } from '@terrafirmagreg-team/ui/components/mdx/glow-header';
 import { Icon } from '@terrafirmagreg-team/ui/components/mdx/icon';
+import { Video } from '@terrafirmagreg-team/ui/components/mdx/video';
+import { Gradient } from '@terrafirmagreg-team/ui/components/mdx/gradient';
 import { LinkPreview } from '@terrafirmagreg-team/ui/components/blocks/link/link-preview';
 import type { MDXComponents } from 'mdx/types';
 import type { ComponentProps, HTMLAttributes } from 'react';
@@ -87,9 +87,9 @@ export function getMDXComponents(components?: MDXComponents) {
     Output,
     DocsImage,
     Multiblock,
-    GradientText,
-    GlowHeader,
     Icon,
+    Video,
+    Gradient,
     a: LinkPreview,
     pre: (props: HTMLAttributes<HTMLPreElement>) => (
       <CodeBlock {...props}>

package/src/components/story-panel.tsx

@@ -144,7 +144,7 @@ function Content() {
       )}
       <div className="bg-fd-background p-4 not-last:border-b">
         <PreviewBoundary resetKey={args}>
-          {createElement(Component, args)}
+          {createElement(Component, { ...args, key: variant })}
         </PreviewBoundary>
       </div>
       {preset && (

package/src/lib/md-plugins.ts

@@ -1,7 +1,6 @@
 import { rehypeCode } from 'fumadocs-core/mdx-plugins/rehype-code';
 import {
   rehypeCodeDefaultOptions,
-  remarkDirectiveAdmonition,
   remarkMdxFiles,
   remarkMdxMermaid,
   remarkSteps,
@@ -16,11 +15,13 @@ import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import { remarkAccordions } from './mdx/accordions';
 import { remarkBanner } from './mdx/banner';
+import { remarkCallouts } from './mdx/callouts';
+import { remarkDirectiveFallback } from './mdx/directive-fallback';
 import { remarkDirectives } from './mdx/directives';
-import { remarkHtmlStyle } from './mdx/html-style';
-import { remarkGameExport } from './mdx/game-export';
+import { filesToMdx, remarkFilesDirective } from './mdx/files';
+import { remarkEntries } from './mdx/entries/index.ts';
+import { remarkGithubAutolinks } from './mdx/github-autolinks';
 import { remarkPreview } from './mdx/preview';
-import { remarkChangelogReferences } from './mdx/references';
 import { remarkTabs } from './mdx/tabs';
 import type { PluggableList } from 'unified';
 
@@ -64,31 +65,18 @@ export const mdOptions = (
       remarkAccordions,
       remarkBanner,
       remarkDirectives,
-      remarkHtmlStyle,
-      remarkGameExport,
-      [remarkChangelogReferences, { datasetConfig }],
+      remarkEntries,
+      [remarkGithubAutolinks, { datasetConfig }],
       [remarkDocGen, { generators: [fileGenerator()] }],
       remarkShow,
       remarkAutoTypeTable,
-      [
-        remarkDirectiveAdmonition,
-        {
-          types: {
-            note: 'note',
-            tip: 'tip',
-            info: 'info',
-            warn: 'warning',
-            warning: 'warning',
-            danger: 'error',
-            success: 'success',
-            idea: 'idea',
-          },
-        },
-      ],
+      remarkCallouts,
       remarkMath,
       remarkSteps,
-      remarkMdxFiles,
+      [remarkMdxFiles, { toMdx: filesToMdx }],
+      remarkFilesDirective,
       remarkMdxMermaid,
+      remarkDirectiveFallback,
       [remarkBlockId, { addDataAttribute: 'feedback' }],
     ] as PluggableList,
     remarkRehypeOptions: { allowDangerousHtml: true },

package/src/lib/mdx/accordions.ts

@@ -1,6 +1,7 @@
 import {
   contentChildren,
   estreeBoolean,
+  estreeStringArray,
   extractDirectiveLabel,
   extractLeafLabel,
   jsxAttr,
@@ -17,11 +18,9 @@ export function remarkAccordions() {
     walkContainers(tree, (directive) => {
       if (directive.name === 'accordion' || directive.name === 'details') {
         wrapSingle(directive);
-        return false;
       }
       if (directive.name === 'accordions') {
         toAccordions(directive);
-        return false;
       }
     });
   };
@@ -37,10 +36,22 @@ function toAccordion(node: DirectiveNode): JsxElement {
 }
 
 function wrapSingle(node: DirectiveNode): void {
+  const attrs = node.attributes ?? {};
+  const open = 'open' in attrs;
   Object.assign(node, {
     type: 'mdxJsxFlowElement',
     name: 'Accordions',
-    attributes: [],
+    attributes: open
+      ? [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'defaultValue',
+            value: jsxExpression(
+              estreeStringArray([String(extractDirectiveLabel(node))]),
+            ),
+          } as JsxAttribute,
+        ]
+      : [],
     children: [toAccordion(node)],
   });
 }

package/src/lib/mdx/banner.ts

@@ -24,7 +24,6 @@ export function remarkBanner() {
         ],
         children: directive.children,
       });
-      return false;
     });
   };
 }

package/src/lib/mdx/callouts.ts

@@ -0,0 +1,153 @@
+import { visit, CONTINUE } from 'unist-util-visit';
+import {
+  contentChildren,
+  toJsxAttributes,
+  type DirectiveNode,
+  type MdastNode,
+} from './directive-utils.ts';
+
+const CALLOUT_TYPES: Record<string, string> = {
+  note: 'note',
+  tip: 'tip',
+  tips: 'tip',
+  hint: 'tip',
+  info: 'info',
+  important: 'important',
+  warn: 'warning',
+  warning: 'warning',
+  caution: 'caution',
+  attention: 'attention',
+  danger: 'danger',
+  error: 'error',
+  success: 'success',
+  idea: 'idea',
+  question: 'question',
+  help: 'question',
+  faq: 'question',
+  failure: 'failure',
+  fail: 'failure',
+  missing: 'failure',
+  bug: 'bug',
+  abstract: 'abstract',
+  summary: 'abstract',
+  tldr: 'abstract',
+  example: 'example',
+  quote: 'quote',
+  cite: 'quote',
+};
+
+const ALERT_RE = /^\[!([^\]\s]+)\][ \t]*/;
+
+function calloutKind(name: string | undefined): string | undefined {
+  return name ? CALLOUT_TYPES[name.toLowerCase()] : undefined;
+}
+
+function calloutChildren(
+  type: string,
+  titleNodes: MdastNode[],
+  bodyNodes: MdastNode[],
+): MdastNode[] {
+  const children: MdastNode[] = [];
+  const title =
+    titleNodes.length
+      ? titleNodes
+      : [
+          {
+            type: 'text',
+            value: type[0].toUpperCase() + type.slice(1),
+          } as MdastNode,
+        ];
+  children.push({
+    type: 'mdxJsxFlowElement',
+    name: 'CalloutTitle',
+    attributes: [],
+    children: title,
+  } as MdastNode);
+  if (bodyNodes.length) {
+    children.push({
+      type: 'mdxJsxFlowElement',
+      name: 'CalloutDescription',
+      attributes: [],
+      children: bodyNodes,
+    } as MdastNode);
+  }
+  return children;
+}
+
+function directiveLabelNodes(node: DirectiveNode): MdastNode[] {
+  for (const child of node.children ?? []) {
+    if (child.type === 'paragraph' && child.data?.directiveLabel) {
+      return (child.children ?? []) as MdastNode[];
+    }
+  }
+  return [];
+}
+
+function convertAlert(container: MdastNode): boolean {
+  const first = container.children?.[0];
+  if (first?.type !== 'paragraph') return false;
+  const text = first.children?.[0];
+  if (text?.type !== 'text' || typeof text.value !== 'string') return false;
+  const match = ALERT_RE.exec(text.value);
+  if (!match) return false;
+  const type = calloutKind(match[1]);
+  if (!type) return false;
+
+  text.value = text.value.slice(match[0].length);
+  const inline = first.children ?? [];
+  if (!text.value) {
+    inline.shift();
+    if (inline[0]?.type === 'break') inline.shift();
+  }
+
+  const body: MdastNode[] = [
+    ...(inline.length
+      ? [{ type: 'paragraph', children: [...inline] } as MdastNode]
+      : []),
+    ...((container.children ?? []).slice(1) as MdastNode[]),
+  ];
+  const callout = {
+    type: 'mdxJsxFlowElement',
+    name: 'CalloutContainer',
+    attributes: [
+      { type: 'mdxJsxAttribute', name: 'type', value: type },
+    ],
+    children: calloutChildren(type, [], body),
+  };
+  Object.assign(
+    container.type === 'listItem' ? first : container,
+    callout,
+  );
+  return true;
+}
+
+export function remarkCallouts() {
+  return (tree: MdastNode) => {
+    visit(
+      tree as never,
+      ['containerDirective', 'blockquote', 'listItem'],
+      (node) => {
+        const item = node as DirectiveNode;
+        if (item.type === 'containerDirective') {
+          const type = calloutKind(item.name);
+          if (!type) return CONTINUE;
+          Object.assign(item, {
+            type: 'mdxJsxFlowElement',
+            name: 'CalloutContainer',
+            attributes: [
+              { type: 'mdxJsxAttribute', name: 'type', value: type },
+              ...toJsxAttributes(item),
+            ],
+            children: calloutChildren(
+              type,
+              directiveLabelNodes(item),
+              contentChildren(item),
+            ),
+          });
+        } else {
+          convertAlert(item);
+        }
+      },
+    );
+  };
+}

package/src/lib/mdx/directive-fallback.ts

@@ -0,0 +1,87 @@
+import { nameToEmoji } from 'gemoji';
+import { visit } from 'unist-util-visit';
+import {
+  DIRECTIVE_TYPES,
+  type DirectiveNode,
+  type MdastNode,
+} from './directive-utils.ts';
+
+type Pos = { start?: { offset?: number }; end?: { offset?: number } };
+type File = { value?: unknown };
+
+function sliceSource(node: MdastNode, file?: File): string | undefined {
+  const source = typeof file?.value === 'string' ? file.value : '';
+  const pos = node.position as Pos | undefined;
+  const start = pos?.start?.offset;
+  const end = pos?.end?.offset;
+  if (typeof start !== 'number' || typeof end !== 'number' || !source)
+    return undefined;
+  return source.slice(start, end);
+}
+
+function labelText(nodes: MdastNode[] | undefined): string {
+  return (nodes ?? [])
+    .map((child) =>
+      typeof (child as { value?: unknown }).value === 'string'
+        ? ((child as { value?: unknown }).value as string)
+        : '',
+    )
+    .join('');
+}
+
+function literalMarker(node: DirectiveNode): string {
+  const prefix =
+    node.type === 'containerDirective'
+      ? ':::'
+      : node.type === 'leafDirective'
+        ? '::'
+        : ':';
+  const label = labelText(node.children);
+  const attrs = Object.entries(node.attributes ?? {})
+    .map(([key, value]) =>
+      value == null || value === true || value === ''
+        ? key
+        : `${key}="${String(value)}"`,
+    )
+    .join(' ');
+  return `${prefix}${node.name ?? ''}${label ? `[${label}]` : ''}${attrs ? `{${attrs}}` : ''}`;
+}
+
+function toText(node: MdastNode, value: string): void {
+  const rest = node as unknown as Record<string, unknown>;
+  delete rest.name;
+  delete rest.attributes;
+  delete rest.children;
+  Object.assign(node, { type: 'text', value });
+}
+
+export function remarkDirectiveFallback() {
+  return (tree: MdastNode, file?: File) => {
+    visit(tree as never, DIRECTIVE_TYPES, (node) => {
+      const directive = node as DirectiveNode;
+      const name = directive.name ?? '';
+      if (directive.type === 'textDirective') {
+        const emoji = nameToEmoji[name];
+        if (emoji) {
+          toText(node, emoji);
+          return;
+        }
+        toText(node, sliceSource(node, file) ?? literalMarker(directive));
+        return;
+      }
+      if (directive.type === 'leafDirective') {
+        toText(node, sliceSource(node, file) ?? literalMarker(directive));
+        return;
+      }
+      const raw = sliceSource(node, file);
+      if (raw !== undefined) {
+        Object.assign(node, {
+          type: 'paragraph',
+          name: undefined,
+          attributes: undefined,
+          children: [{ type: 'text', value: raw }],
+        });
+      }
+    });
+  };
+}

package/src/lib/mdx/directive-utils.ts

@@ -24,7 +24,7 @@ export function walkContainers(
   );
 }
 
-const DIRECTIVE_TYPES = [
+export const DIRECTIVE_TYPES = [
   'containerDirective',
   'leafDirective',
   'textDirective',

package/src/lib/mdx/directives.ts

@@ -3,15 +3,15 @@ import {
   extractDirectiveLabel,
   extractLeafLabel,
   jsxAttr,
-  jsxExpression,
   toJsxAttributes,
   walkDirectives,
+  DIRECTIVE_TYPES,
   type DirectiveNode,
   type MdastNode,
 } from './directive-utils.ts';
-import { gradientImage } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
 import { createRequire } from 'node:module';
 import { join, relative } from 'node:path';
+import { visit } from 'unist-util-visit';
 
 const require = createRequire(join(process.cwd(), '_'));
 
@@ -22,6 +22,11 @@ function resolvePkgPath(spec: string) {
 
 export function remarkDirectives() {
   return (tree: MdastNode, file?: { value?: unknown }) => {
+    pairGradients(tree);
+    visit(tree as never, 'code', (node: MdastNode) => {
+      if (node.lang === 'math')
+        Object.assign(node, mathNode(String(node.value ?? ''), true));
+    });
     walkDirectives(tree, (node) => {
       const { type, name } = node;
       if (
@@ -38,35 +43,14 @@ export function remarkDirectives() {
         Object.assign(node, mathNode(tex, block));
         return false;
       }
-      if (type === 'textDirective' && name === 'gradient') {
+      if (type === 'leafDirective' && name === 'video') {
         Object.assign(node, {
-          type: 'mdxJsxTextElement',
-          name: 'span',
-          attributes: [
-            styleAttr(gradientStyle(node)),
-            { type: 'mdxJsxAttribute', name: 'data-md', value: 'gradient' },
-          ],
-        });
-        return;
-      }
-      if (
-        name === 'glow' &&
-        (type === 'textDirective' ||
-          type === 'leafDirective' ||
-          type === 'containerDirective')
-      ) {
-        Object.assign(node, {
-          type:
-            type === 'textDirective'
-              ? 'mdxJsxTextElement'
-              : 'mdxJsxFlowElement',
-          name: 'span',
-          attributes: [
-            styleAttr(glowStyle(node)),
-            { type: 'mdxJsxAttribute', name: 'data-md', value: 'glow' },
-          ],
+          type: 'mdxJsxFlowElement',
+          name: 'Video',
+          attributes: toJsxAttributes(node),
+          children: [],
         });
-        return type === 'containerDirective' ? undefined : false;
+        return false;
       }
       if (type === 'textDirective' && name === 'icon') {
         Object.assign(node, {
@@ -95,7 +79,6 @@ export function remarkDirectives() {
           children:
             type === 'containerDirective' ? contentChildren(node) : [],
         });
-        return false;
       }
       if (type === 'containerDirective' && name === 'cards') {
         Object.assign(node, {
@@ -118,22 +101,6 @@ export function remarkDirectives() {
         });
         return false;
       }
-      if (type === 'leafDirective' && name === 'recipe') {
-        Object.assign(node, {
-          type: 'mdxJsxFlowElement',
-          name: 'Recipe',
-          attributes: [
-            {
-              type: 'mdxJsxAttribute',
-              name: 'id',
-              value: extractLeafLabel(node).trim(),
-            },
-            ...toJsxAttributes(node),
-          ],
-          children: [],
-        });
-        return false;
-      }
       return undefined;
     });
   };
@@ -182,80 +149,54 @@ function containerBody(
     .trim();
 }
 
-function estreeObject(entries: [string, string][]): unknown {
-  return {
-    type: 'ObjectExpression',
-    properties: entries.map(([key, value]) => ({
-      type: 'Property',
-      key: { type: 'Literal', value: key },
-      value: { type: 'Literal', value, raw: JSON.stringify(value) },
-      kind: 'init',
-      computed: false,
-      shorthand: false,
-    })),
-  };
-}
-
-function styleAttr(entries: [string, string][]) {
-  return {
-    type: 'mdxJsxAttribute' as const,
-    name: 'style',
-    value: jsxExpression(estreeObject(entries)),
-  };
-}
-
-function attr(node: DirectiveNode, name: string) {
-  const value = node.attributes?.[name];
-  return typeof value === 'string' && value ? value : undefined;
+function stripClose(node: MdastNode): boolean {
+  if (node.type !== 'paragraph') return false;
+  const children = (node.children ?? []) as { type?: string; value?: string }[];
+  const last = children.at(-1);
+  if (last?.type !== 'text' || typeof last.value !== 'string') return false;
+  if (!/\s*::$/.test(last.value)) return false;
+  last.value = last.value.replace(/\s*::$/, '');
+  if (!last.value) children.pop();
+  return true;
 }
 
-function hasFlag(node: DirectiveNode, name: string) {
-  return node.attributes?.[name] !== undefined;
-}
-
-function gradientStyle(node: DirectiveNode): [string, string][] {
-  return [
-    ['backgroundImage', gradientImage(attrObject(node))],
-    ['WebkitBackgroundClip', 'text'],
-    ['backgroundClip', 'text'],
-    ['WebkitTextFillColor', 'transparent'],
-    ['color', 'transparent'],
-  ];
-}
-
-function glowStyle(node: DirectiveNode): [string, string][] {
-  const from = attr(node, 'from') ?? '#fa18cf';
-  const to = attr(node, 'to') ?? '#ff7967';
-  const gradient = gradientImage(attrObject(node));
-  const boxBg = `radial-gradient(color-mix(in srgb, ${from} 18%, transparent), color-mix(in srgb, ${to} 8%, transparent))`;
-  const style: [string, string][] = [
-    ['display', 'block'],
-    ['borderRadius', '20px'],
-    ['border', '1px solid transparent'],
-    ['padding', '0.625rem 1rem'],
-    ['marginBottom', '1.5rem'],
-    ['textAlign', 'center'],
-    ['backgroundImage', hasFlag(node, 'gradient') ? `${gradient}, ${boxBg}` : boxBg],
-    ['boxShadow', `0 10px 20px color-mix(in srgb, ${from} 25%, transparent)`],
-  ];
-  if (hasFlag(node, 'gradient')) {
-    style.push(
-      ['WebkitBackgroundClip', 'text, border-box'],
-      ['backgroundClip', 'text, border-box'],
-      ['WebkitTextFillColor', 'transparent'],
-      ['color', 'transparent'],
-    );
+function pairGradients(parent: MdastNode): void {
+  const children = parent.children;
+  if (!children) return;
+  for (let i = 0; i < children.length; i++) {
+    const child = children[i];
+    if (
+      child.type === 'leafDirective' &&
+      (child as DirectiveNode).name === 'gradient'
+    ) {
+      const body: MdastNode[] = [];
+      let closed = false;
+      for (let j = i + 1; j < children.length; j++) {
+        const sib = children[j];
+        if (DIRECTIVE_TYPES.includes(sib.type)) break;
+        body.push(sib);
+        if (stripClose(sib)) {
+          closed = true;
+          break;
+        }
+      }
+      if (closed) {
+        while (
+          body.length &&
+          body.at(-1)!.type === 'paragraph' &&
+          !(body.at(-1)!.children as unknown[])?.length
+        )
+          body.pop();
+        Object.assign(child, {
+          type: 'mdxJsxFlowElement',
+          name: 'Gradient',
+          attributes: toJsxAttributes(child as DirectiveNode),
+          children: body,
+        });
+        children.splice(i + 1, body.length);
+      }
+    }
+    pairGradients(child);
   }
-  if (hasFlag(node, 'fade')) style.push(['borderImage', `${gradient} 1`]);
-  return style;
-}
-
-function attrObject(node: DirectiveNode) {
-  return {
-    from: attr(node, 'from'),
-    to: attr(node, 'to'),
-    dir: attr(node, 'dir'),
-    image: attr(node, 'image'),
-  };
 }
 

package/src/lib/mdx/entries/block.ts

@@ -0,0 +1,6 @@
+import { createEntryRemark } from './factory.ts';
+
+export const remarkBlockEntry = createEntryRemark({
+  directive: 'block',
+  component: 'BlockEntry',
+});

package/src/lib/mdx/entries/entity.ts

@@ -0,0 +1,6 @@
+import { createEntryRemark } from './factory.ts';
+
+export const remarkEntityEntry = createEntryRemark({
+  directive: 'entity',
+  component: 'EntityEntry',
+});