From 5b0dfaad996a64eeeab2e3258480847bde62dc57 Mon Sep 17 00:00:00 2001 From: Oliver Kieselbach Date: Thu, 1 Oct 2026 13:13:33 +0200 Subject: [PATCH] Landing shows the GitHub star count and a customer quote The navbar gets a "Star" pill with the repository's star count from sm up; phones keep the bare GitHub mark. A new section before the closing CTA shows one customer quote with a star ask underneath. The footer's "Star us on GitHub" line is gone, so the page asks twice, not three times. The count is read once per web deploy (deploy-web.yml, own step, job token only there) and inlined by next build as NEXT_PUBLIC_GITHUB_STARS, so visitors' browsers never contact GitHub and the CSP stays as it is. Without a value the pill renders without a counter (D-303). The desktop links, bell and sign-in now start at lg instead of md: the bar already overflowed between 768 and ~1000 px and the pill widened it further. Co-Authored-By: Claude Opus 5.5 (1M context) --- .github/workflows/deploy-web.yml | 19 +++++++ src/Web/autopilot-monitor-web/app/globals.css | 4 ++ src/Web/autopilot-monitor-web/app/page.tsx | 2 + .../components/GitHubIcon.tsx | 8 +++ .../components/GitHubStarLink.tsx | 36 ++++++++++++ .../components/SiteFooter.tsx | 23 ++------ .../components/landing/LandingNavbar.tsx | 44 ++++++++------- .../components/landing/Testimonials.tsx | 56 +++++++++++++++++++ .../utils/__tests__/githubStars.test.ts | 52 +++++++++++++++++ .../utils/githubStars.ts | 31 ++++++++++ 10 files changed, 237 insertions(+), 38 deletions(-) create mode 100644 src/Web/autopilot-monitor-web/components/GitHubIcon.tsx create mode 100644 src/Web/autopilot-monitor-web/components/GitHubStarLink.tsx create mode 100644 src/Web/autopilot-monitor-web/components/landing/Testimonials.tsx create mode 100644 src/Web/autopilot-monitor-web/utils/__tests__/githubStars.test.ts create mode 100644 src/Web/autopilot-monitor-web/utils/githubStars.ts diff --git a/.github/workflows/deploy-web.yml b/.github/workflows/deploy-web.yml index 6850acc6..27d7b494 100644 --- a/.github/workflows/deploy-web.yml +++ b/.github/workflows/deploy-web.yml @@ -78,6 +78,23 @@ jobs: working-directory: ${{ env.WEB_DIR }} run: npm ci + # Star counter for the GitHub star link (utils/githubStars.ts). Baked into the static HTML + # so visitors' browsers never call GitHub; stale until the next web deploy. The token stays + # in this step, never in the build. Fail-soft: without a number the link has no counter. + - name: Read GitHub star count (fail-soft) + id: stars + env: + GH_TOKEN: ${{ github.token }} + REPO: ${{ github.repository }} + run: | + count=$(gh api "repos/$REPO" --jq .stargazers_count 2>/dev/null || true) + if [[ "$count" =~ ^[0-9]+$ ]]; then + echo "count=$count" >> "$GITHUB_OUTPUT" + echo "GitHub stars: $count" + else + echo "::warning::GitHub star count unavailable - the star link renders without a counter" + fi + # next.config output:'export' -- `next build` writes the static site to out/ # (prebuild: sync-error-codes, generate-lastmod, generate-version, whats-new). - name: Build @@ -98,6 +115,8 @@ jobs: GITHUB_SHA: ${{ github.sha }} # Docs checkout for public/whats-new.json; the prebuild fails in CI without it. WHATS_NEW_DOCS_DIR: ${{ github.workspace }}/whats-new-docs + # Star counter from the step above; empty when the lookup failed. + NEXT_PUBLIC_GITHUB_STARS: ${{ steps.stars.outputs.count }} run: | npm run build test -f out/version.json || { echo "out/version.json missing - export did not run"; exit 1; } diff --git a/src/Web/autopilot-monitor-web/app/globals.css b/src/Web/autopilot-monitor-web/app/globals.css index 40754767..03ba9986 100644 --- a/src/Web/autopilot-monitor-web/app/globals.css +++ b/src/Web/autopilot-monitor-web/app/globals.css @@ -49,6 +49,8 @@ html { --lp-warn: #d97706; --lp-warn-soft: rgba(217, 119, 6, 0.1); --lp-danger: #dc2626; + /* GitHub star glyph only (GitHubStarLink) — never text or a fill */ + --lp-star: #eab308; /* Terminal is dark in both themes */ --lp-term-bg: #0d1424; --lp-term-line: #22304a; @@ -73,6 +75,7 @@ html { --lp-warn: #f5a623; --lp-warn-soft: rgba(245, 166, 35, 0.12); --lp-danger: #f87171; + --lp-star: #facc15; } body { @@ -762,6 +765,7 @@ html.auth-pending .landing-v2::after { --lp-warn: #d97706; --lp-warn-soft: rgba(217, 119, 6, 0.1); --lp-danger: #dc2626; + --lp-star: #eab308; } /* Neutralize the global .dark utility overrides inside the light-only diff --git a/src/Web/autopilot-monitor-web/app/page.tsx b/src/Web/autopilot-monitor-web/app/page.tsx index ac9b5d41..f14de38a 100644 --- a/src/Web/autopilot-monitor-web/app/page.tsx +++ b/src/Web/autopilot-monitor-web/app/page.tsx @@ -7,6 +7,7 @@ import { Story } from "../components/landing/Story"; import { CapabilitiesStrip } from "../components/landing/CapabilitiesStrip"; import { Comparison } from "../components/landing/Comparison"; import { HowItWorks } from "../components/landing/HowItWorks"; +import { Testimonials } from "../components/landing/Testimonials"; import { FinalCta } from "../components/landing/FinalCta"; import { SiteFooter } from "../components/SiteFooter"; @@ -29,6 +30,7 @@ export default function LandingPage() { + diff --git a/src/Web/autopilot-monitor-web/components/GitHubIcon.tsx b/src/Web/autopilot-monitor-web/components/GitHubIcon.tsx new file mode 100644 index 00000000..4502207f --- /dev/null +++ b/src/Web/autopilot-monitor-web/components/GitHubIcon.tsx @@ -0,0 +1,8 @@ +/** The GitHub mark (Octicon), inherits the text color. */ +export function GitHubIcon({ className = "w-4 h-4" }: { className?: string }) { + return ( + + ); +} diff --git a/src/Web/autopilot-monitor-web/components/GitHubStarLink.tsx b/src/Web/autopilot-monitor-web/components/GitHubStarLink.tsx new file mode 100644 index 00000000..9e4c5a28 --- /dev/null +++ b/src/Web/autopilot-monitor-web/components/GitHubStarLink.tsx @@ -0,0 +1,36 @@ +import { GITHUB_REPO_URL, GITHUB_STARS, formatStarCount } from "@/utils/githubStars"; +import { GitHubIcon } from "./GitHubIcon"; + +/** + * "Star us" pill for the public surface: [GitHub mark] label │ ★ count. + * The counter segment only renders when the deploy baked a star count in (utils/githubStars.ts). + * No hooks, so server components (Testimonials) and client components (LandingNavbar) share it. + */ +export function GitHubStarLink({ label }: { label: string }) { + return ( + + + + {label} + + {GITHUB_STARS !== null && ( + + + {formatStarCount(GITHUB_STARS)} + + )} + + ); +} diff --git a/src/Web/autopilot-monitor-web/components/SiteFooter.tsx b/src/Web/autopilot-monitor-web/components/SiteFooter.tsx index c561deb2..91b4f945 100644 --- a/src/Web/autopilot-monitor-web/components/SiteFooter.tsx +++ b/src/Web/autopilot-monitor-web/components/SiteFooter.tsx @@ -1,5 +1,7 @@ import { DOCS_URL } from "@/utils/config"; +import { GITHUB_REPO_URL } from "@/utils/githubStars"; import { BrandMark } from "./BrandMark"; +import { GitHubIcon } from "./GitHubIcon"; const LINK_COLUMNS = [ { @@ -17,7 +19,7 @@ const LINK_COLUMNS = [ { label: "Documentation", href: DOCS_URL, external: true }, { label: "Help & Support", href: "/help" }, { label: "Feedback", href: "https://github.com/okieselbach/AutopilotMonitor/issues", external: true }, - { label: "GitHub", href: "https://github.com/okieselbach/AutopilotMonitor", external: true }, + { label: "GitHub", href: GITHUB_REPO_URL, external: true }, ], }, { @@ -71,15 +73,13 @@ export function SiteFooter() { - - - + @@ -110,22 +110,11 @@ export function SiteFooter() { {/* Bottom bar */} -
+

