Merge branch 'dev' into senpai

components/ProjectModal.tsx

@@ -19,16 +19,26 @@ const ProjectModal: NextPage<ModalInput> = ({ project, visible, setVisible }) =>
     const projectNotFoundHtml = `<div class="${"error"}">Sorry! There is no data for this project. Please check back later to see if that changed!</div>`;
     const projectServerErrorHtml = `<div class="${"error"}">Sorry! A server error happend when the project data was fetched!</div>`;
 
+    const generateFooter = (project: string, lastUpdate: string) => `<hr>
+    <div id="footer">
+<div id="footer-text">
+Last updated: ${lastUpdate} | <a href="https://git.c0ntroller.de/c0ntroller/frontpage-projects/src/branch/senpai/${project}.adoc">Document source</a>
+</div>
+</div>
+    `;
+
     useEffect(() => {
         if (project && project !== "") {
             // TODO
             // set Spinner
+            setProjectData("Loading...");
             fetch(`/api/projects/${project}`).then((res) => {
                 if (res.status === 404) setProjectData(projectNotFoundHtml);
                 if (res.status !== 200) setProjectData(projectServerErrorHtml);
                 res.text().then(data => {
                     try {
-                        setProjectData(ad.convert(data).toString());
+                        const adDoc = ad.load(data, {attributes: {showtitle: true}});
+                        setProjectData(adDoc.convert(adDoc).toString() + generateFooter(project, adDoc.getAttribute("docdatetime")));
                     } catch {
                         setProjectData(projectServerErrorHtml);
                     }
@@ -54,7 +64,7 @@ const ProjectModal: NextPage<ModalInput> = ({ project, visible, setVisible }) =>
     if (!visible) return <></>;
 
     return <div className={styles.modal} onKeyDown={onEscClose}>
-        <div ref={containerRef} className={styles.modalContainer}>
+        <div ref={containerRef} className={`${styles.modalContainer} asciidoc`}>
         </div>
     </div>;
 };

components/REPL/REPLInput.tsx

@@ -29,7 +29,7 @@ const REPLInput: NextPage<REPLInputParams> = ({historyCallback, historyClear, in
     const [cmdHistory, setCmdHistory] = useState<string[]>([]);
     const [usrInputTmp, setUsrInputTmp] = useState<string>("");
     const [cmdIf, setCmdIf] = useState<CommandInterface>(new CommandInterface(modalManipulation, []));
-    const { data: projects, error: projectsError } = useSWR("/api/projects", fetchProjects);
+    const { data: projects, error: projectsError } = useSWR("/api/projects?swr=1", fetchProjects);
 
     const setInput = (inputRef: HTMLInputElement, input: string) => {
         const nativeSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set;

package.json

@@ -9,7 +9,8 @@
   },
   "dependencies": {
     "asciidoctor": "^2.2.5",
-    "next": "12.0.7",
+    "next": "12.0.10",
+    "node-fetch": "^3.2.0",
     "phosphor-react": "^1.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -20,6 +21,7 @@
     "@types/react": "17.0.37",
     "eslint": "7.32.0",
     "eslint-config-next": "12.0.4",
+    "sass": "^1.49.7",
     "typescript": "4.5.2"
   }
 }

pages/404.tsx

@@ -0,0 +1,79 @@
+import type { NextPage } from "next";
+import Link from "next/link";
+import styles from "../styles/Errorpage.module.css";
+
+const svg = `
+<svg viewBox="30 -20 450 280" x="0" y="0">
+    <!-- Box -->
+    <polygon points="100,70 170,0 370,50 370,180" style="fill:#b58747;" />
+    <defs>
+        <linearGradient id="shadow_grad1" x1="50%" y1="0%" x2="0%" y2="50%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <defs>
+        <linearGradient id="shadow_grad2" x1="0%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <polygon points="100,70 170,0 330,100 300,120" style="fill:#876029;fill:url(#shadow_grad1)" />
+    <polygon points="100,70 170,0 170,130 100,200, 100,70" style="fill:#876029;fill:url(#shadow_grad2)"/>
+    <line x1="170" y1="0" x2="370" y2="50" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <line x1="170" y1="0" x2="170" y2="130" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <!-- Katzenschweif -->
+    <path id="${styles.schweif}" d="M 280,120 C 250 100, 310 70, 320 20" style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round" />                    
+    <!-- Box-linien -->
+    <polygon points="100,70 300,120 370,50 370,180 300,250 100,200" style="fill:#d19b4f;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="100" y2="200" />
+        <line x1="100" y1="200" x2="300" y2="250" />
+        <line x1="300" y1="250" x2="300" y2="120" />
+        <line x1="100" y1="70" x2="300" y2="120" />
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="250" x2="370" y2="180" />
+        <line x1="370" y1="50" x2="370" y2="180" />
+    </g>
+    <!-- Lappen-rechts -->
+    <polygon points="300,120 350,150 420,80 370,50" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="120" x2="350" y2="150" />
+        <line x1="350" y1="150" x2="420" y2="80" />
+        <line x1="370" y1="50" x2="420" y2="80" />
+    </g>
+    <!-- Lappen-links -->
+    <polygon points="100,70 50,100 120,30 170,0" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="170" y2="0" />
+        <line x1="100" y1="70" x2="50" y2="100" />
+        <line x1="50" y1="100" x2="120" y2="30" />
+        <line x1="170" y1="0" x2="120" y2="30" />
+    </g>
+    <!-- Text -->
+    <text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">404</text>
+    <!-- Killeraugen -->
+    <ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <rect id="${styles.blinzeln}" width="40" height="22" x="255" y="139" style="fill:#291e0f;transform:rotateZ(12deg);" />
+</svg>
+`;
+
+const Custom404: NextPage = () => {
+    return <div className={styles.container}>
+        <div id={styles.wrapper}>
+            <div id={styles.box} dangerouslySetInnerHTML={{__html: svg}}>
+            </div>
+            <div id={styles.errorText}>
+                The site you requested could not be found.<br/>
+                <Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
+            </div>
+        </div>
+    </div>;
+};
+
+export default Custom404;

pages/500.tsx

@@ -0,0 +1,79 @@
+import type { NextPage } from "next";
+import Link from "next/link";
+import styles from "../styles/Errorpage.module.css";
+
+const svg = `
+<svg viewBox="30 -20 450 280" x="0" y="0">
+    <!-- Box -->
+    <polygon points="100,70 170,0 370,50 370,180" style="fill:#b58747;" />
+    <defs>
+        <linearGradient id="shadow_grad1" x1="50%" y1="0%" x2="0%" y2="50%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <defs>
+        <linearGradient id="shadow_grad2" x1="0%" y1="0%" x2="50%" y2="100%">
+            <stop offset="0%" style="stop-color:#876029;stop-opacity:1" />
+            <stop offset="100%" style="stop-color:#000000;stop-opacity:1" />
+        </linearGradient>
+    </defs>
+    <polygon points="100,70 170,0 330,100 300,120" style="fill:#876029;fill:url(#shadow_grad1)" />
+    <polygon points="100,70 170,0 170,130 100,200, 100,70" style="fill:#876029;fill:url(#shadow_grad2)"/>
+    <line x1="170" y1="0" x2="370" y2="50" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <line x1="170" y1="0" x2="170" y2="130" style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;"/>
+    <!-- Katzenschweif -->
+    <path id="${styles.schweif}" d="M 280,120 C 250 100, 310 70, 320 20" style="fill:transparent;stroke:black;stroke-width:10;stroke-linecap:round" />                    
+    <!-- Box-linien -->
+    <polygon points="100,70 300,120 370,50 370,180 300,250 100,200" style="fill:#d19b4f;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="100" y2="200" />
+        <line x1="100" y1="200" x2="300" y2="250" />
+        <line x1="300" y1="250" x2="300" y2="120" />
+        <line x1="100" y1="70" x2="300" y2="120" />
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="250" x2="370" y2="180" />
+        <line x1="370" y1="50" x2="370" y2="180" />
+    </g>
+    <!-- Lappen-rechts -->
+    <polygon points="300,120 350,150 420,80 370,50" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="300" y1="120" x2="370" y2="50" />
+        <line x1="300" y1="120" x2="350" y2="150" />
+        <line x1="350" y1="150" x2="420" y2="80" />
+        <line x1="370" y1="50" x2="420" y2="80" />
+    </g>
+    <!-- Lappen-links -->
+    <polygon points="100,70 50,100 120,30 170,0" style="fill:#b58747;" />
+    <g style="stroke:#694f2c;stroke-width:5;stroke-linecap:round;">
+        <line x1="100" y1="70" x2="170" y2="0" />
+        <line x1="100" y1="70" x2="50" y2="100" />
+        <line x1="50" y1="100" x2="120" y2="30" />
+        <line x1="170" y1="0" x2="120" y2="30" />
+    </g>
+    <!-- Text -->
+    <text x="120" y="120" style="font-size:4em;font-weight:bold;fill:#000000;transform:rotateX(40deg) rotateY(21deg);">500</text>
+    <!-- Killeraugen -->
+    <ellipse cx="275" cy="150" rx="32" ry="20" style="fill:#291e0f;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="266" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="7" ry="5" style="fill:#4a6b2a;transform:rotateZ(12deg)" />
+    <ellipse cx="285" cy="153" rx="2" ry="5" style="fill:#000000;transform:rotateZ(12deg)" />
+    <rect id="${styles.blinzeln}" width="40" height="22" x="255" y="139" style="fill:#291e0f;transform:rotateZ(12deg);" />
+</svg>
+`;
+
+const Custom404: NextPage = () => {
+    return <div className={styles.container}>
+        <div id={styles.wrapper}>
+            <div id={styles.box} dangerouslySetInnerHTML={{__html: svg}}>
+            </div>
+            <div id={styles.errorText}>
+                The site you requested could not be found.<br/>
+                <Link href="/"><a>&gt; Back to the main page &lt;</a></Link>
+            </div>
+        </div>
+    </div>;
+};
+
+export default Custom404;

pages/_app.tsx

@@ -1,6 +1,7 @@
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import "../styles/globals.css";
+import "../styles/customAsciidoc.scss";
 
 function MyApp({ Component, pageProps }: AppProps) {
   return <>

pages/api/projects.ts

@@ -18,7 +18,7 @@ export default function handler(req: NextApiRequest, res: NextApiResponse<string
     try {
         const path = resolve("./public", "projects", "list.json");
         const data = readFileSync(path).toString();
-        console.debug("[API/projects]\tRequest for project list");
+        if (!req.query.swr) console.debug("[API/projects]\tRequest for project list");
         res.status(200).send(data);
     } catch (err) {
         console.error(`[API/projects]\tError in request for project list! Code: ${(err as IFileError).code}`);

styles/Errorpage.module.css

@@ -0,0 +1,61 @@
+.container {
+    background: #222222;
+    width: 100vw;
+    height: 100vh;
+}
+
+#errorText { 
+    margin-top:2vh;               
+    color: #fff;
+    text-align:center;
+    font-family:Arial, Helvetica, sans-serif;
+    font-size:150%;
+}
+
+#wrapper a:link, #wrapper a:visited, #wrapper a:hover, #wrapper a:active {
+    color:#fff;
+    font-weight:bold;
+    text-decoration:none;
+}
+
+#wrapper {
+    margin: auto;
+    position: relative;
+}
+
+#box {
+    max-width: 800px;
+    margin:auto;
+}
+
+@keyframes schweif {
+    0% {d: path("M 280,120 C 250 100, 310 70, 320 20");}
+    12.5% {d: path("M 280,120 C 260 100, 280 70, 310 20");}
+    25% {d: path("M 280,120 C 280 100, 260 70, 290 20");}
+    37.5% {d: path("M 280,120 C 280 100, 240 70, 270 20");}
+    50% {d: path("M 280,120 C 280 100, 240 70, 230 20");}
+    62.5% {d: path("M 280,120 C 270 100, 260 70, 250 20");}
+    75% {d: path("M 280,120 C 270 100, 280 70, 270 20");}
+    87.5% {d: path("M 280,120 C 250 100, 310 70, 290 20");}
+    100% {d: path("M 280,120 C 250 100, 310 70, 320 20");}
+}
+
+#schweif {
+    animation-name: schweif;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
+#box svg:hover > #schweif {
+    animation-duration:1s;
+}
+
+#blinzeln {
+    fill-opacity:1;
+    transition: fill-opacity 0.5s;
+}
+
+#box svg:hover > #blinzeln {
+    fill-opacity:0;
+}

styles/ProjectModal.module.css

@@ -10,10 +10,11 @@
 }
 
 .modalContainer {
-    background: #333;
+    background: #272b30;
     color: #ccc;
     width: 100%;
     height: 100%;
     padding: 20px;
     border-radius: 20px;
+    overflow-y: auto;
 }

styles/asciidocBootSlate.css

@@ -0,0 +1,442 @@
+/* MIT License
+
+Copyright (c) [year] [fullname]
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. */
+
+
+/* Source: https://raw.githubusercontent.com/darshandsoni/asciidoctor-skins/c98a8ab9b27571e5b63d75912a3c753cc72ed8e4/css/boot-slate.css */
+
+
+/* Based on Slate from Bootswatch (https://bootswatch.com/slate/) */
+
+
+/* document body (contains all content) */
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #c8c8c8;
+    background-color: #272b30;
+    margin-left: 10%;
+    margin-right: 10%;
+}
+
+
+/* document header (contains title etc) */
+
+#header {
+    width: 100%;
+}
+
+#header>h1 {
+    border-bottom: 1px solid #ddddd8;
+    padding-bottom: 8px;
+}
+
+
+/* headings */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 500;
+    line-height: 1.1;
+    color: inherit;
+}
+
+h1,
+h2,
+h3 {
+    margin-top: 20px;
+    margin-bottom: 10px;
+}
+
+h4,
+h5,
+h6 {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    font-size: 4em;
+    /*   font-size: 36px; */
+}
+
+h2 {
+    font-size: 30px;
+}
+
+h3 {
+    font-size: 24px;
+}
+
+h4 {
+    font-size: 18px;
+}
+
+h5 {
+    font-size: 14px;
+}
+
+h6 {
+    font-size: 12px;
+}
+
+
+/* plain paragraph text */
+
+.paragraph {
+    /*   font-family: sans-serif; */
+    margin: 0 0 10px;
+}
+
+p {
+    /*   font-family: sans-serif; */
+    margin: 0 0 10px;
+}
+
+
+/* blockquote text */
+
+.quoteblock {
+    font-style: italic;
+}
+
+blockquote {
+    padding: 10px 20px;
+    margin: 0 0 20px;
+    font-size: 17.5px;
+    border-left: 5px solid #7a8288;
+}
+
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
+    margin-bottom: 0;
+}
+
+.blockquote-reverse,
+blockquote.pull-right {
+    padding-right: 15px;
+    padding-left: 0;
+    border-right: 5px solid #7a8288;
+    border-left: 0;
+    text-align: right;
+}
+
+.blockquote-reverse footer:before,
+blockquote.pull-right footer:before,
+.blockquote-reverse small:before,
+blockquote.pull-right small:before,
+.blockquote-reverse .small:before,
+blockquote.pull-right .small:before {
+    content: '';
+}
+
+.blockquote-reverse footer:after,
+blockquote.pull-right footer:after,
+.blockquote-reverse small:after,
+blockquote.pull-right small:after,
+.blockquote-reverse .small:after,
+blockquote.pull-right .small:after {
+    content: '\00A0 \2014';
+}
+
+
+/* blockquote attribution text */
+
+.attribution,
+.cite,
+blockquote footer,
+blockquote small,
+blockquote .small {
+    display: block;
+    line-height: 1.42857143;
+    color: #7a8288;
+}
+
+.attribution:before,
+blockquote footer:before,
+blockquote small:before,
+blockquote .small:before {
+    content: '\2014 \00A0';
+}
+
+
+/* unordered list */
+
+ul,
+ol {
+    margin-top: 0;
+    margin-bottom: 10px;
+}
+
+ul ul,
+ol ul,
+ul ol,
+ol ol {
+    margin-bottom: 0;
+}
+
+
+/* links */
+
+a {
+    color: #ffffff;
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+    color: #ffffff;
+    text-decoration: underline;
+}
+
+a:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+
+/* horizontal rules */
+
+hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #1c1e22;
+}
+
+
+/* table */
+
+table {
+    background-color: transparent;
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 21px;
+    border-collapse: collapse;
+}
+
+table col[class*="col-"] {
+    position: static;
+    float: none;
+    display: table-column;
+}
+
+table td[class*="col-"],
+table th[class*="col-"] {
+    position: static;
+    float: none;
+    display: table-cell;
+}
+
+
+/* table caption */
+
+caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #7a8288;
+    text-align: left;
+}
+
+
+/* table header row */
+
+thead {
+    border-bottom: 2px solid #1c1e22;
+}
+
+
+/* table header cell */
+
+th {
+    text-align: left;
+    padding-left: 8px;
+}
+
+
+/* table footer */
+
+tfoot {
+    color: #807F81;
+    border-top: 1px solid #1c1e22;
+}
+
+
+/* table cell */
+
+td {
+    border-top: 1px solid #1c1e22;
+}
+
+td p {
+    margin: auto;
+    padding: 8px;
+}
+
+
+/* table body */
+
+tbody>tr:nth-of-type(odd) {
+    background-color: #353a41;
+}
+
+tbody>tr:hover {
+    background-color: #49515a;
+}
+
+
+/* inline code */
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+code {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #3a3f44;
+    background-color: #f5f5f5;
+    border-radius: 4px;
+}
+
+kbd {
+    padding: 2px 4px;
+    font-size: 90%;
+    color: #ffffff;
+    background-color: #333333;
+    border-radius: 3px;
+    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+
+kbd kbd {
+    padding: 0;
+    font-size: 100%;
+    font-weight: bold;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+pre {
+    display: block;
+    padding: 9.5px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.42857143;
+    word-break: break-all;
+    word-wrap: break-word;
+    color: #3a3f44;
+    background-color: #f5f5f5;
+    border: 1px solid #cccccc;
+    border-radius: 4px;
+}
+
+pre code {
+    padding: 0;
+    font-size: inherit;
+    color: inherit;
+    white-space: pre-wrap;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+
+/* image */
+
+img {
+    max-width: 100%;
+    vertical-align: middle;
+}
+
+
+/* footer section */
+
+#footer {
+    margin-top: 22px;
+    padding: 14px 16px;
+    background-color: #3a3f44;
+}
+
+
+/* responsiveness fixes */
+
+video {
+    max-width: 100%;
+}
+
+
+/* table of Contents sidebar */
+
+#toctitle {
+    color: #272b30;
+}
+
+#toc ul {
+    display: inline;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+}
+
+#toc li {
+    display: block;
+}
+
+#toc a {
+    background-color: #3a3f44;
+    float: left;
+    text-align: center;
+    padding: 14px 16px;
+    text-decoration: none;
+}
+
+#toc li a:hover {
+    background-color: #272b2e;
+    text-decoration: none;
+}
+
+#toc:after {
+    content: " ";
+    visibility: hidden;
+    display: block;
+    height: 0;
+    clear: both;
+}
+
+@media all and (max-width: 600px) {
+    table {
+        width: 55vw!important;
+        font-size: 3vw;
+    }
+}

styles/customAsciidoc.scss

@@ -0,0 +1,25 @@
+.asciidoc {
+    /*@import "../node_modules/@asciidoctor/core/dist/css/asciidoctor.css";*/
+    @import "./asciidocBootSlate";
+    h1 {
+        color: var(--repl-color-link, #2ac02a);
+        font-size: 3em;
+    }
+    h2,
+    h3 {
+        font-weight: bold;
+        text-decoration: underline;
+    }
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        color: var(--repl-color, #188a18);
+    }
+    font-family: sans-serif;
+    #preamble {
+        font-style: italic;
+        font-size: 120%;
+    }
+}

testfile

@@ -1 +0,0 @@
-Miau