Initial commit

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Alexandru-Ioan Pop
+
+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.

README.md

@@ -0,0 +1,47 @@
+# hugo-universal-collapsible
+A Hugo plugin for collapsible sections using only vanilla JavaScript and CSS.
+
+The tag is split into 2 sections - `above` and `below` the fold.
+Arbitrarily complex Markdown and HTML content is supported in either section. You can even nest multiple collapsibles!
+
+# Installation
+Copy the `layouts` and `static` folders to your Hugo site root. Ensure that the CSS and JS files are copied over to your output (`public`) folder when rendering. The expectation is that they will be accessible at `<BaseURL>/<ext>/collapse.<ext>`. This can be changed as needed in `collapse.html`.
+
+If one of the sections (`above`/`below`) contains HTML (e.g. from another shortcode), you might have to enable unsafe rendering in `config.toml` (depending on your Hugo version):
+
+```
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
+```
+
+# Demo
+
+```
+{{< collapse >}}
+{{< collapse/above >}}
+The following section is too long...
+{{< /collapse/above >}}
+{{< collapse/below >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+  {{< collapse >}}
+  {{< collapse/above >}}
+  I'm nested!
+  {{< /collapse/above >}}
+  {{< collapse/below >}}
+  Aenean lacinia condimentum magna ac tincidunt.
+  {{< /collapse/below >}}
+  {{< /collapse >}}
+
+{{< /collapse/below >}}
+{{< /collapse >}}
+```
+
+![demo](demo/demo.gif)
+
+Credit for JS/CSS:
+
+Jason Knight
+https://levelup.gitconnected.com/collapsible-sections-with-or-without-javascript-3fd871955a9d

demo/demo.md

@@ -0,0 +1,18 @@
+{{< collapse >}}
+{{< collapse/above >}}
+The following section is too long...
+{{< /collapse/above >}}
+{{< collapse/below >}}
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+  {{< collapse >}}
+  {{< collapse/above >}}
+  I'm nested!
+  {{< /collapse/above >}}
+  {{< collapse/below >}}
+    Aenean lacinia condimentum magna ac tincidunt. Donec odio tellus, accumsan eu nibh in, laoreet egestas velit. Nullam sed enim a est ultricies malesuada a in erat. Sed lacinia tortor at ultrices fringilla. Donec sollicitudin vehicula dapibus. Nullam sodales eget orci et viverra. Praesent feugiat sagittis metus. Quisque fringilla, orci eget pretium laoreet, purus neque tempor turpis, quis lobortis ligula lacus eu erat. Nunc sed elementum arcu. Fusce vestibulum risus malesuada congue sagittis. Etiam ac semper dui, ac pretium felis.
+  {{< /collapse/below >}}
+  {{< /collapse >}}
+
+{{< /collapse/below >}}
+{{< /collapse >}}

layouts/collapse.html

@@ -0,0 +1,9 @@
+<div class="hugo-collapse-parent">
+  <!-- prevent common resources from being loaded more than once per page -->
+  {{ if not ($.Page.Scratch.Get "collapseLoaded") }}
+    {{ $.Page.Scratch.Set "collapseLoaded" 1 }}
+    <link rel="stylesheet" href="{{ .Site.BaseURL }}/css/collapse.css">
+    <script type="text/javascript" src="{{ .Site.BaseURL }}//js/collapse.js"></script>
+  {{ end}}
+  {{.Inner}}
+</div>

layouts/collapse/above.html

@@ -0,0 +1,3 @@
+<div class="collapseAfter hugo-collapse-above">
+  {{.Inner | markdownify }}
+</div>

layouts/collapse/below.html

@@ -0,0 +1,3 @@
+<div class="hugo-collapse-below">
+  {{.Inner | markdownify }}
+</div>

static/css/collapse.css

@@ -0,0 +1,25 @@
+.collapseAnchor {
+  text-decoration:none;
+  color:#EEEEFF;
+}
+.collapseAnchor:before {
+  content:"See Less";
+}
+.collapseWrap.closed + .collapseAnchor:before {
+  content:"See More";
+}
+.collapseAnchor:after {
+  content:"\25B2";
+  display:inline-block;
+  padding:0.4em 0 0 0.3em;
+  vertical-align:top;
+  font-size:0.625em;
+}
+.collapseWrap.closed + .collapseAnchor:after {
+  content:"\25BC";
+}
+.collapseWrap.closed > .collapseAfter ~ * {
+  position:absolute;
+  top:-999em;
+  left:-999em;
+}

static/js/collapse.js

@@ -0,0 +1,28 @@
+// Handler will be called when the DOM is fully loaded
+// So the script can be placed anywhere on the page
+var callback = function() {
+  var collapseHooks = document.getElementsByClassName('collapseAfter');
+  for (var hook of collapseHooks) {
+    var
+      wrap = hook.parentNode,
+      a = wrap.parentNode.insertBefore(
+        document.createElement('a'),
+        wrap.nextSibling
+      );
+    a.addEventListener('click', toggleCollapse, false);
+    a.className = 'collapseAnchor';
+    a.href="#"; /* without this it's not keyboard focusable */
+    wrap.classList.add('closed', 'collapseWrap');
+  } // for hook
+  function toggleCollapse(e) {
+    e.preventDefault();
+    e.currentTarget.previousElementSibling.classList.toggle('closed');
+  } // toggleCollapse
+};
+
+if(document.readyState === "complete" ||
+  (document.readyState !== "loading" && !document.documentElement.doScroll)) {
+  callback();
+} else {
+  document.addEventListener("DOMContentLoaded", callback);
+}