framer-cms-markdown 0.0.1

package/dist/src/markdown-to-framer/import.js

@@ -0,0 +1,142 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import { createFieldDataEntryInput, } from "../libs/framer/framer-client";
+import { slugify } from "../libs/framer/filename";
+import { markdownToHtml, splitMarkdownIntoSections, } from "../libs/framer/markdown";
+import { parseFrontmatterDocument } from "../libs/framer/frontmatter";
+const SECTION_HTML_FIELD_PATTERN = /^Section\s+(\d+)\s+HTML$/i;
+const SECTION_TITLE_FIELD_PATTERN = /^Section\s+(\d+)\s+Title$/i;
+export async function listMarkdownFiles(rootDir) {
+    const entries = await fs.readdir(rootDir, { withFileTypes: true });
+    const files = await Promise.all(entries.map(async (entry) => {
+        const entryPath = path.join(rootDir, entry.name);
+        if (entry.isDirectory()) {
+            return listMarkdownFiles(entryPath);
+        }
+        return entry.isFile() && entry.name.endsWith(".md") ? [entryPath] : [];
+    }));
+    return files.flat().sort((left, right) => left.localeCompare(right));
+}
+export async function readMarkdownDocuments(contentDir) {
+    const files = await listMarkdownFiles(contentDir);
+    return Promise.all(files.map(async (filePath) => {
+        const raw = await fs.readFile(filePath, "utf8");
+        const { data, body } = parseFrontmatterDocument(raw);
+        const slug = typeof data.slug === "string" && data.slug.trim().length > 0
+            ? data.slug
+            : slugify(path.basename(filePath, ".md"));
+        return {
+            path: filePath,
+            slug,
+            metadata: data,
+            body,
+        };
+    }));
+}
+export function resolveSectionHtmlFields(fields) {
+    return fields
+        .filter((field) => {
+        return field.type === "formattedText" && SECTION_HTML_FIELD_PATTERN.test(field.name);
+    })
+        .sort((left, right) => {
+        const leftOrder = Number.parseInt(left.name.match(SECTION_HTML_FIELD_PATTERN)?.[1] ?? "0", 10);
+        const rightOrder = Number.parseInt(right.name.match(SECTION_HTML_FIELD_PATTERN)?.[1] ?? "0", 10);
+        return leftOrder - rightOrder || left.name.localeCompare(right.name);
+    });
+}
+export function resolveSectionTitleFields(fields) {
+    return fields
+        .filter((field) => SECTION_TITLE_FIELD_PATTERN.test(field.name))
+        .sort((left, right) => {
+        const leftOrder = Number.parseInt(left.name.match(SECTION_TITLE_FIELD_PATTERN)?.[1] ?? "0", 10);
+        const rightOrder = Number.parseInt(right.name.match(SECTION_TITLE_FIELD_PATTERN)?.[1] ?? "0", 10);
+        return leftOrder - rightOrder || left.name.localeCompare(right.name);
+    });
+}
+export function extractSectionTitle(markdown) {
+    const match = markdown.match(/^#{1,6}\s+(.+?)\s*$/m);
+    if (!match) {
+        return "";
+    }
+    return match[1].replace(/\s+#+\s*$/, "").trim();
+}
+export async function buildFieldDataInput(document, fields, config) {
+    const fieldByName = new Map(fields.map((field) => [field.name, field]));
+    const fieldData = {};
+    for (const metadataFieldName of config.metadata) {
+        const field = fieldByName.get(metadataFieldName);
+        if (!field) {
+            throw new Error(`Field "${metadataFieldName}" from config was not found in Framer collection.`);
+        }
+        const value = document.metadata[metadataFieldName];
+        if (value === undefined) {
+            continue;
+        }
+        const input = createFieldDataEntryInput(field, value, {
+            formattedTextContentType: "markdown",
+        });
+        if (!input) {
+            throw new Error(`Field "${metadataFieldName}" could not be populated from frontmatter value ${JSON.stringify(value)}.`);
+        }
+        fieldData[field.id] = input;
+    }
+    if (config.markdown === "sections") {
+        const sectionFields = resolveSectionHtmlFields(fields);
+        const titleFields = resolveSectionTitleFields(fields);
+        const sections = splitMarkdownIntoSections(document.body);
+        if (sections.length > sectionFields.length) {
+            throw new Error(`Document "${document.path}" has ${sections.length} sections, but Framer collection only exposes ${sectionFields.length} "Section NN HTML" fields.`);
+        }
+        for (const field of sectionFields) {
+            fieldData[field.id] = {
+                type: field.type,
+                value: "",
+                contentType: "html",
+            };
+        }
+        for (const field of titleFields) {
+            const input = createFieldDataEntryInput(field, "");
+            if (input) {
+                fieldData[field.id] = input;
+            }
+        }
+        for (const [index, section] of sections.entries()) {
+            const field = sectionFields[index];
+            const titleField = titleFields[index];
+            const html = await markdownToHtml(section);
+            const title = extractSectionTitle(section);
+            fieldData[field.id] = {
+                type: field.type,
+                value: html,
+                contentType: "html",
+            };
+            if (titleField) {
+                const input = createFieldDataEntryInput(titleField, title);
+                if (input) {
+                    fieldData[titleField.id] = input;
+                }
+            }
+        }
+        return fieldData;
+    }
+    const markdownField = fieldByName.get(config.markdown);
+    if (!markdownField) {
+        throw new Error(`Markdown field "${config.markdown}" from config was not found in Framer collection.`);
+    }
+    const bodyInput = createFieldDataEntryInput(markdownField, document.body, {
+        formattedTextContentType: "markdown",
+    });
+    if (!bodyInput) {
+        throw new Error(`Markdown field "${config.markdown}" could not accept the document body.`);
+    }
+    fieldData[markdownField.id] = bodyInput;
+    return fieldData;
+}
+export async function buildCollectionItemInput(document, fields, config, existingItemsBySlug) {
+    const existing = existingItemsBySlug.get(document.slug);
+    return {
+        id: existing?.id,
+        slug: document.slug,
+        fieldData: await buildFieldDataInput(document, fields, config),
+    };
+}

package/dist/src/markdown-to-framer/index.js

@@ -0,0 +1,51 @@
+import path from "node:path";
+import process from "node:process";
+import yargs from "yargs";
+import { hideBin } from "yargs/helpers";
+import { loadConfig } from "../libs/framer/config";
+import { FramerClient, } from "../libs/framer/framer-client";
+import { buildCollectionItemInput, readMarkdownDocuments, } from "./import";
+export async function runCli(argv = hideBin(process.argv)) {
+    const args = await yargs(argv)
+        .scriptName("markdown-to-framer")
+        .usage("$0 --token <token> --config config/use-cases.yml")
+        .option("token", {
+        type: "string",
+        describe: "Framer API token. Falls back to FRAMER_TOKEN.",
+    })
+        .option("config", {
+        type: "string",
+        demandOption: true,
+        describe: "Path to a single sync config file",
+    })
+        .strict()
+        .help()
+        .parse();
+    const cliArgs = args;
+    const token = cliArgs.token ?? process.env.FRAMER_TOKEN;
+    if (!token) {
+        throw new Error("Framer token is required. Pass --token or set FRAMER_TOKEN.");
+    }
+    const { config } = await loadConfig(cliArgs.config);
+    const contentDir = path.resolve(config.content ?? path.join("content", config.collection));
+    const documents = await readMarkdownDocuments(contentDir);
+    const client = new FramerClient({
+        projectRef: config.site,
+        token,
+    });
+    try {
+        const { collection, fields, items } = await client.getCollectionExportData(config.collection);
+        const existingItemsBySlug = new Map(items.map((item) => [item.slug, item]));
+        const upserts = [];
+        for (const document of documents) {
+            upserts.push(await buildCollectionItemInput(document, fields, config, existingItemsBySlug));
+        }
+        await client.upsertCollectionItems(collection, upserts);
+        for (const document of documents) {
+            console.log(document.slug);
+        }
+    }
+    finally {
+        await client.disconnect();
+    }
+}

package/dist/src/markdown.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.htmlToMarkdown = htmlToMarkdown;
+const turndown_1 = __importDefault(require("turndown"));
+const turndown = new turndown_1.default({
+    headingStyle: "atx",
+    codeBlockStyle: "fenced",
+    bulletListMarker: "-",
+    emDelimiter: "_",
+});
+function htmlToMarkdown(html) {
+    const input = html.trim();
+    if (!input) {
+        return "";
+    }
+    const markdown = turndown.turndown(input).trim();
+    return markdown.length > 0 ? `${markdown}\n` : "";
+}

package/dist/test/filename.test.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const strict_1 = __importDefault(require("node:assert/strict"));
+const node_test_1 = __importDefault(require("node:test"));
+const filename_1 = require("../src/filename");
+(0, node_test_1.default)("slugify normalizes text", () => {
+    strict_1.default.equal((0, filename_1.slugify)("Hello, Framer CMS!"), "hello-framer-cms");
+});
+(0, node_test_1.default)("uniqueName adds suffixes", () => {
+    const existing = new Set(["post", "post-2"]);
+    strict_1.default.equal((0, filename_1.uniqueName)("post", existing), "post-3");
+});
+(0, node_test_1.default)("resolveMarkdownFilename prefers slug", () => {
+    const existing = new Set();
+    strict_1.default.equal((0, filename_1.resolveMarkdownFilename)({ slug: "hello-world" }, existing), "hello-world.md");
+});

package/dist/test/frontmatter.test.js

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const strict_1 = __importDefault(require("node:assert/strict"));
+const node_test_1 = __importDefault(require("node:test"));
+const frontmatter_1 = require("../src/frontmatter");
+(0, node_test_1.default)("toFrontmatter serializes yaml frontmatter", () => {
+    const output = (0, frontmatter_1.toFrontmatter)({
+        title: "Hello",
+        tags: ["a", "b"],
+        published: true,
+    });
+    strict_1.default.match(output, /^---\n/);
+    strict_1.default.match(output, /title: Hello/);
+    strict_1.default.match(output, /tags:/);
+    strict_1.default.match(output, /published: true/);
+});

package/dist/test/markdown.test.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const strict_1 = __importDefault(require("node:assert/strict"));
+const node_test_1 = __importDefault(require("node:test"));
+const markdown_1 = require("../src/markdown");
+(0, node_test_1.default)("htmlToMarkdown converts simple html", () => {
+    const output = (0, markdown_1.htmlToMarkdown)("<h1>Hello</h1><p>World</p>");
+    strict_1.default.match(output, /^# Hello/);
+    strict_1.default.match(output, /World/);
+});

package/package.json

@@ -0,0 +1,63 @@
+{
+	"name": "framer-cms-markdown",
+	"version": "0.0.1",
+	"description": "Sync's Framer CMS content from/to markdown",
+	"type": "module",
+	"main": "dist/src/index.js",
+	"bin": {
+		"framer-to-markdown": "dist/src/framer-to-markdown/cli.js",
+		"markdown-to-framer": "dist/src/markdown-to-framer/cli.js"
+	},
+	"scripts": {
+		"build": "tsc -p tsconfig.json",
+		"lint": "eslint --fix \"**/*.ts\"",
+		"test": "npm run test:unit",
+		"test:unit": "NODE_OPTIONS='--experimental-vm-modules --max_old_space_size=3072' jest --maxWorkers=50%",
+		"framer-to-markdown": "AWS_SDK_LOAD_CONFIG=1 tsx -r source-map-support/register src/framer-to-markdown/cli.ts",
+		"markdown-to-framer": "AWS_SDK_LOAD_CONFIG=1 tsx -r source-map-support/register src/markdown-to-framer/cli.ts"
+	},
+	"keywords": [],
+	"author": "Ronny Roeller <ronny@nextapp.co> (nextapp.co)",
+	"license": "ISC",
+	"dependencies": {
+		"framer-api": "^0.1.14",
+		"prettier": "^3.8.4",
+		"rehype-parse": "^9.0.1",
+		"rehype-remark": "^10.0.1",
+		"rehype-stringify": "^10.0.1",
+		"remark-gfm": "^4.0.1",
+		"remark-parse": "^11.0.0",
+		"remark-rehype": "^11.1.2",
+		"remark-stringify": "^11.0.0",
+		"unified": "^11.0.5",
+		"yaml": "^2.8.1",
+		"yargs": "^18.0.0"
+	},
+	"devDependencies": {
+		"@types/jest": "^30.0.0",
+		"@types/node": "^24.0.10",
+		"eslint": "^8.57.1",
+		"eslint-config-collaborne": "^5.6.0",
+		"jest": "^30.4.2",
+		"ts-jest": "^29.4.11",
+		"tsx": "^4.22.4",
+		"typescript": "^6.0.3"
+	},
+	"jest": {
+		"preset": "ts-jest/presets/js-with-ts-esm",
+		"globals": {
+			"ts-jest": {
+				"useESM": true
+			}
+		},
+		"extensionsToTreatAsEsm": [
+			".ts",
+			".tsx"
+		],
+		"testEnvironment": "node",
+		"testTimeout": 20000,
+		"testMatch": [
+			"**/*.spec.ts"
+		]
+	}
+}

package/src/framer-to-markdown/__tests__/export.spec.ts

@@ -0,0 +1,85 @@
+import fs from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+
+import { afterEach, describe, expect, it } from "@jest/globals";
+
+import { exportItemsToMarkdown } from "../export";
+
+const tempDirs: string[] = [];
+
+afterEach(async () => {
+	await Promise.all(
+		tempDirs
+			.splice(0)
+			.map((dir) => fs.rm(dir, { recursive: true, force: true })),
+	);
+});
+
+describe("export", () => {
+	it("writes the configured markdown body and curated frontmatter", async () => {
+		const outputDir = await fs.mkdtemp(
+			path.join(os.tmpdir(), "framer-cms-markdown-"),
+		);
+		tempDirs.push(outputDir);
+
+		const [writtenFile] = await exportItemsToMarkdown(
+			[
+				{
+					id: "1",
+					slug: "example-post",
+					draft: false,
+					fieldData: {
+						Title: "Example Post",
+						Excerpt: "Short summary",
+						"Section 02 HTML":
+							'<h2 dir="auto">Second</h2><p dir="auto">Hello world.</p>',
+						"Section 01 HTML":
+							'<!-- internal metadata --><h1 dir="auto">Example Post</h1><p dir="auto">Intro text.</p>',
+						"Workflow Archetype": "continuous_enrichment",
+						"Primary Team": "Product",
+						"Company Type": "SaaS",
+						"Strategic Category": "Product Intelligence",
+						"Business Outcome": "Improve roadmap prioritization",
+					},
+				},
+			],
+			{
+				outputDir,
+				bodyFieldName: "sections",
+				frontmatterFields: [
+					"Title",
+					"Excerpt",
+					"Workflow Archetype",
+					"Primary Team",
+					"Company Type",
+					"Strategic Category",
+					"Business Outcome",
+				],
+			},
+		);
+
+		const contents = await fs.readFile(writtenFile, "utf8");
+
+		expect(contents).toContain("slug: example-post");
+		expect(contents).toContain("Title: Example Post");
+		expect(contents).toContain("Excerpt: Short summary");
+		expect(contents).toContain("Workflow Archetype: continuous_enrichment");
+		expect(contents).toContain("Primary Team: Product");
+		expect(contents).toContain("Company Type: SaaS");
+		expect(contents).toContain("Strategic Category: Product Intelligence");
+		expect(contents).toContain(
+			"Business Outcome: Improve roadmap prioritization",
+		);
+		expect(contents).not.toContain("draft:");
+		expect(contents).not.toContain("internal metadata");
+		expect(contents).toContain("# Example Post");
+		expect(contents).toContain("Intro text.");
+		expect(contents).toContain("## Second");
+		expect(contents).toContain("Hello world.");
+		expect(contents.indexOf("# Example Post")).toBeLessThan(
+			contents.indexOf("## Second"),
+		);
+		expect(contents.endsWith("\n")).toBe(true);
+	});
+});

package/src/framer-to-markdown/__tests__/filename.spec.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "@jest/globals";
+
+import { resolveMarkdownFilename, slugify, uniqueName } from "../filename";
+
+describe("filename", () => {
+	it("slugify normalizes text", () => {
+		expect(slugify("Hello, Framer CMS!")).toBe("hello-framer-cms");
+	});
+
+	it("uniqueName adds suffixes", () => {
+		const existing = new Set(["post", "post-2"]);
+		expect(uniqueName("post", existing)).toBe("post-3");
+	});
+
+	it("resolveMarkdownFilename prefers slug", () => {
+		const existing = new Set<string>();
+		expect(resolveMarkdownFilename({ slug: "hello-world" }, existing)).toBe(
+			"hello-world.md",
+		);
+	});
+});

package/src/framer-to-markdown/__tests__/frontmatter.spec.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from "@jest/globals";
+
+import { toFrontmatter } from "../frontmatter";
+
+describe("frontmatter", () => {
+	it("serializes yaml frontmatter", () => {
+		const output = toFrontmatter({
+			title: "Hello",
+			tags: ["a", "b"],
+			published: true,
+		});
+
+		expect(output).toMatch(/^---\n/);
+		expect(output).toMatch(/title: Hello/);
+		expect(output).toMatch(/tags:/);
+		expect(output).toMatch(/published: true/);
+	});
+});

package/src/framer-to-markdown/__tests__/markdown.spec.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "@jest/globals";
+
+import { htmlToMarkdown } from "../markdown";
+
+describe("markdown", () => {
+	it("converts simple html", async () => {
+		const output = await htmlToMarkdown("<h1>Hello</h1><p>World</p>");
+		expect(output).toMatch(/^# Hello/);
+		expect(output).toMatch(/World/);
+	});
+
+	it("converts html tables to markdown tables", async () => {
+		const output = await htmlToMarkdown(
+			[
+				"<figure><table><tbody>",
+				"<tr><th><p>Approach</p></th><th><p>Effect</p></th></tr>",
+				"<tr><td><p>Fix early</p></td><td><p>Cheaper remediation</p></td></tr>",
+				"</tbody></table></figure>",
+			].join(""),
+		);
+
+		expect(output).toMatch(/\|\s*Approach\s*\|\s*Effect\s*\|/);
+		expect(output).toMatch(/\|\s*-+\s*\|\s*-+\s*\|/);
+		expect(output).toMatch(/\|\s*Fix early\s*\|\s*Cheaper remediation\s*\|/);
+	});
+});

package/src/framer-to-markdown/cli.ts

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+
+import { runCli } from "./index";
+
+await runCli().catch((error) => {
+	console.error(error instanceof Error ? error.message : error);
+	process.exitCode = 1;
+});

package/src/framer-to-markdown/config.ts

@@ -0,0 +1,4 @@
+export {
+	loadConfig,
+	type SyncConfig as ExportConfig,
+} from "../libs/framer/config";