From a97f89c0b3c1ecc17680c5f89ad242c7fff487d9 Mon Sep 17 00:00:00 2001 From: 100gle Date: Fri, 9 Oct 2026 18:19:01 +0800 Subject: [PATCH 1/3] feat: implement Get Started section with installation commands and update landing page layout --- website/src/components/GetStarted.astro | 21 +++ website/src/components/Hero.astro | 174 ++---------------- .../src/components/ui/InstallCommand.astro | 110 ++++++----- website/src/data/landing-page.ts | 100 +++++++--- website/src/layouts/LandingLayout.astro | 4 +- website/src/pages/[...locale]/index.astro | 1 + 6 files changed, 176 insertions(+), 234 deletions(-) create mode 100644 website/src/components/GetStarted.astro diff --git a/website/src/components/GetStarted.astro b/website/src/components/GetStarted.astro new file mode 100644 index 00000000..6448cd95 --- /dev/null +++ b/website/src/components/GetStarted.astro @@ -0,0 +1,21 @@ +--- +import InstallCommand from '@/components/ui/InstallCommand.astro'; +import SectionHeading from '@/components/ui/SectionHeading.astro'; +import type { GetStartedData } from '@/data/landing-page'; + +type Props = GetStartedData; + +const { eyebrow, heading, description, install } = Astro.props; +--- + +
+
+
+ + +
+ +
+
+
+
diff --git a/website/src/components/Hero.astro b/website/src/components/Hero.astro index 475cba07..7b3548c4 100644 --- a/website/src/components/Hero.astro +++ b/website/src/components/Hero.astro @@ -1,7 +1,6 @@ --- import Contributors from '@/components/Contributors.astro'; import Icon from '@/components/ui/Icon.astro'; -import InstallCommand from '@/components/ui/InstallCommand.astro'; import LinkButton from '@/components/ui/LinkButton.astro'; import type { GitHubContributor } from '@/lib/github'; import { Code } from 'astro:components'; @@ -10,17 +9,10 @@ interface Props { badge?: string; title?: string; description?: string; - installCommands: { - posix: string; - windows: string; - }; - installPlatformLabel: string; - posixInstallLabel: string; - windowsInstallLabel: string; - copyInstallCommandLabel: string; - copiedInstallCommandLabel: string; primaryHref: string; primaryLabel?: string; + secondaryHref?: string; + secondaryLabel?: string; contributorsLabel?: string; contributors?: GitHubContributor[]; } @@ -29,14 +21,10 @@ const { badge, title, description, - installCommands, - installPlatformLabel, - posixInstallLabel, - windowsInstallLabel, - copyInstallCommandLabel, - copiedInstallCommandLabel, primaryHref, primaryLabel, + secondaryHref, + secondaryLabel, contributorsLabel, contributors = [], }: Props = Astro.props; @@ -61,136 +49,6 @@ class MyPlugin: prompt, model=state.get("model") ) return reply.text`; - -const heroCodeScopes = { - keyword: [ - 'keyword.control', - 'keyword.operator', - 'storage.type', - 'storage.modifier', - 'keyword.other.unit.python', - ], - decorator: [ - 'entity.name.function.decorator', - 'entity.name.function.decorator.python', - 'meta.annotation', - 'meta.annotation punctuation', - ], - functionName: [ - 'entity.name.function', - 'meta.function.python entity.name.function.python', - 'meta.function-call.generic.python', - ], - callable: [ - 'support.function', - 'support.function.builtin', - 'support.type.property-name', - 'meta.function-call.python', - ], - parameter: [ - 'variable.parameter', - 'variable.parameter.function.python', - 'meta.function-call.arguments.python', - ], - string: [ - 'string', - 'string.quoted', - 'comment.block.documentation', - 'punctuation.definition.string', - ], - punctuation: [ - 'punctuation', - 'meta.brace', - 'meta.delimiter', - 'entity.name.type', - ], -}; - -function createHeroCodeTheme(name, type, palette) { - return { - name, - type, - colors: { - 'editor.background': palette.background, - 'editor.foreground': palette.foreground, - }, - tokenColors: [ - { - settings: { - foreground: palette.foreground, - }, - }, - { - scope: heroCodeScopes.keyword, - settings: { - foreground: palette.keyword, - fontStyle: 'italic', - }, - }, - { - scope: heroCodeScopes.decorator, - settings: { - foreground: palette.decorator, - }, - }, - { - scope: heroCodeScopes.functionName, - settings: { - foreground: palette.functionName, - }, - }, - { - scope: heroCodeScopes.callable, - settings: { - foreground: palette.callable, - }, - }, - { - scope: heroCodeScopes.parameter, - settings: { - foreground: palette.parameter, - }, - }, - { - scope: heroCodeScopes.string, - settings: { - foreground: palette.string, - }, - }, - { - scope: heroCodeScopes.punctuation, - settings: { - foreground: palette.punctuation, - }, - }, - ], - }; -} - -const heroCodeThemes = { - light: createHeroCodeTheme('bub-hero-light', 'light', { - background: '#F6F7F9', - foreground: '#403F53', - keyword: '#8844AE', - decorator: '#3B61B0', - functionName: '#3B61B0', - callable: '#096E72', - parameter: '#096E72', - string: '#984E4D', - punctuation: '#111111', - }), - dark: createHeroCodeTheme('bub-hero-dark', 'dark', { - background: '#252525', - foreground: '#D6DEEB', - keyword: '#C792EA', - decorator: '#C5E478', - functionName: '#82AAFF', - callable: '#B2CCD6', - parameter: '#7FDBCA', - string: '#ECC48D', - punctuation: '#D9F5DD', - }), -}; ---
@@ -222,23 +80,16 @@ const heroCodeThemes = { )} -
- -
- -
+
{primaryLabel} - + {secondaryHref && ( + + {secondaryLabel} + + )}
@@ -252,10 +103,7 @@ const heroCodeThemes = { diff --git a/website/src/components/ui/InstallCommand.astro b/website/src/components/ui/InstallCommand.astro index d37d546a..e1094ae3 100644 --- a/website/src/components/ui/InstallCommand.astro +++ b/website/src/components/ui/InstallCommand.astro @@ -1,66 +1,70 @@ --- import Icon from '@/components/ui/Icon.astro'; +import type { InstallCommandData } from '@/data/landing-page'; +import { Code } from 'astro:components'; interface Props { - commands: { - posix: string; - windows: string; - }; - platformLabel: string; - posixLabel: string; - windowsLabel: string; - copyLabel: string; - copiedLabel: string; + install: InstallCommandData; } -const { commands, platformLabel, posixLabel, windowsLabel, copyLabel, copiedLabel } = Astro.props; -const installOptions = [ - { id: 'posix', label: posixLabel, command: commands.posix }, - { id: 'windows', label: windowsLabel, command: commands.windows }, -]; +const { install } = Astro.props; +const { platforms, copyLabel, copiedLabel } = install; + +// Both platform commands are rendered up front and toggled client-side, so +// switching never re-highlights anything — it only flips `hidden`. Seeding the +// copy target from the first platform keeps it defined before hydration. +const initialCommand = platforms[0]?.command ?? ''; ---
-
- {installOptions.map((option, index) => ( +
+ {platforms.map((platform, index) => ( ))}
-
+
- - {commands.posix} - +
+ {platforms.map((platform, index) => ( + + ))} +
+ diff --git a/website/src/pages/[...locale]/index.astro b/website/src/pages/[...locale]/index.astro index 60131cf3..17248264 100644 --- a/website/src/pages/[...locale]/index.astro +++ b/website/src/pages/[...locale]/index.astro @@ -38,6 +38,7 @@ const testimonials = { description={t('site.description')} ogImage={ogImage} hero={pageData.hero} + getStarted={pageData.getStarted} features={pageData.features} hookIntro={pageData.hookIntro} tapeModel={pageData.tapeModel} From b4e36ea2c5156bd2fdf492cd6bac4a32cb89b449 Mon Sep 17 00:00:00 2001 From: 100gle Date: Sat, 10 Oct 2026 10:24:32 +0800 Subject: [PATCH 2/3] wip --- website/src/components/GetStarted.astro | 9 +++----- .../src/components/ui/InstallCommand.astro | 23 ++----------------- 2 files changed, 5 insertions(+), 27 deletions(-) diff --git a/website/src/components/GetStarted.astro b/website/src/components/GetStarted.astro index 6448cd95..f6da819b 100644 --- a/website/src/components/GetStarted.astro +++ b/website/src/components/GetStarted.astro @@ -10,12 +10,9 @@ const { eyebrow, heading, description, install } = Astro.props;
-
- - -
- -
+ +
+
diff --git a/website/src/components/ui/InstallCommand.astro b/website/src/components/ui/InstallCommand.astro index e1094ae3..1c382157 100644 --- a/website/src/components/ui/InstallCommand.astro +++ b/website/src/components/ui/InstallCommand.astro @@ -9,17 +9,12 @@ interface Props { const { install } = Astro.props; const { platforms, copyLabel, copiedLabel } = install; - -// Both platform commands are rendered up front and toggled client-side, so -// switching never re-highlights anything — it only flips `hidden`. Seeding the -// copy target from the first platform keeps it defined before hydration. -const initialCommand = platforms[0]?.command ?? ''; ---
@@ -29,9 +24,8 @@ const initialCommand = platforms[0]?.command ?? ''; class:list={[ 'min-h-11 flex-1 cursor-pointer px-3 font-mono text-xs font-medium', 'text-muted-foreground transition-colors hover:bg-card/60 hover:text-foreground', - // Active tab: raised to --card and painted 1px taller so it covers the - // bar's bottom border and merges into the code surface below it. 'aria-pressed:relative aria-pressed:z-[1] aria-pressed:bg-card aria-pressed:text-foreground', + // Hide the border under the selected tab. 'aria-pressed:shadow-[0_1px_0_var(--card)]', 'focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-ring', index === 0 && 'border-r border-border', @@ -83,23 +77,10 @@ const initialCommand = platforms[0]?.command ?? '';