Update pdfjs-viewer documentation and add logo SVG asset

- Revised the description in the pdfjs-viewer documentation to clarify the functionality of the Try and Reset buttons.
- Removed the 'try' attribute from the HTML example for the pdfjs-viewer element.
- Added a new SVG logo asset to the project.

Author: alekswebnet

README.md

@@ -37,4 +37,5 @@ Add `try` after the language of a code fence to give it a **▶ Try** button tha
 
 - **HTML snippets** copy the attributes of their `<pdfjs-viewer-element>` onto the preview. `style`, `id`, `class` and the placeholder `src="/file.pdf"` are skipped.
 - **JavaScript snippets** run exactly as written. `document.querySelector('pdfjs-viewer-element')` returns the preview element.
+- Every Try button comes with a **Reset** button that puts the preview back to its defaults.
 - **`try=fresh`** replaces the preview with a new element first. Use it for settings that only apply when the viewer is built, such as `setViewerOptions` and the "before connect" attributes.

eleventy.config.js

@@ -52,19 +52,26 @@ export default function (eleventyConfig) {
 
   const inline = (text) => markdown.renderInline(text);
 
+  const tableCaptions = {
+    document: "Document and navigation attributes",
+    interface: "Interface attributes",
+    files: "Runtime file attributes",
+    resources: "PDF.js resource attributes",
+  };
+
   eleventyConfig.addShortcode("attributeTable", (group) => {
     const rows = attributes
       .filter((attr) => attr.group === group)
       .map(
         (attr) => `<tr id="attr-${attr.name}">
 <th scope="row"><a href="#attr-${attr.name}"><code>${attr.name}</code></a></th>
 <td>${inline(attr.description)}</td>
-<td class="default">${attr.default ? inline(attr.default) : `<span class="muted" aria-label="none">—</span>`}</td>
+<td class="default">${attr.default ? inline(attr.default) : `<span class="muted"><span aria-hidden="true">—</span><span class="visually-hidden">None</span></span>`}</td>
 <td><span class="update update-${attr.update}">${{ live: "Live", load: "Next load", init: "Before connect" }[attr.update]}</span></td>
 </tr>`
       )
       .join("");
-    return `<div class="table-wrap"><table class="attributes"><thead><tr><th scope="col">Attribute</th><th scope="col">Description</th><th scope="col">Default</th><th scope="col">Updates</th></tr></thead><tbody>${rows}</tbody></table></div>`;
+    return `<div class="table-wrap"><table class="attributes"><caption class="visually-hidden">${tableCaptions[group]}</caption><thead><tr><th scope="col">Attribute</th><th scope="col">Description</th><th scope="col">Default</th><th scope="col">Updates</th></tr></thead><tbody>${rows}</tbody></table></div>`;
   });
 
   eleventyConfig.addShortcode("playground", () => {
@@ -89,7 +96,7 @@ export default function (eleventyConfig) {
         return `<div class="control"><label for="${id}"><code>${name}</code></label>${field}</div>`;
       })
       .join("");
-    return `<form class="playground" data-playground aria-label="Attribute playground">${controls}<p class="playground-hint">Changes apply to the preview as you edit them.</p></form>`;
+    return `<form class="playground" data-playground aria-label="Attribute playground"><p class="playground-hint">Each change applies to the live preview straight away.</p>${controls}</form>`;
   });
 
   return {

src/_data/site.js

@@ -1,5 +1,5 @@
 export default {
-  name: "missing elements",
+  name: "Missing Elements",
   url: "https://missing-elements.github.io",
   github: "https://github.com/missing-elements",
   elements: [

src/_includes/base.njk

@@ -12,13 +12,14 @@
   <link rel="canonical" href="{{ site.url }}{{ page.url }}">
   <meta property="og:title" content="{{ title }}">
   <meta property="og:description" content="{{ description }}">
-  <link rel="icon" href="/assets/icon.svg" type="image/svg+xml">
+  <link rel="icon" href="/assets/logo.svg" type="image/svg+xml">
   <link rel="stylesheet" href="/assets/site.css">
   {%- block head %}{% endblock %}
 </head>
 <body class="{{ bodyClass }}">
   <a class="skip-link" href="#main">Skip to content</a>
   {{ content | safe }}
+  <p class="visually-hidden" role="status" data-status="page"></p>
   <script type="module" src="/assets/site.js"></script>
 </body>
 </html>

src/_includes/pdfjs-viewer.njk

@@ -11,29 +11,32 @@ bodyClass: docs-page
 </ol>
 {%- endmacro -%}
 <div class="docs">
-  <nav class="toc" aria-label="On this page">
-    <a class="toc-home" href="/">missing elements</a>
-    {{ tocList(toc) }}
-  </nav>
+  <div class="toc">
+    <nav aria-label="Site"><a class="brand toc-home" href="/"><img src="/assets/logo.svg" alt="" width="24" height="24">{{ site.name }}</a></nav>
+    <nav aria-label="On this page">{{ tocList(toc) }}</nav>
+  </div>
 
   <main class="content" id="main">
     <header class="docs-header">
+      <a class="brand docs-brand" href="/"><img src="/assets/logo.svg" alt="" width="24" height="24">{{ site.name }}</a>
       <div class="docs-header-row">
         <h1>pdfjs-viewer</h1>
-        <button type="button" class="theme-toggle" data-theme-toggle hidden>
-          <span class="when-light">Dark theme</span><span class="when-dark">Light theme</span>
-        </button>
+        <label class="theme-switch" data-theme-toggle hidden>
+          <input type="checkbox" role="switch" aria-label="Dark theme">
+          <span class="theme-switch-knob" aria-hidden="true"></span>
+          <svg class="theme-switch-sun" viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg>
+          <svg class="theme-switch-moon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z"/></svg>
+        </label>
       </div>
       <p class="lead">A self-hostable PDF viewer web component, based on the <a href="https://mozilla.github.io/pdf.js/web/viewer.html">PDF.js default viewer</a>.</p>
       <ul class="meta">
-        <li><a href="{{ pdfjsViewer.npm }}">v{{ pdfjsViewer.version }}</a></li>
-        <li>PDF.js {{ pdfjsViewer.pdfjsVersion }}</li>
+        <li><a href="{{ pdfjsViewer.npm }}">npm</a></li>
         <li><a href="{{ pdfjsViewer.repo }}">GitHub</a></li>
-        <li><a href="{{ pdfjsViewer.repo }}/blob/master/LICENSE">MIT</a></li>
+        <li><a href="{{ pdfjsViewer.repo }}/blob/master/LICENSE">MIT license</a></li>
       </ul>
       <details class="toc-inline">
         <summary>On this page</summary>
-        {{ tocList(toc) }}
+        <nav aria-label="On this page">{{ tocList(toc) }}</nav>
       </details>
     </header>
 
@@ -44,17 +47,18 @@ bodyClass: docs-page
     </footer>
   </main>
 
-  <aside class="preview" id="preview" aria-label="Live preview" data-preview>
+  <div class="preview" id="preview" role="complementary" aria-label="Live preview" data-preview>
     <div class="preview-bar">
       <span class="preview-title">Live preview</span>
-      <button type="button" class="button" data-preview-reset>Reset</button>
+      <button type="button" class="button" data-preview-reset aria-label="Reset preview">Reset</button>
       <button type="button" class="button preview-close" data-preview-close>Close</button>
     </div>
     <div class="preview-stage" data-preview-stage>
       <noscript><p class="preview-note">The preview needs JavaScript.</p></noscript>
     </div>
-    <div class="preview-markup" aria-live="polite"><code data-preview-markup></code></div>
-  </aside>
+    <pre class="language-html preview-markup" data-label="Current markup" data-preview-markup-box><code class="language-html" data-preview-markup></code></pre>
+    <p class="visually-hidden" role="status" data-status="preview"></p>
+  </div>
   <button type="button" class="button preview-open" data-preview-open aria-controls="preview" aria-expanded="false" hidden>Preview</button>
 </div>
 <script type="module" src="/pdfjs-viewer/docs.js"></script>