From 4a65acf417848a1f75d06e6019da9b26a19deeab Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Thu, 25 Feb 2021 09:01:45 +0000
Subject: [PATCH] docs: fix links from TOC to Headings and improve appearance
 of docs (a little) (#4866)

* docs: fix links from TOC to Headings
* docs: Styling

Just a little modernisation of the appearance of the documentation

* Update src/bin/doc/package.json

Co-authored-by: Richard Hansen <rhansen@rhansen.org>

Co-authored-by: Richard Hansen <rhansen@rhansen.org>
---
 doc/assets/style.css          | 69 +++++++++++------------------------
 src/bin/doc/html.js           |  6 +++
 src/bin/doc/package-lock.json | 13 -------
 src/bin/doc/package.json      |  2 +-
 4 files changed, 28 insertions(+), 62 deletions(-)
 delete mode 100644 src/bin/doc/package-lock.json

diff --git a/doc/assets/style.css b/doc/assets/style.css
index 95034c90a..8c6720fa8 100644
--- a/doc/assets/style.css
+++ b/doc/assets/style.css
@@ -1,62 +1,35 @@
-html {
-  border-top: solid green 5pt;
-}
-
-body.apidoc {
-  width: 60%;
-  min-width: 10cm;
+body{
+  border-top: solid #44b492 5pt;
+  line-height:150%;
+  font-family: 'Quicksand',sans-serif;
+  color: #313b4a;
+  max-width:800px;
   margin: 0 auto;
+  padding: 20px;
 }
 
-#header {
-  padding: 1pc 0;
-  color: #111;
+a{
+  color: #555;
 }
 
-a,
-a:active {
-  color: #272;
-}
-a:focus,
-a:hover {
-  color: #050;
+h1{
+  color: #44b492;
+  line-height:100%;
 }
 
-#apicontent a.mark,
-#apicontent a.mark:active {
-  float: right;
-  color: #BBB;
-  font-size: 0.7cm;
-  text-decoration: none;
-}
-#apicontent a.mark:focus,
-#apicontent a.mark:hover {
-  color: #AAA;
+a:hover{
+  color: #44b492;
 }
 
-#apicontent code {
-  padding: 1px;
-  background-color: #EEE;
-  border-radius: 4px;
-  border: 1px solid #DDD;
-}
-#apicontent pre>code {
-  display: block;
-  overflow: auto;
-  padding: 5px;
+pre{
+  background-color: #e0e0e0;
+  padding:20px;
 }
 
-table, th, td {
-  text-align: left;
-  border: 1px solid gray;
-  border-collapse: collapse;
+code{
+  background-color: #e0e0e0;
 }
 
-th {
-  padding: 0.5em;
-  background: #EEE;
-}
-
-td {
-  padding: 0.5em;
+img {
+  max-width: 100%;
 }
diff --git a/src/bin/doc/html.js b/src/bin/doc/html.js
index 2c38aec23..f4be7ce13 100644
--- a/src/bin/doc/html.js
+++ b/src/bin/doc/html.js
@@ -137,6 +137,12 @@ const getSection = (lexed) => {
 const buildToc = (lexed, filename, cb) => {
   let toc = [];
   let depth = 0;
+
+  marked.setOptions({
+    headerIds: true,
+    headerPrefix: `${filename}_`,
+  });
+
   lexed.forEach((tok) => {
     if (tok.type !== 'heading') return;
     if (tok.depth - depth > 1) {
diff --git a/src/bin/doc/package-lock.json b/src/bin/doc/package-lock.json
deleted file mode 100644
index 2058974ec..000000000
--- a/src/bin/doc/package-lock.json
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-  "name": "node-doc-generator",
-  "version": "0.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "marked": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-1.1.1.tgz",
-      "integrity": "sha512-mJzT8D2yPxoPh7h0UXkB+dBj4FykPJ2OIfxAWeIHrvoHDkFxukV/29QxoFQoPM6RLEwhIFdJpmKBlqVM3s2ZIw=="
-    }
-  }
-}
diff --git a/src/bin/doc/package.json b/src/bin/doc/package.json
index f484a5c64..a1a83423c 100644
--- a/src/bin/doc/package.json
+++ b/src/bin/doc/package.json
@@ -7,7 +7,7 @@
     "node": ">=10.17.0"
   },
   "dependencies": {
-    "marked": "1.1.1"
+    "marked": "^2.0.0"
   },
   "devDependencies": {},
   "optionalDependencies": {},