@terrafirmagreg-team/kit 0.1.0 → 1.2.0

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

@@ -1,125 +0,0 @@
-
-import type {
-  DirectiveNode,
-  JsxAttribute,
-  JsxAttributeValue,
-  MdastNode,
-} from '@terrafirmagreg-team/kit/types/mdx';
-
-export type {
-  DirectiveNode,
-  JsxAttribute,
-  JsxAttributeValue,
-  JsxElement,
-  MdastNode,
-} from '@terrafirmagreg-team/kit/types/mdx';
-
-export function walkContainers(
-  tree: MdastNode,
-  fn: (node: DirectiveNode) => boolean | void,
-): void {
-  for (const child of tree.children ?? []) {
-    if (child.type !== 'containerDirective') {
-      walkContainers(child, fn);
-      continue;
-    }
-    const directive = child as DirectiveNode;
-    if (fn(directive) !== false) walkContainers(directive, fn);
-  }
-}
-
-const DIRECTIVE_TYPES = new Set([
-  'containerDirective',
-  'leafDirective',
-  'textDirective',
-]);
-
-export function walkDirectives(
-  tree: MdastNode,
-  fn: (node: DirectiveNode) => boolean | void,
-): void {
-  for (const child of tree.children ?? []) {
-    if (DIRECTIVE_TYPES.has(child.type)) {
-      if (fn(child as DirectiveNode) !== false) walkDirectives(child, fn);
-    } else {
-      walkDirectives(child, fn);
-    }
-  }
-}
-
-export function toJsxAttributes(node: DirectiveNode): JsxAttribute[] {
-  return Object.entries(node.attributes ?? {}).map(([name, value]) => ({
-    type: 'mdxJsxAttribute',
-    name,
-    value: value ?? true,
-  }));
-}
-
-function labelText(node: MdastNode): string {
-  const t = node.type;
-  const v = (node as { value?: unknown }).value;
-  if (typeof v === 'string') return v;
-  if (t === 'textDirective' || t === 'leafDirective') {
-    const d = node as DirectiveNode;
-    const inner = (d.children ?? []).map(labelText).join('');
-    const attrs = Object.entries(d.attributes ?? {})
-      .map(([k, v]) => (v == null ? k : v === true ? k : `${k}="${v}"`))
-      .join(' ');
-    const prefix = t === 'leafDirective' ? '::' : ':';
-    return `${prefix}${d.name ?? ''}${inner ? `[${inner}]` : ''}${attrs ? `{${attrs}}` : ''}`;
-  }
-  return (node.children ?? []).map(labelText).join('');
-}
-
-export function extractDirectiveLabel(node: DirectiveNode): string {
-  for (const child of node.children ?? []) {
-    if (child.type === 'paragraph' && child.data?.directiveLabel) {
-      return (child.children ?? []).map(labelText).join('');
-    }
-  }
-  return '';
-}
-
-export function extractLeafLabel(node: MdastNode): string {
-  return (node.children ?? []).map(labelText).join('');
-}
-
-export function contentChildren(node: DirectiveNode): MdastNode[] {
-  return (node.children ?? []).filter(
-    (child) =>
-      !(child.type === 'paragraph' && child.data?.directiveLabel),
-  );
-}
-
-export function jsxAttr(name: string, value: string | boolean): JsxAttribute {
-  return { type: 'mdxJsxAttribute', name, value };
-}
-
-export function jsxExpression(expression: unknown): JsxAttributeValue {
-  return {
-    type: 'mdxJsxAttributeValueExpression',
-    value: '',
-    data: {
-      estree: {
-        type: 'Program',
-        body: [{ type: 'ExpressionStatement', expression }],
-        sourceType: 'script',
-      },
-    },
-  };
-}
-
-export function estreeString(value: string): unknown {
-  return { type: 'Literal', value, raw: JSON.stringify(value) };
-}
-
-export function estreeStringArray(labels: string[]): unknown {
-  return {
-    type: 'ArrayExpression',
-    elements: labels.map(estreeString),
-  };
-}
-
-export function estreeBoolean(value: boolean): unknown {
-  return { type: 'Literal', value, raw: String(value) };
-}

package/src/lib/mdx/directives.ts

