main.py: add embeddable ToS checkbox feature

README.md

@@ -119,6 +119,40 @@ Embedding videos with in-line HTML `iframe` tag does not work.
 instead. To embed an video simply type the following in markdown:
 `![type:video](https://www.youtube.com/embed/LXb3EKWsInQ)` (example).
 
+### Embedding ToS checkbox
+
+A ToS acceptance checkbox can be added to any release page to gate binary
+downloads behind a user acknowledgement. The feature is opt-in per page.
+
+**1. Add the checkbox macro** above the content you want to protect:
+
+```md
+{{ tos_checkbox("unique-section-id") }}
+```
+
+**2. Wrap the protected content** in an HTML div with a matching `id`:
+
+```md
+<div id="unique-section-id" class="tos-gate-content" markdown="1" style="display: none">
+
+...binary download buttons and related content...
+
+</div>
+```
+
+`tos_checkbox` accepts an optional `tos_url` argument to override the default
+Terms of Service link:
+
+```md
+{{ tos_checkbox("unique-section-id", tos_url="https://example.com/terms") }}
+```
+
+For pages with multiple release sections, use a distinct `section-id` per
+release (e.g. `vendor-board-v100-binaries`, `vendor-board-v090-binaries`). See
+[`docs/variants/gigabyte_mz33-ar1/releases.md`][tos-example] for example.
+
+[tos-example]: docs/variants/gigabyte_mz33-ar1/releases.md
+
 ### Embedding subscribe forms
 
 It is possible to embed subscribe form for the selfhosted Listmonk mailing

docs/stylesheets/extra.css

@@ -59,6 +59,30 @@
   background-color: var(--md-accent-fg-color);
 }
 
+.tos-gate {
+  border: 1px solid var(--md-default-fg-color--lighter);
+  border-radius: 0.2rem;
+  padding: 0.75rem 1rem;
+  margin: 1rem 0;
+  background-color: var(--md-code-bg-color);
+}
+
+.tos-gate__label {
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1.6;
+  color: var(--md-default-fg-color);
+}
+
+.tos-gate__checkbox {
+  width: 1rem;
+  height: 1rem;
+  margin-right: 0.4rem;
+  vertical-align: middle;
+  cursor: pointer;
+  accent-color: var(--md-accent-fg-color);
+}
+
 .video-wrapper {
   position: relative;
   display: block;

docs/variants/gigabyte_mz33-ar1/releases.md

@@ -73,6 +73,10 @@ Test results for this release can be found
 
 ### Binaries
 
+{{ tos_checkbox("gigabyte-mz33-ar1-v090-binaries") }}
+
+<div id="gigabyte-mz33-ar1-v090-binaries" class="tos-gate-content" markdown="1" style="display: none">
+
 #### Raw Dasharo image
 
 [sha256][gigabyte_mz33_ar1_v0.9.0.rom_hash]{.md-button}
@@ -91,6 +95,8 @@ Test results for this release can be found
 [sha256][gigabyte_mz33_ar1_v0.9.0.sbom.json_hash]{.md-button}
 [sha256.sig][gigabyte_mz33_ar1_v0.9.0.sbom.json_sig]{.md-button}
 
+</div>
+
 This is a Dasharo Pro Package release. For this platform, access to pre-built
 binaries is provided exclusively through the
 [Full Build for Gigabyte MZ33-AR1](https://shop.3mdeb.com/product/full-build-gigabyte-mz33-ar1-with-dasharo-corebootuefi-pro-package-for-servers/),

main.py

@@ -1,6 +1,27 @@
 def define_env(env):
     """ Define macros for MkDocs """
 
+    @env.macro
+    def tos_checkbox(section_id, tos_url="https://www.dasharo.com/pages/terms/"):
+        """Render a ToS acceptance checkbox that reveals the section with the given id."""
+        checkbox_id = f"tos-cb-{section_id}"
+        onchange = (
+            f"document.getElementById('{section_id}').style.display="
+            f"this.checked?'':'none'"
+        )
+        return (
+            '<div class="tos-gate">'
+            f'<label class="tos-gate__label" for="{checkbox_id}">'
+            f'<input type="checkbox" id="{checkbox_id}" '
+            f'class="tos-gate__checkbox" onchange="{onchange}"> '
+            'I confirm that I have read and agree to the '
+            f'<a href="{tos_url}" target="_blank" rel="noopener noreferrer">'
+            'Dasharo Terms of Service</a> and all applicable open-source '
+            'licensing terms governing this firmware release.'
+            '</label>'
+            '</div>'
+        )
+
     @env.macro
     def subscribe_form(list_id, btn_text):
         return (

mkdocs.yml

@@ -29,6 +29,9 @@ extra:
       link: https://www.reddit.com/r/Dasharo
     - icon: fontawesome/brands/discord
       link: https://discord.gg/QseTVHum3w
+    - icon: fontawesome/solid/scale-balanced
+      link: https://www.dasharo.com/pages/terms/
+      name: Dasharo Terms of Service
 extra_css:
   - stylesheets/extra.css
 extra_javascript:
@@ -50,6 +53,7 @@ markdown_extensions:
       emoji_index: !!python/name:material.extensions.emoji.twemoji
       emoji_generator: !!python/name:material.extensions.emoji.to_svg
   - toc:
+      permalink: true
       toc_depth: 2
   - pymdownx.tasklist:
       custom_checkbox: true