From 88a86b67c0e4e423bdf5bba01643346f7492991d Mon Sep 17 00:00:00 2001
From: "Chris K.Y. FUNG" <8746768+chriskyfung@users.noreply.github.com>
Date: Tue, 12 Mar 2024 01:44:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=91=20fix(amp):=20remove=20`data-ampde?=
 =?UTF-8?q?vmode`=20on=20non-dev=20environment?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit removes the `data-ampdevmode` attribute from the `<amp-script>` component in non-development environments. This attribute is used to enable development-specific features, such as the ability to load scripts from a local server. However, it can also lead to unintended behavior in production environments, such as preventing scripts from running or causing validation errors.

By removing this attribute in non-development environments, we ensure that AMP pages are always served with the correct configuration and that scripts are executed as intended.

To address this issue, this commit adds two new options to the site configuration:
- `amp_optimizer`: Set true if you run AMP Optimizer after building the Jekyll site. Defaults to false.
- `script_hash`: A hash for the get_stored_consentStates script. Defaults to empty.

Fixes #58
See also #44
---
 _config.yml                                  |  3 +++
 _includes/consent/granular-user-consent.html |  7 +++----
 _layouts/default.html                        |  3 +++
 _posts/2021-08-02-config-guide.md            | 18 +++++++++++++-----
 4 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/_config.yml b/_config.yml
index 13c9b0d8..3926a043 100644
--- a/_config.yml
+++ b/_config.yml
@@ -92,6 +92,9 @@ copyright:
 # Cookie Consent Notice
 consent: true
 consent_dev_mode: false
+amp_optimizer: true
+script_hash:
+  consent_gsc: sha384-n2-YMnb2FkeDk-Ca2pVnoYSR2FqNKqKgTwfK_UI0EAeVRCAHgCDjsecHJpVMv3Sl
 
 # Plugins
 plugins: 
diff --git a/_includes/consent/granular-user-consent.html b/_includes/consent/granular-user-consent.html
index c024690d..fc643747 100644
--- a/_includes/consent/granular-user-consent.html
+++ b/_includes/consent/granular-user-consent.html
@@ -12,12 +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>
+{%- if jekyll.environment == 'production' or site.consent_dev_mode == false -%}
+<amp-script script="get-stored-consentStates" nodom></amp-script>
 {%- else -%}
-<amp-script script="get-stored-consentStates" nodom data-ampdevmode>
+<amp-script script="get-stored-consentStates" nodom data-ampdevmode></amp-script>
 {%- endif -%}
-</amp-script>
 <script id="get-stored-consentStates" type="text/plain" target="amp-script">
   const str = atob(localStorage.getItem('amp-store:{{ site.url }}'));
   const json = JSON.parse(str);
diff --git a/_layouts/default.html b/_layouts/default.html
index c6175369..7780962c 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -63,6 +63,9 @@
 
     {%- if jekyll.environment == 'production' -%}
       {%- assign adtest_status = '' -%}
+      {%- if site.amp_optimizer != true && site.script_hash.consent_gsc -%}
+        <meta name="amp-script-src" content="{{ site.script_hash.consent_gsc }}">
+      {%- endif -%}
     {%- else -%}
       {%- assign adtest_status = 'data-adtest="on"' -%}
     {%- endif -%}
diff --git a/_posts/2021-08-02-config-guide.md b/_posts/2021-08-02-config-guide.md
index 520b5ffe..b063def7 100644
--- a/_posts/2021-08-02-config-guide.md
+++ b/_posts/2021-08-02-config-guide.md
@@ -287,12 +287,20 @@ copyright:
 
 * * *
 
-### Cookie Consent Options <span class="badge badge-success">v2.9</span>
+### Cookie Consent <span>v2.9</span>{:.badge.badge-success}
 
-|     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}. |
+|          Attribute | Description                                                                                                   |
+| -----------------: | ------------------------------------------------------------------------------------------------------------- |
+|          `consent` | Set `true`{:.green} to enable the cookie consent UI.<br> _Default:_ `false`.                                  |
+| `consent_dev_mode` | Set `false` to remove the `data-ampdevmode` attribute from the custom script.<br> _Default:_ `true`{:.green}. |
+
+|       Attribute | Property      | Description                                                                                                                                         |
+| --------------: | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `amp_optimizer` |               | <span>v2.9.1</span>{:.badge.badge-success}<br> Set `true`{:.green} if you run AMP Optimizer after building the Jekyll site.<br> _Default_: `false`. |
+|   `script_hash` |               | <span>v2.9.1</span>{:.badge.badge-success}                                                                                                          |
+|                 | `consent_gsc` | The hash for the `get_stored_consentStates` script.<br> 💡 [Calculating the script hash].                                                             |
+
+[Calculating the script hash]: https://amp.dev/documentation/components/amp-script#calculating-the-script-hash "Documentation: <amp-script> - amp.dev"
 
 * * *