#890 recommend use of primary publish-to-the-web URL, allow that through the authoring tool, and encode/decode it rather than pack the full sheets URL into timeline URLs

Author: JoeGermuska

CHANGELOG.md

@@ -1,3 +1,8 @@
+3.9.7 (2025-03-10)
+-------------------------
+* #834 Improved timegroup-message element contrast
+* #890 Fixes to support modern Google Sheets publish-to-web URL format
+
 3.9.6 (2025-01-10)
 -------------------------
 * Change initial computation of component heights to address axis labels overflowing 

src/js/core/ConfigFactory.js

@@ -19,19 +19,25 @@ export function parseGoogleSpreadsheetURL(url) {
         }
         // key as url parameter (old-fashioned)
     var key_pat = /\bkey=([-_A-Za-z0-9]+)&?/i;
+    // https://docs.google.com/spreadsheets/d/e/2PACX-1vTwrxBim-ruoMlLP9CnZIevWdP8rIatkV7XjNGXRSaMI94sNd-VbRF--W7A2kj6wfZhKUHWv1ur0Tb3/pubhtml
+    var v2_url_pat = /docs.google.com\/spreadsheets.*?\/d\/e\/([^\/]+)\/.+/; // Google prefers pubhtml links with this format
     var url_pat = /docs.google.com\/spreadsheets(.*?)\/d\//; // fixing issue of URLs with u/0/d
 
     if (url.match(key_pat)) {
         parts.key = url.match(key_pat)[1];
         // can we get a worksheet from this form?
+    } else if (url.match(v2_url_pat)) {
+        let v2_key = url.match(v2_url_pat)[1]
+        parts.key = `v2:${v2_key}`
+        // to do: get worksheet from this form?
     } else if (url.match(url_pat)) {
         var pos = url.search(url_pat) + url.match(url_pat)[0].length;
         var tail = url.substr(pos);
         parts.key = tail.split('/')[0]
         if (url.match(/\?gid=(\d+)/)) {
             parts.worksheet = url.match(/\?gid=(\d+)/)[1];
         }
-    } else if (url.match(/^\b[-_A-Za-z0-9]+$/)) {
+    } else if (url.match(/^\b(v2:)?[-_A-Za-z0-9]+$/)) {
         parts.key = url;
     }
 
