Align Frequency theme (#71)

Aligns the theme with other places it is used.

- Swap out light mode code highlighting
- Swap out dark mode code highlighting
- Remove unused ace editor references
- Easier theme css naming

Author: wilwade

book.toml

@@ -10,12 +10,16 @@ command = "node preprocessor.mjs"
 
 [output.html]
 no-section-label = true
-copy-fonts = false                                                             # Switched to custom fonts
+copy-fonts = false # Switched to custom fonts
 site-url = "/pages/"
 git-repository-url = "https://github.com/frequency-chain/docs"
 edit-url-template = "https://github.com/frequency-chain/docs/blob/main/{path}"
 preferred-dark-theme = "coal"
-additional-css = ["css/extended.css"]
+additional-css = [
+  "css/extended.css",
+  "css/highlight.css",
+  "css/highlight-dark.css",
+]
 
 # https://github.com/Michael-F-Bryan/mdbook-linkcheck
 [output.linkcheck]

theme/tomorrow-night.css renamed to css/highlight-dark.css

@@ -76,11 +76,11 @@
   color: #b294bb;
 }
 
-.hljs {
+pre .hljs {
   display: block;
   overflow-x: auto;
-  /* background: #1d1f21; */
-  /* color: #c5c8c6; */
+  background: #1d1f21;
+  color: #c5c8c6;
   padding: 0.5em;
 }
 

css/highlight.css

@@ -0,0 +1,170 @@
+/*!
+  Theme: Atelier Cave Light
+  Author: Bram de Haan (http://atelierbramdehaan.nl)
+  License: ~ MIT (or more permissive) [via base16-schemes-source]
+  Maintainer: @highlightjs/core-team
+  Version: 2021.09.0
+*/
+
+/*
+
+  - https://github.com/highlightjs/base16-highlightjs
+*/
+
+/*
+base00  #efecf4  Default Background
+base01  #e2dfe7  Lighter Background (Used for status bars, line number and folding marks)
+base02  #8b8792  Selection Background
+base03  #7e7887  Comments, Invisibles, Line Highlighting
+base04  #655f6d  Dark Foreground (Used for status bars)
+base05  #585260  Default Foreground, Caret, Delimiters, Operators
+base06  #26232a  Light Foreground (Not often used)
+base07  #19171c  Light Background (Not often used)
+base08  #be4678  Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+base09  #aa573c  Integers, Boolean, Constants, XML Attributes, Markup Link Url
+base0A  #a06e3b  Classes, Markup Bold, Search Text Background
+base0B  #2a9292  Strings, Inherited Class, Markup Code, Diff Inserted
+base0C  #398bc6  Support, Regular Expressions, Escape Characters, Markup Quotes
+base0D  #576ddb  Functions, Methods, Attribute IDs, Headings
+base0E  #955ae7  Keywords, Storage, Selector, Markup Italic, Diff Changed
+base0F  #bf40bf  Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?>
+*/
+
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+pre .hljs {
+  color: #585260;
+  background: #efecf4;
+}
+
+.hljs::selection,
+.hljs ::selection {
+  background-color: #8b8792;
+  color: #585260;
+}
+
+/* purposely do not highlight these things */
+.hljs-formula,
+.hljs-params,
+.hljs-property {
+}
+
+/* base03 - #7e7887 -  Comments, Invisibles, Line Highlighting */
+.hljs-comment {
+  color: #7e7887;
+}
+
+/* base04 - #655f6d -  Dark Foreground (Used for status bars) */
+.hljs-tag {
+  color: #655f6d;
+}
+
+/* base05 - #585260 -  Default Foreground, Caret, Delimiters, Operators */
+.hljs-subst,
+.hljs-punctuation,
+.hljs-operator {
+  color: #585260;
+}
+
+.hljs-operator {
+  opacity: 0.7;
+}
+
+/* base08 - Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted */
+.hljs-bullet,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-selector-tag,
+.hljs-name,
+.hljs-deletion {
+  color: #be4678;
+}
+
+/* base09 - Integers, Boolean, Constants, XML Attributes, Markup Link Url */
+.hljs-symbol,
+.hljs-number,
+.hljs-link,
+.hljs-attr,
+.hljs-variable.constant_,
+.hljs-literal {
+  color: #aa573c;
+}
+
+/* base0A - Classes, Markup Bold, Search Text Background */
+.hljs-title,
+.hljs-class .hljs-title,
+.hljs-title.class_ {
+  color: #a06e3b;
+}
+
+.hljs-strong {
+  font-weight: bold;
+  color: #a06e3b;
+}
+
+/* base0B - Strings, Inherited Class, Markup Code, Diff Inserted */
+.hljs-code,
+.hljs-addition,
+.hljs-title.class_.inherited__,
+.hljs-string {
+  color: #2a9292;
+}
+
+/* base0C - Support, Regular Expressions, Escape Characters, Markup Quotes */
+.hljs-built_in,
+.hljs-doctag, /* guessing */
+.hljs-quote,
+.hljs-keyword.hljs-atrule,
+.hljs-regexp {
+  color: #398bc6;
+}
+
+/* base0D - Functions, Methods, Attribute IDs, Headings */
+.hljs-function .hljs-title,
+.hljs-attribute,
+.ruby .hljs-property,
+.hljs-title.function_,
+.hljs-section {
+  color: #576ddb;
+}
+
+/* base0E - Keywords, Storage, Selector, Markup Italic, Diff Changed */
+.hljs-type,
+/* .hljs-selector-id, */
+/* .hljs-selector-class, */
+/* .hljs-selector-attr, */
+/* .hljs-selector-pseudo, */
+.hljs-template-tag,
+.diff .hljs-meta,
+.hljs-keyword {
+  color: #955ae7;
+}
+.hljs-emphasis {
+  color: #955ae7;
+  font-style: italic;
+}
+
+/* base0F - Deprecated, Opening/Closing Embedded Language Tags, e.g. <?php ?> */
+.hljs-meta,
+/*
+  prevent top level .keyword and .string scopes
+  from leaking into meta by accident
+*/
+.hljs-meta .hljs-keyword,
+.hljs-meta .hljs-string {
+  color: #bf40bf;
+}
+
+.hljs-meta .hljs-keyword,
+/* for v10 compatible themes */
+.hljs-meta-keyword {
+  font-weight: bold;
+}

pages/Governance/index.md

@@ -1,6 +1,6 @@
 # Governance
 
-Frequency Governance currently uses [Polkadot Governance V1](https://wiki.polkadot.network/docs/learn/learn-governance): a tricameral governance structure which includes coordinated governance by three institutions: the [Frequency Council](https://cloudflare-ipfs.com/ipns/dotapps.io/?rpc=wss%3A%2F%2F1.rpc.frequency.xyz#/council), analogous to the Council in Polkadot Governance V1, the [Technical Committee](https://cloudflare-ipfs.com/ipns/dotapps.io/?rpc=wss%3A%2F%2F1.rpc.frequency.xyz#/techcomm), analogous to the Technical Committee in Polkadot Governance V1, and token holder voting, analogous to the Public in Polkadot Governance V1.
+Frequency Governance currently uses [Polkadot Governance V1](https://wiki.polkadot.network/docs/learn/learn-governance): a tricameral governance structure which includes coordinated governance by three institutions: the [Frequency Council](https://dotapps-io.ipns.dweb.link?rpc=wss%3A%2F%2F1.rpc.frequency.xyz#/council), analogous to the Council in Polkadot Governance V1, the [Technical Committee](https://dotapps-io.ipns.dweb.link?rpc=wss%3A%2F%2F1.rpc.frequency.xyz#/techcomm), analogous to the Technical Committee in Polkadot Governance V1, and token holder voting, analogous to the Public in Polkadot Governance V1.
 
 ## Governance Parameters
 

theme/book.js

@@ -7,10 +7,7 @@ window.onunload = function () {};
 function playground_text(playground, hidden = true) {
   let code_block = playground.querySelector("code");
 
-  if (window.ace && code_block.classList.contains("editable")) {
-    let editor = window.ace.edit(code_block);
-    return editor.getValue();
-  } else if (hidden) {
+  if (hidden) {
     return code_block.textContent;
   } else {
     return code_block.innerText;
@@ -45,26 +42,6 @@ function playground_text(playground, hidden = true) {
   function handle_crate_list_update(playground_block, playground_crates) {
     // update the play buttons after receiving the response
     update_play_button(playground_block, playground_crates);
-
-    // and install on change listener to dynamically update ACE editors
-    if (window.ace) {
-      let code_block = playground_block.querySelector("code");
-      if (code_block.classList.contains("editable")) {
-        let editor = window.ace.edit(code_block);
-        editor.addEventListener("change", function (e) {
-          update_play_button(playground_block, playground_crates);
-        });
-        // add Ctrl-Enter command to execute rust code
-        editor.commands.addCommand({
-          name: "run",
-          bindKey: {
-            win: "Ctrl-Enter",
-            mac: "Ctrl-Enter",
-          },
-          exec: (_editor) => run_rust_code(playground_block),
-        });
-      }
-    }
   }
 
   // updates the visibility of play button based on `no_run` class and
@@ -162,29 +139,9 @@ function playground_text(playground, hidden = true) {
       return !node.parentElement.classList.contains("header");
     });
 
-  if (window.ace) {
-    // language-rust class needs to be removed for editable
-    // blocks or highlightjs will capture events
-    code_nodes
-      .filter(function (node) {
-        return node.classList.contains("editable");
-      })
-      .forEach(function (block) {
-        block.classList.remove("language-rust");
-      });
-
-    code_nodes
-      .filter(function (node) {
-        return !node.classList.contains("editable");
-      })
-      .forEach(function (block) {
-        hljs.highlightBlock(block);
-      });
-  } else {
-    code_nodes.forEach(function (block) {
-      hljs.highlightBlock(block);
-    });
-  }
+  code_nodes.forEach(function (block) {
+    hljs.highlightBlock(block);
+  });
 
   // Adding the hljs class gives code blocks the color css
   // even if highlighting doesn't apply
@@ -279,22 +236,6 @@ function playground_text(playground, hidden = true) {
 
       buttons.insertBefore(copyCodeClipboardButton, buttons.firstChild);
     }
-
-    let code_block = pre_block.querySelector("code");
-    if (window.ace && code_block.classList.contains("editable")) {
-      var undoChangesButton = document.createElement("button");
-      undoChangesButton.className = "fa fa-history reset-button";
-      undoChangesButton.title = "Undo changes";
-      undoChangesButton.setAttribute("aria-label", undoChangesButton.title);
-
-      buttons.insertBefore(undoChangesButton, buttons.firstChild);
-
-      undoChangesButton.addEventListener("click", function () {
-        let editor = window.ace.edit(code_block);
-        editor.setValue(editor.originalCode);
-        editor.clearSelection();
-      });
-    }
   });
 })();
 
@@ -304,8 +245,7 @@ function playground_text(playground, hidden = true) {
   var themePopup = document.getElementById("theme-list");
   var themeColorMetaTag = document.querySelector('meta[name="theme-color"]');
   var stylesheets = {
-    ayuHighlight: document.querySelector("[href$='ayu-highlight.css']"),
-    tomorrowNight: document.querySelector("[href$='tomorrow-night.css']"),
+    highlightDark: document.querySelector("[href$='highlight-dark.css']"),
     highlight: document.querySelector("[href$='highlight.css']"),
   };
 
@@ -341,36 +281,21 @@ function playground_text(playground, hidden = true) {
   }
 
   function set_theme(theme, store = true) {
-    let ace_theme;
-
     if (theme == "coal" || theme == "navy") {
-      stylesheets.ayuHighlight.disabled = true;
-      stylesheets.tomorrowNight.disabled = false;
+      stylesheets.highlightDark.disabled = false;
       stylesheets.highlight.disabled = true;
-
-      ace_theme = "ace/theme/tomorrow_night";
-    } else if (theme == "ayu") {
-      stylesheets.ayuHighlight.disabled = false;
-      stylesheets.tomorrowNight.disabled = true;
-      stylesheets.highlight.disabled = true;
-      ace_theme = "ace/theme/tomorrow_night";
+    } else if (theme == "ayu" || theme == "light") {
+      stylesheets.highlightDark.disabled = true;
+      stylesheets.highlight.disabled = false;
     } else {
-      stylesheets.ayuHighlight.disabled = true;
-      stylesheets.tomorrowNight.disabled = true;
+      stylesheets.highlightDark.disabled = true;
       stylesheets.highlight.disabled = false;
-      ace_theme = "ace/theme/dawn";
     }
 
     setTimeout(function () {
       themeColorMetaTag.content = getComputedStyle(document.documentElement).backgroundColor;
     }, 1);
 
-    if (window.ace && window.editors) {
-      window.editors.forEach(function (editor) {
-        editor.setTheme(ace_theme);
-      });
-    }
-
     var previousTheme = get_theme();
 
     if (store) {

theme/css/chrome.css

@@ -640,13 +640,15 @@ ul#searchresults span.teaser em {
   transform: rotate(90deg);
 }
 
-.spacer {
+.spacer,
+.chapter .spacer {
   width: 100%;
   height: 1px;
   margin: 5px 0px;
 }
 
-.chapter .spacer {
+.chapter .spacer,
+.chapter li.spacer {
   background-color: var(--sidebar-spacer);
 }
 

theme/css/general.css

@@ -37,6 +37,7 @@ main {
 /* make wide tables scroll if they overflow */
 .table-wrapper {
   overflow-x: auto;
+  margin-block-end: 2em;
 }
 
 /* Don't change font size in headers. */
@@ -230,6 +231,9 @@ blockquote {
   margin: 20px;
   padding: 0 20px;
   border-inline-start: 2px solid var(--warning-border);
+  /* Increase the strength of the warning */
+  font-weight: bold;
+  border-bottom: 2px solid var(--warning-border);
 }
 
 .warning:before {