Use swup for page navigation (#1986)

elixir-lang · Dec 21, 2024 · 5cdcb0d · 5cdcb0d
1 parent 61a8d1d
commit 5cdcb0d
Show file tree

Hide file tree

Showing 23 changed files with 247 additions and 102 deletions.
diff --git a/assets/.eslintrc.js b/assets/.eslintrc.js
@@ -11,6 +11,7 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
+    'no-new': 0,
     'no-path-concat': 0,
     'no-throw-literal': 0,
     'no-useless-escape': 0,

diff --git a/assets/js/entry/html.js b/assets/js/entry/html.js
@@ -21,6 +21,9 @@ import { initialize as initSettings } from '../settings'
 import { initialize as initStyling } from '../styling'
 import { initialize as initPreview} from '../preview'
 
+import Swup from 'swup'
+import SwupA11yPlugin from '@swup/a11y-plugin'
+
 onDocumentReady(() => {
   const params = new URLSearchParams(window.location.search)
   const isPreview = params.has('preview')
@@ -37,6 +40,26 @@ onDocumentReady(() => {
   if (isPreview) {
     initPreview()
   } else {
+    if (window.location.protocol !== 'file:') {
+      new Swup({
+        animationSelector: false,
+        containers: ['#main'],
+        ignoreVisit: (url) => {
+          const path = url.split('#')[0]
+          return path === window.location.pathname ||
+            path === window.location.pathname + '.html'
+        },
+        hooks: {
+          'page:view': () => {
+            initSidebarContent()
+            initSearchPage()
+          }
+        },
+        linkSelector: 'a[href]:not([href^="/"]):not([href^="http"])',
+        plugins: [new SwupA11yPlugin()]
+      })
+    }
+
     initVersions()
     initSidebarDrawer()
     initSidebarContent()

diff --git a/assets/js/helpers.js b/assets/js/helpers.js
@@ -43,7 +43,7 @@ export function escapeHtmlEntities (text) {
  * @returns {String}
  */
 export function getCurrentPageSidebarType () {
-  return document.body.dataset.type
+  return document.getElementById('main').dataset.type
 }
 
 /**

diff --git a/assets/js/search-page.js b/assets/js/search-page.js
@@ -5,9 +5,13 @@ import { qs, escapeHtmlEntities, isBlank, getQueryParamByName, getProjectNameAnd
 import { setSearchInputValue } from './search-bar'
 
 const EXCERPT_RADIUS = 80
-
 const SEARCH_CONTAINER_SELECTOR = '#search'
 
+lunr.tokenizer.separator = /\s+/
+lunr.QueryLexer.termSeparator = /\s+/
+lunr.Pipeline.registerFunction(docTokenFunction, 'docTokenSplitter')
+lunr.Pipeline.registerFunction(docTrimmerFunction, 'docTrimmer')
+
 /**
  * Performs a full-text search within the documentation
  * for the query in URL params and renders the result.
@@ -49,12 +53,6 @@ function renderResults ({ value, results, errorMessage }) {
 }
 
 async function getIndex () {
-  // lunr by default splits on - but we don't want that.
-  lunr.tokenizer.separator = /\s+/
-  lunr.QueryLexer.termSeparator = /\s+/
-  lunr.Pipeline.registerFunction(docTokenFunction, 'docTokenSplitter')
-  lunr.Pipeline.registerFunction(docTrimmerFunction, 'docTrimmer')
-
   const cachedIndex = await loadIndex()
   if (cachedIndex) { return cachedIndex }
 

diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -19,7 +19,7 @@
     "type": "git",
     "url": "git+https://github.com/elixir-lang/ex_doc.git"
   },
-  "author": "Plataformatec",
+  "author": "The Elixir Team",
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/elixir-lang/ex_doc/issues"
@@ -29,6 +29,7 @@
   "devDependencies": {
     "@fontsource/inconsolata": "^4.5.9",
     "@fontsource/lato": "^4.5.10",
+    "@swup/a11y-plugin": "^5.0.0",
     "esbuild": "^0.16.16",
     "eslint": "^8.31.0",
     "eslint-config-standard": "^17.0.0",
@@ -46,6 +47,7 @@
     "lodash.throttle": "^4.1.1",
     "lunr": "^2.3.8",
     "mocha": "^10.2.0",
-    "normalize.css": "^8.0.1"
+    "normalize.css": "^8.0.1",
+    "swup": "^4.8.1"
   }
 }
diff --git a/formatters/html/dist/html-FUIEFJA2.js b/formatters/html/dist/html-FUIEFJA2.js
diff --git a/formatters/html/dist/html-ZOXW4WH5.js b/formatters/html/dist/html-ZOXW4WH5.js
diff --git a/lib/ex_doc/formatter/epub/templates.ex b/lib/ex_doc/formatter/epub/templates.ex
@@ -94,7 +94,7 @@ defmodule ExDoc.Formatter.EPUB.Templates do
     :defp,
     :head_template,
     Path.expand("templates/head_template.eex", __DIR__),
-    [:config, :page],
+    [:config, :title],
     trim: true
   )
 

diff --git a/lib/ex_doc/formatter/epub/templates/extra_template.eex b/lib/ex_doc/formatter/epub/templates/extra_template.eex
@@ -1,4 +1,4 @@
-<%= head_template(config, %{title: title}) %>
+<%= head_template(config, title) %>
     <h1 id="content">
       <%=h title_content %>
     </h1>

diff --git a/lib/ex_doc/formatter/epub/templates/head_template.eex b/lib/ex_doc/formatter/epub/templates/head_template.eex
@@ -3,7 +3,7 @@
       xmlns:epub="http://www.idpf.org/2007/ops">
   <head>
     <meta charset="utf-8" />
-    <title><%= page.title %> - <%= config.project %> v<%= config.version %></title>
+    <title><%= title %> - <%= config.project %> v<%= config.version %></title>
     <meta name="generator" content="ExDoc v<%= ExDoc.version() %>" />
     <link type="text/css" rel="stylesheet"
       href="<%= H.asset_rev "#{config.output}/OEBPS", "dist/epub-#{config.proglang}-*.css" %>" />

diff --git a/lib/ex_doc/formatter/epub/templates/module_template.eex b/lib/ex_doc/formatter/epub/templates/module_template.eex
@@ -1,4 +1,4 @@
-<%= head_template(config, %{title: module.title}) %>
+<%= head_template(config, module.title) %>
     <h1 id="content">
       <%= module.title %> <%= H.module_type(module) %>
     </h1>

diff --git a/lib/ex_doc/formatter/epub/templates/nav_template.eex b/lib/ex_doc/formatter/epub/templates/nav_template.eex
@@ -1,4 +1,4 @@
-<%= head_template(config, %{title: "Table Of Contents"}) %>
+<%= head_template(config, "Table Of Contents") %>
     <h1>Table of contents</h1>
     <nav epub:type="toc">
       <ol>

diff --git a/lib/ex_doc/formatter/epub/templates/title_template.eex b/lib/ex_doc/formatter/epub/templates/title_template.eex
@@ -1,4 +1,4 @@
-<%= head_template(config, %{title: "Cover"}) %>
+<%= head_template(config, "Cover") %>
     <div class="title-container">
       <%= if cover = config.cover do %>
         <div><img src="assets/cover<%= Path.extname(cover) %>"/></div>

diff --git a/lib/ex_doc/formatter/html/templates.ex b/lib/ex_doc/formatter/html/templates.ex
@@ -302,14 +302,14 @@ defmodule ExDoc.Formatter.HTML.Templates do
   templates = [
     detail_template: [:node, :module],
     footer_template: [:config, :node],
-    head_template: [:config, :page],
+    head_template: [:config, :title, :noindex],
     module_template: [:config, :module, :summary, :nodes_map],
     not_found_template: [:config, :nodes_map],
     api_reference_entry_template: [:module_node],
     api_reference_template: [:nodes_map],
     extra_template: [:config, :node, :type, :nodes_map, :refs],
     search_template: [:config, :nodes_map],
-    sidebar_template: [:config, :nodes_map],
+    sidebar_template: [:config, :type, :nodes_map],
     summary_template: [:name, :nodes],
     redirect_template: [:config, :redirect_to]
   ]

diff --git a/lib/ex_doc/formatter/html/templates/extra_template.eex b/lib/ex_doc/formatter/html/templates/extra_template.eex
@@ -1,5 +1,5 @@
-<%= head_template(config, %{title: node.title, type: type, noindex: false}) %>
-<%= sidebar_template(config, nodes_map) %>
+<%= head_template(config, node.title, false) %>
+<%= sidebar_template(config, type, nodes_map) %>
 
 <div id="top-content">
   <h1>