From 2b8c24f791cfac9c3439f2f0008098ab86548861 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 31 Oct 2026 01:30:31 +0000
Subject: [PATCH 1/2] The family's top line; the way to see it running is the
 samples

The header carries the five sites of CONVENTION.md section 1 (abap2UI5/
abap2UI5.github.io), For managers current; this site's own pages - Home,
FAQ, Community & Support - move to the row below, in front of the sections.
The primary button and every sample link go to the sample catalogue's own
site rather than the playground's editor; the counts give way to
"hundreds".

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014YZFmFjqqPw2HLYh1MvmaA
---
 src/layouts/Page.astro    | 35 +++++++++++++++++++++--------------
 src/pages/community.astro |  2 +-
 src/pages/faq.astro       |  2 +-
 src/pages/index.astro     |  8 ++++----
 src/styles/global.css     |  2 ++
 5 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 30df752..c32cbd8 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -66,24 +66,31 @@ const updated = new Date().toISOString().slice(0, 10);
 <a class="skip" href="#main">Skip to content</a>
 <header class="top">
   <div class="wrap">
-    <a class="mark" href={home}><img src={`${base}logo.png`} alt="" width="28" height="28"> abap2UI5</a>
-    <nav class="nav" aria-label="Pages">
-      <a href={home} aria-current={current === "home" ? "page" : undefined}>Home</a>
-      <a href={faq} aria-current={current === "faq" ? "page" : undefined}>FAQ</a>
-      <a href={community} aria-current={current === "community" ? "page" : undefined}>Community &amp; Support</a>
+    <a class="mark" href="https://abap2ui5.github.io/"><img src={`${base}logo.png`} alt="" width="28" height="28"> abap2UI5</a>
+    <!-- The family's top line (CONVENTION.md in abap2UI5/abap2UI5.github.io):
+         the five sites, this one current. The pages of this site are the
+         row below. -->
+    <nav class="nav sites" aria-label="abap2UI5 sites">
+      <a href={home} aria-current="page">For managers</a>
+      <a href="https://abap2ui5.github.io/docs/">Docs</a>
+      <a href="https://abap2ui5.github.io/samples-site/">Samples</a>
+      <a href="https://abap2ui5.github.io/playground/">Playground</a>
+      <a href="https://abap2ui5-addons.github.io/">Addons &amp; Tools</a>
     </nav>
     <div class="top-actions">
       <a class="icon-btn" href="https://www.linkedin.com/company/abap2ui5" aria-label="abap2UI5 on LinkedIn" title="LinkedIn"><svg viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5zM3 9h4v12H3zm7 0h3.8v1.7h.1c.5-1 1.8-2 3.7-2 4 0 4.7 2.6 4.7 6V21h-4v-5.5c0-1.3 0-3-1.8-3s-2.1 1.4-2.1 2.9V21h-4z"/></svg></a>
-      <a class="btn btn-primary" href="https://abap2ui5.github.io/playground/">Try it out</a>
+      <a class="btn btn-primary" href="https://abap2ui5.github.io/samples-site/">See it running</a>
     </div>
   </div>
-  {row.length > 0 && (
-    <nav class="subnav" aria-label="Sections">
-      <div class="wrap">
-        {row.map(([id, text]) => <a href={`#${id}`}>{text}</a>)}
-      </div>
-    </nav>
-  )}
+  <nav class="subnav" aria-label="Pages">
+    <div class="wrap">
+      <a href={home} aria-current={current === "home" ? "page" : undefined}>Home</a>
+      <a href={faq} aria-current={current === "faq" ? "page" : undefined}>FAQ</a>
+      <a href={community} aria-current={current === "community" ? "page" : undefined}>Community &amp; Support</a>
+      {row.length > 0 && <span class="sep" aria-hidden="true"></span>}
+      {row.map(([id, text]) => <a href={`#${id}`}>{text}</a>)}
+    </div>
+  </nav>
 </header>
 <main id="main">
   <slot />
@@ -93,7 +100,7 @@ const updated = new Date().toISOString().slice(0, 10);
     <span>abap2UI5 · MIT licensed · built in the open · page updated <time datetime={updated}>{updated}</time> · <a href="mailto:contact@abap2UI5.org">contact@abap2UI5.org</a></span>
     <nav aria-label="More">
       <a href="https://abap2ui5.github.io/docs/">Documentation</a>
-      <a href="https://abap2ui5.github.io/playground/samples/">Samples</a>
+      <a href="https://abap2ui5.github.io/samples-site/">Samples</a>
       <a href="https://abap2ui5.github.io/playground/">Playground</a>
       <a href="https://github.com/abap2UI5/abap2UI5">GitHub</a>
       <a href="https://abapgit.slack.com/join/shared_invite/zt-46tqufaht-QlrxTzlDqlx85CWbeUnOqg#/shared-invite/email">Slack</a>
