renko, also avif

content/guide/advanced/kilovolt-protocol.md

@@ -34,7 +34,7 @@ The challenge-based authentication flow allows your app to connect to strimertü
 
 To get the password, go to **Server Settings** and copy the value in **Kilovolt password**. Remember to click the Reveal button or you won't be able to copy its contents.
 
-{{< figure src="../media/kilovolt-password.png" class="guide-pic" alt="The password in the strimertül UI" >}}
+![The password in the strimertül UI](../media/kilovolt-password.png)
 
 ### Interactive authentication
 
@@ -54,7 +54,7 @@ Every attribute is optional but you should at least fill out the name to avoid s
 
 With all data attributes set to something, the dialog will look like this:
 
-{{< figure src="../media/interactive.png" class="guide-pic" alt="The interactive authentication dialog in the UI" >}}
+![The interactive authentication dialog in the UI](../media/interactive.png)
 
 [^1]: Do note that the security isn't great on this because the connection is not encrypted.
 

content/guide/features/chatbot.md

@@ -8,7 +8,7 @@ weight: 10
 
 strimertül comes bundles with a chat bot for Twitch. You can access its settings in the side menu under "Twitch".
 
-{{< figure src="../media/chatbot/menu.png" class="guide-pic" alt="The chat bot configuration pages in the side bar" >}}
+![The chat bot configuration pages in the side bar](../media/chatbot/menu.png)
 
 ## Chat commands
 
@@ -16,11 +16,11 @@ Chat commands are messages that can be triggered by chat users (such as viewers)
 
 The Chat message window will show all active and inactive commands, sorted alphabetically. Inactive/disabled commands will not be usable in chat.
 
-{{< figure src="../media/chatbot/page-overview.png" class="guide-pic" alt="Overview of the chat bot configuration page" >}}
+![Overview of the chat bot configuration page](../media/chatbot/page-overview.png)
 
 To manage chat commands, click the "New command" at the top of the page or the "Edit" command of any of the existing commands, a dialog will appear with info to fill out about it.
 
-{{< figure src="../media/chatbot/messagebox.png" class="guide-pic" alt="The dialog for editing a single chat command" >}}
+![The dialog for editing a single chat command](../media/chatbot/messagebox.png)
 
 The fields for a command are:
 
@@ -60,11 +60,11 @@ Chat timers are messages that are written on repeating intervals as long as some
 
 The timer page looks mostly like the chat commands page, with timers being either enabled or disabled, sorted alphabetically by name and with a search box for easy filtering.
 
-{{< figure src="../media/chatbot/timer-overview.png" class="guide-pic" alt="Overview of the chat timers configuration page" >}}
+![Overview of the chat timers configuration page](../media/chatbot/timer-overview.png)
 
 To manage timers, click the "New timer" at the top of the page or the "Edit" command of any of the existing timers, a dialog will appear with info to fill out about it.
 
-{{< figure src="../media/chatbot/timerbox.png" class="guide-pic" alt="The dialog for editing a timer" >}}
+![The dialog for editing a timer](../media/chatbot/timer-overview.png)
 
 The fields for a timer are:
 
@@ -86,7 +86,7 @@ Chat alerts are messages that get written to chat when certain events happen. Th
 
 The alerts page is structured as a tabbed view with each tab referring to a single event.
 
-{{< figure src="../media/chatbot/alert-overview.png" class="guide-pic" alt="Overview of the chat alerts configuration page" >}}
+![Overview of the chat alerts configuration page](../media/chatbot/alert-overview.png)
 
 Alerts can be enabled and disabled for every event, and you can specify multiple message for each (one at random will be chosen when the event happens).
 

content/guide/features/loyalty-system.md

@@ -26,7 +26,7 @@ If these limits feel acceptable to you, here's how to set the loyalty system up
 
 To access the loyalty system configuration, locate its section in the side menu.
 
-{{< figure src="../media/loyalty/menu.png" class="guide-pic" alt="The loyalty system configuration pages in the side bar" >}}
+![The loyalty system configuration pages in the side bar](../media/loyalty/menu.png)
 
 ## Configuration
 
@@ -46,11 +46,11 @@ The rewards page lets you set up rewards that viewers can redeem and goals for t
 
 These rewards are currently only visible to you, so you have to take care to inform your viewers that they exist and what they are.
 
