working with shortcodes and widgets

config.toml

@@ -7,7 +7,7 @@ title = "Ipse Solus"
 author = "Greg Gauthier"
 copyright = "© 2022. All rights reserved."
 canonifyurls = true
-paginate = 10
+paginate = 15
 
 PygmentsCodeFences = true
 PygmentsStyle = "tango"

content/post/testing-new-shortcodes.md

@@ -3,13 +3,22 @@ title: "Testing New Shortcodes"
 date: 2021-04-10T11:27:58+01:00
 tags: ["shortcodes", "multimedia", "hugo"]
 topics: ["technology", "blogging"]
+color: "blue"
 draft: false
 ---
 
 Today, I'm just testing out a few new Hugo shortcodes I added to the site. I've culled these from around the internet, and hacked together some of my own. You might find them useful, if you're doing static blogging yourself. You can find all the code on the repo for this site, **{{< newtab title="found here." url="https://gitea.gmgauthier.com/gmgauthier/personal-blog" >}}** As I do more and more blogging from the static site generator, this sort of thing will be more and more useful to me, at least.
 
+{{% ah %}} Linking {{% /ah %}}
+
+{{</* newtab title="whatever" url="https:\/\/whatever.com" */>}}
+
 Here is a link to my legacy philosophy blog, that will open in a new tab. Out of the box, neither markdown, nor Hugo will do this: **{{< newtab title="Exiting The Cave" url="https://exitingthecave.com/" >}}**
 
+{{% ah %}} Styling Blockquotes {{% /ah %}}
+
+{{</* span style="whatever:whatever" text="whatever whatever" */>}}
+
 Here is a quote block, in which I can change text color arbitrarily using a custom span shortcode. Again, out of the box, neither markdown nor Hugo will do this.
 
     A Title
@@ -19,6 +28,13 @@ Here is a quote block, in which I can change text color arbitrarily using a cust
       fourth        @ {{< span style="color:blue;border:1px solid blue;" text="some blue text" >}}
       last          @ {{< span style="color:black;font-weight:bold;" text="bold black text" >}}
 
+
+{{% ah %}} Text Markup {{% /ah %}}
+
+{{</* strikethrough "the struckthrough text" */>}}
+
+{{</* highlighter "the highlighted text" */>}}
+
 Here is a shortcode for when I want to highlight a line as if I had a marker, and another for when I want to strikeout a passage. This first passage uses the shortcode to strikethrough:
 
 > {{< strikethrough "Stephen, archbishop of Canterbury, primate of all England, and cardinal of the holy Roman Church, Henry archbishop of Dublin, William bishop of London, Peter bishop of Winchester, Jocelin bishop of Bath and Glastonbury, Hugh bishop of Lincoln, Walter bishop of Worcester, William bishop of Coventry, Benedict bishop of Rochester, Master Pandulf subdeacon and member of the papal household, Brother Aymeric master of the knighthood of the Temple in England, William Marshal earl of Pembroke, William earl of Salisbury, William earl of Warren, William earl of Arundel, Alan of Galloway constable of Scotland, Warin fitz Gerald, Peter fitz Herbert, Hubert de Burgh seneschal of Poitou, Hugh de Neville, Matthew fitz Herbert, Thomas Basset, Alan Basset, Philip Daubeny, Robert de Roppeley, John Marshal, John fitz Hugh, and other loyal subjects" >}}: (1) FIRST, THAT {{< highlighter "WE HAVE GRANTED TO GOD, and by this present charter have confirmed for us and our heirs in perpetuity, that the English Church shall be free, and shall have its rights undiminished, and its liberties unimpaired.">}}
@@ -27,33 +43,51 @@ And this passage uses the standard markdown double-tilde to strike through, but
 
 > ~~That we wish this so to be observed, appears from the fact that of our own free will, before the outbreak of the present dispute between us and our barons, we granted and confirmed by charter the freedom of the Church's elections - a right reckoned to be of the greatest necessity and importance to it - and caused this to be confirmed by Pope Innocent III.~~ {{< highlighter "This freedom we shall observe ourselves, and desire to be observed in good faith by our heirs in perpetuity. TO ALL FREE MEN OF OUR KINGDOM we have also granted, for us and our heirs for ever, all the liberties written out below, to have and to keep for them and their heirs, of us and our heirs" >}}...
 