diff --git a/src/pages/community.astro b/src/pages/community.astro
index 73ab876..16d9cf6 100644
--- a/src/pages/community.astro
+++ b/src/pages/community.astro
@@ -19,7 +19,7 @@ const support = [
   ["GitHub issues", `A bug, a question, a wish: open an <a href="${GITHUB}/issues">issue</a>. Anyone can, at any time, no account with the project needed; the answer stays public for the next person. Security reports are the one exception: not in a public issue, see <a href="${GITHUB}/blob/main/SECURITY.md">SECURITY.md</a>, acknowledged within three business days.`],
   ["Slack channel", `The abap2UI5 channel in the abapGit <a href="${SLACK}">Slack</a>: the quick question, the screenshot, the "has anyone done this". The people who run it in production read along and answer.`],
   ["Documentation", `The <a href="${DOCS}">manual</a>, from the quickstart to the reference, maintained with the framework rather than left to age; most questions have their page there already.`],
-  ["Transparency: the code and the samples", `Every line of the framework is on <a href="${GITHUB}">GitHub</a>, every test is public, and the <a href="https://abap2ui5.github.io/playground/samples/">sample catalogue</a> holds 130 learning samples and 680 control examples that run in the browser. When in doubt, read what it actually does.`],
+  ["Transparency: the code and the samples", `Every line of the framework is on <a href="${GITHUB}">GitHub</a>, every test is public, and the <a href="https://abap2ui5.github.io/samples-site/">sample catalogue</a> holds hundreds of samples that run in the browser. When in doubt, read what it actually does.`],
 ];
 const more = `Honestly, we hope it never comes to this. The goal is an ABAP team that is so much at home with abap2UI5 that support is as unnecessary as a support call for a selection screen or a transport into P. Most of the way there are the four channels above. But if you would feel better with somebody looking over the first screen, explaining a design or sitting next to you for a go-live, write to <a href="mailto:${MAIL}">${MAIL}</a> and we will see what makes sense. One request: do not ask for a glossy slide deck full of buzzwords. There is none here, and that is the point.`;
 /* What it stands on: the open-source foundations a reader can check. */
