Fixes

.github/workflows/deploy.yml

@@ -16,6 +16,7 @@ concurrency:
 
 jobs:
     build:
+        if: github.repository == 'jmapio/jmapio.github.io'
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v6

Dockerfile.rfc

@@ -17,4 +17,4 @@ RUN python3 -m venv .venv \
 COPY package.json package-lock.json ./
 RUN npm ci
 
-COPY scripts ./scripts
+COPY _scripts ./_scripts

README.md

@@ -40,21 +40,21 @@ _bin/generate-rfcs
 The pipeline is two steps:
 
 ```sh
-node scripts/fetch-rfc-xml.js          # fetches RFC and draft XMLs into _tmp/rfc-xml/
-node scripts/generate-rfc-templates.js # runs xml2rfc and writes Liquid templates + ToC includes
+node _scripts/fetch-rfc-xml.js          # fetches RFC and draft XMLs into _tmp/rfc-xml/
+node _scripts/generate-rfc-templates.js # runs xml2rfc and writes Liquid templates + ToC includes
 ```
 
 The list of source documents (RFCs and active drafts) lives at the top of
-`scripts/fetch-rfc-xml.js` — update it there when a new RFC or draft revision is
-published.
+`_scripts/fetch-rfc-xml.js` — update it there when a new RFC or draft revision
+is published.
 
 ## Generating OG images
 
 ```sh
 _bin/generate-og-images
 ```
 
-This uses Playwright to screenshot `scripts/og-image.html` for each page in
+This uses Playwright to screenshot `_scripts/og-image.html` for each page in
 `pages/` and writes the results to `images/og/`.
 
 ## Linting and formatting

_bin/generate-rfcs

@@ -14,6 +14,6 @@ docker run --rm \
   -it \
   jmapio-rfc \
   bash -c '
-    node scripts/fetch-rfc-xml.js
-    node scripts/generate-rfc-templates.js
+    node _scripts/fetch-rfc-xml.js
+    node _scripts/generate-rfc-templates.js
   '

_config.yml

@@ -6,11 +6,8 @@ lightningcss:
 esbuild:
     target: es2022
 exclude:
-    - _tmp
-    - _bin
-    - scripts
-    - vendor
     - package.json
     - package-lock.json
     - prettier.config.mjs
     - stylelint.config.js
+    - README.md

_includes/components/toc-fab.liquid

@@ -18,9 +18,9 @@
     hidden
 >
     <div class='toc-drawer__backdrop' data-toc-close></div>
-    <div class='toc-drawer__panel'>
+    <div class='toc-drawer__panel' tabindex='-1'>
         <div class='toc-drawer__header'>
-            <span class='toc-drawer__title'>Contents</span>
+            <h2 class='toc-drawer__title'>Table of Contents</h2>
             <button class='toc-drawer__close' data-toc-close aria-label='Close'>
                 {% include icons/close.liquid %}
             </button>

_includes/icons/close.liquid

@@ -1,14 +1,11 @@
 <svg
     aria-hidden='true'
     xmlns='http://www.w3.org/2000/svg'
-    viewBox='0 0 24 24'
     fill='none'
-    stroke='currentColor'
-    stroke-linecap='round'
-    stroke-linejoin='round'
+    viewBox='0 0 24 24'
     stroke-width='1.5'
+    stroke='currentColor'
+    class='i-close'
 >
-    <!-- clip-path="inset(-1)" prevents an outline being drawn around the line on iOS 16 -->
-    <line x1="17.25" y1="6.75" x2="6.75" y2="17.25" clip-path="inset(-1)" />
-    <line x1="6.75" y1="6.75" x2="17.25" y2="17.25" />
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
 </svg>

_layouts/article-rfc.liquid

@@ -25,6 +25,8 @@ scripts:
     sub=page.description
 %}
 
+{% include components/toc-fab.liquid %}
+
 <section class='section section--document'>
     <div class='u-wrapper u-article-split'>
         <nav class='u-toc-wrapper' aria-label='Table of contents'>
@@ -33,5 +35,3 @@ scripts:
         <article class='u-article u-article--rfc'>{{ content }}</article>
     </div>
 </section>
-
-{% include components/toc-fab.liquid %}

_layouts/article-toc.liquid

