Fix template generation for WWW + Community (#84)

Author: MattIPv4

package-lock.json

@@ -40,7 +40,6 @@
     "html-webpack-plugin": "^5.6.0",
     "jsdom": "^23.2.0",
     "mini-css-extract-plugin": "^2.7.7",
-    "node-fetch": "^3.3.2",
     "path-browserify": "^1.0.1",
     "posthtml": "^0.16.6",
     "posthtml-expressions": "^1.11.3",

package.json

@@ -1,5 +1,5 @@
 /*
-Copyright 2022 DigitalOcean
+Copyright 2024 DigitalOcean
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,8 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-const fetch = import('node-fetch');
-
 module.exports = async args => {
     const baseURL = `https://${process.env.SPACES_BUCKET}.${process.env.SPACES_REGION}.digitaloceanspaces.com`;
     const tools = args.map(data => {
@@ -28,7 +26,7 @@ module.exports = async args => {
 | ${tools.join(' | ')} |
 |${(new Array(tools.length).fill('---')).join('|')}|`;
 
-    const res = await fetch.then(({ default: run }) => run(
+    const res = await fetch(
         `https://api.github.com/repos/${process.env.REPO_NAME}/commits/${process.env.COMMIT_SHA}/comments`,
         {
             method: 'POST',
@@ -41,7 +39,7 @@ module.exports = async args => {
                 Authorization: `Basic ${Buffer.from(`github-actions:${process.env.GITHUB_ACCESS_TOKEN}`).toString('base64')}`,
             },
         },
-    )).catch(async e => {
+    ).catch(async e => {
         console.log(await e.json());
         process.exit(1);
     });

src/build/createGitHubComment.js

@@ -19,7 +19,11 @@ const { JSDOM } = jsdom;
 const fs = require('fs');
 const ensureDir = require('./ensureDir');
 
-const fetch = import('node-fetch');
+const wwwSelectors = {
+    content: '[class^="Layout"] > *, [class*=" Layout"] > *',
+    header: 'nav, [class^="Header"], [class*=" Header"]',
+    footer: 'footer, [class^="Footer"], [class*=" Footer"], #footer',
+};
 
 const baseHtml = async mode => {
     // Support a blank template for completely local dev
@@ -38,13 +42,13 @@ const baseHtml = async mode => {
 
     // Support developing a tool for WWW
     if (mode === 'www') {
-        const res = await fetch.then(({ default: run }) => run('https://www.digitalocean.com'));
+        const res = await fetch('https://www.digitalocean.com');
         return await res.text();
     }
 
     // Default to a tool for Community tooling
     if (mode === 'community') {
-        const res = await fetch.then(({ default: run }) => run('https://www.digitalocean.com/community'));
+        const res = await fetch('https://www.digitalocean.com/community');
         return await res.text();
     }
 
@@ -105,17 +109,22 @@ module.exports = async () => {
         document.head.insertBefore(charset, document.head.firstChild);
     }
 
+    let contentAnchor;
     if (mode === 'www' || mode === 'community') {
         // Remove nav log in + sign up buttons
-        document.querySelectorAll('nav li').forEach(node => {
+        document.querySelectorAll('header li').forEach(node => {
             if (node.textContent.toLowerCase().includes('log in')) node.remove();
             if (node.textContent.toLowerCase().includes('sign up')) node.remove();
         });
 
         // Remove www + community content
-        document.querySelectorAll('div[class^="Layout"] > *').forEach(node => {
-            if (node.querySelector('nav, [class^="Header"], [class*=" Header"]')) return;
-            if (node.querySelector('footer, [class^="Footer"], [class*=" Footer"]')) return;
+        document.querySelectorAll(wwwSelectors.content).forEach(node => {
+            if (node.querySelector(wwwSelectors.header)) return;
+            if (node.querySelector(wwwSelectors.footer)) return;
+
+            // If this is the first content node on the page,
+            // we'll inject the content block where it is
+            if (!contentAnchor) contentAnchor = node.previousElementSibling;
             node.remove();
         });
     }
@@ -127,7 +136,7 @@ module.exports = async () => {
         document.querySelector('body > .app').appendChild(content);
     }
     if (mode === 'www' || mode === 'community') {
-        document.querySelector('nav').parentElement.insertAdjacentElement('afterend', content);
+        contentAnchor.insertAdjacentElement('afterend', content);
     }
 
     // Inject the title block