From fa3259b6b7444cf54e77e11d5007250a58da2f47 Mon Sep 17 00:00:00 2001
From: Gabriel <gabriel@libresolutions.network>
Date: Wed, 3 May 2023 20:30:33 -0400
Subject: [PATCH] shortcodes

---
 audio.html          | 187 +++++++++++++++++++++++++++++++++++++
 embed.html          |   2 +
 gallery-end.html    |   1 +
 gallery-start.html  |   1 +
 gif.html            |  11 +++
 image.html          |  23 +++++
 link-preview.html   |  10 ++
 pdf.html            |   1 +
 readme.md           |  43 ++++++++-
 recent-items.html   |   5 +
 relevant-items.html |   7 ++
 video-player.html   |  34 +++++++
 video.html          | 220 ++++++++++++++++++++++++++++++++++++++++++++
 13 files changed, 543 insertions(+), 2 deletions(-)
 create mode 100644 audio.html
 create mode 100644 embed.html
 create mode 100644 gallery-end.html
 create mode 100644 gallery-start.html
 create mode 100644 gif.html
 create mode 100644 image.html
 create mode 100644 link-preview.html
 create mode 100644 pdf.html
 create mode 100644 recent-items.html
 create mode 100644 relevant-items.html
 create mode 100644 video-player.html
 create mode 100644 video.html

