personal-blog/content/post/testing-new-shortcodes.md

title	date	tags	topics	color	draft
Testing New Shortcodes	2021-04-10T11:27:58+01:00	shortcodes multimedia hugo	technology blogging	blue	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
  first         @ {{< span style="color:red;" text="some red text" >}}
  second        @ {{< span style="color:orange;font-style:italic;" text="some orange text" >}}
  third         @ {{< span style="color:green;background-color:yellow;" text="some highlighted green text" >}}
  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.">}}

And this passage uses the standard markdown double-tilde to strike through, but the same highlighter:

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:

[Note: this widget presently does not work because of the security policy set on Gab]

{{</* gab exitingthecave 107345603615120884 */>}}

{{< gab exitingthecave 107345603615120884 >}}

{{% 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 a vanilla video player:

{{</* video "https://cloud.gmgauthier.com/index.php/s/B5sPam2QnofAFnf/download/Peterson_Murphy_Alienation.mp4" */>}}

{{< video "https://cloud.gmgauthier.com/index.php/s/B5sPam2QnofAFnf/download/Peterson_Murphy_Alienation.mp4" >}}

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

An Anchor Podcast:

{{</* 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" >}}

{{% ah %}} Code {{% /ah %}}

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:

var x = 5;
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).