© 2026 Autopilot Monitor. Built with ❤️ by Oliver Kieselbach.{" "} Hosted on Azure by glueckkanja AG.

-

- Open source. Star us on{" "} - - GitHub - -

diff --git a/src/Web/autopilot-monitor-web/components/landing/LandingNavbar.tsx b/src/Web/autopilot-monitor-web/components/landing/LandingNavbar.tsx index 1979f588..ef6bb40d 100644 --- a/src/Web/autopilot-monitor-web/components/landing/LandingNavbar.tsx +++ b/src/Web/autopilot-monitor-web/components/landing/LandingNavbar.tsx @@ -6,6 +6,9 @@ import { useAuth } from "../../contexts/AuthContext"; import { getPortalLoginUrl, shouldCrossOriginToPortal } from "../../lib/hostRouting"; import { DOCS_URL } from "@/utils/config"; import { BrandMark } from "../BrandMark"; +import { GitHubIcon } from "../GitHubIcon"; +import { GitHubStarLink } from "../GitHubStarLink"; +import { GITHUB_REPO_URL } from "@/utils/githubStars"; import { useWhatsNew } from "@/hooks/useWhatsNew"; // Root-anchored (/#…) so the links also work from subpages @@ -18,14 +21,6 @@ const NAV_LINKS = [ { href: DOCS_URL, label: "Docs", external: true }, ]; -function GitHubIcon({ className }: { className?: string }) { - return ( - - - - ); -} - function BellIcon({ className }: { className?: string }) { // Ringing bell: the public site announces "there is news" without claiming a count — // anonymous visitors have no seen mark, so a counter would read 9+ for everyone. @@ -78,16 +73,18 @@ export function LandingNavbar() { // see components/NavLink.tsx.) return (