@analogjs/content 3.0.0-alpha.10 → 3.0.0-alpha.12

package/fesm2022/content-list-loader.mjs

@@ -0,0 +1,284 @@
+import * as i0 from "@angular/core";
+import { Injectable, InjectionToken, TransferState, inject, makeStateKey, signal, ɵPendingTasksInternal } from "@angular/core";
+//#region packages/content/src/lib/content-renderer.ts
+var ContentRenderer = class ContentRenderer {
+	async render(content) {
+		return {
+			content,
+			toc: []
+		};
+	}
+	getContentHeadings(_content) {
+		return [];
+	}
+	enhance() {}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "21.1.1",
+			ngImport: i0,
+			type: ContentRenderer,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "21.1.1",
+			ngImport: i0,
+			type: ContentRenderer
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.1.1",
+	ngImport: i0,
+	type: ContentRenderer,
+	decorators: [{ type: Injectable }]
+});
+var NoopContentRenderer = class {
+	constructor() {
+		this.transferState = inject(TransferState);
+		this.contentId = 0;
+	}
+	/**
+	* Generates a hash from the content string
+	* to be used with the transfer state
+	*/
+	generateHash(str) {
+		let hash = 0;
+		for (let i = 0, len = str.length; i < len; i++) {
+			const chr = str.charCodeAt(i);
+			hash = (hash << 5) - hash + chr;
+			hash |= 0;
+		}
+		return hash;
+	}
+	async render(content) {
+		this.contentId = this.generateHash(content);
+		const toc = this.getContentHeadings(content);
+		const key = makeStateKey(`content-headings-${this.contentId}`);
+		return {
+			content,
+			toc: this.transferState.get(key, toc)
+		};
+	}
+	enhance() {}
+	getContentHeadings(content) {
+		return this.extractHeadings(content);
+	}
+	extractHeadings(content) {
+		const markdownHeadings = this.extractHeadingsFromMarkdown(content);
+		if (markdownHeadings.length > 0) return markdownHeadings;
+		return this.extractHeadingsFromHtml(content);
+	}
+	extractHeadingsFromMarkdown(content) {
+		const lines = content.split("\n");
+		const toc = [];
+		const slugCounts = /* @__PURE__ */ new Map();
+		for (const line of lines) {
+			const match = /^(#{1,6})\s+(.+?)\s*$/.exec(line);
+			if (!match) continue;
+			const level = match[1].length;
+			const text = match[2].trim();
+			if (!text) continue;
+			const baseSlug = text.toLowerCase().replace(/[^\w\s-]/g, "").trim().replace(/\s+/g, "-");
+			const count = slugCounts.get(baseSlug) ?? 0;
+			slugCounts.set(baseSlug, count + 1);
+			const id = count === 0 ? baseSlug : `${baseSlug}-${count}`;
+			toc.push({
+				id,
+				level,
+				text
+			});
+		}
+		return toc;
+	}
+	extractHeadingsFromHtml(content) {
+		const toc = [];
+		const slugCounts = /* @__PURE__ */ new Map();
+		for (const match of content.matchAll(/<h([1-6])([^>]*)>([\s\S]*?)<\/h\1>/gi)) {
+			const level = Number(match[1]);
+			const attrs = match[2] ?? "";
+			const text = (match[3] ?? "").replace(/<[^>]+>/g, "").trim();
+			if (!text) continue;
+			const idMatch = /\sid=(['"])(.*?)\1/i.exec(attrs) ?? /\sid=([^\s>]+)/i.exec(attrs);
+			let id = idMatch?.[2] ?? idMatch?.[1] ?? "";
+			if (!id) id = this.makeSlug(text, slugCounts);
+			toc.push({
+				id,
+				level,
+				text
+			});
+		}
+		return toc;
+	}
+	makeSlug(text, slugCounts) {
+		const baseSlug = text.toLowerCase().replace(/[^\w\s-]/g, "").trim().replace(/\s+/g, "-");
+		const count = slugCounts.get(baseSlug) ?? 0;
+		slugCounts.set(baseSlug, count + 1);
+		return count === 0 ? baseSlug : `${baseSlug}-${count}`;
+	}
+};
+//#endregion
+//#region packages/content/src/lib/get-content-files.ts
+/**
+* Returns the list of content files by filename with ?analog-content-list=true.
+* We use the query param to transform the return into an array of
+* just front matter attributes.
+*
+* @returns
+*/
+var getContentFilesList = () => {
+	return {};
+};
+/**
+* Returns the lazy loaded content files for lookups.
+*
+* @returns
+*/
+var getContentFiles = () => {
+	return {};
+};
+//#endregion
+//#region packages/content/src/lib/content-files-list-token.ts
+function getSlug(filename) {
+	const base = (filename.split(/[/\\]/).pop() || "").trim().replace(/\.[^./\\]+$/, "");
+	return base === "index" ? "" : base;
+}
+var CONTENT_FILES_LIST_TOKEN = new InjectionToken("@analogjs/content Content Files List", {
+	providedIn: "root",
+	factory() {
+		const contentFiles = getContentFilesList();
+		return Object.keys(contentFiles).map((filename) => {
+			const attributes = contentFiles[filename];
+			const slug = attributes["slug"];
+			return {
+				filename,
+				attributes,
+				slug: slug ? encodeURI(slug) : encodeURI(getSlug(filename))
+			};
+		});
+	}
+});
+//#endregion
+//#region packages/content/src/lib/content-files-token.ts
+var CONTENT_FILES_TOKEN = new InjectionToken("@analogjs/content Content Files", {
+	providedIn: "root",
+	factory() {
+		const allFiles = { ...getContentFiles() };
+		const contentFilesList = inject(CONTENT_FILES_LIST_TOKEN);
+		const lookup = {};
+		contentFilesList.forEach((item) => {
+			const contentFilename = item.filename.replace(/(.*?)\/content/, "/src/content");
+			const fileParts = contentFilename.split("/");
+			const filePath = fileParts.slice(0, fileParts.length - 1).join("/");
+			const fileNameParts = fileParts[fileParts.length - 1].split(".");
+			const ext = fileNameParts[fileNameParts.length - 1];
+			let slug = item.slug ?? "";
+			if (slug === "") slug = "index";
+			lookup[contentFilename] = `${slug.includes("/") ? `/src/content/${slug}` : `${filePath}/${slug}`}.${ext}`.replace(/\/{2,}/g, "/");
+		});
+		const objectUsingSlugAttribute = {};
+		Object.entries(allFiles).forEach((entry) => {
+			const filename = entry[0];
+			const value = entry[1];
+			const newFilename = lookup[filename.replace(/^\/(.*?)\/content/, "/src/content")];
+			if (newFilename !== void 0) {
+				const objectFilename = newFilename.replace(/^\/(.*?)\/content/, "/src/content");
+				objectUsingSlugAttribute[objectFilename] = value;
+			}
+		});
+		return objectUsingSlugAttribute;
+	}
+});
+new InjectionToken("@analogjs/content Content Files", {
+	providedIn: "root",
+	factory() {
+		return signal(inject(CONTENT_FILES_TOKEN));
+	}
+});
+//#endregion
+//#region packages/content/src/lib/render-task.service.ts
+var RenderTaskService = class RenderTaskService {
+	#pendingTasks = inject(ɵPendingTasksInternal);
+	addRenderTask() {
+		return this.#pendingTasks.add();
+	}
+	clearRenderTask(clear) {
+		if (typeof clear === "function") clear();
+		else if (typeof this.#pendingTasks.remove === "function") this.#pendingTasks.remove(clear);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "21.1.1",
+			ngImport: i0,
+			type: RenderTaskService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "21.1.1",
+			ngImport: i0,
+			type: RenderTaskService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "21.1.1",
+	ngImport: i0,
+	type: RenderTaskService,
+	decorators: [{ type: Injectable }]
+});
+//#endregion
+//#region packages/content/src/lib/inject-content-files.ts
+function injectContentFiles(filterFn) {
+	const renderTaskService = inject(RenderTaskService);
+	const task = renderTaskService.addRenderTask();
+	const allContentFiles = inject(CONTENT_FILES_LIST_TOKEN);
+	renderTaskService.clearRenderTask(task);
+	if (filterFn) return allContentFiles.filter(filterFn);
+	return allContentFiles;
+}
+function injectContentFilesMap() {
+	return inject(CONTENT_FILES_TOKEN);
+}
+//#endregion
+//#region packages/content/src/lib/content-file-loader.ts
+var CONTENT_FILE_LOADER = new InjectionToken("@analogjs/content/resource File Loader");
+function injectContentFileLoader() {
+	return inject(CONTENT_FILE_LOADER);
+}
+function withContentFileLoader() {
+	return {
+		provide: CONTENT_FILE_LOADER,
+		useFactory() {
+			return async () => injectContentFilesMap();
+		}
+	};
+}
+//#endregion
+//#region packages/content/src/lib/content-list-loader.ts
+var CONTENT_LIST_LOADER = new InjectionToken("@analogjs/content/resource List Loader");
+function injectContentListLoader() {
+	return inject(CONTENT_LIST_LOADER);
+}
+function withContentListLoader() {
+	return {
+		provide: CONTENT_LIST_LOADER,
+		useFactory() {
+			return async () => injectContentFiles();
+		}
+	};
+}
+//#endregion
+export { injectContentFileLoader as a, injectContentFilesMap as c, ContentRenderer as d, NoopContentRenderer as f, CONTENT_FILE_LOADER as i, RenderTaskService as l, injectContentListLoader as n, withContentFileLoader as o, withContentListLoader as r, injectContentFiles as s, CONTENT_LIST_LOADER as t, CONTENT_FILES_TOKEN as u };
+
+//# sourceMappingURL=content-list-loader.mjs.map

package/md4x/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/analogjs-content-md4x.mjs",
+  "typings": "../types/md4x/src/index.d.ts"
+}

package/mdc/package.json

@@ -0,0 +1,4 @@
+{
+  "module": "../fesm2022/analogjs-content-mdc.mjs",
+  "typings": "../types/mdc/src/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@analogjs/content",
-  "version": "3.0.0-alpha.10",
+  "version": "3.0.0-alpha.12",
   "description": "Content Rendering for Analog",
   "type": "module",
   "author": "Brandon Roberts <robertsbt@gmail.com>",
@@ -38,12 +38,16 @@
     "prismjs": "^1.29.0",
     "satori": "^0.10.14",
     "satori-html": "^0.3.2",
-    "sharp": "^0.33.5"
+    "sharp": "^0.33.5",
+    "md4x": ">=0.0.20"
   },
   "peerDependenciesMeta": {
     "@nx/devkit": {
       "optional": true
     },
+    "md4x": {
+      "optional": true
+    },
     "satori": {
       "optional": true
     },
@@ -90,6 +94,16 @@
       "import": "./fesm2022/analogjs-content.mjs",
       "default": "./fesm2022/analogjs-content.mjs"
     },
+    "./md4x": {
+      "types": "./types/md4x/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-md4x.mjs",
+      "default": "./fesm2022/analogjs-content-md4x.mjs"
+    },
+    "./mdc": {
+      "types": "./types/mdc/src/index.d.ts",
+      "import": "./fesm2022/analogjs-content-mdc.mjs",
+      "default": "./fesm2022/analogjs-content-mdc.mjs"
+    },
     "./og": {
       "types": "./types/og/src/index.d.ts",
       "import": "./fesm2022/analogjs-content-og.mjs",

package/src/lib/devtools/content-devtools-client.ts

@@ -0,0 +1,215 @@
+/**
+ * Client-side script for the Analog Content DevTools panel.
+ * Injected by the Vite plugin in dev mode only.
+ *
+ * @experimental Content DevTools is experimental and may change in future releases.
+ */
+
+interface DevToolsData {
+  renderer: string;
+  renderTimeMs: number;
+  frontmatter: Record<string, unknown>;
+  toc: Array<{ id: string; level: number; text: string }>;
+  contentLength: number;
+  headingCount: number;
+}
+
+const STORAGE_KEY = 'analog-content-devtools-open';
+
+// Cache the latest devtools payload at module level so events fired
+// during initial bootstrap (before the panel is created) are not lost.
+let latestDevToolsData: DevToolsData | null = null;
+let panelUpdateCallback: ((data: DevToolsData) => void) | null = null;
+
+window.addEventListener('analog-content-devtools-data', ((
+  e: CustomEvent<DevToolsData>,
+) => {
+  latestDevToolsData = e.detail;
+  if (panelUpdateCallback) {
+    panelUpdateCallback(e.detail);
+  }
+}) as EventListener);
+
+function createPanel(): HTMLElement {
+  const root = document.createElement('div');
+  root.id = 'analog-content-devtools';
+  root.innerHTML = `
+    <button class="acd-toggle" title="Analog Content DevTools">
+      <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8l-6-6zm-1 2l5 5h-5V4zM6 20V4h5v7h7v9H6z"/>
+        <path d="M8 13h8v1H8zm0 3h6v1H8z" opacity=".6"/>
+      </svg>
+    </button>
+    <div class="acd-panel" style="display:none">
+      <div class="acd-header">
+        <span>Analog Content DevTools <span class="acd-badge acd-badge-experimental">experimental</span></span>
+      </div>
+      <div class="acd-tabs">
+        <button class="acd-tab" data-tab="overview" data-active="true">Overview</button>
+        <button class="acd-tab" data-tab="frontmatter">Frontmatter</button>
+        <button class="acd-tab" data-tab="toc">TOC</button>
+      </div>
+      <div class="acd-body">
+        <div class="acd-empty">No content data available. Navigate to a content page.</div>
+      </div>
+    </div>
+  `;
+  return root;
+}
+
+function renderOverview(data: DevToolsData): string {
+  const speedClass =
+    data.renderTimeMs < 5
+      ? 'acd-fast'
+      : data.renderTimeMs > 50
+        ? 'acd-slow'
+        : '';
+  return `
+    <div class="acd-section">
+      <div class="acd-section-title">Renderer</div>
+      <div class="acd-kv">
+        <span class="acd-key">Active</span>
+        <span class="acd-value"><span class="acd-badge acd-badge-renderer">${data.renderer}</span></span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Render time</span>
+        <span class="acd-value ${speedClass}">${data.renderTimeMs.toFixed(2)}ms</span>
+      </div>
+    </div>
+    <div class="acd-section">
+      <div class="acd-section-title">Content</div>
+      <div class="acd-kv">
+        <span class="acd-key">Length</span>
+        <span class="acd-value">${data.contentLength.toLocaleString()} chars</span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Headings</span>
+        <span class="acd-value">${data.headingCount}</span>
+      </div>
+      <div class="acd-kv">
+        <span class="acd-key">Frontmatter keys</span>
+        <span class="acd-value">${Object.keys(data.frontmatter).length}</span>
+      </div>
+    </div>
+  `;
+}
+
+function renderFrontmatter(data: DevToolsData): string {
+  const keys = Object.keys(data.frontmatter);
+  if (keys.length === 0) {
+    return '<div class="acd-empty">No frontmatter found.</div>';
+  }
+  return `
+    <div class="acd-section">
+      <div class="acd-section-title">Frontmatter attributes</div>
+      <div class="acd-pre">${escapeHtml(JSON.stringify(data.frontmatter, null, 2))}</div>
+    </div>
+  `;
+}
+
+function renderToc(data: DevToolsData): HTMLElement {
+  if (data.toc.length === 0) {
+    const empty = document.createElement('div');
+    empty.className = 'acd-empty';
+    empty.textContent = 'No headings found.';
+    return empty;
+  }
+  const section = document.createElement('div');
+  section.className = 'acd-section';
+  const title = document.createElement('div');
+  title.className = 'acd-section-title';
+  title.textContent = `Table of Contents (${data.toc.length} headings)`;
+  section.appendChild(title);
+
+  for (const h of data.toc) {
+    const item = document.createElement('div');
+    item.className = 'acd-toc-item';
+    item.style.paddingLeft = `${(h.level - 1) * 12}px`;
+    const anchor = document.createElement('a');
+    anchor.setAttribute('href', `#${encodeURIComponent(h.id)}`);
+    anchor.textContent = `${'#'.repeat(h.level)} ${h.text}`;
+    item.appendChild(anchor);
+    section.appendChild(item);
+  }
+
+  return section;
+}
+
+function escapeHtml(str: string): string {
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;');
+}
+
+function initDevTools() {
+  if (document.getElementById('analog-content-devtools')) return;
+
+  const panel = createPanel();
+  document.body.appendChild(panel);
+
+  const toggle = panel.querySelector('.acd-toggle') as HTMLElement;
+  const panelEl = panel.querySelector('.acd-panel') as HTMLElement;
+  const body = panel.querySelector('.acd-body') as HTMLElement;
+  const tabs = panel.querySelectorAll('.acd-tab');
+
+  let isOpen = localStorage.getItem(STORAGE_KEY) === 'true';
+  let activeTab = 'overview';
+  let currentData: DevToolsData | null = latestDevToolsData;
+
+  function updateVisibility() {
+    panelEl.style.display = isOpen ? 'flex' : 'none';
+    localStorage.setItem(STORAGE_KEY, String(isOpen));
+  }
+
+  function updateBody() {
+    if (!currentData) {
+      body.innerHTML =
+        '<div class="acd-empty">No content data available. Navigate to a content page.</div>';
+      return;
+    }
+    switch (activeTab) {
+      case 'overview':
+        body.innerHTML = renderOverview(currentData);
+        break;
+      case 'frontmatter':
+        body.innerHTML = renderFrontmatter(currentData);
+        break;
+      case 'toc':
+        body.replaceChildren(renderToc(currentData));
+        break;
+    }
+  }
+
+  toggle.addEventListener('click', () => {
+    isOpen = !isOpen;
+    updateVisibility();
+  });
+
+  tabs.forEach((tab) => {
+    tab.addEventListener('click', () => {
+      activeTab = (tab as HTMLElement).dataset['tab'] || 'overview';
+      tabs.forEach((t) =>
+        (t as HTMLElement).setAttribute('data-active', String(t === tab)),
+      );
+      updateBody();
+    });
+  });
+
+  // Wire the module-level listener to update the panel
+  panelUpdateCallback = (data: DevToolsData) => {
+    currentData = data;
+    updateBody();
+  };
+
+  updateVisibility();
+  updateBody();
+}
+
+// Init when DOM is ready
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initDevTools);
+} else {
+  initDevTools();
+}