+{{% ah %}} Social Media {{% /ah %}}
+
+A Gab Embed Widget:
+
+{{< gab >}}
+
+{{% ah %}} Multimedia {{% /ah %}}
+
+An image using the built-in "figure" shortcode:
+
+{{</* figure src="\/img\/allan-bloom.jpg" title="Allan Bloom" width="650px" */>}}
+
+{{< figure src="/img/allan-bloom.jpg" caption="Allan Bloom" width="650px" >}}
+
 Here's youtube video:
 
+{{</* youtube Y9tVfnPHbcQ */>}}
+
 {{< youtube Y9tVfnPHbcQ >}}
 
 A bitchute video:
 
+{{</* bitchute 6xeHTMuxg08 */>}}
+
 {{< bitchute 6xeHTMuxg08 >}}
 
 An odysee video:
 
+{{</* odysee 484615536_mp4_h264_aac_hd_hfr */>}}
+
 {{< odysee 484615536_mp4_h264_aac_hd_hfr >}}
 
-A gist:
-
-{{< gist gmgauthier 183a5ff2116f8a8feafc64a3363d09db >}}
-
 An Anchor Podcast:
 
-{{< anchor exitingthecave "Short-Reads-The-Consolation-of-Philosophy--Book-4--Chapter-3---What-Good-and-Evil-Deserve-eo17qb" >}}
+{{</* anchorfm exitingthecave "Short-Reads-The-Consolation-of-Philosophy--Book-4--Chapter-3---What-Good-and-Evil-Deserve-eo17qb" */>}}
+
+{{< anchorfm exitingthecave "Short-Reads-The-Consolation-of-Philosophy--Book-4--Chapter-3---What-Good-and-Evil-Deserve-eo17qb" >}}
 
 MP3 Audio Player:
 
+{{</* audio "https:\/\/soundbible.com\/mp3\/UFO_Takeoff-Sonidor-1604321570.mp3" */>}}
+
 {{< audio "https://soundbible.com/mp3/UFO_Takeoff-Sonidor-1604321570.mp3" >}}
 
-I'm not really sure I see a need for the strikethrough shortcode. But maybe there are instances when the double-tilde causes problems? Here's a shortcode that will put the current year into this box: [ {{< year >}} ]. That's nifty, but again, not sure why I would need that. Maybe for a copyright notice?
+{{% ah %}} Code {{% /ah %}}
-
-So far, all of this has been done without javascript. I've also discovered that syntax highlighting can be done without javascript as well, and good thing, because highlightjs was causing problems for me. So, now, the site is roughly 97% javascript free. The only thing using javascript is the theme framework, in order to enable the menuing (pure-min, and responsive).
 
 As for code, I've removed the theme's highlightjs, and decided to just use the built-in Hugo highlighter, and pygments highlight themes, because it allows me to use standard markdown code fencing:
 
