Add alert about demo site (#174)

Signed-off-by: Cintia Sánchez García <[email protected]>

Author: cynthia-sg

ocg-server/templates/common/base.html

@@ -89,13 +89,19 @@
     </a>
     {# End skip navigation link -#}
 
+    {# Alert -#}
+    {% if !path.starts_with("/dashboard") -%}
+      {% include "common/demo_alert.html" -%}
+    {% endif -%}
+    {# End alert -#}
+
     <div class='min-h-full flex flex-col {% if path == "/" %}bg-white{% else %}bg-stone-100{% endif %}'>
       <div class='{%- if path == "/" -%}bg-stone-100{%- else if path == "/explore" -%}bg-transparent{%- endif -%}'>
+        {# Header -#}
         {% if !path.starts_with("/dashboard") -%}
-          {# Header -#}
           <div class="px-4 lg:px-5">{% include "common/header.html" -%}</div>
-          {# End header -#}
         {% endif -%}
+        {# End header -#}
 
         {# Jumbotron -#}
         {% block jumbotron -%}
@@ -110,11 +116,11 @@
       </main>
       {# End content -#}
 
+      {# Footer -#}
       {% if !path.starts_with("/dashboard") && path != "/log-in" && path != "/sign-up" -%}
-        {# Footer -#}
         {% include "common/footer.html" -%}
-        {# End footer -#}
       {% endif -%}
+      {# End footer -#}
     </div>
 
     {% block scripts -%}

ocg-server/templates/common/demo_alert.html

@@ -0,0 +1,27 @@
+<div class="p-2 px-10 border-b border-stone-200 bg-white relative"
+     role="alert">
+  <div class="text-xs text-stone-700 text-center">
+    This is a demo of <span class="font-medium text-primary-500">Open Community Groups</span>. <span class="hidden md:inline">The actual CNCF community groups site is <a href="https://community.cncf.io"
+    class="font-medium text-primary-500 hover:underline"
+    target="_blank"
+    rel="noopener noreferrer">https://community.cncf.io</a>.</span>
+  </div>
+  <button id="beta-alert-close"
+          type="button"
+          class="absolute end-5 top-1.5"
+          aria-label="Close">
+    <span class="sr-only">Dismiss</span>
+    <div class="svg-icon size-5 bg-stone-500 hover:bg-stone-800 transition-colors icon-close"></div>
+  </button>
+</div>
+<script type="module">
+  const betaAlertClose = document.getElementById('beta-alert-close');
+  if (betaAlertClose) {
+    betaAlertClose.addEventListener('click', () => {
+      const alert = betaAlertClose.parentElement;
+      if (alert) {
+        alert.classList.add('hidden');
+      }
+    });
+  }
+</script>