next: replace contentlayer with velite (#733)

.gitignore

@@ -73,4 +73,5 @@ web_modules/
 .env.test.local
 .env.production.local
 .env.local
-.contentlayer
+.contentlayer
+sites/docs/.velite

.prettierignore

@@ -15,6 +15,7 @@ yarn.lock
 package.json
 .vercel
 .contentlayer
+.velite
 **/dist
 
 CHANGELOG.md

eslint.config.js

@@ -1,6 +1,6 @@
 import config, { DEFAULT_IGNORES } from "@huntabyte/eslint-config";
 
-const ignores = ["**/extended-types"];
+const ignores = ["**/extended-types", "**/.velite"];
 
 export default config({ svelte: true, ignores: [...DEFAULT_IGNORES, ...ignores] })
 	.override("antfu/typescript/rules", {

sites/docs/.gitignore

@@ -10,6 +10,7 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 .vercel
+.velite
 
 ## contentlayer build output
 .contentlayer

sites/docs/.prettierignore

@@ -16,6 +16,7 @@ yarn.lock
 package.json
 .vercel
 .contentlayer
+.velite
 dist
 
 vite.config.js.timestamp-*

sites/docs/mdsx.config.js

@@ -157,10 +157,10 @@ export function rehypeComponentExample() {
 			// @ts-expect-error - we're using an untyped node here
 			if (node?.type === "raw" && node?.value?.startsWith("<ComponentPreview")) {
 				const currNode = node;
-				// @ts-expect-error - we're using an untyped 'raw' node
+				// @ts-expect-error - we're using an untyped node here
 				const nameMatch = currNode.value.match(nameRegex);
 				const name = nameMatch ? nameMatch[1] : null;
-				// @ts-expect-error - we're using an untyped 'raw' node
+				// @ts-expect-error - we're using an untyped node here
 				const compMatch = currNode.value.match(compRegex);
 				const comp = compMatch ? compMatch[1] : null;
 

sites/docs/other/build-search-data.js

@@ -3,12 +3,7 @@ import { fileURLToPath } from "node:url";
 import { writeFileSync } from "node:fs";
 import { resolve } from "node:path";
 import removeMd from "remove-markdown";
-import {
-	allComponentDocs,
-	allDocs,
-	allTypeHelperDocs,
-	allUtilityDocs,
-} from "../.contentlayer/generated/index.mjs";
+import { componentDocs, docs, typeHelperDocs, utilityDocs } from "../.velite/index.js";
 
 const __dirname = fileURLToPath(new URL(".", import.meta.url));
 
@@ -23,30 +18,30 @@ function cleanMd(md) {
 }
 
 export function buildDocsIndex() {
-	const components = allComponentDocs.map((doc) => ({
+	const components = componentDocs.map((doc) => ({
 		title: doc.title,
-		content: cleanMd(doc.body.raw),
+		content: cleanMd(doc.raw),
 		description: doc.description,
 		href: `/docs/components/${doc.slug}`,
 	}));
 
-	const utilities = allUtilityDocs.map((doc) => ({
+	const utilities = utilityDocs.map((doc) => ({
 		title: doc.title,
-		content: cleanMd(doc.body.raw),
+		content: cleanMd(doc.raw),
 		description: doc.description,
 		href: `/docs/utilities/${doc.slug}`,
 	}));
 
-	const typeHelpers = allTypeHelperDocs.map((doc) => ({
+	const typeHelpers = typeHelperDocs.map((doc) => ({
 		title: doc.title,
-		content: cleanMd(doc.body.raw),
+		content: cleanMd(doc.raw),
 		description: doc.description,
 		href: `/docs/type-helpers/${doc.slug}`,
 	}));
 
-	const mainPages = allDocs.map((doc) => ({
+	const mainPages = docs.map((doc) => ({
 		title: doc.title,
-		content: cleanMd(doc.body.raw),
+		content: cleanMd(doc.raw),
 		description: doc.description,
 		href: `/docs${doc.slugFull}`,
 	}));

sites/docs/other/update-velite-output.js

@@ -0,0 +1,38 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const dtsPath = join(__dirname, "../.velite/index.d.ts");
+const indexPath = join(__dirname, "../.velite/index.js");
+
+async function replaceContents() {
+	const data = await readFile(dtsPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+	});
+	if (!data) return;
+
+	const updatedContent = data.replace("'../velite.config'", "'../velite.config.js'");
+	if (updatedContent === data) return;
+
+	await writeFile(dtsPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+}
+
+async function replaceIndexContents() {
+	const data = await readFile(indexPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+	});
+	if (!data) return;
+
+	const updatedContent = data.replaceAll(".json'", ".json' with { type: 'json' }");
+	if (updatedContent === data) return;
+
+	await writeFile(indexPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+}
+
+await replaceContents();
+await replaceIndexContents();

sites/docs/other/watch-velite-output.js

@@ -0,0 +1,67 @@
+import { watch } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+// Configuration
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const dtsPath = join(__dirname, "../.velite/index.d.ts");
+const indexPath = join(__dirname, "../.velite/index.js");
+let isUpdatingDts = false;
+let isUpdatingIndex = false;
+
+async function replaceIndexDtsContents() {
+	isUpdatingDts = true;
+
+	const data = await readFile(dtsPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+		isUpdatingDts = false;
+	});
+	if (!data) return;
+
+	const updatedContent = data.replace("'../velite.config'", "'../velite.config.js'");
+	if (updatedContent === data) {
+		isUpdatingDts = false;
+		return;
+	}
+
+	await writeFile(dtsPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+	isUpdatingDts = false;
+}
+
+async function replaceIndexContents() {
+	isUpdatingIndex = true;
+
+	const data = await readFile(indexPath, "utf8").catch((err) => {
+		console.error("Error reading file:", err);
+		isUpdatingIndex = false;
+	});
+	if (!data) return;
+
+	const updatedContent = data.replaceAll(".json'", ".json' with { type: 'json' }");
+	if (updatedContent === data) {
+		isUpdatingIndex = false;
+		return;
+	}
+
+	await writeFile(indexPath, updatedContent, "utf8").catch((err) => {
+		console.error("Error writing file:", err);
+	});
+	isUpdatingIndex = false;
+}
+
+watch(dtsPath, async (eventType, filename) => {
+	if (eventType === "change" && !isUpdatingDts) {
+		console.info(`File ${filename} has been modified`);
+		replaceIndexDtsContents();
+	}
+});
+
+watch(indexPath, async (eventType, filename) => {
+	if (eventType === "change" && !isUpdatingIndex) {
+		console.info(`File ${filename} has been modified`);
+		replaceIndexContents();
+	}
+});

sites/docs/package.json

@@ -5,12 +5,12 @@
 	"license": "MIT",
 	"private": true,
 	"scripts": {
-		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\"",
-		"dev:content": "contentlayer dev",
+		"dev": "concurrently \"pnpm:dev:content\" \"pnpm:dev:svelte\" \"pnpm:replace:velite\"",
+		"dev:content": "velite dev --watch",
 		"dev:svelte": "vite dev",
-		"build": "contentlayer build && pnpm build:search && vite build",
-		"build:content": "contentlayer build",
-		"build:content-cachebust": "contentlayer build --clearCache",
+		"build": "velite && node ./other/update-velite-output.js && pnpm build:search && vite build",
+		"replace:velite": "node ./other/watch-velite-output.js",
+		"build:content": "velite",
 		"preview": "vite preview",
 		"build:search": "node ./other/build-search-data.js",
 		"check": "pnpm build:content && svelte-kit sync && svelte-check --tsconfig ./tsconfig.json"
@@ -29,7 +29,6 @@
 		"autoprefixer": "^10.4.17",
 		"clsx": "^2.1.0",
 		"concurrently": "^8.2.2",
-		"contentlayer": "^0.3.4",
 		"eruda": "^3.0.1",
 		"marked": "^14.1.2",
 		"mdsx": "^0.0.6",
@@ -54,6 +53,7 @@
 		"unified": "^11.0.4",
 		"unist-builder": "^4.0.0",
 		"unist-util-visit": "^5.0.0",
+		"velite": "^0.1.1",
 		"vite": "^5.2.8"
 	},
 	"type": "module",

sites/docs/src/lib/config/navigation.ts

@@ -7,11 +7,7 @@ import CalendarBlank from "phosphor-svelte/lib/CalendarBlank";
 import CableCar from "phosphor-svelte/lib/CableCar";
 import Leaf from "phosphor-svelte/lib/Leaf";
 import Joystick from "phosphor-svelte/lib/Joystick";
-import {
-	allComponentDocs,
-	allTypeHelperDocs,
-	allUtilityDocs,
-} from "../../../.contentlayer/generated/index.mjs";
+import { componentDocs, typeHelperDocs, utilityDocs } from "$content/index.js";
 
 export type NavItem = {
 	title: string;
@@ -35,7 +31,7 @@ export type Navigation = {
 	sidebar: SidebarNavItem[];
 };
 
-const filteredComponents = allComponentDocs;
+const filteredComponents = componentDocs;
 
 /**
  * Generates the navigation items for the components section of the sidebar.
@@ -62,7 +58,7 @@ function generateComponentsNav() {
 function generateUtilitiesNav(): SidebarNavItem[] {
 	const utilityNavItems: SidebarNavItem[] = [];
 
-	for (const comp of allUtilityDocs) {
+	for (const comp of utilityDocs) {
 		utilityNavItems.push({
 			title: comp.title,
 			href: `/docs/utilities/${comp.slug}`,
@@ -80,7 +76,7 @@ function generateUtilitiesNav(): SidebarNavItem[] {
 function generateTypeHelpersNav(): SidebarNavItem[] {
 	const utilityNavItems: SidebarNavItem[] = [];
 
-	for (const comp of allTypeHelperDocs) {
+	for (const comp of typeHelperDocs) {
 		utilityNavItems.push({
 			title: comp.title,
 			href: `/docs/type-helpers/${comp.slug}`,