Pastabble frontend

pastabble-frontend/src/lib/components/CodeBlock.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    import hljs from 'highlight.js';
+    import LanguageSelector from './LanguageSelector.svelte';
+
+    export let code: string | undefined;
+    export let language: string | undefined;
+
+    let displayCode: string | undefined;
+    let showAlert = false;
+    let initial = true;
+
+    $: if(code) {
+        highlight();
+        initial = false;
+    }
+
+    $: if(language) {
+        if(initial || !code) {
+            highlight();
+        }
+    }
+
+    function highlight() {
+        if(language) {
+            const res = hljs.highlight(language!, code!);
+            if(!res.errorRaised) {
+                displayCode = res.value;
+            }
+        } else {
+            const res = hljs.highlightAuto(code!);
+            if(!res.errorRaised) {
+                displayCode = res.value;
+                language = res.language;
+            }
+        }
+    }
+
+    async function copy() {
+        await navigator.clipboard.writeText(code!);
+        showAlert = true;
+        setTimeout(() => showAlert = false, 3000);
+    }
+
+    async function share() {
+        await navigator.clipboard.writeText(window.location.href);
+        showAlert = true;
+        setTimeout(() => showAlert = false, 3000);
+    }
+</script>
+
+<div class="flex flex-col m-3 gap-5">
+    <div role="alert" class="alert alert-success transition-opacity ease-in-out duration-500 {showAlert ? 'opacity-100' : 'opacity-0'}">
+        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
+        <span>Copied to your clipboard!</span>
+    </div>
+
+    <div class="flex flex-col md:flex-row gap-5">
+        <div class="mockup-code flex-1">
+            <pre class="p-5"><code>{@html displayCode}</code></pre>
+        </div>
+        <div class="flex flex-col gap-3">
+            <LanguageSelector bind:language />
+            <button on:click={copy} class="btn btn-outline btn-primary">Copy</button>
+            <button on:click={share} class="btn btn-outline btn-primary">Share link</button>
+        </div>
+    </div>
+</div>

pastabble-frontend/src/lib/components/LanguageSelector.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+    import hljs from 'highlight.js';
+    const languages = hljs.listLanguages();
+
+    export let language: string | undefined = undefined;
+</script>
+
+<select bind:value={language} class="select select-primary select-bordered w-full max-w-xs">
+  <option value="{undefined}" disabled selected>Choose programming language</option>
+  {#each languages as lang}
+    <option value="{lang}">{lang}</option>
+  {/each}
+</select>

pastabble-frontend/src/lib/components/ThemeSwitcher.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+
+    let darkTheme: boolean;
+    let mounted = false;
+
+    onMount(() => {
+        mounted = true;
+        darkTheme = localStorage['theme'] ? localStorage['theme'] === 'dark' : isDarkMode();
+    });
+
+    $: if(darkTheme) {
+        localStorage.setItem('theme', 'dark');
+        document.documentElement.setAttribute('data-theme', 'dark');
+    } else if(mounted) {
+        localStorage.setItem('theme', 'light');
+        document.documentElement.setAttribute('data-theme', 'light');
+    }
+
+    const isDarkMode = () => 
+        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+</script>
+
+<label class="flex cursor-pointer gap-2 items-center">
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.2 4.2l1.4 1.4M18.4 18.4l1.4 1.4M1 12h2M21 12h2M4.2 19.8l1.4-1.4M18.4 5.6l1.4-1.4"/></svg>
+  <input bind:checked={darkTheme} type="checkbox" class="toggle theme-controller"/>
+  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg>
+</label>