diff --git a/src/pages/faq.astro b/src/pages/faq.astro
index 564b279..c5623c6 100644
--- a/src/pages/faq.astro
+++ b/src/pages/faq.astro
@@ -28,7 +28,7 @@ const faq = [
   ]],
   ["Team and skills", [
     ["Our ABAP team is small and getting older. Can we take on a new UI technology?", "You are not taking one on. The UI is one more ABAP class, written by the people who write the rest, in the tools they use today, with UI5's controls learned from running examples in hours, not weeks. No JavaScript developer to hire in a market that has few, no full-stack profile to find, no training project before the real project. And an AI assistant writes a first version of such a class whole, which is exactly where a small team gains the most."],
-    ["How do our developers learn it, and how long does it take?", "From running examples, not from tutorials that aged. The catalogue holds 130 learning samples and 680 control examples, each one opens in the browser and each one is maintained with the framework, so none goes stale. The quickstart takes minutes: pull, one endpoint, the first screen is up. Within hours a developer builds a first real app, and within a week the screen your team needs this quarter, with the people who will maintain it. What a developer learns is UI5's controls and their properties, in ABAP, not a new language or a new toolchain."],
+    ["How do our developers learn it, and how long does it take?", "From running examples, not from tutorials that aged. The catalogue holds hundreds of samples, each one opens in the browser and each one is maintained with the framework, so none goes stale. The quickstart takes minutes: pull, one endpoint, the first screen is up. Within hours a developer builds a first real app, and within a week the screen your team needs this quarter, with the people who will maintain it. What a developer learns is UI5's controls and their properties, in ABAP, not a new language or a new toolchain."],
   ]],
   ["Landscape and tooling", [
     ["Do we need BTP for this?", "No. abap2UI5 runs on the ABAP system you already have, from NetWeaver 7.02 on, with no subscription beside it. If you run the BTP ABAP Environment or S/4HANA Cloud already, it runs there too, from the same source, so the decision about BTP stays yours and is not made for you by the UI."],
diff --git a/src/pages/index.astro b/src/pages/index.astro
index baa908c..422726c 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -158,7 +158,7 @@ const week = [
   ["Compare and decide", "Hold the time and the systems it needed against any alternative or vendor quote."],
 ];
 const doors = [
-  ["play", "Ten minutes, nothing installed", "Browse the example apps for the screen closest to yours, and change one in the playground.", `${PLAYGROUND}samples/`, "Example apps"],
+  ["play", "Ten minutes, nothing installed", "Browse the example apps for the screen closest to yours, and change one in the playground.", "https://abap2ui5.github.io/samples-site/", "Example apps"],
   ["code", "Minutes to install, hours to a first app", "Send a developer the Quickstart: pull, one endpoint, first screen; by the evening a first real app.", `${DOCS}get_started/quickstart`, "Quickstart"],
   ["chat", "A question, any time", "Write in the Slack channel, where the people who run it in production answer, or open a GitHub issue. Anyone, any time.", SLACK, "Slack"],
   ["partner", "More than a question", `A workshop, closer cooperation, a support arrangement: write to ${MAIL} and plan it together.`, `mailto:${MAIL}`, "Mail"],
@@ -191,9 +191,9 @@ const doors = [
       <div class="cards four">
         {useCases.map(([icon, h, t, cls, alt]) => (
           <div class="card shot">
-            <a class="shot-img" href={`${PLAYGROUND}samples/${cls}/`}><img src={`${base}apps/${cls}.webp`} alt={alt} loading="lazy"></a>
+            <a class="shot-img" href={`https://abap2ui5.github.io/samples-site/sample/${cls}/`}><img src={`${base}apps/${cls}.webp`} alt={alt} loading="lazy"></a>
             <Icon name={icon} /><h3>{h}</h3><p>{t}</p>
-            <a class="shot-link" href={`${PLAYGROUND}samples/${cls}/`}>See the example app</a>
+            <a class="shot-link" href={`https://abap2ui5.github.io/samples-site/sample/${cls}/`}>See the example app</a>
           </div>
         ))}
       </div>
@@ -204,7 +204,7 @@ const doors = [
         <figure class="device tablet"><div class="screen"><img src={`${base}apps/device-tablet.webp`} alt="The sales orders app on a tablet: the full table" loading="lazy"></div><figcaption><b>Tablet</b><span>At the machine, in the workshop, at the goods receipt: the full table, touch-sized.</span></figcaption></figure>
         <figure class="device desktop"><div class="screen"><img src={`${base}apps/device-desktop.webp`} alt="The sales orders app on a desktop: the full table with room to spare" loading="lazy"></div><figcaption><b>Desktop</b><span>The worklist and the cockpit at the desk, keyboard-driven, in the launchpad next to the Fiori apps.</span></figcaption></figure>
       </div>
-      <p class="more">→ Browse the <a href={`${PLAYGROUND}samples/`}>example apps</a> for the screen closest to yours: 130 learning samples and 680 control examples, each running in the browser and maintained with the framework. Or read <a href={`${DOCS}get_started/about`}>In a Nutshell</a> for how it works.</p>
+      <p class="more">→ Browse the <a href="https://abap2ui5.github.io/samples-site/">example apps</a> for the screen closest to yours: hundreds of them, each running in the browser and maintained with the framework. Or read <a href={`${DOCS}get_started/about`}>In a Nutshell</a> for how it works.</p>
     </div>
   </section>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index a552c99..633b158 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -102,6 +102,8 @@ code { font-family: var(--mono); font-size: .9em; }
 .subnav { border-top: 1px solid var(--line); background: var(--bg); }
 .subnav .wrap { display: flex; flex-wrap: nowrap; gap: 2px; height: 42px; align-items: center; overflow-x: auto; scrollbar-width: none; }
 .subnav .wrap::-webkit-scrollbar { display: none; }
+.subnav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
+.subnav .sep { flex: none; width: 1px; height: 18px; margin: 0 6px; background: var(--line); }
 .subnav a { flex: none; padding: 6px 10px; border-radius: 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; text-decoration: none; white-space: nowrap; }
 .subnav a:hover { color: var(--ink); background: var(--bg-alt); }
 .icon-btn { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--muted); }

From cb6e34e2830b371cfc315e64e46e94bff40340be Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 31 Oct 2026 01:47:33 +0000
Subject: [PATCH 2/2] The family's line wraps on a phone instead of scrolling

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_014YZFmFjqqPw2HLYh1MvmaA
---
 src/styles/global.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/styles/global.css b/src/styles/global.css
index 633b158..55a18cf 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -114,6 +114,8 @@ code { font-family: var(--mono); font-size: .9em; }
 .top .btn { padding: 0 14px; line-height: 36px; font-size: 14px; }
 @media (max-width: 1060px) {
   .nav { order: 4; flex: 1 0 100%; margin: 0 -24px; padding: 0 20px 8px; overflow-x: auto; scrollbar-width: none; }
+  /* the family's line wraps rather than scrolls: five names a thumb should see at once */
+  .nav.sites { flex-wrap: wrap; overflow: visible; row-gap: 0; }
   .nav::-webkit-scrollbar { display: none; }
   .nav a { flex: none; }
   html { scroll-padding-top: 150px; }