@@ -1,141 +0,0 @@
-import {
-  extractLeafLabel,
-  jsxExpression,
-  toJsxAttributes,
-  walkDirectives,
-  type DirectiveNode,
-  type MdastNode,
-} from './directive-utils.ts';
-import { gradientImage } from '@terrafirmagreg-team/ui/lib/mdx/gradient';
-
-export function remarkDirectives() {
-  return (tree: MdastNode) => {
-    walkDirectives(tree, (node) => {
-      const { type, name } = node;
-      if (type === 'textDirective' && name === 'gradient') {
-        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' },
-          ],
-        });
-        return type === 'containerDirective' ? undefined : 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;
-    });
-  };
-}
-
-function estreeObject(entries: [string, string][]): unknown {
-  return {
-    type: 'ObjectExpression',
-    properties: entries.map(([key, value]) => ({
-      type: 'Property',
-      key: { type: 'Identifier', name: 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 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'],
-    );
-  }
-  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/game-export.ts

@@ -1,44 +0,0 @@
-import {
-  estreeString,
-  jsxExpression,
-  walkContainers,
-  type MdastNode,
-} from './directive-utils.ts';
-
-export function remarkGameExport() {
-  return (tree: MdastNode) => {
-    walkContainers(tree, (directive) => {
-      if (
-        directive.name !== 'item' &&
-        directive.name !== 'multiblock' &&
-        directive.name !== 'image'
-      )
-        return;
-
-      const attrs = Object.entries(directive.attributes ?? {}).map(
-        ([name, value]) => ({
-          type: 'mdxJsxAttribute' as const,
-          name,
-          value:
-            typeof value === 'string'
-              ? value
-              : jsxExpression(estreeString(String(value ?? ''))),
-        }),
-      );
-
-      const component =
-        directive.name === 'item'
-          ? 'ItemIcon'
-          : directive.name === 'multiblock'
-            ? 'Multiblock'
-            : 'DocsImage';
-
-      Object.assign(directive, {
-        type: 'mdxJsxFlowElement',
-        name: component,
-        attributes: attrs,
-        children: directive.children ?? [],
-      });
-    });
-  };
-}

package/src/lib/mdx/html-style.ts

@@ -1,135 +0,0 @@
-import type { MdastNode } from './directive-utils.ts';
-
-type NodeWithValue = MdastNode & { value: string };
-type NodeWithChildren = MdastNode & { children: MdastNode[] };
-
-function objectToCss(body: string): string | undefined {
-  const entries: string[] = [];
-  const re = /(\w+)\s*:\s*['"]([^'"]*)['"]/g;
-  let m: RegExpExecArray | null;
-  while ((m = re.exec(body)) !== null) entries.push(`${m[1]}: ${m[2]}`);
-  return entries.length ? entries.join('; ') : undefined;
-}
-
-const JSX_ATTR = /(\w[\w-]*)=\{\{([\s\S]*?)\}\}/g;
-
-function rewriteAttrs(html: string): string {
-  return html.replace(JSX_ATTR, (all, attr: string, body: string) => {
-    if (attr !== 'style') return all;
-    const css = objectToCss(body);
-    return css ? `style="${css}"` : all;
-  });
-}
-
-const OPEN_TAG = /<([a-zA-Z][\w-]*)((?:[^>"']|"[^"]*"|'[^']*'|\{\{[\s\S]*?\}\})*?)>/;
-
-function stylesFromTag(tag: string): string | undefined {
-  const m = /style=\{\{([\s\S]*?)\}\}/.exec(tag);
-  return m ? objectToCss(m[1]!) : undefined;
-}
-
-function elementNode(
-  tag: string,
-  hName: string,
-  children: MdastNode[],
-): MdastNode {
-  const style = stylesFromTag(tag);
-  return {
-    type: 'emphasis',
-    children,
-    data: {
-      hName,
-      ...(style ? { hProperties: { style } } : {}),
-    },
-  } as MdastNode;
-}
-
-function textNode(value: string): MdastNode {
-  return { type: 'text', value } as MdastNode;
-}
-
-export function remarkHtmlStyle() {
-  return (tree: MdastNode) => {
-    const visitChildren = (parent: NodeWithChildren) => {
-      const kids = parent.children;
-      for (let i = 0; i < kids.length; i++) {
-        const child = kids[i]!;
-        if (child.type === 'html' && typeof child.value === 'string') {
-          (child as NodeWithValue).value = rewriteAttrs(child.value);
-        } else if (
-          child.type === 'text' &&
-          typeof child.value === 'string' &&
-          child.value.includes('={{')
-        ) {
-          if (fuseJsxStyleTags(kids, i)) i--;
-        } else if (child.children) {
-          visitChildren(child as NodeWithChildren);
-        }
-      }
-    };
-    visitChildren(tree as NodeWithChildren);
-  };
-}
-
-function fuseJsxStyleTags(kids: MdastNode[], i: number): boolean {
-  const text = kids[i] as NodeWithValue;
-  let open: RegExpExecArray | null;
-  const re = new RegExp(OPEN_TAG.source, 'g');
-  do {
-    open = re.exec(text.value);
-  } while (open && !open[2]?.includes('={{'));
-  if (!open) return false;
-
-  const [openTag, tagName] = open;
-  const prefix = text.value.slice(0, open.index);
-  const rest = text.value.slice(open.index + openTag.length);
-
-  const closeSelf = new RegExp(`</${tagName}\\s*>`).exec(rest);
-  if (closeSelf) {
-    const end = closeSelf.index + closeSelf[0].length;
-    kids.splice(
-      i,
-      1,
-      ...compact([
-        prefix ? textNode(prefix) : undefined,
-        elementNode(openTag, tagName, [textNode(rest.slice(0, closeSelf.index))]),
-        rest.slice(end) ? textNode(rest.slice(end)) : undefined,
-      ]),
-    );
-    return true;
-  }
-
-  for (let j = i + 1; j < kids.length; j++) {
-    const sib = kids[j]!;
-    if (
-      sib.type === 'html' &&
-      typeof sib.value === 'string' &&
-      new RegExp(`^</${tagName}\\s*>$`).test(sib.value.trim())
-    ) {
-      const inner = rest ? [textNode(rest)] : [];
-      kids.splice(
-        i,
-        j - i + 1,
-        ...compact([
-          prefix ? textNode(prefix) : undefined,
-          elementNode(openTag, tagName, [...inner, ...kids.slice(i + 1, j)]),
-        ]),
-      );
-      return true;
-    }
-  }
-
-  kids.splice(
-    i,
-    1,
-    ...compact([
-      prefix ? textNode(prefix) : undefined,
-      elementNode(openTag, tagName, rest ? [textNode(rest)] : []),
-    ]),
-  );
-  return true;
-}
-
-function compact(nodes: (MdastNode | undefined)[]): MdastNode[] {
-  return nodes.filter((n): n is MdastNode => n !== undefined);
-}

package/src/lib/mdx/preview.ts

@@ -1,252 +0,0 @@
-import { createRequire } from 'node:module';
-import { remarkDirectives } from './directives.ts';
-import {
-  remarkCodeTab,
-  remarkHeading,
-  remarkImage,
-  remarkMdxFiles,
-  remarkMdxMermaid,
-  remarkNpm,
-  remarkSteps,
-} from 'fumadocs-core/mdx-plugins';
-import remarkDirective from 'remark-directive';
-import remarkGfm from 'remark-gfm';
-import remarkMath from 'remark-math';
-import remarkParse from 'remark-parse';
-import { unified, type Plugin } from 'unified';
-import {
-  contentChildren,
-  extractDirectiveLabel,
-  jsxAttr,
-  type DirectiveNode,
-  type JsxElement,
-  type MdastNode,
-} from './directive-utils.ts';
-
-const require = createRequire(import.meta.url);
-
-type VFileLike = {
-  path?: string;
-  cwd?: string;
-  value?: unknown;
-};
-
-type Positioned = {
-  position?: {
-    start?: { offset?: number };
-    end?: { offset?: number };
-  };
-};
-
-const previewSeq = new WeakMap<object, number>();
-
-function nextPreviewId(file: VFileLike): number {
-  const key = file as object;
-  const n = (previewSeq.get(key) ?? 0) + 1;
-  previewSeq.set(key, n);
-  return n;
-}
-
-function slugify(text: string): string {
-  return (
-    text
-      .toLowerCase()
-      .replace(/[^\p{L}\p{N}]+/gu, '-')
-      .replace(/^-+|-+$/g, '') || 'section'
-  );
-}
-
-function walk(node: MdastNode, visit: (n: MdastNode) => void): void {
-  visit(node);
-  for (const child of node.children ?? []) walk(child, visit);
-}
-
-function markHeadingNoToc(heading: MdastNode): void {
-  const kids = heading.children ?? [];
-  const last = kids[kids.length - 1];
-  if (last?.type === 'text' && typeof last.value === 'string') {
-    if (!last.value.includes('[!toc]')) {
-      last.value = `${last.value.replace(/\s+$/, '')} [!toc]`;
-    }
-    return;
-  }
-  kids.push({ type: 'text', value: ' [!toc]' });
-  heading.children = kids;
-}
-
-function uniquifyHeadingIds(tree: MdastNode): void {
-  const used = new Set<string>();
-  walk(tree, (node) => {
-    if (node.type !== 'heading') return;
-    const props = (node.data?.hProperties ?? {}) as { id?: string };
-    node.data ??= {};
-    node.data.hProperties = props;
-    if (typeof props.id !== 'string' || props.id.length === 0) return;
-
-    let id = props.id;
-    if (!used.has(id)) {
-      used.add(id);
-      return;
-    }
-    let n = 1;
-    while (used.has(`${id}-${n}`)) n += 1;
-    props.id = `${id}-${n}`;
-    used.add(props.id);
-  });
-}
-
-export function remarkPreview() {
-  return async (tree: MdastNode, file: VFileLike) => {
-    previewSeq.set(file as object, 0);
-    await expandPreviews(tree, file);
-    uniquifyHeadingIds(tree);
-  };
-}
-
-async function expandPreviews(parent: MdastNode, file: VFileLike): Promise<void> {
-  const children = parent.children;
-  if (!children) return;
-
-  for (let i = 0; i < children.length; i++) {
-    const child = children[i]!;
-    if (child.type === 'containerDirective' && child.name === 'preview') {
-      const expanded = await expandPreview(child as DirectiveNode, file);
-      children.splice(i, 1, ...expanded);
-      i += expanded.length - 1;
-      continue;
-    }
-    await expandPreviews(child, file);
-  }
-}
-
-function isMdEscapeFence(node: MdastNode): boolean {
-  if (node.type !== 'code' || typeof node.value !== 'string') return false;
-  const lang = typeof node.lang === 'string' ? node.lang.toLowerCase() : '';
-  return lang === 'md' || lang === 'markdown';
-}
-
-function fileText(file: VFileLike): string {
-  if (typeof file.value === 'string') return file.value;
-  if (file.value == null) return '';
-  if (Buffer.isBuffer(file.value)) return file.value.toString('utf8');
-  return String(file.value);
-}
-
-function offsetOf(node: MdastNode, side: 'start' | 'end'): number | undefined {
-  const pos = (node as Positioned).position?.[side]?.offset;
-  return typeof pos === 'number' ? pos : undefined;
-}
-
-function sourceFromChildren(
-  kids: MdastNode[],
-  file: VFileLike,
-): string | undefined {
-  if (kids.length === 0) return undefined;
-
-  if (kids.length === 1 && isMdEscapeFence(kids[0]!)) {
-    return kids[0]!.value as string;
-  }
-
-  const raw = fileText(file);
-  const start = offsetOf(kids[0]!, 'start');
-  const end = offsetOf(kids[kids.length - 1]!, 'end');
-  if (raw && start != null && end != null && end >= start) {
-    return raw.slice(start, end).replace(/\r\n/g, '\n').trimEnd();
-  }
-
-  return undefined;
-}
-
-async function expandPreview(
-  node: DirectiveNode,
-  file: VFileLike,
-): Promise<MdastNode[]> {
-  const kids = contentChildren(node);
-  const source = sourceFromChildren(kids, file);
-  if (source === undefined) return kids;
-
-  const label = extractDirectiveLabel(node);
-  const previewNo = nextPreviewId(file);
-
-  const input: JsxElement = {
-    type: 'mdxJsxFlowElement',
-    name: 'Input',
-    attributes: label ? [jsxAttr('label', label)] : [],
-    children: [
-      {
-        type: 'code',
-        lang: 'md',
-        meta: 'title="example.md" lineNumbers',
-        value: source,
-      },
-    ],
-  };
-
-  const parsed = await processOutputBody(source, file, previewNo);
-
-  const output: JsxElement = {
-    type: 'mdxJsxFlowElement',
-    name: 'Output',
-    attributes: [],
-    children: parsed.children ?? [],
-  };
-
-  const preview: JsxElement = {
-    type: 'mdxJsxFlowElement',
-    name: 'Preview',
-    attributes: [],
-    children: [input as unknown as MdastNode, output as unknown as MdastNode],
-  };
-
-  return [preview as unknown as MdastNode];
-}
-
-async function processOutputBody(
-  source: string,
-  file: VFileLike,
-  previewNo: number,
-): Promise<MdastNode> {
-
-  const { remarkInclude } = require('fumadocs-mdx/config') as {
-    remarkInclude: Plugin;
-  };
-
-  const used = new Map<string, number>();
-
-  const processor = unified()
-    .use(remarkParse)
-    .use(remarkGfm)
-    .use(remarkMath)
-    .use(remarkDirective)
-    .use(remarkDirectives)
-    .use(remarkInclude)
-    .use(remarkImage, { publicDir: 'public', useImport: false })
-    .use(remarkNpm)
-    .use(remarkCodeTab)
-    .use(remarkMdxFiles)
-    .use(remarkMdxMermaid)
-    .use(remarkSteps)
-    .use(remarkHeading, {
-      generateToc: false,
-      customId: false,
-      slug: (_root, _heading, text: string) => {
-        const base = slugify(text);
-        const n = used.get(base) ?? 0;
-        used.set(base, n + 1);
-        const local = n === 0 ? base : `${base}-${n}`;
-        return `preview-${previewNo}-${local}`;
-      },
-    });
-
-  const tree = processor.parse({ value: source, path: file.path });
-  const result = (await processor.run(
-    tree,
-    file as never,
-  )) as unknown as MdastNode;
-
-  walk(result, (node) => {
-    if (node.type === 'heading') markHeadingNoToc(node);
-  });
-
-  return result;
-}