Add global TOC styling. Fixes #7

ldeluigi · ldeluigi · commit 8eb8f3c7be0c · 2021-05-24T15:04:59.000+02:00
diff --git a/Dockerfile b/Dockerfile
@@ -30,6 +30,7 @@ ADD script/md_file_tree.py /usr/local/src/toc.py
 
 # HTML
 COPY html/template.html /usr/local/src/template.html
+COPY html/contents_template.html /usr/local/src/contents_template.html
 # CSS
 COPY css/style.css /usr/local/src/style.css
 # JS
diff --git a/css/style.css b/css/style.css
@@ -423,6 +423,7 @@ nav a.right {
 
 .toc ul {
   list-style-type: none;
+  padding: 0;
 }
 
 .toc li.uncollapsible {
@@ -481,7 +482,6 @@ nav a.right {
 .toc ul.content-inner {
   border-bottom-left-radius: 7px;
   border-bottom-right-radius: 7px;
-  padding-left: 3rem;
 }
 
 @keyframes highlight {
diff --git a/html/contents_template.html b/html/contents_template.html
@@ -0,0 +1,15 @@
+<!doctype html>
+
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>___TITLE___</title>
+  ___CSS___
+  ___JS___
+</head>
+<body>
+    <div class="toc">
+    ___BODY___
+    </div>
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -1,17 +1,14 @@
 document.addEventListener("DOMContentLoaded", function() {
+    // COLLAPSIBLE TOC HANDLER
     let external_lis = document.querySelectorAll('div.toc>ul li');
     Array.from(external_lis).forEach(li => {
-
         li.classList.add("collapsed");
-        console.log(Array.from(li.childNodes.values()))
-
         if (li.hasChildNodes() && Array.from(li.childNodes.values()).some(e => e.nodeType === 1 && e.nodeName == "UL")) {
             li.classList.add("collapsible");
         } else {
             li.classList.add("uncollapsible");
         };
     });
-
     let internal_uls = document.querySelectorAll('div.toc>ul li>ul');
     Array.from(internal_uls).forEach(ul => {
         ul.classList.add("collapsed-content");
@@ -21,7 +18,6 @@ document.addEventListener("DOMContentLoaded", function() {
         li.addEventListener("click",
             e => {
                 e.stopPropagation();
-                console.log("external");
                 if (li.classList.contains("collapsed")) {
                     li.classList.replace("collapsed", "visible");
                     Array.from(li.children).forEach(ul => {
@@ -33,6 +29,7 @@ document.addEventListener("DOMContentLoaded", function() {
                         ul.classList.replace("visible-content", "collapsed-content");
                     });
                 };
-            })
+            }
+        );
     });
 });
diff --git a/script/try_convert.sh b/script/try_convert.sh
@@ -56,7 +56,11 @@ if [ -f "${SRC}${FILE}" ]; then
         cp "${DEST}${RESULTNAME}" "${TMP_DIR}${TMP_FILE}"
         
         # Copy the html template to destination
-        cp /usr/local/src/template.html "${DEST}${RESULTNAME}"
+        if [ "${FILE}" = "contents.md" ] ; then
+            cp /usr/local/src/contents_template.html "${DEST}${RESULTNAME}"
+        else
+            cp /usr/local/src/template.html "${DEST}${RESULTNAME}"
+        fi
 
         # Substitute strings
         sed -i "s/___CSS___/${ESCAPED_CSS}/g" "${DEST}${RESULTNAME}"

Original file line number	Diff line number	Diff line change
`@@ -423,6 +423,7 @@ nav a.right {`
`423`	`423`
`424`	`424`	`.toc ul {`
`425`	`425`	`list-style-type: none;`
	`426`	`+ padding: 0;`
`426`	`427`	`}`
`427`	`428`
`428`	`429`	`.toc li.uncollapsible {`
`@@ -481,7 +482,6 @@ nav a.right {`
`481`	`482`	`.toc ul.content-inner {`
`482`	`483`	`border-bottom-left-radius: 7px;`
`483`	`484`	`border-bottom-right-radius: 7px;`
`484`		`- padding-left: 3rem;`
`485`	`485`	`}`
`486`	`486`
`487`	`487`	`@keyframes highlight {`