@@ -63,3 +97,28 @@ var y = 6;
 var z = x + y;
 document.getElementById("demo").innerHTML = "The value of z is: " + z;
 ```
+
+However, Hugo also included a shortcode for embedding syntax highlighted gists:
+
+{{</* gist gmgauthier 183a5ff2116f8a8feafc64a3363d09db */>}}
+
+{{< gist gmgauthier 183a5ff2116f8a8feafc64a3363d09db >}}
+
+{{% ah %}} Post Meta-Data {{% /ah %}}
+
+Access to the parameters defined in the "front matter" header are accessible as well. You can add as many parameters, as you like. 
+
+{{</* param topics */>}}
+
+{{< param topics >}}
+
+{{</* param color */>}}
+
+{{< param color >}}
+
+{{% ah %}} Conclusion {{% /ah %}}
+
+I'm not really sure I see a need for the strikethrough shortcode. But maybe there are instances when the double-tilde causes problems? Here's a shortcode that will put the current year into this box: [ {{< year >}} ]. That's nifty, but again, not sure why I would need that. Maybe for a copyright notice?
+
+So far, all of this has been done without javascript. I've also discovered that syntax highlighting can be done without javascript as well, and good thing, because highlightjs was causing problems for me. So, now, the site is roughly 97% javascript free. The only thing using javascript is the theme framework, in order to enable the menuing (pure-min, and responsive).
+

layouts/shortcodes/ah.html

@@ -0,0 +1,6 @@
+{{ $anchorized := anchorize .Inner }}
+
+<h3 id="{{ $anchorized }}">
+    <a href="#{{ $anchorized }}">#</a>
+    {{ .Inner }}
+</h3>

layouts/shortcodes/anchor.html

@@ -1 +0,0 @@
-<center><iframe src="https://anchor.fm/{{ index .Params 0 }}/embed/episodes/{{ index .Params 1 }}" height="95px" width="425px" frameborder="0" scrolling="no"></iframe></center>

layouts/shortcodes/anchorfm.html

@@ -0,0 +1,4 @@
+<div style="text-align: center;">
+    <iframe src="https://anchor.fm/{{ index .Params 0 }}/embed/episodes/{{ index .Params 1 }}"
+            height="95px" width="425px" frameborder="0" scrolling="no"></iframe>
+</div>

layouts/shortcodes/gab.html

@@ -0,0 +1,4 @@
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
+    <iframe src="https://gab.com/exitingthecave/posts/107345603615120884" style="position: absolute;
+    top: 0; left: 0; width: 50%; height: 100%; border:0;"></iframe>
+</div>

layouts/shortcodes/newtab.html

@@ -1 +1,3 @@
-<a href="{{ .Get "url" }}" target="_blank">{{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}</a>
+<a href="{{ .Get "url" }}" target="_blank">
+    {{ with .Get "title" }}{{.}}{{else}}{{.Get "url"}}{{end}}
+</a>

layouts/shortcodes/odysee.html

@@ -1,3 +1,4 @@
-<center><div class="embed odysee-player">
+<div style="text-align: center;"><div class="embed odysee-player">
-    <iframe class="lbry-iframe" type="text/html" width="640" height="385" src="https://odysee.com/$/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
+    <iframe class="lbry-iframe" type="text/html" width="640" height="385"
-</div></center>
+            src="https://odysee.com/$/embed/{{ index .Params 0 }}" allowfullscreen frameborder="0"></iframe>
+</div></div>

layouts/shortcodes/pdflist.html

@@ -0,0 +1,23 @@
+{{ $path  := $.Page.Dir }}
+{{ $filePath  := printf "content/%s" ($path) }}
+{{ $withCaptions := .Get "withCaptions"}}
+{{ $gallery := .Get "id" }}
+
+
+{{ range readDir ($filePath) }}
+    {{ $display := strings.HasSuffix .Name "pdf" }}
+    {{ $caption := substr .Name 0 128 }}
+    {{ if $display}}
+        <div class="file-list-item">
+            <a href="{{.Name}}">
+                <i class="fas fa-file-pdf"></i> {{ $caption}}
+            </a>
+        </div>
+    {{ end }}
+{{ end }}
+
+<style type="text/css">
+    .file-list-item {
+        word-break: break-all;
+    }
+</style>

themes/blackburn/static/css/blackburn.css

@@ -20,7 +20,7 @@ a:visited {
 }
 
 .post-meta {
-  font-size: 90%;
+  font-size: 80%;
 }
 
 article > footer {
@@ -57,7 +57,7 @@ article > footer {
 
 #menu .brand {
   font-family: Raleway, serif;
-  font-weight: bold;
+  font-weight: bolder;
   font-size: 1em;
   letter-spacing: 0.1em;
   text-transform: none;