-{{< figure src="../media/loyalty/reward-overview.png" class="guide-pic" alt="The loyalty system rewards page" >}}
+![The loyalty system rewards page](../media/loyalty/reward-overview.png)
 
 You can create rewards by clicking the "Create reward" button, or toggle/edit/delete them with the buttons in the top right of each reward entry.
 
-{{< figure src="../media/loyalty/redeem-create.png" class="guide-pic" alt="The dialog to create and edit rewards" >}}
+![The dialog to create and edit rewards](../media/loyalty/redeem-create.png)
 
 Rewards have a multitude of properties but for most people only the ID (used by viewers to redeem them) and name (used by the bot to describe it) are really important, everything else (description/icon) are not exposed to users.
 
@@ -62,11 +62,11 @@ Rewards can be refunded (see the following section in Points and redeems).
 
 The goals page works almost exactly to the rewards one, with a few exceptions since goals work a bit differently.
 
-{{< figure src="../media/loyalty/goal-overview.png" class="guide-pic" alt="The loyalty system goals page" >}}
+![The loyalty system goals page](../media/loyalty/goal-overview.png)
 
 Goals work by setting a target amount of points to reach. Any viewer can contribute any amount of points to goals at any time (provided they have enough).
 
-{{< figure src="../media/loyalty/goal-dialog.png" class="guide-pic" alt="The dialog to create and edit goals" >}}
+![The dialog to create and edit goals](../media/loyalty/goal-dialog.png)
 
 Like in rewards, only the goal ID and name are user facing by default, so fields like icon and description can be omitted.
 
@@ -80,7 +80,7 @@ Unlike rewards, there is no way to refund contributed points to a goal.;
 
 In the redeem queue page you can check out all pending redeems from viewers.
 
-{{< figure src="../media/loyalty/redeem-queue.png" class="guide-pic" alt="The redeem queue page" >}}
+![The redeem queue page](../media/loyalty/redeem-queue.png)
 
 Redeems can be accepted or refunded. If accepted the redeem simply disappears from the list while a refund will remove the redeem while also giving back the points to the viewer that claimed the reward.
 
@@ -88,15 +88,15 @@ Redeems can be accepted or refunded. If accepted the redeem simply disappears fr
 
 The point management page gives you a full list of everyone who has been assigned loyalty points at any point. You can sort it by name or balance and have full control over anyone's balance!
 
-{{< figure src="../media/loyalty/point-list.png" class="guide-pic" alt="The point management page" >}}
+![The point management page](../media/loyalty/point-list.png)
 
 To edit someone's balance, find the entry in the table (you can use the search field to narrow down results) then click the "Edit" in the far right to open up the dialog to modify their balance, set the new balance then click "Save".
 
