Add a bookmarklet maker and improve node deployment (from today and last night)

packages/website/src/lib/Editor.svelte

@@ -0,0 +1,85 @@
+<script lang="ts" context="module"> 
+    
+    export enum LanguageConfig {
+        None,
+        JavaScript
+    }
+    
+</script>
+<script lang="ts">
+    import CodeMirror from "svelte-codemirror-editor";
+    import { javascript } from "@codemirror/lang-javascript";
+    import { theme } from "$lib/theme";
+    import { githubLight, githubDark } from "$lib/themes/github";
+    import type { Extension } from "@codemirror/state";
+
+
+    export let value = "";
+    export let readonly = false;
+    export let lang: LanguageConfig = LanguageConfig.None;
+    let langPlugin = null
+    switch (lang) {
+        case LanguageConfig.None:
+            langPlugin = null
+            break;
+        case LanguageConfig.JavaScript:
+            langPlugin = javascript()
+            break;
+    
+    
+        default:
+            break;
+    }
+    let extensions :Extension[] = [];
+    if (langPlugin) extensions.push(langPlugin)
+    // $: console.log(value)
+
+    // import { linter, lintGutter } from "@codemirror/lint";
+    // import * as eslint from "eslint-linter-browserify";
+    
+        // lintGutter(),
+        // linter(esLint(new eslint.Linter(), config)),
+
+</script>
+
+<div class="editor-wrapper card " 
+class:no-header={!$$slots.header}>
+
+{#if $$slots.header}
+	<div class="header">
+		<slot name="header"/>
+	</div>
+{/if}
+<CodeMirror
+    {value}
+
+    class="editor"
+    theme={$theme == "dark" ? githubDark : githubLight}
+    {extensions}
+    {readonly}
+    on:change
+/>
+</div>
+<style>
+    
+    .editor-wrapper {
+        min-height: 200px;
+        position: relative;
+        z-index: 1;
+        background-color: var(--surface-secondary-color);
+    }
+    :global(.editor-wrapper .cm-scroller, .editor-wrapper .cm-editor) {
+        min-height: 200px;
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: var(--border-radius);
+        /* box-shadow: var(--shadow);
+        background-color: var(--surface-color); */
+    }
+    :global(.editor-wrapper.no-header .cm-scroller, .editor-wrapper.no-header .cm-editor) {
+        border-radius: var(--border-radius);
+    }
+    :global(pre.cm-editor) {
+        margin: 0;
+    }
+    
+</style>

packages/website/src/lib/styles.css

@@ -4,6 +4,10 @@
     --theme: #242424;
     --background-color: #f8f8f8;
     --surface-color: #fff;
+    --surface-secondary-color: #ededed;
+    
+    --input-background-color: #fff;
+    --input-color: #24292e;
     --backdrop-color: rgba(247, 247, 247, .54);
     --shadow-color: rgba(0, 0, 0, .12);
     --font-color: rgba(0, 0, 0, .87);
@@ -23,6 +27,10 @@
         --backdrop-color: rgba(20, 20, 20, .54);
         --shadow-color: rgba(255, 255, 255, .12);
         --surface-color: #242424;
+        --surface-secondary-color: #222222;
+        
+        --input-background-color: #161616;
+        --input-color: #d8d8d8;
         --font-color: rgba(255, 255, 255, .87);
         --font-color-contrast: rgba(0, 0, 0, .87);
         --font-color-secondary: rgba(255, 255, 255, .6)

packages/website/src/lib/theme.ts

@@ -0,0 +1,9 @@
+import { writable } from 'svelte/store'
+
+let query = typeof window != "undefined" ? window?.matchMedia('(prefers-color-scheme: dark)') : undefined
+
+export const theme = writable(query?.matches ? 'dark' : 'light')
+
+query?.addEventListener('change', e => {
+    theme.set(e.matches ? 'dark' : 'light')
+});

packages/website/src/lib/themes/github.ts

@@ -0,0 +1,172 @@
+
+import { tags as t } from '@lezer/highlight';
+
+// NOTE: This requires enabling unsafe-inline styles in the CSP
+// From thememirror
+import { EditorView } from '@codemirror/view';
+import type { Extension } from '@codemirror/state';
+import {
+	HighlightStyle,
+	type TagStyle,
+	syntaxHighlighting,
+} from '@codemirror/language';
+
+interface Options {
+	/**
+	 * Theme variant. Determines which styles CodeMirror will apply by default.
+	 */
+	variant: Variant;
+
+	/**
+	 * Settings to customize the look of the editor, like background, gutter, selection and others.
+	 */
+	settings: Settings;
+
+	/**
+	 * Syntax highlighting styles.
+	 */
+	styles: TagStyle[];
+}
+
+type Variant = 'light' | 'dark';
+
+interface Settings {
+	/**
+	 * Editor background.
+	 */
+	background: string;
+
+	/**
+	 * Default text color.
+	 */
+	foreground: string;
+
+	/**
+	 * Caret color.
+	 */
+	caret: string;
+
+	/**
+	 * Selection background.
+	 */
+	selection: string;
+
+	/**
+	 * Background of highlighted lines.
+	 */
+	lineHighlight: string;
+
+	/**
+	 * Gutter background.
+	 */
+	gutterBackground: string;
+
+	/**
+	 * Text color inside gutter.
+	 */
+	gutterForeground: string;
+}
+
+const createTheme = ({ variant, settings, styles }: Options): Extension => {
+	const theme = EditorView.theme(
+		{
+			// eslint-disable-next-line @typescript-eslint/naming-convention
+			'&': {
+				backgroundColor: settings.background,
+				color: settings.foreground,
+			},
+			'.cm-content': {
+				caretColor: settings.caret,
+			},
+			'.cm-cursor, .cm-dropCursor': {
+				borderLeftColor: settings.caret,
+			},
+			'&.cm-focused .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection':
+			{
+				backgroundColor: settings.selection,
+			},
+			'.cm-activeLine': {
+				backgroundColor: settings.lineHighlight,
+			},
+			'.cm-gutters': {
+				backgroundColor: settings.gutterBackground,
+				color: settings.gutterForeground,
+			},
+			'.cm-activeLineGutter': {
+				backgroundColor: settings.lineHighlight,
+			},
+		},
+		{
+			dark: variant === 'dark',
+		},
+	);
+
+	const highlightStyle = HighlightStyle.define(styles);
+	const extension = [theme, syntaxHighlighting(highlightStyle)];
+
+	return extension;
+};
+
+export default createTheme;
+
+export const githubLight = createTheme({
+	variant: 'light',
+	settings: {
+		background: '#fff',
+		foreground: '#24292e',
+		selection: '#BBDFFF',
+		// selectionMatch: '#BBDFFF',
+		gutterBackground: '#fff',
+		gutterForeground: '#6e7781',
+		caret: '#7c3aed',
+		lineHighlight: '#8a91991a',
+	},
+	styles: [
+		{ tag: [t.standard(t.tagName), t.tagName], color: '#116329' },
+		{ tag: [t.comment, t.bracket], color: '#6a737d' },
+		{ tag: [t.className, t.propertyName], color: '#6f42c1' },
+		{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#005cc5' },
+		{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#d73a49' },
+		{ tag: [t.string, t.meta, t.regexp], color: '#032f62' },
+		{ tag: [t.name, t.quote], color: '#22863a' },
+		{ tag: [t.heading, t.strong], color: '#24292e', fontWeight: 'bold' },
+		{ tag: [t.emphasis], color: '#24292e', fontStyle: 'italic' },
+		{ tag: [t.deleted], color: '#b31d28', backgroundColor: 'ffeef0' },
+		{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#e36209' },
+		{ tag: [t.url, t.escape, t.regexp, t.link], color: '#032f62' },
+		{ tag: t.link, textDecoration: 'underline' },
+		{ tag: t.strikethrough, textDecoration: 'line-through' },
+		{ tag: t.invalid, color: '#cb2431' }
+	],
+});
+
+export
+	const githubDark = createTheme({
+		variant: 'dark',
+		settings: {
+			background: '#161616',
+			foreground: '#d8d8d8',
+			caret: '#c9d1d9',
+			selection: '#003d73',
+			// selectionMatch: '#003d73',\
+			lineHighlight: '#1e1e1e',
+			gutterBackground: '#1c1c1c',
+			gutterForeground: '#fff',
+		},
+		styles: [
+			{ tag: [t.standard(t.tagName), t.tagName], color: '#7ee787' },
+			{ tag: [t.comment, t.bracket], color: '#8b949e' },
+			{ tag: [t.className, t.propertyName], color: '#d2a8ff' },
+			{ tag: [t.variableName, t.attributeName, t.number, t.operator], color: '#79c0ff' },
+			{ tag: [t.keyword, t.typeName, t.typeOperator, t.typeName], color: '#ff7b72' },
+			{ tag: [t.string, t.meta, t.regexp], color: '#a5d6ff' },
+			{ tag: [t.name, t.quote], color: '#7ee787' },
+			{ tag: [t.heading, t.strong], color: '#d2a8ff', fontWeight: 'bold' },
+			{ tag: [t.emphasis], color: '#d2a8ff', fontStyle: 'italic' },
+			{ tag: [t.deleted], color: '#ffdcd7', backgroundColor: 'ffeef0' },
+			{ tag: [t.atom, t.bool, t.special(t.variableName)], color: '#ffab70' },
+			{ tag: t.link, textDecoration: 'underline' },
+			{ tag: t.strikethrough, textDecoration: 'line-through' },
+			{ tag: t.invalid, color: '#f97583' },
+		],
+	});