From 2d2e59f4e7b292ed9ebc7e59e93ca1ea85e7a4ee Mon Sep 17 00:00:00 2001 From: Rodrigo Pinto Date: Wed, 18 Jan 2023 11:59:50 -0300 Subject: [PATCH] Adds code styling to ADRs The app automatically generates pages for the ADRs. If the ADR contained code blocks, it was being rendered as plain text. This commit adds the CSS and the configuration necessary to apply code styling to ADR code blocks. Also adds some clarification and fixes to the README. Signed-off-by: Rodrigo Pinto --- doc/web-doc/README.md | 7 +- doc/web-doc/adr-loader.js | 10 + .../src/lib/styles/prism-duotone-light.css | 178 ++++++++++++++++++ doc/web-doc/src/routes/adr/+layout.svelte | 4 + 4 files changed, 196 insertions(+), 3 deletions(-) create mode 100644 doc/web-doc/adr-loader.js create mode 100644 doc/web-doc/src/lib/styles/prism-duotone-light.css diff --git a/doc/web-doc/README.md b/doc/web-doc/README.md index f11354772..ce63b0b44 100644 --- a/doc/web-doc/README.md +++ b/doc/web-doc/README.md @@ -9,7 +9,7 @@ cd doc/web-doc yarn ``` -> Executing `yarn` from the root of theia-trace-extension does not install the dependencies in doc/web-doc. The configuration for Lerna to support such feature may be added in the future. +> Executing `yarn` from the root of `theia-trace-extension` does not install the dependencies in `doc/web-doc`. The configuration for Lerna to support such a feature may be added in the future. Run site @@ -23,11 +23,11 @@ Or start the server and open the app in a new browser tab yarn dev --open ``` -The site will be running at [http://localhost:5173](http://localhost:5173). +The site will be running at [localhost, port 5173]. ## Development -Run Prettier from the root using the following commands: +Run Prettier from the root of the web-doc project (at `doc/web-doc/` from the root of `theia-trace-extension`) using the following commands: To check code style: @@ -45,3 +45,4 @@ Website created with [SvelteKit]. [theia-prereq]: https://github.com/eclipse-theia/theia/blob/master/doc/Developing.md#prerequisites [sveltekit]: https://kit.svelte.dev +[localhost, port 5173]: http://localhost:5173 diff --git a/doc/web-doc/adr-loader.js b/doc/web-doc/adr-loader.js new file mode 100644 index 000000000..255ef5510 --- /dev/null +++ b/doc/web-doc/adr-loader.js @@ -0,0 +1,10 @@ +import { copyFile } from 'node:fs' +import compare from 'dir-compare' + +const oldPath = '../adr/' +const newPath = 'adr/' + +copyFile(oldPath, newPath, (err) => { + if (err) throw err; + console.log('Copy complete!'); +}) diff --git a/doc/web-doc/src/lib/styles/prism-duotone-light.css b/doc/web-doc/src/lib/styles/prism-duotone-light.css new file mode 100644 index 000000000..a4880e9cc --- /dev/null +++ b/doc/web-doc/src/lib/styles/prism-duotone-light.css @@ -0,0 +1,178 @@ +/* +Name: Duotone Light +Author: Simurai, adapted from DuoTone themes for Atom (http://simurai.com/projects/2016/01/01/duotone-themes) + +Conversion: Bram de Haan (http://atelierbram.github.io/Base2Tone-prism/output/prism/prism-base2tone-morning-light.css) +Generated with Base16 Builder (https://github.com/base16-builder/base16-builder) +*/ + +code[class*='language-'], +pre[class*='language-'] { + font-family: Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', + 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', + 'Nimbus Mono L', 'Courier New', Courier, monospace; + font-size: 14px; + line-height: 1.375; + 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; + background: #faf8f5; + color: #728fcb; +} + +pre > code[class*='language-'] { + font-size: 1em; +} + +pre[class*='language-']::-moz-selection, +pre[class*='language-'] ::-moz-selection, +code[class*='language-']::-moz-selection, +code[class*='language-'] ::-moz-selection { + text-shadow: none; + background: #faf8f5; +} + +pre[class*='language-']::selection, +pre[class*='language-'] ::selection, +code[class*='language-']::selection, +code[class*='language-'] ::selection { + text-shadow: none; + background: #faf8f5; +} + +/* Code blocks */ +pre[class*='language-'] { + padding: 1em; + margin: 0.5em 0; + overflow: auto; +} + +/* Inline code */ +:not(pre) > code[class*='language-'] { + padding: 0.1em; + border-radius: 0.3em; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #b6ad9a; +} + +.token.punctuation { + color: #b6ad9a; +} + +.token.namespace { + opacity: 0.7; +} + +.token.tag, +.token.operator, +.token.number { + color: #063289; +} + +.token.property, +.token.function { + color: #b29762; +} + +.token.tag-id, +.token.selector, +.token.atrule-id { + color: #2d2006; +} + +code.language-javascript, +.token.attr-name { + color: #896724; +} + +code.language-css, +code.language-scss, +.token.boolean, +.token.string, +.token.entity, +.token.url, +.language-css .token.string, +.language-scss .token.string, +.style .token.string, +.token.attr-value, +.token.keyword, +.token.control, +.token.directive, +.token.unit, +.token.statement, +.token.regex, +.token.atrule { + color: #728fcb; +} + +.token.placeholder, +.token.variable { + color: #93abdc; +} + +.token.deleted { + text-decoration: line-through; +} + +.token.inserted { + border-bottom: 1px dotted #2d2006; + text-decoration: none; +} + +.token.italic { + font-style: italic; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.important { + color: #896724; +} + +.token.entity { + cursor: help; +} + +pre > code.highlight { + outline: 0.4em solid #896724; + outline-offset: 0.4em; +} + +/* overrides color-values for the Line Numbers plugin + * http://prismjs.com/plugins/line-numbers/ + */ +.line-numbers.line-numbers .line-numbers-rows { + border-right-color: #ece8de; +} + +.line-numbers .line-numbers-rows > span:before { + color: #cdc4b1; +} + +/* overrides color-values for the Line Highlight plugin + * http://prismjs.com/plugins/line-highlight/ + */ +.line-highlight.line-highlight { + background: rgba(45, 32, 6, 0.2); + background: -webkit-linear-gradient(left, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); + background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0)); +} diff --git a/doc/web-doc/src/routes/adr/+layout.svelte b/doc/web-doc/src/routes/adr/+layout.svelte index 4fa864ce7..c6e2f9661 100644 --- a/doc/web-doc/src/routes/adr/+layout.svelte +++ b/doc/web-doc/src/routes/adr/+layout.svelte @@ -1 +1,5 @@ + +