@@ -17,6 +17,8 @@ scripts:
     %}
 {% endif %}
 
+{% include components/toc-fab.liquid %}
+
 <section class='section section--document'>
     <div class='u-wrapper u-article-split'>
         <nav class='u-toc-wrapper' aria-label='Table of contents'>
@@ -25,5 +27,3 @@ scripts:
         <article class='u-article'>{{ content }}</article>
     </div>
 </section>
-
-{% include components/toc-fab.liquid %}

_layouts/why-jmap.liquid

@@ -19,96 +19,24 @@ scripts:
 <article class='u-article'>{{ content }}</article>
 <div class='faq'>
     <h2 class='faq__h2' id="faq">Frequently asked questions</h2>
+    {% for item in page.faq %}
     <details class='faq__details'>
         <summary class='faq__summary'>
-            What is JMAP?
+            {{ item.question }}
             <span class='faq__expand'>
                 {% include icons/plus.liquid %}
             </span>
         </summary>
         <div class='faq__answer'>
-            <p>
-                JMAP (JSON Meta Application Protocol) is an open IETF standard for synchronising mail, calendars, and contacts between a client and server. It replaces IMAP, CardDAV, and CalDAV with a single consistent protocol built on HTTPS and JSON, with efficient batch requests and real-time push updates built in.
-            </p>
-        </div>
-    </details>
-    <details class='faq__details'>
-        <summary class='faq__summary'>
-            Is JMAP a replacement for IMAP?
-            <span class='faq__expand'>
-                {% include icons/plus.liquid %}
-            </span>
-        </summary>
-        <div class='faq__answer'>
-            <p>
-                Yes. JMAP covers everything IMAP does &mdash; reading,
-                searching, moving, flagging, and even sending email &mdash; with a much cleaner and more efficient API. JMAP also replaces POP3, client-side SMTP, CardDAV, and CalDAV.
-            </p>
-            <p>
-                JMAP does not replace server-to-server SMTP. Email servers still use SMTP to route messages between domains.
-            </p>
-        </div>
-    </details>
-    <details class='faq__details'>
-        <summary class='faq__summary'>
-            Which email providers support JMAP?
-            <span class='faq__expand'>
-                {% include icons/plus.liquid %}
-            </span>
-        </summary>
-        <div class='faq__answer'>
-            <p>
-                <strong><a href="https://www.fastmail.com">Fastmail</a></strong> is the largest JMAP provider and was instrumental in developing the standard &mdash; their web, desktop, and mobile clients all run on JMAP.
-            </p>
-            <p><strong>Stalwart Mail Server</strong> is a modern open-source server with complete JMAP support. <strong>Apache James</strong> and <strong>Cyrus IMAP</strong> also both support JMAP.
-            </p>
-        </div>
-    </details>
-    <details class='faq__details'>
-        <summary class='faq__summary'>
-            Is JMAP stable enough to build on?
-            <span class='faq__expand'>
-                {% include icons/plus.liquid %}
-            </span>
-        </summary>
-        <div class='faq__answer'>
-            <p>
-                Yes. RFC 8620 (Core), RFC 8621 (Mail), and RFC 9610 (Contacts) are published IETF standards and will not change in backwards-incompatible ways. Fastmail has been running their entire production email service on JMAP since 2019.
-            </p>
-        </div>
-    </details>
-    <details class='faq__details'>
-        <summary class='faq__summary'>
-            How does JMAP handle authentication?
-            <span class='faq__expand'>
-                {% include icons/plus.liquid %}
-            </span>
-        </summary>
-        <div class='faq__answer'>
-            <p>
-                JMAP deliberately does not define its own authentication mechanism, it just uses standard HTTP authentication. In practice, that's often OAuth 2.0 with Bearer tokens. This means JMAP works with your existing identity infrastructure without any changes.
-            </p>
-        </div>
-    </details>
-    <details class='faq__details'>
-        <summary class='faq__summary'>
-            How does JMAP perform compared to IMAP?
-            <span class='faq__expand'>
-                {% include icons/plus.liquid %}
-            </span>
-        </summary>
-        <div class='faq__answer'>
-            <p>
-                JMAP performs as well or better than IMAP in all tested scenarios. The white paper contains detailed benchmarks.
-            </p>
-            <p>
-                Modern IMAP with all extensions enabled can get a lot closer to JMAP's efficiency, but this requires both the client and server to implement the right extensions &mdash; which is rarely the case in practice.
-            </p>
+            {{ item.answer | markdownify }}
         </div>
     </details>