diff --git a/audio.html b/audio.html
new file mode 100644
index 0000000..52fe632
--- /dev/null
+++ b/audio.html
@@ -0,0 +1,187 @@
+<style>
+    .audio-player {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content:center;
+        width: 100%;
+    }
+    .audio-player>*{
+        height:fit-content;
+        padding:0.25rem;
+    }
+    .audio-player p{
+        width: fit-content;
+    }
+
+    .media-seek {
+        width: 100%;
+    }
+    .audio-player{
+    border: 0.15rem solid var(--theme-accent);
+    padding:0.5rem;
+    border-radius: 0.5rem;
+    color:var(--theme-accent);
+}
+.audio-player>*{
+    margin:5px;
+}
+
+.audio-player select, .audio-player button{
+    background-color: transparent;
+    border-color: var(--theme-accent);
+    color:var(--theme-accent);
+    border-radius: 3px;
+    padding:0.5rem;
+}
+
+.icon svg{
+    width:2.25rem;
+    height:2.25rem;
+    z-index: -1;
+    background-color: transparent;
+    pointer-events: none;
+}
+.icon path,
+    .icon rect {
+        stroke: var(--theme-accent);
+        fill: var(--theme-accent);
+    }
+
+.icon svg circle {
+    stroke: var(--theme-accent);
+    fill: transparent;
+    stroke-width: 6;
+}
+@keyframes spin-icon {
+    0%{rotate:0;}
+    100%{rotate:360deg;}  
+}
+.spin{
+    animation:spin-icon 3s linear infinite;
+}
+</style>
+<div class="media-container">
+    <div class="audio-player">
+        <audio onended="audio_end(event)" onloadedmetadata="setup_audio_metadata(event)" ontimeupdate="setup_audio_metadata(event)">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </audio>
+        <div class="icon" onclick="toggle_play_audio(event)">
+            <svg  viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
+        </div>
+        <input class="media-seek" type="range" onchange="update_audio_time(event)" value="0">
+        <select onchange="update_audio_speed(event)">
+            <option value="1" selected>1x</option>
+            <option value="1.5">1.5x</option>
+            <option value="2">2x</option>
+            <option value="2.5">2.5x</option>
+            <option value="3">3x</option>
+        </select>
+        <div class="audio-preview">
+        </div>
+        <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
+        <div class="icon" onclick="toggle_loop_audio(event)">
+            <svg  viewBox="0 0 120 120" version="1.1"> <circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M 49.086093,104.69797 53.85938,96.982017 C -0.70319734,64.562086 46.019709,40.176232 48.130402,38.442953 c 0,0 4.487934,4.354976 5.546329,5.309403 1.84557,1.664276 5.129158,-20.199369 5.129158,-20.199369 l -22.368136,0.483004 5.548034,5.713299 c 0,0 -56.905236,37.386495 7.100306,74.94868 z" id="path4435"  /> <path style="opacity:0.99;fill-opacity:1;stroke-width:1.1;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="m 72.493272,21.303543 -4.773287,7.715948 c 54.562575,32.419931 7.839671,56.805785 5.728978,58.539064 0,0 -4.487934,-4.354976 -5.546329,-5.309403 -1.845568,-1.664276 -5.129158,20.199368 -5.129158,20.199368 l 22.368136,-0.483 -5.548034,-5.713302 c 0,0 56.905242,-37.386495 -7.100306,-74.948675 z" id="path4435-7"   /></svg>
+        </div>
+        <script src="/js/icons.js"></script>
+        <script>
+            function audio_end(event){
+                p = event.target.parentElement;
+                if (!event.target.loop){
+                    p.children[1].innerHTML=icons['play'];
+                }
+            }
+            function setup_audio_metadata(event) {
+                audio = event.target;
+                var seek = audio.parentElement.children[2];
+                seek.min = 0;
+                seek.max = audio.duration;
+                seek.value = audio.currentTime;
+                audio.parentElement.children[5].children[0].innerHTML = "" + timeToText(audio.currentTime) + "/";
+                audio.parentElement.children[5].children[1].innerHTML = "" + timeToText(audio.duration);
+            }
+            function toggle_loop_audio(event) {
+                audio = event.target.parentElement.children[0];
+                audio.loop = !audio.loop;
+                if (audio.loop){
+                    event.target.children[0].classList.add("spin");
+                }
+                else{
+                    event.target.children[0].classList.remove("spin");
+                }
+            }
+            function update_audio_time(event) {
+                audio = event.target.parentElement.children[0];
+                audio.currentTime = event.target.value;
+            }
+            function toggle_play_audio(event) {
+                el = event.target;
+                audio = el.parentElement.children[0];
+                speed = el.parentElement.children[3].value;
+                audio.playbackRate = speed;
+                if (audio.paused) {
+                    audio.play();
+                    el.innerHTML = icons['pause'];
+                }
+                else {
+                    audio.pause();
+                    el.innerHTML = icons['play'];
+                }
+            }
+            function update_audio_speed(event) {
+                el = event.target;
+                audio = event.target.parentElement.children[0];
+                audio.playbackRate = el.value;
+
+            }
+            function timeToText(t) {
+                hours = 0;
+                minutes = 0;
+                seconds = 0;
+                if (t > 60 * 60) {
+                    hours = Math.floor(t / 60 / 60);
+                    t = t - hours * 60 * 60;
+                }
+                if (t > 60) {
+                    minutes = Math.floor(t / 60);
+                    t = t - minutes * 60
+
+                }
+                if (t > 1) {
+                    seconds = Math.floor(t);
+                }
+                text = "";
+                if (hours > 0) {
+                    text += hours + ":";
+                }
+                if (minutes > 0 || hours > 0) {
+                    if (minutes == 0) {
+                        minutes = "00"
+                    }
+                    if (minutes < 10) {
+                        text += "0"
+                    }
+                    text += minutes + ":"
+                }
+                if (seconds == 0 && (minutes > 0 || hours > 0)) {
+                    seconds = "00";
+                }
+                if (seconds < 10) {
+                    text += "0";
+                }
+                text += seconds
+                return text;
+            }
+        </script>
+    </div>
+    <noscript>
+        <style>
+            .audio-player {
+                display: none;
+            }
+        </style>
+        <audio controls preload="false">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </audio>
+    </noscript>
+</div>
\ No newline at end of file
diff --git a/embed.html b/embed.html
new file mode 100644
index 0000000..e7b4476
--- /dev/null
+++ b/embed.html
@@ -0,0 +1,2 @@
+<iframe src='{{.Get "src" }}'>
+</iframe>
\ No newline at end of file
diff --git a/gallery-end.html b/gallery-end.html
new file mode 100644
index 0000000..7f5eaa3
--- /dev/null
+++ b/gallery-end.html
@@ -0,0 +1 @@
+</div>
\ No newline at end of file
diff --git a/gallery-start.html b/gallery-start.html
new file mode 100644
index 0000000..e4d6b5c
--- /dev/null
+++ b/gallery-start.html
@@ -0,0 +1 @@
+<div class="gallery">
\ No newline at end of file
diff --git a/gif.html b/gif.html
new file mode 100644
index 0000000..8c08291
--- /dev/null
+++ b/gif.html
@@ -0,0 +1,11 @@
+{{ if .Get "href"}}
+<a href='{{.Get "href"}}'>
+{{end}}
+<video autoplay muted loop preload="true">
+    {{if .Get 0}}<source src='{{.Site.BaseURL}}{{.Get 0 }}'>{{end}}
+    {{if .Get "src"}}<source src='{{.Site.BaseURL}}{{.Get "src" }}'>{{end}}
+</video>
+{{ if .Get "href"}}
+</a>
+{{end}}
+
diff --git a/image.html b/image.html
new file mode 100644
index 0000000..1706da7
--- /dev/null
+++ b/image.html
@@ -0,0 +1,23 @@
+<div class="image-container">
+    {{ if .Get "href"}}
+<a href='{{.Get "href"}}'>
+{{end}}
+<img loading="lazy"
+src='{{.Get "src"}}' 
+{{if .Get "alt"}}
+ alt='{{.Get "alt"}}'
+{{end}} 
+{{if .Get "float"}}
+style='float:{{.Get "float"}}'
+{{end}}>
+{{ if .Get "href"}}
+</a>
+{{end}}
+{{if .Get "caption"}}
+<p class="caption">
+    {{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
+
+</p>
+{{end}}
+
+</div>
\ No newline at end of file
diff --git a/link-preview.html b/link-preview.html
new file mode 100644
index 0000000..7fcd079
--- /dev/null
+++ b/link-preview.html
@@ -0,0 +1,10 @@
+<div class="listing" style="background-image:url({{.Get 3}})">
+    <div class="listing-text">
+        <a href="{{ .Get 0 }}" style="text-decoration:none;">
+            <h3>{{ .Get 1 }}</h3>
+            <i>{{.Get 2 }}</i>
+        </a>
+        <a href="{{ .Get 0 }}" style="position: absolute;top:0;left:0;height:100%;width:100%;background-color: transparent;margin:0;z-index:-1;">
+        </a>
+    </div>
+</div>  
\ No newline at end of file
diff --git a/pdf.html b/pdf.html
new file mode 100644
index 0000000..4ee868f
--- /dev/null
+++ b/pdf.html
@@ -0,0 +1 @@
+<embed type="application/pdf"{{if .Get 0 }} src="{{.Get 0}}" {{else}} {{if .Get "src" }} src='{{.Get "src"}}' {{end}}{{end}}>
\ No newline at end of file
diff --git a/readme.md b/readme.md
index 03b9ee3..61003f3 100644
--- a/readme.md
+++ b/readme.md
@@ -1,5 +1,44 @@
 # Shortcodes
+
 My hugo shortcodes for all my themes 
 
-- Freedom 
-- Valor
+
+## Themes
+- [Freedom](https://code.gabe.rocks/gabriel/freedom) 
+- [Valor](https://code.gabe.rocks/gabriel/valor)
+
+
+### Audio
+
+Embeds an audio player for an audio source
+
+### Embed
+
+Embeds an URL
+
+### Gallery-(start/end)
+Starts and closes a `div` element with the class `gallery`
+
+### gif
+
+A muted video with autoplay and no controls
+
+### image
+
+An image, optionally includes links and captions
+
+### link-preview 
+
+A fancy preview for links
+
+### pdf
+Embeds a pdf
+
+### recent-items
+
+### relevant-items
+
+### video
+
+A video player with controls
+
diff --git a/recent-items.html b/recent-items.html
new file mode 100644
index 0000000..a247d74
--- /dev/null
+++ b/recent-items.html
@@ -0,0 +1,5 @@
+<div class="gallery">
+{{range first 3 .Site.RegularPages}}
+    {{partial "item" .}}
+{{end}}
+</div>
\ No newline at end of file
diff --git a/relevant-items.html b/relevant-items.html
new file mode 100644
index 0000000..3150d37
--- /dev/null
+++ b/relevant-items.html
@@ -0,0 +1,7 @@
+
+<div class="gallery">
+{{ $tag := .Get 0 }}
+    {{range .Site.RegularPages.RelatedTo (keyVals "tags" $tag) }}
+    {{partial "item" .}}
+    {{end}}
+</div>
\ No newline at end of file
diff --git a/video-player.html b/video-player.html
new file mode 100644
index 0000000..34f3543
--- /dev/null
+++ b/video-player.html
@@ -0,0 +1,34 @@
+<style>
+   body{
+    background-color: black;
+   }
+   header,footer{
+    display:none;
+   }
+   #main{
+        position: absolute;
+        top:0;
+        left: 0;
+        width:100vw;
+        height: 100vh;
+        max-height: 100vh;
+        max-width: initial;
+    }
+</style>
+<video controls id="main" class="video-player">
+        <source src="">
+    </video>
+    
+    <script>
+        //https://davidwalsh.name/query-string-javascript
+    function getUrlParameter(name) {
+        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+        var results = regex.exec(location.search);
+        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+    };
+    
+    var source = document.createElement('source')
+        source.src = ''+getUrlParameter('v');
+        document.getElementById('main').appendChild(source);
+    </script>
diff --git a/video.html b/video.html
new file mode 100644
index 0000000..3056358
--- /dev/null
+++ b/video.html
@@ -0,0 +1,220 @@
+<style>
+    .video-player {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .video-controls {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: fit-content;
+    }
+
+    .video-controls p {
+        width: min-content;
+    }
+
+    .media-seek {
+        width: 100%;
+    }
+
+    .video-controls>* {
+        margin: 5px;
+    }
+
+    .video-controls select,
+    .video-controls button {
+        background-color: transparent;
+        border-color: var(--theme-accent);
+        color: var(--theme-accent);
+        border-radius: 3px;
+        padding: 0.5rem;
+    }
+
+    .icon svg {
+        width: 2.25rem;
+        height: fit-content;
+        z-index: -1;
+        background-color: transparent;
+        pointer-events: none;
+    }
+
+    .icon path,
+    .icon rect {
+        stroke: var(--theme-accent);
+        fill: var(--theme-accent);
+    }
+
+    .icon svg circle {
+        stroke: var(--theme-accent);
+        fill: transparent;
+        stroke-width: 6;
+    }
+    .video-player:fullscreen{
+        height:100vh;
+        width:100vw;
+    }
+    .video-player:fullscreen video{
+        max-height: 100vh;
+        height:100%;
+        max-width: 100vw;
+        width: 100vw;
+    }
+</style>
+<script src="/js/icons.js"></script>
+<div class="media-container">
+    <div class="video-player">
+        <video preload="metadata" onclick="playthis(event)" onloadedmetadata="setup_video_metadata(event)"
+            ontimeupdate="setup_video_metadata(event)">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </video>
+        <div class="video-controls">
+            <div onclick="toggle_video_play(event)" class="icon">
+                <svg  viewBox="0 0 120 120"><circle style="opacity:0.99;fill-opacity:0;stroke-width:6.4;stroke-dasharray:none;stroke-opacity:1" id="path2040" cx="60.062084" cy="62.077591" r="52.403164" /><path style="opacity:0.99;fill-opacity:1; stroke-width:4;stroke-dasharray:none;stroke-opacity:1" d="m 36.961917,29.902848 c 3.596357,-1.826163 63.333473,26.918008 63.449063,32.530093 0.1386,6.729203 -61.229407,35.615675 -63.254766,33.796117 -1.971501,-1.557746 -3.672784,-64.52183 -0.194297,-66.32621 z" id="path1060"> </svg>
+            </div>
+            </button>
+            <input class="media-seek" type="range" onchange="update_video_time(event)" value="0">
+            <select onchange="update_video_speed(event)">
+                <option value="1" selected>1x</option>
+                <option value="1.5">1.5x</option>
+                <option value="2">2x</option>
+                <option value="2.5">2.5x</option>
+                <option value="3">3x</option>
+            </select>
+            <p><span class="audio-currentTime"></span><span class="audio-duration"></span></p>
+            <div class="icon" onclick="fullscreen(event)">
+                <svg  viewBox="0 0 120 120">
+                    <path
+                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                        d="M 46.964564,56.005523 29.64354,38.443145 15.744327,51.812481 15.624368,16.779513 l 36.623948,0.03226 -13.177737,14.17536 16.622539,16.392689 z"
+                        id="path8948-3"/>
+                    <path
+                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                        d="M 55.129887,73.388205 38.422614,90.210417 51.067135,104.89922 16.395468,104.33333 16.434945,67.605641 30.111493,81.28219 46.504182,64.659651 Z"
+                        id="path8948-3-5"/>
+                    <path
+                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                        d="M 63.363444,46.935211 80.997081,30.825588 67.627745,17.036604 102.68744,17.447746 102.62846,52.646518 88.168059,39.041226 71.989147,55.663767 Z"
+                        id="path8948-3-6"/>
+                    <path
+                        style="opacity:0.99;fill-opacity:1;stroke-width:2.58928;stroke-linecap:butt;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+                        d="M 71.956318,65.743071 91.343851,82.735377 104.06395,70.648701 103.79532,105.13832 69.166628,105.79193 82.579575,93.184265 63.227764,74.368773 Z"
+                        id="path8948-3-5-2"/>
+                </svg>
+
+            </div>
+
+        </div>
+            <script>
+                function setup_video_metadata(event) {
+                    video = event.target;
+                    var seek = video.parentElement.children[1].children[1];
+                    seek.min = 0;
+                    seek.max = video.duration;
+                    seek.value = video.currentTime;
+                    details = video.parentElement.children[1].children[3].children;
+                    details[0].innerHTML = timeToText(video.currentTime) + "/";
+                    details[1].innerHTML = timeToText(video.duration);
+
+                }
+                function playthis(event) {
+                    if (event.target.paused) {
+                        event.target.playbackRate = video.parentElement.children[1].children[2].value;
+                        event.target.play();
+                        video.parentElement.children[1].children[0].innerHTML = icons['pause'];
+                    }
+                    else {
+                        event.target.pause();
+                        video.parentElement.children[1].children[0].innerHTML = icons['play'];
+                    }
+                }
+                function fullscreen(event) {
+                    video = event.target.parentElement.parentElement;
+                    if (document.fullscreenElement) {
+                        document.exitFullscreen();
+                        event.target.innerHTML = icons['expand'];
+                    }
+                    else {
+                        video.requestFullscreen();
+                        event.target.innerHTML = icons['shrink'];
+                    }
+
+
+                }
+                function toggle_video_play(event) {
+                    video = event.target.parentElement.parentElement.children[0];
+                    if (video.paused) {
+                        video.playbackRate = video.parentElement.children[1].children[2].value;
+                        video.play();
+                        video.parentElement.children[1].children[0].innerHTML = icons['pause'];
+                    }
+                    else {
+                        video.pause();
+                        video.parentElement.children[1].children[0].innerHTML = icons['play'];
+                    }
+                }
+                function update_video_speed(event) {
+                    video = event.target.parentElement.parentElement.children[0];
+                    video.playbackRate = event.target.value;
+                }
+                function update_video_time(event) {
+                    video = event.target.parentElement.parentElement.children[0];
+                    video.currentTime = event.target.value;
+                }
+
+                function timeToText(t) {
+                    hours = 0;
+                    minutes = 0;
+                    seconds = 0;
+                    if (t > 60 * 60) {
+                        hours = Math.floor(t / 60 / 60);
+                        t = t - hours * 60 * 60;
+                    }
+                    if (t > 60) {
+                        minutes = Math.floor(t / 60);
+                        t = t - minutes * 60
+
+                    }
+                    if (t > 1) {
+                        seconds = Math.floor(t);
+                    }
+                    text = "";
+                    if (hours > 0) {
+                        text += hours + ":";
+                    }
+                    if (minutes > 0 || hours > 0) {
+                        if (minutes == 0) {
+                            minutes = "00"
+                        }
+                        if (minutes < 10) {
+                            text += "0"
+                        }
+                        text += minutes + ":"
+                    }
+                    if (seconds == 0 && (minutes > 0 || hours > 0)) {
+                        seconds = "00";
+                    }
+                    if (seconds < 10) {
+                        text += "0";
+                    }
+                    text += seconds
+                    return text;
+                }
+            </script>
+    </div>
+    <noscript>
+        <style>
+            .video-player {
+                display: none;
+            }
+        </style>
+        <video controls preload="false">
+            <source src='{{.Site.BaseURL}}{{.Get "src" }}'>
+        </video>
+    </noscript>
+
+    <p class="caption">{{.Get "caption"}} {{if .Get "source"}}<a href='{{.Get "source"}}'>Source</a>{{end}}
+    </p>
+</div>
\ No newline at end of file