Astro Adapter

import { loadContent } from '@refrakt-md/content';
import { assembleThemeConfig, createTransform } from '@refrakt-md/transform';
import { loadRunePackage, mergePackages, runes as coreRunes } from '@refrakt-md/runes';
import type { RefraktConfig } from '@refrakt-md/types';
import type { Schema } from '@markdoc/markdoc';
import { readFileSync } from 'node:fs';
import * as path from 'node:path';

const config: RefraktConfig = JSON.parse(
  readFileSync(path.resolve('refrakt.config.json'), 'utf-8')
);
const contentDir = path.resolve(config.contentDir);
const routeRules = config.routeRules ?? [{ pattern: '**', layout: 'default' }];

let _transform: ((tree: any) => any) | null = null;
let _hl: { (tree: any): any; css: string } | null = null;
let _theme: { manifest: any; layouts: any } | null = null;
let _communityTags: Record<string, Schema> | undefined;
let _packages: any[] | undefined;

async function init() {
  if (_transform) return;

  const [themeModule, layoutsModule] = await Promise.all([
    import(config.theme + '/transform'),
    import(config.theme + '/layouts'),
  ]);

  // Manifest is a JSON file — resolve its path and read directly
  const { createRequire: cr } = await import('node:module');
  const manifestPath = cr(import.meta.url).resolve(config.theme + '/manifest');
  const manifest = JSON.parse(readFileSync(manifestPath, 'utf-8'));

  _theme = {
    manifest: { ...manifest, routeRules },
    layouts: layoutsModule.layouts,
  };

  const themeConfig = themeModule.themeConfig ?? themeModule.luminaConfig ?? themeModule.default;

  let transformConfig = themeConfig;

  const packageNames = config.packages ?? [];
  if (packageNames.length > 0) {
    const loaded = await Promise.all(
      packageNames.map((name: string) => loadRunePackage(name))
    );
    const coreRuneNames = new Set(Object.keys(coreRunes));
    const merged = mergePackages(loaded, coreRuneNames, config.runes?.prefer);

    _communityTags = Object.keys(merged.tags).length > 0 ? merged.tags : undefined;
    _packages = loaded.map((l: any) => l.pkg);

    const { config: assembledConfig } = assembleThemeConfig({
      coreConfig: themeConfig,
      packageRunes: merged.themeRunes,
      packageIcons: merged.themeIcons,
      packageBackgrounds: merged.themeBackgrounds,
      extensions: merged.extensions as any,
      provenance: merged.provenance,
    });

    transformConfig = assembledConfig;
  }

  _transform = createTransform(transformConfig);
}

export async function getTransform() { await init(); return _transform!; }
export async function getTheme() { await init(); return _theme!; }

export async function getHighlightTransform() {
  if (_hl) return _hl;
  const { createHighlightTransform } = await import('@refrakt-md/highlight');
  _hl = await createHighlightTransform((config as any).highlight);
  return _hl;
}

export async function getSite() {
  await init();
  return loadContent(contentDir, '/', {}, _communityTags, _packages);
}

---
import { getTransform, getSite, getTheme, getHighlightTransform } from '../setup';
import { renderPage, buildSeoHead } from '@refrakt-md/astro';
import type { RendererNode } from '@refrakt-md/types';

export async function getStaticPaths() {
  const [transform, site, hl] = await Promise.all([getTransform(), getSite(), getHighlightTransform()]);

  return site.pages
    .filter((p) => !p.route.draft)
    .map((page) => {
      const renderable = hl(transform(page.renderable)) as RendererNode;
      const regions = {};
      for (const [name, region] of page.layout.regions.entries()) {
        regions[name] = {
          name: region.name,
          mode: region.mode,
          content: region.content.map((c) => hl(transform(c)) as RendererNode),
        };
      }

      const pages = site.pages
        .filter((p) => !p.route.draft)
        .map((p) => ({
          url: p.route.url,
          title: p.frontmatter.title ?? '',
          draft: false,
        }));

      const slug = page.route.url === '/' ? undefined : page.route.url.slice(1);

      return {
        params: { slug },
        props: {
          page: {
            renderable,
            regions,
            title: page.frontmatter.title ?? '',
            url: page.route.url,
            pages,
            frontmatter: page.frontmatter,
            headings: page.headings,
          },
          seo: page.seo,
          highlightCss: hl.css,
        },
      };
    });
}

const { page, seo, highlightCss } = Astro.props;
const theme = await getTheme();
const html = renderPage({ theme, page });
const head = buildSeoHead({ title: page.title, frontmatter: page.frontmatter, seo });
const needsBehaviors = html.includes('data-layout-behaviors') || html.includes('data-rune=');
const contextData = JSON.stringify({ pages: page.pages, currentUrl: page.url });
---

<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  {head.title && <title>{head.title}</title>}
  <Fragment set:html={head.metaTags} />
  <Fragment set:html={head.jsonLd} />
  {highlightCss && <style set:html={highlightCss} />}
</head>
<body>
  <Fragment set:html={html} />
  <script type="application/json" id="rf-context" set:html={contextData} />
  {needsBehaviors && (
    <script>
      import { registerElements, RfContext, initRuneBehaviors, initLayoutBehaviors } from '@refrakt-md/behaviors';

      function init() {
        const el = document.getElementById('rf-context');
        if (el) {
          try {
            const ctx = JSON.parse(el.textContent || '{}');
            RfContext.pages = ctx.pages;
            RfContext.currentUrl = ctx.currentUrl;
          } catch {}
        }
        registerElements();
        initRuneBehaviors();
        initLayoutBehaviors();
      }

      init();
      document.addEventListener('astro:page-load', () => init());
    </script>
  )}
</body>
</html>

---
import BaseLayout from '@refrakt-md/astro/BaseLayout.astro';
import { getSite, getTransform, getTheme } from '../setup';

export async function getStaticPaths() {
  // ... same content loading as above
}

const { page, seo } = Astro.props;
const theme = await getTheme();
---

<BaseLayout {theme} {page} {seo} />

---
import RfRenderer from '@refrakt-md/astro/RfRenderer.astro';
import Table from '@refrakt-md/astro/elements/Table.astro';
import Pre from '@refrakt-md/astro/elements/Pre.astro';
import MyRecipe from '../components/MyRecipe.astro';

const components = { recipe: MyRecipe };
const elements = { table: Table, pre: Pre };

// ... getStaticPaths() as before
const { page } = Astro.props;
---

<RfRenderer node={page.renderable} components={components} elements={elements} />