From 600dd9a8c1e65ae79fd4c234a6620e829a2e1deb Mon Sep 17 00:00:00 2001 From: earnest ma Date: Tue, 30 Nov 2021 13:55:02 -0500 Subject: [PATCH] feat: Add docs/ comments feature Expandable section, can be configured --- assets/css/main.css | 25 ++++++++++++++++++++++ assets/js/collapsible.js | 14 ++++++++++++ layouts/_default/baseof.html | 25 +++++++++++++--------- layouts/partials/docscomments-content.html | 1 + layouts/partials/docscomments.html | 16 ++++++++++++++ 5 files changed, 71 insertions(+), 10 deletions(-) create mode 100644 assets/js/collapsible.js create mode 100644 layouts/partials/docscomments-content.html create mode 100644 layouts/partials/docscomments.html diff --git a/assets/css/main.css b/assets/css/main.css index 7552cf3..69bc2a9 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -491,3 +491,28 @@ pre code { text-decoration: none; padding: 1 5px; } + + /* Open and close the collapsible content button */ + .collapsible { + background-color: #eee; + color: #444; + cursor: pointer; + padding: 18px; + width: 100%; + border: none; + text-align: left; + outline: none; + font-size: 15px; +} + +.active, .collapsible:hover { + background-color: #ccc; +} + +/* Style the collapsible content. Note: hidden by default */ +.collapsible_content { + padding: 0 18px; + max-height: 0; + overflow: hidden; + transition: max-height 0.2s ease-out; +} diff --git a/assets/js/collapsible.js b/assets/js/collapsible.js new file mode 100644 index 0000000..94e925d --- /dev/null +++ b/assets/js/collapsible.js @@ -0,0 +1,14 @@ +var coll = document.getElementsByClassName("collapsible"); +var i; + +for (i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.maxHeight){ + content.style.maxHeight = null; + } else { + content.style.maxHeight = content.scrollHeight + "px"; + } + }); +} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 7f33e52..06d3fbb 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -1,12 +1,17 @@ - {{- partial "head.html" . }} - {{ partial "head-custom.html" . -}} - -
{{ partial "header.html" . }}
-
- {{- block "main" . }}{{- end }} -
- - - +{{- partial "head.html" . }} +{{ partial "head-custom.html" . -}} + + +
{{ partial "header.html" . }}
+
+ {{- block "main" . }}{{- end }} + + {{ partial "docscomments.html" . }} +
+ + + + + \ No newline at end of file diff --git a/layouts/partials/docscomments-content.html b/layouts/partials/docscomments-content.html new file mode 100644 index 0000000..43f19ae --- /dev/null +++ b/layouts/partials/docscomments-content.html @@ -0,0 +1 @@ +

You weren't expecting to see this! Set up your own copy of layouts/partials/docscomments-content.html with the code you want.

\ No newline at end of file diff --git a/layouts/partials/docscomments.html b/layouts/partials/docscomments.html new file mode 100644 index 0000000..aaae508 --- /dev/null +++ b/layouts/partials/docscomments.html @@ -0,0 +1,16 @@ +{{ if not .Site.Params.disableDocsComments }} +{{ if not .Page.Params.disableDocsComments }} +{{ if hugo.IsProduction }} + +
+ {{ partial "docscomments-content.html" . }} +
+ +{{- $collapsiblejs := resources.Get "/js/collapsible.js" | js.Build "collapsible.js" | minify | fingerprint }} + +{{ else }} +

Enable HUGO_ENV=production to see.

+{{ end }} + +{{ end }} +{{ end }} \ No newline at end of file