From eec70a6e730d68c9727e21d653aa0a2de49cc43a Mon Sep 17 00:00:00 2001 From: Loris Sigrist Date: Tue, 24 Oct 2023 12:02:18 +0200 Subject: [PATCH] Add code highlighting --- pnpm-lock.yaml | 8 ++ site/package.json | 1 + site/src/lib/prism.css | 107 ++++++++++++++++++ site/src/lib/ui/Code/CodePanel.svelte | 2 +- site/src/lib/ui/Code/CodePanelBody.svelte | 5 +- site/src/lib/ui/Prism.svelte | 28 +++++ .../src/routes/[[locale=locale]]/+page.svelte | 14 ++- .../getting-started/+page.svelte | 25 ++-- .../getting-started/vite-config-snippet.js | 13 +++ 9 files changed, 183 insertions(+), 20 deletions(-) create mode 100644 site/src/lib/prism.css create mode 100644 site/src/lib/ui/Prism.svelte create mode 100644 site/src/routes/[[locale=locale]]/getting-started/vite-config-snippet.js diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 818e13a..4cf6348 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,6 +62,9 @@ importers: '@melt-ui/svelte': specifier: ^0.55.3 version: 0.55.3(svelte@3.59.2) + prismjs: + specifier: ^1.29.0 + version: 1.29.0 svelte-focus-trap: specifier: ^1.2.0 version: 1.2.0 @@ -1661,6 +1664,11 @@ packages: react-is: 18.2.0 dev: true + /prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: false + /queue-microtask@1.2.3: resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} dev: true diff --git a/site/package.json b/site/package.json index 872413e..edf52b9 100644 --- a/site/package.json +++ b/site/package.json @@ -29,6 +29,7 @@ "type": "module", "dependencies": { "@melt-ui/svelte": "^0.55.3", + "prismjs": "^1.29.0", "svelte-focus-trap": "^1.2.0", "t18s": "workspace:*" } diff --git a/site/src/lib/prism.css b/site/src/lib/prism.css new file mode 100644 index 0000000..baa82e9 --- /dev/null +++ b/site/src/lib/prism.css @@ -0,0 +1,107 @@ +/** + * Gruvbox dark theme + * + * Adapted from a theme based on: + * Vim Gruvbox dark Theme (https://github.com/morhetz/gruvbox) + * + * @author Azat S. + * @version 1.0 + */ + + code[class*="language-"], +pre[class*="language-"] { + color: #ebdbb2; /* fg1 / fg */ + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +.token.comment, +.token.prolog, +.token.cdata { + color: #a89984; /* fg4 / gray1 */ +} + +.token.delimiter, +.token.boolean, +.token.keyword, +.token.selector, +.token.important, +.token.atrule { + color: #fb4934; /* red2 */ +} + +.token.operator, +.token.punctuation, +.token.attr-name { + color: #a89984; /* fg4 / gray1 */ +} + +.token.tag, +.token.tag .punctuation, +.token.doctype, +.token.builtin { + color: #fabd2f; /* yellow2 */ +} + +.token.entity, +.token.number, +.token.symbol { + color: #d3869b; /* purple2 */ +} + +.token.property, +.token.constant, +.token.variable { + color: #fb4934; /* red2 */ +} + +.token.string, +.token.char { + color: #b8bb26; /* green2 */ +} + +.token.attr-value, +.token.attr-value .punctuation { + color: #a89984; /* fg4 / gray1 */ +} + +.token.url { + color: #b8bb26; /* green2 */ + text-decoration: underline; +} + +.token.function { + color: #fabd2f; /* yellow2 */ +} + +.token.regex { + background: #b8bb26; /* green2 */ +} + +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.inserted { + background: #a89984; /* fg4 / gray1 */ +} + +.token.deleted { + background: #fb4934; /* red2 */ +} \ No newline at end of file diff --git a/site/src/lib/ui/Code/CodePanel.svelte b/site/src/lib/ui/Code/CodePanel.svelte index 0e51e77..acb6962 100644 --- a/site/src/lib/ui/Code/CodePanel.svelte +++ b/site/src/lib/ui/Code/CodePanel.svelte @@ -24,7 +24,7 @@ class="group dark:bg-white/2.5" hidden={!active} role={$tabs.length > 1 ? "tabpanel" : null} - aria-labelledby={$tabs.length > 1 ? `code-group-${codeGroupId}-tab-${name}"` : null} + aria-labelledby={$tabs.length > 1 ? `code-group-${codeGroupId}-tab-${name}` : null} > {#if label || tag} diff --git a/site/src/lib/ui/Code/CodePanelBody.svelte b/site/src/lib/ui/Code/CodePanelBody.svelte index 18d3530..3d96a46 100644 --- a/site/src/lib/ui/Code/CodePanelBody.svelte +++ b/site/src/lib/ui/Code/CodePanelBody.svelte @@ -15,7 +15,8 @@
-
+
+ +
diff --git a/site/src/lib/ui/Prism.svelte b/site/src/lib/ui/Prism.svelte new file mode 100644 index 0000000..5032f1c --- /dev/null +++ b/site/src/lib/ui/Prism.svelte @@ -0,0 +1,28 @@ + + + +
{@html html}
diff --git a/site/src/routes/[[locale=locale]]/+page.svelte b/site/src/routes/[[locale=locale]]/+page.svelte index f51edbb..7093e71 100644 --- a/site/src/routes/[[locale=locale]]/+page.svelte +++ b/site/src/routes/[[locale=locale]]/+page.svelte @@ -1,10 +1,16 @@
- npm install --save-dev t18s - yarn add --dev t18s - pnpm add --save-dev t18s - \ No newline at end of file + + + + + + +
+ + diff --git a/site/src/routes/[[locale=locale]]/getting-started/+page.svelte b/site/src/routes/[[locale=locale]]/getting-started/+page.svelte index 2559e76..4f53d51 100644 --- a/site/src/routes/[[locale=locale]]/getting-started/+page.svelte +++ b/site/src/routes/[[locale=locale]]/getting-started/+page.svelte @@ -1,28 +1,27 @@ +

Getting Started

-

- First you need to install t18s as a dev dependency. -

+

First you need to install t18s as a dev dependency.

- npm install --save-dev t18s + npm install --save-dev t18s

- T18S isn't just a library, it's a vite-plugin, so you will need to register it in your vite config. + T18S isn't just a library, it's a vite-plugin, so you will need to register it + in your vite config.

-
- - - +
+ + + -

- Aaaand we're off. -

\ No newline at end of file +

Aaaand we're off.

diff --git a/site/src/routes/[[locale=locale]]/getting-started/vite-config-snippet.js b/site/src/routes/[[locale=locale]]/getting-started/vite-config-snippet.js new file mode 100644 index 0000000..39b2dfe --- /dev/null +++ b/site/src/routes/[[locale=locale]]/getting-started/vite-config-snippet.js @@ -0,0 +1,13 @@ +import { sveltekit } from "@sveltejs/kit/vite"; +import { t18s } from "t18s"; +import { defineConfig } from "vite"; + +export default defineConfig({ + plugins: [ + sveltekit(), + t18s({ + locales: ["en", "de"], + fallbackLocale: "en", + }), + ], +});