move reaction section to own template

templates/body_bottom.html

@@ -1,9 +1,19 @@
-{% if static.scripts.bootstrap %}
+{% if static.scripts | length >= 1 +%}
+
+<!-- Scripts -->
+
+  {% for _, script in static.scripts | items %}
+    {# Load scripts at the bottom by default #}
+    {% if not script.place_in_head | default(False) %}
   <script
-    src="{{ static.scripts.bootstrap.src | default('') }}"
+    src="{{ script.src }}"
-    integrity="{{ static.scripts.bootstrap.integrity | default('') }}"
+    {{- 'integrity="' + script.integrity + '"' if script.integrity else omit }}
-    crossorigin="{{ static.scripts.bootstrap.crossorigin | default('anonymous' if static.scripts.bootstrap.integrity else '') }}"
+    {{- 'crossorigin="' + script.crossorigin + '"' if script.integrity else omit }}
   ></script>
+
     {% endif %}
+  {% endfor %}
+{% endif %}
+
 </body>
 </html>

templates/call_to_action.html

@@ -1,4 +1,4 @@
-<!--
+<!--{#
   #~ Var | Required | Default ~#
   active | no | false
   header | yes | none
@@ -10,20 +10,20 @@
       - icon | no | none
       - text | yes | none
     ... (etc)
--->
+#}-->
-{% if active | default(false) %}
+{% if call_to_action.active | default(false) %}
 <section class="py-5 text-center container">
   <div class="row py-lg-5">
     <div class="col-lg-6 col-md-8 mx-auto">
-      <h1 class="fw-light">{{ header }}</h1>
+      <h1 class="fw-light">{{ call_to_action.header }}</h1>
-      <p class="lead text-body-secondary">{{ lead_text }}</p>
+      <p class="lead text-body-secondary">{{ call_to_action.lead_text }}</p>
 
-      {% if action_buttons %}
+      {% if call_to_action.buttons %}
       <p>
-        {% for button in action_buttons %}
+        {% for button in call_to_action.buttons %}
         <a
           href="{{ button.href | default('#') }}"
-          class="btn btn-{{ button.theme | default('primary') }} my-2 d-inline-flex"
+          class="btn btn-{{ button.theme | default('primary') }} my-2"
         >
           {% if button.icon %}
           <i class="bi-{{ button.icon }}"></i>

templates/card.html

@@ -1,40 +1,58 @@
-<div class="col">
 <div class="card shadow-sm">
-    <div class="card-header">
+
-      <span class="flex">{{ gallery.title }}</span>
+{% if this.headline and this.headline|length >= 1 and not this.title %}
-      <a
+  <div class="card-header position-relative">
-        href="#"
+
-        class="btn btn-link float-end"
+  {{ this.headline }}
-        data-bs-toggle="tooltip"
+
-        data-bs-placement="top"
+  {% if gallery.reactions_enabled|default(False) %}
-        data-bs-title="Add a reaction"
+    <a href="#" class="btn btn-link float-end">
-      >
+      <i class="bi-heart-fill position-absolute translate-middle top-50 end-1 text-danger"></i>
-        <i class="bi-heart-fill text-end" style="font-size: 1rem; color: pink;"></i>
     </a>
+  {% endif %}
+
   </div>
+{% endif %}
 
   <img
     class="card-image-top"
-      width="{{ gallery.width | default('100%') }}"
+    src="{{ this.src }}"
-      height="{{ gallery.height | default('225') }}"
+    alt="{{ this.alt_text if this.alt_text else this.title }}"
-      src="{{ gallery.src }}"
-      alt="{{ gallery.alt_text if gallery.alt_text else gallery.title }}"
   />
 
-    <div class="card-body">
+{% if this.description and this.description|length >= 1 %}
-      <p class="card-text">{{ gallery.description | default('') }}</p>
+  <div class="card-body position-relative">
-    </div>
 
-    <div class="card-footer text-body-secondary text-end">
+  {% if this.title and this.title|length >= 1 %}
-      {% if gallery.reactions %}
+    <h5 class="card-title">{{ this.title }}</h5>
-        {% for reaction in gallery.reactions %}
+
-        {# TODO: limit total number of reactions shown #}
+    {% if this.subtitle and this.subtitle|length >= 1 %}
-      <span class="badge rounded-pill">
+    <h6 class="card-subtitle mb-2 text-body-secondary">{{ this.subtitle }}</h6>
-        <i class="bi-{{ reaction }}" style="color: black;"></i>
+    {% endif %}
-      </span>
+
-        {% endfor %}
+    {% if gallery.reactions_enabled|default(False) %}
+    <a href="#" class="btn btn-link position-absolute bottom-1 end-0">
+      <i class="bi-heart-fill text-danger"></i>
+    </a>
+    {% endif %}
+  {% endif %}
+
+    <p class="card-text">{{ this.description }}</p>
+
+  {% if this.subtext and this.subtext|length >= 1 %}
+    <p class="card-text">
+      <small class="text-body-secondary">
+        {{ this.subtext }}
+      </small>
+    </p>
   {% endif %}
-    </div>
 
   </div>
+{% endif %}
+
+{# Don't render reaction section if disabled or max reactions are zero (or less) #}
+{% if gallery.reactions_enabled|default(False) or gallery.max_reactions_per_card|int <= 0 %}
+  {% include 'card_reaction_section.html' %}
+{% endif %}
+
 </div>

templates/card_loading.html

@@ -1,4 +1,3 @@
-<div class="col">
 <div class="card" aria-hidden="true">
   <div class="card-header">
     <div class="d-flex align-items-center">
@@ -20,4 +19,4 @@
     </p>
   </div>
 </div>
-</div>
+

templates/card_reaction_section.html

@@ -0,0 +1,35 @@
+{% if this.reactions and gallery.max_reactions_per_card|int >= 1 %}
+<div class="card-footer text-body-secondary text-end">
+
+  {% set reaction_iterations = namespace(value=0) %}
+  {% for reaction, reaction_count in this.reactions|dictsort(by="value") %}
+
+    {# Don't render reaction if we've reached the max number, or its counter is 0 (or lower) #}
+    {% if reaction_iterations.value|int != gallery.max_reactions_per_card|int and reaction_count|int >= 1 %}
+
+  <button class="btn btn-link btn-sm disabled text-body position-relative">
+      {# TODO: Enable the button, and make clicking it toggle adding/removing that reaction to the counter, also color reaction button #}
+    <i class="bi-{{ reaction }}"></i>
+
+      {# Only show counter if more than 2 people gave the same reaction #}
+      {% if reaction_count|int >= 2 %}
+    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-body-inverted text-body-inverted">
+
+        {# Don't render reaction counts larger than 1000 #}
+        {{ reaction_count if reaction_count <= 999 else '1K+' }}
+
+      <span class="visually-hidden">
+        {{ reaction_count }} people reacted with {{ reaction }}
+      </span>
+    </span>
+      {% endif %}
+  </button>
+
+      {% set reaction_iterations.value = reaction_iterations.value + 1 %}
+    {% endif %}
+  {% endfor %}
+
+  {% set reaction_iterations = none %}
+
+</div>
+{% endif %}

templates/footer.html

@@ -1,9 +1,9 @@
-<!--
+<!--{#
   #~ Var | Required | Default ~#
   main_line | no | none
   extra_lines (list)
     - (text to print) | no | none
--->
+#}-->
 
   <footer class="text-body-secondary py-5">
     <div class="container">

templates/gallery.html

@@ -1,10 +1,10 @@
 <div class="album py-5 bg-body-tertiary">
   <div class="container">
-    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3">
+    <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3" data-memory='{"PercentPossition": true}'>
 
-      {% for gallery in gallery_items %}
+      {% for this in gallery_items %}
-        {% include 'card.html' %}
+        <div class="col-md">{% include 'card.html' %}</div>
-        {# include 'card_loading.html' #}
+        <div class="col-md">{% include 'card_loading.html' %}</div>
       {% endfor %}
 
     </div>

templates/header.html

@@ -48,12 +48,24 @@
   data-bs-theme="{{ css_theme_name | default('auto') }}"
 >
 <head>
-  {% if static.scripts.theme %}
+
+  {# Scripts that should be loaded first to avoid flickering (theme, etc) #}
+  {% if static.scripts | length >= 1 %}
+
+  <!-- Scripts -->
+
+    {% for _, script in static.scripts | items %}
+      {# Only load script if it should be in the head #}
+      {% if script.place_in_head | default(False) %}
+
     <script
-      src="{{ static.scripts.theme.src | default('') }}"
+      src="{{ script.src }}"
-      integrity="{{ static.scripts.theme.integrity | default('') }}"
+      {{- 'integrity="' + script.integrity + '"' if script.integrity else omit }}
-      crossorigin="{{ static.scripts.theme.crossorigin | default('anonymous' if static.scripts.theme.integrity else '') }}"
+      {{- 'crossorigin="' + script.crossorigin + '"' if script.integrity else omit }}
     ></script>
+
+      {% endif %}
+    {% endfor %}
   {% endif %}
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -92,31 +104,19 @@
     <link rel="icon" href="/docs/5.3/assets/img/favicons/favicon.ico">
     -->
 
-    {% if static.css.bootstrap %}
+  {% if static.css | length >= 1 +%}
-    <link
-      rel="stylesheet"
-      href="{{ static.css.bootstrap.src }}"
-      integrity="{{ static.css.bootstrap.integrity | default('') }}"
-      crossorigin="{{ static.css.bootstrap.crossorigin | default('anonymous' if static.css.bootstrap.integrity else '') }}"
-    />
-    {% endif %}
 
-    {% if static.css.theme %}
+  <!-- CSS -->
-    <link
-      rel="stylesheet"
-      href="{{ static.css.theme.src }}"
-      integrity="{{ static.css.theme.integrity | default('') }}"
-      crossorigin="{{ static.css.theme.crossorigin | default('anonymous' if static.css.theme.integrity else '') }}"
-    />
-    {% endif %}
 
-    {% if static.css.icons %}
+    {% for _, style in static.css | items %}
     <link
       rel="stylesheet"
-      href="{{ static.css.icons.src }}"
+      href="{{ style.src }}"
-      integrity="{{ static.css.icons.integrity | default('') }}"
+      {{- 'integrity="' + style.integrity + '"' if style.integrity else omit }}
-      crossorigin="{{ static.css.icons.crossorigin | default('anonymous' if static.css.icons.integrity else '') }}"
+      {{- 'crossorigin="' + style.crossorigin + '"' if style.integrity else omit }}
     />
+
+    {% endfor %}
   {% endif %}
 
 </head>

templates/static/color-modes.js

@@ -0,0 +1,80 @@
+/*!
+ * Color mode toggler for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2023 The Bootstrap Authors
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ */
+
+(() => {
+  'use strict'
+
+  const getStoredTheme = () => localStorage.getItem('theme')
+  const setStoredTheme = theme => localStorage.setItem('theme', theme)
+
+  const getPreferredTheme = () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme) {
+      return storedTheme
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+  }
+
+  const setTheme = theme => {
+    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      document.documentElement.setAttribute('data-bs-theme', 'dark')
+    } else {
+      document.documentElement.setAttribute('data-bs-theme', theme)
+    }
+  }
+
+  setTheme(getPreferredTheme())
+
+  const showActiveTheme = (theme, focus = false) => {
+    const themeSwitcher = document.querySelector('#bd-theme')
+
+    if (!themeSwitcher) {
+      return
+    }
+
+    const themeSwitcherText = document.querySelector('#bd-theme-text')
+    const activeThemeIcon = document.querySelector('.theme-icon-active use')
+    const btnToActive = document.querySelector(`[data-bs-theme-value="${theme}"]`)
+    const svgOfActiveBtn = btnToActive.querySelector('svg use').getAttribute('href')
+
+    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+      element.classList.remove('active')
+      element.setAttribute('aria-pressed', 'false')
+    })
+
+    btnToActive.classList.add('active')
+    btnToActive.setAttribute('aria-pressed', 'true')
+    activeThemeIcon.setAttribute('href', svgOfActiveBtn)
+    const themeSwitcherLabel = `${themeSwitcherText.textContent} (${btnToActive.dataset.bsThemeValue})`
+    themeSwitcher.setAttribute('aria-label', themeSwitcherLabel)
+
+    if (focus) {
+      themeSwitcher.focus()
+    }
+  }
+
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const storedTheme = getStoredTheme()
+    if (storedTheme !== 'light' && storedTheme !== 'dark') {
+      setTheme(getPreferredTheme())
+    }
+  })
+
+  window.addEventListener('DOMContentLoaded', () => {
+    showActiveTheme(getPreferredTheme())
+
+    document.querySelectorAll('[data-bs-theme-value]')
+      .forEach(toggle => {
+        toggle.addEventListener('click', () => {
+          const theme = toggle.getAttribute('data-bs-theme-value')
+          setStoredTheme(theme)
+          setTheme(theme)
+          showActiveTheme(theme, true)
+        })
+      })
+  })
+})()

templates/static/gallery.css

@@ -0,0 +1,88 @@
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+}
+
+@media (min-width: 768px) {
+  .bd-placeholder-img-lg {
+    font-size: 3.5rem;
+  }
+}
+
+.b-example-divider {
+  width: 100%;
+  height: 3rem;
+  background-color: rgba(0, 0, 0, .1);
+  border: solid rgba(0, 0, 0, .15);
+  border-width: 1px 0;
+  box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
+}
+
+.b-example-vr {
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 100vh;
+}
+
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
+
+.nav-scroller {
+  position: relative;
+  z-index: 2;
+  height: 2.75rem;
+  overflow-y: hidden;
+}
+
+.nav-scroller .nav {
+  display: flex;
+  flex-wrap: nowrap;
+  padding-bottom: 1rem;
+  margin-top: -1px;
+  overflow-x: auto;
+  text-align: center;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+}
+
+.btn-bd-primary {
+  --bd-violet-bg: #712cf9;
+  --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
+
+  --bs-btn-font-weight: 600;
+  --bs-btn-color: var(--bs-white);
+  --bs-btn-bg: var(--bd-violet-bg);
+  --bs-btn-border-color: var(--bd-violet-bg);
+  --bs-btn-hover-color: var(--bs-white);
+  --bs-btn-hover-bg: #6528e0;
+  --bs-btn-hover-border-color: #6528e0;
+  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
+  --bs-btn-active-color: var(--bs-btn-hover-color);
+  --bs-btn-active-bg: #5a23c8;
+  --bs-btn-active-border-color: #5a23c8;
+}
+
+.bd-mode-toggle {
+  z-index: 1500;
+}
+
+.bd-mode-toggle .dropdown-menu .active .bi {
+  display: block !important;
+}
+
+/*
+  Surprised this doesn't exist by default.
+  Inverted colors for the current theme; works with the color switcher
+*/
+.bg-body-inverted {
+  background-color: var(--bs-body-color);
+}
+
+.text-body-inverted {
+  color: var(--bs-body-bg);
+}

test.py

@@ -19,13 +19,19 @@ template_vars = {
     "static": {
         "scripts": {
             "bootstrap": {
-                "src": "./templates/example/bootstrap.bundle.min.js",
+                "src": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js",
+            },
+            "theme": {
+                "src": "./templates/static/color-modes.js",
+                "place_in_head": True,
+            },
+            "masonry": {
+                "src": "https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"
             },
-            "theme": {"src": ".templates/example/color-modes.js"},
         },
         "css": {
-            "bootstrap": {"src": "./templates/example/bootstrap.min.css"},
+            "bootstrap": {"src": "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"},
-            "theme": {"src": "./templates/example/gallery.css"},
+            "theme": {"src": "./templates/static/gallery.css"},
             "icons": {
                 "src": "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css"
             },
@@ -48,12 +54,13 @@ template_vars = {
         "main_line": "Copyright 2024 Code Fox",
         "extra_lines": ["This is another line", "This is yet another line"],
     },
+    "call_to_action": {
         "active": False,
         "header": "This is a call to action",
         "lead_text": "Some interesting text for the user",
-    "action_buttons": [
+        "buttons": [
-        {"href": "1"},
+            {"text": "something"},
-        {"href": "2", "theme": "danger"},
+            {"theme": "danger", "text": "something dangerous"},
             {"href": "3", "theme": "warning", "icon": "exclamation-diamond-fill"},
             {
                 "href": "3",
@@ -62,18 +69,54 @@ template_vars = {
                 "text": "some text",
             },
         ],
+    },
+    "gallery": {
+        "max_reactions_per_card": 9,
+        "reactions_enabled": True,
+    },
     "gallery_items": [
         {
             "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
+            "headline": "Alopex-Vulpes",
             "description": "An arctic fox :3",
-            "title": "fox",
+            "reactions": {
-            "reactions": ["heart-fill", "backpack4", "balloon-fill", "bag-x-fill"],
+                "0-circle": 1,
+                "1-circle": 2,
+                "2-circle": 3,
+                "3-circle": 4,
+                "4-circle": 5,
+                "5-circle": 6,
+                "6-circle": 7,
+                "7-circle": 8,
+                "8-circle": 9,
+                "9-circle": 10,
+                "0-circle-fill": 11,
+                "1-circle-fill": 12,
+                "2-circle-fill": 13,
+                "3-circle-fill": 14,
+                "4-circle-fill": 15,
+                "5-circle-fill": 16,
+                "6-circle-fill": 17,
+                "7-circle-fill": 18,
+                "8-circle-fill": 19,
+                "9-circle-fill": 20,
+            },
         },
         {
-            "src": "https://files.c0defox.es/Pictures/arctic-fox.jpg",
+            "src": "https://files.c0defox.es/Pictures/20150825_114759.jpg",
-            "description": "An arctic fox :3",
+            "description": "The inside of a Data Center",
-            "title": "fox",
+            "title": "Data Center",
-            "reactions": ["heart", "backpack3", "balloon", "bag-x"],
+            "reactions": {"heart-fill": 1024, "bag-x-fill": 50},
+        },
+        {
+            "src": "https://secure.gravatar.com/avatar/1e346a54257cf0a9932fcfc1e61c015d?s=200",
+            "description": "",
+            "title": "",
+        },
+        {
+            "src": "https://c0defox.es/paw-tail.svg",
+            "alt_text": "a fox tail next to a paw print",
+            "title": "",
         },
     ],
 }