notionic 0.0.0-stage → 0.8.2

package/dist/markdown.d.ts

@@ -0,0 +1,15 @@
+import { m as RenderContext, u as NotionBlock } from "./types-DOxr5KpT.js";
+//#region src/markdown.d.ts
+export type MarkdownOptions = {
+  /** Where links to Notion pages point, as in `NotionRenderer`. Defaults to notion.so. */
+  pageHref?: (pageId: string) => string | null;
+  /** Rewrites URLs of files uploaded to Notion, as in `NotionRenderer`. */
+  transformFileUrl?: RenderContext["transformFileUrl"];
+};
+/**
+ * Notion blocks as GitHub-flavored Markdown, for feeds, `llms.txt` and other
+ * plain-text uses. Links and files resolve as in `NotionRenderer`; Notion's
+ * heading 1 becomes `##`, so add the page title as `#` yourself.
+ */
+export declare function blocksToMarkdown(blocks: NotionBlock[], options?: MarkdownOptions): string;
+//#endregion

package/dist/markdown.js

@@ -0,0 +1,162 @@
+import { a as resolvePageLink, i as resolveLink, n as defaultPageHref, t as resolveFileUrl } from "./files-DIc0m6LM.js";
+import { n as plainText } from "./utils-BL_oAR33.js";
+//#region src/markdown.ts
+function inline(text, context) {
+	return text.map((item) => {
+		if (item.type === "equation") return `$${item.equation.expression}$`;
+		let value = item.plain_text;
+		if (!value) return "";
+		const { annotations } = item;
+		if (annotations.code) value = `\`${value}\``;
+		if (annotations.bold) value = `**${value}**`;
+		if (annotations.italic) value = `*${value}*`;
+		if (annotations.strikethrough) value = `~~${value}~~`;
+		const link = resolveLink(item.href, context);
+		if (link) value = `[${value}](${link.href})`;
+		return value.replace(/\n/g, "  \n");
+	}).join("");
+}
+function indent(markdown, prefix) {
+	return markdown.split("\n").map((line) => line ? prefix + line : line).join("\n");
+}
+function quote(markdown) {
+	return markdown.split("\n").map((line) => line ? `> ${line}` : ">").join("\n");
+}
+function fence(code) {
+	const longest = Math.max(2, ...(code.match(/`+/g) ?? []).map((run) => run.length));
+	return "`".repeat(longest + 1);
+}
+function linkLine(label, url, context) {
+	const link = url ? resolveLink(url, context) : null;
+	return link ? `[${label || link.href}](${link.href})` : "";
+}
+function headingLevel(type) {
+	return Number(type.slice(-1)) + 1;
+}
+function listItems(items, context) {
+	const first = items[0];
+	const start = first?.type === "numbered_list_item" ? first.numbered_list_item.list_start_index ?? 1 : 1;
+	return items.map((item, index) => {
+		let marker = "-";
+		let text = [];
+		if (item.type === "bulleted_list_item") text = item.bulleted_list_item.rich_text;
+		if (item.type === "numbered_list_item") {
+			marker = `${start + index}.`;
+			text = item.numbered_list_item.rich_text;
+		}
+		if (item.type === "to_do") {
+			marker = item.to_do.checked ? "- [x]" : "- [ ]";
+			text = item.to_do.rich_text;
+		}
+		const children = item.children?.length ? `\n${indent(render(item.children, context), "   ")}` : "";
+		return `${marker} ${inline(text, context)}${children}`;
+	}).join("\n");
+}
+function table(block, context) {
+	const [header, ...body] = (block.children ?? []).flatMap((row) => row.type === "table_row" ? [row.table_row.cells] : []);
+	if (!header) return "";
+	const line = (cells) => `| ${cells.map((cell) => inline(cell, context).replace(/\|/g, "\\|").replace(/ {2}\n/g, " ")).join(" | ")} |`;
+	return [
+		line(header),
+		`| ${header.map(() => "---").join(" | ")} |`,
+		...body.map(line)
+	].join("\n");
+}
+function block(item, context) {
+	const children = item.children?.length ? render(item.children, context) : "";
+	const withChildren = (markdown) => [markdown, children].filter(Boolean).join("\n\n");
+	switch (item.type) {
+		case "paragraph": return withChildren(inline(item.paragraph.rich_text, context));
+		case "heading_1":
+		case "heading_2":
+		case "heading_3":
+		case "heading_4": {
+			const text = inline((item.type === "heading_1" ? item.heading_1 : item.type === "heading_2" ? item.heading_2 : item.type === "heading_3" ? item.heading_3 : item.heading_4).rich_text, context).trim();
+			return withChildren(text ? `${"#".repeat(headingLevel(item.type))} ${text}` : "");
+		}
+		case "quote": return quote(withChildren(inline(item.quote.rich_text, context)));
+		case "callout": return quote(withChildren((item.callout.icon?.type === "emoji" ? `${item.callout.icon.emoji} ` : "") + inline(item.callout.rich_text, context)));
+		case "toggle": return `<details>\n<summary>${plainText(item.toggle.rich_text)}</summary>\n\n${children}\n\n</details>`;
+		case "divider": return "---";
+		case "equation": return `$$\n${item.equation.expression}\n$$`;
+		case "code": {
+			const code = plainText(item.code.rich_text).replace(/\n$/, "");
+			const language = item.code.language === "plain text" ? "" : item.code.language;
+			const marks = fence(code);
+			const caption = plainText(item.code.caption);
+			return `${marks}${language}\n${code}\n${marks}${caption ? `\n\n${caption}` : ""}`;
+		}
+		case "table": return table(item, context);
+		case "column_list":
+		case "column":
+		case "synced_block": return children;
+		case "tab": return (item.children ?? []).flatMap((tab) => {
+			if (tab.type !== "paragraph") return [];
+			return [[`**${plainText(tab.paragraph.rich_text)}**`, tab.children?.length ? render(tab.children, context) : ""].filter(Boolean).join("\n\n")];
+		}).join("\n\n");
+		case "image": {
+			const url = resolveFileUrl(item.image, item.id, context);
+			return url ? `![${plainText(item.image.caption)}](${url})` : "";
+		}
+		case "video": return linkLine(plainText(item.video.caption) || "Video", resolveFileUrl(item.video, item.id, context), context);
+		case "audio": return linkLine(plainText(item.audio.caption) || "Audio", resolveFileUrl(item.audio, item.id, context), context);
+		case "file": return linkLine(item.file.name || plainText(item.file.caption), resolveFileUrl(item.file, item.id, context), context);
+		case "pdf": return linkLine(plainText(item.pdf.caption) || "PDF", resolveFileUrl(item.pdf, item.id, context), context);
+		case "bookmark": return linkLine(plainText(item.bookmark.caption) || item.bookmarkPreview?.title || "", item.bookmark.url, context);
+		case "embed": return linkLine(plainText(item.embed.caption) || item.bookmarkPreview?.title || "", item.embed.url, context);
+		case "link_preview": return linkLine(item.bookmarkPreview?.title ?? "", item.link_preview.url, context);
+		case "child_page": {
+			const link = resolvePageLink(item.id, context);
+			const title = item.child_page.title || "Untitled";
+			return link ? `[${title}](${link.href})` : title;
+		}
+		case "link_to_page": {
+			const page = item.linkedPage;
+			if (!page) return "";
+			const link = resolvePageLink(page.id, context);
+			const title = page.title || "Untitled";
+			return link ? `[${title}](${link.href})` : title;
+		}
+		default: return "";
+	}
+}
+const LIST_TYPES = /* @__PURE__ */ new Set([
+	"bulleted_list_item",
+	"numbered_list_item",
+	"to_do"
+]);
+function render(blocks, context) {
+	const parts = [];
+	let list = [];
+	const flush = () => {
+		if (list.length) parts.push(listItems(list, context));
+		list = [];
+	};
+	for (const item of blocks) {
+		if (LIST_TYPES.has(item.type)) {
+			if (list[0] && list[0].type !== item.type) flush();
+			list.push(item);
+			continue;
+		}
+		flush();
+		const markdown = block(item, context);
+		if (markdown.trim()) parts.push(markdown);
+	}
+	flush();
+	return parts.join("\n\n");
+}
+/**
+* Notion blocks as GitHub-flavored Markdown, for feeds, `llms.txt` and other
+* plain-text uses. Links and files resolve as in `NotionRenderer`; Notion's
+* heading 1 becomes `##`, so add the page title as `#` yourself.
+*/
+function blocksToMarkdown(blocks, options = {}) {
+	return render(blocks, {
+		pageHref: options.pageHref ?? defaultPageHref,
+		transformFileUrl: options.transformFileUrl,
+		headings: [],
+		components: {}
+	});
+}
+//#endregion
+export { blocksToMarkdown };

package/dist/page-BmeweSIt.js

@@ -0,0 +1,27 @@
+import { n as plainText } from "./utils-BL_oAR33.js";
+//#region src/page.ts
+/** A page's title: the text of its `title` property. */
+function pageTitle(page) {
+	for (const property of Object.values(page.properties)) if (property.type === "title") return plainText(property.title);
+	return "";
+}
+function toNotionPage(page) {
+	return {
+		id: page.id,
+		url: page.url,
+		title: pageTitle(page),
+		icon: page.icon,
+		cover: page.cover,
+		lastEditedTime: page.last_edited_time,
+		properties: page.properties
+	};
+}
+function toLinkedPage(page) {
+	return {
+		id: page.id,
+		title: pageTitle(page),
+		icon: page.icon
+	};
+}
+//#endregion
+export { toLinkedPage as n, toNotionPage as r, pageTitle as t };

package/dist/styles.css

@@ -0,0 +1,108 @@
+/*
+ * notionic's styles, for Tailwind CSS v4. Import it after tailwindcss:
+ *
+ *   @import "tailwindcss";
+ *   @import "notionic/styles.css";
+ *
+ * Components use shadcn/ui's theme tokens (foreground, muted, border…), so
+ * they follow your theme. If your theme names them differently, map them; the
+ * README lists the ones notionic needs.
+ *
+ * Notion's nine colors are the --notionic-* variables below. Override the text
+ * colors to match your brand, e.g. `--notionic-red: var(--destructive);`. Each
+ * background color (--notionic-*-bg) is mixed from its text color and your
+ * --background, so it follows both, in light and dark mode.
+ *
+ * The dark text colors apply under the `dark` class, `data-theme="dark"` or
+ * `data-mode="dark"`, and on pages whose `color-scheme` is dark (e.g. a page
+ * that declares `color-scheme: light dark`, on a dark OS).
+ */
+
+/* Scan notionic's components for the classes they use. */
+@source "./";
+
+:root {
+  --notionic-gray: oklch(44.6% 0.03 256.802);
+  --notionic-brown: oklch(47.3% 0.137 46.201);
+  --notionic-orange: oklch(55.3% 0.195 38.402);
+  --notionic-yellow: oklch(55.4% 0.135 66.442);
+  --notionic-green: oklch(52.7% 0.154 150.069);
+  --notionic-blue: oklch(48.8% 0.243 264.376);
+  --notionic-purple: oklch(49.6% 0.265 301.924);
+  --notionic-pink: oklch(52.5% 0.223 3.958);
+  --notionic-red: oklch(50.5% 0.213 27.518);
+  /* Inset outline on images, so light ones keep an edge: pure black at 10%,
+     pure white at 10% in dark mode, never a tinted neutral. */
+  --notionic-image-outline: oklch(0 0 0 / 0.1);
+}
+
+/*
+ * Follow the page's color-scheme. Behind @supports so browsers without
+ * light-dark() keep the light colors above. Pages that never declare a dark
+ * color-scheme always get the light values.
+ */
+@supports (color: light-dark(white, black)) {
+  :root {
+    --notionic-gray: light-dark(oklch(44.6% 0.03 256.802), oklch(70.7% 0.022 261.325));
+    --notionic-brown: light-dark(oklch(47.3% 0.137 46.201), oklch(82.8% 0.189 84.429));
+    --notionic-orange: light-dark(oklch(55.3% 0.195 38.402), oklch(75% 0.183 55.934));
+    --notionic-yellow: light-dark(oklch(55.4% 0.135 66.442), oklch(85.2% 0.199 91.936));
+    --notionic-green: light-dark(oklch(52.7% 0.154 150.069), oklch(79.2% 0.209 151.711));
+    --notionic-blue: light-dark(oklch(48.8% 0.243 264.376), oklch(70.7% 0.165 254.624));
+    --notionic-purple: light-dark(oklch(49.6% 0.265 301.924), oklch(71.4% 0.203 305.504));
+    --notionic-pink: light-dark(oklch(52.5% 0.223 3.958), oklch(71.8% 0.202 349.761));
+    --notionic-red: light-dark(oklch(50.5% 0.213 27.518), oklch(70.4% 0.191 22.216));
+    --notionic-image-outline: light-dark(oklch(0 0 0 / 0.1), oklch(1 0 0 / 0.1));
+  }
+}
+
+.dark,
+[data-theme="dark"],
+[data-mode="dark"] {
+  --notionic-gray: oklch(70.7% 0.022 261.325);
+  --notionic-brown: oklch(82.8% 0.189 84.429);
+  --notionic-orange: oklch(75% 0.183 55.934);
+  --notionic-yellow: oklch(85.2% 0.199 91.936);
+  --notionic-green: oklch(79.2% 0.209 151.711);
+  --notionic-blue: oklch(70.7% 0.165 254.624);
+  --notionic-purple: oklch(71.4% 0.203 305.504);
+  --notionic-pink: oklch(71.8% 0.202 349.761);
+  --notionic-red: oklch(70.4% 0.191 22.216);
+  --notionic-image-outline: oklch(1 0 0 / 0.1);
+}
+
+/*
+ * Repeated under the dark selectors so the mix is recomputed wherever the
+ * text colors change, not only on :root. Override --notionic-bg-mix to make
+ * backgrounds stronger or subtler, or any --notionic-*-bg to set one directly.
+ */
+:root,
+.dark,
+[data-theme="dark"],
+[data-mode="dark"] {
+  --notionic-bg-mix: 14%;
+  --notionic-gray-bg: color-mix(in oklch, var(--notionic-gray) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-brown-bg: color-mix(in oklch, var(--notionic-brown) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-orange-bg: color-mix(in oklch, var(--notionic-orange) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-yellow-bg: color-mix(in oklch, var(--notionic-yellow) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-green-bg: color-mix(in oklch, var(--notionic-green) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-blue-bg: color-mix(in oklch, var(--notionic-blue) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-purple-bg: color-mix(in oklch, var(--notionic-purple) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-pink-bg: color-mix(in oklch, var(--notionic-pink) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+  --notionic-red-bg: color-mix(in oklch, var(--notionic-red) var(--notionic-bg-mix), var(--background, var(--color-background, white)));
+}
+
+.dark,
+[data-theme="dark"],
+[data-mode="dark"] {
+  --notionic-bg-mix: 22%;
+}
+
+/*
+ * Native audio and video controls only turn dark when the page's color-scheme
+ * is dark. Under the dark selectors, tell the browser so, or a bright player
+ * sits on a dark page.
+ */
+:is(.dark, [data-theme="dark"], [data-mode="dark"]) .notionic :is(audio, video) {
+  color-scheme: dark;
+}