Notifications: stay on the same page when switching version (#390)

This commit implements the same behavior we have in the flyout. If you
are
looking at the page `mypage.html` and you click on another version, we
keep the
user on `mypage.html` for that "another version".

Now, we implemented the same for the notifications.

Closes #387

src/flyout.js

@@ -7,7 +7,7 @@ import { classMap } from "lit/directives/class-map.js";
 import { default as objectPath } from "object-path";
 
 import styleSheet from "./flyout.css";
-import { AddonBase, addUtmParameters } from "./utils";
+import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
 import {
   EVENT_READTHEDOCS_SEARCH_SHOW,
   EVENT_READTHEDOCS_FLYOUT_HIDE,
@@ -221,37 +221,6 @@ export class FlyoutElement extends LitElement {
     `;
   }
 
-  _getFlyoutLinkWithFilename = (url) => {
-    // Get the resolver's filename returned by the application (as HTTP header)
-    // and injected by Cloudflare Worker as a meta HTML tag
-    const metaFilename = document.querySelector(
-      "meta[name='readthedocs-resolver-filename']",
-    );
-
-    // Remove trailing slashes from the version's URL and append the
-    // resolver's filename after removing trailing ``index.html``.
-    // Examples:
-    //
-    //   URL: https://docs.readthedocs.io/en/latest/
-    //   Filename: /index.html
-    //   Flyuout URL: https://docs.readthedocs.io/en/latest/
-    //
-    //   URL: https://docs.readthedocs.io/en/stable/
-    //   Filename: /guides/access/index.html
-    //   Flyuout URL: https://docs.readthedocs.io/en/stable/guides/access/
-
-    // Keep only one trailing slash
-    const base = url.replace(/\/+$/, "/");
-
-    // 1. remove initial slash to make it relative to the base
-    // 2. remove the trailing "index.html"
-    const filename = metaFilename.content
-      .replace(/\/index.html$/, "/")
-      .replace(/^\//, "");
-
-    return new URL(filename, base);
-  };
-
   renderVersions() {
     if (
       !this.config.versions.active.length ||
@@ -262,7 +231,7 @@ export class FlyoutElement extends LitElement {
     }
 
     const getVersionLink = (version) => {
-      const url = this._getFlyoutLinkWithFilename(version.urls.documentation);
+      const url = getLinkWithFilename(version.urls.documentation);
       const link = html`<a href="${url}">${version.slug}</a>`;
       return this.config.versions.current.slug == version.slug
         ? html`<strong>${link}</strong>`
@@ -285,9 +254,7 @@ export class FlyoutElement extends LitElement {
     }
 
     const getLanguageLink = (translation) => {
-      const url = this._getFlyoutLinkWithFilename(
-        translation.urls.documentation,
-      );
+      const url = getLinkWithFilename(translation.urls.documentation);
       const link = html`<a href="${url}">${translation.language.code}</a>`;
       return this.config.projects.current.slug === translation.slug
         ? html`<strong>${link}</strong>`

src/notification.js

@@ -9,7 +9,7 @@ import {
 import { html, nothing, render, LitElement } from "lit";
 
 import styleSheet from "./notification.css";
-import { AddonBase, addUtmParameters } from "./utils";
+import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
 
 export class NotificationElement extends LitElement {
   /** @static @property {string} - registered HTML element tag name */
@@ -243,7 +243,7 @@ export class NotificationElement extends LitElement {
 
     if (stableVersion !== undefined) {
       this.stableVersionAvailable = true;
-      this.urls.stable = stableVersion.urls.documentation;
+      this.urls.stable = getLinkWithFilename(stableVersion.urls.documentation);
     }
   }
 

src/utils.js

@@ -207,3 +207,35 @@ export function getMetadataValue(name) {
   }
   return undefined;
 }
+
+/**
+ * Append "resolver filename" to the URL passed.
+ *
+ * Examples:
+ *
+ * URL: https://docs.readthedocs.io/en/stable/
+ * Filename: /guides/access/index.html
+ * Resulting URL: https://docs.readthedocs.io/en/stable/guides/access/
+ *
+
+ * URL: https://docs.readthedocs.io/en/latest/
+ * Filename: /index.html
+ * Resulting URL: https://docs.readthedocs.io/en/latest/
+ *
+ */
+export function getLinkWithFilename(url) {
+  // Get the resolver's filename returned by the application (as HTTP header)
+  // and injected by Cloudflare Worker as a meta HTML tag
+  const metaFilename = getMetadataValue("readthedocs-resolver-filename");
+
+  // Keep only one trailing slash
+  const base = url.replace(/\/+$/, "/");
+
+  // 1. remove initial slash to make it relative to the base
+  // 2. remove the trailing "index.html"
+  const filename = metaFilename
+    .replace(/\/index.html$/, "/")
+    .replace(/^\//, "");
+
+  return new URL(filename, base);
+}

tests/notification.test.html

@@ -1,6 +1,7 @@
 <html>
   <head>
     <meta name="readthedocs-project-slug" content="project" />
+    <meta name="readthedocs-resolver-filename" content="/section/page.html" />
   </head>
   <body>
     <script type="module">
@@ -144,7 +145,7 @@
   <div class="content">
     Some features may not yet be available in the published stable
             version. Read the
-    <a href="https://project.readthedocs.io/en/stable/">
+    <a href="https://project.readthedocs.io/en/stable/section/page.html">
       stable version of this documentation
     </a>
     .
@@ -180,7 +181,7 @@
   <div class="content">
     Some features may not yet be available in the published stable
             version. Read the
-    <a href="https://project.readthedocs.io/en/stable/">
+    <a href="https://project.readthedocs.io/en/stable/section/page.html">
       stable version of this documentation
     </a>
     .