add brotli compression

Dockerfile

@@ -23,6 +23,9 @@ RUN npm run export:pdf -- --theme=light --wait=full
 # Use an official Nginx runtime as the base image for serving the application
 FROM nginx:alpine
 
+# Install Brotli dynamic module for Nginx
+RUN apk add --no-cache nginx-mod-http-brotli
+
 # Copy the built application from the build stage
 COPY --from=build /app/dist /usr/share/nginx/html
 

app/astro.config.mjs

@@ -1,6 +1,7 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import mermaid from 'astro-mermaid';
+import compressor from 'astro-compressor';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
 import remarkFootnotes from 'remark-footnotes';
@@ -11,7 +12,12 @@ import rehypeCitation from 'rehype-citation';
 
 export default defineConfig({
   output: 'static',
-  integrations: [mermaid({ theme: 'forest', autoTheme: true }), mdx()],
+  integrations: [
+    mermaid({ theme: 'forest', autoTheme: true }),
+    mdx(),
+    // Precompress output with Brotli (preferred) and Gzip as fallback
+    compressor({ brotli: true, gzip: true })
+  ],
   devToolbar: {
     enabled: false
   },

app/src/components/Accordion.astro

@@ -0,0 +1,143 @@
+---
+const { title, open = false, class: className, ...props } = Astro.props;
+const wrapperClass = ["accordion", className].filter(Boolean).join(" ");
+---
+<details class={wrapperClass} open={open} {...props}>
+  <summary class="accordion__summary">
+    <span class="accordion__title">{title}</span>
+    <svg class="accordion__chevron" viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
+      <path d="M6 9l6 6 6-6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+    </svg>
+  </summary>
+  <div class="accordion__content-wrapper">
+    <div class="accordion__content">
+      <slot />
+    </div>
+  </div>
+</details>
+
+<script>
+  // Animate open/close by transitioning explicit height
+  document.addEventListener('DOMContentLoaded', () => {
+    const accordions = document.querySelectorAll('.accordion') as NodeListOf<HTMLDetailsElement>;
+    accordions.forEach((acc) => {
+      const summary = acc.querySelector('summary.accordion__summary') as HTMLElement | null;
+      const wrapper = acc.querySelector('.accordion__content-wrapper') as HTMLElement | null;
+      const content = acc.querySelector('.accordion__content') as HTMLElement | null;
+      if (!summary || !wrapper || !content) return;
+
+      const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const duration = reduceMotion ? 0 : 240;
+
+      // Initial state
+      wrapper.style.overflow = 'hidden';
+      wrapper.style.height = acc.open ? 'auto' : '0px';
+
+      const open = () => {
+        wrapper.style.height = '0px';
+        void wrapper.offsetHeight; // reflow
+        const target = content.scrollHeight;
+        wrapper.style.transition = `height ${duration}ms ease`;
+        wrapper.style.height = `${target}px`;
+        const onEnd = () => {
+          wrapper.style.transition = '';
+          wrapper.style.height = 'auto';
+          wrapper.removeEventListener('transitionend', onEnd);
+        };
+        wrapper.addEventListener('transitionend', onEnd);
+      };
+
+      const close = () => {
+        const start = content.scrollHeight;
+        wrapper.style.height = `${start}px`;
+        void wrapper.offsetHeight; // reflow
+        wrapper.style.transition = `height ${duration}ms ease`;
+        wrapper.style.height = '0px';
+        const onEnd = () => {
+          wrapper.style.transition = '';
+          wrapper.removeEventListener('transitionend', onEnd);
+          acc.removeAttribute('open');
+        };
+        wrapper.addEventListener('transitionend', onEnd);
+      };
+
+      summary.addEventListener('click', (e) => {
+        e.preventDefault();
+        if (acc.open) {
+          close();
+        } else {
+          acc.setAttribute('open', '');
+          open();
+        }
+      });
+    });
+  });
+  </script>
+
+<style>
+  .accordion {
+    border: 1px solid var(--border-color);
+    border-radius: 10px;
+    background: var(--surface-bg);
+    transition: box-shadow 180ms ease, border-color 180ms ease;
+  }
+
+  .accordion[open] {
+    box-shadow: 0 6px 22px rgba(0,0,0,0.08);
+    border-color: color-mix(in oklab, var(--border-color), var(--primary-color) 20%);
+  }
+
+  .accordion__summary {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacing-1);
+    padding: var(--spacing-1);
+    cursor: pointer;
+    color: var(--text-color);
+    user-select: none;
+  }
+
+  /* Remove native marker */
+  .accordion__summary::-webkit-details-marker {
+    display: none;
+  }
+  .accordion__summary::marker {
+    content: "";
+  }
+
+  .accordion__title {
+    font-weight: 600;
+  }
+
+  .accordion__chevron {
+    flex: 0 0 auto;
+    transition: transform 220ms ease;
+    opacity: .85;
+  }
+
+  .accordion[open] .accordion__chevron {
+    transform: rotate(180deg);
+  }
+
+  /* Animated expand/collapse using height (controlled in JS) */
+  .accordion__content-wrapper {
+    overflow: hidden;
+    height: 0px;
+    will-change: height;
+  }
+
+  .accordion__content {
+    padding: var(--spacing-1);
+  }
+
+  /* Focus styles for accessibility */
+  .accordion__summary:focus-visible {
+    outline: 2px solid var(--primary-color);
+    outline-offset: 3px;
+    border-radius: 8px;
+  }
+</style>
+
+

app/src/content/article.mdx

@@ -60,13 +60,10 @@ import GettingStarted from "./chapters/getting-started.mdx";
   <span className="tag">SEO Friendly</span>
   <span className="tag">Mermaid diagrams</span>
   <span className="tag">Lightweight bundle</span>
-  <span className="tag">Aside notes</span>
   <span className="tag">Mobile friendly</span>
   <span className="tag">Optimized images</span>
-  <span className="tag">Medium like zoomable images</span>
-  <span className="tag">PDF export</span>
-  <span className="tag">To do: Accordion</span>
-  <span className="tag">To do: dataviz color palette generator</span>
+  <span className="tag">Automatic PDF export</span>
+  <span className="tag">Dataviz color palettes</span>
 </div>
 <Fragment slot="aside">
     If you have questions or remarks open a discussion on the <a href="https://huggingface.co/spaces/tfrere/research-blog-template/discussions?status=open&type=discussion">Community tab</a>!

app/src/content/chapters/available-blocks.mdx

@@ -5,6 +5,7 @@ import HtmlFragment from '../../components/HtmlFragment.astro';
 import Aside from '../../components/Aside.astro';
 import Wide from '../../components/Wide.astro';
 import FullBleed from '../../components/FullBleed.astro';
+import Accordion from '../../components/Accordion.astro';
 
 ## Available blocks
 
@@ -18,6 +19,7 @@ All the following blocks are available in the article.mdx file. You can also cre
   <a className="button" href="#mermaid-diagrams">Mermaid</a>
   <a className="button" href="#citations-and-notes">Citations & notes</a>
   <a className="button" href="#placement">Placement</a>
+  <a className="button" href="#accordion">Accordion</a>
   <a className="button" href="#minimal-table">Minimal table</a>
   <a className="button" href="#audio">Audio</a>
   <a className="button" href="#embeds">Embeds</a>
@@ -39,9 +41,7 @@ $x^2 + y^2 = z^2$
 
 **Block**
 
-$$
-\mathrm{Attention}(Q,K,V)=\mathrm{softmax}\!\left(\frac{QK^\top}{\sqrt{d_k}}\right) V
-$$
+Affichage en bloc, voir l'exemple ci-dessous.
 
 <small className="muted">Example</small>
 ```mdx
@@ -213,6 +213,39 @@ import FullBleed from '../components/FullBleed.astro'
 ```
 
 
+### Accordion
+
+Accessible accordion based on `details/summary`. You can pass any children content.
+
+<Accordion title="What can this accordion hold?" open>
+  <p>Text, lists, images, code blocks, etc.</p>
+  <ul>
+    <li>Item one</li>
+    <li>Item two</li>
+  </ul>
+</Accordion>
+
+<Accordion title="Closed by default">
+  <p>This one stays collapsed until the user clicks the summary.</p>
+</Accordion>
+
+<small className="muted">Example</small>
+```mdx
+import Accordion from '../components/Accordion.astro'
+
+<Accordion title="Accordion title" open>
+  <p>Free content with <strong>markdown</strong> and MDX components.</p>
+</Accordion>
+
+<Accordion title="Another accordion">
+  <ul>
+    <li>Item A</li>
+    <li>Item B</li>
+  </ul>
+</Accordion>
+```
+
+
 ### Minimal table
 
 | Method | Score |
@@ -230,17 +263,13 @@ import FullBleed from '../components/FullBleed.astro'
 
 ### Audio
 
-<audio controls src={audioDemo}>
-  Your browser does not support the audio element.
-</audio>
-
+<audio controls src={audioDemo}/>
+<br/>
 <small className="muted">Example</small>
 ```mdx
 import audioDemo from '../assets/audio/audio-example.wav'
 
-<audio controls src={audioDemo}>
-  Your browser does not support the audio element.
-</audio>
+<audio controls src={audioDemo}/>
 ```
 
 

nginx.conf

@@ -1,3 +1,6 @@
+load_module modules/ngx_http_brotli_filter_module.so;
+load_module modules/ngx_http_brotli_static_module.so;
+
 worker_processes auto;
 pid /tmp/nginx.pid;
 
@@ -17,6 +20,40 @@ http {
     sendfile on;
     keepalive_timeout 65;
 
+    # Brotli (preferred)
+    brotli on;
+    brotli_comp_level 5;
+    brotli_static always;
+    brotli_min_length 256;
+    brotli_types
+        text/plain
+        text/css
+        text/javascript
+        application/javascript
+        application/json
+        application/xml
+        application/rss+xml
+        image/svg+xml
+        font/ttf
+        font/otf
+        font/woff
+        font/woff2;
+
+    # Gzip fallback
+    gzip on;
+    gzip_vary on;
+    gzip_proxied any;
+    gzip_comp_level 5;
+    gzip_min_length 256;
+    gzip_types
+        text/plain
+        text/css
+        application/javascript
+        application/json
+        application/xml
+        application/rss+xml
+        image/svg+xml;
+
     server {
         listen 8080;
         server_name localhost;