‹ ar ais chuig an suíomh
saotharlann téamaí

comhpháirteanna

Leabharlann comhpháirteanna

Tá gach rud ar an suíomh seo déanta as na píosaí seo. Déanann adaimh móilíní, déanann móilíní orgánaigh, agus líonann na horgánaigh teimpléid na leathanach. Athraigh an téama thuas agus féach orthu uile ag athrú.

Bunsraitheanna

tokens.*.css

Design tokens

Ní bhaineann comhpháirt riamh le dath amh. Socraíonn téama na tokens bunúsacha, tugann tokens séimeantacha ról dóibh, agus tiúnann tokens comhpháirte gach píosa. Athraigh luach amháin ag an mbun agus téann sé suas an bealach ar fad.

  1. bunúsach --color-primary socraithe ag an téama
  2. séimeantach --primary cad is brí leis
  3. comhpháirt --btn-primary-bg cá dtéann sé
  1. bunúsach --color-base-000 socraithe ag an téama
  2. séimeantach --surface-sunken cad is brí leis
  3. comhpháirt --tag-bg cá dtéann sé
  4. Tag
global.css

Sraitheanna cascáide

Cruachann stíleanna i dtrí shraith, ionas gur féidir le comhpháirt i gcónaí na hadaimh istigh inti a athstíliú le haicme shimplí.

  1. @layer baseathshocrú + áiseanna
  2. @layer uiadaimh + móilíní
  3. (unlayered)comhpháirteanna + leathanaigh, gan sraith, mar sin buann siad i gcónaí

Adaimh

Na píosaí is lú. Déanann gach ceann jab amháin agus ní léann sé ach tokens.

ui/Button.astro

Button

Naisc agus gníomhartha. Tagann a dhromchla ó na tokens rialuithe, mar sin déanann socrú amháin téama gach cnaipe cothrom, beibhealta nó cruinn.

Props

PropCineálRéamhshocrú
variant?default (outlined), primary (filled), portal (glowing accent, for the loft), danger (destructive) 'default' | 'primary' | 'portal' | 'danger' 'default'
size?md for page CTAs, sm for dense tool UIs, icon for a single glyph 'md' | 'sm' | 'icon' 'md'
block?fill the container's width boolean –
icon?a pixelarticons name, drawn before the label string –

Móide gach aitreabúid dhúchasach <button> / <a>.

Tokens a léann sé

comhpháirt
--fs-* --sp-* --ctl-border --ctl-radius --btn-bg --btn-fg --ctl-shadow --ctl-lift-hover --ctl-shadow-hover --btn-hover-border --btn-hover-fg --ctl-press --ctl-shadow-active --btn-primary-bg --btn-primary-fg --btn-primary-hover-bg
séimeantach
--font-pixel --error --accent --foreground --secondary

Úsáid

<Button variant="primary" icon="mail" href="#contact">email me</Button>
<Button size="sm" block data-save>save</Button>
ui/Tag.astro

Tag

Lipéid bheaga i log: an teicneolaíocht ar chárta, nó comhaireamh.

React 19 WebRTC Rust 25 8

Props

PropCineálRéamhshocrú
variant? 'label' | 'count' 'label'
hot? boolean –

Móide gach aitreabúid dhúchasach <span>.

Tokens a léann sé

comhpháirt
--sink-border --sink-radius --tag-fg --tag-bg --sink-shadow --fs-* --sp-*
séimeantach
--font-pixel --warning --on-warning

Úsáid

<Tag>WebRTC</Tag>
<Tag variant="count" hot>8</Tag>
ui/Badge.astro

Badge

Stádas i ndath soladach, le téacs inléite an datha sin féin air.

Seolta Teipthe Á athbhreithniú Beo

Props

PropCineálRéamhshocrú
tone 'success' | 'error' | 'warning' | 'info' –

Móide gach aitreabúid dhúchasach <span>.

Tokens a léann sé

comhpháirt
--fs-* --sp-* --sink-radius
séimeantach
--font-pixel --success --on-success --error --on-error --warning --on-warning --info --on-info

Úsáid

<Badge tone="success">shipped</Badge>
ui/Chip.astro

Chip

Focal i log, níos mó agus níos simplí ná lipéad. Faigheann na cinn inbhainte ×.

TypeScript WebRTC AT Protocol atproto webrtc

Props

PropCineálRéamhshocrú
removable? boolean –

Móide gach aitreabúid dhúchasach <span>.

Tokens a léann sé

comhpháirt
--fs-* --sp-* --sink-border --sink-radius --sink-shadow --tag-bg
séimeantach
--foreground-dim --surface-sunken --font-pixel --foreground --foreground-faint

Úsáid

<Chip>TypeScript</Chip>
<Chip removable>atproto</Chip>
ui/Field.astro

Field

