From 3f4fd58937538cd0588432abef5a24baf488a9e7 Mon Sep 17 00:00:00 2001 From: Jane <522700967@qq.com> Date: Fri, 29 May 2026 13:59:24 +0800 Subject: [PATCH] feat(landing-page): surface Discord + X in header, restructure site footer (#3230) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(landing-page): surface Discord + X in header, restructure site footer Two related public-chrome adjustments: - **Header gains compact Discord + X icon buttons.** Both community channels were previously buried in the footer, so the typical visitor never saw them on a page-deep scroll. They now sit before the Download / Star CTAs in `nav-side`, share the ghost-button outline language, and stay icon-only with `aria-label` so they read as social affordances rather than competing with the text CTAs. At ≤1080px the icon buttons hide alongside the existing ghost CTA, so the bar still collapses cleanly into the hamburger panel — Star stays in the bar at every breakpoint. - **Footer restructured into 4 columns: Products / Plugins / Resources / Connect.** The old `Plugins / Open Design / Connect` three-column layout muddled three different things — sister products, the artifact catalogue, and contributor channels — under one roof, so visitors hunting for "the other thing this team makes" had nowhere obvious to go. - **Products** (new) lists the team's apps: Open Design (links to homepage) and HTML Anything. Two entries by design — adding more products without an editorial pass would dilute the column. - **Plugins** mirrors the topbar `Plugins` dropdown verbatim: Templates / Skills / Systems / Craft, with no count prefix on Systems / Craft so it reads identically to the nav. - **Resources** (renamed from `Open Design`) carries the docs-style links: Official source / Quickstart / Agents locaux / Compare / Claude Design alternative. The old column heading was confusing because the OD logo + brand name already sit under the column. - **Connect** gains an X / Twitter row pointing at `@nexudotio`. The brand entries on this column are contributor / community surfaces only — code, releases, chat, social, RSS, contact form. Implementation: - `_components/header.tsx` — `DISCORD` and `X_TWITTER` consts at the top alongside `REPO`. Two `` blocks with inline SVG before the existing Download / Star CTAs. - `_components/site-footer.astro` — `HTML_ANYTHING` and `NEXU_IO` consts. `
` re-ordered to put Products first, Plugins second (no longer carries `counts.*` values), Resources third, Connect fourth (with the new X / Twitter row). - `globals.css` — `.nav-icon` rule cloned from the ghost CTA's visual language (transparent + 1px line, fills on hover) but square (36×36 round) so it reads as a social-icon affordance. Added `display: none` for `.nav-side .nav-icon` to the existing ≤1080px and ≤880px media queries so the icons follow the same collapse behaviour as the Download CTA. - `sub-pages.css` — `.sub-footer-grid` switches from `1.6fr 1fr 1fr 1fr` to `1.4fr 1fr 1fr 1fr 1fr` (brand + 4 columns). At ≤1080px it falls back to a 3-column shape so each column has room to breathe; at ≤720px it stays a single column (existing behaviour). - `i18n.ts` — adds `products`, `resources`, `xTwitter`, `sisterProjects`, `htmlAnything`, `nexuIo` to `LandingUiCopy.footer` (the last three are kept around even though `sisterProjects` is no longer rendered after the column was renamed Products — they're harmless and avoid churning the type if a future iteration brings the Sister-projects framing back). All 17 non-English landing locales gain translations for the new keys via the existing `LOCALIZED_LANDING_FOOTER_COPY` map (and the `LANDING_UI_COPY_OVERRIDES` block for `zh` / `zh-tw`). Translations were generated with `claude-haiku-4-5` over OpenRouter, with explicit instructions to keep "Open Design", "HTML Anything", and "X / Twitter" in English and to render "Products" / "Resources" in sentence case per locale convention. Spot-checked against rendered pages on `/zh/`, `/zh-tw/`, `/ja/`, `/ko/`, `/de/`, `/fr/` (and `/ar/` for RTL) for natural phrasing. Validation: `pnpm --filter @open-design/landing-page typecheck` -> 0 errors / 0 warnings; local dev server smoke-tested on en root (`/html-anything/`) and 5 locale variants (`/zh/`, `/zh-tw/`, `/ja/`, `/de/`, `/fr/`) — header renders 2 nav-icon buttons, footer renders 4 localized column headings in the correct order with the right link targets. * fix(landing-page): address PR #3230 review — locale-aware HTML Anything link + drop unused const Two non-blocking inline review points from @PerishCode on PR #3230: - The HTML Anything entry in the new Products column hardcoded `https://open-design.ai/html-anything/` via a top-level `HTML_ANYTHING` const, but `/html-anything/` is a real localized route in this app (`pages/[locale]/html-anything/index.astro`) and `open-design.ai` is the same site's live domain. A visitor on `/zh/…` clicking through landed on the English route and lost locale context, and hardcoding the production domain meant a preview build would surface a link that bounces visitors back to prod. Switch to `href('/html-anything/')` so the locale prefix + the current site's domain (resolved by `localizedHref`) are honored, matching every other footer link. - `NEXU_IO` was declared at the top of the component but never referenced — leftover from an earlier iteration that listed `nexu.io` as a Sister-projects entry before the column was renamed Products and reduced to OD + HTML Anything. Removed. No behavior change beyond the locale routing fix; the i18n keys and column structure stay as they landed in the original commit. * fix(landing-page): correct nav-icon comment to match actual responsive behaviour The JSX comment introduced for the new Discord + X icon buttons in PR #3230 claimed the icons "survive at narrow widths while text-only nav items get pushed off". The CSS that shipped in the same PR does the opposite: both `@media (max-width: 1080px)` and `@media (max-width: 880px)` blocks add `.nav-side .nav-icon { display: none; }`, so at narrow widths the icons collapse alongside the ghost Download CTA while the text nav
+ {/* + Discord + X icon buttons live before Download / Star so the + community channels are reachable from every page without + burning a nav text slot. The icons are aria-labeled and + otherwise unlabeled. At ≤1080px they collapse alongside the + ghost Download CTA and the text-only nav
+
+
{ui.footer.products}
+ +
{copy.nav.plugins}
-
{ui.footer.openDesign}
+
{ui.footer.resources}
diff --git a/apps/landing-page/app/globals.css b/apps/landing-page/app/globals.css index 167fe2216..cdb3166f2 100644 --- a/apps/landing-page/app/globals.css +++ b/apps/landing-page/app/globals.css @@ -606,6 +606,34 @@ body::before { align-items: center; gap: 18px; } +/* + * Compact icon-only chrome buttons for community-channel links + * (Discord, X) sitting beside the Download / Star CTAs. They share + * the ghost-button outline language but stay square so they read as + * social affordances and don't compete with the text CTAs. + */ +.nav-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: 50%; + border: 1px solid rgba(21, 20, 15, 0.18); + color: var(--ink); + background: transparent; + text-decoration: none; + transition: background 160ms ease, border-color 160ms ease, color 160ms ease; + flex-shrink: 0; +} +.nav-icon:hover { + background: var(--ink); + border-color: var(--ink); + color: var(--paper); +} +.nav-icon svg { + display: block; +} .nav-cta { display: inline-flex; align-items: center; @@ -2470,8 +2498,9 @@ footer { @media (max-width: 1080px) { .nav-toggle { display: inline-flex; } .brand { white-space: nowrap; } - /* Hide Download from the bar (Star stays). */ + /* Hide Download + Discord/X icon buttons from the bar (Star stays). */ .nav-side .nav-cta.ghost { display: none; } + .nav-side .nav-icon { display: none; } /* Collapse the nav