What the plugins change

Head, Body class and A11y at work: the panel shows the title, the description, the language, the body class, what was announced and where the focus is.

Pagefold swaps a container, but a page is more than that: its title, its description, the class of its body, what a screen reader should hear and where the focus goes. Three plugins take care of those. The panel under the page shows their work as it happens.

/examples/inspector/ Open in a new tab Source on GitHub

main.js

const pagefold = new Pagefold({
  plugins: [
    new PagefoldHead(), // title, meta tags, html lang
    new PagefoldBodyClass(), // the class of the body
    new PagefoldA11y({ contentSelector: 'main' }), // announces the page and moves focus to main
  ],
})

// Show the result, so you can see what each plugin did
const show = (id, text) => (document.querySelector(`#v-${id}`).textContent = text || '(none)')
const refresh = () => {
  show('title', document.title)
  show('desc', document.querySelector('meta[name=description]')?.content)
  show('lang', document.documentElement.lang)
  show('body', document.body.className)
  const focus = document.activeElement
  show('focus', focus && focus !== document.body ? `<${focus.tagName.toLowerCase()}${focus.id ? ' id="' + focus.id + '"' : ''}>` : '')
}
refresh()
pagefold.hooks.on('page:view', () => setTimeout(refresh, 150))

// The announcement is a live region that A11y fills a moment after the visit
const said = document.querySelector('.pagefold-announcer')
if (said) new MutationObserver(() => show('said', said.textContent)).observe(said, { childList: true, characterData: true, subtree: true })

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Home page</title>
  <meta name="description" content="The first page of the inspector.">
  <link rel="stylesheet" href="../_lib/fade.css">
  <link rel="stylesheet" href="style.css">
</head>
<body class="page-home">
  <header class="top">
    <strong>Inspector</strong>
    <nav>
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="label.html">Label</a>
      <a href="spanish.html">Español</a>
    </nav>
  </header>
  <main id="pagefold" class="transition-fade">
    <h1>Home</h1>
    <p class="lead">The first page of the inspector.</p>
  </main>
  <section id="inspector" aria-label="What the plugins changed">
    <dl>
      <dt>document.title</dt><dd id="v-title">-</dd>
      <dt>meta description</dt><dd id="v-desc">-</dd>
      <dt>html lang</dt><dd id="v-lang">-</dd>
      <dt>body class</dt><dd id="v-body">-</dd>
      <dt>announced</dt><dd id="v-said">-</dd>
      <dt>focus is on</dt><dd id="v-focus">-</dd>
    </dl>
  </section>
  <script src="../_lib/pagefold.js"></script>
  <script src="../_lib/head.js"></script>
  <script src="../_lib/body-class.js"></script>
  <script src="../_lib/a11y.js"></script>
  <script src="main.js"></script>
</body>
</html>

style.css

*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;font:16px/1.6 system-ui,sans-serif;background:#0a0a0a;color:#fafaf8}
/* Links: the accent color with a quiet underline that gets stronger on hover */
a{color:#5af0ae;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.25em;text-decoration-color:rgba(90,240,174,.5);transition:color .15s,text-decoration-color .15s}
a:hover{color:#00ff9c;text-decoration-color:currentColor}
a:focus-visible{outline:2px solid #5af0ae;outline-offset:3px;border-radius:2px}
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.5rem;border-bottom:1px solid #2c2c2c}
.top strong{font:700 .95rem ui-monospace,Menlo,monospace}
.top nav{display:flex;gap:1.25rem;flex-wrap:wrap}
main{padding:2rem 1.5rem 3rem;max-width:46rem}
h1{margin:0 0 .5rem;font-size:2.1rem;line-height:1.15}
p{margin:0 0 1rem;max-width:36rem;color:#c9c9c4}
.lead{color:#a3a39e;font-size:1.05rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-top:1.5rem}
.card{border:1px solid #2c2c2c;background:#141414;border-radius:12px;padding:.9rem}
.card i{display:block;height:3.2rem;border-radius:8px;margin-bottom:.6rem}
.card b{display:block;font-size:.95rem}
.card span{font-size:.82rem;color:#a3a39e}
@media (max-width:34rem){.cards{grid-template-columns:1fr}main{padding:1.25rem}}
main{padding-bottom:1rem}
main:focus{outline:none}
#inspector{margin:0 1.5rem 1.5rem;border:1px solid #2c2c2c;border-radius:12px;background:#101010;max-width:46rem;font:.8rem ui-monospace,Menlo,monospace}
#inspector dl{display:grid;grid-template-columns:9.5rem 1fr;margin:0}
#inspector dt,#inspector dd{margin:0;padding:.4rem .8rem;border-bottom:1px solid #1d1d1d}
#inspector dt{color:#a3a39e}
#inspector dd{color:#00ff9c;word-break:break-word}
#inspector dt:last-of-type,#inspector dd:last-of-type{border-bottom:0}

What to try

Click About. The title, the description and the body class change, and the panel reads Navigated to: About us.
Click Label. The heading says one thing and its aria-label says another. The announcement uses the label.
Click Español. The lang of the document changes to es, and so does everything else.
Look at focus is on. After every visit it is the content, so a keyboard user starts at the top of the new page and not on a link that no longer exists.

How it works

new Pagefold({
  plugins: [
    new PagefoldHead(),      // title, meta tags, html lang
    new PagefoldBodyClass(), // the class of the body
    new PagefoldA11y({ contentSelector: 'main' }), // announces the page, moves focus to main
  ],
})

Head merges the <head> of the new page: it changes the tags that differ and leaves the rest alone.
Body class copies the class of the new body, so styles that depend on it keep working.
A11y says the name of the page, taken from the aria-label of the heading, the heading or the title, and moves focus to the content (here contentSelector: 'main'; by default it goes to the body).