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 <rodrigo.pinto@calian.ca>

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

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!');
+})

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));
+}

doc/web-doc/src/routes/adr/+layout.svelte

@@ -1 +1,5 @@
+<script>
+  import '$lib/styles/prism-duotone-light.css'
+</script>
+
 <slot />