Support arbitrary path prefix (nytimes#358)

* Add devcontainer * Fix engines to be compatible with App Engine * Hard code /library path everywhere * Fix some more path prefixes * Remove one library prefix * Add library prefix to search autocomplete select * Add library prefix to internal links * Migrate to NodeJS 12 * Upgrade to Node.js 16 * Don't prefix absolute URL for edit link * Don't prefix absoluter URL for edit footer button * Only prefix internal URLs * Fix url converter * Add deploy workflow * Add build step and create .env file * Base64 encode library service account * Implement PATH_PREFIX env var * Support path prefix in client-side js * Fix section links * Update customizations library name * Don't try to format url fragments * Don't try to format url fragments client side * Format * Remove custom GitHub workflow * Cleanup * Update package.json --------- Co-authored-by: Shane Moore <[email protected]>
reaktor · Mar 28, 2023 · 6e883b2 · 6e883b2
1 parent 085566d
commit 6e883b2
Show file tree

Hide file tree

Showing 31 changed files with 135 additions and 110 deletions.
diff --git a/app.yaml b/app.yaml
diff --git a/layouts/categories/default.ejs b/layouts/categories/default.ejs
@@ -1,15 +1,15 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head') %>
+  <%- include('partials/head', {formatUrl, pathPrefix}) %>
   <body>
     <h1 class="visually-hidden">Default template</h1>
-    <%- include('partials/header') %>
-    <%- include('partials/nav') %>
+    <%- include('partials/header', {formatUrl}) %>
+    <%- include('partials/nav', {formatUrl}) %>
     <div class="g-body">
       <div class="g-left-panel">
         <% if (locals.sections && locals.sections.length) { %>
           <!-- is this TOC -->
-          <%- include('partials/sectionList') %>
+          <%- include('partials/sectionList', {formatUrl}) %>
         <% } %>
         <!-- Hide sibling docs on normal pages -->
         <!-- <% if (locals.siblings && siblings.length) { %>
@@ -23,11 +23,11 @@
         <% } %>
 
         <% if (locals.children && children.length) { %>
-        <%- include('partials/childrenList', {children, kicker: template('folder.childrenList.kicker', title)}) %>
+        <%- include('partials/childrenList', {children, kicker: template('folder.childrenList.kicker', title), formatUrl}) %>
         <% } %>
       </div>
       <%- include('partials/imgModal') %>
-      <%- include('partials/footer', { pageType: 'document', topLevelFolder: url.split('/')[1] }) %>
+      <%- include('partials/footer', { pageType: 'document', topLevelFolder: url.split('/')[1], formatUrl }) %>
     </div>
   </body>
 </html>
diff --git a/layouts/errors/403.ejs b/layouts/errors/403.ejs
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('error.403.title')}) %>
+  <%- include('partials/head', {title: template('error.403.title'), formatUrl, pathPrefix}) %>
   <body>
-    <%- include('partials/header', {title: template('error.403.title'), parentLinks: []}) %>
+    <%- include('partials/header', {title: template('error.403.title'), parentLinks: [], formatUrl}) %>
     <div id="main-search-page">
       <div class="main-item">
         <div class="tagline">
@@ -11,7 +11,7 @@
         </div>
       </div>
 
-      <%- include('partials/footer', {style: 'homepage'}) %>
+      <%- include('partials/footer', {style: 'homepage', formatUrl}) %>
     </div>
 
   </body>

diff --git a/layouts/errors/404.ejs b/layouts/errors/404.ejs
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('error.404.title')}) %>
+  <%- include('partials/head', {title: template('error.404.title'), formatUrl, pathPrefix}) %>
   <body>
-    <%- include('partials/header', {title: template('error.404.title'), parentLinks: []}) %>
+    <%- include('partials/header', {title: template('error.404.title'), parentLinks: [], formatUrl}) %>
     <div id="main-search-page">
       <div class="main-item">
         <div class="tagline">
           <h1><%- template('error.404.heading') %></h1>
           <p><%- template('error.404.message') %></p>
         </div>
