✨ feat: update cookie consent UI configuration

This commit introduces several key updates to further enhance user
control over the cookie consent interface and the import of AMP extensions.

- Modified to allow enabling or disabling the cookie consent interface
  by setting `consent=true/false` in the `_config.yml` file. This
  provides greater flexibility in managing user consent preferences.

- Modified to conditionally import the minified `amp-consent.css`,
  `amp-consent` and `amp-script` extensions. This change optimizes the
  loading based on the specific needs of the page, improving overall
  performance.

- Modified the `granular-user-consent.html` to allow removing the
  `data-ampdevmode` attribute from the custom script by setting
  `consent_dev_mode=false`. This remains particularly useful when
  building the site with the AMP Optimizer, which generates the hash for
  the script and inserts the `<meta>` tag automatically.

- Added `consent=true` and `consent_dev_mode=false` in the `_config.yml`
  file for the demo site.

These updates collectively aim to provide users with more control over
their site's consent interface and AMP extension usage, while also
improving site performance and development efficiency.

See: #44

_config.yml

@@ -18,6 +18,7 @@ nav:
   buttons:
     gh_sponsors: true # Show GitHub Sponsors button
   global:
+    home: false
     menu: false
     dropdown: false # Show menu with dropdown submenu
   local:
@@ -89,6 +90,10 @@ copyright:
   ownership: Chris KY FUNG
   link: https://chriskyfung.github.io/
 
+# Cookie Consent Notice
+consent: true
+consent_dev_mode: false
+
 # Plugins
 plugins: 
   - jekyll-archives

_includes/consent/granular-user-consent.html

@@ -12,7 +12,11 @@
 </amp-state>
 
 <!-- Ref: https://amp.dev/documentation/examples/components/amp-script/#local-storage -->
+{%- if jekyll.environment == 'production' and site.consent_dev_mode == false -%}
+<amp-script script="get-stored-consentStates" nodom>
+{%- else -%}
 <amp-script script="get-stored-consentStates" nodom data-ampdevmode>
+{%- endif -%}
 </amp-script>
 <script id="get-stored-consentStates" type="text/plain" target="amp-script">
   const str = atob(localStorage.getItem('amp-store:{{ site.url }}'));

_layouts/default.html

@@ -7,7 +7,9 @@
     {% seo %}
     <link as="script" href="https://cdn.ampproject.org/v0.js" rel="preload">
     <script async src="https://cdn.ampproject.org/v0.js"></script>
+    {%- if site.consent == true -%}
     <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
+    {%- endif -%}
     <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
     {%- if site.adsense.client_id and site.adsense.auto_ads != false -%}
     <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
@@ -26,9 +28,9 @@
     {%- if layout.amp.iframe or page.amp.iframe or true -%}
     <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
     {%- endif -%}
+    {%- if site.consent == true or layout.amp.script or page.amp.script -%}
     <script async custom-element="amp-script" src="https://cdn.ampproject.org/v0/amp-script-0.1.js"></script>
-    <!-- {%- if layout.amp.script or page.amp.script -%} -->
-    <!-- {%- endif -%} -->
+    {%- endif -%}
     {%- if page.amp.youtube -%}
     <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
     {%- endif -%}
@@ -72,7 +74,9 @@
       {% include css/amp-bs4.min.css %}
       {% include css/amp-theme.min.css %}
       {% include css/amp-navigation.min.css %}
-      {% include css/amp-consent.css %}
+    {%- if site.consent == true -%}
+      {% include css/amp-consent.min.css %}
+    {%- endif -%}
     {%- if site.invitation_codes != false -%}
       {% include css/amp-invitation-codes.min.css %}
     {%- endif -%}
@@ -110,7 +114,9 @@
   {%- capture layout -%}{% if page.layout %}layout-{{ page.layout }}{% endif %}{%- endcapture -%}
 
   <body class="{{ layout }}" data-amp-auto-lightbox-disable>
+    {%- if site.consent == true -%}
     {% include consent/granular-user-consent.html %}
+    {%- endif -%}
 
     {%- if site.gtm -%}
     <!-- Google Tag Manager -->