Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flyout: keeps the page when switching version/language #242

Merged
merged 10 commits into from
Mar 5, 2024
Merged

Flyout: keeps the page when switching version/language #242

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8440e91
Flyout: keeps the page when switching version/language
humitos Feb 8, 2024
a6a0c76
Merge branch 'main' of github.com:readthedocs/readthedocs-client into…
humitos Feb 21, 2024
798ccac
Use `new URL` to manipulate the URLs
humitos Feb 21, 2024
5ee307b
Merge branch 'main' of github.com:readthedocs/readthedocs-client into…
humitos Feb 27, 2024
a9ad92a
Update mocked config and JSON data to respect API
humitos Mar 4, 2024
136a922
Merge branch 'main' into humitos/flyout-urls
humitos Mar 4, 2024
66f3e65
Run format
humitos Mar 4, 2024
ac1a094
Merge branch 'humitos/flyout-urls' of github.com:readthedocs/readthed…
humitos Mar 4, 2024
b5b23b3
Update replacement regex
humitos Mar 5, 2024
9b0ae3f
Make the mocked json response consistent
humitos Mar 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions dist/readthedocs-addons.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/readthedocs-addons.js.map
View file
Open in desktop

Large diffs are not rendered by default.

12 changes: 6 additions & 6 deletions public/_/readthedocs-addons.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,29 +74,29 @@
"translations": [
{
"slug": "es",
"url": "/es/"
"url": "http://localhost:8000/es/v1.0/"
}
],
"versions": [
{
"slug": "stable",
"url": "/en/stable/"
"url": "http://localhost:8000/en/stable/"
},
{
"slug": "latest",
"url": "/en/latest/"
"url": "http://localhost:8000/en/latest/"
},
{
"slug": "v1.0",
"url": "/en/v1.0/"
"url": "http://localhost:8000/en/v1.0/"
},
{
"slug": "v1.4",
"url": "/en/v1.4/"
"url": "http://localhost:8000/en/v1.4/"
},
{
"slug": "v2.0",
"url": "/en/v2.0/"
"url": "http://localhost:8000/en/v2.0/"
}
],
"downloads": [
Expand Down
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
<title>Documentation Addons - Read the Docs</title>
<meta name="readthedocs-project-slug" content="test-builds" />
<meta name="readthedocs-version-slug" content="latest" />
<meta name="readthedocs-resolver-filename" content="/index.html" />
</head>
<body>

Expand Down
37 changes: 35 additions & 2 deletions src/flyout.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,6 +195,37 @@ 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']",
);
humitos marked this conversation as resolved.
Show resolved Hide resolved

// 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.addons.flyout.versions.length ||
Expand All @@ -207,7 +238,8 @@ export class FlyoutElement extends LitElement {
const currentVersion = this.config.versions.current.slug;

const getVersionLink = (version) => {
const link = html`<a href="${version.url}">${version.slug}</a>`;
const url = this._getFlyoutLinkWithFilename(version.url);
const link = html`<a href="${url}">${version.slug}</a>`;
return currentVersion && version.slug === currentVersion
? html`<strong>${link}</strong>`
: link;
Expand All @@ -231,7 +263,8 @@ export class FlyoutElement extends LitElement {
const currentTranslation = this.config.projects.current.language.code;

const getLanguageLink = (translation) => {
const link = html`<a href="${translation.url}">${translation.slug}</a>`;
const url = this._getFlyoutLinkWithFilename(translation.url);
const link = html`<a href="${url}">${translation.slug}</a>`;
return currentTranslation && translation.slug === currentTranslation
? html`<strong>${link}</strong>`
: link;
Expand Down
16 changes: 8 additions & 8 deletions tests/__snapshots__/flyout.test.snap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ snapshots["Flyout addon snapshot flyout completely"] =
Languages
</dt>
<dd>
<a href="/es/">
<a href="https://project.readthedocs.io/es/latest/">
es
</a>
</dd>
Expand All @@ -29,19 +29,19 @@ snapshots["Flyout addon snapshot flyout completely"] =
Versions
</dt>
<dd>
<a href="/en/stable/">
<a href="https://project.readthedocs.io/en/stable/">
stable
</a>
</dd>
<dd>
<strong>
<a href="/en/latest/">
<a href="https://project.readthedocs.io/en/latest/">
latest
</a>
</strong>
</dd>
<dd>
<a href="/en/v1.0/">
<a href="https://project.readthedocs.io/en/v1.0/">
v1.0
</a>
</dd>
Expand Down Expand Up @@ -129,7 +129,7 @@ snapshots["Flyout addon snapshot flyout with search disabled"] =
Languages
</dt>
<dd>
<a href="/es/">
<a href="https://project.readthedocs.io/es/latest/">
es
</a>
</dd>
Expand All @@ -139,19 +139,19 @@ snapshots["Flyout addon snapshot flyout with search disabled"] =
Versions
</dt>
<dd>
<a href="/en/stable/">
<a href="https://project.readthedocs.io/en/stable/">
stable
</a>
</dd>
<dd>
<strong>
<a href="/en/latest/">
<a href="https://project.readthedocs.io/en/latest/">
latest
</a>
</strong>
</dd>
<dd>
<a href="/en/v1.0/">
<a href="https://project.readthedocs.io/en/v1.0/">
v1.0
</a>
</dd>
Expand Down
21 changes: 12 additions & 9 deletions tests/flyout.test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<html>
<head>
<meta name="readthedocs-resolver-filename" content="/" />
</head>
<body>
<script type="module">
import { expect, elementUpdated } from "@open-wc/testing";
Expand All @@ -25,21 +28,21 @@
translations: [
{
slug: "es",
url: "/es/",
url: "https://project.readthedocs.io/es/latest/",
},
],
versions: [
{
slug: "stable",
url: "/en/stable/",
url: "https://project.readthedocs.io/en/stable/",
},
{
slug: "latest",
url: "/en/latest/",
url: "https://project.readthedocs.io/en/latest/",
},
{
slug: "v1.0",
url: "/en/v1.0/",
url: "https://project.readthedocs.io/en/v1.0/",
},
],
},
Expand Down Expand Up @@ -81,7 +84,7 @@
<dt>Languages</dt>
<dd>
<strong>
<a href="/es/">es</a>
<a href="https://project.readthedocs.io/es/latest/">es</a>
</strong>
</dd>
</dl>
Expand All @@ -100,7 +103,7 @@
<dl class="languages">
<dt>Languages</dt>
<dd>
<a href="/es/">es</a>
<a href="https://project.readthedocs.io/es/latest/">es</a>
</dd>
</dl>
`);
Expand All @@ -117,15 +120,15 @@
<dl class="versions">
<dt>Versions</dt>
<dd>
<a href="/en/stable/">stable</a>
<a href="https://project.readthedocs.io/en/stable/">stable</a>
</dd>
<dd>
<strong>
<a href="/en/latest/">latest</a>
<a href="https://project.readthedocs.io/en/latest/">latest</a>
</strong>
</dd>
<dd>
<a href="/en/v1.0/">v1.0</a>
<a href="https://project.readthedocs.io/en/v1.0/">v1.0</a>
</dd>
</dl>
`);
Expand Down