refactor: improve wiki css

Author: fraxken

esbuild.config.js

@@ -13,11 +13,13 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const kPublicDir = path.join(__dirname, "public");
 const kOutDir = path.join(__dirname, "dist");
 const kImagesDir = path.join(kPublicDir, "img");
+const kNodeModules = path.join(__dirname, "node_modules");
 
 await esbuild.build({
   entryPoints: [
     path.join(kPublicDir, "js", "master.js"),
     path.join(kPublicDir, "css", "style.css"),
+    path.join(kNodeModules, "highlight.js", "styles", "github.css"),
     ...getBuildConfiguration().entryPoints
   ],
   loader: {

public/css/reset.css

@@ -89,7 +89,7 @@ video {
   border: 0;
   font-size: 100%;
   font: inherit;
-  vertical-align: baseline;
+  /* vertical-align: baseline; */
 }
 
 /* HTML5 display-role reset for older browsers */

views/index.html

@@ -8,6 +8,7 @@
 
 <link rel="stylesheet" href="public/css/style.css" />
 <link rel="stylesheet" href="workspaces/documentation-ui/src/css/main.css" />
+<link rel="stylesheet" href="node_modules/highlight.js/styles/github.css" />
 <script src="public/js/master.js" defer></script>
 <title>Node-Secure</title>
 

workspaces/documentation-ui/index.js

@@ -16,9 +16,11 @@ const kSASTWarnings = [
   "unsafe-import",
   "unsafe-regex",
   "unsafe-stmt",
+  "shady-link",
   "encoded-literal",
   "short-identifiers",
   "suspicious-literal",
+  "suspicious-file",
   "obfuscated-code",
   "weak-crypto"
 ].map((name) => ({ name }));
@@ -80,7 +82,8 @@ export function render(rootElement, options = {}) {
 
   const header = new Header(kHeaderMenus, { defaultName: "flags" });
   const mainContainer = utils.createDOMElement("div", {
-    className: "documentation--main", childs: [header.dom, ...containers]
+    className: "documentation--main",
+    childs: [header.dom, ...containers]
   });
 
   for (const node of rootElement.childNodes) {

workspaces/documentation-ui/package.json

@@ -26,6 +26,7 @@
   "license": "MIT",
   "dependencies": {
     "@nodesecure/flags": "^2.4.0",
+    "highlight.js": "^11.9.0",
     "markdown-it": "^13.0.1"
   }
 }

workspaces/documentation-ui/src/components/header.js

@@ -25,12 +25,10 @@ export class Header {
 
     const ul = utils.createDOMElement("ul", {
       childs: [
-        ...menu.map((item) => {
-          return utils.createDOMElement("li", {
-            text: item.name,
-            attributes: { "data-menu": item.title }
-          });
-        })
+        ...menu.map((item) => utils.createDOMElement("li", {
+          text: item.name,
+          attributes: { "data-menu": item.title }
+        }))
       ]
     });
 

workspaces/documentation-ui/src/css/content.css

@@ -12,7 +12,7 @@
   max-width: 100%;
 }
 
-.documentation--content span {
+.documentation--content div>span {
   background: #b8e9ff;
   padding: 2px;
   border-radius: 2px;
@@ -45,15 +45,39 @@
   height: 26px;
   font-size: 22px;
   border-bottom: 1px solid #3722AF;
-  margin-top: 2.5rem;
+  margin-top: 2rem;
   margin-bottom: 1rem;
   font-weight: bold;
 }
 
+.documentation--content ul+h2 {
+  margin-top: 1rem !important;
+}
+
+.documentation--content h3 {
+  height: 26px;
+  font-size: 18px;
+  margin-top: 1rem;
+  margin-bottom: 0.5rem;
+  border-bottom: 1px solid #d4d4d4;
+  font-weight: bold;
+}
+
 .documentation--content p {
   text-align: justify;
-  line-height: 1.20;
+  line-height: 1.50;
   color: #314249;
+  margin-right: 10px;
+}
+
+.documentation--content p>code {
+  background: #feffd5;
+  padding: 1px 5px;
+  border-radius: 4px;
+}
+
+.documentation--content p+p {
+  margin-top: 10px;
 }
 
 .documentation--content p.note {
@@ -65,37 +89,61 @@
   border-radius: 2px;
   box-sizing: border-box;
 }
-.documentation--content p.note > span {
+
+.documentation--content blockquote {
+  background: #81d4fa59;
+  color: #283593 !important;
+  border-left: 5px solid #01579B;
+  margin: 0.5em 10px;
+  padding: 0.5em 10px;
+}
+
+.documentation--content blockquote p {
+  display: inline;
+}
+
+.documentation--content blockquote strong,
+.documentation--content blockquote code {
+  font-weight: bold;
+}
+
+.documentation--content p.note>span {
   background: #FFF9C4;
 }
 
 .documentation--content ul {
-  margin: 1rem 0;
-  list-style: disc !important;
-  border-radius: 4px;
-  box-shadow: 1px 1px 10px rgb(20 20 20 / 10%);
+  margin: 0.5rem 0;
+  box-shadow: 1px 1px 10px rgba(20, 20, 20, 0.205);
+  margin-right: 10px;
 }
 
 .documentation--content ul li {
-  min-height: 36px;
-  display: flex;
-  align-items: center;
-  padding: 2px 10px;
+  padding: 7px 10px;
+  border-radius: 4px;
+  background: #FFF;
 }
 
-.documentation--content ul li:nth-child(odd) {
-  background: #ECEFF1;
+.documentation--content ul li+li {
+  margin-top: 3px;
 }
 
-.documentation--content ul li:nth-child(even) {
-  background: #CFD8DC;
+.documentation--content ul li:before {
+  content: "• ";
 }
 
+.documentation--content ul li a {
+  color: #1976D2;
+}
+
+.documentation--content ul li strong,
+.documentation--content ul li code {
+  font-weight: bold;
+}
 
 table {
   width: 100%;
   border-spacing: 2px;
-  table-layout:fixed;
+  table-layout: fixed;
 }
 
 table thead tr th {
@@ -135,16 +183,24 @@ pre {
   word-wrap: break-word;
   overflow: auto;
   border-radius: 4px;
+  flex-shrink: 0;
+  margin-top: 10px !important;
+  margin-right: 10px !important;
+}
+
+pre+p {
+  margin-top: 10px;
+}
+
+pre code.hljs {
+  font-size: 16px;
 }
 
 pre code {
   font-family: "Inconsolata", "Monaco", "Consolas", "Andale Mono", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
   display: block;
-  margin: 0 0 0 60px;
   padding: 15px 16px 14px;
-  border-left: 1px solid #37474F;
   overflow-x: auto;
   font-size: 13px;
   line-height: 19px;
-  color: #ddd;
 }

workspaces/documentation-ui/src/fetch.js

@@ -3,6 +3,12 @@ import * as CONSTANTS from "./constants.js";
 
 // Import Third-party Dependencies
 import MarkdownIt from "markdown-it";
+import hljs from "highlight.js/lib/core";
+import javascript from "highlight.js/lib/languages/javascript";
+import json from "highlight.js/lib/languages/json";
+
+hljs.registerLanguage("javascript", javascript);
+hljs.registerLanguage("json", json);
 
 // CONSTANTS
 const kRawGithubFlagsURL = "https://raw.githubusercontent.com/NodeSecure/flags/main/src/flags";
@@ -78,4 +84,5 @@ export async function fetchAndRenderByMenu(menuElement, kind = "flags") {
 
   const documentContentElement = document.querySelector(`.documentation--${kind} .${CONSTANTS.DIV_CONTENT}`);
   documentContentElement.innerHTML = kind === "flags" ? htmlResponse : `<div>${htmlResponse}</div>`;
+  hljs.highlightAll();
 }