Use swup for page navigation (elixir-lang#1986)

Author: josevalim

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,

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()

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
 }
 
 /**

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 }
 

assets/package-lock.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"
   }
 }

assets/package.json

@@ -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
   )
 

formatters/html/dist/html-FUIEFJA2.js

@@ -1,4 +1,4 @@
-<%= head_template(config, %{title: title}) %>
+<%= head_template(config, title) %>
     <h1 id="content">
       <%=h title_content %>
     </h1>