Add video-js shortcode (#308)

Reviewed-on: #308

layouts/shortcodes/audio.html

@@ -1,3 +1,3 @@
 <div class="shortcode card">
-  <audio src='{{ .Get "src" }}' class="mb-0" controls></audio>
-</div>
+  <audio src="{{ .Get `src` }}" class="mb-0" controls></audio>
+</div>

layouts/shortcodes/card.html

@@ -1,6 +1,6 @@
 <div class="shortcode card border-primary rounded-0 hover-shadow mb-4">
   <div class="card-body mb-0">
-    <h4 class="card-title"><a class="text-decoration-none" href='{{ .Get "link" }}'>{{ .Get "title" }}</a></h4>
-    <a href='{{ .Get "link" }}' class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
+    <h4 class="card-title"><a class="text-decoration-none" href="{{ .Get `link` }}">{{ .Get "title" }}</a></h4>
+    <a href="{{ .Get `link` }}" class="mb-0 btn btn-primary btn-sm text-decoration-none">Mehr anzeigen</a>
   </div>
 </div>

layouts/shortcodes/gallery.html

@@ -6,14 +6,14 @@
 	  {{ $isimg := lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)" }}
 	  {{ if $isimg }}
 	    {{ $linkURL := print (trim $.Site.BaseURL "/") "/" $dir "/" .Name | absURL }}
-	    <div class="col-lg-3 col-md-4 col-sm-6">
-		  <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
-		  	<div class="ratio ratio-4x3">
-				<img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
-			</div>
-		  </a>	
+	    <div class="col-lg-3 col-md-4 col-sm-6 mb-2">
+        <a class="vb-gallery" data-gall="{{ md5 $dir }}" href="{{ $linkURL }}">
+          <div class="ratio ratio-4x3">
+            <img class="lazy img-thumbnail w-100 object-cover" data-src="{{ $linkURL }}">
+          </div>
+        </a>	
 	    </div>
 	  {{ end }}
     {{ end }}
   {{ end }}
-</div>
+</div>

layouts/shortcodes/image.html

@@ -1,3 +1,3 @@
 <div class="shortcode col-lg-3 col-md-4 col-sm-6">
-  <a class="vb-gallery" data-gall='{{ md5 (.Get "src") }}' href='{{ .Get "src" }}'><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src='{{ .Get "src" }}'></a>
-</div>
+  <a class="vb-gallery" data-gall="{{ md5 (.Get `src`) }}" href="{{ .Get `src` }}"><img class="lazy img-thumbnail w-100 h-100" style="object-fit: cover;" data-src="{{ .Get `src` }}"></a>
+</div>

layouts/shortcodes/slider.html

@@ -1,7 +1,7 @@
 {{ $dir := (.Get "dir") }}
 {{ if $dir }}
 <div class="shortcode card border-primary rounded-3">
-  <div class="carousel slide mb-0" data-bs-ride="true" id='slider-{{ md5 $dir }}'>
+  <div class="carousel slide mb-0" data-bs-ride="true" id="slider-{{ md5 $dir }}">
     {{ $images := slice }}
     {{ range readDir (print "/static/" $dir) }}
       {{ if (lower .Name | findRE "\\.(gif|jpg|jpeg|tiff|png|bmp|webp|avif|jxl)") }}
@@ -16,7 +16,7 @@
     <div class="carousel-inner mb-0">
       {{ range $index, $image := $images }}
         <div class="carousel-item mb-0 {{ if eq $index 0 }}active{{end}}">
-          <img src='{{ print $.Site.BaseURL $dir "/" $image.Name | absURL }}' class="d-block w-100 mb-0 rounded-3">
+          <img src="{{ print $.Site.BaseURL $dir `/` $image.Name | absURL }}" class="d-block w-100 mb-0 rounded-3">
         </div>
     {{ end }}
     </div>
@@ -30,4 +30,4 @@
     </button>
   </div>
 </div>
-{{ end }}
+{{ end }}

layouts/shortcodes/video.html

@@ -0,0 +1 @@
+<video class="video-js vjs-fluid" src="{{ .Get `src` }}" width="100%" controls></video>