ui: fix overview-bar layout, wire About link, add install one-liner (#365)

JohnMcLear · claude · web-flow · commit ea34c39a2592 · 2026-04-17T12:16:40.000+01:00
* fix: align @fortawesome/* and react/react-dom versions so the build compiles

Two transitive version conflicts were breaking the Deploy etherpad docs
to GitHub Pages workflow:

1. \`@fortawesome/free-brands-svg-icons\` was pinned to \`^7.2.0\` while
   the other \`@fortawesome/*\` deps were \`^7.0.0\`. pnpm resolved two
   copies of \`@fortawesome/fontawesome-common-types\` (7.0.0 and 7.2.0),
   and the TypeScript build failed with \`Type 'IconDefinition' is not
   assignable to type 'IconProp'. ... Type '"fagt"' is not assignable
   to type 'IconPrefix'\`.
2. \`react\` was \`^19.2.4\` and \`react-dom\` was \`^19.2.0\`, so pnpm
   resolved them to different minors (19.2.4 and 19.2.0) and Next
   bailed out with "Incompatible React versions: The react and
   react-dom packages must have the exact same version".

Bump all four \`@fortawesome/*\` packages to \`^7.2.0\` and both \`react\`
/ \`react-dom\` to \`^19.2.5\` so pnpm resolves a single version of each.
\`pnpm run build\` now completes locally.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

* ui: fix overview-bar layout + wire About link + add install one-liner

Three related UI fixes on the home page and header.

1. \`.overview-bar\` items were single flex rows with icon + main text +
   subtitle all as siblings, so "290 Plugins extend without forking"
   (and the other three items) rendered with the subtitle inline next
   to the primary label instead of stacked underneath. Wrap the main
   text and subtitle in a \`flex-col\` so the subtitle drops below the
   label the way the rest of the design assumes.

2. The header's \`About\` link scrolled to a no-op \`&lt;a id="about"&gt;\`
   marker on the home page when it should have routed to the dedicated
   \`/about\` manifesto page. Use Next's \`&lt;Link href="/about"&gt;\`
   directly. Also route the logo back to \`/\` via \`&lt;Link&gt;\` so
   in-app navigation doesn't trigger a full page reload.

3. Replace the plain "Self-host in 5 minutes" link-to-README button
   with a new \`&lt;InstallOneLiner&gt;\` component: a tabbed Linux / macOS /
   Windows switcher that shows the Docker one-liner, a Copy button,
   and a link to the full install docs. The user can paste the command
   straight into a terminal without leaving the landing page.

Co-Authored-By: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;

---------

Co-authored-by: Claude Opus 4.7 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/src/components/InstallOneLiner.tsx b/src/components/InstallOneLiner.tsx
@@ -0,0 +1,83 @@
+'use client'
+import {useState} from "react";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faLinux, faApple, faWindows} from "@fortawesome/free-brands-svg-icons";
+import {faCopy, faCheck} from "@fortawesome/free-solid-svg-icons";
+
+type OS = 'linux' | 'mac' | 'windows';
+
+const ONE_LINERS: Record<OS, {label: string; command: string; icon: typeof faLinux}> = {
+    linux: {
+        label: 'Linux',
+        icon: faLinux,
+        command: 'docker run -d --name etherpad -p 9001:9001 etherpad/etherpad',
+    },
+    mac: {
+        label: 'macOS',
+        icon: faApple,
+        command: 'docker run -d --name etherpad -p 9001:9001 etherpad/etherpad',
+    },
+    windows: {
+        label: 'Windows',
+        icon: faWindows,
+        command: 'docker run -d --name etherpad -p 9001:9001 etherpad/etherpad',
+    },
+};
+
+export const InstallOneLiner = () => {
+    const [os, setOs] = useState<OS>('linux');
+    const [copied, setCopied] = useState(false);
+
+    const copy = async () => {
+        try {
+            await navigator.clipboard.writeText(ONE_LINERS[os].command);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 1500);
+        } catch {
+            // Clipboard unavailable — the command is still selectable in the <code>.
+        }
+    };
+
+    return <div className="mt-4 rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 overflow-hidden max-w-xl">
+        <div className="flex text-sm">
+            {(Object.keys(ONE_LINERS) as OS[]).map((key) => {
+                const active = os === key;
+                return <button
+                    key={key}
+                    type="button"
+                    onClick={() => setOs(key)}
+                    className={`flex-1 px-3 py-2 border-b-2 transition ${
+                        active
+                            ? 'border-primary text-primary bg-white dark:bg-gray-800'
+                            : 'border-transparent text-gray-600 dark:text-gray-300 hover:bg-white/60 dark:hover:bg-gray-800/50'
+                    }`}>
+                    <FontAwesomeIcon icon={ONE_LINERS[key].icon} className="mr-2"/>
+                    {ONE_LINERS[key].label}
+                </button>;
+            })}
+        </div>
+        <div className="flex items-center justify-between gap-2 p-3">
+            <code className="flex-1 text-sm font-mono break-all text-gray-800 dark:text-gray-100">
+                {ONE_LINERS[os].command}
+            </code>
+            <button
+                type="button"
+                onClick={copy}
+                className="shrink-0 px-2 py-1 text-sm text-primary hover:bg-primary hover:text-white rounded"
+                aria-label="Copy install command">
+                <FontAwesomeIcon icon={copied ? faCheck : faCopy} className="mr-1"/>
+                {copied ? 'Copied' : 'Copy'}
+            </button>
+        </div>
+        <p className="text-xs text-gray-500 dark:text-gray-400 px-3 pb-3">
+            Needs Docker. Then open <code>http://localhost:9001</code>.{' '}
+            <a
+                href="https://github.com/ether/etherpad-lite#installation"
+                target="_blank"
+                rel="noreferrer"
+                className="underline">
+                Other install options
+            </a>.
+        </p>
+    </div>;
+};
diff --git a/src/pagesToDisplay/Header.tsx b/src/pagesToDisplay/Header.tsx
@@ -6,28 +6,37 @@ import {faBars} from "@fortawesome/free-solid-svg-icons";
 import {MobileDrawer} from "../components/MobileDrawer.tsx";
 import {ThemeToggler} from "../components/ThemeToggler.tsx";
 import {useRouter} from "next/navigation";
+import Link from "next/link";
 import Image from "next/image";
 
 export const Header = () => {
     const [mobileDrawerOpen, setMobileDrawerOpen] = useState<boolean>(false)
     const navigate = useRouter()
 
+    // Scroll to an anchor on the home page. If the user is on a different
+    // route (e.g. /about), push back to the home page with the hash so the
+    // scroll-point element actually exists before we try to find it.
     const navigateToElement = (elementId: string)=>{
-        document.getElementById(elementId)?.scrollIntoView({block: "start", inline: "nearest"})
-        navigate.push('/#'+elementId)
+        const el = document.getElementById(elementId)
+        if (el) {
+            el.scrollIntoView({block: "start", inline: "nearest"})
+            navigate.push('/#'+elementId)
+        } else {
+            navigate.push('/#'+elementId)
+        }
     }
 
     return <><div id="header" className="text-white border-b-[1pt] border-solid border-[#efefef] p-4 w-full bg-white dark:bg-secondary-dark">
         <div className="wrap flex items-center justify-self-center">
-            <a href="#">
+            <Link href="/">
                 <Suspense>
                 <Image className="logo h-8 image-logo" src={brandSvg} alt="etherpad logo"/>
                 </Suspense>
-            </a>
+            </Link>
 
             <div id="nav">
                 <ul>
-                    <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('about')} title="about">About</a></li>
+                    <li><Link className="text-[#555] dark:text-white" href="/about" title="about">About</Link></li>
                     <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('download')} title="download">Download</a></li>
                     <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement('contribute')} title="contribute">Contribute</a></li>
                     <li><a className="text-[#555] dark:text-white" onClick={()=>navigateToElement("links")} title="links">Links</a></li>
diff --git a/src/pagesToDisplay/MainHeadline.tsx b/src/pagesToDisplay/MainHeadline.tsx
@@ -3,6 +3,7 @@ import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faCogs, faLanguage, faServer, faUsers} from "@fortawesome/free-solid-svg-icons";
 import {Suspense} from "react";
 import Link from "next/link";
+import {InstallOneLiner} from "../components/InstallOneLiner.tsx";
 export const MainHeadline = () => {
     return <div className="content primary showcase">
         <div className="wrap">
@@ -15,8 +16,9 @@ export const MainHeadline = () => {
             <div className="flex flex-wrap gap-3 mb-6">
                 <Link href="/about" className="px-4 py-2 bg-primary text-white rounded hover:opacity-90">Read the manifesto &rarr;</Link>
                 <Link href="/why-etherpad" className="px-4 py-2 border border-primary text-primary rounded hover:bg-primary hover:text-white">Why Etherpad &rarr;</Link>
-                <a href="https://github.com/ether/etherpad-lite#installation" target="_blank" className="px-4 py-2 border border-primary text-primary rounded hover:bg-primary hover:text-white">Self-host in 5 minutes &rarr;</a>
             </div>
+
+            <InstallOneLiner/>
         </div>
 
         <div className="demo justify-center flex">
@@ -32,23 +34,31 @@ export const MainHeadline = () => {
         <div className="overview-bar dark:bg-gray-600 dark:text-white">
             <div className="item">
                 <FontAwesomeIcon icon={faCogs} className="mr-2"/>
-                <Link href="/plugins" target="_blank" className="underline">290 Plugins</Link>
-                <span className="block text-sm opacity-75">extend without forking</span>
+                <div className="flex flex-col leading-tight">
+                    <Link href="/plugins" target="_blank" className="underline">290 Plugins</Link>
+                    <span className="text-sm opacity-75">extend without forking</span>
+                </div>
             </div>
             <div className="item">
                 <FontAwesomeIcon icon={faLanguage} className="mr-2"/>
-                105 Languages
-                <span className="block text-sm opacity-75">translated by a global community</span>
+                <div className="flex flex-col leading-tight">
+                    <span>105 Languages</span>
+                    <span className="text-sm opacity-75">translated by a global community</span>
+                </div>
             </div>
             <div className="item">
                 <FontAwesomeIcon icon={faServer} className="mr-2"/>
-                Thousands of Instances
-                <span className="block text-sm opacity-75">Raspberry Pis to data centres</span>
+                <div className="flex flex-col leading-tight">
+                    <span>Thousands of Instances</span>
+                    <span className="text-sm opacity-75">Raspberry Pis to data centres</span>
+                </div>
             </div>
             <div className="item">
                 <FontAwesomeIcon icon={faUsers} className="mr-2"/>
-                Millions of Users
-                <span className="block text-sm opacity-75">Wikimedia, governments, schools</span>
+                <div className="flex flex-col leading-tight">
+                    <span>Millions of Users</span>
+                    <span className="text-sm opacity-75">Wikimedia, governments, schools</span>
+                </div>
             </div>
         </div>
     </div>
