assets/css/bobastyle.css

@@ -272,7 +272,7 @@
 .sections {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 40px;
 }
 
 .section {
@@ -583,7 +583,6 @@ body {
 }
 
 footer {
-  margin-top: 20px;
   text-align: center;
 }
 

assets/js/bobatheme.js

@@ -12,19 +12,14 @@ window.onscroll = function() {
 window.onload = () => {
     document.querySelectorAll(".code-block").forEach(codeBlock => {
         const button = codeBlock.querySelector(".code-header > .code-copy-button");
-
+        // TODO: maybe get this from HTMLElement.innerText on the actual code block content element
-        // lang will not be unset because we default it to text
+        // but it's hard to select it; `data-lang` attribute might not always be there (if lang is unset)
-        // clone it so it doesn't change the actual DOM element
+        const rawCode = codeBlock.querySelector("pre.code-raw").innerText;
-        const codeElem = codeBlock.querySelector("code[data-lang]").cloneNode(true);
-        // bashsession: remove command output lines
-        codeElem.querySelectorAll(".go").forEach(e => e.parentNode.removeChild(e));
-        // bashsession: remove prompt symbol
-        codeElem.querySelectorAll(".gp").forEach(e => e.parentNode.removeChild(e));
-        const rawCode = codeElem.innerText;
 
         const originalCopyText = button.innerHTML;
         button.onclick = event => {
             navigator.clipboard.writeText(rawCode);
+            console.log(rawCode);
             // TODO: maybe we could add a fancier indicator, like a flash or something
             event.target.innerHTML = "Copied!";
             setTimeout(() => {

layouts/_default/_markup/render-codeblock.html

@@ -1,15 +1,13 @@
-{{ $type := "text" }}
-{{ with .Type }}
-    {{ $type = . }}
-{{ end }}
 <div class="code-block">
     <div class="code-header">
-        <span class="code-type">{{ $type }}</span>
+        <span class="code-type">{{ .Type }}</span>
         <a class="code-copy-button">
             {{ i18n "copy_to_clipboard" }}
         </a>
     </div>
-
     {{/* a div.highlight is already created by highlight function */}}
-    {{ highlight .Inner $type }}
+    {{ highlight .Inner .Type }}
+
+    {{/* for copy to clipboard */}}
+    <pre class="code-raw" style="display: none;">{{ .Inner }}</pre>
 </div>

layouts/_default/baseof.html

@@ -21,6 +21,7 @@
         </main>
 
         {{ if or .Site.Copyright .Site.Params.footer }}
+            <hr>
             <footer>
                 <small>
                     {{ with .Site.Copyright }}

layouts/shortcodes/figure.html

@@ -1,4 +1,9 @@
-{{ $resource := .Page.Resources.GetMatch (.Get "src") }}
+{{ $resource := "" }}
+{{ if .IsNamedParams }}
+    {{ $resource = $.Page.Resources.GetMatch (.Get "src") }}
+{{ else }}
+    {{ $resource = $.Page.Resources.GetMatch (.Get 0) }}
+{{ end }}
 
 {{ $noborder := false }}
 {{ if .Get "noborder" }}

layouts/shortcodes/image.html

@@ -9,5 +9,5 @@
 {{ end }}
 
 <p>
-    {{ partial "remote_figure.html" (dict "src" (.Get "src") "border" $border "hidecaption" $hidecaption "type" (.Get "type") "alt" (.Get "alt")) }}
+    {{ partial "remote_figure.html" (dict "src" (.Get "src") "border" $border "hidecaption" $hidecaption "type" "image" "alt" (.Get "alt")) }}
 </p>

layouts/shortcodes/video.html

@@ -0,0 +1,13 @@
+{{ $border := false }}
+{{ if .Get "border" }}
+    {{ $border = true }}
+{{ end }}
+
+{{ $hidecaption := false }}
+{{ if .Get "hidecaption" }}
+    {{ $hidecaption = true }}
+{{ end }}
+
+<p>
+    {{ partial "remote_figure.html" (dict "src" (.Get "src") "border" $border "hidecaption" $hidecaption "type" "video" "alt" (.Get "alt")) }}
+</p>