@hyvor/design 2.1.4 → 2.1.6-beta.1

package/dist/components/CodeBlock/CodeBlock.svelte

@@ -2,7 +2,8 @@
 	import Button from '../Button/Button.svelte';
 	import IconCopy from '@hyvor/icons/IconCopy';
 	import toast from '../Toast/toast.js';
-	import { getCode, sanitizeLines, type Language } from './getCode.js';
+	import { highlightCode, sanitizeLines } from './getCode.js';
+	import type { Language } from './types.codeblock.js';
 
 	interface Props {
 		code: string;
@@ -19,22 +20,22 @@
 	}
 </script>
 
-<div class="code-container">
+<div class="hds-code-block">
 	<div class="copy-button">
 		<Button color="input" size="x-small" onclick={copyToClipboard}>
 			<IconCopy size={10} />
 		</Button>
 	</div>
-	{@html await getCode(sanitizedCode, language)}
+	{@html await highlightCode(sanitizedCode, language)}
 </div>
 
 <style>
 	/*styles for CodeBlock component */
-	.code-container {
+	.hds-code-block {
 		position: relative;
 	}
 
-	.code-container .copy-button {
+	.copy-button {
 		position: absolute;
 		top: 0px;
 		right: 12px;
@@ -45,33 +46,4 @@
 	.copy-button :global(button) {
 		border: 1px solid var(--border);
 	}
-
-	.code-container :global(pre) {
-		text-align: left;
-		white-space: pre;
-		word-spacing: normal;
-		word-break: normal;
-		word-wrap: normal;
-		overflow: auto;
-		border-radius: 20px;
-		padding: 20px;
-		line-height: 1.2;
-		background-color: #f4f2f0 !important;
-	}
-
-	.code-container :global(pre code) {
-		all: unset;
-		font-size: 14px;
-		line-height: 1.5 !important;
-		tab-size: 4;
-		hyphens: none;
-	}
-
-	:global(:root.dark .shiki, :root.dark .shiki span) {
-		color: var(--shiki-dark) !important;
-		background-color: var(--shiki-dark-bg) !important;
-		font-style: var(--shiki-dark-font-style) !important;
-		font-weight: var(--shiki-dark-font-weight) !important;
-		text-decoration: var(--shiki-dark-text-decoration) !important;
-	}
 </style>

package/dist/components/CodeBlock/CodeBlock.svelte.d.ts

@@ -1,4 +1,4 @@
-import { type Language } from './getCode.js';
+import type { Language } from './types.codeblock.js';
 interface Props {
     code: string;
     language?: Language | null;

package/dist/components/CodeBlock/getCode.d.ts

@@ -1,3 +1,11 @@
-export type Language = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php' | 'sh' | string;
-export declare function sanitizeLines(code: string): string;
-export declare function getCode(code: string, language: Language | null): Promise<string>;
+/**
+ * @param {string} code
+ * @returns {string}
+ */
+export function sanitizeLines(code: string): string;
+/**
+ * @param {string} code
+ * @param {import('./types.codeblock.ts').Language | null} language
+ * @returns {Promise<string>}
+ */
+export function highlightCode(code: string, language: import("./types.codeblock.ts").Language | null): Promise<string>;

package/dist/components/CodeBlock/getCode.js

@@ -1,33 +1,55 @@
 import { codeToHtml } from 'shiki';
+
+/**
+ * @param {string} code
+ * @returns {string}
+ */
 export function sanitizeLines(code) {
-    let ret = code;
-    // remove the first empty line
-    ret = ret.replace(/^[^\S\r\n]*\n/, '');
-    // remove the last empty line
-    ret = ret.replace(/\n[^\S\r\n]*$/, '');
-    let lines = ret.split('\n');
-    let indent = null; // number of spaces to remove from each line
-    lines = lines.map((line) => {
-        if (indent === null) {
-            // find the indent
-            const match = line.match(/^(\s*)/);
-            indent = match ? match[1].length : 0;
-        }
-        if (line.substring(0, indent).trim() !== '') {
-            return line;
-        }
-        // remove the indent
-        line = line.substring(indent);
-        return line;
-    });
-    return lines.join('\n');
+	let ret = code;
+
+	// remove the first empty line
+	ret = ret.replace(/^[^\S\r\n]*\n/, '');
+	// remove the last empty line
+	ret = ret.replace(/\n[^\S\r\n]*$/, '');
+
+	let lines = ret.split('\n');
+
+	/**
+	 * @type {null | number}
+	 */
+	let indent = null; // number of spaces to remove from each line
+
+	lines = lines.map((line) => {
+		if (indent === null) {
+			// find the indent
+			const match = line.match(/^(\s*)/);
+			indent = match ? match[1].length : 0;
+		}
+
+		if (line.substring(0, indent).trim() !== '') {
+			return line;
+		}
+
+		// remove the indent
+		line = line.substring(indent);
+
+		return line;
+	});
+
+	return lines.join('\n');
 }
-export async function getCode(code, language) {
-    return await codeToHtml(code, {
-        lang: language || 'text',
-        themes: {
-            light: 'vitesse-light',
-            dark: 'nord'
-        }
-    });
+
+/**
+ * @param {string} code
+ * @param {import('./types.codeblock.ts').Language | null} language
+ * @returns {Promise<string>}
+ */
+export async function highlightCode(code, language) {
+	return await codeToHtml(code, {
+		lang: language || 'text',
+		themes: {
+			light: 'vitesse-light',
+			dark: 'nord'
+		}
+	});
 }

package/dist/components/CodeBlock/types.codeblock.d.ts

@@ -0,0 +1 @@
+export type Language = 'html' | 'css' | 'js' | 'ts' | 'yaml' | 'json' | 'svelte' | 'jsx' | 'php' | 'sh' | string;

package/dist/components/CodeBlock/types.codeblock.js

@@ -0,0 +1 @@
+export {};

package/dist/components/index.d.ts

@@ -12,6 +12,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { highlightCode } from './CodeBlock/getCode.js';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';

package/dist/components/index.js

@@ -12,6 +12,7 @@ export { default as BoxShadowPicker } from './BoxShadowPicker/BoxShadowPicker.sv
 export { default as Callout } from './Callout/Callout.svelte';
 export { default as Checkbox } from './Checkbox/Checkbox.svelte';
 export { default as CodeBlock } from './CodeBlock/CodeBlock.svelte';
+export { highlightCode } from './CodeBlock/getCode.js';
 export { default as TabbedCodeBlock } from './CodeBlock/TabbedCodeBlock.svelte';
 export { default as ColorPicker } from './ColorPicker/ColorPicker.svelte';
 export { default as ConsoleLoader } from './ConsoleLoader/ConsoleLoader.svelte';

package/dist/dev/markdown.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @returns {import('svelte/compiler').PreprocessorGroup}
+ */
+export function markdownPlugin(): import("svelte/compiler").PreprocessorGroup;

package/dist/dev/markdown.js

@@ -0,0 +1,20 @@
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import { highlightCode } from '../components/CodeBlock/getCode.js';
+
+// this is a JS file because we can use it in svelte.config.js locally
+
+/**
+ * @returns {import('svelte/compiler').PreprocessorGroup}
+ */
+export function markdownPlugin() {
+	return mdsvex({
+		extensions: ['.md'],
+		highlight: {
+			highlighter: async (code, lang) => {
+				const highlitedCode = await highlightCode(code, lang || null);
+				const html = `<div class="hds-code-block">${highlitedCode}</div>`;
+				return escapeSvelte(html);
+			}
+		}
+	});
+}

package/dist/index.css

@@ -61,3 +61,34 @@ a {
 	color: var(--link);
 	text-decoration: underline;
 }
+
+/** code block styles */
+.hds-code-block pre {
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	overflow: auto;
+	border-radius: 20px;
+	padding: 20px;
+	line-height: 1.2;
+	background-color: #f4f2f0 !important;
+}
+
+.hds-code-block pre code {
+	all: unset;
+	font-size: 14px;
+	line-height: 1.5 !important;
+	tab-size: 4;
+	hyphens: none;
+}
+
+:root.dark .shiki,
+:root.dark .shiki span {
+	color: var(--shiki-dark) !important;
+	background-color: var(--shiki-dark-bg) !important;
+	font-style: var(--shiki-dark-font-style) !important;
+	font-weight: var(--shiki-dark-font-weight) !important;
+	text-decoration: var(--shiki-dark-text-decoration) !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "2.1.4",
+	"version": "2.1.6-beta.1",
 	"license": "MIT",
 	"private": false,
 	"repository": {
@@ -25,6 +25,10 @@
 			"types": "./dist/components/index.d.ts",
 			"svelte": "./dist/components/index.js"
 		},
+		"./dev": {
+			"types": "./dist/dev/markdown.d.ts",
+			"default": "./dist/dev/markdown.js"
+		},
 		"./marketing": {
 			"types": "./dist/marketing/index.d.ts",
 			"svelte": "./dist/marketing/index.js"
@@ -65,6 +69,7 @@
 		"deepmerge-ts": "^7.1.5",
 		"emojibase-data": "^17.0.0",
 		"intl-messageformat": "^11.1.2",
+		"mdsvex": "^0.12.8",
 		"shiki": "^3.22.0",
 		"svelte-awesome-color-picker": "^4.1.1",
 		"tocbot": "^4.36.4"