Merge pull request #2 from grip-on-software/link-canonical-alternate

Create link canonical/alternate elements based on languages and page URL
grip-on-software · Sep 5, 2023 · e0cb7f9 · e0cb7f9
2 parents 4899082 + 3d35ab6
commit e0cb7f9
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -105,7 +105,7 @@ const locales = new Locale();
 const nav = new Navbar({
     "container": ".navbar", // Navbar container
     "languages": "#languages", // Selector of a menu in the structure
-    "language_page": "index.html",
+    "language_page": "https://test.example/index.html", // Canonical URL
     "language_query": "lang",
     "my_url": "https://example.com" // Referenced from a link with "config" key
 }, locales);

diff --git a/lib/Locale.js b/lib/Locale.js
@@ -100,6 +100,21 @@ class Locale {
         const active = linkActive === 'link' ? link : item;
         active.classed('is-active', d => this.specs[d] == this.selectedLocale)
             .classed(classes, true);
+
+        // Update HEAD
+        if (page != '') {
+            const head = d3.select('head');
+            head.selectAll('link[rel=canonical]').data([''])
+                .join('link')
+                .attr('rel', 'canonical')
+                .attr('href', page);
+            head.selectAll('link[rel=alternate][hreflang]')
+                .data(Object.keys(this.specs))
+                .join('link')
+                .attr('rel', 'alternate')
+                .attr('hreflang', d => d)
+                .call(this.updateNavigationLinks, page, query);
+        }
     }
 
     updateNavigationLinks(links, page='', query='', hash='') {

diff --git a/lib/Navbar.js b/lib/Navbar.js
@@ -143,13 +143,16 @@ class Navbar {
 
         if (this.config.languages) {
             const languages = selection.select(this.config.languages);
+            const canonicalUrl = new URL(this.config.language_page,
+                this.config.document.location
+            );
             this.locales.generateNavigation(languages,
-                this.config.language_page, this.config.language_query, 'link',
-                'navbar-item', this.config.document.location.hash
+                canonicalUrl, this.config.language_query, 'link', 'navbar-item',
+                this.config.document.location.hash
             );
             this.config.window.addEventListener("hashchange", () => {
                 this.locales.updateNavigationLinks(languages.selectAll('a'),
-                    this.config.language_page, this.config.language_query,
+                    canonicalUrl, this.config.language_query,
                     this.config.document.location.hash
                 );
             });

diff --git a/tests/index.js b/tests/index.js
@@ -41,6 +41,7 @@ function setupPage(body, done) {
     // Set up the DOM document.
     const html = `<html><head></head><body>${body}</body>`;
     const dom = new jsdom.JSDOM(html, {
+        url: "https://example.test/",
         runScripts: "outside-only",
         pretendToBeVisual: true,
         virtualConsole

diff --git a/tests/locale.js b/tests/locale.js
@@ -108,6 +108,21 @@ describe('Locale', () => {
         locales.updateNavigationLinks(items.selectAll('a'));
         assert.equal(first.attr('href'), '?en');
         assert.equal(second.attr('href'), '?nl');
+        // Head links with page parameter
+        locales.generateNavigation("#languages", "https://example.test/");
+        const headLinks = d3.selectAll("head link");
+        assert.equal(headLinks.size(), 3);
+        assert.equal(headLinks.filter(":nth-child(1)").attr('href'),
+            'https://example.test/'
+        );
+        assert.equal(headLinks.filter(":nth-child(2)").attr('hreflang'), 'en');
+        assert.equal(headLinks.filter(":nth-child(3)").attr('hreflang'), 'nl');
+        // Calling generateNavigation again does not add more head link elements
+        locales.generateNavigation("#languages", "https://example.test/sub/");
+        assert.equal(d3.selectAll("head link").size(), 3);
+        assert.equal(d3.select("head link:nth-child(1)").attr('href'),
+            'https://example.test/sub/'
+        );
         done();
     });
     it('Replaces messages', (done) => {

diff --git a/tests/navbar.js b/tests/navbar.js
@@ -86,12 +86,12 @@ describe('Navigation bar', () => {
         assert.equal(langs.size(), 2);
         const active = langs.select('a.is-active');
         assert.isTrue(active.classed('navbar-item'));
-        assert.equal(active.attr('href'), 'index.html?x=y&l=en#abc');
+        assert.equal(active.attr('href'), 'https://example.test/index.html?x=y&l=en#abc');
         assert.equal(active.attr('hreflang'), 'en');
         assert.equal(active.text(), 'English');
         const inactive = langs.select('a:not(.is-active)');
         assert.isTrue(active.classed('navbar-item'));
-        assert.equal(inactive.attr('href'), 'index.html?x=y&l=nl#abc');
+        assert.equal(inactive.attr('href'), 'https://example.test/index.html?x=y&l=nl#abc');
         assert.equal(inactive.attr('hreflang'), 'nl');
         assert.equal(inactive.text(), 'Nederlands');
         const end = menu.select('.navbar-end > a.navbar-item');