Merge pull request #39 from huntabyte/docs

.changeset/little-tigers-design.md

@@ -0,0 +1,5 @@
+---
+"@huntabyte/primitives": patch
+---
+
+- Update button events

mdsvex.config.js

@@ -0,0 +1,138 @@
+import remarkGfm from "remark-gfm";
+import rehypePrettyCode from "rehype-pretty-code";
+import { fileURLToPath } from "url";
+import { getHighlighter } from "shikiji";
+import { toHtml } from "hast-util-to-html";
+import { visit } from "unist-util-visit";
+import { escapeSvelte } from "@huntabyte/mdsvex";
+import { resolve } from "path";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+
+/**
+ * @type {import('rehype-pretty-code').Options}
+ */
+const prettyCodeOptions = {
+	theme: "github-dark",
+	keepBackground: false,
+	onVisitLine(node) {
+		if (node.children.length === 0) {
+			node.children = { type: "text", value: " " };
+		}
+	},
+	onVisitHighlightedLine(node) {
+		node.properties.className = ["line--highlighted"];
+	},
+	onVisitHighlightedWord(node) {
+		node.properties.className = ["word--highlighted"];
+	},
+	getHighlighter: (options) => {
+		return getHighlighter({
+			...options,
+			langs: ["typescript", "javascript", "bash", "json", "svelte", "css"]
+		});
+	}
+};
+
+/** @type {import('@huntabyte/mdsvex').MdsvexOptions} */
+export const mdsvexOptions = {
+	extensions: [".md"],
+	layout: resolve(__dirname, "./src/components/markdown/layout.svelte"),
+	smartypants: {
+		quotes: false,
+		ellipses: false,
+		backticks: false,
+		dashes: false
+	},
+	remarkPlugins: [remarkGfm],
+	rehypePlugins: [
+		rehypeComponentPreToPre,
+		[rehypePrettyCode, prettyCodeOptions],
+		rehypeHandleMetadata,
+		rehypeRenderCode,
+		rehypePreToComponentPre
+	]
+};
+
+function rehypeComponentPreToPre() {
+	return async (tree) => {
+		visit(tree, (node) => {
+			if (node?.type === "element" && node?.tagName === "Components.pre") {
+				node.tagName = "pre";
+			}
+		});
+	};
+}
+
+function rehypePreToComponentPre() {
+	return async (tree) => {
+		visit(tree, (node) => {
+			if (node?.type === "element" && node?.tagName === "pre") {
+				node.tagName = "Components.pre";
+			}
+		});
+	};
+}
+
+function rehypeHandleMetadata() {
+	return async (tree) => {
+		visit(tree, (node) => {
+			if (node?.type === "element" && node?.tagName === "div") {
+				if (!("data-rehype-pretty-code-fragment" in node.properties)) {
+					return;
+				}
+
+				const preElement = node.children.at(-1);
+				if (preElement.tagName !== "pre") {
+					return;
+				}
+
+				if (node.children.at(0).tagName === "div") {
+					node.properties["data-metadata"] = "";
+				}
+			}
+		});
+	};
+}
+
+function rehypeRenderCode() {
+	return async (tree) => {
+		let counter = 0;
+		visit(tree, (node) => {
+			if (
+				node?.type === "element" &&
+				(node?.tagName === "Components.pre" || node?.tagName === "pre")
+			) {
+				counter++;
+
+				const isNonPP = counter % 2 === 0;
+				if (isNonPP) {
+					node.properties = {
+						...node.properties,
+						"data-non-pp": ""
+					};
+				}
+
+				/** @type HTMLElement */
+				const codeEl = node.children[0];
+				if (codeEl.tagName !== "code") {
+					return;
+				}
+
+				const meltString = tabsToSpaces(
+					toHtml(codeEl, {
+						allowDangerousCharacters: true,
+						allowDangerousHtml: true
+					})
+				);
+
+				codeEl.type = "raw";
+				codeEl.value = `{@html \`${escapeSvelte(meltString)}\`}`;
+			}
+		});
+	};
+}
+
+function tabsToSpaces(code) {
+	return code.replaceAll("    ", "  ").replaceAll("\t", "  ");
+}

package.json

@@ -31,6 +31,7 @@
 	],
 	"devDependencies": {
 		"@changesets/cli": "^2.26.2",
+		"@huntabyte/mdsvex": "0.16.5",
 		"@melt-ui/pp": "^0.1.2",
 		"@playwright/test": "^1.28.1",
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -44,18 +45,26 @@
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"esm-env": "^1.0.0",
+		"hast-util-to-html": "^9.0.0",
+		"lucide-svelte": "^0.268.0",
 		"postcss": "^8.4.24",
 		"postcss-load-config": "^4.0.1",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
 		"publint": "^0.1.9",
+		"rehype-pretty-code": "^0.10.0",
+		"remark-gfm": "^3.0.1",
+		"shikiji": "^0.4.0",
 		"svelte": "^4.0.5",
 		"svelte-check": "^3.4.3",
 		"svelte-sequential-preprocessor": "^2.0.1",
+		"svelte-wrap-balancer": "^0.0.4",
 		"tailwind-variants": "^0.1.13",
 		"tailwindcss": "^3.3.2",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
+		"unist-util-visit": "^5.0.0",
 		"vite": "^4.4.2",
 		"vitest": "^0.32.2"
 	},