create-refrakt 0.9.1 → 0.9.3

package/template/src/routes/[...slug]/+page.server.ts

@@ -1,98 +1,17 @@
-import { loadContent } from '@refrakt-md/content';
+import { getSite, getTransform, getHighlightTransform } from 'virtual:refrakt/content';
 import { serialize, serializeTree } from '@refrakt-md/svelte';
-import { createHighlightTransform } from '@refrakt-md/highlight';
-import type { HighlightTransform } from '@refrakt-md/highlight';
-import { loadRunePackage, mergePackages, runes as coreRunes } from '@refrakt-md/runes';
-import { assembleThemeConfig, createTransform } from '@refrakt-md/transform';
-import type { Schema } from '@markdoc/markdoc';
 import { error } from '@sveltejs/kit';
-import { readFileSync } from 'node:fs';
-import * as path from 'node:path';
 import type { PageServerLoad } from './$types';
-import type { RefraktConfig } from '@refrakt-md/types';
-
-const config: RefraktConfig = JSON.parse(readFileSync(path.resolve('refrakt.config.json'), 'utf-8'));
-const contentDir = path.resolve(config.contentDir);
-
-let _themeConfig: any = null;
-let _icons: Record<string, Record<string, string>> = {};
-
-async function getThemeModule() {
-	const themeModule = await import(config.theme + '/transform');
-	return themeModule.themeConfig ?? themeModule.luminaConfig ?? themeModule.default;
-}
-
-let _hl: HighlightTransform | null = null;
-
-async function getHighlightTransform(): Promise<HighlightTransform> {
-	const cached = _hl;
-	if (cached) return cached;
-	const hl = await createHighlightTransform(config.highlight);
-	_hl = hl;
-	return hl;
-}
-
-let _communityTags: Record<string, Schema> | undefined;
-let _transform: ((tree: any) => any) | null = null;
-
-async function getTransform(): Promise<(tree: any) => any> {
-	if (_transform) return _transform;
-
-	const themeConfig = await getThemeModule();
-	_icons = {
-		...themeConfig.icons,
-		global: { ...(themeConfig.icons?.global ?? {}), ...(config.icons ?? {}) },
-	};
-
-	const packageNames = config.packages ?? [];
-	if (packageNames.length === 0) {
-		_transform = createTransform(themeConfig);
-		return _transform;
-	}
-
-	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;
-
-	const { config: assembledConfig } = assembleThemeConfig({
-		coreConfig: themeConfig,
-		packageRunes: merged.themeRunes,
-		packageIcons: merged.themeIcons,
-		packageBackgrounds: merged.themeBackgrounds,
-		extensions: merged.extensions as any,
-		provenance: merged.provenance,
-	});
-
-	if (config.tints) {
-		assembledConfig.tints = { ...assembledConfig.tints, ...config.tints } as any;
-	}
-	if (config.backgrounds) {
-		assembledConfig.backgrounds = { ...assembledConfig.backgrounds, ...config.backgrounds } as any;
-	}
-
-	_transform = createTransform(assembledConfig);
-	return _transform;
-}
-
-async function getCommunityTags(): Promise<Record<string, Schema> | undefined> {
-	await getTransform();
-	return _communityTags;
-}
 
 export const prerender = true;
 
 export const load: PageServerLoad = async ({ params }) => {
-	const [transform, communityTags, hl] = await Promise.all([
+	const [site, transform, hl] = await Promise.all([
+		getSite(),
 		getTransform(),
-		getCommunityTags(),
 		getHighlightTransform(),
 	]);
 
-	const site = await loadContent(contentDir, '/', _icons, communityTags);
 	const slug = params.slug || '';
 	const url = '/' + slug;
 
@@ -124,8 +43,7 @@ export const load: PageServerLoad = async ({ params }) => {
 };
 
 export async function entries() {
-	const communityTags = await getCommunityTags();
-	const site = await loadContent(contentDir, '/', _icons, communityTags);
+	const site = await getSite();
 	return site.pages
 		.filter(p => !p.route.draft)
 		.map(p => ({ slug: p.route.url === '/' ? '' : p.route.url.slice(1) }));

package/template-astro/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

package/template-astro/astro.config.mjs

@@ -0,0 +1,6 @@
+import { defineConfig } from 'astro/config';
+import { refrakt } from '@refrakt-md/astro';
+
+export default defineConfig({
+	integrations: [refrakt()],
+});

package/template-astro/content/_layout.md

@@ -0,0 +1,14 @@
+{% layout %}
+{% region name="header" %}
+# My Site
+{% /region %}
+
+{% region name="nav" %}
+{% nav %}
+## Docs
+
+- getting-started
+
+{% /nav %}
+{% /region %}
+{% /layout %}

package/template-astro/content/docs/getting-started.md

@@ -0,0 +1,40 @@
+---
+title: Getting Started
+description: Learn how to work with your refrakt.md site
+---
+
+# Getting Started
+
+This is your first documentation page. You can find this file at `content/docs/getting-started.md`.
+
+## Project Structure
+
+Your site has two key directories:
+
+- `content/` — Markdown files that make up your pages
+- `build/` — Generated HTML output (created by `npm run build`)
+
+## Writing Content
+
+Every Markdown file in `content/` becomes a page. Add frontmatter at the top for metadata:
+
+```markdown
+---
+title: Page Title
+description: A brief description
+---
+```
+
+## Using Runes
+
+Runes are Markdoc tags that give your Markdown semantic meaning:
+
+{% hint type="note" %}
+This callout is created with the `hint` rune. Try changing the `type` attribute to `warning`, `caution`, or `check`.
+{% /hint %}
+
+## Next Steps
+
+- Add more pages by creating `.md` files in `content/`
+- Edit `content/_layout.md` to customize your site's header and navigation
+- Explore the available runes in the refrakt.md documentation

package/template-astro/content/index.md

@@ -0,0 +1,18 @@
+---
+title: Welcome
+description: A new refrakt.md site
+---
+
+{% cta %}
+
+# Welcome to your site
+
+This site is built with refrakt.md — a content framework that extends Markdown with semantic runes.
+
+- [Get Started](/docs/getting-started)
+
+{% /cta %}
+
+{% hint type="note" %}
+Edit the files in `content/` to start building your site. Run `npm run build` to regenerate after changes.
+{% /hint %}

package/template-astro/src/pages/[...slug].astro

@@ -0,0 +1,88 @@
+---
+import '@refrakt-md/lumina';
+import { getTransform, getSite } from '../setup';
+import manifest from '@refrakt-md/lumina/manifest';
+import { layouts } from '@refrakt-md/lumina/layouts';
+import { renderPage, buildSeoHead, hasInteractiveRunes } from '@refrakt-md/astro';
+import type { RendererNode } from '@refrakt-md/types';
+
+const theme = { manifest, layouts };
+
+export async function getStaticPaths() {
+	const [transform, site] = await Promise.all([getTransform(), getSite()]);
+
+	return site.pages
+		.filter((p: any) => !p.route.draft)
+		.map((page: any) => {
+			const renderable = transform(page.renderable) as RendererNode;
+			const regions: Record<string, any> = {};
+			for (const [name, region] of page.layout.regions.entries()) {
+				regions[name] = {
+					name: region.name,
+					mode: region.mode,
+					content: region.content.map((c: any) => transform(c) as RendererNode),
+				};
+			}
+
+			const pages = site.pages
+				.filter((p: any) => !p.route.draft)
+				.map((p: any) => ({
+					url: p.route.url,
+					title: (p.frontmatter.title as string) ?? '',
+					draft: false,
+				}));
+
+			const slug = page.route.url === '/' ? undefined : page.route.url.slice(1);
+
+			return {
+				params: { slug },
+				props: {
+					page: {
+						renderable,
+						regions,
+						title: (page.frontmatter.title as string) ?? '',
+						url: page.route.url,
+						pages,
+						frontmatter: page.frontmatter,
+						headings: page.headings,
+					},
+					seo: page.seo,
+				},
+			};
+		});
+}
+
+const { page, seo } = Astro.props;
+const html = renderPage({ theme, page });
+const head = buildSeoHead({ title: page.title, frontmatter: page.frontmatter, seo });
+const needsBehaviors = hasInteractiveRunes(page.renderable);
+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} />
+</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>

package/template-astro/src/setup.ts

@@ -0,0 +1,56 @@
+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);
+
+let _transform: ((tree: any) => any) | null = null;
+let _communityTags: Record<string, Schema> | undefined;
+
+async function init() {
+	if (_transform) return;
+
+	const themeModule = await import(config.theme + '/transform');
+	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;
+
+		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 getSite() {
+	await init();
+	return loadContent(contentDir, '/', {}, _communityTags);
+}

package/template-astro/tsconfig.json

@@ -0,0 +1,7 @@
+{
+	"compilerOptions": {
+		"strict": true,
+		"esModuleInterop": true,
+		"skipLibCheck": true
+	}
+}

package/template-eleventy/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

package/template-eleventy/content/_layout.md

@@ -0,0 +1,14 @@
+{% layout %}
+{% region name="header" %}
+# My Site
+{% /region %}
+
+{% region name="nav" %}
+{% nav %}
+## Docs
+
+- getting-started
+
+{% /nav %}
+{% /region %}
+{% /layout %}

package/template-eleventy/content/docs/getting-started.md

@@ -0,0 +1,40 @@
+---
+title: Getting Started
+description: Learn how to work with your refrakt.md site
+---
+
+# Getting Started
+
+This is your first documentation page. You can find this file at `content/docs/getting-started.md`.
+
+## Project Structure
+
+Your site has two key directories:
+
+- `content/` — Markdown files that make up your pages
+- `build/` — Generated HTML output (created by `npm run build`)
+
+## Writing Content
+
+Every Markdown file in `content/` becomes a page. Add frontmatter at the top for metadata:
+
+```markdown
+---
+title: Page Title
+description: A brief description
+---
+```
+
+## Using Runes
+
+Runes are Markdoc tags that give your Markdown semantic meaning:
+
+{% hint type="note" %}
+This callout is created with the `hint` rune. Try changing the `type` attribute to `warning`, `caution`, or `check`.
+{% /hint %}
+
+## Next Steps
+
+- Add more pages by creating `.md` files in `content/`
+- Edit `content/_layout.md` to customize your site's header and navigation
+- Explore the available runes in the refrakt.md documentation

package/template-eleventy/content/index.md

@@ -0,0 +1,18 @@
+---
+title: Welcome
+description: A new refrakt.md site
+---
+
+{% cta %}
+
+# Welcome to your site
+
+This site is built with refrakt.md — a content framework that extends Markdown with semantic runes.
+
+- [Get Started](/docs/getting-started)
+
+{% /cta %}
+
+{% hint type="note" %}
+Edit the files in `content/` to start building your site. Run `npm run build` to regenerate after changes.
+{% /hint %}

package/template-eleventy/eleventy.config.js

@@ -0,0 +1,22 @@
+import { refraktPlugin } from '@refrakt-md/eleventy';
+
+export default function (eleventyConfig) {
+	eleventyConfig.addPlugin(refraktPlugin, {
+		cssFiles: ['node_modules/@refrakt-md/lumina/index.css'],
+		cssPrefix: '/css',
+	});
+
+	eleventyConfig.addPassthroughCopy({
+		'node_modules/@refrakt-md/lumina/tokens': '/css/tokens',
+		'node_modules/@refrakt-md/lumina/styles': '/css/styles',
+	});
+
+	return {
+		dir: {
+			input: 'src',
+			output: '_site',
+			includes: '_includes',
+			data: '_data',
+		},
+	};
+}

package/template-eleventy/src/_data/refrakt.js

@@ -0,0 +1,5 @@
+import { createDataFile } from '@refrakt-md/eleventy';
+import manifest from '@refrakt-md/lumina/manifest';
+import { layouts } from '@refrakt-md/lumina/layouts';
+
+export default createDataFile({ theme: { manifest, layouts } });

package/template-eleventy/src/_includes/base.njk

@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  {% if seo.title %}<title>{{ seo.title }}</title>{% endif %}
+  {{ seo.metaTags | safe }}
+  {{ seo.jsonLd | safe }}
+  <link rel="stylesheet" href="/css/index.css">
+</head>
+<body>
+  {{ html | safe }}
+  <script type="module">
+    import { registerElements, RfContext, initRuneBehaviors, initLayoutBehaviors } from '/js/behaviors.js';
+
+    RfContext.currentUrl = '{{ url }}';
+    registerElements();
+    initRuneBehaviors();
+    initLayoutBehaviors();
+  </script>
+</body>
+</html>

package/template-eleventy/src/pages.njk

@@ -0,0 +1,9 @@
+---
+layout: base.njk
+pagination:
+  data: refrakt
+  size: 1
+  alias: page
+permalink: "{{ page.url | slug }}/"
+---
+{{ page.html | safe }}

package/template-next/_gitignore

@@ -0,0 +1,2 @@
+node_modules
+build

package/template-next/app/[...slug]/page.tsx

@@ -0,0 +1,124 @@
+import { loadContent } from '@refrakt-md/content';
+import { assembleThemeConfig, createTransform } from '@refrakt-md/transform';
+import { loadRunePackage, mergePackages, runes as coreRunes } from '@refrakt-md/runes';
+import manifest from '@refrakt-md/lumina/manifest';
+import { layouts } from '@refrakt-md/lumina/layouts';
+const theme = { manifest, layouts };
+import { RefraktContent, buildMetadata, buildUrlFromParams, hasInteractiveRunes } from '@refrakt-md/next';
+import { BehaviorInit } from '@refrakt-md/next/client';
+import type { RendererNode } from '@refrakt-md/types';
+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);
+
+async function getTransformAndTags() {
+	const themeModule = await import(config.theme + '/transform');
+	const themeConfig = themeModule.themeConfig ?? themeModule.luminaConfig ?? themeModule.default;
+
+	const packageNames = config.packages ?? [];
+	if (packageNames.length === 0) {
+		return { transform: createTransform(themeConfig), communityTags: undefined };
+	}
+
+	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);
+
+	const communityTags: Record<string, Schema> | undefined =
+		Object.keys(merged.tags).length > 0 ? merged.tags : undefined;
+
+	const { config: assembledConfig } = assembleThemeConfig({
+		coreConfig: themeConfig,
+		packageRunes: merged.themeRunes,
+		packageIcons: merged.themeIcons,
+		packageBackgrounds: merged.themeBackgrounds,
+		extensions: merged.extensions as any,
+		provenance: merged.provenance,
+	});
+
+	return { transform: createTransform(assembledConfig), communityTags };
+}
+
+let _cached: Awaited<ReturnType<typeof getTransformAndTags>> | null = null;
+async function getCached() {
+	if (!_cached) _cached = await getTransformAndTags();
+	return _cached;
+}
+
+export async function generateStaticParams() {
+	const { communityTags } = await getCached();
+	const site = await loadContent(contentDir, '/', {}, communityTags);
+	return site.pages
+		.filter((p: any) => !p.route.draft)
+		.map((page: any) => ({
+			slug: page.route.url === '/' ? [] : page.route.url.slice(1).split('/'),
+		}));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug?: string[] }> }) {
+	const resolvedParams = await params;
+	const url = buildUrlFromParams(resolvedParams);
+	const { communityTags } = await getCached();
+	const site = await loadContent(contentDir, '/', {}, communityTags);
+	const page = site.pages.find((p: any) => p.route.url === url);
+	if (!page) return {};
+
+	return buildMetadata({
+		title: (page.frontmatter.title as string) ?? '',
+		frontmatter: page.frontmatter,
+		seo: page.seo,
+	});
+}
+
+export default async function Page({ params }: { params: Promise<{ slug?: string[] }> }) {
+	const resolvedParams = await params;
+	const url = buildUrlFromParams(resolvedParams);
+	const { transform, communityTags } = await getCached();
+	const site = await loadContent(contentDir, '/', {}, communityTags);
+	const currentPage = site.pages.find((p: any) => p.route.url === url);
+	if (!currentPage) return <div>Page not found</div>;
+
+	const renderable = transform(currentPage.renderable) as RendererNode;
+
+	const regions: Record<string, any> = {};
+	for (const [name, region] of currentPage.layout.regions.entries()) {
+		regions[name] = {
+			name: region.name,
+			mode: region.mode,
+			content: region.content.map((c: any) => transform(c) as RendererNode),
+		};
+	}
+
+	const pages = site.pages
+		.filter((p: any) => !p.route.draft)
+		.map((p: any) => ({
+			url: p.route.url,
+			title: (p.frontmatter.title as string) ?? '',
+			draft: false,
+		}));
+
+	const page = {
+		renderable,
+		regions,
+		title: (currentPage.frontmatter.title as string) ?? '',
+		url: currentPage.route.url,
+		pages,
+		frontmatter: currentPage.frontmatter,
+		headings: currentPage.headings,
+	};
+
+	const needsBehaviors = hasInteractiveRunes(page.renderable);
+
+	return (
+		<>
+			<RefraktContent theme={theme} page={page} />
+			{needsBehaviors && <BehaviorInit pages={pages} currentUrl={page.url} />}
+		</>
+	);
+}

package/template-next/app/layout.tsx

@@ -0,0 +1,10 @@
+import '@refrakt-md/lumina';
+import type { ReactNode } from 'react';
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+	return (
+		<html lang="en">
+			<body>{children}</body>
+		</html>
+	);
+}

package/template-next/content/_layout.md

@@ -0,0 +1,14 @@
+{% layout %}
+{% region name="header" %}
+# My Site
+{% /region %}
+
+{% region name="nav" %}
+{% nav %}
+## Docs
+
+- getting-started
+
+{% /nav %}
+{% /region %}
+{% /layout %}