@hyvor/design 2.1.3 → 2.1.5

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/TabNav/TabNav.svelte

@@ -1,17 +1,49 @@
 <script lang="ts">
 	import { setContext } from 'svelte';
+	import type { TabNavState } from './tabnav.js';
 
-	interface Props {
-		basePath?: string;
+	type Props = (
+		| {
+				basePath?: undefined;
+				pathname?: undefined;
+				goto?: undefined;
+		  }
+		| {
+				basePath: string;
+				// SvelteKit's `page.url.pathname`, e.g. `import { page } from '$app/state'`.
+				pathname: string;
+				// SvelteKit's `goto`, e.g. `import { goto } from '$app/navigation'`.
+				goto: (url: string, opts?: { replaceState?: boolean }) => void;
+		  }
+	) & {
 		replaceState?: boolean;
 		children?: import('svelte').Snippet;
-	}
+	};
+
+	let { children, basePath, replaceState = false, pathname: pathnameProp, goto }: Props = $props();
+
+	let fallbackPathname = $state(typeof window !== 'undefined' ? window.location.pathname : '');
+
+	$effect(() => {
+		if (!basePath || pathnameProp !== undefined) return;
 
-	let { children, basePath, replaceState = false }: Props = $props();
+		const onPopState = () => {
+			fallbackPathname = window.location.pathname;
+		};
+		window.addEventListener('popstate', onPopState);
+		return () => window.removeEventListener('popstate', onPopState);
+	});
 
-	const tabNavState = {
+	const tabNavState: TabNavState = {
 		basePath,
-		replaceState
+		replaceState,
+		goto,
+		get pathname() {
+			return pathnameProp ?? fallbackPathname;
+		},
+		set pathname(value: string) {
+			fallbackPathname = value;
+		}
 	};
 
 	setContext('tab-nav-state', tabNavState);

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

@@ -1,8 +1,17 @@
-interface Props {
-    basePath?: string;
+type Props = ({
+    basePath?: undefined;
+    pathname?: undefined;
+    goto?: undefined;
+} | {
+    basePath: string;
+    pathname: string;
+    goto: (url: string, opts?: {
+        replaceState?: boolean;
+    }) => void;
+}) & {
     replaceState?: boolean;
     children?: import('svelte').Snippet;
-}
+};
 declare const TabNav: import("svelte").Component<Props, {}, "">;
 type TabNav = ReturnType<typeof TabNav>;
 export default TabNav;

package/dist/components/TabNav/TabNavItem.svelte

@@ -1,7 +1,5 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
-	import { page } from '$app/state';
-	import { goto } from '$app/navigation';
 	import type { TabNavState } from './tabnav.js';
 
 	interface Props {
@@ -28,8 +26,7 @@
 		if (active) return true;
 
 		if (tabNavState.basePath) {
-			const currentUrl = page.url.pathname;
-			return currentUrl === getTabPath();
+			return tabNavState.pathname === getTabPath();
 		}
 
 		return false;
@@ -37,7 +34,14 @@
 
 	function handleClick(event: MouseEvent) {
 		if (tabNavState.basePath) {
-			goto(getTabPath());
+			const path = getTabPath();
+
+			if (tabNavState.goto) {
+				tabNavState.goto(path, { replaceState: tabNavState.replaceState });
+				tabNavState.pathname = path;
+			} else {
+				window.location.href = path;
+			}
 		}
 		onclick?.(event);
 	}

package/dist/components/TabNav/tabnav.d.ts

@@ -1,4 +1,8 @@
 export interface TabNavState {
     basePath: string | undefined;
     replaceState: boolean;
+    pathname: string;
+    goto?: (url: string, opts?: {
+        replaceState?: boolean;
+    }) => void;
 }

package/dist/components/index.d.ts

@@ -12,6 +12,8 @@ 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 { markdownPlugin } from './markdown/markdown.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,8 @@ 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 { markdownPlugin } from './markdown/markdown.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/markdown/markdown.js

@@ -0,0 +1,17 @@
+import { mdsvex, escapeSvelte } from 'mdsvex';
+import { highlightCode } from '../CodeBlock/getCode.js';
+
+// this is a JS file because we can use it in svelte.config.js locally
+
+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.3",
+	"version": "2.1.5",
 	"license": "MIT",
 	"private": false,
 	"repository": {
@@ -65,6 +65,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"