@terrafirmagreg-team/kit 0.0.0-stage → 0.1.0

package/src/lib/markdown/dom.ts

@@ -0,0 +1,90 @@
+'use client';
+import TurndownService from 'turndown';
+import { gfm } from 'turndown-plugin-gfm';
+
+const service = new TurndownService({
+  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),
+);
+
+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;
+}
+
+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})`;
+  },
+});
+
+export function domToMarkdown(root: Element | null | undefined): string {
+  if (!root) return '';
+  return service.turndown(root as HTMLElement);
+}
+
+export function pageMarkdown(
+  root: Element | null | undefined,
+  title: string,
+): Promise<string> {
+  return Promise.resolve(`# ${title}\n\n${domToMarkdown(root)}`);
+}
+
+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);
+}

package/src/lib/markdown/index.ts

@@ -0,0 +1,13 @@
+export * from './dom';
+export * from './providers';
+
+export async function renderSectionMarkdown(page: {
+  data: {
+    title?: string;
+    getText: (type: 'processed' | 'raw') => Promise<string>;
+  };
+}) {
+  return `# ${page.data.title}
+
+${await page.data.getText('processed')}`;
+}

package/src/lib/markdown/providers.ts

@@ -0,0 +1,25 @@
+import type { Lang } from '@terrafirmagreg-team/translate/types/locale';
+
+export interface MarkdownProviderCtx {
+
+  slugs: string[];
+  lang: Lang;
+}
+
+export type MarkdownProvider = (
+  req: Request,
+  ctx: MarkdownProviderCtx,
+) => Promise<Response | undefined>;
+
+const providers = new Map<string, MarkdownProvider>();
+
+export function registerMarkdownProvider(
+  section: string,
+  provider: MarkdownProvider,
+): void {
+  providers.set(section, provider);
+}
+
+export function markdownProvider(section: string): MarkdownProvider | undefined {
+  return providers.get(section);
+}

package/src/lib/mdx/accordions.ts

@@ -0,0 +1,93 @@
+import {
+  contentChildren,
+  extractDirectiveLabel,
+  extractLeafLabel,
+  jsxAttr,
+  walkContainers,
+  type DirectiveNode,
+  type JsxAttribute,
+  type JsxElement,
+  type MdastNode,
+} from './directive-utils.ts';
+
+export function remarkAccordions() {
+  return (tree: MdastNode) => {
+    walkContainers(tree, (directive) => {
+      if (directive.name === 'accordion' || directive.name === 'details') {
+        wrapSingle(directive);
+        return false;
+      }
+      if (directive.name === 'accordions') {
+        toAccordions(directive);
+        return false;
+      }
+    });
+  };
+}
+
+function toAccordion(node: DirectiveNode): JsxElement {
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'Accordion',
+    attributes: [jsxAttr('title', extractDirectiveLabel(node))],
+    children: contentChildren(node),
+  };
+}
+
+function wrapSingle(node: DirectiveNode): void {
+  Object.assign(node, {
+    type: 'mdxJsxFlowElement',
+    name: 'Accordions',
+    attributes: [],
+    children: [toAccordion(node)],
+  });
+}
+
+function accordionsAttributes(node: DirectiveNode): JsxAttribute[] {
+  const attrs = node.attributes ?? {};
+  const out: JsxAttribute[] = [];
+  const isMultiple =
+    attrs.multiple === true ||
+    attrs.multiple === '' ||
+    attrs.type === 'multiple';
+
+  if (isMultiple) out.push(jsxAttr('multiple', true));
+
+  for (const [name, value] of Object.entries(attrs)) {
+    if (name === 'type' || name === 'multiple') continue;
+    out.push({ type: 'mdxJsxAttribute', name, value: value ?? true });
+  }
+
+  return out;
+}
+
+function toAccordions(node: DirectiveNode): void {
+  const items: JsxElement[] = [];
+  let current: JsxElement | undefined;
+
+  for (const item of node.children ?? []) {
+    if (
+      item.type === 'leafDirective' &&
+      (item as { name?: string }).name === 'accordion'
+    ) {
+      current = {
+        type: 'mdxJsxFlowElement',
+        name: 'Accordion',
+        attributes: [jsxAttr('title', extractLeafLabel(item))],
+        children: [],
+      };
+      items.push(current);
+      continue;
+    }
+
+    current?.children.push(item);
+  }
+
+  Object.assign(node, {
+    type: 'mdxJsxFlowElement',
+    name: 'Accordions',
+    attributes: accordionsAttributes(node),
+    children: items,
+  });
+}
+

package/src/lib/mdx/banner.ts

@@ -0,0 +1,52 @@
+import {
+  estreeBoolean,
+  estreeStringArray,
+  jsxExpression,
+  walkContainers,
+  type DirectiveNode,
+  type MdastNode,
+} from './directive-utils.ts';
+
+
+export function remarkBanner() {
+  return (tree: MdastNode) => {
+    walkContainers(tree, (directive) => {
+      if (directive.name !== 'banner') return;
+      Object.assign(directive, {
+        type: 'mdxJsxFlowElement',
+        name: 'Banner',
+        attributes: [
+          {
+            type: 'mdxJsxAttribute',
+            name: 'changeLayout',
+            value: jsxExpression(estreeBoolean(false)),
+          },
+          ...toAttributes(directive),
+        ],
+        children: directive.children,
+      });
+      return false;
+    });
+  };
+}
+
+function toAttributes(directive: DirectiveNode) {
+  return Object.entries(directive.attributes ?? {})
+    .filter(([name]) => name !== 'id')
+    .map(([name, value]) => {
+      if (name === 'rainbowColors' && typeof value === 'string') {
+        const colors = value
+          .split(',')
+          .map((color) => color.trim())
+          .filter(Boolean);
+        return {
+          type: 'mdxJsxAttribute' as const,
+          name,
+          value: jsxExpression(estreeStringArray(colors)),
+        };
+      }
+      return { type: 'mdxJsxAttribute' as const, name, value: value ?? true };
+    });
+}
+
+

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

@@ -0,0 +1,125 @@
+
+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

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,44 @@
+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 ?? [],
+      });
+    });
+  };
+}