+    {% endfor %}
 </div>
 {% endcapture %}
 
+{% include components/toc-fab.liquid %}
+
 <section class='section section--document'>
     <div class='u-wrapper u-article-split'>
         <nav class='u-toc-wrapper' aria-label='Table of contents'>
@@ -117,5 +45,3 @@ scripts:
         <div>{{ pageContent }}</div>
     </div>
 </section>
-
-{% include components/toc-fab.liquid %}

scripts/generate-og-images.js → _scripts/generate-og-images.js

@@ -73,7 +73,7 @@ const collectPages = async () => {
 // ---
 
 const htmlTemplate = await fs.readFile(
-    path.join(ROOT, 'scripts', 'og-image.html'),
+    path.join(ROOT, '_scripts', 'og-image.html'),
     { encoding: 'utf8' },
 );
 

css/module/global.css

@@ -127,6 +127,20 @@ hr {
     height: 20px;
 }
 
+/* --- */
+
+.u-inline-code {
+    margin-inline: 0.5ex;
+    border: 1px solid var(--theme-border);
+    padding: 0.1em 0.5ex;
+    background: var(--theme-code-bg);
+    border-radius: var(--radius-s);
+    color: var(--theme-accent);
+    font-family: var(--font-mono);
+    font-size: 0.85em;
+    text-wrap: nowrap;
+}
+
 /* --- Logo */
 .jmap-logo {
     display: flex;

css/module/section.css

@@ -22,19 +22,6 @@
     color: var(--theme-ink);
 }
 
-.section__inline-code,
-code:not([class]) {
-    margin-inline: 0.5ex;
-    border: 1px solid var(--theme-border);
-    padding: 0.1em 0.5ex;
-    background: var(--theme-code-bg);
-    border-radius: var(--radius-s);
-    color: var(--theme-accent);
-    font-family: var(--font-mono);
-    font-size: 0.85em;
-    text-wrap: nowrap;
-}
-
 .section--card-list {
     padding-block: var(--space-2xl);
 

css/toc.css

@@ -127,8 +127,8 @@ ul.u-toc > li > p > a {
     position: fixed;
     align-items: center;
     justify-content: center;
-    right: var(--space-l);
-    bottom: var(--space-l);
+    right: calc(env(safe-area-inset-right, 0) + var(--space-l));
+    bottom: calc(env(safe-area-inset-bottom, 0) + var(--space-s));
     border: 1px solid var(--theme-border-strong);
     width: 52px;
     height: 52px;
@@ -221,6 +221,13 @@ ul.u-toc > li > p > a {
     transform: translateY(0);
 }
 
+.toc-drawer__panel:focus,
+.toc-drawer__panel:focus-visible,
+.toc-drawer__title:focus,
+.toc-drawer__title:focus-visible {
+    outline: none;
+}
+
 .toc-drawer__header {
     display: flex;
     align-items: center;
@@ -243,16 +250,19 @@ ul.u-toc > li > p > a {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 24px;
-    height: 24px;
-    background: transparent;
+    color: var(--theme-button-standard-fg);
     cursor: pointer;
-    font-size: 1.4rem;
-    stroke: var(--theme-muted);
-}
 
-.toc-drawer__close:hover {
-    color: var(--theme-accent);
+    &:hover {
+        background: var(--theme-button-standard-bg-hover);
+        color: var(--theme-button-standard-fg-hover);
+    }
+
+    > svg {
+        flex-basis: 24px;
+        width: 24px;
+        height: 24px;
+    }
 }
 
 .toc-drawer__nav .u-toc {

css/why-jmap.css

@@ -53,9 +53,12 @@
     border-radius: 50%;
     color: var(--theme-muted);
 }
+.faq__summary:hover .faq__expand {
+    background: var(--theme-glass-bg);
+    color: var(--theme-accent);
+}
 details[open] .faq__expand {
     transform: rotate(45deg);
-    background: var(--theme-accent-dim);
     border-color: var(--theme-accent);
     color: var(--theme-accent);
 }