Merge pull request #1267 from Dasharo/tos-agreement-box

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/building-manual.md

@@ -15,9 +15,58 @@ MZ33-AR1.
 
 ## Building
 
-!!! Error "STOP"
+To build Dasharo (coreboot+UEFI) firmware image, first clone the coreboot
+repository:
 
-    Building the firmware from source is currently only available after
-    purchasing the product from [our
-    shop](https://shop.3mdeb.com/product/full-build-gigabyte-mz33-ar1-with-dasharo-corebootuefi-pro-package-for-servers/)
-    and agreeing to the terms of service.
+```bash
+git clone https://github.com/Dasharo/coreboot.git
+```
+
+then follow the steps below:
+
+1. To build a specific version checkout to the version's tag.
+    Skip this step otherwise.
+
+    ```bash
+    cd coreboot
+    git checkout gigabyte_mz33_ar1_<version>
+    ```
+
+    For example
+
+    ```bash
+    git checkout gigabyte_mz33_ar1_v0.9.0
+    ```
+
+2. Checkout submodules:
+
+    ```bash
+    git submodule update --init --checkout
+    ```
+
+3. Download the package with necessary blobs and put it in proper directory:
+
+{{ tos_checkbox("gigabyte-mz33-ar1-v090-blobs") }}
+
+<div id="gigabyte-mz33-ar1-v090-blobs"
+     class="tos-gate-content" markdown="1"
+     style="display: none">
+
+- Download the [blobs
+package](https://dl.3mdeb.com/open-source-firmware/Dasharo/gigabyte_mz33_ar1/uefi/v0.9.0/Turin.zip).
+- Then unzip it to the following directory:
+
+    ```bash
+    unzip Turin.zip -d 3rdparty/blobs/soc/amd/
+    ```
+
+</div>
+
+Now build the firmware:
+
+```bash
+./build.sh mz33_ar1
+```
+
+The resulting coreboot image will be placed in the coreboot directory as
+`asrock_spc741d8_<version>.rom` and

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