The family's top line; the way to see it running is the samples

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>

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. */

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."],

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>
 

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); }
@@ -112,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; }