@@ -195,7 +201,19 @@ export async function readGoogleAsCSV(url, sheets_proxy) {
  */
 export function makeGoogleCSVURL(url_or_key) {
     url_or_key = url_or_key.trim()
-    if (url_or_key.match(/^[a-zA-Z0-9-_]+$/)) {
+    if (url_or_key.match(/^v2:[a-zA-Z0-9-_]+$/)) {
+        console.log(`it's a newbie: ${url_or_key}`)
+        try {
+            let key = url_or_key.substring(3)
+            console.log(`key is ${key}`)
+            let url = `https://docs.google.com/spreadsheets/d/e/${key}/pub?output=csv`
+            console.log(`url is ${url}`)
+            return url
+        } catch (e) {
+            debugger;
+            throw new TLError('invalid_url_err', url_or_key);
+        }
+    } else if (url_or_key.match(/^[a-zA-Z0-9-_]+$/)) {
         // key pattern from https://developers.google.com/sheets/api/guides/concepts#spreadsheet_id
         return `https://docs.google.com/spreadsheets/d/${url_or_key}/pub?output=csv`
     }
@@ -270,6 +288,7 @@ export async function makeConfig(url, callback_or_options) {
 
     if (key) {
         try {
+            console.log(`reading url ${url}`);
             json = await jsonFromGoogleURL(url, options);
         } catch (e) {
             // even with an error, we make 

src/js/core/__tests__/ConfigFactory.test.js

@@ -30,6 +30,19 @@ test("new-ish url format should get the right key", () => {
     expect(parts.key).toBe(key)
 })
 
+test("new new url format should get a viable key", () => {
+    var url = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vTwrxBim-ruoMlLP9CnZIevWdP8rIatkV7XjNGXRSaMI94sNd-VbRF--W7A2kj6wfZhKUHWv1ur0Tb3/pubhtml'
+    var key = 'v2:2PACX-1vTwrxBim-ruoMlLP9CnZIevWdP8rIatkV7XjNGXRSaMI94sNd-VbRF--W7A2kj6wfZhKUHWv1ur0Tb3';
+    var parts = parseGoogleSpreadsheetURL(url);
+    expect(parts.key).toBe(key);
+})
+
+test("encoded key part of new new url format should come back untouched", () => {
+    var url = 'v2:2PACX-1vTwrxBim-ruoMlLP9CnZIevWdP8rIatkV7XjNGXRSaMI94sNd-VbRF--W7A2kj6wfZhKUHWv1ur0Tb3'
+    var parts = parseGoogleSpreadsheetURL(url);
+    expect(parts.key).toBe(url);
+})
+
 describe("test making CSV URL from various inputs", () => {
     test("A 'd/' URL that's already right should work", () => {
         let test_url = 'https://docs.google.com/spreadsheets/u/1/d/1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk/pub?output=csv'
@@ -65,4 +78,4 @@ describe("test making CSV URL from various inputs", () => {
         makeGoogleCSVURL('1xuY4upIooEeszZ_lCmeNx24eSFWe0rHe9ZdqH2xqVNk')
     ).toMatch(/pub\?output=csv$/)
 
-})
+})

website/static/img/make/publish_to_web_highlight_url.png

@@ -55,10 +55,6 @@ function getLinkAndIframe() {
     /* SOURCE KEY
     ================================================== */
     if (e_source.value.match("docs.google.com")) {
-        if (e_source.value.match(new RegExp('/spreadsheets/d/e'))) {
-            theobj.warning = "Invalid Google URL. Please see the note above about how a recent change with Google Spreadsheets affects creating timelines.";
-            return theobj;
-        }
         var obj = TL.parseGoogleSpreadsheetURL(e_source.value);
         source_key = obj.key;
     } else {
@@ -237,4 +233,4 @@ document.addEventListener("DOMContentLoaded", function() {
         $target.collapse('show');
         navSmartScroll($target.prev());
     }
-});
+});

website/static/js/main.js

@@ -29,16 +29,14 @@ <h6>Publish to the web</h6>
                                 <strong>Don't set your Timeline Google Sheet to "anyone with the link can edit."</strong> It isn't necessary, and could lead to someone changing your timeline without your consent.
                             </p>
 
-
                             <p style="clear: both;">
-                                <img class="img-shadow make-step-2" src="static/img/make/publish_to_web_button_small.png" alt="Screenshot of Google Sheets 'Publish to the Web' dialog window" /> In the next window, click the green "Publish" button. When asked,
-                                "Are you sure…?" click OK. <em>Ignore the URL that appears in the center of the window.</em> Just close the window using the <em>X</em> in the top right corner.
-
+                                <img class="img-shadow make-step-2" src="static/img/make/publish_to_web_button_small.png" alt="Screenshot of Google Sheets 'Publish to the web' dialog window" /> In the next window, click the green "Publish" button. When asked,
+                                "Are you sure…?" click OK.
                             </p>
                             <p style="clear: both;">
-                                <img class="img-shadow" src="static/img/make/publish_to_web_browser_url.png" /> After you close the window, copy the URL in your browser's address bar. You'll use this in the next step.
+                                <img class="img-shadow make-step-2" src="static/img/make/publish_to_web_highlight_url.png" alt="Screenshot of Google Sheets 'Publish to the web' dialog window highlighting the URL to copy" />  Copy the URL that appears in the center of the window. Then close the window using the <em>X</em> in the top right corner.
                             </p>
-                            <p class="note">If you get an error message referencing an "Invalid Google URL," please review the above instructions. You must use the Google Sheets URL from your browser's address bar, not the one from the "publish to the web" popup.</p>
+                            <p class="note">For some time, our advice was to ignore the URL which appears in the "publish to the web" window, but changes with Google Sheets have led us to change this advice. We now recommend using the URL from the 'Publish to the web' dialog window.</p>
                         </div>
                     </div>
             </li>