From e19c3f86c41f18dfd1af5adca3fc6a9d8b1316b6 Mon Sep 17 00:00:00 2001
From: Abdessamad Derraz <3028866+Abdess@users.noreply.github.com>
Date: Fri, 23 Oct 2026 10:47:05 +0200
Subject: [PATCH] fix: title logo plate and footer licence

The title mark sits on the tiles' white 40 px square with its width written, so a black logo stays visible in the dark theme. A setup with no logo shows its initials. The level label is dropped on a tab's own page. The footer licence line now matches LICENSE.
---
 website/src/components/Footer.astro    |  2 +-
 website/src/components/PageTitle.astro | 48 ++++++++++++++++++++------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/website/src/components/Footer.astro b/website/src/components/Footer.astro
index a038c1c6..e96db4d8 100644
--- a/website/src/components/Footer.astro
+++ b/website/src/components/Footer.astro
@@ -29,7 +29,7 @@ const date = releaseDate(tag);
 		Packs from release <a href={`${REPO}/releases/tag/${tag}`}>{tag}</a>{date && <>, <time datetime={tag.slice(1).replaceAll('.', '-')}>{date}</time></>}.
 	</p>
 	<p class="rb-copyright">
-		MIT for the tooling. BIOS and firmware files are third-party system software, preserved for personal backup,
+		MIT for the tooling and metadata. BIOS and firmware files are third-party system software, preserved for personal backup,
 		archival and interoperability.
 	</p>
 </div>
diff --git a/website/src/components/PageTitle.astro b/website/src/components/PageTitle.astro
index c0dd8d4d..168949b3 100644
--- a/website/src/components/PageTitle.astro
+++ b/website/src/components/PageTitle.astro
@@ -1,9 +1,16 @@
 ---
 // Breadcrumbs, the level label and the title. The trail says which tab a
-// deep page belongs to; the label says who the page is written for, and is
-// left out where the first crumb already names that tab. A page with a
-// `logo` (a path under the site root) shows it beside its title.
+// deep page belongs to, and the label says who the page is written for. The
+// label is left out where the header tab already says it: on a tab's own
+// page, and where the first crumb names that tab. A page with a `logo` (a
+// path under the site root) shows it beside its title, on a white square so
+// a dark mark stays visible in the dark theme. A setup page with no logo file
+// gets its initials in the same square, as its tile does (sitemarkup.py
+// platform_tiles).
+import setups from '../../public/data/picker/index.json';
+
 const PAGE_TITLE_ID = '_top';
+const MARK = 40;
 
 const LABELS = {
 	start: 'Start here',
@@ -22,11 +29,19 @@ const TABS = {
 	contribute: 'Contribute',
 } as const;
 
-const { title, level, logo } = Astro.locals.starlightRoute.entry.data;
+// Up to two capitals of a name: MyMinUI is MM (sitemarkup.initials).
+const initials = (name: string): string => {
+	const capitals = [...name].filter((c) => c !== c.toLowerCase());
+	return capitals.slice(0, 2).join('') || name.slice(0, 2).toUpperCase();
+};
+
+const { id, data } = Astro.locals.starlightRoute.entry;
+const { title, level, logo } = data;
 const crumbs = Astro.locals.rbBreadcrumbs ?? [];
-const badge = level && crumbs[0]?.label !== TABS[level] && crumbs[0]?.label !== LABELS[level];
+const badge = level && crumbs.length > 0 && crumbs[0].label !== TABS[level] && crumbs[0].label !== LABELS[level];
 const base = import.meta.env.BASE_URL.replace(/\/?$/, '/');
 const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
+const setup = !logoSrc && setups.find((entry) => id === `platforms/${entry.platform}`);
 ---
 
 {
@@ -42,9 +57,17 @@ const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
 }
 {badge && <span class={`rb-level rb-level-${level}`}>{LABELS[level]}</span>}
 {
-	logoSrc ? (
+	logoSrc || setup ? (
 		<div class="rb-title-logo">
-			<img src={logoSrc} alt="" height="40" />
+			{logoSrc ? (
+				<img class="rb-title-mark" src={logoSrc} alt="" width={MARK} height={MARK} />
+			) : (
+				<svg class="rb-title-mark" viewBox="0 0 40 40" width={MARK} height={MARK} aria-hidden="true">
+					<text x="20" y="25" text-anchor="middle" font-size="14" font-weight="700" fill="#2b2e5c">
+						{initials(setup.name)}
+					</text>
+				</svg>
+			)}
 			<h1 id={PAGE_TITLE_ID}>{title}</h1>
 		</div>
 	) : (
@@ -67,11 +90,16 @@ const logoSrc = logo && (/^(https?:)?\//.test(logo) ? logo : base + logo);
 		margin-top: 0.25rem;
 	}
 	.rb-title-logo h1 { margin-top: 0; }
-	.rb-title-logo img {
+	/* The tiles' square: white in both themes, a hairline, the mark inside. */
+	.rb-title-mark {
 		flex: none;
-		width: auto;
+		box-sizing: border-box;
+		width: 40px;
 		height: 40px;
-		max-width: 8rem;
+		padding: 3px;
+		border: 1px solid var(--rb-border);
+		border-radius: 6px;
+		background: #fff;
 		object-fit: contain;
 	}
 </style>