-{{< figure src="../media/loyalty/edit-balance.png" class="guide-pic" alt="Dialog to modify someone's point balance" >}}
+![Dialog to modify someone's point balance](../media/loyalty/edit-balance.png)
 
 If the viewer you're looking for is not in the list, click the "Give points" button instead, then put in their username and wanted balance. If you use this method on a viewer with an existing balance, those points will be added to their existing balance.
 
-{{< figure src="../media/loyalty/give-points.png" class="guide-pic" alt="Dialog to give someone points" >}}
+![Dialog to give someone points](../media/loyalty/give-points.png)
 
 ## Chat commands
 
@@ -106,7 +106,7 @@ When activated, the loyalty system adds a few commands to the chatbot:
 
 The `!redeem` command lets viewers redeem a reward. The syntax is `!redeem REWARD-ID`.
 
-{{< figure src="../media/loyalty/chat-redeem.png" class="guide-pic" alt="Using the !redeem command" >}}
+![Using the !redeem command](../media/loyalty/chat-redeem.png)
 
 If the reward requires viewer info, it becomes `!redeem REWARD-ID extra info here`.
 
@@ -114,13 +114,13 @@ If the reward requires viewer info, it becomes `!redeem REWARD-ID extra info her
 
 The `!balance` command lets viewers check their current balance.
 
-{{< figure src="../media/loyalty/balance.png" class="guide-pic" alt="Using the !balance command" >}}
+![Using the !balance command](../media/loyalty/balance.png)
 
 #### !goals
 
 The `!goals` command lets viewers check what goals are currently active.
 
-{{< figure src="../media/loyalty/goals-list.png" class="guide-pic" alt="Using the !goals command" >}}
+![Using the !goals command](../media/loyalty/goals-list.png)
 
 #### !contribute
 
@@ -128,13 +128,13 @@ The `!contribute` command lets viewers contribute points to a community goal. Th
 
 The main syntax is `!contribute POINTS GOAL-ID`.
 
-{{< figure src="../media/loyalty/contribute-chat.png" class="guide-pic" alt="Using the !contribute command with the full syntax" >}}
+![Using the !contribute command with the full syntax](../media/loyalty/contribute-chat.png)
 
 There are several shortcuts for this. You can use `!contribute POINTS` to contribute to the first available goal (since most of the time you're going to have only one goal anyway) or `!contribute GOALID` to contribute 100 points to the specified goal id.
 
 You can combine both by just using `!contribute` to contribute 100 points to the first available goal.
 
-{{< figure src="../media/loyalty/contribute-shortcut.png" class="guide-pic" alt="Using the !contribute shortcuts" >}}
+![Using the !contribute shortcuts](../media/loyalty/contribute-shortcut.png)
 
 ## External scripts and extensions
 

content/guide/getting-started/first-time-setup.md

@@ -14,7 +14,7 @@ The starting screen for an unconfigured strimertul lets you choose wether to sta
 
 For the purpose of this guide, proceed through the onboarding by clicking "Get started".
 
-{{< figure src="../media/first-time-setup/first-page.png" class="guide-pic" alt="The first page when strimertül is opened for the first time" >}}
+![The first page when strimertül is opened for the first time](../media/first-time-setup/first-page.png)
 
 ## Twitch application credentials
 
@@ -24,27 +24,27 @@ Note that to create an application you might be asked to enhance the security of
 
 To access the portal just click the link in the UI, it will open it in your default browser.
 
-{{< figure src="../media/first-time-setup/twitch-1.png" class="guide-pic" alt="The twitch app configuration page, with the link to create a new app highlighted" >}}
+![The twitch app configuration page, with the link to create a new app highlighted](../media/first-time-setup/twitch-1.png)
 
 Once in the developer portal, fill out the info as specified in the user interface (i.e. OAuth redirect URL and Category), the name of the application is not important, so choose any that fits your liking.
 
-{{< figure src="../media/first-time-setup/twitch-create.png" class="guide-pic" alt="Creating a new twitch application in the developer portal" >}}
+![Creating a new twitch application in the developer portal](../media/first-time-setup/twitch-create.png)
 
 After you created your application, click the "Manage" button in the application list so you can get its credentials.
 
-{{< figure src="../media/first-time-setup/twitch-list.png" class="guide-pic" alt="The application list, with our newly created app" >}}
+![The application list, with our newly created app](../media/first-time-setup/twitch-list.png)
 
 Scroll down to the bottom and click "New secret". Unlike the Client ID, the generated secret will only be shown **once** so make sure to keep the page open until you are done with the configuration.
 
-{{< figure src="../media/first-time-setup/twitch-new-sec.png" class="guide-pic" alt="The application page, with the New Secret button highlighted" >}}
+![The application page, with the New Secret button highlighted](../media/first-time-setup/twitch-new-sec.png)
 
 Once the secret has been generated and shown, copy over both Client ID and Client Secret to their respective text boxes in strimertül.
 
-{{< figure src="../media/first-time-setup/twitch-copy.png" class="guide-pic" alt="The application page, with both client ID and secret highlighted" >}}
+![The application page, with both client ID and secret highlighted](../media/first-time-setup/twitch-copy.png)
 
 After all is copied, click "Test connection" to let strimertül use the provided credentials to check if they are working correctly. If you get an error screen like the following, double check your credentials.
 
-{{< figure src="../media/first-time-setup/twitch-error.png" class="guide-pic" alt="The error dialog that pops up if the credentials are not valid" >}}
+![The error dialog that pops up if the credentials are not valid](../media/first-time-setup/twitch-error.png)
 
 If everything is valid, you will be automatically moved to the next step.
 
@@ -54,26 +54,26 @@ Now that you have registered strimertül as a Twitch application, you need to au
 
 Click the "Authenticate with Twitch" to open the authentication flow in your default browser.
 
-{{< figure src="../media/first-time-setup/event-ui.png" class="guide-pic" alt="The non-authenticated page" >}}
+![The non-authenticated page](../media/first-time-setup/event-ui.png)
 
 You will be brought on the Twitch authentication flow where you will see all the permissions strimertül asks for. This list is subject to change as Twitch changes APIs over time.
 
 (FLASHBANG WARNING)
 
-{{< figure src="../media/first-time-setup/event-auth.png" class="guide-pic flashbang" alt="The non-authenticated page" >}}
+![The non-authenticated page](../media/first-time-setup/event-auth.png)
 
 Once accepted, the page should either close down or give you a "All done, close me" message, at which point it's safe to close.
 
 Check that strimertül shows the user like so:
 
-{{< figure src="../media/first-time-setup/event-status.png" class="guide-pic" alt="The user showing up as authenticated" >}}
+![The user showing up as authenticated](../media/first-time-setup/event-status.png)
 
 If not, repeat the authentication, otherwise finish up by clicking the button at the bottom.
 
-{{< figure src="../media/first-time-setup/event-complete.png" class="guide-pic" alt="The authenticated event page, with the Finish button highlighted" >}}
+![The authenticated event page, with the Finish button highlighted](../media/first-time-setup/event-complete.png)
 
 ## All done
 
 You are all set! The final page just contains some links to reach out for issues or further clarifications. Click the "Complete onboarding" button to close the first time setup and play around with strimertül.
 
-{{< figure src="../media/first-time-setup/onboarding-end.png" class="guide-pic" alt="The final page with contact info" >}}
+![The final page with contact info](../media/first-time-setup/onboarding-end.png)

content/guide/misc/_index.md

@@ -0,0 +1,7 @@
+---
+menu:
+  guides:
+    identifier: misc
+title: Miscellaneous
+weight: 999
+---

content/guide/misc/renko.md

@@ -0,0 +1,16 @@
+---
+title: Renko
+menu:
+  guides:
+    parent: misc
+---
+
+{{< figure src="../media/renko_1_full.png" class="noborder" width=300 >}}
+
+Renko is strimertül's mascot! It was designed and drawn by [Sonic_Chan](https://www.twitch.tv/sonic_chan).
+
+## Reference sheet
+
+![Reference sheet for Renko](../media/reference-renko.png)
+
+If you draw fanart, show it off via email or other channels and it will be published! (unless it's unreasonable or nsfw)

layouts/partials/image-modal.html

@@ -1,30 +0,0 @@
-<div id="image-modal" class="modal">
-  <button class="modal-close" onclick="closeModal()">close</button>
-  <div class="modal-content">
-    <img
-      class="modal-pic"
-      id="modalPic"
-      onclick="closeModal()"
-      style="max-width: 100%; max-height: 80vh; margin: auto;"
-    />
-  </div>
-</div>
-
-<script>
-  // Open the Modal
-  function openModal(clicked_id) {
-    var src = document.getElementById(clicked_id).src;
-    if (src.includes("#")) {
-      src = src.substring(0, src.indexOf("#"));
-    }
-    document.getElementById("modalPic").src = src;
-    document.getElementById("image-modal").style.display = "block";
-  }
-
-  // Close the Modal
-  function closeModal() {
-    // prevents flashing last modal image while new id is loading on open
-    document.getElementById("modalPic").src = "";
-    document.getElementById("image-modal").style.display = "none";
-  }
-</script>

layouts/releases/_markup/render-image.html

@@ -1,18 +0,0 @@
-<!-- Images that use the standard image format for markdown will be displayed in a 
-  magnific modal popup. Use format ![alt text](/path/to/image.img) -->
-<!-- Place this file in layouts > _default > _markup > render-image.html -->
-<!-- Also place the image-modal.css and partial/image-modal.html appropriately. -->
-<!-- Id for the image on the page is set to a random 6 numbers, chosen from 1 to 500 -->
-<!-- Onclick opens the modal, and displays/overlays the the image that has the id for the 
-  clicked image. -->
-<!-- attribution appreciated. github: zjeaton web: https://froglegs.co -->
-
-<div class="md__image">
-  <img
-    id="{{ first 6 (shuffle (seq 1 500)) }}"
-    src="{{ .Destination | safeURL }}"
-    onclick="openModal(this.id)"
-    alt="{{ .Text }}"
-    {{ with .Title }}title="{{ . }}"{{ end }}
-  />
-</div>

layouts/releases/single.html

@@ -11,5 +11,4 @@
       <section class="copy">{{ .Content }}</section>
     </div>
   </main>
-  {{ partial "image-modal" }}
 {{ end }}

themes/strimertul/assets/scss/guide.scss

@@ -71,7 +71,8 @@
     grid-column: 2;
     padding: 1rem 2rem;
   }
-  .monotitle {
+  .monotitle,
+  code {
     font-family: "Iosevka Web", monospace;
   }
   .reference {
@@ -179,17 +180,19 @@ select {
     font-size: 20px;
   }
 
-  .guide-pic {
+  img {
+    max-width: 100%;
+    border: 2px solid $gray4;
+    border-radius: 3px;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+  }
+  .noborder img {
+    border: none;
+    box-shadow: none;
+  }
+  &.flashbang {
     img {
-      max-width: 100%;
-      border: 2px solid $gray4;
-      border-radius: 3px;
-      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
-    }
-    &.flashbang {
-      img {
-        filter: brightness(80%) contrast(80%);
-      }
+      filter: brightness(80%) contrast(80%);
     }
   }
 }

themes/strimertul/assets/scss/layout.scss

@@ -120,3 +120,37 @@ a.heading-anchor {
     color: $teal9;
   }
 }
+
+figure {
+  margin: 0;
+}
+
+.lightbox {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.8);
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    max-width: 100%;
+    max-height: 90vh;
+  }
+  &:target {
+    outline: none;
+    display: block;
+  }
+  &:hover {
+    background: rgba(0, 0, 0, 0.8);
+  }
+}

themes/strimertul/layouts/_default/_markup/render-image.html

@@ -0,0 +1,48 @@
+<figure width="100%">
+  <a href="#{{ .Destination | md5 }}-lightbox"
+    ><picture>
+      {{ if not (hasPrefix .Destination "http" ) }}
+        {{ $avifPath:= replace .Destination (path.Ext .Destination) ".avif" }}
+        {{ $avifPathStatic := printf "%s/static/%s" .Page.File.Dir $avifPath }}
+        {{ if (fileExists
+          $avifPathStatic)
+        -}}
+          <source srcset="{{ $avifPath | safeURL }}" type="image/avif" />
+        {{- end }}
+        {{ if eq (path.Ext .Destination) ".jpg" }}
+          <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+        {{ end }}
+        {{ if eq (path.Ext .Destination) ".jpeg" }}
+          <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+        {{ end }}
+        {{ if eq (path.Ext .Destination) ".png" }}
+          <source type="image/png" srcset="{{ .Destination | safeURL }}" />
+        {{ end }}
+      {{ end }}
+      <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" />
+    </picture>
+  </a>
+</figure>
+<a href="#_" class="lightbox" id="{{ .Destination | md5 }}-lightbox">
+  <picture>
+    {{ if not (hasPrefix .Destination  "http") }}
+      {{ $avifPath:= replace .Destination (path.Ext .Destination) ".avif" }}
+      {{ $avifPathStatic := printf "%s/static/%s" .Page.File.Dir $avifPath }}
+      {{ if (fileExists
+        $avifPathStatic)
+      -}}
+        <source srcset="{{ $avifPath | safeURL }}" type="image/avif" />
+      {{- end }}
+      {{ if eq (path.Ext .Destination) ".jpg" }}
+        <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+      {{ end }}
+      {{ if eq (path.Ext .Destination) ".jpeg" }}
+        <source type="image/jpeg" srcset="{{ .Destination | safeURL }}" />
+      {{ end }}
+      {{ if eq (path.Ext .Destination) ".png" }}
+        <source type="image/png" srcset="{{ .Destination | safeURL }}" />
+      {{ end }}
+    {{ end }}
+    <img src="{{ .Destination | safeURL }}" alt="{{ .PlainText }}" />
+  </picture>
+</a>