Réimse téacs le glif taobh istigh dá imeall. Déanann earráid an t-imeall dearg.

Props

PropCineálRéamhshocrú
icon string –
type? 'text' | 'search' | 'password' | 'email' | 'url' 'text'
placeholder? string –
name? string –
inputDir? 'ltr' | 'rtl' | 'auto' –
error? boolean –

Móide gach aitreabúid dhúchasach <label>.

Tokens a léann sé

comhpháirt
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
séimeantach
--foreground-faint --foreground --surface-sunken --primary --error

Úsáid

<Field icon="@" placeholder="handle.bsky.social" />
<Field icon="⚿" type="password" error />
ui/Switch.astro

Switch

Lasc ar/as tógtha ar bhosca seiceála fíor, mar sin oibríonn méarchláir agus foirmeacha gan stró.

Props

PropCineálRéamhshocrú
label? string –

Móide gach aitreabúid dhúchasach <input>.

Tokens a léann sé

comhpháirt
--sp-* --fs-* --ctl-radius
séimeantach
--foreground-dim --surface-sunken --border-strong --foreground-faint --primary --on-accent --foreground

Úsáid

<Switch label="Scanlines" data-fx="--fx-scanline" />
ui/Segmented.astro

Segmented

Cúpla rogha nach féidir ach ceann amháin díobh a bheith ar siúl. Éiríonn an ceann roghnaithe amach as an log.

Props

PropCineálRéamhshocrú
options Option[] –
label string –

Móide gach aitreabúid dhúchasach <div>.

Déanta as

Badge

Tokens a léann sé

comhpháirt
--sink-border --ctl-radius --fs-* --sp-*
séimeantach
--surface-sunken --foreground-faint --surface --foreground --shadow-color

Úsáid

<Segmented label="Billing" options={[
  { label: 'Monthly' },
  { label: 'Yearly', pressed: true, badge: { text: '-20%', tone: 'warning' } },
]} />
ui/Eyebrow.astro

Eyebrow

An lipéad beag // os cionn ceannteideal rannóige.

saothar roghnaithe

Props

Níl props dá chuid féin aige.

Tokens a léann sé

comhpháirt
--fs-* --sp-*
séimeantach
--font-pixel --primary --foreground-faint

Úsáid

<Eyebrow>selected work</Eyebrow>

Móilíní

Adaimh curtha le chéile i gcruth: barra fuinneoige, dromchla ardaithe.

ui/TitleBar.astro

TitleBar

An stiall trasna bharr fuinneoige: poncanna, teideal, agus spás ag an gceann thall. Déanann AIM an grádán gorm clasaiceach de.

protoimsg.app 2025
now_playing.mod
// atproto · beo ● ar líne

Props

PropCineálRéamhshocrú
size?md on cards, sm on dense tool windows and dialogs 'md' | 'sm' 'md'
dots? boolean –

Móide gach aitreabúid dhúchasach <div>.

Tokens a léann sé

comhpháirt
--sp-* --titlebar-bg --fs-* --titlebar-fg --ctl-radius --titlebar-accent
séimeantach
--border --font-pixel --foreground-faint
ón tuismitheoir
--ac

Úsáid

<TitleBar dots>
  protoimsg.app
  <span slot="end">2025</span>
</TitleBar>
ui/Panel.astro

Panel

An dromchla ardaithe a bhfuil gach cárta agus fuinneog ina suí air. Raised do rudaí a úsáideann tú, flat d’ábhar tacaíochta, lift do naisc.

raised
flat
lift · cuir an luch orm
window.txt

Panel + TitleBar

Props

PropCineálRéamhshocrú
as? 'div' | 'article' | 'section' | 'aside' 'div'
elevation? 'raised' | 'flat' 'raised'
lift? boolean –

Móide gach aitreabúid dhúchasach <div>.

Tokens a léann sé

comhpháirt
--card-bg --raise-border --raise-radius --raise-pad --raise-shadow --raise-shadow-static --lift-hover --raise-shadow-hover --card-border-hover

Úsáid

<Panel as="article" lift>
  <TitleBar dots>window.txt</TitleBar>
  …
</Panel>

Orgánaigh

Codanna iomlána den suíomh a d’aithneofá, déanta as móilíní agus adaimh.

ProjectCard.astro

ProjectCard

Panel le TitleBar, cur síos, Tags agus naisc. Téann an cárta ar fad chuig a chéad nasc.

protoimsg.app 2025

protoIM

Bunaitheoir & Príomhinnealtóir · 2025–faoi láthair

proto Instant Messenger — físchomhrá foinse oscailte, tras-ardáin ar an AT Protocol: glaonna saor in aisce gan bhalla cuntais, mar fhreagra ar ghlas FaceTime. Monorepo TypeScript le 8 bpacáiste (~65K LOC) a sheolann ardán fíor-ama amháin ar an ngréasán (React 19), ar an deasc (Tauri v2 / Rust) agus ar ghléasanna soghluaiste (Expo). Comharthaíocht WebRTC lámhdhéanta le dintiúir TURN ama-theoranta ar coturn féin-óstáilte, LiveKit SFU do ghlaonna grúpa, Lexicons saincheaptha app.protoimsg.chat.*, innéacsóir Jetstream, agus 5 sheirbhís Fly.io — PDS féin-óstáilte agus aistriúchán beo NLLB-200 ar ~17 logchaighdeán ina measc.

React 19 WebRTC Tauri v2 Rust Expo LiveKit PDS Fly.io
→ Tabhair cuairt → GitHub

Props

PropCineálRéamhshocrú
project Project –

Déanta as

Tag Panel TitleBar

Tokens a léann sé

comhpháirt
--sp-* --fs-*
séimeantach
--primary --font-body --font-display --font-pixel --foreground-faint --foreground-dim --foreground

Úsáid

{featured(m).map((project) => <ProjectCard project={project} />)}
MiniCard.astro

MiniCard

Panel cothrom do na tionscadail is lú.

nosky

Cruthaitheoir & Príomhinnealtóir · 2026

Cliant sóisialta ATProto (Expo/RN) a sheachnaíonn an AppView láraithe — téann sé go díreach chuig na freastalaithe PDS a leanann tú, le cumasc/sórtáil ar thaobh an chliaint, ar chruach Microcosm (Slingshot, Constellation, Spacedust).

Props

PropCineálRéamhshocrú
project MiniProject –

Déanta as

Panel

Tokens a léann sé

comhpháirt
--sp-* --fs-*
séimeantach
--font-display --info --font-pixel --foreground-faint --foreground-dim --warning

Úsáid

<MiniCard project={project} />
ArcadeCabinet.astro

ArcadeCabinet

Panel gléasta mar mheaisín stuara, le scáileán is féidir a imirt nó atá faoi ghlas.

FAST HOPPER
0
BUAIC 0

HOPPER

Dearthóir & Innealtóir · beo anois

Dreapadóir ardán ingearach — léim suas dréimire gan deireadh d'ardáin agus téigh sa tóir ar an scór is airde. Ritheann sé ar ionsamhlúchán cinntitheach ionas gur féidir gach rith a fhíorú. Cláir cheannais dhomhanda de réir deacrachta (fast / faster), agus scríobhtar do bhuaicscóir díreach chuig do stór ATProto mar thaifid actor.rpg.stats.

TypeScript Canvas Deterministic Sim ATProto Records Leaderboards
▶ Imir anois

Props

PropCineálRéamhshocrú
game Game –

Déanta as

Tag Panel

Tokens a léann sé

comhpháirt
--cabinet-from --cabinet-to --sink-shadow --screen-star --screen-bg --fs-* --screen-shadow --platform-from --platform-to --platform-edge --platform-hi --player-glow --sp-* --locked-from --locked-to
séimeantach
--primary --border --scanline-color-screen --font-pixel --foreground --foreground-dim --font-display --foreground-faint

Úsáid

<ArcadeCabinet game={game} />
AtStatusCard.astro

AtStatusCard

Mo stádas beo ar Bluesky, léite ó mo stór AT Protocol nuair a lódálann an leathanach.

Props

Níl props dá chuid féin aige.

Déanta as

Panel TitleBar

Tokens a léann sé

comhpháirt
--fs-* --titlebar-accent --sp-* --sink-radius
séimeantach
--success --primary --surface-sunken --shadow-color-soft --font-display --foreground --info --border --font-pixel --foreground-faint

Úsáid

<AtStatusCard />
FeedbackForm.astro

FeedbackForm

Button a osclaíonn tarraiceán: TitleBar os cionn foirme, agus bileog is féidir a scuabadh ar shiúl ar fhóin.

fág nóta

Props

Níl props dá chuid féin aige.

Déanta as

Button TitleBar

Tokens a léann sé

comhpháirt
--sp-* --fs-* --sink-border --sink-shadow --sink-radius
séimeantach
--foreground --surface-sunken --foreground-faint --primary --foreground-dim --success --error

Úsáid

<FeedbackForm />

Teimpléid

Na frámaí a dhoirteann leathanaigh a n-ábhar isteach iontu.

Section.astro

Section

Gach rannóg den leathanach baile: Eyebrow, ceannteideal, agus ansin cibé rud a théann isteach.

saothar roghnaithe

Tionscadail.

Is Section é an bosca seo.

Props

PropCineálRéamhshocrú
id? string –
eyebrow? string –
title? string –

Déanta as

Eyebrow

Tokens a léann sé

Níl aon cheann dá chuid féin aige. Tugann a adaimh a gcuid féin.

Úsáid

<Section id="work" eyebrow="selected work" title="Things I've built">
  …
</Section>