@supersoniks/concorde 5.1.0 → 5.1.2

package/scripts/generate-crawl-docs.test.mjs

@@ -0,0 +1,124 @@
+import assert from "node:assert/strict";
+import fs from "node:fs";
+import os from "node:os";
+import path from "path";
+import test from "node:test";
+import {
+  generateHomepageMarkdown,
+  generateHtaccess,
+  generateNotFoundHtml,
+  generateNotFoundMarkdown,
+  pagePath,
+  writeAgentSiteArtifacts,
+} from "./generate-crawl-docs.mjs";
+
+function stripTags(html) {
+  return html
+    .replace(/<script[\s\S]*?<\/script>/gi, " ")
+    .replace(/<style[\s\S]*?<\/style>/gi, " ")
+    .replace(/<[^>]+>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+test("pagePath builds pretty public pathnames", () => {
+  assert.equal(
+    pagePath("docs/getting-started/start.md"),
+    "/docs/getting-started/start",
+  );
+  assert.equal(
+    pagePath("core/components/ui/button/button.md"),
+    "/core/components/ui/button",
+  );
+  assert.equal(
+    pagePath("core/components/functional/sdui/sdui-extension-points.md"),
+    "/core/components/functional/sdui/sdui-extension-points",
+  );
+});
+
+test("homepage Markdown meets Accept negotiation body requirements", () => {
+  const md = generateHomepageMarkdown();
+  assert.match(md, /^# Concorde by Supersoniks/m);
+  assert.match(md, /@supersoniks\/concorde/);
+  assert.match(md, /llms\.txt/);
+  assert.match(md, /Accept: text\/markdown/);
+  assert.match(md, /docs\/getting-started\/start/);
+  assert.doesNotMatch(md, /\/crawl\//);
+  assert.doesNotMatch(md, /\/docs\/_getting-started\//);
+  assert.ok(md.length >= 500, `expected ≥500 chars, got ${md.length}`);
+});
+
+test("404 Markdown explains the error and links agent entry points", () => {
+  const md = generateNotFoundMarkdown();
+  assert.ok(md.length >= 20);
+  assert.match(md, /not found/i);
+  assert.match(md, /llms\.txt|sitemap\.xml|docs\/index/);
+  assert.doesNotMatch(md, /\/crawl\//);
+  assert.match(md, /https:\/\/concorde\.supersoniks\.org/);
+});
+
+test("404 HTML keeps a human-readable fallback", () => {
+  const html = generateNotFoundHtml();
+  assert.match(html, /<h1>Page not found<\/h1>/);
+  assert.match(html, /llms\.txt/);
+  assert.doesNotMatch(html, /\/crawl\//);
+});
+
+test("htaccess maps components and negotiates Markdown/HTML", () => {
+  const conf = generateHtaccess();
+  assert.match(conf, /RewriteEngine On/);
+  assert.match(conf, /text\/markdown/);
+  assert.match(conf, /index\.md/);
+  assert.match(conf, /ErrorDocument 404 \/404\.md/);
+  assert.match(conf, /\$1\/\$2\/\$2\.md/);
+  assert.match(conf, /Googlebot/);
+  assert.match(conf, /index\.html \[END\]/);
+  assert.match(conf, /DirectorySlash Off/);
+  assert.doesNotMatch(conf, /docs\/_/);
+  assert.doesNotMatch(conf, /THE_REQUEST/);
+  assert.doesNotMatch(conf, /\^crawl\//);
+});
+
+test("writeAgentSiteArtifacts emits negotiation files", () => {
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), "concorde-agent-"));
+  try {
+    writeAgentSiteArtifacts(dir);
+    for (const name of ["index.md", "404.md", "404.html", ".htaccess"]) {
+      const filePath = path.join(dir, name);
+      assert.ok(fs.existsSync(filePath), `missing ${name}`);
+      assert.ok(fs.statSync(filePath).size > 20, `${name} too small`);
+    }
+  } finally {
+    fs.rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+test("source index.html ships ≥500 chars of meaningful agent content with H1", () => {
+  const indexPath = path.resolve("index.html");
+  const html = fs.readFileSync(indexPath, "utf8");
+  assert.match(html, /id="docs-agent-content"/);
+  assert.match(html, /<h1>Concorde by Supersoniks<\/h1>/);
+  assert.match(html, /href="\/docs\/getting-started\/start"/);
+  assert.doesNotMatch(html, /\/docs\/_getting-started\//);
+  assert.doesNotMatch(html, /\/crawl\//);
+
+  const section = html.match(
+    /<section id="docs-agent-content"[^>]*>([\s\S]*?)<\/section>/,
+  );
+  assert.ok(section, "docs-agent-content section missing");
+  const text = stripTags(section[1]);
+  assert.ok(
+    text.length >= 500,
+    `agent section text expected ≥500 chars, got ${text.length}`,
+  );
+});
+
+test("public robots.txt allows pathnames and drops /crawl/", () => {
+  const robots = fs.readFileSync(path.resolve("public/robots.txt"), "utf8");
+  assert.match(robots, /Allow: \//);
+  assert.match(robots, /Allow: \/docs\//);
+  assert.match(robots, /Allow: \/core\//);
+  assert.match(robots, /Allow: \/llms\.txt/);
+  assert.doesNotMatch(robots, /Allow: \/crawl\//);
+  assert.doesNotMatch(robots, /Googlebot[\s\S]*Disallow: \//);
+});

package/scripts/post-build-docs.js

@@ -4,54 +4,56 @@ import { generateCrawlDocs } from "./generate-crawl-docs.mjs";
 
 const src = path.resolve("src");
 const docs = path.resolve("docs");
-/**
- * lister les fichiers d'un répertoire de manière récursive
- */
+
 function listFiles(dir) {
   let files = [];
   let list = fs.readdirSync(dir);
   list.forEach((file) => {
-    const path = dir + "/" + file;
-    let stat = fs.statSync(path);
+    const filePath = dir + "/" + file;
+    let stat = fs.statSync(filePath);
     if (stat && stat.isDirectory()) {
-      files = files.concat(listFiles(path));
+      files = files.concat(listFiles(filePath));
     } else {
-      files.push(path);
+      files.push(filePath);
     }
   });
   return files;
 }
 
+function ensureCopy(absSrc, absDest) {
+  fs.mkdirSync(path.dirname(absDest), { recursive: true });
+  fs.copyFileSync(absSrc, absDest);
+}
+
 /**
- * copier toues les fichiers .md présents dans le répertpoire src et ses sous dossiers de manière récurcive vers dossier docs en respectant l'arborescence qu'il y avait dans le dossier src
- * il faut creer le chemin si il n'existe pas avant de copier le fichier
+ * Publish markdown at the public pathname (`/docs/…/page.md`, `/core/…/page.md`)
+ * and keep a `/src/…` copy for non-md assets (and legacy MD until 301).
  */
 function copyDocs() {
-  let files = listFiles(src);
+  const files = listFiles(src);
   for (const file of files) {
-    if (file.indexOf(".md") != -1 || file.indexOf(".json") != -1) {
-      let idx = file.indexOf("src/");
-      let dest = file.substring(idx);
-      let split = dest.split("/");
-      let dir = path.resolve(docs);
-      for (let i = 0; i < split.length - 1; i++) {
-        dir += "/" + split[i];
-        if (!fs.existsSync(dir)) {
-          fs.mkdirSync(dir);
-        }
-      }
-      dir += "/" + split[split.length - 1];
-      fs.copyFileSync(file, dir);
+    const isMd = /\.mdx?$/i.test(file);
+    const isJson = file.endsWith(".json");
+    if (!isMd && !isJson) continue;
+
+    const idx = file.indexOf("src/");
+    if (idx === -1) continue;
+    const underSrc = file.substring(idx); // src/docs/…/x.md
+    const withoutSrc = underSrc.replace(/^src\//, ""); // docs/…/x.md
+
+    // Always keep under docs/src/… (json + legacy md paths)
+    ensureCopy(file, path.join(docs, underSrc));
+
+    // Public MD URLs: /docs/… and /core/… (+ .md)
+    if (isMd && /^(docs|core)\//.test(withoutSrc)) {
+      ensureCopy(file, path.join(docs, withoutSrc));
     }
   }
 }
+
 copyDocs();
 generateCrawlDocs();
 
-/**
- * Par rapport au projet, regarder si ../concorde_doc existe et si oui, remplacer le contenu de /concorde_doc par celui de contenu dans docs/ en dehors des fichiers spécifiques à git .git .gitignore .gitattributes)
- */
-
 function copyToConcordeDoc() {
   let concordeDoc = path.resolve("../concorde_doc");
 
@@ -60,15 +62,17 @@ function copyToConcordeDoc() {
   }
 
   try {
-    /* first remove all files/foilders in concorde_doc  except .git folder and .gitignore file */
     let files = listFiles(concordeDoc);
     for (const file of files) {
       if (file.indexOf(".git") == -1) {
         fs.unlinkSync(file);
       }
     }
+    const legacyCrawl = path.join(concordeDoc, "crawl");
+    if (fs.existsSync(legacyCrawl)) {
+      fs.rmSync(legacyCrawl, { recursive: true, force: true });
+    }
 
-    /*then copy the new files*/
     files = listFiles(docs);
     for (const file of files) {
       let idx = file.indexOf("docs/") + 5;
@@ -95,29 +99,9 @@ function copyToConcordeDoc() {
     console.warn(
       "copyToConcordeDoc: skipped (",
       err.code || err.message,
-      ") — docs/ and docs/crawl/ were still generated.",
+      ") — docs/ pathnames (HTML + MD + hubs) were still generated.",
     );
   }
 }
 
 copyToConcordeDoc();
-
-/**
- * dans ../concorde_doc, faire un git  add, commit et push
- */
-/* 
-function gitConcordeDoc() {
-  let concordeDoc = path.resolve("../concorde_doc");
-  if (fs.existsSync(concordeDoc)) {
-    exec("cd " + concordeDoc + " && git add . && git commit -m 'update doc' && git push", (error, stdout, stderr) => {
-      if (error) {
-        console.error(`exec error: ${error}`);
-        return;
-      }
-      console.log(`stdout: ${stdout}`);
-      console.error(`stderr: ${stderr}`);
-    });
-  }
-}
-
-gitConcordeDoc(); */

package/src/core/components/functional/date/date.md

@@ -1,290 +1,150 @@
 # Date
 
-## No attribute
+**`sonic-date`** formats a date or a date range with `Intl.DateTimeFormat`. Pass a Unix timestamp in seconds (`date`) or a parsable string (`date_string`), add `end_date` for a range, and tune each part (`weekday` · `month` · `hour` …) with attributes. With no date and no `now`, it renders nothing.
 
-**Nothing** is displayed.
+## Basic example
 
-<sonic-code>
-  <template>
-    <sonic-date></sonic-date>
-  </template>
-</sonic-code>
-
-## Now
-
-Displays the **current date**.
+`date` is in **seconds**, not milliseconds. `date_string` accepts anything `new Date()` parses: prefer ISO 8601 with an explicit offset. `now` shows the current date.
 
 <sonic-code>
   <template>
-    <sonic-date now></sonic-date>
-  </template>
-</sonic-code>
-
-
-## Date  
-
-Displays a date from a **timestamp**.
-
-<sonic-code>
-  <template>
-    <sonic-date date= "1640265629"></sonic-date>
-  </template>
-</sonic-code>
-
-## Date_string  
-
-Displays a date from a **string**.
-
-<sonic-code>
-  <template>
-    <sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Start_date / end_date  
-
-Displays a period of time **from start_date to end_date**.  
-When by itself **start_date** will act as **date**  
-if a **start_date is not specified** it will be set by the **current date**.  
-if the **end_date is anterior** to start date date it will be **used as the start_date**. 
-
-<sonic-code>
-  <template>
-    <!-- from start_date to end_date -->
-    <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
-    <br>
-    <!-- start_date is not specified -->
-    <sonic-date end_date= "2640365629"></sonic-date>
-    <br>
-    <!-- end_date is anterior -->
-    <sonic-date end_date= "640365629"></sonic-date>
-  </template>
-</sonic-code>
-
-
-## Start_date_string / end_date_string
-
-<sonic-code>
-  <template>
-    <!-- from start_date to end_date -->
-    <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
-    <br>
-    <!-- start_date is not specified -->
-    <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
-    <br>
-    <!-- end_date is anterior -->
-    <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
-
-## Wording_billet_periode_validite
-
-<sonic-code>
-  <template>
-    <sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>
+    <div class="grid gap-2">
+      <div>Departure: <sonic-date date="1781514000" language="en"></sonic-date></div>
+      <div>Arrival: <sonic-date date_string="2026-06-15T12:45:00Z" language="en"></sonic-date></div>
+      <div>Now: <sonic-date now language="en"></sonic-date></div>
+    </div>
   </template>
 </sonic-code>
 
+## Date range
 
-## Weekday
-
-<sonic-code>
-  <template>
-    <b>narrow : </b>
-    <sonic-date weekday="narrow" now></sonic-date>
-    <br>
-    <b>short (default) : </b>
-    <sonic-date weekday="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date weekday="long" now></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date weekday="hidden" now></sonic-date>
-  </template>
-</sonic-code>
+Set `start_date` and `end_date` (or their `_string` variants). On two different days, only the dates are shown, with the "from … to …" wording. On the same day, the hours are kept. `hide_hours` drops them anyway.
 
-## Day
+Without a start, the range starts now. If the end is before the start, the two are swapped.
 
 <sonic-code>
   <template>
-    <b>numeric : </b>
-    <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>
+    <div class="grid gap-2">
+      <sonic-date start_date_string="2026-06-15T09:00:00Z" end_date_string="2026-06-22T18:00:00Z" language="en" wording_billet_periode_validite="From %s to %s"></sonic-date>
+      <sonic-date start_date_string="2026-06-15T09:00:00Z" end_date_string="2026-06-15T12:45:00Z" language="en"></sonic-date>
+      <sonic-date start_date_string="2026-06-15T09:00:00Z" end_date_string="2026-06-15T12:45:00Z" language="en" hide_hours></sonic-date>
+    </div>
   </template>
 </sonic-code>
 
-## Month
+## Range wording
 
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date month="numeric" now></sonic-date>
-    <br>
-    <b>2-digit : </b>
-    <sonic-date month="2-digit" now></sonic-date>
-    <br>
-    <b>narrow : </b>
-    <sonic-date month="narrow" now></sonic-date>
-    <br>
-    <b>short (default) : </b>
-    <sonic-date month="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date month="long" now></sonic-date>
-  </template>
-</sonic-code>
-
-## Year
+`wording_billet_periode_validite` holds the range wording, with one `%s` per date. It defaults to the French `Du %s au %s`, whatever the language: **set it for every non-French page**.
 
 <sonic-code>
   <template>
-    <b>numeric (default) : </b>
-    <sonic-date year="numeric" now></sonic-date>
-    <br>
-    <b>2-digit : </b>
-    <sonic-date year="2-digit" now></sonic-date>
+    <sonic-date start_date_string="2026-06-15" end_date_string="2026-06-22" language="en" wording_billet_periode_validite="Valid from %s until %s"></sonic-date>
   </template>
 </sonic-code>
 
-## Hour
-
-<sonic-code>
-  <template>
-    <b>numeric : </b>
-    <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-  </template>
-</sonic-code>
+## Format options
 
-## Minute
+Defaults: `weekday="short"` · `day="2-digit"` · `month="short"` · `year="numeric"` · `hour="2-digit"` · `minute="2-digit"`, 24-hour clock, no era. `hidden` removes a part.
 
 <sonic-code>
   <template>
-    <b>numeric : </b>
-    <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>2-digit (default) : </b>
-    <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
-    <br>
-    <b>hidden : </b>
-    <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      <code>default</code><sonic-date date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>weekday="long"</code><sonic-date weekday="long" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>weekday="narrow"</code><sonic-date weekday="narrow" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>weekday="hidden"</code><sonic-date weekday="hidden" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>day="numeric"</code><sonic-date day="numeric" date_string="2026-06-05T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>month="long"</code><sonic-date month="long" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>month="narrow"</code><sonic-date month="narrow" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>month="numeric"</code><sonic-date month="numeric" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>month="2-digit"</code><sonic-date month="2-digit" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>year="2-digit"</code><sonic-date year="2-digit" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>hour="numeric"</code><sonic-date hour="numeric" date_string="2026-06-15T07:05:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>hour12</code><sonic-date hour12 date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>hour="hidden" minute="hidden"</code><sonic-date hour="hidden" minute="hidden" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+      <code>era="short"</code><sonic-date era="short" date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" language="en"></sonic-date>
+    </div>
   </template>
 </sonic-code>
 
-## Language  
+## Language
 
-<sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>
+With no `language`, the component follows `<html lang>` and updates when it changes. Pass a BCP 47 tag to force one.
 
 <sonic-code>
   <template>
-    <b>fr : </b>
-    <sonic-date language="fr" now></sonic-date>
-    <br>
-    <b>en : </b>
-    <sonic-date language="en" now></sonic-date>
-    <br>
-    <b>zh : </b>
-    <sonic-date language="zh" now></sonic-date>
-    <br>
-    <b>ja : </b>
-    <sonic-date language="ja" now></sonic-date>
+    <div class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      <code>en</code><sonic-date language="en" date_string="2026-06-15T09:00:00Z"></sonic-date>
+      <code>fr</code><sonic-date language="fr" date_string="2026-06-15T09:00:00Z"></sonic-date>
+      <code>ja</code><sonic-date language="ja" date_string="2026-06-15T09:00:00Z"></sonic-date>
+    </div>
   </template>
 </sonic-code>
 
-## Time_zone
-
-For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console
-
-<sonic-code>
-  <template>
-    <b>Europe/London : </b>
-    <sonic-date time_zone="Europe/London" now></sonic-date>
-    <br>
-    <b>Europe/Paris : </b>
-    <sonic-date time_zone="Europe/Paris" now></sonic-date>
-    <br>
-    <b>America/Tijuana : </b>
-    <sonic-date time_zone="America/Tijuana" now></sonic-date>
-  </template>
-</sonic-code>
+## Time zone
 
-## Era  
+With no `time_zone`, dates use the browser time zone. Pass an IANA name (`Intl.supportedValuesOf("timeZone")` lists them) to show local airport time.
 
 <sonic-code>
   <template>
-    <b>narrow : </b>
-    <sonic-date era="narrow" now></sonic-date>
-    <br>
-    <b>short : </b>
-    <sonic-date era="short" now></sonic-date>
-    <br>
-    <b>long : </b>
-    <sonic-date era="long" now></sonic-date>
+    <div class="grid gap-2">
+      <div>CN 001 departs CDG at <sonic-date date_string="2026-06-15T09:00:00Z" time_zone="Europe/Paris" weekday="hidden" language="en"></sonic-date> (Paris)</div>
+      <div>and lands at JFK at <sonic-date date_string="2026-06-15T12:45:00Z" time_zone="America/New_York" weekday="hidden" language="en"></sonic-date> (New York)</div>
+    </div>
   </template>
 </sonic-code>
 
-## .renderIf  
-
-<sonic-alert status="error" background>Deprecated</sonic-alert>
-
-<sonic-code>
-  <template>
-    <b>True statement : </b>
-    <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
-    <br>
-    <b>False statement : </b>
-    <sonic-date data-bind ::render-if="|10<2" now></sonic-date>
-  </template>
-</sonic-code>
+## Custom parts
 
-## DesignMode  
+A child `<template data-value="<part>">` wraps a part in your own markup: `weekday` · `day` · `month` · `year` · `hour` · `minute` · `literal`, plus `from` and `to` in ranges. An empty element receives the part value; a non-empty one replaces it. `designMode` drops the leading "from" word and the commas, for stacked layouts. Add `noShadowDom` so page styles reach the parts.
 
 <sonic-code>
   <template>
-    <div class="relative max-w-lg rounded-lg overflow-hidden">
-      <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
+    <div class="relative max-w-sm rounded-lg overflow-hidden">
       <sonic-date
         designMode
         noShadowDom
-        start_date= "1640265629"
-        end_date= "1640365629"
-        language= "fr"
-        wording_billet_periode_validite= "Du %s au %s"
-        year= "numeric"
-        month= "short"
-        weekday= "short"
-        hour= "2-digit"
-        minute= "2-digit"
-        class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
+        start_date_string="2026-06-15"
+        end_date_string="2026-06-22"
+        language="en"
+        wording_billet_periode_validite="From %s to %s"
+        class="absolute top-0 left-0 z-10 p-4 text-center text-sm text-white drop-shadow-lg"
       >
-        <template data-value="weekday">
-          <span class="hidden"></span>
-        </template>
-        <template data-value="day">
-          <span class="text-4xl block uppercase leading-none font-bold"></span>
-        </template>
-        <template data-value="month">
-          <span class="text-xl block uppercase leading-tight font-bold"></span>
-        </template>
-        <template data-value="year">
-          <span class="text-lg  mb-1 font-bold  block uppercase leading-tight "></span>
-        </template>
-        <template data-value="to">
-          <span class="font-medium block my-1 text-3xl leading-none">↓</span>
-        </template>
+        <template data-value="weekday"><span class="hidden"></span></template>
+        <template data-value="day"><span class="block text-4xl font-bold leading-none"></span></template>
+        <template data-value="month"><span class="block text-xl font-bold uppercase leading-tight"></span></template>
+        <template data-value="year"><span class="block text-lg font-bold leading-tight"></span></template>
+        <template data-value="to"><span class="block my-1 text-3xl leading-none">↓</span></template>
       </sonic-date>
-      <sonic-image 
-      ratio="1/1" src="https://picsum.photos/id/237/700/700">
-      </sonic-image>
+      <sonic-image src="img/concorde/plane_03.jpg" alt="Concorde specifications board" ratio="1/1" cover></sonic-image>
     </div>
   </template>
 </sonic-code>
 
+## API reference
+
+| Attribute | Values | Description |
+|-----------|--------|-------------|
+| `date` | number | Unix timestamp in seconds |
+| `date_string` | string | Date parsed with `new Date()`. Overrides `date` |
+| `start_date` / `start_date_string` | number / string | Range start. Overrides `date` |
+| `end_date` / `end_date_string` | number / string | Range end. Swapped with the start when earlier |
+| `now` | boolean | Uses the current date when no start is set |
+| `hide_hours` | boolean | Hides hours and minutes in a same-day range |
+| `weekday` | `narrow` · `short` · `long` · `hidden` (default `short`) | Weekday format |
+| `day` | `numeric` · `2-digit` (default `2-digit`) | Day format |
+| `month` | `numeric` · `2-digit` · `narrow` · `short` · `long` (default `short`) | Month format |
+| `year` | `numeric` · `2-digit` (default `numeric`) | Year format |
+| `hour` | `numeric` · `2-digit` · `hidden` (default `2-digit`) | Hour format |
+| `minute` | `numeric` · `2-digit` · `hidden` (default `2-digit`) | Minute format |
+| `hour12` | boolean | 12-hour clock. Default is 24-hour |
+| `era` | `narrow` · `short` · `long` | Shows the era. Hidden by default |
+| `language` | BCP 47 tag | Locale. Defaults to `<html lang>` |
+| `time_zone` | IANA name | Time zone. Defaults to the browser one |
+| `wording_billet_periode_validite` | string with two `%s` (default `Du %s au %s`) | Wording of a multi-day range |
+| `designMode` | boolean | Removes the "from" word and commas |
+| `noShadowDom` | boolean | Renders in light DOM so page styles apply to the parts |
+| `templates` | `HTMLTemplateElement[]` (property) | Part templates, instead of child `<template>` elements |
+| `renderIf` | boolean | Deprecated: wrap the date in [sonic-if](/core/components/functional/if) instead |
+
+No slots. Child `<template data-value>` elements customise the parts.