✨ 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.

Additionally, the documentation in the `config-guide.md` has been
updated to reflect these changes and provide guidance on how to use this
new feature.

See: #44

_config.yml

@@ -89,6 +89,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,10 +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 layout.amp.script or page.amp.script -%}
+    {%- 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 -%}
@@ -73,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 -%}
@@ -111,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 -->

_posts/2021-08-02-config-guide.md

@@ -275,6 +275,15 @@ copyright:
 
 * * *
 
+### Cookie Consent Options <span class="badge badge-success">v2.9</span>
+
+|     Attribute      | Description                                                                                                                                                        |
+| :----------------: | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+|     `consent`      | Set `true`{:.plaintext} to enable the cookie consent UI.<br> _Default:_ `false`{:.plaintext}.                                                                      |
+| `consent_dev_mode` | Set `false`{:.plaintext} to remove the `data-ampdevmode`{:.plaintext} attribute from the custom script for production builds. <br> _Default:_ `true`{:.plaintext}. |
+
+* * *
+
 ### SEO Configuration
 
 **AMP Affiliately Theme** uses [Jekyll SEO Tag](https://github.com/jekyll/jekyll-seo-tag) to output machine-readable metadata for search engines and social networks to index and display. The following is recommended to configure in the `_config.yml` file: