refactor(website): cut the stock patterns out of the design
Audited against the AI-design catalog. The world stays — the terminal aesthetic, the oxide accent, IBM Plex Mono are all chosen, and the audit cleared them. What went is the handful of defaults that had crept in underneath it. Eight feature cards at identical weight said every feature mattered equally. Search is what the client is for, so it takes a double-width cell and the grid drops to three up; eight cards plus that one double still comes out square. Each glyph sat in a 34px bordered square — the stock icon-in-a-chip treatment that ships with every component library. The glyphs are the real TUI's, so they now sit inline like the prompt markers they are. Callouts lose the coloured left rule. The catalog puts it plainly: a coloured left border is about as reliable a sign of generated design as an em-dash is in prose. The tone already lives in the label, which was saying the same thing twice. Thirteen arrow glyphs were typed into labels and link text. The leaving-the-site mark belongs to the control, not the copy, so Button draws it once, aria-hidden, and only when the link actually leaves. The "read more" arrows on internal links were pure flourish and are gone. The hero also drops "blazingly fast Rust", which TONE-OF-VOICE.md lists under banned, no exceptions.
This commit is contained in:
Michel de Graaf
@@ -54,7 +54,10 @@ export const Nav = () => (
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex h-[38px] items-center gap-1.5 rounded-md border border-hairline px-2.5 font-mono text-xs text-secondary hover:border-line hover:bg-[var(--bg-selection)] hover:text-primary sm:h-8"
|
||||
>
|
||||
GitHub <span aria-hidden="true">↗</span>
|
||||
GitHub
|
||||
<span aria-hidden="true" className="text-[0.85em] opacity-60">
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
@@ -38,6 +38,11 @@ const isExternal = (href: string): boolean => /^https?:\/\//.test(href)
|
||||
* rather than a `<button>`. External links open in a new tab and carry
|
||||
* `rel="noopener"`; internal ones route through React Router so navigation
|
||||
* stays client-side.
|
||||
*
|
||||
* The leaving-the-site mark is drawn by the component, never typed into a
|
||||
* label. Hand-written "GitHub ↗" put the same glyph in thirteen strings and
|
||||
* made it copy — it belongs to the control, so the control renders it, once,
|
||||
* and only when the link actually leaves.
|
||||
*/
|
||||
export const Button = ({ href, variant, size, children, className }: ButtonProps) => {
|
||||
const classes = cn(buttonVariants({ variant, size }), className)
|
||||
@@ -46,6 +51,9 @@ export const Button = ({ href, variant, size, children, className }: ButtonProps
|
||||
return (
|
||||
<a href={href} target="_blank" rel="noopener noreferrer" className={classes}>
|
||||
{children}
|
||||
<span aria-hidden="true" className="text-[0.85em] opacity-60">
|
||||
↗
|
||||
</span>
|
||||
</a>
|
||||
)
|
||||
|
||||
|
||||
@@ -61,15 +61,18 @@ export const FeatureCard = ({
|
||||
className,
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{/* The glyph sits in the line like a prompt marker, not in a chip. A
|
||||
tinted rounded square around an icon is the stock feature-card
|
||||
treatment; here the terminal already gives us a better idiom. */}
|
||||
<div className="flex items-center gap-2.5">
|
||||
{glyph !== undefined && (
|
||||
<div
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="flex size-[34px] shrink-0 items-center justify-center rounded-md border border-hairline text-xl leading-none"
|
||||
className="shrink-0 text-lg leading-none"
|
||||
style={color !== undefined ? { color } : undefined}
|
||||
>
|
||||
{glyph}
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
<div className="text-[15px] font-medium text-primary">{title}</div>
|
||||
</div>
|
||||
|
||||
@@ -37,12 +37,16 @@ interface CalloutProps {
|
||||
className?: string
|
||||
}
|
||||
|
||||
/** An aside with a coloured left rule. `warn` carries the tape amber. */
|
||||
/**
|
||||
* An aside. `warn` carries the tape amber.
|
||||
*
|
||||
* The tone lives in the label, not in a coloured left rule — one ribbon per
|
||||
* card is decoration, and the label was already saying the same thing twice.
|
||||
*/
|
||||
export const Callout = ({ title, tone = 'accent', children, className }: CalloutProps) => (
|
||||
<div
|
||||
className={cn(
|
||||
'rounded-md border border-hairline border-l-[3px] bg-panel px-[18px] py-5 sm:px-[22px]',
|
||||
tone === 'warn' ? 'border-l-warning' : 'border-l-accent',
|
||||
'rounded-md border border-hairline bg-panel px-[18px] py-5 sm:px-[22px]',
|
||||
'[&>p]:leading-[25px] [&>p]:text-secondary',
|
||||
className,
|
||||
)}
|
||||
|
||||
@@ -159,9 +159,9 @@ export const Community = () => {
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap gap-2 sm:gap-3">
|
||||
<Button href={LINKS.issues} variant="accent">
|
||||
Open an issue ↗
|
||||
Open an issue
|
||||
</Button>
|
||||
<Button href={LINKS.gh}>GitHub ↗</Button>
|
||||
<Button href={LINKS.gh}>GitHub</Button>
|
||||
</div>
|
||||
</Prose>
|
||||
<Terminal
|
||||
@@ -226,7 +226,7 @@ export const Community = () => {
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
{alt.links.map((link) => (
|
||||
<Button key={link.label} href={link.href}>
|
||||
{link.label} ↗
|
||||
{link.label}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
@@ -247,7 +247,7 @@ export const Community = () => {
|
||||
</p>
|
||||
<div className="mt-1 flex flex-wrap gap-2 sm:gap-3">
|
||||
<Button href={LINKS.license} variant="accent">
|
||||
Read the license ↗
|
||||
Read the license
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -187,7 +187,7 @@ export const Docs = () => {
|
||||
<Code>portmap</Code> tests whether your router will let peers connect back,
|
||||
worth running once.{' '}
|
||||
<Link to="/install" className="text-link hover:text-link-hover">
|
||||
More on being reachable →
|
||||
More on being reachable
|
||||
</Link>
|
||||
</p>
|
||||
</Prose>
|
||||
@@ -214,10 +214,10 @@ export const Docs = () => {
|
||||
</Prose>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
<Button href={LINKS.gh} variant="accent">
|
||||
README ↗
|
||||
README
|
||||
</Button>
|
||||
<Button href={LINKS.docsrs}>docs.rs ↗</Button>
|
||||
<Button href={LINKS.changelog}>Changelog ↗</Button>
|
||||
<Button href={LINKS.docsrs}>docs.rs</Button>
|
||||
<Button href={LINKS.changelog}>Changelog</Button>
|
||||
</div>
|
||||
</Cols>
|
||||
</Panel>
|
||||
|
||||
@@ -117,8 +117,7 @@ export const Home = () => {
|
||||
</div>
|
||||
<p className="text-lg leading-[29px] text-pretty text-secondary max-md:hidden">
|
||||
Search the network, share your files, browse someone’s collection, join
|
||||
a room. It runs over ssh on the machine where your music already lives, and
|
||||
it’s blazingly fast Rust 🦀.
|
||||
a room. It runs over ssh on the machine where your music already lives.
|
||||
</p>
|
||||
<div className="flex flex-wrap items-center justify-between gap-x-5 gap-y-3 sm:gap-y-4">
|
||||
<div className="flex flex-wrap items-center gap-2 max-md:w-full max-md:justify-center sm:gap-3">
|
||||
@@ -126,7 +125,7 @@ export const Home = () => {
|
||||
Install
|
||||
</Button>
|
||||
<Button href="/docs">Read the docs</Button>
|
||||
<Button href={LINKS.gh}>GitHub ↗</Button>
|
||||
<Button href={LINKS.gh}>GitHub</Button>
|
||||
</div>
|
||||
<CommandPill text="cargo install soulseek-rs" />
|
||||
</div>
|
||||
@@ -206,7 +205,7 @@ export const Home = () => {
|
||||
Reach for <Code>soulseek-rs-lib</Code> to build a custom client or an agent
|
||||
on the protocol directly.{' '}
|
||||
<Link to="/install" className="text-link hover:text-link-hover">
|
||||
Use the library →
|
||||
Use the library
|
||||
</Link>
|
||||
</p>
|
||||
</Callout>
|
||||
@@ -217,7 +216,7 @@ export const Home = () => {
|
||||
<Code>message</Code>, <Code>portmap</Code>. Point cron, a script, or an
|
||||
agent at them and read the output back. No daemon, no API to stand up.{' '}
|
||||
<Link to="/docs" className="text-link hover:text-link-hover">
|
||||
See the commands →
|
||||
See the commands
|
||||
</Link>
|
||||
</p>
|
||||
</Callout>
|
||||
@@ -231,14 +230,21 @@ export const Home = () => {
|
||||
shell, so the same client works for scripting, cron jobs, and agents driving it
|
||||
programmatically.
|
||||
</SectionHead>
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{FEATURES.map((feature) => (
|
||||
{/*
|
||||
Three up, not four, with search spanning two of them: it's the thing
|
||||
the client is for, and eight cards at identical weight said the
|
||||
opposite. Eight items plus that one double = nine cells, so the grid
|
||||
still comes out square.
|
||||
*/}
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{FEATURES.map((feature, i) => (
|
||||
<FeatureCard
|
||||
key={feature.title}
|
||||
glyph={feature.glyph}
|
||||
color={feature.color}
|
||||
title={feature.title}
|
||||
cmd={feature.cmd}
|
||||
className={i === 0 ? 'lg:col-span-2' : ''}
|
||||
>
|
||||
{feature.body}
|
||||
</FeatureCard>
|
||||
|
||||
@@ -122,7 +122,7 @@ export const Install = () => {
|
||||
opens.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-2 sm:gap-3">
|
||||
<Button href={LINKS.releases}>Prebuilt binaries ↗</Button>
|
||||
<Button href={LINKS.releases}>Prebuilt binaries</Button>
|
||||
</div>
|
||||
<p className="text-[13px] text-muted">
|
||||
No Rust toolchain? Grab a prebuilt archive for your platform from the{' '}
|
||||
|
||||
Reference in New Issue
Block a user