feat(disclaimer/tuto-demo/clearer) Make disclaimer of responsibilities of the customer clearer

src/_includes/badge_page_demo.html

@@ -1 +1 @@
-<a href="#disclaimer" title="Read disclaimer" class="flex grow-0 p-1 px-2 rounded-md border border-sc-purple-2 bg-sc-purple-3 !text-sc-purple-1 text-xs !no-underline hover:cursor-help">Demo</a>
+<span class="flex grow-0 p-1 px-2 rounded-md border border-sc-purple-2 bg-sc-purple-3 !text-sc-purple-1 text-xs">Demo</span>

src/_includes/badge_page_tutorial.html

@@ -1 +1 @@
-<a href="#disclaimer" title="Read disclaimer" class="flex grow-0 p-1 px-2 rounded-md border border-sc-orange-2 bg-sc-orange-3 !text-primary-orange-400 text-xs !no-underline hover:cursor-help">Tutorial</a>
+<span class="flex grow-0 p-1 px-2 rounded-md border border-sc-orange-2 bg-sc-orange-3 !text-primary-orange-400 text-xs">Tutorial</span>

src/_includes/disclaimer_demo.md

@@ -3,6 +3,10 @@ a supported Scalingo product, reference implementation or tutorial. Scalingo
 does not guarantee that it works continuously, remains compatible over time, or
 is suitable for production usage.
 
-This demo may include external dependencies not maintained by Scalingo.
-Customers are solely responsible for validating all aspects (code, security,
-compliance, operations) before any production use.
+This demo may include external dependencies not maintained by Scalingo,
+**customers remain responsible for**:
+
+* Validating all aspects of deployed code and configuration (code, security,
+  compliance, operations) before any production use.
+* Maintaining applications and their components during their runtime (releases
+  monitoring, new version deployments, monitoring, scaling)

src/_includes/disclaimer_tutorial.md

@@ -6,6 +6,10 @@ product or managed service scope. Scalingo provides limited support for the
 Scalingo-controlled scope only.
 
 This tutorial may reference software, repositories, dependencies or
-configuration choices that are not fully maintained or supported by Scalingo.
-**Customers remain responsible for validating the full implementation against
-their own security, compliance, operational and production requirements.**
+configuration choices that are not fully maintained or supported by Scalingo,
+**customers remain responsible for**:
+
+* Validating all aspects of deployed code and configuration (code, security,
+  compliance, operations) before any production use.
+* Maintaining applications and their components during their runtime (releases
+  monitoring, new version deployments, monitoring, scaling)

src/_layouts/tutorials_page.html

@@ -12,27 +12,33 @@ <h1 class="text-sc-gray-1 text-sc-title-1 font-bold">
                 {{ page.title }}
             </h1>
 
-            <div class="flex flew-col gap-2 mt-6">
-            {% assign kind = page.kind | default: "demo" %}
-            {% assign p = "badge_page_" | append: kind | append: ".html" %}
-            {% include {{ p }} %}
-            {% if page.products.size > 0 %}
-                {% for product in page.products %}
-                {% include badge_page_product.html product=product %}
-                {% endfor %}
-            {% endif %}
+            <div class="flex flex-col gap-2 mt-6">
+                <div class="flex flex-row gap-2">
+                {% assign kind = page.kind | default: "demo" %}
+                {% assign p = "badge_page_" | append: kind | append: ".html" %}
+                {% include {{ p }} %}
+                {% if page.products.size > 0 %}
+                    {% for product in page.products %}
+                    {% include badge_page_product.html product=product %}
+                    {% endfor %}
+                {% endif %}
+                </div>
+
+                <details class="text-sm pt-4" id="disclaimer">
+                    <summary class="cursor-pointer"><span class="font-bold">Responsibility Disclaimer:</span><br><span class="text-xs italic">This page is designed as an example, you are responsible of what is deployed and its maintenance. <span class="font-bold">Click to read more</span></span></summary>
+                    <div class="p-6 mt-2 bg-sc-gray-4 rounded-md italic">
+                        {% assign d = "disclaimer_" | append: kind | append: ".md" %}
+                        {% capture disclaimer -%}
+                        {% include {{d }} %}
+                        {%- endcapture %}
+                        {{ disclaimer | markdownify }}
+                    </div>
+                </details>
             </div>
 
             <section class="py-0">
                 {{ content | inject_anchors }}
             </section>
-            <section class="p-6 bg-sc-gray-4 rounded-md text-sm italic" id="disclaimer">
-                {% assign d = "disclaimer_" | append: kind | append: ".md" %}
-                {% capture disclaimer -%}
-                {% include {{d }} %}
-                {%- endcapture %}
-                {{ disclaimer | markdownify }}
-            </section>
             <section class="flex flex-col md:flex-row pt-6 justify-between text-sc-text-2 border-t border-sc-gray-3">
                 <span itemprop="datePublished" content="{{ page.modified_at }}">
                     {% if page.modified_at %} Last update: {{ page.modified_at | date_to_string }} {% endif %}