-        <%- include('partials/search', {style: 'homepage'}) %>
+        <%- include('partials/search', {style: 'homepage', formatUrl}) %>
       </div>
 
-      <%- include('partials/footer', {style: 'homepage'}) %>
+      <%- include('partials/footer', {style: 'homepage', formatUrl}) %>
     </div>
 
   </body>

diff --git a/layouts/errors/500.ejs b/layouts/errors/500.ejs
@@ -1,18 +1,18 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('error.500.title')}) %>
+  <%- include('partials/head', {title: template('error.500.title'), formatUrl, pathPrefix}) %>
   <body>
-    <%- include('partials/header', {title: template('error.500.title'), parentLinks: []}) %>
+    <%- include('partials/header', {title: template('error.500.title'), parentLinks: [], formatUrl}) %>
     <div id="main-search-page">
       <div class="main-item">
         <div class="tagline">
           <h1><%- template('error.500.heading') %></h1>
           <p><%- template('error.500.message') %></p>
         </div>
-        <%- include('partials/search', {style: 'homepage'}) %>
+        <%- include('partials/search', {style: 'homepage', formatUrl}) %>
       </div>
 
-      <%- include('partials/footer', {style: 'homepage'}) %>
+      <%- include('partials/footer', {style: 'homepage', formatUrl}) %>
     </div>
 
   </body>

diff --git a/layouts/pages/categories.ejs b/layouts/pages/categories.ejs
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('landing.viewAll')}) %>
+  <%- include('partials/head', {title: template('landing.viewAll'), formatUrl, pathPrefix}) %>
   <body>
-    <%- include('partials/header', {parentLinks: [], title: template('landing.viewAll')}) %>
+    <%- include('partials/header', {parentLinks: [], title: template('landing.viewAll'), formatUrl}) %>
 
     <div class="g-upper-body">
-    <%- include('partials/nav') %>
+      <%- include('partials/nav', {formatUrl}) %>
     </div>
 
     <div id="category-page" class="g-body">
       <div class="g-main-content">
       <% all.forEach((category) => { %>
-        <%- include('partials/childrenList', {kicker: category.prettyName, children: category.children, link: category.path}) %>
+        <%- include('partials/childrenList', {kicker: category.prettyName, children: category.children, link: category.path, formatUrl}) %>
       <% }) %>
       </div>
       <script> seeMoreButton() </script>
-      <%- include('partials/footer', { pageType: 'category_index' }) %>
+      <%- include('partials/footer', { pageType: 'category_index', formatUrl }) %>
     </div>
   </body>
 </html>
diff --git a/layouts/pages/index.ejs b/layouts/pages/index.ejs
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('branding.prettyName')}) %>
+  <%- include('partials/head', {title: template('branding.prettyName'), formatUrl, pathPrefix}) %>
   <body>
 
     <header id="masthead" class="masthead" role="banner">
@@ -11,11 +11,11 @@
 
     <div id="main-search-page">
       <div class="main-item">
-        <%- include('partials/branding', {context: 'home'}) %>
+        <%- include('partials/branding', {context: 'home', formatUrl}) %>
         <div class="tagline">
           <p><%- template('landing.tagline') %> <%- template('landing.quickLink') %></p>
         </div>
