feat: Add docs/ comments feature

Expandable section, can be configured
main
earnest ma 2021-11-30 13:55:02 -05:00
parent cfb0ae3b4e
commit 600dd9a8c1
Signed by: earnest ma
GPG Key ID: A343F43342EB6E2A
5 changed files with 71 additions and 10 deletions

View File

@ -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;
}

14
assets/js/collapsible.js Normal file
View File

@ -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";
}
});
}

View File

@ -1,12 +1,17 @@
<!DOCTYPE html>
<html>
{{- partial "head.html" . }}
{{ partial "head-custom.html" . -}}
<body>
<header>{{ partial "header.html" . }}</header>
<div id="content">
{{- block "main" . }}{{- end }}
</div>
<footer>{{ partial "footer.html" . -}}</footer>
</body>
</html>
{{- partial "head.html" . }}
{{ partial "head-custom.html" . -}}
<body>
<header>{{ partial "header.html" . }}</header>
<div id="content">
{{- block "main" . }}{{- end }}
{{ partial "docscomments.html" . }}
</div>
<footer>{{ partial "footer.html" . -}}</footer>
</body>
</html>

View File

@ -0,0 +1 @@
<p>You weren't expecting to see this! Set up your own copy of layouts/partials/docscomments-content.html with the code you want.</p>

View File

@ -0,0 +1,16 @@
{{ if not .Site.Params.disableDocsComments }}
{{ if not .Page.Params.disableDocsComments }}
{{ if hugo.IsProduction }}
<button type="button" class="collapsible">Expand</button>
<div class="collapsible_content">
{{ partial "docscomments-content.html" . }}
</div>
{{- $collapsiblejs := resources.Get "/js/collapsible.js" | js.Build "collapsible.js" | minify | fingerprint }}
<script src="{{ $collapsiblejs.Permalink }}"></script>
{{ else }}
<p>Enable HUGO_ENV=production to see.</p>
{{ end }}
{{ end }}
{{ end }}