From 3602fe0250bc47684161ba6f86da6226d3a86a03 Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sat, 20 Jan 2024 20:39:00 +0100 Subject: [PATCH 1/3] Add package manager dropdown, comment mdsvex --- apps/www/mdsvex.config.js | 21 +++- .../lib/components/docs/copy-button.svelte | 113 +++++++++++++++--- 2 files changed, 112 insertions(+), 22 deletions(-) diff --git a/apps/www/mdsvex.config.js b/apps/www/mdsvex.config.js index 375da47dd..6bf5bee1c 100644 --- a/apps/www/mdsvex.config.js +++ b/apps/www/mdsvex.config.js @@ -24,10 +24,18 @@ export const mdsvexOptions = { backticks: false, dashes: false }, - remarkPlugins: [remarkGfm, codeImport], + remarkPlugins: [ + // Github Flavored Markdown style + remarkGfm, + // Import code from other files and render them into code blocks + codeImport + ], rehypePlugins: [ + // Add IDs to headings rehypeSlug, + // Get component's source code from the 'name' attribute and render it rehypeComponentExample, + // Parse code blocks and add metadata to them () => (tree) => { visit(tree, (node) => { if (node?.type === "element" && node?.tagName === "pre") { @@ -52,8 +60,10 @@ export const mdsvexOptions = { } }); }, + // Replace `Component.pre` tags with `pre` tags. rehypeComponentPreToPre, [ + // Prettify code blocks rehypePrettyCode, { theme: JSON.parse( @@ -72,8 +82,11 @@ export const mdsvexOptions = { } } ], + // Add metadata tags to code blocks rehypeHandleMetadata, + // Render code into Components.pre or pre tags rehypeRenderCode, + // Replace back `pre` tags with `Component.pre` tags rehypePreToComponentPre ] }; @@ -144,6 +157,7 @@ export function rehypeComponentExample() { }); }; } + function rehypeHandleMetadata() { return async (tree) => { visit(tree, (node) => { @@ -181,13 +195,10 @@ function rehypeComponentPreToPre() { if (node?.type === "element" && node?.tagName === "Components.pre") { node.tagName = "pre"; } - - if (node?.type === "element" && node?.tagName === "pre") { - // - } }); }; } + function rehypePreToComponentPre() { return async (tree) => { visit(tree, (node) => { diff --git a/apps/www/src/lib/components/docs/copy-button.svelte b/apps/www/src/lib/components/docs/copy-button.svelte index f0f4d45a8..d873bda4f 100644 --- a/apps/www/src/lib/components/docs/copy-button.svelte +++ b/apps/www/src/lib/components/docs/copy-button.svelte @@ -2,12 +2,52 @@ import { clickToCopyAction } from "svelte-legos"; import { cn } from "$lib/utils"; import { Check, Copy } from "radix-icons-svelte"; + import { Button } from "@/registry/default/ui/button"; + import * as DropdownMenu from "@/registry/default/ui/dropdown-menu"; let copied = false; + let commands: Record<"npm" | "yarn" | "pnpm" | "bun", string> = { + npm: "", + yarn: "", + pnpm: "", + bun: "" + }; let className: string | undefined | null = undefined; export let value = ""; export { className as class }; + $: if (value) { + // npm install + if (value.startsWith("npm install")) { + commands = { + npm: value, + yarn: value.replace("npm install", "yarn add"), + pnpm: value.replace("npm install", "pnpm add"), + bun: value.replace("npm install", "bun add") + }; + } + + // npx create + else if (value.startsWith("npx create-")) { + commands = { + npm: value, + yarn: value.replace("npx create-", "yarn create "), + pnpm: value.replace("npx create-", "pnpm create "), + bun: value.replace("npx create-", "bunx --bun") + }; + } + + // npx + else if (value.startsWith("npx")) { + commands = { + npm: value, + yarn: value.replace("npx", "yarn dlx"), + pnpm: value.replace("npx", "pnpm dlx"), + bun: value.replace("npx", "bunx --bun") + }; + } + } + function handleCopyDone() { copied = true; setTimeout(() => { @@ -20,20 +60,59 @@ } - +{#if Object.values(commands).filter(Boolean).length > 1} + + + + + + {#each Object.entries(commands) as [key, command]} + {#if command} + + navigator.clipboard + .writeText(command) + .then(handleCopyDone) + .catch(handleCopyError)} + > + {key} + + {/if} + {/each} + + +{:else} + +{/if} From d3352f812dc6fa6d0acb505c50af8a72ec171a45 Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sun, 21 Jan 2024 11:26:37 +0100 Subject: [PATCH 2/3] Handle npx create with no trailing dash --- apps/www/src/lib/components/docs/copy-button.svelte | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/apps/www/src/lib/components/docs/copy-button.svelte b/apps/www/src/lib/components/docs/copy-button.svelte index d873bda4f..98fa55f4c 100644 --- a/apps/www/src/lib/components/docs/copy-button.svelte +++ b/apps/www/src/lib/components/docs/copy-button.svelte @@ -28,12 +28,16 @@ } // npx create - else if (value.startsWith("npx create-")) { + else if (value.startsWith("npx create")) { commands = { npm: value, - yarn: value.replace("npx create-", "yarn create "), - pnpm: value.replace("npx create-", "pnpm create "), - bun: value.replace("npx create-", "bunx --bun") + yarn: value + .replace("npx create-", "yarn create ") + .replace("npx create", "yarn create"), + pnpm: value + .replace("npx create-", "pnpm create ") + .replace("npx create", "pnpm create"), + bun: value.replace("npx create-", "bunx --bun ").replace("npx create", "bunx --bun") }; } From 6182694ec4e8d8d871f734744ee30e869a13b6c6 Mon Sep 17 00:00:00 2001 From: WarningImHack3r <43064022+WarningImHack3r@users.noreply.github.com> Date: Sun, 21 Jan 2024 19:49:31 +0100 Subject: [PATCH 3/3] Widen command handling, use regex for safety --- .../lib/components/docs/copy-button.svelte | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/apps/www/src/lib/components/docs/copy-button.svelte b/apps/www/src/lib/components/docs/copy-button.svelte index 98fa55f4c..200d9afb9 100644 --- a/apps/www/src/lib/components/docs/copy-button.svelte +++ b/apps/www/src/lib/components/docs/copy-button.svelte @@ -22,22 +22,18 @@ commands = { npm: value, yarn: value.replace("npm install", "yarn add"), - pnpm: value.replace("npm install", "pnpm add"), - bun: value.replace("npm install", "bun add") + pnpm: value.replace(/^npm/, "pnpm"), + bun: value.replace(/^npm/, "bun") }; } - // npx create - else if (value.startsWith("npx create")) { + // npm create + else if (value.startsWith("npm create")) { commands = { npm: value, - yarn: value - .replace("npx create-", "yarn create ") - .replace("npx create", "yarn create"), - pnpm: value - .replace("npx create-", "pnpm create ") - .replace("npx create", "pnpm create"), - bun: value.replace("npx create-", "bunx --bun ").replace("npx create", "bunx --bun") + yarn: value.replace(/^npm/, "yarn"), + pnpm: value.replace(/^npm/, "pnpm"), + bun: value.replace(/^npm/, "bun --bun") }; } @@ -45,9 +41,9 @@ else if (value.startsWith("npx")) { commands = { npm: value, - yarn: value.replace("npx", "yarn dlx"), - pnpm: value.replace("npx", "pnpm dlx"), - bun: value.replace("npx", "bunx --bun") + yarn: value.replace(/^npx/, "yarn dlx"), + pnpm: value.replace(/^npx/, "pnpx"), + bun: value.replace(/^npx/, "bunx --bun") }; } }