-        <%- include('partials/search', {style: 'homepage', focus: 'autofocus', msgOnFocus: template('search.placeholder')}) %>
+        <%- include('partials/search', {style: 'homepage', focus: 'autofocus', msgOnFocus: template('search.placeholder'), formatUrl}) %>
 
         <div class="featured-cat">
           <% if (modules.length) { 
@@ -29,7 +29,7 @@
         </div>
 
       </div>
-      <%- include('partials/footer', {style: 'homepage', pageType: 'homepage'}) %>
+      <%- include('partials/footer', {style: 'homepage', pageType: 'homepage', formatUrl}) %>
     </div>
   </body>
 </html>
diff --git a/layouts/pages/search.ejs b/layouts/pages/search.ejs
@@ -1,21 +1,21 @@
 <!DOCTYPE html>
 <html>
-  <%- include('partials/head', {title: template('search.results.title', locals.q)}) %>
+  <%- include('partials/head', {title: template('search.results.title', locals.q), formatUrl, pathPrefix}) %>
   <body>
     <%- include('partials/header', {parentLinks: [], title: template('search.results.title', locals.q)}) %>
 
-    <%- include('partials/nav') %>
+    <%- include('partials/nav', {formatUrl}) %>
 
     <div class="g-body">
       <div class="g-main-content" id="g-search-page">
         <% if (locals.results && results.length) { %>
           <h3 class="search-kicker"><%- template('search.results.kicker', locals.q) %></h3>
           <% results.forEach((res) => { %>
           <div class="search-result">
-            <h3><a href="<%= res.path %>"><%= res.prettyName %></a></h3>
+            <h3><a href="<%= formatUrl(res.path) %>"><%= res.prettyName %></a></h3>
             <p>
               <% if (res.folder) { %>
-                <%- template('search.results.label.folder', res.folder.path, res.folder.prettyName || 'Home')%>&nbsp;
+              <%- template('search.results.label.folder', formatUrl(res.folder.path), res.folder.prettyName || 'Home')%>&nbsp;
               <% } %>
               <% if (res.lastModifyingUser && res.lastModifyingUser.displayName) { %>
                 <%- template('search.results.label.person', res.lastModifyingUser.displayName) %>
@@ -30,7 +30,7 @@
         <% } %>
       </div>
 
-      <%- include('partials/footer', { pageType: 'search' }) %>
+      <%- include('partials/footer', { pageType: 'search', formatUrl }) %>
     </div>
   </body>
 </html>
diff --git a/layouts/partials/branding.ejs b/layouts/partials/branding.ejs
@@ -1,13 +1,13 @@
 <div class="branding">
   <h2 class="branding-heading">
     <% const shouldLink = locals.context !== 'home' %>
-    <% if (shouldLink) { %><a id="branding-heading-link" href="/"><% } %>
+    <% if (shouldLink) { %><a id="branding-heading-link" href="<%= formatUrl('/') %>"><% } %>
       <span class="visually-hidden"><%- template('branding.org') %></span>
       <img src=<%- template('branding.icon') %> class="logo" alt="<%- template('branding.org') %>">
     <% if (shouldLink) { %></a><% } %>
   </h2>
   <h3 class="branding-label">
-    <% if (shouldLink) { %><a class="content-link" href="/"><% } %>
+    <% if (shouldLink) { %><a class="content-link" href="<%= formatUrl('/') %>"><% } %>
       <%- template('branding.name') %>
     <% if (shouldLink) { %></a><% } %>
   </h3>

diff --git a/layouts/partials/breadcrumb.ejs b/layouts/partials/breadcrumb.ejs
@@ -1,10 +1,10 @@
 <ul class="breadcrumb">
   <!-- <li class="breadcrumb-item">
-    <a class="content-link" href="/">Home </a> ⇾
+    <a class="content-link" href="<%= formatUrl("/") %>">Home </a> ⇾
   </li> -->
 <% parentLinks.forEach((link) => { %>
   <li class="breadcrumb-item">
-    ⇾ <a class="content-link" href="<%- link.url %>" ><%= link.name %> </a>
+    ⇾ <a class="content-link" href="<%= formatUrl(link.url) %>" ><%= link.name %> </a>
   </li>
 <% }) %>
   <li class="breadcrumb-item">

diff --git a/layouts/partials/childrenList.ejs b/layouts/partials/childrenList.ejs
@@ -1,7 +1,7 @@
 <div class="children-container">
   <% if (locals.kicker) { %>
     <h3>
-    <% if (locals.link) { %><a href="<%= link %>"><% } %>
+    <% if (locals.link) { %><a href="<%= formatUrl(locals.link) %>"><% } %>
     <%= kicker %>
     <% if (locals.link) { %></a><% } %>
     </h3>
@@ -24,9 +24,10 @@
           }
           const iconName = iconMap[type] || 'external-link'
           const className = `fa-${iconName}`
+          const href = formatUrl(link.url)
           %>
           <i class="fa foldericon <%= className %>" aria-hidden="true"></i>
-          <a class="content-link" href="<%- link.url %>" ><%= link.name %></a>
+          <a class="content-link" href="<%= href %>" ><%= link.name %></a>
         </li>
       <% }) %>
     </ul>

diff --git a/layouts/partials/folderList.ejs b/layouts/partials/folderList.ejs
@@ -10,9 +10,9 @@
       <% if (parents.includes(folder.id)) { %>
         <%= folder.prettyName %>
       <% } else { %>
-        <a href="?id=<%= locals.id %>&dest=<%= folder.id %>"><%= folder.prettyName %></a>
+        <a href="<%= formatUrl('/') %>?id=<%= locals.id %>&dest=<%= folder.id %>"><%= folder.prettyName %></a>
       <% } %>
-      <%- include('./folderList', {folders: folder.children, id, parents}) %>
+      <%- include('./folderList', {folders: folder.children, id, parents, formatUrl}) %>
     </li>
     <% }) %>
 

