Finalise downcute

6chaoran · Nov 5, 2020 · 8030e26 · 8030e26
1 parent d136d32
commit 8030e26
Show file tree

Hide file tree

Showing 12 changed files with 311 additions and 265 deletions.
diff --git a/NAMESPACE b/NAMESPACE
@@ -3,6 +3,7 @@
 S3method(knit_print,pilltabs)
 S3method(print,pilltabs)
 export(create.doc)
+export(downcute)
 export(html_clean)
 export(html_docco)
 export(material)

diff --git a/R/downcute.R b/R/downcute.R
@@ -32,7 +32,7 @@
 downcute <- function(fig_width = 8,
                        fig_height = 5,
                        fig_caption = TRUE,
-                       highlight = "breezedark",
+                       highlight = NULL,
                        lightbox = FALSE,
                        thumbnails = FALSE,
                        gallery = FALSE,
@@ -89,6 +89,5 @@ html_dependency_prism <- function() {
   htmltools::htmlDependency(name = "prism",
                  version = "1.22",
                  src = system.file("templates/prism", package = "rmdformats"),
-                 script = "prism.js",
-                 stylesheet = "prism.css")
+                 script = "prism.js")
 }
diff --git a/inst/templates/downcute/downcute.css b/inst/templates/downcute/downcute.css
@@ -715,7 +715,7 @@ a {
     border-bottom: 1px solid var(--border-color);
     border-top: 1px solid var(--border-color) !important;
     font-weight: 400;
-    font-size: 12px;
+    font-size: 14px;
     padding: 10px
 }
 
@@ -755,7 +755,6 @@ a {
     overflow: auto;
     position: relative;
     border: none;
-    margin: 0;
     z-index: 2;
     font-family: var(--code-font);
     white-space: pre;
@@ -959,7 +958,7 @@ h1.title {
 }
 
 h1.subtitle {
-    font-size: 2rem;
+    font-size: 1.7rem;
     margin: -0.5rem 0 1.4rem;
     font-weight: 300;
     line-height: 1.1
@@ -1219,12 +1218,12 @@ h1.subtitle {
 
 @media screen and (max-width:768px) {
     .dark-theme-toggler {
-        padding: 0 20px
+        padding: 0 40px
     }
 }
 
 [data-position="sidebar:post-end"] .dark-theme-toggler {
-    padding: 0 20px
+    padding: 0 40px
 }
 
 .toggle {
@@ -1355,7 +1354,7 @@ button.code-folding-btn {
 }
 
 .page-content a.anchor-section {
-    color: #BBB;
+    color: var(--anchor-color);
     text-decoration: none;
 }
 
@@ -1443,6 +1442,7 @@ button.code-folding-btn {
     text-align: center;
     font-style: italic;
     font-size: 90%;
+    margin-top: 0;
 }
 
 /* Table */
@@ -1493,3 +1493,66 @@ button.code-folding-btn {
 .page-content table.dataTable.display tbody td {
     border-top: 1px solid var(--border-color);
 }
+
+/* TOC and scrollspy */
+
+#toc ul.nav {
+    margin-left: 40px;
+    padding-left: 0;
+}
+
+#toc ul.nav li {
+    color: var(--sidebar-link-color);
+    font-size: .9rem;
+}
+
+#toc ul.nav li a {
+    display: block;
+    color: var(--sidebar-link-color);
+    font-size: .9rem;
+    padding-left: 0;
+}
+
+#toc ul.nav li a:hover {
+    color: var(--sidebar-link-active-color);
+    background-color: inherit;
+}
+
+#toc ul.nav > li.active > a,
+#toc ul.nav ul > li.active > a {
+    font-weight: bold;
+}
+
+#toc ul.nav li ul {
+    margin-left: 3px;
+    padding-left: 15px;
+    border-left: 1px solid var(--toc-border-color);
+}
+
+#toc ul.nav li ul li {
+    list-style: none;
+    max-height: 0px;
+    transition: max-height .4s ease-in;
+    overflow: hidden;
+}
+
+#toc ul.nav li.active ul li {
+    max-height: 26px;
+    transition: max-height .4s ease-out;
+}
+
+/* Authors */
+
+.Content p.authors,
+.Content p.date {
+    margin: 0 10px;
+}
+.Content p.authors {
+    margin-top: -.6rem;
+}
+.Content p.date span, 
+.Content p.authors span {
+    font-size: .9rem;
+    padding-right: 10px;
+    opacity: 0.4; 
+}
diff --git a/inst/templates/downcute/downcute.js b/inst/templates/downcute/downcute.js
@@ -32,7 +32,7 @@ const downcute_variables_default = `
     --loader-primary-color: #f3f3f3;
     --loader-secondary-color: #ecebeb;
     --table-header-background: #fafafa;
-    --table-header-color: #666;
+    --table-header-color: #555;
     --docute-select-height: 38px;
     --search-icon-color: #999;
     --search-focus-border-color: #ccc;
@@ -44,6 +44,8 @@ const downcute_variables_default = `
     --datatable-odd-background: #f9f9f9;
     --datatable-even-background: #ffffff;
     --datatable-hover-background: #f6f6f6;
+    --anchor-color: #bbbbbb;
+    --toc-border-color: #aaaaaa;
 }
 `
 
@@ -58,7 +60,7 @@ const downcute_variables_dark = `
     --sidebar-width: 280px;
     --sidebar-background: var(--page-background);
     --sidebar-link-color: var(--text-color);
-    --sidebar-link-active-color: var(--text-color);
+    --sidebar-link-active-color: var(--accent-color);
     --sidebar-link-arrow-color: #999;
     --main-background: var(--page-background);
     --border-color: #3e4147;
@@ -96,27 +98,33 @@ const downcute_variables_dark = `
     --datatable-odd-background: #2f3136;
     --datatable-even-background: #333539;
     --datatable-hover-background: #35374B;
+    --anchor-color: #666666;
+    --toc-border-color: #888888;
 }
 `
 
+// CSS variables
+const head = document.head;
+const variables_style = document.createElement("style");
+variables_style.id = "downcute-css-variables";
+variables_style.innerHTML = downcute_variables_default;
+head.appendChild(variables_style);
 
 window.addEventListener("load", (event) => {
-    /*let code_el = document.querySelectorAll("pre[class] code");
+
+    // Prism highlighting
+    let code_el = document.querySelectorAll("pre[class] code");
     code_el.forEach(el => {
         const classes = el.parentNode.className.split(" ");
         classes.forEach(classe => {
             if (classe != 'sourceCode') {
                 el.classList.add('language-' + classe);
             }
         })
-    })*/
-
-    const head = document.head;
-    const variables_style = document.createElement("style");
-    variables_style.id = "downcute-css-variables";
-    variables_style.innerHTML = downcute_variables_default;
-    head.appendChild(variables_style);
+    })
+    Prism.highlightAll();
 
+    // Dark mode 
     const toggler = document.querySelector(".dark-theme-toggler .toggle");
     toggler.addEventListener("click", (event) => {
         toggler.classList.toggle("checked");
@@ -128,6 +136,9 @@ window.addEventListener("load", (event) => {
 
     })
 
+    // ScrollSpy also requires that we use a Bootstrap nav component.
+    $('#toc ul').first().addClass('nav');
+    $('body').scrollspy({target: '#toc'});
 
 })