feat: Third-Party Resources

package.json

@@ -22,6 +22,7 @@
         "svelte": "^3.54.0"
     },
     "devDependencies": {
-        "@cloudflare/workers-types": "^4.20230404.0"
+        "@cloudflare/workers-types": "^4.20230404.0",
+        "shiki": "^1.1.7"
     }
 }

src/components/Card.svelte

@@ -4,7 +4,7 @@
         Error = "#ec4144",
         Success = "#2d7c46",
         Info = "#5865f2",
-        Blank = "#aaaaaa",
+        Blank = "#575757",
     }
 </script>
 
@@ -22,6 +22,7 @@
 <style define:vars={{ border, background }}>
     div {
         width: 100%;
+        overflow-x: auto;
         border: 2px solid var(--border);
         border-radius: 8px;
         padding: 0.5rem 1rem;

src/components/NavBar.astro

@@ -4,6 +4,7 @@ const navLinks = {
     plugins: ["Plugins", "accentBlue"],
     faq: ["FAQ", "accentAqua"],
     cloud: ["Cloud", "accentYellow"],
+    "third-party": ["Third-Party", "accentOrange"],
 };
 
 const page = Astro.url.pathname.split("/")[1];

src/components/ShikiCodeBlocks.svelte

@@ -0,0 +1,71 @@
+<script script lang="ts">
+    import Card, { CardKind } from "./Card.svelte";
+
+    export let code: string;
+    export let lang: string;
+    export let highlighter;
+
+    const highlightedCode = highlighter.codeToHtml(code, {
+        lang: lang,
+        theme: 'catppuccin-frappe'
+    })
+
+    function copyCode() {
+        navigator.clipboard.writeText(code);
+        didCopy = true;
+    }
+
+    let didCopy = false;
+</script>
+
+<div>
+    <Card kind={CardKind.Blank}>
+        {@html highlightedCode}
+
+        <button on:click={copyCode}>
+            <svg height="24" viewBox="0 -960 960 960" width="24">
+                {#if !didCopy}
+                    <title>Copy to Clipboard</title>
+                    <path
+                        fill="currentColor"
+                        d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"
+                    />
+                {:else}
+                    <title>Code copied!</title>
+                    <path
+                        fill="currentColor"
+                        d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"
+                    />
+                {/if}
+            </svg>
+        </button>
+    </Card>
+</div>
+
+<style>
+    div {
+        position: relative;
+    }
+
+    code,
+    pre {
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+        line-height: 1.25em;
+    }
+
+    button {
+        all: unset;
+        cursor: pointer;
+        position: absolute;
+        top: 4px;
+        right: 4px;
+
+        color: var(--fg0-muted);
+        transition: 200ms color ease-in-out;
+    }
+
+    button:is(:hover, :focus) {
+        color: var(--fg0);
+    }
+</style>

src/components/pages/download/LinuxTab.astro

@@ -1,11 +1,17 @@
 ---
 import Code from "components/Code.astro";
 import Tab from "./Tab.astro";
-import CodeBlock from "components/CodeBlock.svelte";
+import CodeBlock from "components/ShikiCodeBlocks.svelte";
+import { getHighlighter } from "shiki";
+
+const highlighter = await getHighlighter({
+    themes: ["catppuccin-frappe"],
+    langs: ["shell"],
+});
 ---
 
 <Tab>
-    <div slot="header">
+    <div class="tab-container" slot="header">
         <p>
             Open your terminal and run the following command. Then follow the
             instructions in your terminal. If you're using fish, switch to bash
@@ -14,7 +20,9 @@ import CodeBlock from "components/CodeBlock.svelte";
             <Code>bash</Code>)
         </p>
         <CodeBlock
-            code={'sh -c "$(curl -sS https://raw.githubusercontent.com/Vendicated/VencordInstaller/main/install.sh)"'}
+            code={'sh -c "$(curl -sS\nhttps://raw.githubusercontent.com/Vendicated/VencordInstaller/main/install.sh)"'}
+            lang="shell"
+            {highlighter}
             client:load
         />
     </div>
@@ -25,4 +33,8 @@ import CodeBlock from "components/CodeBlock.svelte";
         margin: 1em 0 0.5em;
         font-size: 2em;
     }
+
+    .tab-container {
+        max-width: 100%;
+    }
 </style>

src/components/pages/thirdParty/Information.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    import Shiki from "../../ShikiCodeBlocks.svelte"
+
+    export let type: string;
+    export let code: string;
+    export let githubRepo: string;
+    export let highlighter;
+</script>
+
+<section>
+    <hr/>
+    <h3 class="install-header">Install</h3>
+    {#if type === "plugins"}
+        <div class="instruction">
+            <p>Run the following command inside of your Vencord's <code class="highlight">src/userplugins</code>:</p>
+            <Shiki {highlighter} lang="shell" code={`git clone ${githubRepo}`}></Shiki>
+        </div>
+        <div class="instruction">
+            <p>Then, re-build and inject</p>
+            <Shiki {highlighter} lang="shell" code={`pnpm build\npnpm inject`}></Shiki>
+        </div>
+
+    {:else if type === "js-snippets"}
+        <p>Run the following snippet in your Developer tools (<code class="highlight">Control + Shift + I</code>)</p>
+        <Shiki {highlighter} lang="javascript" {code}></Shiki>
+
+    {:else if type === "css-snippets"}
+        <section>
+            <p class="install-info">Copy this snippet and put it into your <code class="highlight">Quick CSS</code></p>
+            <Shiki {highlighter} lang="css" {code}></Shiki>
+        </section>
+    {/if}
+</section>
+
+<style>
+    p {
+        line-height: normal;
+        margin: 1px;
+    }
+
+    hr {
+        display: block;
+        height: 1px;
+        border: 0;
+        border-top: 1.5px solid var(--grey2);
+        margin: 1.5em 0;
+        padding: 0;
+    }
+
+    .install-header {
+        margin: 10px 0;
+        font-size: 1.5rem;
+        line-height: inherit;
+        margin-top: 1.25em;
+    }
+
+    .install-info, .instruction {
+        margin-bottom: 1em;
+    }
+
+    .highlight {
+        background-color: var(--bg4);
+        color: var(--accentAqua);
+        border-radius: 8px;
+        font-family: unset;
+        text-align: center;
+        padding: 0.05em 0.3em;
+    }
+
+</style>