diff --git a/layouts/partials/footer.ejs b/layouts/partials/footer.ejs
@@ -2,7 +2,7 @@
 <div class="<%= style %>">
   <% if (locals.pager) { %>
     <% pager.forEach((page, i) => { %>
-  <a class="button btn-footer" href="<%- page.link %>"><%= i + 1 %></a>
+  <a class="button btn-footer" href="<%- formatUrl(page.link) %>"><%= i + 1 %></a>
     <% }) %>
   <% } %>
   <% if (locals.editLink) { %>
@@ -37,13 +37,13 @@
   // get the userinfo then fire a pageview (can't cache in the page)
   $.ajax({
     method: 'GET',
-    url: '/whoami.json'
+    url: '<%= formatUrl("/whoami.json") %>'
   }).always(function (data) {
     var userId = (data || {}).analyticsUserId;
     if (userId) {
       ga('set', 'userId', userId)
 
-      if(window.location.pathname === '/') {
+      if(window.location.pathname === '<%= formatUrl("/") %>') {
         $(document).ready(function() {
           personalizeHomepage(userId)
         })
@@ -71,7 +71,7 @@
   if (!lastFilenameFetch || now - lastFilenameFetch.lastFetched > 600000) { // 10 min
     $.ajax({
       method: 'GET',
-      url: '/filename-listing.json',
+      url: '<%= formatUrl("/filename-listing.json") %>',
       json: true
     }).then(function(data, textStatus, xhr) {
       if (xhr.status !== 200) return; // if ajax fails, continue with old listing

diff --git a/layouts/partials/head.ejs b/layouts/partials/head.ejs
@@ -15,9 +15,16 @@
   <% if (locals.inlineCSS) { %>
     <style type="text/css"><%- inlineCSS %></style>
   <% } else { %>
-    <link href="/assets/css/style.css" rel="stylesheet">
+    <link href="<%= formatUrl('/assets/css/style.css') %>" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
-    <script src="/assets/scripts/main.js" charset="utf-8"></script>
+    <script charset="utf-8">
+      function formatUrl(url) {
+        if (url.match(/^https?:\/\//)) return url
+        if (url.startsWith('/')) return "<%= pathPrefix %>" + url.slice(1)
+        return exports.pathPrefix + url
+      }
+    </script>
+    <script src="<%= formatUrl('/assets/scripts/main.js') %>" charset="utf-8"></script>
   <% } %>
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
   <link rel="shortcut icon" href="<%- template('branding.favicon') %>" type="image/x-icon" />

diff --git a/layouts/partials/header.ejs b/layouts/partials/header.ejs
@@ -1,7 +1,7 @@
 <header id="masthead" class="masthead" role="banner">
   <div class="container">
-    <%- include('branding') %>
-    <%- include('breadcrumb') %>
-    <%- include('userTools') %>
+    <%- include('branding', {formatUrl}) %>
+    <%- include('breadcrumb', {formatUrl}) %>
+    <%- include('userTools', {formatUrl}) %>
   </div>
 </header>
diff --git a/layouts/partials/landingModule.ejs b/layouts/partials/landingModule.ejs
@@ -8,7 +8,7 @@ const itemsLimited = items.slice(0, 6)
   <ul class="<%= tag %>-cat-list">
     <% itemsLimited.forEach((item) => { 
       if (style === 'button') { %>
-        <li data-<%= tag %>-id="<%= item.id %>"><a class="button btn-cat" href="<%= item.path %>"><%= item.prettyName %></a></li>
+        <li data-<%= tag %>-id="<%= item.id %>"><a class="button btn-cat" href="<%= formatUrl(item.path) %>"><%= item.prettyName %></a></li>
       <% } else {
         const type = item.resourceType 
         const iconMap = {
@@ -25,12 +25,12 @@ const itemsLimited = items.slice(0, 6)
         const className = `fa-${iconName}` %>
         <li>
           <i class="fa foldericon <%= className %>" aria-hidden="true"></i>
-          <a href="<%= item.path %>"><%= item.prettyName %></a>
+          <a href="<%= formatUrl(item.path) %>"><%= item.prettyName %></a>
         </li>
     <% }
     }) 
     if (tag === 'featured') { %>
-      <li><a class="button btn-homepage" href="/categories"><%- template('landing.viewAll') %></a></li>
+      <li><a class="button btn-homepage" href="<%= formatUrl('/categories') %>"><%- template('landing.viewAll') %></a></li>
     <% } %>
   </ul>
-</div>
+</div>
diff --git a/layouts/partials/nav.ejs b/layouts/partials/nav.ejs
@@ -1,8 +1,8 @@
 <div class="g-upper-body">
-  <%- include('search') %>
+  <%- include('search', {formatUrl}) %>
   <% if (locals.title) { %>
   <% if (locals.duplicates) { %>
-    <%- include('partials/warning', {message: template('warning.duplicate', locals.duplicates, locals.parentId) }) %>
+    <%- include('partials/warning', {message: template('warning.duplicate', locals.duplicates, locals.parentId), formatUrl}) %>
   <% } %>
   <h1 class="headline"><%= title %></h1>
   <div class="kicker">

diff --git a/layouts/partials/search.ejs b/layouts/partials/search.ejs
@@ -1,5 +1,5 @@
 <div class="search-topper">
-  <form method="GET" action="/search" class="search-container">
+  <form method="GET" action="<%= formatUrl('/search') %>" class="search-container">
     <% const placeholder = template('search.placeholder')%>
     <% const focus = locals.focus || '' %>
     <% const msgOnFocus = placeholder || '' %>
@@ -9,7 +9,7 @@
 
   <% const style = locals.style || 'plaintext' %>
   <div class="additional-menus <%= style %>">
-    <a href="/categories"><button type="button" class="button btn-<%= style %>"><%- template('landing.viewAll') %></button></a>
+    <a href="<%= formatUrl('/categories') %>"><button type="button" class="button btn-<%= style %>"><%- template('landing.viewAll') %></button></a>
     <%# <a href="#"><button type="button" class="btn-plaintext">Onboarding Guide</button></a>%>
   </div>
 

diff --git a/layouts/partials/siblingList.ejs b/layouts/partials/siblingList.ejs
@@ -10,7 +10,7 @@
       <% if (link.isCurrent) { %>
         <strong><%= link.name %></strong>
       <% } else { %>
-        <a class="content-link" href="<%- link.url %>" ><%= link.name %></a>
+        <a class="content-link" href="<%- formatUrl(link.url) %>" ><%= link.name %></a>
       <% } %>
     </li>
   <% }) %>