chore: setup design references
This commit is contained in:
fsylvain committed
1 parent
2a64991916
commit
64f50074bd
38 files changed
+8443
No files matched your search
@@ -0,0 +1,39 @@
|
||||
# RenewCMS design
|
||||
|
||||
The visual spec of record for the back-office SPA and the transactional emails, exported from Claude Design. `features/` stays the behavioural spec; if the two disagree, stop and ask. Agents read this folder and never edit it; a design change is a new export.
|
||||
|
||||
## Files
|
||||
|
||||
| File | What it holds |
|
||||
|---|---|
|
||||
| `routes.md` | Every route: layout, auth requirement, page component, API calls |
|
||||
| `components.md` | The component inventory with its Nuxt UI mapping, props, emits and slots, then the full component and primitive specs |
|
||||
| `states.md` | Every state of every screen with its trigger, and the HTTP-status-to-copy table |
|
||||
| `screens/<screen>.md` | One file per screen: route, API, and per state the exact copy, fields, alerts, dialogs and toasts |
|
||||
| `foundations.md` | Colors, contrast, type, spacing, motion and icons, and where the token files are |
|
||||
| `emails.md` | The two email templates and their variables |
|
||||
| `source/` | The raw Claude Design export. Open the `.dc.html` boards in a browser for the drawings (they load `support.js` locally and fonts from Google). |
|
||||
|
||||
## Screens
|
||||
|
||||
| Screen | Route | States | Board |
|
||||
|---|---|---|---|
|
||||
| [Log in](screens/log-in.md) | `/login` | 9 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Register](screens/register.md) | `/register` | 6 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Pending](screens/pending.md) | `/register/pending` | 6 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Verify](screens/verify.md) | `/register/validate?c=CODE` | 6 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Forgot password](screens/forgot-password.md) | `/register/reset/request` | 6 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Reset password](screens/reset-password.md) | `/register/reset/validate?c=CODE&email=EMAIL` | 7 | `source/RenewCMS Screens Auth.dc.html` |
|
||||
| [Boot](screens/boot.md) | `any route, first load` | 1 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [Home](screens/home.md) | `/home` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [Articles](screens/articles.md) | `/article` | 14 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [New article](screens/new-article.md) | `modal from anywhere · /article/new` | 5 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [Editor](screens/editor.md) | `/article/:id/edit` | 19 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [Integration](screens/integration.md) | `/integration` | 2 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
| [Global](screens/global.md) | `any route` | 4 | `source/RenewCMS Screens Back-office.dc.html` |
|
||||
|
||||
## Other boards
|
||||
|
||||
- `source/RenewCMS Prototype.dc.html`: the clickable flows (first run, edit and publish, password reset, delete, session expiry mid-edit).
|
||||
- `source/RenewCMS Handoff.dc.html`: the handoff page the markdown here was generated from.
|
||||
- `source/RenewCMS Directions.dc.html`: the three brand directions (history only).
|
||||
@@ -0,0 +1,669 @@
|
||||
# Components
|
||||
|
||||
## Inventory
|
||||
|
||||
| Component | Nuxt UI base | Props | Emits | Slots | Used on |
|
||||
|---|---|---|---|---|---|
|
||||
| AuthShell | UPageCard, UColorModeSelect | title, description? | none | default, notice, footer | All public routes |
|
||||
| DashboardShell | UDashboardGroup, UDashboardSidebar, UNavigationMenu, UDashboardPanel, UDashboardNavbar, UBreadcrumb | none (reads route.meta and the session store) | none | default, navbar-right | All verified routes |
|
||||
| UserMenu | UDropdownMenu, UButton, UAvatar | none | logout | none | DashboardShell |
|
||||
| PageHeader | UPageHeader | title, description? | none | actions, meta | Home, Articles, Integration |
|
||||
| ArticleStatusBadge | UBadge | online: boolean, size?: 'sm'\|'md', pending?: 'publish'\|'unpublish' | none | none | Home, Articles, Editor |
|
||||
| ArticleTable | UTabs, UInput, UTable, UDropdownMenu, UPagination | articles: Article[], loading, busyIds: Set<number> | publish, unpublish, delete, copy-url | empty, toolbar-right | Articles (md and up) |
|
||||
| ArticleCardList | ULink, UDropdownMenu (custom list) | same as ArticleTable | same as ArticleTable | empty | Articles (below md) |
|
||||
| EmptyState | UEmpty | variant: 'no-articles'\|'no-results'\|'no-drafts'\|'no-online', query? | action | none | Home, Articles |
|
||||
| ConfirmDialog | UModal via useOverlay | title, description, confirmLabel, pendingLabel, tone: 'danger'\|'neutral', action: () => Promise<void> | close(confirmed) | none | Articles, Editor, Pending |
|
||||
| NewArticleModal | UModal, UForm, UFormField, UInput, UTextarea | none | created(article) | none | Home, Articles, /article/new |
|
||||
| ArticleEditor | UEditor, UEditorToolbar, UDropdownMenu (+ custom Indent extension) | modelValue: string, articleId: number, disabled? | update:modelValue, request-image | none | Editor |
|
||||
| ImageUploader | UModal, UFileUpload, UProgress | articleId: number | uploaded(location), close | none | Editor |
|
||||
| SaveStatus | custom (span + UButton) | state: 'clean'\|'dirty'\|'saving'\|'saved'\|'error'\|'offline', savedAt?: Date | retry | none | Editor |
|
||||
| PublishControl | UButton | online: boolean, dirty: boolean, pending?: string, disabled? | publish, unpublish | none | Editor |
|
||||
| ArticleDetails | UCard (desktop) / USlideover (mobile) | article: Article | copy-url | none | Editor |
|
||||
| CharacterCounter | custom | value: number, max: number, min?: number, warnAt?: number | none | none | NewArticleModal, Editor, Register |
|
||||
| PasswordStrengthHint | custom (in UFormField #help) | rules: { label, met }[], showErrors: boolean | none | none | Register, Reset |
|
||||
| ResultPanel | custom + UButton | tone: 'success'\|'error'\|'info', icon, title, description, actions: ButtonProps[] | none | default | Pending, Verify, Reset request, Reset, Register (403) |
|
||||
| CodeBlock | custom (shiki) + UButton | code: string, lang: string, label? | none | none | Integration |
|
||||
| EndpointCard | UCard, UBadge, UTabs | method: 'GET', path, description, examples: { fetch, curl, response } | none | none | Integration |
|
||||
| ErrorView | custom + UButton | kind: 'not-found'\|'error' | retry | none | Not found, error boundary |
|
||||
| OfflineBanner | UBanner | none (reads useOnline) | none | none | DashboardShell |
|
||||
| AppBoot | USkeleton inside DashboardShell | none | none | none | First load of any verified route |
|
||||
|
||||
Composables behind these components: `useSession`, `useApi`, `useArticles` (the list cache plus actions shared by the table, cards and editor), `useArticleDraft` (dirty state, save, and the sessionStorage mirror), `useImageUpload` (XHR with progress) and `useRetryAfter` (429 countdown).
|
||||
|
||||
## Product component specs
|
||||
|
||||
Extracted from `source/RenewCMS Components Product.dc.html`; open it for the drawings.
|
||||
|
||||
## Components: product
|
||||
|
||||
These are the RenewCMS components, built from the primitives on the first page . Each one lists the Nuxt UI parts it's made from, its props, emits and slots, every state, and keyboard and responsive behavior. Components marked custom have no Nuxt UI equivalent.
|
||||
|
||||
### AuthShell
|
||||
|
||||
One centered card for every public screen. The logo sits above the title, and the form or ResultPanel goes in the slot. Footer links and the theme select sit outside the card, so the card itself stays about one task.
|
||||
|
||||
Log in Welcome back. Log in to manage your articles.
|
||||
|
||||
default slot
|
||||
|
||||
Forgot password? System
|
||||
|
||||
Built from Custom layout component AuthShell.vue : a UPageCard variant="outline" inside a centered main , with AppLogo , and UColorModeSelect size="sm" in the footer. Forms inside it use UForm rather than UAuthForm , because every screen needs states (such as 403, 429 and an inline login during verification) that UAuthForm doesn't expose.
|
||||
|
||||
Props, slots Props title: string , description?: string . Slots default , notice (an alert above the title, for session expired or password changed), footer (links). No emits.
|
||||
|
||||
A11y The title is the page's h1 , and document.title becomes "Log in · RenewCMS". On route change, focus moves to the h1 . The logo is alt="RenewCMS" and isn't a link, since there's nothing public to go back to.
|
||||
|
||||
Responsive 400 px card from sm up, with its top 12 vh from the top. Below sm , the card loses its border and padding drops to 20 px, filling the screen on --ui-bg , and fields and buttons use xl .
|
||||
|
||||
### DashboardShell
|
||||
|
||||
The sidebar has three destinations, and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below lg , the sidebar becomes a slideover.
|
||||
|
||||
RenewCMS
|
||||
|
||||
Home
|
||||
|
||||
Articles
|
||||
|
||||
Integration
|
||||
|
||||
marta Owner
|
||||
|
||||
System
|
||||
|
||||
Light
|
||||
|
||||
Dark
|
||||
|
||||
Log out
|
||||
|
||||
MA marta
|
||||
|
||||
Articles How we price a bathroom renovation
|
||||
|
||||
page body
|
||||
|
||||
MA
|
||||
|
||||
Articles
|
||||
|
||||
Mobile top bar. The menu button opens the sidebar as a left slideover.
|
||||
|
||||
Built from UDashboardGroup storage="local" › UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4" with the #header (AppLogo), #default ( UNavigationMenu orientation="vertical" :collapsed ) and #footer (UserMenu) slots. Each page is a UDashboardPanel , with a UDashboardNavbar holding UDashboardSidebarCollapse and UBreadcrumb . On mobile, UDashboardSidebarToggle appears and the sidebar's built-in slideover takes over.
|
||||
|
||||
UserMenu UDropdownMenu :content="{ side: 'top', align: 'start' }" on a ghost UButton block with a UAvatar and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them.
|
||||
|
||||
Props, slots No props, because the shell reads the user from the session Pinia store. The navbar reads route.meta.title and route.meta.breadcrumb . Slots navbar-right (page actions on mobile) and default . It shows the offline banner when navigator.onLine is false.
|
||||
|
||||
A11y The first Tab stop is a "Skip to content" link. The sidebar is a nav labeled "Main", and the current page gets aria-current="page" . In the collapsed rail, items show tooltips and keep their aria-label . The collapse button carries aria-expanded . The mobile slideover traps focus and closes after navigating.
|
||||
|
||||
Bend The active nav item uses a sand fill with ink text instead of Nuxt UI's primary-tinted background and left indicator. The shell is set up for this in ui.config.ts .
|
||||
|
||||
### PageHeader
|
||||
|
||||
Articles Everything you've written, online and in draft.
|
||||
|
||||
Connect your website New article
|
||||
|
||||
Articles Everything you've written, online and in draft.
|
||||
|
||||
New article
|
||||
|
||||
Built from UPageHeader :title :description , with actions in the #links slot. The ui override is { root: 'py-0 border-0', title: 'text-xl', description: 'text-sm text-muted mt-0.5' } , which brings Nuxt UI's marketing-size header down to dashboard density.
|
||||
|
||||
Props, slots title , description? , slot actions (the primary action goes last, so it sits on the right), slot meta (for example, a status badge next to the title in the editor).
|
||||
|
||||
Responsive Below md , the actions wrap under the text. The primary action goes full width at 44 px, and secondary actions move into the navbar's overflow menu.
|
||||
|
||||
### ArticleStatusBadge
|
||||
|
||||
Online
|
||||
|
||||
Draft
|
||||
|
||||
Online
|
||||
|
||||
Draft
|
||||
|
||||
Publishing…
|
||||
|
||||
Unpublishing…
|
||||
|
||||
Built from UBadge . Online: color="neutral" variant="solid" icon="i-lucide-globe" . Draft: color="neutral" variant="outline" icon="i-lucide-pencil-line" . Status is shown by the fill, the icon and the word, never by color alone.
|
||||
|
||||
Props online: boolean , size?: 'sm' | 'md' (sm in lists, md in the editor header), pending?: 'publish' | 'unpublish' (shows the -ing label with a spinner while the request runs). No emits, because it isn't interactive.
|
||||
|
||||
### ArticleTable
|
||||
|
||||
Search, filter tabs, a sortable table and row actions. Everything happens in the browser on the list it has already loaded. Below md , the table becomes a card list with the same data and actions.
|
||||
|
||||
All 6 Online 4 Drafts 2
|
||||
|
||||
Search by title
|
||||
|
||||
Title Status Created Updated
|
||||
|
||||
Online Draft
|
||||
|
||||
Built from UTabs + UInput type="search" + UTable (desktop), or a custom ArticleCardList of ULink rows (mobile), switched with useBreakpoints at md . Each row has a UDropdownMenu , and the row actions go through useArticleActions() , which shares one set of calls between the table, the list and the editor.
|
||||
|
||||
Props, emits Props articles: Article[] , loading: boolean , busyIds: Set<number> . Emits publish(id) , unpublish(id) , delete(article) , copy-url(id) . Search, tab and sort state lives in the URL query ( ?q=&status=&sort= ). Slots #empty , #toolbar-right .
|
||||
|
||||
Behavior Search is case-insensitive and ignores accents, and it matches anywhere in the title. It updates on input, debounced 120 ms. Tab counts always reflect the full list. Dates within 7 days are relative ("2 hours ago"); older ones are absolute ("18 Aug 2026"), with the full timestamp in a title attribute. Clicking a row opens the editor, except clicks on the menu.
|
||||
|
||||
States Loading (5 skeleton rows), empty, no results, a filter tab with nothing in it, a row busy, an action failed (toast with Retry, row reverts), and a row vanished (a 404 on any action removes the row and shows an info toast). Row actions are never optimistic: the row updates when the 200 arrives.
|
||||
|
||||
A11y The table has a visually hidden caption, "Articles, sorted by last updated, newest first". Each row's menu button is named "Actions for How we price a bathroom renovation". After a search, a polite live region announces "3 articles".
|
||||
|
||||
### EmptyState
|
||||
|
||||
No articles yet Write your first one. It stays a draft until you publish it. New article
|
||||
|
||||
No articles match "tiles" Check the spelling, or search for a shorter part of the title. Clear search
|
||||
|
||||
No drafts Everything you've written is online. New article
|
||||
|
||||
Nothing is online yet Publish a draft and it will appear on your website. Show drafts
|
||||
|
||||
Built from UEmpty :icon :title :description :actions variant="naked" , placed in the UTable #empty slot or on the page. The icon tile is overridden to rounded-none bg-elevated .
|
||||
|
||||
Props variant: 'no-articles' | 'no-results' | 'no-drafts' | 'no-online' , query?: string . Emits action . Each variant has fixed copy, and the search term is shown in quotes, cut to 40 characters.
|
||||
|
||||
A11y The title is an h2 . "No results" is announced through the table's live region. Clear search returns focus to the search field.
|
||||
|
||||
### ConfirmDialog
|
||||
|
||||
Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.
|
||||
|
||||
Cancel Delete article
|
||||
|
||||
Delete this article? "Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.
|
||||
|
||||
Couldn't delete the article, so it's still there. Try again in a moment.
|
||||
|
||||
Cancel Deleting…
|
||||
|
||||
Left: default. Right: after a failed attempt (the error appears inline), with the retry running (loading).
|
||||
|
||||
Built from UModal opened through useOverlay().create(ConfirmDialog) . open() returns a promise that resolves once the action succeeds or the dialog is cancelled. The action runs inside the dialog, so errors show there instead of in a toast behind the overlay.
|
||||
|
||||
Props, emits title , description , confirmLabel , pendingLabel , tone: 'danger' | 'neutral' , action: () => Promise<void> . Emits close(confirmed: boolean) . The delete description comes from the title plus images.length , and reads "and its image" for 1 and just the title for 0.
|
||||
|
||||
Other uses Cancel registration: "Cancel your registration?" / "Your account will be deleted. You can register again with the same or a different email." / "Cancel registration" / "Keep my account". Leaving with unsaved changes uses the neutral tone.
|
||||
|
||||
A11y role="alertdialog" . Focus starts on Cancel, and Enter doesn't confirm by default. While the action runs, the dialog can't be dismissed, both buttons are disabled, and aria-busy is set. On success, focus goes to the next row, or the page heading if there isn't one.
|
||||
|
||||
### ArticleEditor, SaveStatus, PublishControl, CharacterCounter
|
||||
|
||||
The editor is made of four components that work together. The header holds the read-only title, status, SaveStatus, Save and PublishControl. A sticky toolbar sits above the writing surface, which uses the content type scale. The counter sits at the foot.
|
||||
|
||||
How we price a bathroom renovation Draft
|
||||
|
||||
Unsaved changes
|
||||
|
||||
Save
|
||||
|
||||
Save and publish
|
||||
|
||||
Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and write down what stays .
|
||||
|
||||
What goes into the price
|
||||
|
||||
Stripping out and making good
|
||||
|
||||
Plumbing moves, if any
|
||||
|
||||
Details
|
||||
|
||||
Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3
|
||||
|
||||
Public API URL /v1/article/12 Returns 404 until the article is online.
|
||||
|
||||
4 318 / 10 000
|
||||
|
||||
Unsaved changes dirty, Save enabled
|
||||
|
||||
Saving… saving, Save disabled
|
||||
|
||||
Saved at 11:02 saved, Save disabled
|
||||
|
||||
Save failed Retry error, changes kept
|
||||
|
||||
Publish draft, saved
|
||||
|
||||
Unpublish online
|
||||
|
||||
9 240 / 10 000 body ≥ 90%
|
||||
|
||||
10 214 / 10 000 214 characters over. Shorten the text or remove an image. Formatting counts too. over limit, Save disabled
|
||||
|
||||
ArticleEditor UEditor v-model content-type="html" :extensions + UEditorToolbar :editor :items layout="fixed" . TipTap v3 StarterKit already includes Underline and Link. TextAlign handles alignment and Image handles images. Formatting is a UDropdownMenu with Paragraph and Headings 1–4 ( h1 is kept because the public site controls how the title appears). Indent and outdent call sinkListItem / liftListItem in lists. For paragraphs, a small custom Indent extension writes data-indent="1–4" , because TipTap has no paragraph indent. Clear formatting runs unsetAllMarks().clearNodes() . The editor surface gets class="article-content" .
|
||||
|
||||
Props, emits modelValue: string (HTML), articleId: number , disabled? . Emits update:modelValue , request-image . Exposes insertImage(src, alt) and focus() . The toolbar reflects the active state (bold is on at the cursor) using aria-pressed .
|
||||
|
||||
SaveStatus A custom inline span aria-live="polite" , driven by useArticleDraft() : 'clean' | 'dirty' | 'saving' | 'saved' | 'error' . Saved shows the time and switches to "Saved 5 min ago" after an hour. The error state's Retry is a UButton size="xs" variant="outline" . Ctrl/⌘ S saves. Leaving with unsaved changes triggers onBeforeRouteLeave (ConfirmDialog, neutral tone) and beforeunload . There is no autosave , so the owner controls exactly what is sent. The draft is mirrored to sessionStorage so it survives a session expiry.
|
||||
|
||||
PublishControl A single UButton . Draft → primary "Publish"; draft with unsaved changes → "Save and publish" (PATCH body, then PATCH publish; if the save fails, it doesn't publish); online → outline "Unpublish". Unpublishing doesn't save pending changes, so the draft edits stay pending. Toasts: "Article published", with the description "Title" is now online. ; "Article unpublished", It's a draft again and hidden from your website.
|
||||
|
||||
CharacterCounter A custom component in mono type. Props value: number , max: number , min?: number , warnAt?: number (default 0.9). The title uses [...str].length , so accents and emoji count as one, matching Go's validator, which counts runes. The body uses the HTML string length, which is what the API receives. The warning and error states add an icon and text, not just color. A visually hidden live region announces the change only when a threshold is crossed, not on every keystroke.
|
||||
|
||||
Responsive Below lg , the details panel becomes a right slideover, opened with i-lucide-panel-right . Below md , the header wraps: back, title and badge on the first row, then SaveStatus and the counter. Save and Publish move to a sticky bottom bar (44 px). The toolbar scrolls horizontally with fade edges and keeps undo, redo and the image button pinned at the start.
|
||||
|
||||
### ImageUploader
|
||||
|
||||
Opens from the editor's image button in a small modal. Files are checked in the browser before anything is sent. After a successful upload the image goes in at the cursor and the modal closes.
|
||||
|
||||
Drop an image here Choose file PNG, JPEG, WEBP, SVG · max 10 MB
|
||||
|
||||
idle
|
||||
|
||||
Drop to upload
|
||||
|
||||
dragging over
|
||||
|
||||
north-wall.jpg 62%
|
||||
|
||||
Uploading 2.4 of 3.9 MB
|
||||
|
||||
uploading
|
||||
|
||||
Image added
|
||||
|
||||
success, closes after 600 ms
|
||||
|
||||
"plan.pdf" can't be used Use a PNG, JPEG, WEBP or SVG image, up to 10 MB. Choose another file
|
||||
|
||||
rejected: type or size
|
||||
|
||||
Upload failed The server didn't accept the file. Your article hasn't changed. Try again
|
||||
|
||||
server error
|
||||
|
||||
Built from UModal title="Add an image" › UFileUpload accept="image/png,image/jpeg,image/webp,image/svg+xml" :multiple="false" layout="list" + UProgress size="xs" . Uploads go through XMLHttpRequest , because fetch has no upload progress, as FormData with the field name file . The 201 location is inserted with insertImage(location, '') .
|
||||
|
||||
Validation Before uploading, the uploader checks both the MIME type and the file extension, and that size ≤ 10 × 1024 × 1024 . The size error names the file size: "north-wall.tif is 14.2 MB. Images can be up to 10 MB." A server 400 shows the same message as a client-side rejection.
|
||||
|
||||
Props, emits articleId: number . Emits uploaded(location) , close . A 401 hands off to the global session flow. A 404 means the article was deleted, which the editor handles.
|
||||
|
||||
A11y, touch The drop zone is a labeled button, so Enter opens the file picker. Progress is exposed as role="progressbar" with aria-valuenow , and the result is announced. On touch screens the drop text is hidden and "Choose file" becomes the main action. Dropping a file directly onto the editor surface also opens the uploader with that file.
|
||||
|
||||
### CodeBlock and EndpointCard
|
||||
|
||||
GET /v1/article/{id}
|
||||
|
||||
Returns one article. Drafts return 404 to anonymous callers, the same as an id that doesn't exist.
|
||||
|
||||
fetch curl Response
|
||||
|
||||
JavaScript Copied
|
||||
|
||||
const res = await fetch( 'https://cms.renew.example/v1/article/12' )
|
||||
|
||||
if (res.status === 404 ) return notFound()
|
||||
|
||||
const article = await res.json()
|
||||
|
||||
CodeBlock This is a custom component, because Nuxt UI's prose code blocks rely on Nuxt Content and don't work in a plain Vue app. Highlighting is done ahead of time with shiki (a dual github-light / github-dark theme remapped to the semantic colors: keywords info, strings success, numbers warning, comments muted). The header shows the language label and a ghost copy UButton , which switches to "Copied" for 2 s through useClipboard . Props code , lang , label? . Long lines scroll horizontally and never wrap.
|
||||
|
||||
EndpointCard UCard › a method UBadge (GET is solid ink) + the path in mono + a description, with UTabs (fetch, curl, Response) showing a CodeBlock each. Props method , path , description , examples: { fetch, curl, response } . Snippets use the current location.origin .
|
||||
|
||||
A11y The copy button is named "Copy JavaScript example", and its result is announced. Code is a focusable pre ( tabindex="0" ) so keyboard users can scroll it. Syntax colors pass 4.5:1 on --ui-bg-elevated in both themes.
|
||||
|
||||
### PasswordStrengthHint
|
||||
|
||||
At least 8 characters not met yet
|
||||
|
||||
At least 8 characters met
|
||||
|
||||
At least 8 characters not met on submit
|
||||
|
||||
Passwords match reset screen only
|
||||
|
||||
Built from A custom ul in the password UFormField 's #help slot. Props rules: { label: string, met: boolean }[] , showErrors: boolean . There is no meter or score, because the API only requires 8 characters.
|
||||
|
||||
A11y The list is the field's aria-describedby . Each item has hidden text reading "met" or "not met". A change is announced once, when the rule becomes met.
|
||||
|
||||
### ResultPanel
|
||||
|
||||
Check your email If an account exists for that email, a password reset link has been sent. The link expires in 1 hour.
|
||||
|
||||
Back to log in
|
||||
|
||||
This link has expired Reset links work once, for 1 hour. Request a new one and use it within the hour.
|
||||
|
||||
Request a new link
|
||||
|
||||
Too many attempts For your security, wait a moment before trying again. You can try again in 0:42 .
|
||||
|
||||
Try again in 0:42 API pending
|
||||
|
||||
Built from A custom component that fills AuthShell's slot: an icon tile, h1 title, description and UButton block size="lg" actions. Props tone: 'success' | 'error' | 'info' , icon , title , description , actions: ButtonProps[] . Slot default for extras such as the inline login on verify.
|
||||
|
||||
A11y When the panel replaces a form, focus moves to its title and the panel is role="status" , or role="alert" for errors. The countdown updates every second visually but is announced only at the start and when it reaches zero.
|
||||
|
||||
### Error pages and offline banner
|
||||
|
||||
You're offline. You can keep writing, but saving and publishing will wait until you're back online.
|
||||
|
||||
404 Page not found The link may be mistyped, or the page may have moved. Go to Home All articles
|
||||
|
||||
Error Something went wrong This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server. Try again Go to Home
|
||||
|
||||
Built from UError isn't used because it's built for Nuxt's error.vue . Instead there's a custom ErrorView (props kind: 'not-found' | 'error' ), rendered inside UDashboardPanel when the user is logged in and inside AuthShell otherwise. The offline banner is a UBanner color="neutral" at --z-banner , shown and hidden with useOnline() . Once the connection returns it switches to "You're back online" for 3 s.
|
||||
|
||||
A11y The error title is the page h1 and gets focus on render. The banner is role="status" , and it can't be dismissed while offline. The offline state blocks Save and Publish and says why in their tooltip.
|
||||
|
||||
## Themed primitives
|
||||
|
||||
Extracted from `source/RenewCMS Components Primitives.dc.html`.
|
||||
|
||||
## Components: themed primitives
|
||||
|
||||
These are Nuxt UI components with the Ledger config applied. Every specimen reads the real --ui-* variables, so the theme switch on the right changes the whole page. The product components are on a second page .
|
||||
|
||||
### Button
|
||||
|
||||
There are five roles. A screen gets one primary button. Danger is used only for irreversible actions, and always inside a confirmation step.
|
||||
|
||||
New article primary
|
||||
|
||||
Cancel secondary
|
||||
|
||||
Preview ghost
|
||||
|
||||
Delete article danger
|
||||
|
||||
icon-only
|
||||
|
||||
Save sm 28
|
||||
|
||||
Save md 32
|
||||
|
||||
Save lg 40
|
||||
|
||||
Save xl 44, touch
|
||||
|
||||
Publish default
|
||||
|
||||
Publish hover
|
||||
|
||||
Publish focus-visible
|
||||
|
||||
Publish active
|
||||
|
||||
Publish disabled
|
||||
|
||||
Publishing… loading
|
||||
|
||||
Delete article danger hover
|
||||
|
||||
Cancel secondary hover
|
||||
|
||||
Preview ghost hover
|
||||
|
||||
Nuxt UI UButton . Primary color="primary" variant="solid" · secondary color="neutral" variant="outline" · ghost color="neutral" variant="ghost" · danger color="error" variant="solid" · icon-only square icon="i-lucide-ellipsis" :aria-label wrapped in UTooltip .
|
||||
|
||||
Loading :loading swaps the leading icon for i-lucide-loader-circle and disables the button. The label changes to the -ing form ("Publishing…") and the button width stays fixed, so the layout doesn't jump. loading-auto is used on async @click handlers.
|
||||
|
||||
Keyboard, ARIA Native <button> , activated with Enter or Space. Icon-only buttons need an aria-label . Loading sets aria-busy="true" . Disabled buttons stay focusable only when a tooltip explains why they're disabled.
|
||||
|
||||
Responsive md on desktop, xl (44 px) below md . Primary page actions go full width in sticky footers on 390 px screens.
|
||||
|
||||
Bend Disabled opacity is 40% instead of Nuxt UI's 75%, because a 75% black button still looks clickable. Hover darkens the button one step instead of using Nuxt UI's /75 alpha, so the label keeps its contrast.
|
||||
|
||||
### Input, password input, textarea
|
||||
|
||||
One outline style for every field. Focus adds a 2 px ink ring inside the edge. Errors turn the edge brick red and always come with a message, never color alone.
|
||||
|
||||
marta default, placeholder
|
||||
|
||||
marta hover
|
||||
|
||||
mar focus
|
||||
|
||||
ma error
|
||||
|
||||
owner@renew.example disabled / read-only
|
||||
|
||||
plaster leading icon, clear
|
||||
|
||||
•••••••••• password, hidden
|
||||
|
||||
limewash2026 password, shown
|
||||
|
||||
A short first paragraph. You can keep writing in the editor. textarea, autoresize 3–8 rows
|
||||
|
||||
Nuxt UI UInput variant="outline" color="primary" , :highlight bound to the field error so the edge turns red. The search field is icon="i-lucide-search" with a #trailing clear UButton . UTextarea autoresize :rows="3" :maxrows="8" .
|
||||
|
||||
Password UInput :type="shown ? 'text' : 'password'" with a #trailing ghost UButton . aria-label reads "Show password" or "Hide password", with aria-pressed and aria-controls . autocomplete is current-password on log in and new-password on register and reset. Showing the password never clears or moves focus.
|
||||
|
||||
States Default, hover (edge goes to muted), focus (2 px ink), filled, error, disabled, read-only (same look as disabled but selectable and focusable, used for the email on the reset screen). Fields are 16 px text below md .
|
||||
|
||||
Placeholder Placeholders use --ui-text-muted (5.7:1) and only show an example. The label always carries the meaning.
|
||||
|
||||
### Form field
|
||||
|
||||
A label on top, then the control, then the help text or the error in the same spot. The right-hand hint slot holds the character counter. Every field in the product is required, so none are marked.
|
||||
|
||||
Username 5 / 20
|
||||
|
||||
marta 3 to 20 characters. You'll use it to log in.
|
||||
|
||||
Username 2 / 20
|
||||
|
||||
ma Use at least 3 characters.
|
||||
|
||||
Email marta@renew Enter a full email address, like name@example.com.
|
||||
|
||||
Nuxt UI UForm :schema :state @submit + UFormField name label help , with the counter in the #hint slot. Validation runs on blur and on submit, then on every input once a field has an error, so the error clears as soon as it's fixed. The schema mirrors the API rules exactly, so a validator 400 shouldn't reach the UI.
|
||||
|
||||
ARIA Nuxt UI links the label and aria-describedby (help or error) and sets aria-invalid . On a failed submit, focus moves to the first invalid field. Error text sits in the help slot, so there is no layout shift.
|
||||
|
||||
### Checkbox, switch, select
|
||||
|
||||
All three are square. The Preview toggle in the editor is the only switch. The select sets sort order in the mobile article list. No screen needs a checkbox yet, but it's themed so it matches if one gets added.
|
||||
|
||||
Off
|
||||
|
||||
On
|
||||
|
||||
Focus
|
||||
|
||||
Disabled
|
||||
|
||||
Preview off
|
||||
|
||||
Preview on
|
||||
|
||||
Focus
|
||||
|
||||
Disabled
|
||||
|
||||
Newest updated first
|
||||
|
||||
Newest updated first
|
||||
|
||||
Oldest updated first
|
||||
|
||||
Nuxt UI UCheckbox , USwitch (slots base and thumb set to rounded-none ), USelect :items value-key="value" , whose content uses --shadow-popover .
|
||||
|
||||
Keyboard Space toggles a checkbox or switch. The select opens with Enter, Space or ↓, moves with the arrow keys and type-ahead, and closes with Esc, returning focus to the trigger. The switch uses role="switch" and aria-checked , and its visible label is its name.
|
||||
|
||||
### Badge
|
||||
|
||||
Badges show status or a count. They never replace a button. Solid ink is for the one state that matters most in a list. Soft semantic badges are for system messages.
|
||||
|
||||
Online
|
||||
|
||||
Draft
|
||||
|
||||
12
|
||||
|
||||
success
|
||||
|
||||
info
|
||||
|
||||
warning
|
||||
|
||||
error
|
||||
|
||||
GET
|
||||
|
||||
Online · md
|
||||
|
||||
Nuxt UI UBadge . Solid ink color="neutral" variant="solid" · outline color="neutral" variant="outline" · count color="neutral" variant="soft" size="sm" · semantic variant="soft" . Sizes are sm (22 px, in tables) and md (26 px, in the editor header).
|
||||
|
||||
ARIA Badges are text, not live regions. When a status changes, the announcement comes from the toast.
|
||||
|
||||
### Alert
|
||||
|
||||
Alerts are for messages that belong to a page and stay until the situation changes. Anything that confirms an action someone just took is a toast instead.
|
||||
|
||||
Your session expired Log in again to pick up where you left off.
|
||||
|
||||
Password changed Log in with your new password.
|
||||
|
||||
Almost at the length limit 9 240 of 10 000 characters used. Images and formatting count too.
|
||||
|
||||
Couldn't load your articles Check your connection and try again.
|
||||
|
||||
Try again
|
||||
|
||||
Nuxt UI UAlert variant="soft" :color :icon :title :description :actions . close only on alerts that are safe to dismiss (password changed, session expired). The error alert has no close button because its retry is the way out.
|
||||
|
||||
ARIA Info, success and warning use role="status" and error uses role="alert" . Alerts that are already there when the page loads aren't announced again. The description text uses --ui-text-toned rather than the semantic color, so long text stays readable.
|
||||
|
||||
### Toast
|
||||
|
||||
Toasts confirm that an action finished or failed. Each one has a short title and, at most, one action.
|
||||
|
||||
Article published "Winter checklist for timber windows" is now online.
|
||||
|
||||
That article no longer exists It was deleted somewhere else, so we removed it from the list.
|
||||
|
||||
Couldn't unpublish The server didn't respond.
|
||||
|
||||
Retry
|
||||
|
||||
Placement Bottom right on desktop, 24 px from the edges. Bottom center at full width minus 16 px on mobile, above the sticky action bar.
|
||||
|
||||
Duration Success and info close after 5 s. Errors with retry stay until dismissed or retried. The timer pauses on hover and on focus.
|
||||
|
||||
Stack At most 3 visible, newest at the bottom. A fourth pushes out the oldest non-error toast. Repeating the same action replaces its toast instead of adding a new one.
|
||||
|
||||
Nuxt UI UApp :toaster="{ position: 'bottom-right', duration: 5000, max: 3 }" . Toasts are raised with useToast().add({ id, title, description, color, icon, actions, duration }) , where id is the action plus the article id so a repeat replaces the old toast. Errors use duration: 0 . The progress bar is off.
|
||||
|
||||
ARIA The Reka toast region announces politely, and errors assertively. F8 jumps to the region. Esc closes the focused toast.
|
||||
|
||||
### Modal and slideover
|
||||
|
||||
Modals ask a question or hold a short form. Slideovers carry navigation and side panels on small screens. Both sit over a 40% ink overlay.
|
||||
|
||||
Leave without saving? You have changes to "How we price a bathroom renovation" that haven't been saved.
|
||||
|
||||
Discard changes Keep editing
|
||||
|
||||
Details
|
||||
|
||||
Created 12 Mar 2026, 09:14 Updated Today, 11:02 ID 12 Images 3
|
||||
|
||||
Nuxt UI UModal :title :description with the #footer slot for actions, width sm:max-w-md . Opened programmatically with useOverlay().create(ConfirmDialog) . USlideover side="right" for details, side="left" for mobile navigation (built into UDashboardSidebar ).
|
||||
|
||||
Button order The safe action is primary and sits on the right, where the eye lands. In destructive confirmations, the danger button is on the right and Cancel on the left (see ConfirmDialog). On mobile the buttons stack full width, with the primary on top.
|
||||
|
||||
Keyboard, ARIA Focus is trapped and starts on the least destructive button. Esc and the overlay close it unless it's :dismissible="false" , which is used while an action is running. Focus returns to the trigger. The title is the aria-labelledby and the description is the aria-describedby .
|
||||
|
||||
Responsive Below sm , modals sit 16 px from the screen edges and slideovers take the full width. Motion follows the foundations: 240 ms, and instant with reduced motion.
|
||||
|
||||
### Dropdown menu and tooltip
|
||||
|
||||
The row-action menu is the main dropdown. Delete always comes last, below a separator, in brick red. Tooltips name icon-only buttons and show their keyboard shortcut.
|
||||
|
||||
Edit
|
||||
|
||||
Unpublish
|
||||
|
||||
Copy API URL
|
||||
|
||||
Delete…
|
||||
|
||||
Bold Ctrl B
|
||||
|
||||
Nuxt UI UDropdownMenu :items :content="{ align: 'end' }" , with items grouped in nested arrays so separators appear automatically. The Delete item is color: 'error' , and its label ends in "…" because it opens a confirmation. UTooltip :text :kbds="['ctrl', 'b']" :delay-duration="400" .
|
||||
|
||||
Keyboard The menu opens with Enter, Space or ↓. Arrow keys and type-ahead move through it, Home and End jump to the ends, and Esc closes it and returns focus. Tooltips appear on focus as well as hover and never hold information that isn't also in the aria-label .
|
||||
|
||||
Touch Tooltips don't show on touch, so every icon-only control on mobile also appears in a labeled menu or has a visible label.
|
||||
|
||||
### Tabs
|
||||
|
||||
Tabs filter the article list. Each count comes from the full list, so it doesn't change while you search.
|
||||
|
||||
All 6
|
||||
|
||||
Online 4
|
||||
|
||||
Drafts 2
|
||||
|
||||
Focused
|
||||
|
||||
From left: selected, default, hover, focus-visible.
|
||||
|
||||
Nuxt UI UTabs variant="link" color="neutral" :content="false" :items v-model . The count goes in the #trailing slot as the mono sm count badge. The value syncs to ?status=online|draft so the filtered view can be linked.
|
||||
|
||||
Keyboard Roving tabindex: Tab enters the tab list on the selected tab, and ← and → move and activate. Each tab's accessible name includes its count, for example "Drafts, 2 articles".
|
||||
|
||||
Responsive Tabs stay in one row at 360 px, which is why the labels are short. Each tab is 44 px tall on touch.
|
||||
|
||||
### Table and pagination
|
||||
|
||||
Rows are 44 px with hairline separators, and only the Updated column sorts. Pagination appears only when a filter shows more than 25 articles.
|
||||
|
||||
Title Status Updated
|
||||
|
||||
How we price a bathroom renovation default 2 hours ago
|
||||
|
||||
Choosing lime plaster for old stone walls hover Yesterday
|
||||
|
||||
Before and after: the Rue Verte kitchen focus-visible 3 days ago
|
||||
|
||||
Winter checklist for timber windows busy 5 days ago
|
||||
|
||||
26–50 of 142 1 2 3 … 6
|
||||
|
||||
Nuxt UI UTable :data :columns v-model:sorting v-model:global-filter v-model:pagination :loading with TanStack getPaginationRowModel , and @select for row click. UPagination :total :items-per-page="25" :sibling-count="1" show-edges , active item color="primary" variant="solid" .
|
||||
|
||||
States Default, hover ( bg-elevated ), focus-visible (2 px inset ring), busy (a row action is running: 50% opacity, a spinner in the status cell, aria-busy , actions disabled), loading (skeleton rows), empty (EmptyState in the #empty slot).
|
||||
|
||||
Keyboard, ARIA Each row's title is a real link to the editor, so Tab reaches it and Enter opens it. The rest of the row is a click target for the mouse only. The sort header is a button with aria-sort . Pagination is a nav labeled "Pages", and the current page has aria-current .
|
||||
|
||||
### Skeleton, avatar, kbd, separator
|
||||
|
||||
MA marta
|
||||
|
||||
JV jan_vries
|
||||
|
||||
BO bob
|
||||
|
||||
Ctrl
|
||||
|
||||
S
|
||||
|
||||
Save
|
||||
|
||||
Skeleton USkeleton blocks shaped like the real layout: the same row heights, a badge-sized block and a date-sized block. The pulse runs at 1.6 s and stops with reduced motion. The container is aria-busy="true" and a visually hidden live region says "Loading articles". Skeletons appear only after 150 ms, so fast responses never flash.
|
||||
|
||||
Avatar UAvatar :alt="username" size="xs|sm" . The initials come from the username: split on anything that isn't a letter or digit, take the first letter of the first two parts, or the first two letters if there is only one part, then uppercase. Sand #d4c5b0 with ink text (11.2:1) in both themes. It's decorative ( aria-hidden ) because the username is always shown next to it.
|
||||
|
||||
Kbd UKbd variant="outline" , only inside tooltips and the editor's shortcut hints. The editor shortcuts are Ctrl/⌘ S to save, plus TipTap's defaults: B, I, U, Z and Shift Z.
|
||||
|
||||
Separator USeparator uses --ui-border by default and --ui-border-accented between groups in dense toolbars. It's decorative, with role="none" , except between menu groups.
|
||||
|
||||
### Color mode
|
||||
|
||||
Three choices: System (the default), Light and Dark. The toggle at the top of this page is the component itself, so you can try it.
|
||||
|
||||
Nuxt UI In the user menu: a UDropdownMenu group of three type: 'checkbox' items bound to useColorMode().preference . On auth screens: UColorModeSelect in the footer. Nuxt UI's UColorModeButton isn't used because it only toggles between light and dark and hides the system option. colorMode: true in the plugin handles storage and applying the .dark class before first paint.
|
||||
|
||||
ARIA Menu items use menuitemcheckbox , with aria-checked on the current choice. The segmented variant is a radiogroup named "Theme".
|
||||
@@ -0,0 +1,14 @@
|
||||
# Emails
|
||||
|
||||
Go `html/template` files, ready to replace `internal/infrastructure/mailer/templates/`:
|
||||
|
||||
- `source/emails/verification.html` uses `{{.Host}}` and `{{.VerificationCode}}`, linking to `{{.Host}}/register/validate?c={{.VerificationCode}}`.
|
||||
- `source/emails/password-reset.html` uses `{{.Host}}`, `{{.VerificationCode}}` and `{{.Email}}`, linking to `{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}`.
|
||||
|
||||
Previews: `source/RenewCMS Emails.dc.html`.
|
||||
|
||||
## Transactional emails
|
||||
|
||||
Two Go html/template files: emails/verification.html and emails/password-reset.html . They use a table layout with inline CSS and a 600 px maximum width. The button is bulletproof: a colored table cell plus a padded link, so it survives Outlook. Each has a plain-URL fallback, a hidden preheader, and prefers-color-scheme overrides for clients that support them. The mark is live text in a black cell rather than an image, so it shows even when images are blocked. Previews below use example values.
|
||||
|
||||
Suggested subjects are "Verify your RenewCMS account" and "Reset your RenewCMS password". html/template escapes the .Email value for the query string in the reset link (the @ becomes %40), and the confirm route reads it back decoded.
|
||||
@@ -0,0 +1,167 @@
|
||||
# Foundations
|
||||
|
||||
Token source files (copy them into `web/src/theme/` in the Nuxt UI foundation slice, which then becomes the live source):
|
||||
|
||||
- `source/tokens/renewcms.css`: `@theme`, `:root`, `.dark` and the `.article-content` scale
|
||||
- `source/tokens/ui.config.ts`: Nuxt UI color aliases, icons and component `ui` overrides
|
||||
- `source/tokens/vite.config.ts`: the `@nuxt/ui/vite` plugin setup
|
||||
- `source/tokens/tokens.json`: the same values as data
|
||||
- `source/brand/favicon.svg`: the mark, dark-aware
|
||||
|
||||
Extracted from `source/RenewCMS Foundations.dc.html`:
|
||||
|
||||
## Ledger foundations
|
||||
|
||||
Everything below is generated from one set of files: tokens/renewcms.css (Tailwind @theme , :root , .dark , article content styles), tokens/ui.config.ts (Nuxt UI colors, icons and component overrides) and tokens/vite.config.ts . The tables on this page read those files, so they can't drift.
|
||||
|
||||
### Logo
|
||||
|
||||
The mark is a white R on a black square, drawn on a 16-pixel grid so it stays sharp as a favicon. It keeps the same geometry at every size. In dark mode the black square gets a 1 px #444 edge so it doesn't disappear into the background. The wordmark pairs the mark with RenewCMS in Plex Sans Semibold, with the text set at 0.6× the mark's height.
|
||||
|
||||
RenewCMS
|
||||
|
||||
16
|
||||
|
||||
32
|
||||
|
||||
64
|
||||
|
||||
128, app icon source for 180 / 512
|
||||
|
||||
Articles · RenewCMS
|
||||
|
||||
RenewCMS
|
||||
|
||||
16
|
||||
|
||||
32
|
||||
|
||||
64
|
||||
|
||||
128
|
||||
|
||||
Articles · RenewCMS
|
||||
|
||||
Favicon file: brand/favicon.svg . The 1 px edge switches on with prefers-color-scheme: dark . Keep clear space of at least half the mark's height around it. The R is never recolored or placed on sand.
|
||||
|
||||
### Color scales
|
||||
|
||||
Seven Tailwind color scales, each mapped to a Nuxt UI alias. The ink, chalk and sand scales are built on your brand values. The four semantic scales are new and deliberately muted: evenly spaced oklch lightness steps with low chroma, so they sit comfortably next to ink and sand.
|
||||
|
||||
### Theme variables
|
||||
|
||||
Every --ui-* variable Nuxt UI reads, for both themes. Surfaces are white. The #fafafa brand background is the page canvas behind them. The theme follows the system setting until the owner picks Light or Dark from the user menu, and that choice is stored by Nuxt UI's color mode.
|
||||
|
||||
Variable Used for Light Dark
|
||||
|
||||
### Contrast checks
|
||||
|
||||
Pair Needs Light Dark
|
||||
|
||||
### Typography
|
||||
|
||||
The interface uses IBM Plex Sans in three weights: 400, 500 and 600. IDs, paths, counters and code are set in IBM Plex Mono. Sizes replace Tailwind's text-* defaults. On screens narrower than md , form fields use 16 px so iOS doesn't zoom in when a field gets focus.
|
||||
|
||||
Before and after: the Rue Verte kitchen
|
||||
|
||||
GET /v1/article/12 · 8 412 / 10 000
|
||||
|
||||
font-mono · 13px / 20px · 400 Code, paths, IDs, counters
|
||||
|
||||
Article content uses a separate scale in Source Serif 4, applied through the .article-content class. The editor surface and the preview both use it, so what the owner writes looks like what a public site would roughly show. The measure is capped at 42 rem, about 70 characters per line.
|
||||
|
||||
Choosing lime plaster for old stone walls
|
||||
|
||||
Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on .
|
||||
|
||||
What we use
|
||||
|
||||
Hot-mixed lime for the base coat
|
||||
|
||||
Hair or fibre for the scratch coat
|
||||
|
||||
A thin lime putty finish
|
||||
|
||||
Drying time
|
||||
|
||||
It sets slowly, and that is the point.
|
||||
|
||||
Before you start
|
||||
|
||||
Strip loose material back to sound stone.
|
||||
|
||||
Wet the wall the evening before.
|
||||
|
||||
Article image
|
||||
|
||||
The north wall after the second coat.
|
||||
|
||||
Element md and up Below md, spacing
|
||||
|
||||
### Spacing, radius and density
|
||||
|
||||
Spacing uses Tailwind's 4 px base unit unchanged. Radius is 0 everywhere: setting --ui-radius: 0rem flattens every component that derives its corners from it, and rounded-none overrides cover the few that hard-code rounded-full . The density is compact on desktop. On touch screens, every tap target is at least 44 px.
|
||||
|
||||
Control Height and use
|
||||
|
||||
size="sm" 28 px · table row actions, toolbar buttons in the editor
|
||||
|
||||
size="md" 32 px · default on desktop: buttons, inputs, selects, tabs
|
||||
|
||||
size="lg" 40 px · auth forms, primary actions in dialogs
|
||||
|
||||
size="xl" 44 px · everything below md, via a responsive size prop
|
||||
|
||||
Table row 44 px on desktop, 64 px cards on mobile
|
||||
|
||||
Gutters 16 px on mobile, 24 px on desktop; sidebar 224 px, collapses to 56 px
|
||||
|
||||
### Borders and elevation
|
||||
|
||||
Most surfaces are flat and separated by hairlines. Shadows appear only on things that float above the page.
|
||||
|
||||
Hairline 1 px --ui-border . Cards, table edges, sidebar and top bar dividers. Decorative, so no contrast requirement.
|
||||
|
||||
Search by title
|
||||
|
||||
Control edge 1 px --ui-border-accented . Inputs, selects, checkboxes, outline buttons. 3.6:1 on white.
|
||||
|
||||
New article
|
||||
|
||||
Focus ring 2 px --ui-primary outline with a 2 px offset, shown only on :focus-visible . Nuxt UI's default, kept.
|
||||
|
||||
Edit
|
||||
|
||||
Unpublish
|
||||
|
||||
Popover --shadow-popover . Dropdown menus, selects, toasts. In dark mode it becomes a darker shadow plus the hairline.
|
||||
|
||||
Modal --shadow-modal over a 40% chalk-950 overlay. Modals and slideovers.
|
||||
|
||||
Layer z Contents
|
||||
|
||||
Breakpoint Min What changes
|
||||
|
||||
### Motion
|
||||
|
||||
Motion is there to show where something came from or that something is working. It is short and never decorative.
|
||||
|
||||
120 ms --duration-fast · ease-standard Hover and pressed colors, focus ring, the counter turning to warning, the switch thumb.
|
||||
|
||||
180 ms --duration-base · ease-enter / ease-exit Dropdowns and tooltips (fade plus a 4 px shift), the tab indicator, toasts sliding in, SaveStatus crossfades.
|
||||
|
||||
240 ms --duration-slow · ease-enter / ease-exit Modals (fade plus scale from 0.98), slideovers (slide from the edge), sidebar collapse.
|
||||
|
||||
Never animates Route changes, table rows sorting or filtering, numbers counting up, the logo, editor text, and anything that runs on page load.
|
||||
|
||||
Reduced motion With prefers-reduced-motion: reduce , every transition and animation completes instantly, skeletons stop pulsing and become flat blocks, and toasts appear without sliding. The one exception is the spinner on the automatic verification screen. It keeps turning, slowed to 1.6 s per rotation, because it is the only sign that work is happening.
|
||||
|
||||
### Icons
|
||||
|
||||
Lucide through Iconify, using Nuxt UI's i-lucide-* classes. Icons are 16 px next to 13–14 px text and 20 px on mobile top bars. They are always paired with a visible label or an aria-label . Each icon maps to one meaning: Eye is only ever show password, and Preview uses Book Open.
|
||||
|
||||
### Where Nuxt UI defaults bend
|
||||
|
||||
### Files
|
||||
|
||||
Ready to paste into the repository. They follow its code style: tabs, no semicolons, single quotes and no comments. The CSS goes in src/assets/main.css and the config in src/theme/ui.config.ts . Add class="isolate" to the app root, as Nuxt UI requires.
|
||||
@@ -0,0 +1,21 @@
|
||||
# Route map
|
||||
|
||||
A global `router.beforeEach` guard reads `meta.auth`. On the first navigation it resolves the session with `GET /v1/auth/me` and caches the result in the session store. `useApi` turns any 401 into `/login?redirect=<path>&reason=expired` and any 403 from an unverified account into `/register/pending`.
|
||||
|
||||
| Path | Layout | Auth | Screen | API calls |
|
||||
|---|---|---|---|---|
|
||||
| `/` | none | any | Redirect | none; goes to /home or /login |
|
||||
| `/login` | AuthShell | public | LoginPage | GET /v1/auth/registration · POST /v1/auth/login |
|
||||
| `/register` | AuthShell | public | RegisterPage | POST /v1/auth/register |
|
||||
| `/register/pending` | AuthShell | session | PendingPage | DELETE /v1/auth/register · POST /v1/auth/logout |
|
||||
| `/register/validate` | AuthShell | public | VerifyPage | POST /v1/auth/verify (+ POST /login inline on 401) |
|
||||
| `/register/reset/request` | AuthShell | public | ResetRequestPage | POST /v1/auth/password-reset |
|
||||
| `/register/reset/validate` | AuthShell | public | ResetConfirmPage | POST /v1/auth/password-reset/confirm |
|
||||
| `/home` | DashboardShell | verified | HomePage | GET /v1/article/ |
|
||||
| `/article` | DashboardShell | verified | ArticlesPage | GET /v1/article/ · PATCH /{id}/publish\|unpublish · DELETE /{id} |
|
||||
| `/article/new` | DashboardShell | verified | ArticlesPage + NewArticleModal | POST /v1/article/ |
|
||||
| `/article/:id/edit` | DashboardShell | verified | EditorPage | GET /{id} · PATCH /{id} · PATCH /{id}/publish\|unpublish · POST /{id}/image · DELETE /{id} |
|
||||
| `/integration` | DashboardShell | verified | IntegrationPage | none |
|
||||
| `/:pathMatch(.*)*` | either | any | NotFoundPage | none |
|
||||
|
||||
Auth values: `public` needs no session, `session` needs a logged-in account (verified or not), `verified` needs a verified account, `any` applies to redirects and the catch-all.
|
||||
@@ -0,0 +1,122 @@
|
||||
# Articles
|
||||
|
||||
- **Route:** `/article`
|
||||
- **API:** GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id}
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Articles" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Rows update when the server responds, not optimistically. Search, tab and sort are stored in the query string.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** The list loaded, sorted by last updated.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
|
||||
### Row menu open
|
||||
|
||||
**Trigger:** The ellipsis button, or Enter on the focused menu button.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Row "Winter checklist for timber windows": menu true, online false, updated "5 days ago"
|
||||
|
||||
### Loading
|
||||
|
||||
**Trigger:** The first load, or a retry.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- List: loading skeleton
|
||||
|
||||
### Empty
|
||||
|
||||
**Trigger:** The list is empty.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Tab counts (All, Online, Drafts): 0, 0, 0
|
||||
- EmptyState (file-text): **No articles yet** "Write your first one. It stays a draft until you publish it.", action "New article" (primary)
|
||||
|
||||
### No results
|
||||
|
||||
**Trigger:** Search matched nothing. The tab counts still show the full list.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Search query: "tiles"
|
||||
- EmptyState (search): **No articles match "tiles"** "Check the spelling, or search for a shorter part of the title.", action "Clear search"
|
||||
|
||||
### No drafts
|
||||
|
||||
**Trigger:** Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Active tab index: 2 (0 All, 1 Online, 2 Drafts)
|
||||
- Tab counts (All, Online, Drafts): 4, 4, 0
|
||||
- EmptyState (pencil-line): **No drafts** "Everything you've written is online.", action "New article"
|
||||
|
||||
### Action in progress
|
||||
|
||||
**Trigger:** Publish chosen from the row menu. That row is disabled.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Row "Winter checklist for timber windows": busy "Publishing…", online false, updated "5 days ago"
|
||||
|
||||
### Published
|
||||
|
||||
**Trigger:** 200: the row updates in place and a toast confirms.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Toast (success, circle-check): **Article published** ""Winter checklist for timber windows" is now online."
|
||||
|
||||
### Action failed
|
||||
|
||||
**Trigger:** A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Toast (error, circle-x): **Couldn't unpublish** "The server didn't respond. Nothing changed." with action "Retry"
|
||||
|
||||
### Row vanished (404)
|
||||
|
||||
**Trigger:** Any row action gets a 404.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Toast (info, info): **That article no longer exists** "It was deleted somewhere else, so we removed it from the list."
|
||||
- Tab counts (All, Online, Drafts): 5, 4, 1
|
||||
|
||||
### Delete: confirm
|
||||
|
||||
**Trigger:** Delete… from the row menu.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **Delete this article?**
|
||||
- text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
|
||||
- cancel "Cancel"
|
||||
- confirm "Delete article" (danger)
|
||||
|
||||
### Delete: in progress
|
||||
|
||||
**Trigger:** DELETE in flight. The dialog can't be dismissed.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **Delete this article?**
|
||||
- text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
|
||||
- cancel "Cancel"
|
||||
- confirm "Deleting…" (danger), loading, not dismissible
|
||||
|
||||
### Delete: failed
|
||||
|
||||
**Trigger:** 500, a partial failure where the article is kept. The error shows inside the dialog.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **Delete this article?**
|
||||
- text ""Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone."
|
||||
- Alert: "Couldn't delete the article, so it's still there. Try again in a moment."
|
||||
- cancel "Cancel"
|
||||
- confirm "Delete article" (danger)
|
||||
|
||||
### Deleted
|
||||
|
||||
**Trigger:** 204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Toast (success, circle-check): **Article deleted** ""Winter checklist for timber windows" and its images are gone."
|
||||
- Tab counts (All, Online, Drafts): 5, 4, 1
|
||||
@@ -0,0 +1,16 @@
|
||||
# App boot
|
||||
|
||||
- **Route:** `any route, first load`
|
||||
- **API:** GET /v1/auth/me (pending)
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Boot" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
While the session is checked, the shell renders with skeletons, never a spinner. The possible outcomes are: 200 with a verified user, which renders the route; 200 with an unverified user, which goes to /register/pending; and 401, which goes to /login?redirect=<path>. Public routes skip this check.
|
||||
|
||||
## States
|
||||
|
||||
### Checking session
|
||||
|
||||
**Trigger:** The first paint on any back-office URL, and usually visible for well under a second.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- boot: true
|
||||
@@ -0,0 +1,182 @@
|
||||
# Editor
|
||||
|
||||
- **Route:** `/article/:id/edit`
|
||||
- **API:** GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Editor" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".
|
||||
|
||||
## States
|
||||
|
||||
### Loading
|
||||
|
||||
**Trigger:** GET in flight. Skeletons for the title, content and details.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", loading true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Saved
|
||||
|
||||
**Trigger:** Just opened or just saved. Save is disabled.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Unsaved changes
|
||||
|
||||
**Trigger:** Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Saving
|
||||
|
||||
**Trigger:** Save, or Ctrl/⌘ S.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saving"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Save failed
|
||||
|
||||
**Trigger:** 500 or network failure. The changes are kept and Retry resends them.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "error"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Near the limit
|
||||
|
||||
**Trigger:** 90% of 10 000 HTML characters.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty", len 9240
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Too long
|
||||
|
||||
**Trigger:** Over 10 000. Save and Publish are disabled until it's shorter.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "dirty", len 10214
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Preview
|
||||
|
||||
**Trigger:** The Preview switch. Shows the title and body in the content scale, the way a public site might.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", preview true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: choose
|
||||
|
||||
**Trigger:** The image button in the toolbar, or a file dropped on the editor.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "idle"
|
||||
- cancel "Cancel"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: in progress
|
||||
|
||||
**Trigger:** A valid file is uploading. Closing the dialog cancels the upload.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "uploading"
|
||||
- cancel "Cancel upload"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: rejected
|
||||
|
||||
**Trigger:** Checked in the browser, so nothing is sent.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Add an image**
|
||||
- upload state: state "rejected"
|
||||
- cancel "Cancel"
|
||||
- confirm "Choose another file"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Upload: inserted
|
||||
|
||||
**Trigger:** 201: the image goes in at the cursor, and the article now has unsaved changes.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Toast (success, circle-check): **Image added** "Save to keep it in the article."
|
||||
- Editor: status "draft", save "dirty", image true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Publishing
|
||||
|
||||
**Trigger:** "Save and publish": the PATCH body, then the publish request.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saving", pending "Saving and publishing…"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Published
|
||||
|
||||
**Trigger:** 200: the badge flips, Unpublish is offered and a toast confirms.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Toast (success, circle-check): **Article published** ""How we price a bathroom renovation" is now online."
|
||||
- Editor: status "online", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Unpublishing
|
||||
|
||||
**Trigger:** Unpublish doesn't save pending edits.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "online", save "saved", pending "Unpublishing…"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Delete: confirm
|
||||
|
||||
**Trigger:** Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Delete this article?**
|
||||
- text ""How we price a bathroom renovation" and its 3 images will be deleted. This can't be undone."
|
||||
- cancel "Cancel"
|
||||
- confirm "Delete article" (danger)
|
||||
- Editor: status "draft", save "saved"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Leave with unsaved changes
|
||||
|
||||
**Trigger:** Back, a nav link or closing the tab.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Modal: **Leave without saving?**
|
||||
- text "Your changes to "How we price a bathroom renovation" haven't been saved."
|
||||
- cancel "Discard changes"
|
||||
- confirm "Keep editing"
|
||||
- Editor: status "draft", save "dirty"
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Offline
|
||||
|
||||
**Trigger:** The connection dropped. Writing continues, and Save and Publish wait.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "offline"
|
||||
- offline: true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
|
||||
### Not found (404)
|
||||
|
||||
**Trigger:** Unknown id, or the article was deleted elsewhere.
|
||||
|
||||
- Breadcrumbs: Articles › How we price a bathroom renovation (mobile title "Edit article")
|
||||
- Editor: status "draft", save "saved", notfound true
|
||||
- Mobile: leading arrow-left button, trailing ellipsis
|
||||
@@ -0,0 +1,68 @@
|
||||
# Forgot password
|
||||
|
||||
- **Route:** `/register/reset/request`
|
||||
- **API:** POST /v1/auth/password-reset
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Forgot password" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
The sent state reads the same whether or not the email exists, so the page doesn't reveal which emails have accounts.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** From "Forgot password?" on log in.
|
||||
|
||||
- Heading: **Reset your password**
|
||||
- Description: "Enter the email for your account and we'll send you a link to choose a new password."
|
||||
- Field `Email`: placeholder "you@example.com"
|
||||
- Submit button: "Send reset link"
|
||||
- Below the card: [Back to log in]
|
||||
|
||||
### Validation error
|
||||
|
||||
**Trigger:** Invalid email on submit. Nothing is sent.
|
||||
|
||||
- Heading: **Reset your password**
|
||||
- Description: "Enter the email for your account and we'll send you a link to choose a new password."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew"; **error "Enter a full email address, like name@example.com."**
|
||||
- Submit button: "Send reset link"
|
||||
- Below the card: [Back to log in]
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** Request in flight.
|
||||
|
||||
- Heading: **Reset your password**
|
||||
- Description: "Enter the email for your account and we'll send you a link to choose a new password."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
|
||||
- Submit button: "Sending…", loading
|
||||
- Below the card: [Back to log in]
|
||||
|
||||
### Sent
|
||||
|
||||
**Trigger:** Any 200, whether or not the account exists.
|
||||
|
||||
- ResultPanel (success, mail-check): **Check your email**; text "If an account exists for that email, a password reset link has been sent."; note "The link expires in 1 hour."; actions "Back to log in" (secondary)
|
||||
|
||||
### Too many attempts (429)
|
||||
|
||||
**Trigger:** Rate limit with Retry-After.
|
||||
|
||||
- Relied on an API marked pending in the design; that API now exists.
|
||||
- Alert (info, timer): **Too many requests** "Wait a moment before asking for another link."
|
||||
- Heading: **Reset your password**
|
||||
- Description: "Enter the email for your account and we'll send you a link to choose a new password."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
|
||||
- Submit button: "Try again in 0:58", disabled
|
||||
- Below the card: [Back to log in]
|
||||
|
||||
### Server error
|
||||
|
||||
**Trigger:** 500 or no response.
|
||||
|
||||
- Alert (error, circle-x): **Couldn't send the link** "Check your connection and try again."
|
||||
- Heading: **Reset your password**
|
||||
- Description: "Enter the email for your account and we'll send you a link to choose a new password."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"
|
||||
- Submit button: "Send reset link"
|
||||
- Below the card: [Back to log in]
|
||||
@@ -0,0 +1,39 @@
|
||||
# Global states
|
||||
|
||||
- **Route:** `any route`
|
||||
- **API:**
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Global" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
A 401 on any back-office call redirects to /login?redirect=<path>&reason=expired (see "Session expired" on the auth board). A 403 from an unverified account redirects to /register/pending. A 429 appears only on log in and password reset. Toasts sit bottom right on desktop and bottom center on mobile, at most 3 at once. Success and info last 5 s; errors stay until dismissed.
|
||||
|
||||
## States
|
||||
|
||||
### 404 inside the shell
|
||||
|
||||
**Trigger:** An unknown route while logged in. Logged out, the same content appears inside AuthShell.
|
||||
|
||||
- Breadcrumbs: Not found (mobile title "Not found")
|
||||
- err: {"code":"404","title":"Page not found","text":"The link may be mistyped, or the page may have moved.","primary":"Go to Home","secondary":"All articles"}
|
||||
|
||||
### Generic error
|
||||
|
||||
**Trigger:** An unexpected error while rendering a route.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- err: {"code":"Error","title":"Something went wrong","text":"This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.","primary":"Try again","secondary":"Go to Home"}
|
||||
|
||||
### Offline banner
|
||||
|
||||
**Trigger:** navigator.onLine is false. The banner is shown on every back-office page.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- offline: true
|
||||
|
||||
### Toast stack
|
||||
|
||||
**Trigger:** Three at most, newest at the bottom. A fourth pushes out the oldest non-error toast.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Toast (success, circle-check): **Article published** ""Winter checklist for timber windows" is now online."
|
||||
- Toast (info, info): **That article no longer exists** "It was deleted somewhere else, so we removed it from the list."
|
||||
- Toast (error, circle-x): **Couldn't unpublish** "The server didn't respond. Nothing changed." with action "Retry"
|
||||
@@ -0,0 +1,42 @@
|
||||
# Home
|
||||
|
||||
- **Route:** `/home`
|
||||
- **API:** GET /v1/article/
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Home" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
The counts come from the list, so there's no separate endpoint. The five most recently updated articles link to the editor.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** The articles loaded.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- Subtitle: "Here's where things stand on your site."
|
||||
- Stats: 6 articles, 4 online, 2 drafts
|
||||
- Recent: the 5 most recently updated articles, with status
|
||||
|
||||
### Loading
|
||||
|
||||
**Trigger:** The list request is in flight. Skeletons appear after 150 ms.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- Subtitle: "Here's where things stand on your site."
|
||||
- Stats and recent list: skeletons
|
||||
|
||||
### Empty, first run
|
||||
|
||||
**Trigger:** Zero articles: a single call to action, and no stats.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- Subtitle: "Welcome to RenewCMS."
|
||||
- First-run empty state instead of stats and recent list
|
||||
|
||||
### Error
|
||||
|
||||
**Trigger:** A 500 or network failure on the list request.
|
||||
|
||||
- Breadcrumbs: Home (mobile title "Home")
|
||||
- Subtitle: "Here's where things stand on your site."
|
||||
- Error state for the list request
|
||||
@@ -0,0 +1,22 @@
|
||||
# Connect your website
|
||||
|
||||
- **Route:** `/integration`
|
||||
- **API:** none (static)
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "Integration" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Written for a developer. The base URL is window.location.origin.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** Opened from the sidebar or the Home card.
|
||||
|
||||
- Breadcrumbs: Integration (mobile title "Integration")
|
||||
|
||||
### Copied
|
||||
|
||||
**Trigger:** The base URL was copied. The button reads "Copied" for 2 s and this is announced.
|
||||
|
||||
- Breadcrumbs: Integration (mobile title "Integration")
|
||||
- copied: true
|
||||
@@ -0,0 +1,107 @@
|
||||
# Log in
|
||||
|
||||
- **Route:** `/login`
|
||||
- **API:** GET /v1/auth/registration (pending) · POST /v1/auth/login
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Log in" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
After logging in, you go back to the page you originally asked for (?redirect=), or to /home. An unverified account goes to /register/pending. "Create the owner account" appears only when registration is open.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** Registration is closed, which is the usual case.
|
||||
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"
|
||||
- Field `Password`: password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Fresh install
|
||||
|
||||
**Trigger:** GET /v1/auth/registration returns { open: true }.
|
||||
|
||||
- Relied on an API marked pending in the design; that API now exists.
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"
|
||||
- Field `Password`: password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
- Footer: First time here? [Create the owner account]
|
||||
|
||||
### Validation errors
|
||||
|
||||
**Trigger:** Submit with a short username and an empty password. Nothing is sent.
|
||||
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "ma"; **error "Use at least 3 characters."**
|
||||
- Field `Password`: password with show/hide; link "Forgot password?"; **error "Enter your password."**
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** The request is in flight. Fields and button are disabled.
|
||||
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "marta"
|
||||
- Field `Password`: value "limewash2026"; password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Logging in…", loading
|
||||
|
||||
### Wrong credentials (403)
|
||||
|
||||
**Trigger:** The API doesn't say which field is wrong, so neither does the message. The password is cleared and gets focus.
|
||||
|
||||
- Alert (error, circle-x): **That username and password don't match** "Check both and try again. Passwords are case-sensitive."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "marta"
|
||||
- Field `Password`: password with show/hide; focused; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Too many attempts (429)
|
||||
|
||||
**Trigger:** Retry-After is counted down. The button re-enables at zero.
|
||||
|
||||
- Relied on an API marked pending in the design; that API now exists.
|
||||
- Alert (info, timer): **Too many attempts** "For your security, wait a moment before trying again."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "marta"
|
||||
- Field `Password`: value "limewash"; password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Try again in 0:42", disabled
|
||||
|
||||
### Session expired
|
||||
|
||||
**Trigger:** Redirected from a 401 with ?redirect=/article/12/edit&reason=expired. Unsaved edits are kept in the browser.
|
||||
|
||||
- Alert (info, clock): **Your session expired** "Log in again to pick up where you left off. Unsaved changes are kept on this device."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "marta"
|
||||
- Field `Password`: password with show/hide; focused; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Password changed
|
||||
|
||||
**Trigger:** Arrived from a successful reset with ?reason=password-changed.
|
||||
|
||||
- Alert (success, circle-check): **Password changed** "Log in with your new password."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"
|
||||
- Field `Password`: password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Server or network error
|
||||
|
||||
**Trigger:** A 500 or no response. The fields keep their values.
|
||||
|
||||
- Alert (error, circle-x): **Couldn't reach RenewCMS** "Check your connection and try again."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"; value "marta"
|
||||
- Field `Password`: value "limewash2026"; password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
@@ -0,0 +1,71 @@
|
||||
# New article
|
||||
|
||||
- **Route:** `modal from anywhere · /article/new`
|
||||
- **API:** POST /v1/article/
|
||||
- **Visual reference:** `source/RenewCMS Screens Back-office.dc.html`, group "New article" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Recommendation: a modal. It needs two fields, and keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** "New article" from Home, Articles or the empty state.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: placeholder "e.g. Choosing tiles for a small bathroom"; focused; counter "0 / 200"; help "3 to 200 characters."
|
||||
- field `First paragraph`: placeholder "Start writing. You'll continue in the editor."; textarea; help "You can format it and add images in the editor."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
|
||||
### Validation
|
||||
|
||||
**Trigger:** On submit or blur. Nothing is sent.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Ti"; counter "2 / 200" in error; **error "Use at least 3 characters."**
|
||||
- field `First paragraph`: textarea; **error "Add a first paragraph. It can be a single sentence."**
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** Request in flight. Fields are disabled and the dialog can't be dismissed.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- cancel "Cancel"
|
||||
- confirm "Creating…", loading, not dismissible
|
||||
|
||||
### Title rejected (400)
|
||||
|
||||
**Trigger:** A server 400 that got past the browser checks. The raw error isn't shown.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"; **error "Check this title and try again."**
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- Alert: "Something in the form isn't valid. Check the highlighted fields."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
|
||||
### Error
|
||||
|
||||
**Trigger:** 500 or network failure.
|
||||
|
||||
- Breadcrumbs: Articles (mobile title "Articles")
|
||||
- Modal: **New article**
|
||||
- text "It's saved as a draft. Titles can't be changed later, so check it now."
|
||||
- field `Title`: value "Choosing tiles for a small bathroom"; counter "35 / 200"
|
||||
- field `First paragraph`: value "Small rooms show every grout line, so we start with the floor."; textarea
|
||||
- Alert: "Couldn't create the article. Your text is still here. Try again in a moment."
|
||||
- cancel "Cancel"
|
||||
- confirm "Create draft"
|
||||
@@ -0,0 +1,61 @@
|
||||
# Check your email
|
||||
|
||||
- **Route:** `/register/pending`
|
||||
- **API:** DELETE /v1/auth/register · POST /v1/auth/logout
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Pending" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Any back-office route visited by an unverified account lands here. There's no way to resend the email because the API doesn't offer one, so the note explains the way out.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** Straight after registering, when the email is known from the form.
|
||||
|
||||
- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
|
||||
|
||||
### Email unknown
|
||||
|
||||
**Trigger:** Arrived after logging in as an unverified user.
|
||||
|
||||
- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to the email you registered with. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
|
||||
|
||||
### Confirm cancel
|
||||
|
||||
**Trigger:** "Cancel registration" opens the destructive ConfirmDialog.
|
||||
|
||||
- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
|
||||
- ConfirmDialog: **Cancel your registration?**
|
||||
- text "Your account will be deleted. You can register again with the same or a different email."
|
||||
- cancel "Keep my account"
|
||||
- confirm "Cancel registration"
|
||||
|
||||
### Cancelling
|
||||
|
||||
**Trigger:** DELETE in flight. The dialog can't be dismissed.
|
||||
|
||||
- ResultPanel (success, mail-check): **Check your email**; text "We sent a verification link to marta@renew.example. It expires in 2 hours."; note "Opened it on another device? That works too; you'll log in there first. Can't find it? Check your spam folder. If the link has expired, cancel your registration and start again."; actions "Log out" (secondary), "Cancel registration" (secondary)
|
||||
- ConfirmDialog: **Cancel your registration?**
|
||||
- text "Your account will be deleted. You can register again with the same or a different email."
|
||||
- cancel "Keep my account"
|
||||
- confirm "Cancelling…"
|
||||
|
||||
### Cancelled
|
||||
|
||||
**Trigger:** 200 → /register, with a toast.
|
||||
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; counter "0 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
|
||||
- Field `Email`: placeholder "you@example.com"; help "We'll send a verification link here."
|
||||
- Field `Password`: password with show/hide; checklist "At least 8 characters" (unmet)
|
||||
- Submit button: "Create account"
|
||||
- Footer: Already set up? [Log in]
|
||||
- Toast (circle-check): **Registration cancelled** "You can create the owner account again."
|
||||
|
||||
### Already verified (403)
|
||||
|
||||
**Trigger:** Verified on another device. Goes to /home; shown here as the toast over the destination.
|
||||
|
||||
- ResultPanel (success, shield-check): **You're verified**; text "Taking you to your dashboard…"
|
||||
- Toast (info): **Your account is already verified** "There's nothing to cancel."
|
||||
@@ -0,0 +1,76 @@
|
||||
# Create the owner account
|
||||
|
||||
- **Route:** `/register`
|
||||
- **API:** POST /v1/auth/register
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Register" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Seen once, on a fresh install. After registering, the new user is logged in but not yet verified, and goes to /register/pending.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** Registration is open.
|
||||
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; counter "0 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
|
||||
- Field `Email`: placeholder "you@example.com"; help "We'll send a verification link here."
|
||||
- Field `Password`: password with show/hide; checklist "At least 8 characters" (unmet)
|
||||
- Submit button: "Create account"
|
||||
- Footer: Already set up? [Log in]
|
||||
|
||||
### Validation errors
|
||||
|
||||
**Trigger:** Checked on blur and on submit, using the same rules as the API.
|
||||
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; value "ma"; counter "2 / 20" in error; **error "Use 3 to 20 characters."**
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew"; **error "Enter a full email address, like name@example.com."**
|
||||
- Field `Password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
|
||||
- Submit button: "Create account"
|
||||
- Footer: Already set up? [Log in]
|
||||
|
||||
### Filled, valid
|
||||
|
||||
**Trigger:** Every rule is met and the checklist item turns green.
|
||||
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
|
||||
- Field `Password`: value "limewash2026"; password with show/hide; password shown; checklist "At least 8 characters" (met)
|
||||
- Submit button: "Create account"
|
||||
- Footer: Already set up? [Log in]
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** Fields and button are disabled.
|
||||
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
|
||||
- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
|
||||
- Submit button: "Creating account…", loading
|
||||
- Footer: Already set up? [Log in]
|
||||
|
||||
### Registration closed (403)
|
||||
|
||||
**Trigger:** Someone already verified an owner account. The form is replaced.
|
||||
|
||||
- ResultPanel (info, user-x): **This site already has an owner**; text "Log in instead."; actions "Go to log in" (primary)
|
||||
|
||||
### Server error
|
||||
|
||||
**Trigger:** A 500 or no response. The values are kept.
|
||||
|
||||
- Alert (error, circle-x): **Couldn't create the account** "Something went wrong on the server. Try again in a moment."
|
||||
- Heading: **Create the owner account**
|
||||
- Description: "This creates the single admin account for this site. Once it's verified, registration closes."
|
||||
- Field `Username`: placeholder "e.g. marta"; value "marta"; counter "5 / 20"; help "Letters and numbers, 3 to 20 characters. You'll use it to log in."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; help "We'll send a verification link here."
|
||||
- Field `Password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
|
||||
- Submit button: "Create account"
|
||||
- Footer: Already set up? [Log in]
|
||||
@@ -0,0 +1,76 @@
|
||||
# Choose a new password
|
||||
|
||||
- **Route:** `/register/reset/validate?c=CODE&email=EMAIL`
|
||||
- **API:** POST /v1/auth/password-reset/confirm
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Reset password" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Opened from the reset email. The email comes from the URL and is read-only. The confirm field is checked only in the browser.
|
||||
|
||||
## States
|
||||
|
||||
### Default
|
||||
|
||||
**Trigger:** Both parameters are present.
|
||||
|
||||
- Heading: **Choose a new password**
|
||||
- Description: "Pick something you haven't used here before. You'll log in with it next."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
|
||||
- Field `New password`: password with show/hide; checklist "At least 8 characters" (unmet)
|
||||
- Field `Confirm new password`: password with show/hide; checklist "Passwords match" (unmet)
|
||||
- Submit button: "Change password"
|
||||
|
||||
### Too short
|
||||
|
||||
**Trigger:** On submit, with fewer than 8 characters.
|
||||
|
||||
- Heading: **Choose a new password**
|
||||
- Description: "Pick something you haven't used here before. You'll log in with it next."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
|
||||
- Field `New password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
|
||||
- Field `Confirm new password`: value "lime"; password with show/hide; checklist "Passwords match" (met)
|
||||
- Submit button: "Change password"
|
||||
|
||||
### Mismatch
|
||||
|
||||
**Trigger:** On blur of the confirm field, or on submit.
|
||||
|
||||
- Heading: **Choose a new password**
|
||||
- Description: "Pick something you haven't used here before. You'll log in with it next."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
|
||||
- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
|
||||
- Field `Confirm new password`: value "limewash2025"; password with show/hide; **error "The passwords don't match."**; checklist "Passwords match" (err)
|
||||
- Submit button: "Change password"
|
||||
|
||||
### Submitting
|
||||
|
||||
**Trigger:** Request in flight.
|
||||
|
||||
- Heading: **Choose a new password**
|
||||
- Description: "Pick something you haven't used here before. You'll log in with it next."
|
||||
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
|
||||
- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
|
||||
- Field `Confirm new password`: value "limewash2026"; password with show/hide; checklist "Passwords match" (met)
|
||||
- Submit button: "Changing password…", loading
|
||||
|
||||
### Success
|
||||
|
||||
**Trigger:** 200 → /login?reason=password-changed.
|
||||
|
||||
- Alert (success, circle-check): **Password changed** "Log in with your new password."
|
||||
- Heading: **Log in**
|
||||
- Description: "Welcome back. Log in to manage your articles."
|
||||
- Field `Username`: placeholder "Your username"
|
||||
- Field `Password`: password with show/hide; link "Forgot password?"
|
||||
- Submit button: "Log in"
|
||||
|
||||
### Invalid or expired (403)
|
||||
|
||||
**Trigger:** The code is wrong, used, or older than 1 hour.
|
||||
|
||||
- ResultPanel (error, link-2-off): **This reset link has expired**; text "Reset links work once, for 1 hour. Request a new one and use it within the hour."; actions "Request a new link" (primary), "Back to log in" (secondary)
|
||||
|
||||
### Missing parameters
|
||||
|
||||
**Trigger:** The link has no c or no email. No request is made.
|
||||
|
||||
- ResultPanel (error, link-2-off): **This link is incomplete**; text "Part of the reset link is missing. Open it from your email again, or request a new one."; actions "Request a new link" (primary)
|
||||
@@ -0,0 +1,50 @@
|
||||
# Verify account
|
||||
|
||||
- **Route:** `/register/validate?c=CODE`
|
||||
- **API:** POST /v1/auth/verify
|
||||
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Verify" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
|
||||
|
||||
Opened from the verification email, and submits automatically on load. This is the only full-card spinner in the product.
|
||||
|
||||
## States
|
||||
|
||||
### Verifying
|
||||
|
||||
**Trigger:** On load, with a code in the URL.
|
||||
|
||||
- Full-card spinner: "Verifying your account…"
|
||||
|
||||
### Success
|
||||
|
||||
**Trigger:** 200 → /home after 800 ms, with a toast.
|
||||
|
||||
- ResultPanel (success, shield-check): **Your account is verified**; text "Taking you to your dashboard…"
|
||||
- Toast (circle-check): **Your account is verified** "Welcome to RenewCMS."
|
||||
|
||||
### Invalid or expired (403)
|
||||
|
||||
**Trigger:** The code is wrong, used, or older than 2 hours.
|
||||
|
||||
- ResultPanel (error, link-2-off): **This verification link doesn't work**; text "It may have expired (links last 2 hours) or already been used."; note "Cancel your registration and start over to get a new link."; actions "Cancel registration and start over" (primary), "Log out" (secondary)
|
||||
|
||||
### No session (401)
|
||||
|
||||
**Trigger:** Opened in another browser or device. Log in inline, then verification retries automatically with the same code.
|
||||
|
||||
- Heading: **Log in to finish verifying**
|
||||
- Description: "You opened this link somewhere you're not logged in. Log in here and we'll verify your account right after."
|
||||
- Field `Username`: placeholder "Your username"
|
||||
- Field `Password`: password with show/hide
|
||||
- Submit button: "Log in and verify"
|
||||
|
||||
### No session, retrying
|
||||
|
||||
**Trigger:** Logged in inline. Now verifying.
|
||||
|
||||
- Full-card spinner: "Verifying your account…"
|
||||
|
||||
### Missing code
|
||||
|
||||
**Trigger:** The link has no ?c= parameter. No request is made.
|
||||
|
||||
- ResultPanel (error, link-2-off): **This link is incomplete**; text "The verification code is missing. Open the link from your email again, or copy the full address into your browser."; actions "Go to log in" (secondary)
|
||||
@@ -0,0 +1,313 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<div style="width:{{ fw }};height:{{ fh }};position:relative;display:flex;flex-direction:{{ dir }};background:var(--ui-bg-muted);color:var(--ui-text);font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;overflow:hidden">
|
||||
<sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
|
||||
<sc-for list="{{ nav }}" as="n" hint-placeholder-count="3">
|
||||
<div data-act="nav-{{ n.key }}" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:{{ n.bg }};color:{{ n.fg }};font-weight:{{ n.fw }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}</div>
|
||||
</sc-for>
|
||||
<div style="flex:1"></div>
|
||||
<sc-if value="{{ s.boot }}"><div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px"><span style="width:26px;height:26px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
|
||||
<sc-if value="{{ notBoot }}"><div data-act="logout" title="Log out" style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px"><span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span><span style="flex:1;color:var(--ui-text-highlighted)">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat"></span></div></sc-if>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="flex:1;min-width:0;min-height:0;display:flex;flex-direction:column">
|
||||
<sc-if value="{{ desk }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="height:48px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 24px;gap:8px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat"></span><span style="width:1px;height:16px;background:var(--ui-border);margin:0 6px"></span><sc-for list="{{ crumbs }}" as="c" hint-placeholder-count="1"><sc-if value="{{ c.sep }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></sc-if><span style="color:{{ c.fg }};font-weight:{{ c.fw }}">{{ c.t }}</span></sc-for></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ mob }}">
|
||||
<div style="height:56px;flex-shrink:0;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 6px;gap:4px;color:var(--ui-text-highlighted)"><span data-act="m-lead" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ mLead }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ mLead }}.svg') center / contain no-repeat"></span></span><span style="flex:1;min-width:0;font-weight:600;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ s.mTitle }}</span><sc-if value="{{ s.mAction }}"><span data-act="m-action" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.mAction }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.mAction }}.svg') center / contain no-repeat"></span></span></sc-if></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.offline }}"><div role="status" style="flex-shrink:0;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat"></span><span style="flex:1">You're offline. You can keep writing, but saving and publishing will wait until you're back online.</span></div></sc-if>
|
||||
|
||||
<div style="flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column">
|
||||
|
||||
<sc-if value="{{ isBoot }}">
|
||||
<div aria-busy="true" style="padding:{{ pad }};display:flex;flex-direction:column;gap:24px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="width:220px;height:22px;background:var(--ui-bg-accented)"></span><span style="width:320px;max-width:80%;height:12px;background:var(--ui-bg-accented)"></span></div>
|
||||
<div style="display:grid;grid-template-columns:{{ cols3 }};gap:12px"><span style="height:88px;background:var(--ui-bg-accented)"></span><span style="height:88px;background:var(--ui-bg-accented)"></span><span style="height:88px;background:var(--ui-bg-accented)"></span></div>
|
||||
<span style="height:220px;background:var(--ui-bg-accented)"></span>
|
||||
<span style="align-self:flex-start;height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">API pending · GET /v1/auth/me</span>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isHome }}">
|
||||
<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:{{ gap }};max-width:1040px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:4px"><span style="font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Good morning, marta</span><span style="color:var(--ui-text-muted);font-size:14px">{{ s.home.sub }}</span></div><sc-if value="{{ desk }}"><span data-act="new" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></sc-if></div>
|
||||
<sc-if value="{{ s.home.error }}"><div role="alert" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:8px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Couldn't load your articles</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span></div></div></sc-if>
|
||||
<sc-if value="{{ s.home.stats }}">
|
||||
<div style="display:grid;grid-template-columns:{{ cols3 }};gap:12px">
|
||||
<sc-for list="{{ s.home.stats }}" as="k" hint-placeholder-count="3"><div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:16px;display:flex;flex-direction:column;gap:4px"><sc-if value="{{ k.skel }}"><span style="width:40px;height:28px;background:var(--ui-bg-accented)"></span><span style="width:70px;height:12px;background:var(--ui-bg-accented)"></span></sc-if><sc-if value="{{ k.n }}"><span style="font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ k.n }}</span><span style="color:var(--ui-text-muted)">{{ k.l }}</span></sc-if></div></sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.home.empty }}">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:48px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:18px;color:var(--ui-text-highlighted)">Write your first article</span><span style="color:var(--ui-text-muted);max-width:340px;font-size:14px;line-height:22px">It starts as a draft, so nothing appears on your site until you publish it.</span><span data-act="new" style="height:{{ btnH }};padding:0 16px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.home.recent }}">
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;align-items:baseline;justify-content:space-between"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Recently updated</span><span data-act="nav-articles" style="color:var(--ui-text-toned);text-decoration:underline;text-underline-offset:3px">All articles</span></div>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<sc-for list="{{ s.home.recent }}" as="a" hint-placeholder-count="5">
|
||||
<div data-act="open-{{ a.id }}" style="display:flex;align-items:center;gap:12px;min-height:{{ rowH }};padding:8px 12px;border-top:1px solid var(--ui-border-muted)">
|
||||
<sc-if value="{{ a.skel }}"><span style="flex:1;height:12px;background:var(--ui-bg-accented);max-width:60%"></span><span style="width:56px;height:20px;background:var(--ui-bg-accented)"></span></sc-if>
|
||||
<sc-if value="{{ a.t }}"><span style="flex:1;min-width:0;font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{{ a.t }}</span><sc-if value="{{ a.on }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><sc-if value="{{ desk }}"><span style="width:110px;text-align:right;color:var(--ui-text-muted)">{{ a.u }}</span></sc-if></sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:16px;display:flex;gap:14px;align-items:flex-start"><span style="width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--rc-sand);color:#111"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Connect your website</span><span style="color:var(--ui-text-muted);text-wrap:pretty">Your site reads published articles from RenewCMS. Share this guide with whoever builds it.</span><span data-act="nav-integration" style="color:var(--ui-text-highlighted);font-weight:500;text-decoration:underline;text-underline-offset:3px;margin-top:4px">Open the guide</span></div></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isList }}">
|
||||
<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:16px;flex:1;min-height:0">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted)">Everything you've written, online and in draft.</span></div><sc-if value="{{ desk }}"><span data-act="new" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></sc-if></div>
|
||||
<div style="display:flex;flex-direction:{{ tbDir }};gap:{{ tbGap }};border-bottom:{{ tbBorder }}">
|
||||
<sc-if value="{{ mob }}"><span style="height:44px;padding:0 4px 0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }};font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
|
||||
<div style="display:flex;gap:20px;flex:1;border-bottom:{{ tabBorder }}"><sc-for list="{{ tabs }}" as="t" hint-placeholder-count="3"><span style="height:{{ tabH }};display:flex;align-items:center;gap:6px;border-bottom:2px solid {{ t.line }};margin-bottom:-1px;font-weight:{{ t.fw }};color:{{ t.fg }};font-size:{{ tabF }}">{{ t.t }}<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ t.n }}</span></span></sc-for></div>
|
||||
<sc-if value="{{ desk }}"><span style="width:260px;height:32px;margin-bottom:6px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:{{ qFg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span><span style="flex:1">{{ qText }}</span><sc-if value="{{ s.list.q }}"><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></span></sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ s.list.empty }}">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:56px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.list.empty.icon }}.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ s.list.empty.title }}</span><span style="color:var(--ui-text-muted);max-width:280px">{{ s.list.empty.text }}</span><span data-act="empty" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;font-weight:500;background:{{ emptyBg }};color:{{ emptyFg }};border:1px solid {{ emptyBd }}">{{ s.list.empty.action }}</span></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ showTable }}">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
|
||||
<sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
|
||||
<div data-act="open-{{ a.id }}" style="display:grid;grid-template-columns:minmax(0,1fr) 110px 130px 140px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:{{ a.bg }};opacity:{{ a.op }};position:relative">
|
||||
<sc-if value="{{ a.skel }}"><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span style="width:80px;height:12px;background:var(--ui-bg-accented)"></span><span></span></sc-if>
|
||||
<sc-if value="{{ a.t }}">
|
||||
<span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.t }}</span>
|
||||
<span><sc-if value="{{ a.busy }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></span>
|
||||
<span style="color:var(--ui-text-muted)">{{ a.c }}</span><span style="color:var(--ui-text-muted)">{{ a.u }}</span>
|
||||
<span data-act="menu-{{ a.id }}" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);background:{{ a.menuBg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
|
||||
<sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:12px;top:40px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ showCards }}">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);margin:0 -16px;border-left:0;border-right:0">
|
||||
<sc-for list="{{ rows }}" as="a" hint-placeholder-count="6">
|
||||
<div data-act="open-{{ a.id }}" style="position:relative;display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;border-bottom:1px solid var(--ui-border);min-height:68px;opacity:{{ a.op }}">
|
||||
<sc-if value="{{ a.skel }}"><div style="flex:1;display:flex;flex-direction:column;gap:8px"><span style="width:70%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:40%;height:12px;background:var(--ui-bg-accented)"></span></div></sc-if>
|
||||
<sc-if value="{{ a.t }}"><div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.busy }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ a.busy }}</span></sc-if><sc-if value="{{ a.showOn }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.showDraft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div><span data-act="menu-{{ a.id }}" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span></sc-if><sc-if value="{{ a.menu }}"><div role="menu" style="position:absolute;right:8px;top:56px;z-index:2;width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px"><div data-act="open-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div><div data-act="pub-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ a.menuIcon }}.svg') center / contain no-repeat"></span>{{ a.menuPub }}</div><div data-act="copyurl" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div><div style="height:1px;background:var(--ui-border);margin:4px 0"></div><div data-act="del-{{ a.id }}" style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div></div></sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ mob }}"><sc-if value="{{ listFab }}"><div data-act="new" style="position:absolute;left:16px;right:16px;bottom:16px;height:48px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:15px;box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</div></sc-if></sc-if>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isEditor }}">
|
||||
<sc-if value="{{ s.ed.notfound }}">
|
||||
<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:14px;max-width:560px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">404</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">This article doesn't exist</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">It may have been deleted, or the link is wrong.</span><span data-act="nav-articles" style="align-self:flex-start;height:{{ btnH }};padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">All articles</span></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ edFound }}">
|
||||
<div style="flex-shrink:0;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);padding:{{ edHeadPad }};display:flex;flex-wrap:wrap;align-items:center;gap:{{ edHeadGap }}">
|
||||
<sc-if value="{{ desk }}"><span data-act="back" style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat"></span></span></sc-if>
|
||||
<div style="flex:1 1 {{ edTitleBasis }};min-width:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap">
|
||||
<sc-if value="{{ s.ed.loading }}"><span style="width:320px;max-width:70%;height:20px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:22px;background:var(--ui-bg-accented)"></span></sc-if>
|
||||
<sc-if value="{{ edReady }}"><span title="The title can't be changed after creation." style="font:600 18px/26px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ edTitle }}</span><sc-if value="{{ edPending }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>{{ s.ed.pending }}</span></sc-if><sc-if value="{{ edOnline }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ edDraft }}"><span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ edReady }}">
|
||||
<span aria-live="polite" style="display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;color:{{ save.fg }}"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ save.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ save.icon }}.svg') center / contain no-repeat"></span>{{ save.t }}<sc-if value="{{ save.retry }}"><span data-act="save" style="height:24px;padding:0 8px;display:flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Retry</span></sc-if></span>
|
||||
<sc-if value="{{ mob }}"><span style="flex:1"></span><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ counter.fg }}">{{ counter.t }}</span></sc-if>
|
||||
<sc-if value="{{ desk }}">
|
||||
<span data-act="preview" style="display:flex;align-items:center;gap:8px;white-space:nowrap;flex-shrink:0;color:var(--ui-text-toned)"><span style="width:32px;height:18px;padding:2px;display:flex;justify-content:{{ pvJust }};background:{{ pvBg }}"><span style="width:14px;height:14px;background:var(--ui-bg)"></span></span>Preview</span>
|
||||
<span data-act="save" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;opacity:{{ saveOp }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat"></span>Save</span>
|
||||
<span data-act="publish" style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;white-space:nowrap;flex-shrink:0;font-weight:500;background:{{ pub.bg }};color:{{ pub.fg }};border:1px solid {{ pub.bd }};opacity:{{ pub.op }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ pub.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ pub.icon }}.svg') center / contain no-repeat"></span>{{ pub.t }}</span>
|
||||
<span data-act="overflow" style="width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
|
||||
</sc-if>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ showToolbar }}">
|
||||
<div role="toolbar" aria-label="Formatting" style="flex-shrink:0;padding:6px {{ tbPadX }};display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--ui-border);overflow:hidden;background:var(--ui-bg)">
|
||||
<sc-for list="{{ toolbar }}" as="t" hint-placeholder-count="20"><sc-if value="{{ t.sep }}"><span style="width:1px;height:20px;background:var(--ui-border-accented);margin:0 6px;flex-shrink:0"></span></sc-if><sc-if value="{{ t.btn }}"><span data-act="tb-{{ t.icon }}" style="height:{{ tbBtn }};min-width:{{ tbBtn }};padding:0 6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ui-text-toned);background:{{ t.bg }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.text }}</span></sc-if></sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
<div style="flex:1;min-height:0;display:flex">
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;background:{{ edBg }}">
|
||||
<div data-act="type" style="flex:1;min-height:0;overflow:hidden;padding:{{ edPad }};font-family:'Source Serif 4',serif;color:var(--ui-text-highlighted)">
|
||||
<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:14px;max-width:672px"><span style="height:14px;background:var(--ui-bg-accented)"></span><span style="height:14px;background:var(--ui-bg-accented);width:92%"></span><span style="height:14px;background:var(--ui-bg-accented);width:80%"></span><span style="height:22px;background:var(--ui-bg-accented);width:45%;margin-top:18px"></span><span style="height:14px;background:var(--ui-bg-accented)"></span><span style="height:14px;background:var(--ui-bg-accented);width:70%"></span></div></sc-if>
|
||||
<sc-if value="{{ edReady }}">
|
||||
<div style="max-width:672px;margin:{{ edMargin }}">
|
||||
<sc-if value="{{ s.ed.preview }}"><div style="font-size:{{ h1F }};line-height:1.25;font-weight:600;margin:0 0 20px">{{ edTitle }}</div></sc-if>
|
||||
<sc-if value="{{ sampleBody }}"><p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and <strong>write down what stays</strong>.</p>
|
||||
<div style="font-size:{{ h2F }};line-height:1.3;font-weight:600;margin:32px 0 12px">What goes into the price</div>
|
||||
<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:{{ pF }};line-height:1.66"><li>Stripping out and making good</li><li>Plumbing moves, if any</li><li>Tiles, fittings and a day for silicone</li></ul>
|
||||
<sc-if value="{{ s.ed.image }}"><div style="margin:28px 0;aspect-ratio:16/9;background:var(--ui-bg-elevated);border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);font:400 13px 'IBM Plex Sans',sans-serif">/static/uploadedImages/3f9c…e1.jpg</div></sc-if>
|
||||
<p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">We don't add a margin on materials you choose yourself.<sc-if value="{{ caret }}"><span style="display:inline-block;width:2px;height:1.1em;background:var(--ui-text-highlighted);vertical-align:-3px;margin-left:1px"></span></sc-if></p></sc-if><sc-if value="{{ edBody }}"><p style="margin:0 0 20px;font-size:{{ pF }};line-height:1.66">{{ edBody }}<sc-if value="{{ caret }}"><span style="display:inline-block;width:2px;height:1.1em;background:var(--ui-text-highlighted);vertical-align:-3px;margin-left:1px"></span></sc-if></p><sc-if value="{{ s.ed.image }}"><div style="margin:28px 0;aspect-ratio:16/9;background:var(--ui-bg-elevated);border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);font:400 13px 'IBM Plex Sans',sans-serif">/static/uploadedImages/3f9c…e1.jpg</div></sc-if></sc-if>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ desk }}"><sc-if value="{{ showToolbar }}"><div style="flex-shrink:0;padding:8px 24px;border-top:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;gap:12px"><span style="flex:1;color:{{ counter.fg }};font-size:12px">{{ counter.msg }}</span><span style="display:flex;align-items:center;gap:6px;font:400 12px 'IBM Plex Mono',monospace;color:{{ counter.fg }}"><sc-if value="{{ counter.icon }}"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ counter.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ counter.icon }}.svg') center / contain no-repeat"></span></sc-if>{{ counter.t }}</span></div></sc-if></sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ desk }}">
|
||||
<div style="width:280px;flex-shrink:0;border-left:1px solid var(--ui-border);background:var(--ui-bg);padding:20px;display:flex;flex-direction:column;gap:16px">
|
||||
<span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">Details</span>
|
||||
<sc-if value="{{ s.ed.loading }}"><div style="display:flex;flex-direction:column;gap:10px"><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;background:var(--ui-bg-accented)"></span><span style="height:12px;width:60%;background:var(--ui-bg-accented)"></span></div></sc-if>
|
||||
<sc-if value="{{ edReady }}">
|
||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>{{ imgCount }}</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace"><span style="flex:1">/v1/article/12</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ apiNote }}</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;padding-top:12px;border-top:1px solid var(--ui-border)"><span style="color:var(--ui-text-muted)">Title</span><span style="font-size:12px;line-height:18px;color:var(--ui-text-toned)">Titles can't be changed after an article is created. To use a different title, create a new article and delete this one.</span></div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ mob }}"><sc-if value="{{ edReady }}">
|
||||
<div style="flex-shrink:0;padding:12px 16px;border-top:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;gap:8px">
|
||||
<sc-if value="{{ counter.msg }}"><span style="color:{{ counter.fg }};font-size:13px;line-height:19px">{{ counter.msg }}</span></sc-if>
|
||||
<div style="display:flex;gap:8px"><span data-act="details" style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/panel-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-right.svg') center / contain no-repeat"></span></span><span data-act="save" style="flex:1;height:44px;padding:0 12px;white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:15px;opacity:{{ saveOp }}">Save</span><span data-act="publish" style="flex:1 0 auto;padding:0 16px;white-space:nowrap;height:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500;font-size:15px;background:{{ pub.bg }};color:{{ pub.fg }};border:1px solid {{ pub.bd }};opacity:{{ pub.op }}">{{ pub.t }}</span></div>
|
||||
</div>
|
||||
</sc-if></sc-if>
|
||||
</sc-if>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isInteg }}">
|
||||
<div style="padding:{{ pad }};display:flex;flex-direction:column;gap:24px;max-width:860px;overflow:hidden">
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Connect your website</span><span style="color:var(--ui-text-muted)">A guide for the developer who builds your public site.</span></div>
|
||||
<p style="margin:0;font-size:14px;line-height:22px;color:var(--ui-text-toned);text-wrap:pretty">RenewCMS is headless: it stores and publishes your articles but doesn't show them to visitors. Your website fetches published articles from the two addresses below and displays them in its own design.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Base URL</span><div style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)"><span style="flex:1;min-width:0;height:40px;padding:0 12px;display:flex;align-items:center;font:400 13px 'IBM Plex Mono',monospace;overflow:hidden;white-space:nowrap">https://cms.renew.example</span><span data-act="copy" style="height:40px;padding:0 12px;display:flex;align-items:center;gap:6px;border-left:1px solid var(--ui-border-accented);font-weight:500;color:{{ copyFg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat"></span>{{ copyText }}</span></div></div>
|
||||
<sc-for list="{{ endpoints }}" as="e" hint-placeholder-count="2">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<div style="padding:16px;display:flex;flex-direction:column;gap:8px;border-bottom:1px solid var(--ui-border)"><div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font:500 12px 'IBM Plex Mono',monospace">GET</span><span style="font:500 14px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">{{ e.path }}</span></div><span style="color:var(--ui-text-toned)">{{ e.desc }}</span></div>
|
||||
<div style="display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--ui-border)"><span style="height:36px;display:flex;align-items:center;border-bottom:2px solid {{ e.l1 }};margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">fetch</span><span style="height:36px;display:flex;align-items:center;color:var(--ui-text-toned)">curl</span><span style="height:36px;display:flex;align-items:center;color:var(--ui-text-toned)">Response</span></div>
|
||||
<div style="background:var(--ui-bg-elevated)"><div style="height:32px;padding:0 8px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border)"><span style="font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">JavaScript</span><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span>Copy</span></div><pre style="margin:0;padding:14px 16px;overflow:hidden;font:400 12px/19px 'IBM Plex Mono',monospace;color:var(--ui-text);white-space:pre">{{ e.code }}</pre></div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;font-size:14px;line-height:22px;color:var(--ui-text-toned)">
|
||||
<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Anonymous callers only ever get online articles. Drafts stay private until you publish them.</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Images in <code>body</code> use paths like <code>/static/uploadedImages/<uuid>.png</code>. Prefix them with the base URL before rendering.</span></div>
|
||||
<div style="display:flex;gap:10px"><span style="display:flex;padding-top:3px;color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><span style="text-wrap:pretty">Browsers can only call the API from origins listed in the server's CORS setting. Ask whoever runs the server to add your site's address.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ isError }}">
|
||||
<div style="padding:{{ errPad }};display:flex;flex-direction:column;gap:14px;max-width:560px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">{{ s.err.code }}</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.err.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">{{ s.err.text }}</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span data-act="err-primary" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">{{ s.err.primary }}</span><sc-if value="{{ s.err.secondary }}"><span style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">{{ s.err.secondary }}</span></sc-if></div></div>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ s.modal }}">
|
||||
<div style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay);display:flex;align-items:{{ modalAlign }};justify-content:center;padding:{{ modalPad }}">
|
||||
<div role="dialog" aria-modal="true" style="width:{{ modalW }};background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column">
|
||||
<div style="padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.modal.title }}</span><sc-if value="{{ s.modal.desc }}"><span style="color:var(--ui-text-muted);text-wrap:pretty">{{ s.modal.desc }}</span></sc-if></div><sc-if value="{{ s.modal.close }}"><span data-act="modal-close" style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></sc-if></div>
|
||||
<div style="padding:20px 24px 0;display:flex;flex-direction:column;gap:16px">
|
||||
<sc-if value="{{ s.modal.notice }}"><div role="alert" style="display:flex;gap:8px;padding:10px 12px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-toned)">{{ s.modal.notice }}</span></div></sc-if>
|
||||
<sc-for list="{{ mFields }}" as="f" hint-placeholder-count="0">
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ f.label }}</span><sc-if value="{{ f.count }}"><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ f.countFg }}">{{ f.count }}</span></sc-if></div><div style="min-height:{{ f.h }};padding:{{ f.p }};display:flex;align-items:{{ f.ai }};border:1px solid {{ f.bd }};box-shadow:{{ f.sh }};background:{{ f.bg }};color:{{ f.fg }};font-size:{{ inF }}">{{ f.shown }}</div><sc-if value="{{ f.err }}"><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>{{ f.err }}</span></sc-if><sc-if value="{{ f.help }}"><span style="color:var(--ui-text-muted);font-size:12px">{{ f.help }}</span></sc-if></div>
|
||||
</sc-for>
|
||||
<sc-if value="{{ s.modal.upload }}">
|
||||
<div data-act="upload-pick" style="height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center;border:{{ up.bd }};background:{{ up.bg }};color:{{ up.fg }}"><span aria-hidden="true" style="display:inline-block;width:24px;height:24px;background-color:{{ up.ic }};-webkit-mask:url('https://api.iconify.design/lucide/{{ up.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ up.icon }}.svg') center / contain no-repeat"></span><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ up.title }}</span><sc-if value="{{ up.progress }}"><div style="width:80%;height:4px;background:var(--ui-bg-accented)"><div style="width:{{ up.progress }};height:4px;background:var(--ui-primary)"></div></div></sc-if><span style="color:var(--ui-text-toned);font-size:12px;max-width:300px">{{ up.text }}</span></div>
|
||||
</sc-if>
|
||||
</div>
|
||||
<div style="padding:20px 24px;display:flex;flex-direction:{{ mBtnDir }};justify-content:flex-end;gap:8px">
|
||||
<sc-if value="{{ s.modal.cancel }}"><span data-act="modal-cancel" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:{{ mCancelFg }};font-weight:500">{{ s.modal.cancel }}</span></sc-if>
|
||||
<sc-if value="{{ s.modal.confirm }}"><span data-act="modal-confirm" style="height:{{ btnH }};padding:0 12px;display:flex;align-items:center;justify-content:center;gap:6px;background:{{ mConfirmBg }};color:var(--ui-bg);font-weight:500"><sc-if value="{{ s.modal.loading }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span></sc-if>{{ s.modal.confirm }}</span></sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ hasToasts }}">
|
||||
<div style="position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;left:{{ tL }};right:{{ tR }};bottom:{{ tB }};width:{{ tW }}">
|
||||
<sc-for list="{{ toasts }}" as="t" hint-placeholder-count="1">
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ t.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:6px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ t.title }}</span><span style="color:var(--ui-text-muted)">{{ t.text }}</span></div><sc-if value="{{ t.action }}"><span data-act="retry" style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>{{ t.action }}</span></sc-if></div><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1440,"height":900},"s":{"editor":null,"tsType":"object"},"mobile":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const s = this.props.s || {}
|
||||
const m = !!this.props.mobile
|
||||
const k = s.kind || 'home'
|
||||
const navItems = [['home', 'house', 'Home'], ['articles', 'file-text', 'Articles'], ['integration', 'plug', 'Integration']]
|
||||
const nav = navItems.map(([key, icon, t]) => ({ key, icon, t, bg: s.nav === key ? 'var(--rc-sand)' : 'transparent', fg: s.nav === key ? '#111111' : 'var(--ui-text-toned)', fw: s.nav === key ? 500 : 400 }))
|
||||
const crumbs = (s.crumbs || []).map((t, i, a) => ({ t, sep: i > 0, fg: i === a.length - 1 ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', fw: i === a.length - 1 ? 500 : 400 }))
|
||||
const L = s.list || {}
|
||||
const counts = L.counts || [6, 4, 2]
|
||||
const tabs = ['All', 'Online', 'Drafts'].map((t, i) => { const on = (L.tab || 0) === i; return { t, n: counts[i], line: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-text-highlighted)' : 'var(--ui-text-toned)', fw: on ? 500 : 400 } })
|
||||
const rows = (L.loading ? Array.from({ length: 6 }, () => ({ skel: true })) : (L.rows || [])).map(a => ({ ...a, showOn: !a.busy && a.on, showDraft: !a.busy && a.t && !a.on, op: a.busy ? '0.55' : '1', bg: a.menu ? 'var(--ui-bg-elevated)' : 'transparent', menuBg: a.menu ? 'var(--ui-bg-accented)' : 'transparent', menuPub: a.on ? 'Unpublish' : 'Publish', menuIcon: a.on ? 'globe-lock' : 'globe' }))
|
||||
const e = s.ed || {}
|
||||
const saveMap = { clean: ['check', 'Saved', 'var(--ui-text-muted)'], dirty: ['circle-dot', 'Unsaved changes', 'var(--ui-warning)'], saving: ['loader-circle', 'Saving…', 'var(--ui-text-muted)'], saved: ['check', 'Saved at 11:02', 'var(--ui-text-muted)'], error: ['circle-alert', 'Save failed', 'var(--ui-error)'], offline: ['wifi-off', 'Waiting for connection', 'var(--ui-text-muted)'] }
|
||||
const sv = saveMap[e.save || 'saved']
|
||||
const save = { icon: sv[0], t: sv[1], fg: sv[2], retry: e.save === 'error' }
|
||||
const len = e.len || 4318
|
||||
const fmt = n => String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' ')
|
||||
const over = len > 10000, warn = len >= 9000
|
||||
const counter = { t: fmt(len) + ' / 10 000', fg: over ? 'var(--ui-error)' : warn ? 'var(--ui-warning)' : 'var(--ui-text-muted)', icon: over ? 'circle-alert' : warn ? 'triangle-alert' : '', msg: over ? fmt(len - 10000) + ' characters over. Shorten the text or remove an image. Formatting counts too.' : warn ? 'Close to the limit. Images and formatting count too.' : '' }
|
||||
const dirty = e.save === 'dirty' || e.save === 'error'
|
||||
const online = e.status === 'online'
|
||||
const blocked = over || s.offline
|
||||
let pub
|
||||
if (e.pending) pub = { t: e.pending, icon: 'loader-circle', bg: online ? 'var(--ui-bg)' : 'var(--ui-primary)', fg: online ? 'var(--ui-text-highlighted)' : 'var(--ui-bg)', bd: online ? 'var(--ui-border-accented)' : 'var(--ui-primary)', op: '1' }
|
||||
else if (online) pub = { t: 'Unpublish', icon: 'globe-lock', bg: 'var(--ui-bg)', fg: 'var(--ui-text-highlighted)', bd: 'var(--ui-border-accented)', op: s.offline ? '0.4' : '1' }
|
||||
else pub = { t: dirty ? 'Save and publish' : 'Publish', icon: 'globe', bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: 'var(--ui-primary)', op: blocked ? '0.4' : '1' }
|
||||
const md = s.modal || {}
|
||||
const mFields = (md.fields || []).map(f => { const has = f.value; return { ...f, shown: has || f.ph || '', fg: md.loading ? 'var(--ui-text-dimmed)' : has ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', bd: f.err ? 'var(--ui-error)' : f.focus ? 'var(--ui-primary)' : 'var(--ui-border-accented)', sh: f.err ? 'inset 0 0 0 1px var(--ui-error)' : f.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none', bg: md.loading ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)', h: f.area ? (m ? '120px' : '96px') : (m ? '44px' : '40px'), p: f.area ? '8px 10px' : '0 10px', ai: f.area ? 'flex-start' : 'center', countFg: f.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)' } })
|
||||
const U = md.upload || {}
|
||||
const upMap = {
|
||||
uploading: { icon: 'image-plus', ic: 'var(--ui-text-toned)', title: 'north-wall.jpg', text: 'Uploading 2.4 of 3.9 MB', progress: '62%', bd: '1px solid var(--ui-border)', bg: 'var(--ui-bg)' },
|
||||
rejected: { icon: 'file-x', ic: 'var(--ui-error)', title: 'north-wall.tif is 14.2 MB', text: 'Images can be up to 10 MB. Use a PNG, JPEG, WEBP or SVG image.', bd: '1px solid var(--ui-error)', bg: 'var(--ui-bg)' },
|
||||
idle: { icon: 'image-plus', ic: 'var(--ui-text-toned)', title: 'Drop an image here, or choose a file', text: 'PNG, JPEG, WEBP, SVG · max 10 MB', bd: '1px dashed var(--ui-border-accented)', bg: 'var(--ui-bg)' },
|
||||
error: { icon: 'circle-x', ic: 'var(--ui-error)', title: 'Upload failed', text: 'The server didn\'t accept the file. Your article hasn\'t changed.', bd: '1px solid var(--ui-error)', bg: 'var(--ui-bg)' }
|
||||
}
|
||||
const up = upMap[U.state || 'idle'] || upMap.idle
|
||||
const toasts = (s.toasts || []).map(t => ({ ...t, fg: 'var(--ui-' + t.tone + ')' }))
|
||||
const endpoints = [
|
||||
{ path: '/v1/article/', desc: 'Lists every online article.', l1: 'var(--ui-primary)', code: "const res = await fetch('https://cms.renew.example/v1/article/')\nconst articles = await res.json()" },
|
||||
{ path: '/v1/article/{id}', desc: 'Returns one online article. Drafts and unknown ids both return 404.', l1: 'var(--ui-primary)', code: "const res = await fetch('https://cms.renew.example/v1/article/12')\nif (res.status === 404) return notFound()\nconst article = await res.json()" }
|
||||
]
|
||||
const toolbarDef = [['undo-2'], ['redo-2'], '|', ['pilcrow', 'Paragraph ▾'], '|', ['bold', '', true], ['italic'], ['underline'], ['strikethrough'], '|', ['align-left', '', true], ['align-center'], ['align-right'], ['align-justify'], '|', ['list'], ['list-ordered'], ['indent-decrease'], ['indent-increase'], '|', ['remove-formatting'], ['image-plus', 'Image']]
|
||||
const mobTb = [['image-plus'], ['undo-2'], ['redo-2'], '|', ['pilcrow', '¶ ▾'], ['bold'], ['italic'], ['underline'], ['list'], ['list-ordered']]
|
||||
const toolbar = (m ? mobTb : toolbarDef).map(x => x === '|' ? { sep: true, btn: false } : { sep: false, btn: true, icon: x[0], text: x[1] || '', bg: x[2] ? 'var(--ui-bg-accented)' : 'transparent' })
|
||||
const edReady = k === 'editor' && !e.loading && !e.notfound
|
||||
const edTitle = e.title || 'How we price a bathroom renovation'
|
||||
return {
|
||||
s, nav, crumbs, edTitle, edBody: e.body || '', sampleBody: !e.body, tabs, rows, save, counter, pub, mFields, up, toasts, endpoints, toolbar,
|
||||
desk: !m, mob: m, notBoot: !s.boot,
|
||||
fw: m ? '390px' : '1440px', fh: m ? '844px' : '900px', dir: m ? 'column' : 'row',
|
||||
mLead: s.mLead || 'menu',
|
||||
isBoot: !!s.boot, isHome: k === 'home' && !s.boot, isList: k === 'articles', isEditor: k === 'editor', isInteg: k === 'integration', isError: k === 'error',
|
||||
pad: m ? '20px 16px 88px' : '32px', gap: m ? '20px' : '28px', cols3: m ? 'repeat(3,minmax(0,1fr))' : 'repeat(3,minmax(0,1fr))',
|
||||
btnH: m ? '44px' : '32px', rowH: m ? '52px' : '44px', inF: m ? '16px' : '14px',
|
||||
tbDir: m ? 'column' : 'row', tbGap: m ? '12px' : '16px', tbBorder: m ? '0' : '1px solid var(--ui-border)', tabBorder: m ? '1px solid var(--ui-border)' : '0', tabH: m ? '44px' : '36px', tabF: m ? '14px' : '13px',
|
||||
qText: L.q ? L.q : 'Search by title', qFg: L.q ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)',
|
||||
showTable: !m && !L.empty, showCards: m && !L.empty, listFab: !s.modal,
|
||||
emptyBg: L.empty && L.empty.primary ? 'var(--ui-primary)' : 'var(--ui-bg)', emptyFg: L.empty && L.empty.primary ? 'var(--ui-bg)' : 'var(--ui-text-highlighted)', emptyBd: L.empty && L.empty.primary ? 'var(--ui-primary)' : 'var(--ui-border-accented)',
|
||||
edFound: k === 'editor' && !e.notfound, edReady, edPending: edReady && !!e.pending, edOnline: edReady && !e.pending && online, edDraft: edReady && !e.pending && !online,
|
||||
edHeadPad: m ? '12px 16px' : '14px 24px', edHeadGap: m ? '8px 12px' : '12px', edTitleBasis: m ? '100%' : '200px',
|
||||
showToolbar: k === 'editor' && !e.notfound && !e.preview,
|
||||
tbPadX: m ? '8px' : '24px', tbBtn: m ? '40px' : '28px',
|
||||
edBg: e.preview ? 'var(--ui-bg-muted)' : 'var(--ui-bg)', edPad: m ? '24px 16px' : '40px 48px', edMargin: e.preview ? '0 auto' : '0',
|
||||
h1F: m ? '28px' : '32px', h2F: m ? '23px' : '26px', pF: m ? '17px' : '18px', caret: !e.preview,
|
||||
pvJust: e.preview ? 'flex-end' : 'flex-start', pvBg: e.preview ? 'var(--ui-primary)' : 'var(--ui-bg-accented)',
|
||||
saveOp: (dirty && !blocked) ? '1' : '0.4', imgCount: e.imgs != null ? String(e.imgs) : (e.image ? '4' : '3'), apiNote: online ? 'Live. Your website can read this article.' : 'Returns 404 until the article is online.',
|
||||
copyIcon: s.copied ? 'check' : 'copy', copyText: s.copied ? 'Copied' : 'Copy', copyFg: s.copied ? 'var(--ui-success)' : 'var(--ui-text-highlighted)',
|
||||
errPad: m ? '40px 20px' : '64px 48px',
|
||||
modalAlign: m ? 'flex-end' : 'flex-start', modalPad: m ? '16px' : '140px 16px 16px', modalW: m ? '100%' : (md.wide ? '560px' : '460px'), mBtnDir: m ? 'column-reverse' : 'row',
|
||||
mConfirmBg: md.tone === 'danger' ? 'var(--ui-error)' : 'var(--ui-primary)', mCancelFg: md.loading ? 'var(--ui-text-dimmed)' : 'var(--ui-text-highlighted)',
|
||||
hasToasts: toasts.length > 0, tL: m ? '16px' : 'auto', tR: m ? '16px' : '24px', tB: m ? '16px' : '24px', tW: m ? 'auto' : '356px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,105 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<div style="width:100%;display:flex;flex-direction:column;align-items:center;gap:20px">
|
||||
<div style="width:{{ w }};max-width:100%;background:var(--ui-bg);border:{{ border }};padding:{{ pad }};display:flex;flex-direction:column;gap:24px;font-family:'IBM Plex Sans',sans-serif;color:var(--ui-text)">
|
||||
<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="{{ edge }}" fill-rule="evenodd" d="M0 0h16v16H0zM.5 .5v15h15V.5z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
|
||||
<sc-if value="{{ s.spinner }}" hint-placeholder-val="{{ false }}">
|
||||
<div role="status" style="display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0;text-align:center"><span aria-hidden="true" style="display:inline-block;width:32px;height:32px;background-color:var(--ui-text-highlighted);-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.spinner }}</span><span style="color:var(--ui-text-muted);font-size:14px">This only takes a moment.</span></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.title }}" hint-placeholder-val="{{ true }}">
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ s.title }}</span><sc-if value="{{ s.desc }}"><span style="color:var(--ui-text-muted);font-size:14px;line-height:22px;text-wrap:pretty">{{ s.desc }}</span></sc-if></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ notice }}">
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:{{ notice.bg }};color:{{ notice.fg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ notice.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px;font-size:13px;line-height:20px"><span style="font-weight:600">{{ notice.title }}</span><sc-if value="{{ notice.text }}"><span style="color:var(--ui-text-toned);text-wrap:pretty">{{ notice.text }}</span></sc-if></div></div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ result }}">
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:{{ result.bg }};color:{{ result.fg }}"><span aria-hidden="true" style="display:inline-block;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ result.icon }}.svg') center / contain no-repeat"></span></span>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ result.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">{{ result.text }}</span><sc-if value="{{ result.note }}"><span style="color:var(--ui-text-muted);font-size:13px;line-height:20px;text-wrap:pretty">{{ result.note }}</span></sc-if></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<sc-for list="{{ result.actions }}" as="a" hint-placeholder-count="1">
|
||||
<span data-act="{{ a.act }}" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;font-weight:500;font-size:14px;background:{{ a.bg }};color:{{ a.fg }};border:{{ a.bd }}">{{ a.t }}</span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ hasForm }}">
|
||||
<div style="display:flex;flex-direction:column;gap:18px">
|
||||
<sc-for list="{{ fields }}" as="f" hint-placeholder-count="2">
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<div style="display:flex;justify-content:space-between;gap:8px;font-size:13px"><span style="font-weight:500;color:var(--ui-text-highlighted)">{{ f.label }}</span><sc-if value="{{ f.count }}"><span style="font:400 12px 'IBM Plex Mono',monospace;color:{{ f.countFg }}">{{ f.count }}</span></sc-if><sc-if value="{{ f.link }}"><span data-act="forgot" style="color:var(--ui-text-toned);text-decoration:underline;text-underline-offset:3px">{{ f.link }}</span></sc-if></div>
|
||||
<div style="height:{{ inH }};padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid {{ f.bd }};box-shadow:{{ f.sh }};background:{{ f.bg }};font-size:{{ inF }}">
|
||||
<span style="flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:{{ f.fg }};letter-spacing:{{ f.ls }}">{{ f.shownValue }}</span>
|
||||
<sc-if value="{{ f.pw }}"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ f.eye }}.svg') center / contain no-repeat"></span></span></sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ f.err }}"><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>{{ f.err }}</span></sc-if>
|
||||
<sc-if value="{{ f.help }}"><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">{{ f.help }}</span></sc-if>
|
||||
<sc-for list="{{ f.hints }}" as="h" hint-placeholder-count="0">
|
||||
<span style="display:flex;gap:8px;align-items:center;font-size:12px;line-height:18px;color:{{ h.fg }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ h.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ h.icon }}.svg') center / contain no-repeat"></span><span style="color:{{ h.tfg }}">{{ h.t }}</span></span>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
<span data-act="submit" style="height:{{ btnH }};display:flex;align-items:center;justify-content:center;gap:8px;font-weight:500;font-size:14px;background:var(--ui-primary);color:var(--ui-bg);opacity:{{ submitOpacity }}"><sc-if value="{{ s.submit.loading }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span></sc-if>{{ s.submit.t }}</span>
|
||||
<sc-if value="{{ s.below }}"><span data-act="below" style="align-self:center;color:var(--ui-text-toned);font-size:13px;text-decoration:underline;text-underline-offset:3px">{{ s.below }}</span></sc-if>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
<sc-if value="{{ hasFooter }}">
|
||||
<div style="width:{{ w }};max-width:100%;padding:{{ footPad }};display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ui-text-muted)">
|
||||
<span style="display:flex;gap:6px;flex-wrap:wrap;align-items:center"><sc-if value="{{ s.footer }}"><span>{{ s.footer.pre }}</span><span data-act="footer" style="color:var(--ui-text-highlighted);font-weight:500;text-decoration:underline;text-underline-offset:3px">{{ s.footer.link }}</span></sc-if><sc-if value="{{ s.pending }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">API pending</span></sc-if></span>
|
||||
<span style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span>System</span>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":480,"height":620},"s":{"editor":null,"tsType":"object"},"mobile":{"editor":"boolean","default":false,"tsType":"boolean"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const s = this.props.s || {}
|
||||
const m = !!this.props.mobile
|
||||
const tone = t => ({ bg: 'var(--rc-' + t + '-soft)', fg: 'var(--ui-' + t + ')' })
|
||||
const notice = s.notice ? { ...s.notice, ...tone(s.notice.tone) } : null
|
||||
const result = s.result ? { ...s.result, ...tone(s.result.tone), actions: (s.result.actions || []).map((a, i) => i === 0 && !a.secondary ? { act: 'result-' + i, t: a.t, bg: 'var(--ui-primary)', fg: 'var(--ui-bg)', bd: '1px solid var(--ui-primary)' } : { act: 'result-' + i, t: a.t, bg: 'var(--ui-bg)', fg: 'var(--ui-text-highlighted)', bd: '1px solid var(--ui-border-accented)' }) } : null
|
||||
const dis = s.submit && (s.submit.loading || s.submit.disabled)
|
||||
const fields = (s.fields || []).map(f => {
|
||||
const has = f.value != null && f.value !== ''
|
||||
const masked = f.pw && !f.shown && has
|
||||
return {
|
||||
...f,
|
||||
shownValue: has ? (masked ? '•'.repeat(Math.min(f.value.length, 16)) : f.value) : (f.ph || ''),
|
||||
fg: dis || f.ro ? 'var(--ui-text-dimmed)' : has ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)',
|
||||
ls: masked ? '2px' : 'normal',
|
||||
bd: f.err ? 'var(--ui-error)' : f.focus ? 'var(--ui-primary)' : f.ro || dis ? 'var(--ui-border)' : 'var(--ui-border-accented)',
|
||||
sh: f.err ? 'inset 0 0 0 1px var(--ui-error)' : f.focus ? 'inset 0 0 0 1px var(--ui-primary)' : 'none',
|
||||
bg: f.ro || dis ? 'var(--ui-bg-elevated)' : 'var(--ui-bg)',
|
||||
eye: f.shown ? 'eye-off' : 'eye',
|
||||
countFg: f.countErr ? 'var(--ui-error)' : 'var(--ui-text-muted)',
|
||||
hints: (f.hints || []).map(h => ({ t: h.t, icon: h.s === 'met' ? 'check' : h.s === 'err' ? 'circle-alert' : 'circle', fg: h.s === 'met' ? 'var(--ui-success)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)', tfg: h.s === 'met' ? 'var(--ui-text)' : h.s === 'err' ? 'var(--ui-error)' : 'var(--ui-text-muted)' }))
|
||||
}
|
||||
})
|
||||
return {
|
||||
s, notice, result, fields,
|
||||
hasForm: fields.length > 0 && !!s.submit,
|
||||
hasFooter: !!(s.footer || s.pending || !m),
|
||||
submitOpacity: s.submit && s.submit.disabled && !s.submit.loading ? '0.4' : '1',
|
||||
w: m ? '100%' : '400px',
|
||||
border: m ? '0' : '1px solid var(--ui-border)',
|
||||
pad: m ? '8px 20px 0' : '40px',
|
||||
footPad: m ? '0 20px 24px' : '0',
|
||||
btnH: m ? '44px' : '40px',
|
||||
inH: m ? '44px' : '40px',
|
||||
inF: m ? '16px' : '14px',
|
||||
edge: 'transparent'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" data-screen-label="Primitives" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-primary-hover:#333333;--rc-primary-active:#444444;--rc-error-hover:#6a1a11;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);background:var(--ui-bg-muted);color:var(--ui-text);min-height:100vh">
|
||||
<div style="max-width:1200px;margin:0 auto;padding:48px 24px 96px;display:flex;flex-direction:column">
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding-bottom:40px">
|
||||
<div style="flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px">
|
||||
<h1 style="margin:0;font:600 32px/40px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Components: themed primitives</h1>
|
||||
<p style="margin:0;max-width:720px;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">These are Nuxt UI components with the Ledger config applied. Every specimen reads the real <code>--ui-*</code> variables, so the theme switch on the right changes the whole page. The product components are on <a href="RenewCMS Components Product.dc.html">a second page</a>.</p>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
|
||||
<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
|
||||
<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Button</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">There are five roles. A screen gets one primary button. Danger is used only for irreversible actions, and always inside a confirmation step.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:28px">
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span><code style="color:var(--ui-text-muted)">primary</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-bg);color:var(--ui-text-highlighted);border:1px solid var(--ui-border-accented);font-weight:500">Cancel</span><code style="color:var(--ui-text-muted)">secondary</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat"></span>Preview</span><code style="color:var(--ui-text-muted)">ghost</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete article</span><code style="color:var(--ui-text-muted)">danger</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span><code style="color:var(--ui-text-muted)">icon-only</code></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:28px;padding:0 10px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:12px">Save</span><code style="color:var(--ui-text-muted)">sm 28</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Save</span><code style="color:var(--ui-text-muted)">md 32</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:40px;padding:0 16px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:14px">Save</span><code style="color:var(--ui-text-muted)">lg 40</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:44px;padding:0 18px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:16px">Save</span><code style="color:var(--ui-text-muted)">xl 44, touch</code></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">default</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-primary-hover);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">hover</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;outline:2px solid var(--ui-primary);outline-offset:2px">Publish</span><code style="color:var(--ui-text-muted)">focus-visible</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-primary-active);color:var(--ui-bg);font-weight:500">Publish</span><code style="color:var(--ui-text-muted)">active</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;opacity:0.4">Publish</span><code style="color:var(--ui-text-muted)">disabled</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Publishing…</span><code style="color:var(--ui-text-muted)">loading</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--rc-error-hover);color:var(--ui-bg);font-weight:500">Delete article</span><code style="color:var(--ui-text-muted)">danger hover</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted);border:1px solid var(--ui-border-accented);font-weight:500">Cancel</span><code style="color:var(--ui-text-muted)">secondary hover</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/book-open.svg') center / contain no-repeat"></span>Preview</span><code style="color:var(--ui-text-muted)">ghost hover</code></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UButton</code>. Primary <code>color="primary" variant="solid"</code> · secondary <code>color="neutral" variant="outline"</code> · ghost <code>color="neutral" variant="ghost"</code> · danger <code>color="error" variant="solid"</code> · icon-only <code>square icon="i-lucide-ellipsis" :aria-label</code> wrapped in <code>UTooltip</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Loading</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>:loading</code> swaps the leading icon for <code>i-lucide-loader-circle</code> and disables the button. The label changes to the -ing form ("Publishing…") and the button width stays fixed, so the layout doesn't jump. <code>loading-auto</code> is used on async <code>@click</code> handlers.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Native <code><button></code>, activated with Enter or Space. Icon-only buttons need an <code>aria-label</code>. Loading sets <code>aria-busy="true"</code>. Disabled buttons stay focusable only when a tooltip explains why they're disabled.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>md</code> on desktop, <code>xl</code> (44 px) below <code>md</code>. Primary page actions go full width in sticky footers on 390 px screens.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Bend</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Disabled opacity is 40% instead of Nuxt UI's 75%, because a 75% black button still looks clickable. Hover darkens the button one step instead of using Nuxt UI's <code>/75</code> alpha, so the label keeps its contrast.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Input, password input, textarea</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">One outline style for every field. Focus adds a 2 px ink ring inside the edge. Errors turn the edge brick red and always come with a message, never color alone.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:24px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-muted)">marta</span><code style="color:var(--ui-text-muted)">default, placeholder</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-text-muted);background:var(--ui-bg);color:var(--ui-text-muted)">marta</span><code style="color:var(--ui-text-muted)">hover</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-primary);box-shadow:inset 0 0 0 1px var(--ui-primary);background:var(--ui-bg);color:var(--ui-text-highlighted)">mar<span style="width:1px;height:16px;background:var(--ui-text-highlighted)"></span></span><code style="color:var(--ui-text-muted)">focus</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">ma</span><code style="color:var(--ui-text-muted)">error</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border);background:var(--ui-bg-elevated);color:var(--ui-text-dimmed)">owner@renew.example</span><code style="color:var(--ui-text-muted)">disabled / read-only</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)"><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span></span><span style="flex:1">plaster</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">leading icon, clear</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)"><span style="flex:1;letter-spacing:3px">••••••••••</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/eye.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">password, hidden</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="height:32px;padding:0 4px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)"><span style="flex:1">limewash2026</span><span style="width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned);background:var(--ui-bg-elevated)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/eye-off.svg') center / contain no-repeat"></span></span></span><code style="color:var(--ui-text-muted)">password, shown</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;grid-column:span 2"><span style="min-height:80px;padding:6px 10px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)">A short first paragraph. You can keep writing in the editor.</span><code style="color:var(--ui-text-muted)">textarea, autoresize 3–8 rows</code></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UInput variant="outline" color="primary"</code>, <code>:highlight</code> bound to the field error so the edge turns red. The search field is <code>icon="i-lucide-search"</code> with a <code>#trailing</code> clear <code>UButton</code>. <code>UTextarea autoresize :rows="3" :maxrows="8"</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Password</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UInput :type="shown ? 'text' : 'password'"</code> with a <code>#trailing</code> ghost <code>UButton</code>. <code>aria-label</code> reads "Show password" or "Hide password", with <code>aria-pressed</code> and <code>aria-controls</code>. <code>autocomplete</code> is <code>current-password</code> on log in and <code>new-password</code> on register and reset. Showing the password never clears or moves focus.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Default, hover (edge goes to muted), focus (2 px ink), filled, error, disabled, read-only (same look as disabled but selectable and focusable, used for the email on the reset screen). Fields are 16 px text below <code>md</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Placeholder</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Placeholders use <code>--ui-text-muted</code> (5.7:1) and only show an example. The label always carries the meaning.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Form field</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">A label on top, then the control, then the help text or the error in the same spot. The right-hand hint slot holds the character counter. Every field in the product is required, so none are marked.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:32px">
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">5 / 20</span></div><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted)">marta</span><span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">3 to 20 characters. You'll use it to log in.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><div style="display:flex;justify-content:space-between"><span style="font-weight:500;color:var(--ui-text-highlighted)">Username</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-error)">2 / 20</span></div><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">ma</span><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Use at least 3 characters.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Email</span><span style="height:32px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-error);box-shadow:inset 0 0 0 1px var(--ui-error);background:var(--ui-bg);color:var(--ui-text-highlighted)">marta@renew</span><span style="display:flex;gap:6px;align-items:center;color:var(--ui-error);font-size:12px;line-height:18px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Enter a full email address, like name@example.com.</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UForm :schema :state @submit</code> + <code>UFormField name label help</code>, with the counter in the <code>#hint</code> slot. Validation runs on blur and on submit, then on every input once a field has an error, so the error clears as soon as it's fixed. The schema mirrors the API rules exactly, so a validator 400 shouldn't reach the UI.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Nuxt UI links the label and <code>aria-describedby</code> (help or error) and sets <code>aria-invalid</code>. On a failed submit, focus moves to the first invalid field. Error text sits in the help slot, so there is no layout shift.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Checkbox, switch, select</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">All three are square. The Preview toggle in the editor is the only switch. The select sets sort order in the mobile article list. No screen needs a checkbox yet, but it's themed so it matches if one gets added.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;border:1px solid var(--ui-border-accented);background:var(--ui-bg)"></span>Off</span>
|
||||
<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;background:var(--ui-primary);color:var(--ui-bg);display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></span>On</span>
|
||||
<span style="display:flex;align-items:center;gap:8px"><span style="width:16px;height:16px;background:var(--ui-primary);outline:2px solid var(--ui-primary);outline-offset:2px"></span>Focus</span>
|
||||
<span style="display:flex;align-items:center;gap:8px;opacity:0.4"><span style="width:16px;height:16px;border:1px solid var(--ui-border-accented)"></span>Disabled</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-bg-accented);padding:2px;display:flex"><span style="width:16px;height:16px;background:var(--ui-bg);box-shadow:0 0 0 1px var(--ui-border-accented)"></span></span>Preview off</span>
|
||||
<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-primary);padding:2px;display:flex;justify-content:flex-end"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Preview on</span>
|
||||
<span style="display:flex;align-items:center;gap:10px"><span style="width:36px;height:20px;background:var(--ui-primary);padding:2px;display:flex;justify-content:flex-end;outline:2px solid var(--ui-primary);outline-offset:2px"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Focus</span>
|
||||
<span style="display:flex;align-items:center;gap:10px;opacity:0.4"><span style="width:36px;height:20px;background:var(--ui-bg-accented);padding:2px;display:flex"><span style="width:16px;height:16px;background:var(--ui-bg)"></span></span>Disabled</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px;width:240px">
|
||||
<span style="height:32px;padding:0 8px 0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-primary);box-shadow:inset 0 0 0 1px var(--ui-primary);background:var(--ui-bg);color:var(--ui-text-highlighted)"><span style="flex:1">Newest updated first</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span style="flex:1">Newest updated first</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div>
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;color:var(--ui-text)">Oldest updated first</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UCheckbox</code>, <code>USwitch</code> (slots <code>base</code> and <code>thumb</code> set to <code>rounded-none</code>), <code>USelect :items value-key="value"</code>, whose content uses <code>--shadow-popover</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Space toggles a checkbox or switch. The select opens with Enter, Space or ↓, moves with the arrow keys and type-ahead, and closes with Esc, returning focus to the trigger. The switch uses <code>role="switch"</code> and <code>aria-checked</code>, and its visible label is its name.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Badge</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Badges show status or a count. They never replace a button. Solid ink is for the one state that matters most in a list. Soft semantic badges are for system messages.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center">
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
|
||||
<span style="height:20px;min-width:20px;padding:0 5px;display:inline-flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">12</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-success-soft);color:var(--ui-success);font-size:12px;font-weight:500">success</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-info-soft);color:var(--ui-info);font-size:12px;font-weight:500">info</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-warning-soft);color:var(--ui-warning);font-size:12px;font-weight:500">warning</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--rc-error-soft);color:var(--ui-error);font-size:12px;font-weight:500">error</span>
|
||||
<span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">GET</span>
|
||||
<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online · md</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UBadge</code>. Solid ink <code>color="neutral" variant="solid"</code> · outline <code>color="neutral" variant="outline"</code> · count <code>color="neutral" variant="soft" size="sm"</code> · semantic <code>variant="soft"</code>. Sizes are <code>sm</code> (22 px, in tables) and <code>md</code> (26 px, in the editor header).</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Badges are text, not live regions. When a status changes, the announcement comes from the toast.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Alert</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Alerts are for messages that belong to a page and stay until the situation changes. Anything that confirms an action someone just took is a toast instead.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr));gap:16px">
|
||||
<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-info-soft);color:var(--ui-info)"><span style="padding-top:2px;display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Your session expired</span><span style="color:var(--ui-text-toned)">Log in again to pick up where you left off.</span></div></div>
|
||||
<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-success-soft);color:var(--ui-success)"><span style="padding-top:2px;display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Password changed</span><span style="color:var(--ui-text-toned)">Log in with your new password.</span></div><span style="display:flex;color:var(--ui-text-toned);height:20px;align-items:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
<div role="status" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-warning-soft);color:var(--ui-warning)"><span style="padding-top:2px;display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Almost at the length limit</span><span style="color:var(--ui-text-toned)">9 240 of 10 000 characters used. Images and formatting count too.</span></div></div>
|
||||
<div role="alert" style="display:flex;gap:10px;padding:12px 14px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="padding-top:2px;display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:8px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600">Couldn't load your articles</span><span style="color:var(--ui-text-toned)">Check your connection and try again.</span></div><span style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span></div></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UAlert variant="soft" :color :icon :title :description :actions</code>. <code>close</code> only on alerts that are safe to dismiss (password changed, session expired). The error alert has no close button because its retry is the way out.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Info, success and warning use <code>role="status"</code> and error uses <code>role="alert"</code>. Alerts that are already there when the page loads aren't announced again. The description text uses <code>--ui-text-toned</code> rather than the semantic color, so long text stays readable.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Toast</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Toasts confirm that an action finished or failed. Each one has a short title and, at most, one action.</p>
|
||||
<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
|
||||
<div style="width:356px;max-width:100%;display:flex;flex-direction:column;gap:8px">
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-success);padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">Article published</span><span style="color:var(--ui-text-muted)">"Winter checklist for timber windows" is now online.</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-info);padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/info.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">That article no longer exists</span><span style="color:var(--ui-text-muted)">It was deleted somewhere else, so we removed it from the list.</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span style="display:flex;color:var(--ui-error);padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><div style="flex:1;display:flex;flex-direction:column;gap:8px"><div style="display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">Couldn't unpublish</span><span style="color:var(--ui-text-muted)">The server didn't respond.</span></div><span style="align-self:flex-start;height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Retry</span></div><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:260px;display:grid;grid-template-columns:minmax(0,130px) minmax(0,1fr);font-size:13px;border-top:1px solid var(--ui-border)">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Placement</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Bottom right on desktop, 24 px from the edges. Bottom center at full width minus 16 px on mobile, above the sticky action bar.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Duration</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Success and info close after 5 s. Errors with retry stay until dismissed or retried. The timer pauses on hover and on focus.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Stack</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">At most 3 visible, newest at the bottom. A fourth pushes out the oldest non-error toast. Repeating the same action replaces its toast instead of adding a new one.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UApp :toaster="{ position: 'bottom-right', duration: 5000, max: 3 }"</code>. Toasts are raised with <code>useToast().add({ id, title, description, color, icon, actions, duration })</code>, where <code>id</code> is the action plus the article id so a repeat replaces the old toast. Errors use <code>duration: 0</code>. The progress bar is off.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The Reka toast region announces politely, and errors assertively. F8 jumps to the region. Esc closes the focused toast.</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Modal and slideover</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Modals ask a question or hold a short form. Slideovers carry navigation and side panels on small screens. Both sit over a 40% ink overlay.</p>
|
||||
<div style="background:var(--rc-overlay);padding:40px 24px;display:flex;flex-wrap:wrap;gap:32px;justify-content:center;align-items:flex-start">
|
||||
<div role="dialog" aria-modal="true" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
|
||||
<div style="padding:20px 24px 0;display:flex;align-items:flex-start;gap:12px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Leave without saving?</span><span style="color:var(--ui-text-muted)">You have changes to "How we price a bathroom renovation" that haven't been saved.</span></div><span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="padding:20px 24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Discard changes</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Keep editing</span></div>
|
||||
</div>
|
||||
<div style="width:320px;max-width:100%;height:340px;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal);display:flex;flex-direction:column">
|
||||
<div style="height:52px;padding:0 16px;display:flex;align-items:center;border-bottom:1px solid var(--ui-border)"><span style="flex:1;font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">Details</span><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="padding:16px;display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:14px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>3</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal :title :description</code> with the <code>#footer</code> slot for actions, width <code>sm:max-w-md</code>. Opened programmatically with <code>useOverlay().create(ConfirmDialog)</code>. <code>USlideover side="right"</code> for details, <code>side="left"</code> for mobile navigation (built into <code>UDashboardSidebar</code>).</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Button order</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The safe action is primary and sits on the right, where the eye lands. In destructive confirmations, the danger button is on the right and Cancel on the left (see ConfirmDialog). On mobile the buttons stack full width, with the primary on top.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Focus is trapped and starts on the least destructive button. Esc and the overlay close it unless it's <code>:dismissible="false"</code>, which is used while an action is running. Focus returns to the trigger. The title is the <code>aria-labelledby</code> and the description is the <code>aria-describedby</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>sm</code>, modals sit 16 px from the screen edges and slideovers take the full width. Motion follows the foundations: 240 ms, and instant with reduced motion.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Dropdown menu and tooltip</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The row-action menu is the main dropdown. Delete always comes last, below a separator, in brick red. Tooltips name icon-only buttons and show their keyboard shortcut.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
|
||||
<div style="display:flex;flex-direction:column;align-items:flex-end;gap:4px;width:220px">
|
||||
<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
|
||||
<div role="menu" style="width:220px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat"></span>Edit</div>
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat"></span>Unpublish</div>
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link.svg') center / contain no-repeat"></span>Copy API URL</div>
|
||||
<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
|
||||
<div style="height:32px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete…</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:4px">
|
||||
<div style="background:var(--ui-bg-inverted);color:var(--ui-text-inverted);padding:4px 8px;display:flex;align-items:center;gap:8px;font-size:12px">Bold<span style="display:flex;gap:2px"><span style="height:18px;min-width:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-text-muted);font:500 11px 'IBM Plex Mono',monospace">Ctrl</span><span style="height:18px;min-width:18px;padding:0 4px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-text-muted);font:500 11px 'IBM Plex Mono',monospace">B</span></span></div>
|
||||
<span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/bold.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/bold.svg') center / contain no-repeat"></span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDropdownMenu :items :content="{ align: 'end' }"</code>, with items grouped in nested arrays so separators appear automatically. The Delete item is <code>color: 'error'</code>, and its label ends in "…" because it opens a confirmation. <code>UTooltip :text :kbds="['ctrl', 'b']" :delay-duration="400"</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The menu opens with Enter, Space or ↓. Arrow keys and type-ahead move through it, Home and End jump to the ends, and Esc closes it and returns focus. Tooltips appear on focus as well as hover and never hold information that isn't also in the <code>aria-label</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Touch</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Tooltips don't show on touch, so every icon-only control on mobile also appears in a labeled menu or has a visible label.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Tabs</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Tabs filter the article list. Each count comes from the full list, so it doesn't change while you search.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
|
||||
<div role="tablist" style="display:flex;gap:20px;border-bottom:1px solid var(--ui-border)">
|
||||
<span role="tab" aria-selected="true" style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">All<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">6</span></span>
|
||||
<span role="tab" style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Online<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4</span></span>
|
||||
<span role="tab" style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-highlighted);border-bottom:2px solid var(--ui-border-accented);margin-bottom:-1px">Drafts<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">2</span></span>
|
||||
<span role="tab" style="height:30px;align-self:center;padding:0 4px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned);outline:2px solid var(--ui-primary);outline-offset:0">Focused</span>
|
||||
</div>
|
||||
<span style="color:var(--ui-text-muted);font-size:12px">From left: selected, default, hover, focus-visible.</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTabs variant="link" color="neutral" :content="false" :items v-model</code>. The count goes in the <code>#trailing</code> slot as the mono <code>sm</code> count badge. The value syncs to <code>?status=online|draft</code> so the filtered view can be linked.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Roving tabindex: Tab enters the tab list on the selected tab, and ← and → move and activate. Each tab's accessible name includes its count, for example "Drafts, 2 articles".</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Tabs stay in one row at 360 px, which is why the labels are short. Each tab is 44 px tall on touch.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Table and pagination</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Rows are 44 px with hairline separators, and only the Updated column sorts. Pagination appears only when a filter shows more than 25 articles.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border)"><span style="font-weight:500;color:var(--ui-text-highlighted)">How we price a bathroom renovation</span><span>default</span><span style="color:var(--ui-text-muted)">2 hours ago</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);background:var(--ui-bg-elevated)"><span style="font-weight:500;color:var(--ui-text-highlighted)">Choosing lime plaster for old stone walls</span><span>hover</span><span style="color:var(--ui-text-muted)">Yesterday</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);outline:2px solid var(--ui-primary);outline-offset:-2px"><span style="font-weight:500;color:var(--ui-text-highlighted)">Before and after: the Rue Verte kitchen</span><span>focus-visible</span><span style="color:var(--ui-text-muted)">3 days ago</span><span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span></div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 150px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border);opacity:0.5"><span style="font-weight:500;color:var(--ui-text-highlighted)">Winter checklist for timber windows</span><span style="display:flex;align-items:center;gap:6px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>busy</span><span style="color:var(--ui-text-muted)">5 days ago</span><span></span></div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-top:1px solid var(--ui-border);flex-wrap:wrap"><span style="color:var(--ui-text-muted)">26–50 of 142</span><div style="display:flex;gap:4px"><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-left.svg') center / contain no-repeat"></span></span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">1</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">2</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">3</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">…</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)">6</span><span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span></span></div></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTable :data :columns v-model:sorting v-model:global-filter v-model:pagination :loading</code> with TanStack <code>getPaginationRowModel</code>, and <code>@select</code> for row click. <code>UPagination :total :items-per-page="25" :sibling-count="1" show-edges</code>, active item <code>color="primary" variant="solid"</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Default, hover (<code>bg-elevated</code>), focus-visible (2 px inset ring), busy (a row action is running: 50% opacity, a spinner in the status cell, <code>aria-busy</code>, actions disabled), loading (skeleton rows), empty (EmptyState in the <code>#empty</code> slot).</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Keyboard, ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Each row's title is a real link to the editor, so Tab reaches it and Enter opens it. The rest of the row is a click target for the mouse only. The sort header is a button with <code>aria-sort</code>. Pagination is a <code>nav</code> labeled "Pages", and the current page has <code>aria-current</code>.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Skeleton, avatar, kbd, separator</h2>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
|
||||
<div aria-hidden="true" style="width:320px;max-width:100%;display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;gap:16px;align-items:center"><span style="flex:1;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented)"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
|
||||
<div style="display:flex;gap:16px;align-items:center"><span style="width:70%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented);margin-left:auto"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
|
||||
<div style="display:flex;gap:16px;align-items:center"><span style="width:55%;height:14px;background:var(--ui-bg-accented)"></span><span style="width:60px;height:20px;background:var(--ui-bg-accented);margin-left:auto"></span><span style="width:70px;height:14px;background:var(--ui-bg-accented)"></span></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:16px;align-items:flex-end">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:24px;height:24px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 10px 'IBM Plex Sans',sans-serif">MA</span><code style="color:var(--ui-text-muted)">marta</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:32px;height:32px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'IBM Plex Sans',sans-serif">JV</span><code style="color:var(--ui-text-muted)">jan_vries</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;align-items:center"><span style="width:32px;height:32px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'IBM Plex Sans',sans-serif">BO</span><code style="color:var(--ui-text-muted)">bob</code></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:6px;align-items:center;flex-wrap:wrap">
|
||||
<span style="height:22px;min-width:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);border-bottom-width:2px;background:var(--ui-bg);font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">Ctrl</span>
|
||||
<span style="height:22px;min-width:22px;padding:0 6px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);border-bottom-width:2px;background:var(--ui-bg);font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)">S</span>
|
||||
<span style="color:var(--ui-text-muted);margin-left:6px">Save</span>
|
||||
</div>
|
||||
<div style="width:200px;display:flex;flex-direction:column;gap:12px"><div style="height:1px;background:var(--ui-border)"></div><div style="height:1px;background:var(--ui-border-accented)"></div></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Skeleton</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>USkeleton</code> blocks shaped like the real layout: the same row heights, a badge-sized block and a date-sized block. The pulse runs at 1.6 s and stops with reduced motion. The container is <code>aria-busy="true"</code> and a visually hidden live region says "Loading articles". Skeletons appear only after 150 ms, so fast responses never flash.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Avatar</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UAvatar :alt="username" size="xs|sm"</code>. The initials come from the username: split on anything that isn't a letter or digit, take the first letter of the first two parts, or the first two letters if there is only one part, then uppercase. Sand <code>#d4c5b0</code> with ink text (11.2:1) in both themes. It's decorative (<code>aria-hidden</code>) because the username is always shown next to it.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Kbd</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UKbd variant="outline"</code>, only inside tooltips and the editor's shortcut hints. The editor shortcuts are Ctrl/⌘ S to save, plus TipTap's defaults: B, I, U, Z and Shift Z.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Separator</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>USeparator</code> uses <code>--ui-border</code> by default and <code>--ui-border-accented</code> between groups in dense toolbars. It's decorative, with <code>role="none"</code>, except between menu groups.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Color mode</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Three choices: System (the default), Light and Dark. The toggle at the top of this page is the component itself, so you can try it.</p>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Nuxt UI</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">In the user menu: a <code>UDropdownMenu</code> group of three <code>type: 'checkbox'</code> items bound to <code>useColorMode().preference</code>. On auth screens: <code>UColorModeSelect</code> in the footer. Nuxt UI's <code>UColorModeButton</code> isn't used because it only toggles between light and dark and hides the system option. <code>colorMode: true</code> in the plugin handles storage and applying the <code>.dark</code> class before first paint.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ARIA</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Menu items use <code>menuitemcheckbox</code>, with <code>aria-checked</code> on the current choice. The segmented variant is a <code>radiogroup</code> named "Theme".</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"theme":{"editor":"enum","options":["system","light","dark"],"default":"light","tsType":"'system' | 'light' | 'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { mode: this.props.theme ?? 'light' }
|
||||
rootRef = React.createRef()
|
||||
light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-primary-hover': '#333333', '--rc-primary-active': '#444444', '--rc-error-hover': '#6a1a11', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)' }
|
||||
dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-primary-hover': '#e5e5e5', '--rc-primary-active': '#cccccc', '--rc-error-hover': '#e37e6e', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)' }
|
||||
resolved() {
|
||||
if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
return this.state.mode
|
||||
}
|
||||
apply() {
|
||||
const el = this.rootRef.current
|
||||
if (!el) return
|
||||
const vars = this.resolved() === 'dark' ? this.dark : this.light
|
||||
for (const k in vars) el.style.setProperty(k, vars[k])
|
||||
document.body.style.background = vars['--ui-bg-muted']
|
||||
}
|
||||
componentDidMount() { this.apply() }
|
||||
componentDidUpdate(p) {
|
||||
if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
|
||||
this.apply()
|
||||
}
|
||||
renderVals() {
|
||||
const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
|
||||
const on = this.state.mode === k
|
||||
return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
|
||||
})
|
||||
return { rootRef: this.rootRef, modes }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,390 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" data-screen-label="Product components" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-primary-hover:#333333;--rc-primary-active:#444444;--rc-error-hover:#6a1a11;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);background:var(--ui-bg-muted);color:var(--ui-text);min-height:100vh">
|
||||
<div style="max-width:1200px;margin:0 auto;padding:48px 24px 96px;display:flex;flex-direction:column">
|
||||
|
||||
<div style="display:flex;flex-wrap:wrap;align-items:flex-end;gap:24px;padding-bottom:40px">
|
||||
<div style="flex:1;min-width:280px;display:flex;flex-direction:column;gap:10px">
|
||||
<h1 style="margin:0;font:600 32px/40px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Components: product</h1>
|
||||
<p style="margin:0;max-width:720px;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">These are the RenewCMS components, built from the primitives on <a href="RenewCMS Components Primitives.dc.html">the first page</a>. Each one lists the Nuxt UI parts it's made from, its props, emits and slots, every state, and keyboard and responsive behavior. Components marked custom have no Nuxt UI equivalent.</p>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
|
||||
<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
|
||||
<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">AuthShell</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">One centered card for every public screen. The logo sits above the title, and the form or ResultPanel goes in the slot. Footer links and the theme select sit outside the card, so the card itself stays about one task.</p>
|
||||
<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:48px 16px;display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start">
|
||||
<div style="width:400px;max-width:100%;display:flex;flex-direction:column;gap:20px">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px;display:flex;flex-direction:column;gap:24px">
|
||||
<svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Log in</span><span style="color:var(--ui-text-muted);font-size:14px;line-height:22px">Welcome back. Log in to manage your articles.</span></div>
|
||||
<div style="height:140px;border:1px dashed var(--ui-border-accented);display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">default slot</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--ui-text-muted)"><span style="text-decoration:underline;text-underline-offset:3px;color:var(--ui-text-toned)">Forgot password?</span><span style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span>System<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-down.svg') center / contain no-repeat"></span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Custom layout component <code>AuthShell.vue</code>: a <code>UPageCard variant="outline"</code> inside a centered <code>main</code>, with <code>AppLogo</code>, and <code>UColorModeSelect size="sm"</code> in the footer. Forms inside it use <code>UForm</code> rather than <code>UAuthForm</code>, because every screen needs states (such as 403, 429 and an inline login during verification) that <code>UAuthForm</code> doesn't expose.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Props <code>title: string</code>, <code>description?: string</code>. Slots <code>default</code>, <code>notice</code> (an alert above the title, for session expired or password changed), <code>footer</code> (links). No emits.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The title is the page's <code>h1</code>, and <code>document.title</code> becomes "Log in · RenewCMS". On route change, focus moves to the <code>h1</code>. The logo is <code>alt="RenewCMS"</code> and isn't a link, since there's nothing public to go back to.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">400 px card from <code>sm</code> up, with its top 12 vh from the top. Below <code>sm</code>, the card loses its border and padding drops to 20 px, filling the screen on <code>--ui-bg</code>, and fields and buttons use <code>xl</code>.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">DashboardShell</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The sidebar has three destinations, and the user menu sits at its foot. The top bar carries the breadcrumbs and page title. Collapsing the sidebar leaves a 56 px icon rail. Below <code>lg</code>, the sidebar becomes a slideover.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
|
||||
<div style="flex:1;min-width:min(100%,640px);height:380px;display:flex;border:1px solid var(--ui-border);background:var(--ui-bg-muted);overflow:hidden">
|
||||
<div style="width:224px;flex-shrink:0;background:var(--ui-bg);border-right:1px solid var(--ui-border);display:flex;flex-direction:column;padding:12px;gap:2px">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat"></span>Home</div>
|
||||
<div aria-current="page" style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:var(--rc-sand);color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span>Articles</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span>Integration</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="position:relative">
|
||||
<div style="position:absolute;bottom:48px;left:0;width:200px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);padding:4px">
|
||||
<div style="padding:6px 8px;display:flex;flex-direction:column"><span style="font-weight:500;color:var(--ui-text-highlighted)">marta</span><span style="color:var(--ui-text-muted);font-size:12px">Owner</span></div>
|
||||
<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
|
||||
<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/monitor.svg') center / contain no-repeat"></span><span style="flex:1">System</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span></div>
|
||||
<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun.svg') center / contain no-repeat"></span>Light</div>
|
||||
<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/moon.svg') center / contain no-repeat"></span>Dark</div>
|
||||
<div style="height:1px;background:var(--ui-border);margin:4px 0"></div>
|
||||
<div style="height:30px;padding:0 8px;display:flex;align-items:center;gap:8px;background:var(--ui-bg-elevated);color:var(--ui-text)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/log-out.svg') center / contain no-repeat"></span>Log out</div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;background:var(--ui-bg-elevated)"><span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span><span style="flex:1;color:var(--ui-text-highlighted)">marta</span><span style="display:flex;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat"></span></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
||||
<div style="height:48px;border-bottom:1px solid var(--ui-border);background:var(--ui-bg);display:flex;align-items:center;padding:0 16px;gap:8px;color:var(--ui-text-muted)"><span style="width:28px;height:28px;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left-close.svg') center / contain no-repeat"></span></span><span style="width:1px;height:16px;background:var(--ui-border)"></span><span>Articles</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat"></span><span style="color:var(--ui-text-highlighted);font-weight:500">How we price a bathroom renovation</span></div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)">page body</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;gap:16px;align-items:flex-start">
|
||||
<div style="width:56px;height:380px;background:var(--ui-bg);border:1px solid var(--ui-border);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:4px">
|
||||
<svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges" style="margin:7px 0 17px"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
|
||||
<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat"></span></span>
|
||||
<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--rc-sand);color:#111"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span>
|
||||
<span style="width:36px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span></span>
|
||||
<span style="flex:1"></span>
|
||||
<span style="width:26px;height:26px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</span>
|
||||
</div>
|
||||
<div style="width:220px;height:380px;background:var(--ui-bg);border:1px solid var(--ui-border);display:flex;flex-direction:column">
|
||||
<div style="height:56px;display:flex;align-items:center;gap:10px;padding:0 6px;border-bottom:1px solid var(--ui-border)"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-highlighted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat"></span></span><span style="flex:1;font-weight:600;font-size:16px;color:var(--ui-text-highlighted)">Articles</span></div>
|
||||
<div style="flex:1;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted);text-align:center;padding:0 16px">Mobile top bar. The menu button opens the sidebar as a left slideover.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDashboardGroup storage="local"</code> › <code>UDashboardSidebar collapsible :resizable="false" :default-size="16" :collapsed-size="4"</code> with the <code>#header</code> (AppLogo), <code>#default</code> (<code>UNavigationMenu orientation="vertical" :collapsed</code>) and <code>#footer</code> (UserMenu) slots. Each page is a <code>UDashboardPanel</code>, with a <code>UDashboardNavbar</code> holding <code>UDashboardSidebarCollapse</code> and <code>UBreadcrumb</code>. On mobile, <code>UDashboardSidebarToggle</code> appears and the sidebar's built-in slideover takes over.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">UserMenu</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UDropdownMenu :content="{ side: 'top', align: 'start' }"</code> on a ghost <code>UButton block</code> with a <code>UAvatar</code> and the username. The groups are: the account label; System, Light and Dark as checkbox items; then Log out. There are no profile or password items, because the API doesn't support them.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">No props, because the shell reads the user from the <code>session</code> Pinia store. The navbar reads <code>route.meta.title</code> and <code>route.meta.breadcrumb</code>. Slots <code>navbar-right</code> (page actions on mobile) and <code>default</code>. It shows the offline banner when <code>navigator.onLine</code> is false.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The first Tab stop is a "Skip to content" link. The sidebar is a <code>nav</code> labeled "Main", and the current page gets <code>aria-current="page"</code>. In the collapsed rail, items show tooltips and keep their <code>aria-label</code>. The collapse button carries <code>aria-expanded</code>. The mobile slideover traps focus and closes after navigating.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Bend</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The active nav item uses a sand fill with ink text instead of Nuxt UI's primary-tinted background and left indicator. The shell is set up for this in <code>ui.config.ts</code>.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">PageHeader</h2>
|
||||
<div style="background:var(--ui-bg-muted);border:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap"><div style="flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted)">Everything you've written, online and in draft.</span></div><div style="display:flex;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat"></span>Connect your website</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div></div>
|
||||
<div style="width:358px;max-width:100%;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--ui-bg);border:1px solid var(--ui-border)"><div style="display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Articles</span><span style="color:var(--ui-text-muted);font-size:14px">Everything you've written, online and in draft.</span></div><span style="height:44px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500;font-size:15px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UPageHeader :title :description</code>, with actions in the <code>#links</code> slot. The <code>ui</code> override is <code>{ root: 'py-0 border-0', title: 'text-xl', description: 'text-sm text-muted mt-0.5' }</code>, which brings Nuxt UI's marketing-size header down to dashboard density.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, slots</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>title</code>, <code>description?</code>, slot <code>actions</code> (the primary action goes last, so it sits on the right), slot <code>meta</code> (for example, a status badge next to the title in the editor).</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>md</code>, the actions wrap under the text. The primary action goes full width at 44 px, and secondary actions move into the navbar's overflow menu.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleStatusBadge</h2>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center">
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
|
||||
<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span>
|
||||
<span style="height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Publishing…</span>
|
||||
<span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-muted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Unpublishing…</span>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UBadge</code>. Online: <code>color="neutral" variant="solid" icon="i-lucide-globe"</code>. Draft: <code>color="neutral" variant="outline" icon="i-lucide-pencil-line"</code>. Status is shown by the fill, the icon and the word, never by color alone.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>online: boolean</code>, <code>size?: 'sm' | 'md'</code> (sm in lists, md in the editor header), <code>pending?: 'publish' | 'unpublish'</code> (shows the -ing label with a spinner while the request runs). No emits, because it isn't interactive.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleTable</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Search, filter tabs, a sortable table and row actions. Everything happens in the browser on the list it has already loaded. Below <code>md</code>, the table becomes a card list with the same data and actions.</p>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start">
|
||||
<div style="flex:1;min-width:min(100%,620px);display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px;border-bottom:1px solid var(--ui-border);flex-wrap:wrap">
|
||||
<div style="display:flex;gap:20px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">All<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">6</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Online<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:var(--ui-text-toned)">Drafts<span style="font:500 11px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">2</span></span></div>
|
||||
<span style="width:240px;height:32px;margin-bottom:6px;padding:0 10px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);background:var(--ui-bg);color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span>Search by title</span>
|
||||
</div>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);position:relative">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 120px 44px;height:36px;align-items:center;padding:0 12px;background:var(--ui-bg-elevated);color:var(--ui-text-muted);font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:var(--ui-text-highlighted)">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat"></span></span><span></span></div>
|
||||
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 100px 110px 120px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid var(--ui-border)">
|
||||
<span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:12px">{{ a.t }}</span>
|
||||
<span><sc-if value="{{ a.on }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if></span>
|
||||
<span style="color:var(--ui-text-muted)">{{ a.c }}</span><span style="color:var(--ui-text-muted)">{{ a.u }}</span>
|
||||
<span style="display:flex;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:358px;max-width:100%;background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:flex;align-items:center;gap:8px;padding:12px 4px 12px 16px;border-bottom:1px solid var(--ui-border);min-height:64px">
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px;line-height:21px;color:var(--ui-text-highlighted)">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:var(--ui-text-muted)"><sc-if value="{{ a.on }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="height:20px;padding:0 6px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div>
|
||||
<span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat"></span></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UTabs</code> + <code>UInput type="search"</code> + <code>UTable</code> (desktop), or a custom <code>ArticleCardList</code> of <code>ULink</code> rows (mobile), switched with <code>useBreakpoints</code> at <code>md</code>. Each row has a <code>UDropdownMenu</code>, and the row actions go through <code>useArticleActions()</code>, which shares one set of calls between the table, the list and the editor.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Props <code>articles: Article[]</code>, <code>loading: boolean</code>, <code>busyIds: Set<number></code>. Emits <code>publish(id)</code>, <code>unpublish(id)</code>, <code>delete(article)</code>, <code>copy-url(id)</code>. Search, tab and sort state lives in the URL query (<code>?q=&status=&sort=</code>). Slots <code>#empty</code>, <code>#toolbar-right</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Behavior</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Search is case-insensitive and ignores accents, and it matches anywhere in the title. It updates on input, debounced 120 ms. Tab counts always reflect the full list. Dates within 7 days are relative ("2 hours ago"); older ones are absolute ("18 Aug 2026"), with the full timestamp in a <code>title</code> attribute. Clicking a row opens the editor, except clicks on the menu.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">States</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Loading (5 skeleton rows), empty, no results, a filter tab with nothing in it, a row busy, an action failed (toast with Retry, row reverts), and a row vanished (a 404 on any action removes the row and shows an info toast). Row actions are never optimistic: the row updates when the 200 arrives.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The table has a visually hidden caption, "Articles, sorted by last updated, newest first". Each row's menu button is named "Actions for How we price a bathroom renovation". After a search, a polite live region announces "3 articles".</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">EmptyState</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1px;background:var(--ui-border);border:1px solid var(--ui-border)">
|
||||
<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No articles yet</span><span style="color:var(--ui-text-muted);max-width:240px">Write your first one. It stays a draft until you publish it.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
|
||||
<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No articles match "tiles"</span><span style="color:var(--ui-text-muted);max-width:240px">Check the spelling, or search for a shorter part of the title.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Clear search</span></div>
|
||||
<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">No drafts</span><span style="color:var(--ui-text-muted);max-width:240px">Everything you've written is online.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat"></span>New article</span></div>
|
||||
<div style="background:var(--ui-bg);padding:40px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-bg-elevated);color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span></span><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">Nothing is online yet</span><span style="color:var(--ui-text-muted);max-width:240px">Publish a draft and it will appear on your website.</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Show drafts</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UEmpty :icon :title :description :actions variant="naked"</code>, placed in the <code>UTable</code> <code>#empty</code> slot or on the page. The icon tile is overridden to <code>rounded-none bg-elevated</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>variant: 'no-articles' | 'no-results' | 'no-drafts' | 'no-online'</code>, <code>query?: string</code>. Emits <code>action</code>. Each variant has fixed copy, and the search term is shown in quotes, cut to 40 characters.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The title is an <code>h2</code>. "No results" is announced through the table's live region. Clear search returns focus to the search field.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ConfirmDialog</h2>
|
||||
<div style="background:var(--rc-overlay);padding:40px 16px;display:flex;flex-wrap:wrap;gap:24px;justify-content:center;align-items:flex-start">
|
||||
<div role="alertdialog" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
|
||||
<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Delete this article?</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">"Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.</span></div>
|
||||
<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Cancel</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/trash-2.svg') center / contain no-repeat"></span>Delete article</span></div>
|
||||
</div>
|
||||
<div role="alertdialog" style="width:440px;max-width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
|
||||
<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Delete this article?</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">"Winter checklist for timber windows" and its 3 images will be deleted. This can't be undone.</span>
|
||||
<div role="alert" style="display:flex;gap:8px;padding:10px 12px;margin-top:8px;background:var(--rc-error-soft);color:var(--ui-error)"><span style="display:flex;padding-top:2px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-toned)">Couldn't delete the article, so it's still there. Try again in a moment.</span></div></div>
|
||||
<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-dimmed);font-weight:500">Cancel</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500;opacity:0.85"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Deleting…</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin:0;color:var(--ui-text-muted);font-size:12px">Left: default. Right: after a failed attempt (the error appears inline), with the retry running (loading).</p>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal</code> opened through <code>useOverlay().create(ConfirmDialog)</code>. <code>open()</code> returns a promise that resolves once the action succeeds or the dialog is cancelled. The action runs inside the dialog, so errors show there instead of in a toast behind the overlay.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>title</code>, <code>description</code>, <code>confirmLabel</code>, <code>pendingLabel</code>, <code>tone: 'danger' | 'neutral'</code>, <code>action: () => Promise<void></code>. Emits <code>close(confirmed: boolean)</code>. The delete description comes from the title plus <code>images.length</code>, and reads "and its image" for 1 and just the title for 0.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Other uses</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Cancel registration: "Cancel your registration?" / "Your account will be deleted. You can register again with the same or a different email." / "Cancel registration" / "Keep my account". Leaving with unsaved changes uses the neutral tone.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>role="alertdialog"</code>. Focus starts on Cancel, and Enter doesn't confirm by default. While the action runs, the dialog can't be dismissed, both buttons are disabled, and <code>aria-busy</code> is set. On success, focus goes to the next row, or the page heading if there isn't one.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ArticleEditor, SaveStatus, PublishControl, CharacterCounter</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">The editor is made of four components that work together. The header holds the read-only title, status, SaveStatus, Save and PublishControl. A sticky toolbar sits above the writing surface, which uses the content type scale. The counter sits at the foot.</p>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<div style="padding:16px 20px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--ui-border);flex-wrap:wrap">
|
||||
<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-left.svg') center / contain no-repeat"></span></span>
|
||||
<div style="flex:1;min-width:200px;display:flex;align-items:center;gap:10px"><span style="font:600 18px/26px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">How we price a bathroom renovation</span><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-toned);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat"></span>Draft</span></div>
|
||||
<span aria-live="polite" style="display:flex;align-items:center;gap:6px;color:var(--ui-warning)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat"></span>Unsaved changes</span>
|
||||
<span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/save.svg') center / contain no-repeat"></span>Save</span>
|
||||
<span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Save and publish</span>
|
||||
<span style="width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat"></span></span>
|
||||
</div>
|
||||
<div role="toolbar" aria-label="Formatting" style="padding:6px 16px;display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--ui-border);overflow-x:auto;background:var(--ui-bg)">
|
||||
<sc-for list="{{ toolbar }}" as="t" hint-placeholder-count="24">
|
||||
<sc-if value="{{ t.sep }}"><span style="width:1px;height:20px;background:var(--ui-border-accented);margin:0 6px;flex-shrink:0"></span></sc-if>
|
||||
<sc-if value="{{ t.btn }}"><span title="{{ t.label }}" style="height:28px;min-width:28px;padding:0 6px;flex-shrink:0;display:flex;align-items:center;justify-content:center;gap:4px;color:var(--ui-text-toned);background:{{ t.bg }}"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.text }}</span></sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap">
|
||||
<div style="flex:1;min-width:min(100%,520px);padding:40px 32px;font-family:'Source Serif 4',serif;color:var(--ui-text-highlighted)">
|
||||
<p style="margin:0 0 20px;font-size:18px;line-height:30px;max-width:672px">Every bathroom is different, but the way we price them isn't. We start with a visit, measure everything, and <strong>write down what stays</strong>.</p>
|
||||
<div style="font-size:26px;line-height:34px;font-weight:600;margin:32px 0 12px">What goes into the price</div>
|
||||
<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:18px;line-height:30px;max-width:672px"><li>Stripping out and making good</li><li>Plumbing moves, if any<span style="display:inline-block;width:2px;height:22px;background:var(--ui-text-highlighted);vertical-align:-4px;margin-left:1px"></span></li></ul>
|
||||
</div>
|
||||
<div style="width:280px;max-width:100%;border-left:1px solid var(--ui-border);padding:20px;display:flex;flex-direction:column;gap:14px;font-size:13px">
|
||||
<span style="font-weight:600;color:var(--ui-text-highlighted)">Details</span>
|
||||
<div style="display:grid;grid-template-columns:auto 1fr;gap:8px 12px"><span style="color:var(--ui-text-muted)">Created</span><span>12 Mar 2026, 09:14</span><span style="color:var(--ui-text-muted)">Updated</span><span>Today, 11:02</span><span style="color:var(--ui-text-muted)">ID</span><span style="font-family:'IBM Plex Mono',monospace">12</span><span style="color:var(--ui-text-muted)">Images</span><span>3</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="color:var(--ui-text-muted)">Public API URL</span><span style="display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--ui-bg-elevated);font:400 12px 'IBM Plex Mono',monospace;overflow:hidden"><span style="flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">/v1/article/12</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/copy.svg') center / contain no-repeat"></span></span><span style="color:var(--ui-text-muted);font-size:12px">Returns 404 until the article is online.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:10px 20px;border-top:1px solid var(--ui-border);display:flex;align-items:center;gap:16px;flex-wrap:wrap"><span style="flex:1"></span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">4 318 / 10 000</span></div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:1px;background:var(--ui-border);border:1px solid var(--ui-border)">
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-warning)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-dot.svg') center / contain no-repeat"></span>Unsaved changes</span><code style="color:var(--ui-text-muted)">dirty, Save enabled</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/loader-circle.svg') center / contain no-repeat"></span>Saving…</span><code style="color:var(--ui-text-muted)">saving, Save disabled</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:6px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span>Saved at 11:02</span><code style="color:var(--ui-text-muted)">saved, Save disabled</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>Save failed<span style="height:24px;padding:0 8px;display:flex;align-items:center;gap:4px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Retry</span></span><code style="color:var(--ui-text-muted)">error, changes kept</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat"></span>Publish</span></span><code style="color:var(--ui-text-muted)">draft, saved</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="display:flex;align-items:center;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat"></span>Unpublish</span></span><code style="color:var(--ui-text-muted)">online</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:10px"><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-warning);display:flex;align-items:center;gap:6px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/triangle-alert.svg') center / contain no-repeat"></span>9 240 / 10 000</span><code style="color:var(--ui-text-muted)">body ≥ 90%</code></div>
|
||||
<div style="background:var(--ui-bg);padding:16px;display:flex;flex-direction:column;gap:6px"><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-error);display:flex;align-items:center;gap:6px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>10 214 / 10 000</span><span style="color:var(--ui-error);font-size:12px">214 characters over. Shorten the text or remove an image. Formatting counts too.</span><code style="color:var(--ui-text-muted)">over limit, Save disabled</code></div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">ArticleEditor</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UEditor v-model content-type="html" :extensions</code> + <code>UEditorToolbar :editor :items layout="fixed"</code>. TipTap v3 StarterKit already includes Underline and Link. <code>TextAlign</code> handles alignment and <code>Image</code> handles images. Formatting is a <code>UDropdownMenu</code> with Paragraph and Headings 1–4 (<code>h1</code> is kept because the public site controls how the title appears). Indent and outdent call <code>sinkListItem</code>/<code>liftListItem</code> in lists. For paragraphs, a small <strong>custom Indent extension</strong> writes <code>data-indent="1–4"</code>, because TipTap has no paragraph indent. Clear formatting runs <code>unsetAllMarks().clearNodes()</code>. The editor surface gets <code>class="article-content"</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>modelValue: string</code> (HTML), <code>articleId: number</code>, <code>disabled?</code>. Emits <code>update:modelValue</code>, <code>request-image</code>. Exposes <code>insertImage(src, alt)</code> and <code>focus()</code>. The toolbar reflects the active state (bold is on at the cursor) using <code>aria-pressed</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">SaveStatus</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A custom inline <code>span aria-live="polite"</code>, driven by <code>useArticleDraft()</code>: <code>'clean' | 'dirty' | 'saving' | 'saved' | 'error'</code>. Saved shows the time and switches to "Saved 5 min ago" after an hour. The error state's Retry is a <code>UButton size="xs" variant="outline"</code>. Ctrl/⌘ S saves. Leaving with unsaved changes triggers <code>onBeforeRouteLeave</code> (ConfirmDialog, neutral tone) and <code>beforeunload</code>. There is <strong>no autosave</strong>, so the owner controls exactly what is sent. The draft is mirrored to <code>sessionStorage</code> so it survives a session expiry.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">PublishControl</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A single <code>UButton</code>. Draft → primary "Publish"; draft with unsaved changes → "Save and publish" (PATCH body, then PATCH publish; if the save fails, it doesn't publish); online → outline "Unpublish". Unpublishing doesn't save pending changes, so the draft edits stay pending. Toasts: "Article published", with the description <em>"Title" is now online.</em>; "Article unpublished", <em>It's a draft again and hidden from your website.</em></span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">CharacterCounter</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A custom component in mono type. Props <code>value: number</code>, <code>max: number</code>, <code>min?: number</code>, <code>warnAt?: number</code> (default 0.9). The title uses <code>[...str].length</code>, so accents and emoji count as one, matching Go's validator, which counts runes. The body uses the HTML string length, which is what the API receives. The warning and error states add an icon and text, not just color. A visually hidden live region announces the change only when a threshold is crossed, not on every keystroke.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Responsive</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Below <code>lg</code>, the details panel becomes a right slideover, opened with <code>i-lucide-panel-right</code>. Below <code>md</code>, the header wraps: back, title and badge on the first row, then SaveStatus and the counter. Save and Publish move to a sticky bottom bar (44 px). The toolbar scrolls horizontally with fade edges and keeps undo, redo and the image button pinned at the start.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ImageUploader</h2>
|
||||
<p style="margin:0;max-width:720px;color:var(--ui-text-toned);font-size:14px;line-height:22px;text-wrap:pretty">Opens from the editor's image button in a small modal. Files are checked in the browser before anything is sent. After a successful upload the image goes in at the cursor and the modal closes.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:16px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px dashed var(--ui-border-accented);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-text-toned)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/image-plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/image-plus.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">Drop an image here</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/upload.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/upload.svg') center / contain no-repeat"></span>Choose file</span><span style="color:var(--ui-text-muted);font-size:12px">PNG, JPEG, WEBP, SVG · max 10 MB</span></div><code style="color:var(--ui-text-muted)">idle</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:2px solid var(--ui-primary);background:var(--rc-sand);color:#111;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px"><span style="display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/image-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/image-down.svg') center / contain no-repeat"></span></span><span style="font-weight:600">Drop to upload</span></div><code style="color:var(--ui-text-muted)">dragging over</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;justify-content:center;gap:10px;padding:20px"><div style="display:flex;justify-content:space-between;gap:8px"><span style="font-weight:500;color:var(--ui-text-highlighted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap">north-wall.jpg</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">62%</span></div><div style="height:4px;background:var(--ui-bg-accented)"><div style="width:62%;height:4px;background:var(--ui-primary)"></div></div><span style="color:var(--ui-text-muted);font-size:12px">Uploading 2.4 of 3.9 MB</span></div><code style="color:var(--ui-text-muted)">uploading</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-border);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--ui-success)"><span style="display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-check.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">Image added</span></div><code style="color:var(--ui-text-muted)">success, closes after 600 ms</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-error);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-x.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">"plan.pdf" can't be used</span><span style="color:var(--ui-text-toned);font-size:12px">Use a PNG, JPEG, WEBP or SVG image, up to 10 MB.</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px">Choose another file</span></div><code style="color:var(--ui-text-muted)">rejected: type or size</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><div style="height:170px;border:1px solid var(--ui-error);background:var(--ui-bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center"><span style="display:flex;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:24px;height:24px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-x.svg') center / contain no-repeat"></span></span><span style="font-weight:500;color:var(--ui-text-highlighted)">Upload failed</span><span style="color:var(--ui-text-toned);font-size:12px">The server didn't accept the file. Your article hasn't changed.</span><span style="height:28px;padding:0 10px;display:flex;align-items:center;gap:6px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:12px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span></div><code style="color:var(--ui-text-muted)">server error</code></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UModal title="Add an image"</code> › <code>UFileUpload accept="image/png,image/jpeg,image/webp,image/svg+xml" :multiple="false" layout="list"</code> + <code>UProgress size="xs"</code>. Uploads go through <code>XMLHttpRequest</code>, because <code>fetch</code> has no upload progress, as <code>FormData</code> with the field name <code>file</code>. The 201 <code>location</code> is inserted with <code>insertImage(location, '')</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Validation</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">Before uploading, the uploader checks both the MIME type and the file extension, and that <code>size ≤ 10 × 1024 × 1024</code>. The size error names the file size: "north-wall.tif is 14.2 MB. Images can be up to 10 MB." A server 400 shows the same message as a client-side rejection.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Props, emits</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>articleId: number</code>. Emits <code>uploaded(location)</code>, <code>close</code>. A 401 hands off to the global session flow. A 404 means the article was deleted, which the editor handles.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y, touch</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The drop zone is a labeled button, so Enter opens the file picker. Progress is exposed as <code>role="progressbar"</code> with <code>aria-valuenow</code>, and the result is announced. On touch screens the drop text is hidden and "Choose file" becomes the main action. Dropping a file directly onto the editor surface also opens the uploader with that file.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">CodeBlock and EndpointCard</h2>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border)">
|
||||
<div style="padding:20px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--ui-border)">
|
||||
<div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap"><span style="height:22px;padding:0 7px;display:inline-flex;align-items:center;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);font:500 12px 'IBM Plex Mono',monospace">GET</span><span style="font:500 15px 'IBM Plex Mono',monospace;color:var(--ui-text-highlighted)">/v1/article/{id}</span></div>
|
||||
<span style="color:var(--ui-text-toned);font-size:14px">Returns one article. Drafts return 404 to anonymous callers, the same as an id that doesn't exist.</span>
|
||||
</div>
|
||||
<div style="display:flex;align-items:stretch;border-bottom:1px solid var(--ui-border);padding:0 20px;gap:20px"><span style="height:40px;display:flex;align-items:center;border-bottom:2px solid var(--ui-primary);margin-bottom:-1px;font-weight:500;color:var(--ui-text-highlighted)">fetch</span><span style="height:40px;display:flex;align-items:center;color:var(--ui-text-toned)">curl</span><span style="height:40px;display:flex;align-items:center;color:var(--ui-text-toned)">Response</span></div>
|
||||
<div style="background:var(--ui-bg-elevated)">
|
||||
<div style="height:36px;padding:0 8px 0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--ui-border)"><span style="font:500 12px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">JavaScript</span><span aria-live="polite" style="height:28px;padding:0 8px;display:flex;align-items:center;gap:6px;color:var(--ui-success);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span>Copied</span></div>
|
||||
<pre style="margin:0;padding:16px;overflow-x:auto;font:400 13px/20px 'IBM Plex Mono',monospace;color:var(--ui-text)"><span style="color:var(--ui-info)">const</span> res = <span style="color:var(--ui-info)">await</span> fetch(<span style="color:var(--ui-success)">'https://cms.renew.example/v1/article/12'</span>)
|
||||
<span style="color:var(--ui-info)">if</span> (res.status === <span style="color:var(--ui-warning)">404</span>) <span style="color:var(--ui-info)">return</span> notFound()
|
||||
<span style="color:var(--ui-info)">const</span> article = <span style="color:var(--ui-info)">await</span> res.json()</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">CodeBlock</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">This is a <strong>custom</strong> component, because Nuxt UI's prose code blocks rely on Nuxt Content and don't work in a plain Vue app. Highlighting is done ahead of time with <code>shiki</code> (a dual <code>github-light</code>/<code>github-dark</code> theme remapped to the semantic colors: keywords info, strings success, numbers warning, comments muted). The header shows the language label and a ghost copy <code>UButton</code>, which switches to "Copied" for 2 s through <code>useClipboard</code>. Props <code>code</code>, <code>lang</code>, <code>label?</code>. Long lines scroll horizontally and never wrap.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">EndpointCard</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UCard</code> › a method <code>UBadge</code> (GET is solid ink) + the path in mono + a description, with <code>UTabs</code> (fetch, curl, Response) showing a CodeBlock each. Props <code>method</code>, <code>path</code>, <code>description</code>, <code>examples: { fetch, curl, response }</code>. Snippets use the current <code>location.origin</code>.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The copy button is named "Copy JavaScript example", and its result is announced. Code is a focusable <code>pre</code> (<code>tabindex="0"</code>) so keyboard users can scroll it. Syntax colors pass 4.5:1 on <code>--ui-bg-elevated</code> in both themes.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">PasswordStrengthHint</h2>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:24px;display:flex;flex-wrap:wrap;gap:48px">
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-text-muted)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle.svg') center / contain no-repeat"></span>At least 8 characters</span><code style="color:var(--ui-text-muted)">not met yet</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span><span style="color:var(--ui-text)">At least 8 characters</span></span><code style="color:var(--ui-text-muted)">met</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/circle-alert.svg') center / contain no-repeat"></span>At least 8 characters</span><code style="color:var(--ui-text-muted)">not met on submit</code></div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><span style="display:flex;align-items:center;gap:8px;color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/check.svg') center / contain no-repeat"></span><span style="color:var(--ui-text)">Passwords match</span></span><code style="color:var(--ui-text-muted)">reset screen only</code></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A <strong>custom</strong> <code>ul</code> in the password <code>UFormField</code>'s <code>#help</code> slot. Props <code>rules: { label: string, met: boolean }[]</code>, <code>showErrors: boolean</code>. There is no meter or score, because the API only requires 8 characters.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The list is the field's <code>aria-describedby</code>. Each item has hidden text reading "met" or "not met". A change is announced once, when the rule becomes met.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">ResultPanel</h2>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-success-soft);color:var(--ui-success)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/mail-check.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/mail-check.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Check your email</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">If an account exists for that email, a password reset link has been sent. The link expires in 1 hour.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Back to log in</span></div>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-error-soft);color:var(--ui-error)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/link-2-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/link-2-off.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">This link has expired</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">Reset links work once, for 1 hour. Request a new one and use it within the hour.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Request a new link</span></div>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:32px;display:flex;flex-direction:column;gap:16px"><span style="width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--rc-info-soft);color:var(--ui-info)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/timer.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/timer.svg') center / contain no-repeat"></span></span><div style="display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Too many attempts</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">For your security, wait a moment before trying again. You can try again in <span style="font-family:'IBM Plex Mono',monospace">0:42</span>.</span></div><span style="height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);color:var(--ui-text-dimmed);font-weight:500">Try again in 0:42</span><span style="align-self:flex-start;height:20px;padding:0 6px;display:inline-flex;align-items:center;border:1px dashed var(--ui-border-accented);color:var(--ui-text-toned);font:500 11px 'IBM Plex Mono',monospace">API pending</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">A <strong>custom</strong> component that fills AuthShell's slot: an icon tile, <code>h1</code> title, description and <code>UButton block size="lg"</code> actions. Props <code>tone: 'success' | 'error' | 'info'</code>, <code>icon</code>, <code>title</code>, <code>description</code>, <code>actions: ButtonProps[]</code>. Slot <code>default</code> for extras such as the inline login on verify.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">When the panel replaces a form, focus moves to its title and the panel is <code>role="status"</code>, or <code>role="alert"</code> for errors. The countdown updates every second visually but is announced only at the start and when it reaches zero.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:20px;padding:40px 0;border-top:1px solid var(--ui-border)">
|
||||
<h2 style="margin:0;font:600 22px/30px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Error pages and offline banner</h2>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div role="status" style="display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--ui-bg-inverted);color:var(--ui-text-inverted);flex-wrap:wrap"><span style="display:flex"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/wifi-off.svg') center / contain no-repeat"></span></span><span style="flex:1;min-width:200px">You're offline. You can keep writing, but saving and publishing will wait until you're back online.</span></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:16px">
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px 32px;display:flex;flex-direction:column;gap:14px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">404</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Page not found</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">The link may be mistyped, or the page may have moved.</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:var(--ui-primary);color:var(--ui-bg);font-weight:500">Go to Home</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">All articles</span></div></div>
|
||||
<div style="background:var(--ui-bg);border:1px solid var(--ui-border);padding:40px 32px;display:flex;flex-direction:column;gap:14px"><span style="font:500 13px 'IBM Plex Mono',monospace;color:var(--ui-text-muted)">Error</span><span style="font:600 24px/32px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">Something went wrong</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">This page couldn't load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.</span><div style="display:flex;gap:8px;flex-wrap:wrap"><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Try again</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">Go to Home</span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);border-top:1px solid var(--ui-border);font-size:13px">
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">Built from</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)"><code>UError</code> isn't used because it's built for Nuxt's <code>error.vue</code>. Instead there's a <strong>custom</strong> <code>ErrorView</code> (props <code>kind: 'not-found' | 'error'</code>), rendered inside <code>UDashboardPanel</code> when the user is logged in and inside AuthShell otherwise. The offline banner is a <code>UBanner color="neutral"</code> at <code>--z-banner</code>, shown and hidden with <code>useOnline()</code>. Once the connection returns it switches to "You're back online" for 3 s.</span>
|
||||
<span style="padding:10px 0;border-bottom:1px solid var(--ui-border);font-weight:600">A11y</span><span style="padding:10px 0;border-bottom:1px solid var(--ui-border)">The error title is the page <code>h1</code> and gets focus on render. The banner is <code>role="status"</code>, and it can't be dismissed while offline. The offline state blocks Save and Publish and says why in their tooltip.</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"theme":{"editor":"enum","options":["system","light","dark"],"default":"light","tsType":"'system' | 'light' | 'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { mode: this.props.theme ?? 'light' }
|
||||
rootRef = React.createRef()
|
||||
light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-primary-hover': '#333333', '--rc-primary-active': '#444444', '--rc-error-hover': '#6a1a11', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)' }
|
||||
dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-primary-hover': '#e5e5e5', '--rc-primary-active': '#cccccc', '--rc-error-hover': '#e37e6e', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)' }
|
||||
resolved() {
|
||||
if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
return this.state.mode
|
||||
}
|
||||
apply() {
|
||||
const el = this.rootRef.current
|
||||
if (!el) return
|
||||
const vars = this.resolved() === 'dark' ? this.dark : this.light
|
||||
for (const k in vars) el.style.setProperty(k, vars[k])
|
||||
document.body.style.background = vars['--ui-bg-muted']
|
||||
}
|
||||
componentDidMount() { this.apply() }
|
||||
componentDidUpdate(p) {
|
||||
if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
|
||||
this.apply()
|
||||
}
|
||||
renderVals() {
|
||||
const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
|
||||
const on = this.state.mode === k
|
||||
return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
|
||||
})
|
||||
const articles = [
|
||||
{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago' },
|
||||
{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday' },
|
||||
{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago' },
|
||||
{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago' },
|
||||
{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026' }
|
||||
].map(a => ({ ...a, draft: !a.on }))
|
||||
const tb = [['undo-2', 'Undo'], ['redo-2', 'Redo'], '|', ['pilcrow', 'Paragraph', 'Paragraph ▾'], '|', ['bold', 'Bold', '', true], ['italic', 'Italic'], ['underline', 'Underline'], ['strikethrough', 'Strikethrough'], '|', ['align-left', 'Align left', '', true], ['align-center', 'Align center'], ['align-right', 'Align right'], ['align-justify', 'Justify'], '|', ['list', 'Bulleted list', '', true], ['list-ordered', 'Numbered list'], ['indent-decrease', 'Outdent'], ['indent-increase', 'Indent'], '|', ['remove-formatting', 'Clear formatting'], ['image-plus', 'Insert image', 'Image']]
|
||||
const toolbar = tb.map(x => x === '|' ? { sep: true, btn: false } : { sep: false, btn: true, icon: x[0], label: x[1], text: x[2] || '', bg: x[3] ? 'var(--ui-bg-accented)' : 'transparent' })
|
||||
return { rootRef: this.rootRef, modes, articles, toolbar }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Instrument+Sans:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=Archivo:wght@400;500;600;800&family=Literata:opsz,wght@7..72,400;7..72,600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;background:#ecebe8;color:#111;font-family:'IBM Plex Sans',sans-serif}a{color:#111}a:hover{color:#444}</style>
|
||||
</helmet>
|
||||
<section data-screen-label="Turn 1 directions" style="padding:64px;display:flex;flex-direction:column;gap:40px">
|
||||
<div style="display:flex;flex-direction:column;gap:12px;max-width:900px">
|
||||
<h1 style="margin:0;font:600 40px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em">RenewCMS, three directions</h1>
|
||||
<p style="margin:0;font:400 17px/1.55 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">All three share your palette, the white-on-black R and square corners (<code style="font-family:'IBM Plex Mono',monospace">--ui-radius: 0</code>). They differ in type, density and how much the sand accent carries. Each shows the article list at desktop in light and at 390 px in dark. Pick one and I'll build the full foundations.</p>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start">
|
||||
|
||||
<div id="1a" data-screen-label="1a Ledger" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
||||
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1a</span><h2 style="margin:0;font:600 32px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em">Ledger</h2></div>
|
||||
<p style="margin:0;max-width:820px;font:400 16px/1.6 'IBM Plex Sans',sans-serif;color:#444;text-wrap:pretty">Quiet and precise, like a well-kept account book. Monochrome, hairline borders, compact rows so a few hundred articles scan quickly. Sand appears only where you are: the active nav item and selection. Article content switches to a sturdy serif so writing feels distinct from the tool.</p>
|
||||
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#444">
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#111111</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#444"></div><span>neutral-600</span><span style="font-family:'IBM Plex Mono',monospace">#444444</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e6e4e0"></div><span>border</span><span style="font-family:'IBM Plex Mono',monospace">#e6e4e0</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
|
||||
</div>
|
||||
<span>Primary is ink, secondary is sand, neutral is the brand grays with a slight warm tint on borders.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="font:600 28px/1.1 'IBM Plex Sans',sans-serif;color:#111">Aa IBM Plex Sans</span>
|
||||
<span style="font:600 26px/1.2 'Source Serif 4',serif;color:#111">Aa Source Serif 4</span>
|
||||
<span>UI at 13/20, content at 18/30. Plex Mono for ids, paths and code.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="color:#111;font-weight:500">Radius 0 · 1 px borders · compact</span>
|
||||
<span>Rows 44 px, controls 32 px, 24 px page gutters. No shadows except menus and modals.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:1144px;height:680px;display:flex;border:1px solid #e6e4e0;background:#fafafa;font:400 13px/20px 'IBM Plex Sans',sans-serif;color:#111;overflow:hidden">
|
||||
<div style="width:224px;flex-shrink:0;background:#fff;border-right:1px solid #e6e4e0;display:flex;flex-direction:column;padding:12px;box-sizing:border-box;gap:2px">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:10px"><div style="width:26px;height:26px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:600 16px 'IBM Plex Sans',sans-serif">R</div><span style="font-weight:600;font-size:14px">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;background:#e8dfd1;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:32px;padding:0 10px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;border-top:1px solid #e6e4e0;padding-top:8px"><div style="width:26px;height:26px;background:#d4c5b0;display:flex;align-items:center;justify-content:center;font:600 11px 'IBM Plex Sans',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#666"></span></div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
||||
<div style="height:48px;border-bottom:1px solid #e6e4e0;background:#fff;display:flex;align-items:center;padding:0 24px;gap:8px;color:#666"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/panel-left.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/panel-left.svg') center / contain no-repeat;"></span><span style="width:1px;height:16px;background:#e6e4e0;margin:0 6px"></span><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;"></span></div>
|
||||
<div style="padding:24px;display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font:600 20px/28px 'IBM Plex Sans',sans-serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:32px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#111;color:#fff;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
||||
<div style="display:flex;align-items:center;gap:16px;border-bottom:1px solid #e6e4e0">
|
||||
<div style="display:flex;gap:20px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #111;font-weight:500">All <span style="color:#666">6</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Online <span>4</span></span><span style="height:36px;display:flex;align-items:center;gap:6px;color:#666">Drafts <span>2</span></span></div>
|
||||
<div style="width:240px;height:30px;margin-bottom:6px;border:1px solid #cfccc7;background:#fff;display:flex;align-items:center;gap:8px;padding:0 10px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6e4e0">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:36px;align-items:center;padding:0 12px;color:#666;background:#f3f2f0;font-weight:500"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
||||
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 110px 120px 130px 44px;height:44px;align-items:center;padding:0 12px;border-top:1px solid #e6e4e0">
|
||||
<span style="font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
||||
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;background:#111;color:#fff;font-size:12px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 7px;border:1px solid #999;color:#444;font-size:12px;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
||||
<span style="color:#666">{{ a.c }}</span><span style="color:#666">{{ a.u }}</span>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#666;justify-self:center"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:40px;align-items:flex-start">
|
||||
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 14px/20px 'IBM Plex Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:24px;height:24px;background:#111;border:1px solid #444;color:#fff;display:flex;align-items:center;justify-content:center;font:600 14px 'IBM Plex Sans',sans-serif">R</div><span style="flex:1;font-weight:600;font-size:16px">Articles</span><div style="width:44px;height:44px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span></div></div>
|
||||
<div style="padding:12px 16px;display:flex;flex-direction:column;gap:10px">
|
||||
<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:8px;padding:0 12px;color:#999;background:#1a1a1a"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
||||
<div style="display:flex;gap:20px;border-bottom:1px solid #333"><span style="height:40px;display:flex;align-items:center;gap:6px;border-bottom:2px solid #fafafa;font-weight:500">All <span style="color:#999">6</span></span><span style="height:40px;display:flex;align-items:center;color:#999">Online 4</span><span style="height:40px;display:flex;align-items:center;color:#999">Drafts 2</span></div>
|
||||
</div>
|
||||
<sc-for list="{{ articles }}" as="a" hint-placeholder-count="6">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid #2a2a2a">
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:6px"><span style="font-weight:500;font-size:15px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:12px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;background:#fafafa;color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px solid #666;color:#cfccc7;font-weight:500;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>Updated {{ a.u }}</span></div></div>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
||||
<span style="font:600 30px/1.25 'Source Serif 4',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
||||
<p style="margin:0;font:400 18px/30px 'Source Serif 4',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
||||
<blockquote style="margin:0;padding-left:18px;border-left:2px solid #111;font:italic 400 18px/30px 'Source Serif 4',serif;color:#444">It sets slowly, and that is the point.</blockquote>
|
||||
<p style="margin:0;font:400 13px/1.5 'IBM Plex Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #fafafa 18.1:1 · #666 on #fafafa 5.5:1 · #999 on #111 6.6:1. #999 on light fails AA, so it is kept for dark mode and disabled states only.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="1b" data-screen-label="1b Atelier" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
||||
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1b</span><h2 style="margin:0;font:500 34px/1.1 'Newsreader',serif">Atelier</h2></div>
|
||||
<p style="margin:0;max-width:820px;font:400 16px/1.6 'Instrument Sans',sans-serif;color:#444;text-wrap:pretty">Warm and unhurried, like a workshop with good light. The sand accent becomes the frame: a sand sidebar around a pale working surface. Titles are set in a literary serif everywhere, including the table, so the list reads like a table of contents. Generous rows, larger controls, friendly on a phone.</p>
|
||||
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#444">
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>primary</span><span style="font-family:'IBM Plex Mono',monospace">#222222</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'IBM Plex Mono',monospace">#d4c5b0</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#e8dfd1"></div><span>bg-accented</span><span style="font-family:'IBM Plex Mono',monospace">#e8dfd1</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fafafa;border:1px solid #e6e4e0;box-sizing:border-box"></div><span>bg</span><span style="font-family:'IBM Plex Mono',monospace">#fafafa</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'IBM Plex Mono',monospace">#666666</span></div>
|
||||
</div>
|
||||
<span>Primary is near-black for a softer button. Sand is structural here, not just a highlight.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="font:600 28px/1.1 'Instrument Sans',sans-serif;color:#111">Aa Instrument Sans</span>
|
||||
<span style="font:500 28px/1.2 'Newsreader',serif;color:#111">Aa Newsreader</span>
|
||||
<span>UI at 15/22, titles and content in Newsreader at 19/32.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="color:#111;font-weight:500">Radius 0 · tonal surfaces · comfortable</span>
|
||||
<span>Rows 60 px, controls 40 px, 32 px gutters. Separation by surface color more than by lines.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:1144px;height:680px;display:flex;background:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;color:#111;overflow:hidden;border:1px solid #e6e4e0">
|
||||
<div style="width:248px;flex-shrink:0;background:#e8dfd1;display:flex;flex-direction:column;padding:20px 16px;box-sizing:border-box;gap:4px">
|
||||
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 4px;margin-bottom:20px"><div style="width:32px;height:32px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font:500 20px 'Newsreader',serif">R</div><span style="font:500 20px 'Newsreader',serif">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;background:#fafafa;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:40px;padding:0 12px;color:#444"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:48px;padding:0 4px"><div style="width:32px;height:32px;background:#222;color:#e8dfd1;display:flex;align-items:center;justify-content:center;font:600 12px 'Instrument Sans',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#444"></span></div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
||||
<div style="height:60px;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666;font-size:14px"><span>Home</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevron-right.svg') center / contain no-repeat;"></span><span style="color:#111">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#444"></span></div>
|
||||
<div style="padding:4px 32px 32px;display:flex;flex-direction:column;gap:22px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:4px"><span style="font:500 36px/1.1 'Newsreader',serif">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#222;color:#fff;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
||||
<div style="display:flex;align-items:center;gap:16px">
|
||||
<div style="display:flex;border:1px solid #d4c5b0;flex-shrink:0"><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#e8dfd1;font-weight:600">All <span style="font-weight:400;color:#444">6</span></span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Online 4</span><span style="height:38px;display:flex;align-items:center;gap:6px;padding:0 14px;color:#444">Drafts 2</span></div>
|
||||
<span style="flex:1"></span>
|
||||
<div style="width:280px;height:40px;border:1px solid #d4c5b0;background:#fff;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:2px">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:36px;align-items:center;padding:0 16px;color:#666;font-size:14px"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px;color:#111">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
||||
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 130px 140px 48px;height:60px;align-items:center;padding:0 16px;background:#fff">
|
||||
<span style="font:500 18px/1.2 'Newsreader',serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
||||
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#111;color:#fff;font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;background:#e8dfd1;color:#222;font-size:13px;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
||||
<span style="color:#666;font-size:14px">{{ a.c }}</span><span style="color:#666;font-size:14px">{{ a.u }}</span>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;color:#444;justify-self:center"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:40px;align-items:flex-start">
|
||||
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Instrument Sans',sans-serif;display:flex;flex-direction:column;overflow:hidden">
|
||||
<div style="height:60px;display:flex;align-items:center;gap:12px;padding:0 16px;background:#222"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><span style="flex:1;font:500 22px 'Newsreader',serif">Articles</span><div style="height:44px;display:flex;align-items:center;gap:6px;padding:0 14px;background:#d4c5b0;color:#111;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New</div></div>
|
||||
<div style="padding:16px;display:flex;flex-direction:column;gap:12px">
|
||||
<div style="height:44px;border:1px solid #444;display:flex;align-items:center;gap:10px;padding:0 12px;color:#999"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span>Search by title</div>
|
||||
<div style="display:flex;border:1px solid #444"><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;gap:6px;background:#444;font-weight:600">All 6</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Online 4</span><span style="flex:1;height:40px;display:flex;align-items:center;justify-content:center;color:#cfccc7">Drafts 2</span></div>
|
||||
</div>
|
||||
<div style="padding:0 16px;display:flex;flex-direction:column;gap:8px">
|
||||
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:flex;align-items:flex-start;gap:12px;padding:14px;background:#222">
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font:500 19px/1.25 'Newsreader',serif">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;font-size:13px;color:#999"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#444;color:#e8dfd1;font-weight:500"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.u }}</span></div></div>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999;padding-top:2px"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
||||
<span style="font:500 34px/1.2 'Newsreader',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
||||
<p style="margin:0;font:400 19px/32px 'Newsreader',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
||||
<blockquote style="margin:0;padding:14px 18px;background:#e8dfd1;font:italic 400 19px/30px 'Newsreader',serif;color:#222">It sets slowly, and that is the point.</blockquote>
|
||||
<p style="margin:0;font:400 13px/1.5 'Instrument Sans',sans-serif;color:#666;text-wrap:pretty">Contrast: #222 on #e8dfd1 12.4:1 · #444 on #e8dfd1 7.3:1 · #111 on #d4c5b0 11.2:1 · #e8dfd1 on #444 7.3:1.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="1c" data-screen-label="1c Plank" style="width:1240px;box-sizing:border-box;background:#fff;padding:48px;display:flex;flex-direction:column;gap:36px">
|
||||
<div style="display:flex;align-items:center;gap:14px"><span style="background:#111;color:#fff;font:500 14px 'IBM Plex Mono',monospace;padding:4px 9px">1c</span><h2 style="margin:0;font:800 36px/1.05 'Archivo',sans-serif;letter-spacing:-0.02em">Plank</h2></div>
|
||||
<p style="margin:0;max-width:820px;font:400 16px/1.6 'Archivo',sans-serif;color:#444;text-wrap:pretty">Solid and confident, like freshly cut timber and a builder's pencil. A black sidebar anchors the page, headings are heavy, dates and ids sit in monospace. Status is shape-coded: online is a filled sand tag, draft is a dashed outline. Most graphic of the three, still restrained.</p>
|
||||
<div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px;font:400 13px/1.5 'Archivo',sans-serif;color:#444">
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;gap:6px">
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#111"></div><span>primary</span><span style="font-family:'JetBrains Mono',monospace">#111111</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#d4c5b0"></div><span>secondary</span><span style="font-family:'JetBrains Mono',monospace">#d4c5b0</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#222"></div><span>neutral-800</span><span style="font-family:'JetBrains Mono',monospace">#222222</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#fff;border:1px solid #cfccc7;box-sizing:border-box"></div><span>bg</span><span style="font-family:'JetBrains Mono',monospace">#ffffff</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><div style="width:64px;height:48px;background:#666"></div><span>text-muted</span><span style="font-family:'JetBrains Mono',monospace">#666666</span></div>
|
||||
</div>
|
||||
<span>Ink and sand at full strength. White page, black frame, sand for the one thing that is live.</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="font:800 28px/1.1 'Archivo',sans-serif;color:#111;letter-spacing:-0.02em">Aa Archivo</span>
|
||||
<span style="font:600 26px/1.2 'Literata',serif;color:#111">Aa Literata</span>
|
||||
<span style="font:400 14px 'JetBrains Mono',monospace;color:#111">2026-09-24 · /v1/article/12</span>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:6px">
|
||||
<span style="color:#111;font-weight:500">Radius 0 · 2 px frame lines · medium</span>
|
||||
<span>Rows 52 px, controls 40 px. Heavy rules around the table, hairlines inside it.</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="width:1144px;height:680px;display:flex;background:#fff;font:400 14px/20px 'Archivo',sans-serif;color:#111;overflow:hidden;border:2px solid #111;box-sizing:border-box">
|
||||
<div style="width:232px;flex-shrink:0;background:#111;color:#fafafa;display:flex;flex-direction:column;padding:16px 12px;box-sizing:border-box;gap:4px">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 6px;margin-bottom:18px"><div style="width:30px;height:30px;background:#111;border:1px solid #666;color:#fff;display:flex;align-items:center;justify-content:center;font:800 18px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="font:800 16px 'Archivo',sans-serif;letter-spacing:-0.01em">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/house.svg') center / contain no-repeat;"></span>Home</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;background:#d4c5b0;color:#111;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/file-text.svg') center / contain no-repeat;"></span>Articles</div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;color:#cfccc7"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plug.svg') center / contain no-repeat;"></span>Integration</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="display:flex;align-items:center;gap:10px;height:48px;padding:8px 6px 0;border-top:1px solid #333"><div style="width:30px;height:30px;background:#fafafa;color:#111;display:flex;align-items:center;justify-content:center;font:600 12px 'Archivo',sans-serif">MA</div><span style="flex:1">marta</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/chevrons-up-down.svg') center / contain no-repeat;color:#999"></span></div>
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column">
|
||||
<div style="height:52px;border-bottom:1px solid #cfccc7;display:flex;align-items:center;padding:0 32px;gap:8px;color:#666"><span>Home</span><span>/</span><span style="color:#111;font-weight:500">Articles</span><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/sun-moon.svg') center / contain no-repeat;color:#111"></span></div>
|
||||
<div style="padding:28px 32px;display:flex;flex-direction:column;gap:22px">
|
||||
<div style="display:flex;align-items:flex-end;gap:16px"><div style="flex:1;display:flex;flex-direction:column;gap:6px"><span style="font:800 40px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span><span style="color:#666">Everything you've written, online and in draft.</span></div><div style="height:40px;display:flex;align-items:center;gap:8px;padding:0 16px;background:#111;color:#fff;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div></div>
|
||||
<div style="display:flex;align-items:center;gap:16px">
|
||||
<div style="display:flex;gap:6px;flex:1"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#111;color:#fff;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #cfccc7;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#666">2</span></span></div>
|
||||
<div style="width:260px;height:40px;border:2px solid #111;display:flex;align-items:center;gap:10px;padding:0 12px;color:#666;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;color:#111"></span>Search by title</div>
|
||||
</div>
|
||||
<div style="border-top:2px solid #111;border-bottom:2px solid #111">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:40px;align-items:center;padding:0 8px;font-weight:600;border-bottom:1px solid #111"><span>Title</span><span>Status</span><span>Created</span><span style="display:flex;align-items:center;gap:4px">Updated<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/arrow-down.svg') center / contain no-repeat;"></span></span><span></span></div>
|
||||
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 120px 120px 130px 44px;height:52px;align-items:center;padding:0 8px;border-top:1px solid #e6e4e0">
|
||||
<span style="font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:16px">{{ a.t }}</span>
|
||||
<span><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;background:#d4c5b0;color:#111;font-size:12px;font-weight:600"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 8px;border:1px dashed #444;color:#444;font-size:12px;font-weight:600;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:13px;height:13px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if></span>
|
||||
<span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ci }}</span><span style="color:#666;font:400 12px 'JetBrains Mono',monospace">{{ a.ui }}</span>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis.svg') center / contain no-repeat;justify-self:center"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;gap:40px;align-items:flex-start">
|
||||
<div style="width:390px;height:780px;flex-shrink:0;background:#111;color:#fafafa;font:400 15px/22px 'Archivo',sans-serif;display:flex;flex-direction:column;overflow:hidden;position:relative">
|
||||
<div style="height:56px;display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:2px solid #333"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:22px;height:22px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/menu.svg') center / contain no-repeat;"></span><div style="width:26px;height:26px;border:1px solid #666;display:flex;align-items:center;justify-content:center;font:800 15px 'Archivo',sans-serif;box-sizing:border-box">R</div><span style="flex:1"></span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/search.svg') center / contain no-repeat;"></span></div>
|
||||
<div style="padding:20px 16px 12px;display:flex;flex-direction:column;gap:14px">
|
||||
<span style="font:800 32px/1 'Archivo',sans-serif;letter-spacing:-0.03em">Articles</span>
|
||||
<div style="display:flex;gap:6px"><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;background:#fafafa;color:#111;font-weight:600">All <span style="font:400 12px 'JetBrains Mono',monospace">6</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Online <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">4</span></span><span style="height:36px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid #444;box-sizing:border-box">Drafts <span style="font:400 12px 'JetBrains Mono',monospace;color:#999">2</span></span></div>
|
||||
</div>
|
||||
<sc-for list="{{ articles5 }}" as="a" hint-placeholder-count="5">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:14px 16px;border-top:1px solid #333">
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:8px"><span style="font-weight:600;font-size:16px">{{ a.t }}</span><div style="display:flex;align-items:center;gap:10px;color:#999;font:400 12px 'JetBrains Mono',monospace"><sc-if value="{{ a.on }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;background:#d4c5b0;color:#111;font:600 12px 'Archivo',sans-serif"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe.svg') center / contain no-repeat;"></span>Online</span></sc-if><sc-if value="{{ a.draft }}"><span style="display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 7px;border:1px dashed #999;color:#e8dfd1;font:600 12px 'Archivo',sans-serif;box-sizing:border-box"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:12px;height:12px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil-line.svg') center / contain no-repeat;"></span>Draft</span></sc-if><span>{{ a.ui }}</span></div></div>
|
||||
<span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/ellipsis-vertical.svg') center / contain no-repeat;color:#999"></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="position:absolute;left:16px;right:16px;bottom:16px;height:52px;background:#d4c5b0;color:#111;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:20px;height:20px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/plus.svg') center / contain no-repeat;"></span>New article</div>
|
||||
</div>
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:14px;max-width:560px;padding-top:8px">
|
||||
<span style="font:600 30px/1.25 'Literata',serif;color:#111">Choosing lime plaster for old stone walls</span>
|
||||
<p style="margin:0;font:400 18px/31px 'Literata',serif;color:#222;text-wrap:pretty">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every farmhouse we take on.</p>
|
||||
<blockquote style="margin:0;padding-left:18px;border-left:4px solid #d4c5b0;font:italic 400 18px/31px 'Literata',serif;color:#444">It sets slowly, and that is the point.</blockquote>
|
||||
<p style="margin:0;font:400 13px/1.5 'Archivo',sans-serif;color:#666;text-wrap:pretty">Contrast: #111 on #d4c5b0 11.2:1 · #cfccc7 on #111 12.5:1 · #444 dashed border on #fff 9.7:1. Dashed vs filled keeps status legible without color.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const articles = [
|
||||
{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago', ci: '2026-03-12', ui: '2h ago' },
|
||||
{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday', ci: '2026-09-09', ui: '1d ago' },
|
||||
{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago', ci: '2026-08-28', ui: '3d ago' },
|
||||
{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago', ci: '2026-09-02', ui: '5d ago' },
|
||||
{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026', ci: '2026-06-14', ui: '2026-08-18' },
|
||||
{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026', ci: '2026-04-03', ui: '2026-07-02' }
|
||||
].map(a => ({ ...a, draft: !a.on }))
|
||||
return { articles, articles5: articles.slice(0, 5) }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;background:#ecebe8;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;color:#222}*{box-sizing:border-box}a{color:#111;text-underline-offset:3px}a:hover{color:#444}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div data-screen-label="Emails" style="padding:64px;display:flex;flex-direction:column;gap:56px;width:max-content;min-width:100%">
|
||||
<div style="display:flex;flex-direction:column;gap:10px;max-width:900px">
|
||||
<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:#111">Transactional emails</h1>
|
||||
<p style="margin:0;font-size:16px;line-height:26px;color:#444;text-wrap:pretty">Two Go <code>html/template</code> files: <a href="emails/verification.html">emails/verification.html</a> and <a href="emails/password-reset.html">emails/password-reset.html</a>. They use a table layout with inline CSS and a 600 px maximum width. The button is bulletproof: a colored table cell plus a padded link, so it survives Outlook. Each has a plain-URL fallback, a hidden preheader, and <code>prefers-color-scheme</code> overrides for clients that support them. The mark is live text in a black cell rather than an image, so it shows even when images are blocked. Previews below use example values.</p>
|
||||
<p style="margin:0;font-size:14px;line-height:22px;color:#666;text-wrap:pretty">Suggested subjects are "Verify your RenewCMS account" and "Reset your RenewCMS password". <code>html/template</code> escapes the <code>.Email</code> value for the query string in the reset link (the @ becomes %40), and the confirm route reads it back decoded.</p>
|
||||
</div>
|
||||
<sc-for list="{{ rows }}" as="r" hint-placeholder-count="2">
|
||||
<section style="display:flex;flex-direction:column;gap:20px">
|
||||
<div style="display:flex;flex-direction:column;gap:4px"><h2 style="margin:0;font:600 26px/34px 'IBM Plex Sans',sans-serif;color:#111">{{ r.title }}</h2><span style="font:400 13px 'IBM Plex Mono',monospace;color:#444">{{ r.vars }}</span></div>
|
||||
<div style="display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap">
|
||||
<sc-for list="{{ r.frames }}" as="f" hint-placeholder-count="3">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600;font-size:14px;color:#111">{{ f.label }}</span><iframe title="{{ f.label }}" srcDoc="{{ f.html }}" style="width:{{ f.w }};height:760px;border:1px solid #cfccc7;background:#fff"></iframe></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
state = { v: '', r: '' }
|
||||
componentDidMount() {
|
||||
fetch('emails/verification.html').then(x => x.text()).then(v => this.setState({ v }))
|
||||
fetch('emails/password-reset.html').then(x => x.text()).then(r => this.setState({ r }))
|
||||
}
|
||||
fill(t) {
|
||||
return t.split('{{.Host}}').join('https://cms.renew.example').split('{{.VerificationCode}}').join('7f3c9a2e4b1d').split('{{.Email}}').join('marta%40renew.example').replace('uses marta%40renew.example', 'uses marta@renew.example')
|
||||
}
|
||||
frames(t) {
|
||||
if (!t) return []
|
||||
const light = this.fill(t)
|
||||
const dark = light.replace('@media (prefers-color-scheme: dark)', '@media all')
|
||||
return [{ label: 'Light, 680 px', html: light, w: '680px' }, { label: 'Dark, 680 px', html: dark, w: '680px' }, { label: 'Light, 375 px', html: light, w: '375px' }]
|
||||
}
|
||||
renderVals() {
|
||||
return { rows: [
|
||||
{ title: 'Verification email', vars: '{{.Host}} · {{.VerificationCode}} → /register/validate?c=', frames: this.frames(this.state.v) },
|
||||
{ title: 'Password reset email', vars: '{{.Host}} · {{.VerificationCode}} · {{.Email}} → /register/reset/validate?c=&email=', frames: this.frames(this.state.r) }
|
||||
] }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;background:#fafafa;color:#111;font-family:'IBM Plex Sans',sans-serif;font-size:14px;line-height:22px}a{color:#111;text-underline-offset:3px}a:hover{color:#444}*{box-sizing:border-box}</style>
|
||||
</helmet>
|
||||
<div data-screen-label="Ledger foundations" style="max-width:1200px;margin:0 auto;padding:56px 24px 96px;display:flex;flex-direction:column;gap:72px">
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg>
|
||||
<h1 style="margin:0;font:600 36px/1.1 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em">Ledger foundations</h1>
|
||||
</div>
|
||||
<p style="margin:0;max-width:760px;color:#444;font-size:16px;line-height:26px;text-wrap:pretty">Everything below is generated from one set of files: <a href="tokens/renewcms.css">tokens/renewcms.css</a> (Tailwind <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">@theme</code>, <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">:root</code>, <code style="font-family:'IBM Plex Mono',monospace;font-size:14px">.dark</code>, article content styles), <a href="tokens/ui.config.ts">tokens/ui.config.ts</a> (Nuxt UI colors, icons and component overrides) and <a href="tokens/vite.config.ts">tokens/vite.config.ts</a>. The tables on this page read those files, so they can't drift.</p>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Logo</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">The mark is a white R on a black square, drawn on a 16-pixel grid so it stays sharp as a favicon. It keeps the same geometry at every size. In dark mode the black square gets a 1 px <code style="font-family:'IBM Plex Mono',monospace">#444</code> edge so it doesn't disappear into the background. The wordmark pairs the mark with RenewCMS in Plex Sans Semibold, with the text set at 0.6× the mark's height.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
|
||||
<div style="background:#fff;padding:32px;display:flex;flex-direction:column;gap:32px">
|
||||
<div style="display:flex;align-items:center;gap:12px"><svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:600 24px/1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em;color:#111">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">16</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">32</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="64" height="64" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">64</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="128" height="128" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">128, app icon source for 180 / 512</span></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#f3f2f0;border:1px solid #e6e4e0;width:260px;font-size:13px"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1">Articles · RenewCMS</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;color:#666"></span></div>
|
||||
</div>
|
||||
<div style="background:#111;padding:32px;display:flex;flex-direction:column;gap:32px">
|
||||
<div style="display:flex;align-items:center;gap:12px"><svg width="40" height="40" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.4 .4v15.2h15.2V.4z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:600 24px/1 'IBM Plex Sans',sans-serif;letter-spacing:-0.01em;color:#fafafa">RenewCMS</span></div>
|
||||
<div style="display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap">
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM1 1v14h14V1z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">16</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="32" height="32" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.5 .5v15h15V.5z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">32</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="64" height="64" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.25 .25v15.5h15.5V.25z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">64</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;align-items:flex-start"><svg width="128" height="128" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM.125 .125v15.75h15.75V.125z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font:400 12px 'IBM Plex Mono',monospace;color:#999">128</span></div>
|
||||
</div>
|
||||
<div style="display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;background:#222;border:1px solid #333;width:260px;font-size:13px;color:#e6e4e0"><svg width="16" height="16" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#444" fill-rule="evenodd" d="M0 0h16v16H0zM1 1v14h14V1z"></path><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="flex:1">Articles · RenewCMS</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/x.svg') center / contain no-repeat;color:#999"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
<p style="margin:0;color:#666;font-size:13px">Favicon file: <a href="brand/favicon.svg">brand/favicon.svg</a>. The 1 px edge switches on with <code style="font-family:'IBM Plex Mono',monospace">prefers-color-scheme: dark</code>. Keep clear space of at least half the mark's height around it. The R is never recolored or placed on sand.</p>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Color scales</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Seven Tailwind color scales, each mapped to a Nuxt UI alias. The ink, chalk and sand scales are built on your brand values. The four semantic scales are new and deliberately muted: evenly spaced oklch lightness steps with low chroma, so they sit comfortably next to ink and sand.</p>
|
||||
<div style="display:flex;flex-direction:column;gap:28px">
|
||||
<sc-for list="{{ scales }}" as="sc" hint-placeholder-count="7">
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;align-items:baseline;gap:10px;flex-wrap:wrap"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif">{{ sc.alias }}</span><span style="font:400 13px 'IBM Plex Mono',monospace;color:#666">{{ sc.name }}</span><span style="color:#666;font-size:13px">{{ sc.note }}</span></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr))">
|
||||
<sc-for list="{{ sc.steps }}" as="st" hint-placeholder-count="11">
|
||||
<div style="height:72px;padding:8px;display:flex;flex-direction:column;justify-content:space-between;background:{{ st.hex }};color:{{ st.fg }};font:400 12px/16px 'IBM Plex Mono',monospace"><span style="font-weight:500">{{ st.k }}</span><span>{{ st.hex }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Theme variables</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Every <code style="font-family:'IBM Plex Mono',monospace">--ui-*</code> variable Nuxt UI reads, for both themes. Surfaces are white. The <code style="font-family:'IBM Plex Mono',monospace">#fafafa</code> brand background is the page canvas behind them. The theme follows the system setting until the owner picks Light or Dark from the user menu, and that choice is stored by Nuxt UI's color mode.</p>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto">
|
||||
<div style="min-width:760px">
|
||||
<div style="display:grid;grid-template-columns:220px minmax(0,1fr) 200px 200px;gap:16px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Variable</span><span>Used for</span><span>Light</span><span>Dark</span></div>
|
||||
<sc-for list="{{ vars }}" as="v" hint-placeholder-count="21">
|
||||
<div style="display:grid;grid-template-columns:220px minmax(0,1fr) 200px 200px;gap:16px;padding:10px 16px;border-top:1px solid #e6e4e0;align-items:center;font-size:13px">
|
||||
<span style="font:500 13px 'IBM Plex Mono',monospace">{{ v.name }}</span><span style="color:#444">{{ v.use }}</span>
|
||||
<span style="display:flex;align-items:center;gap:8px"><span style="width:24px;height:24px;border:1px solid #e6e4e0;background:{{ v.lh }}"></span><span style="font:400 12px 'IBM Plex Mono',monospace">{{ v.lr }} {{ v.lh }}</span></span>
|
||||
<span style="display:flex;align-items:center;gap:8px"><span style="width:24px;height:24px;border:1px solid #444;background:{{ v.dh }}"></span><span style="font:400 12px 'IBM Plex Mono',monospace">{{ v.dr }} {{ v.dh }}</span></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Contrast checks</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Each ratio is computed from the variables above against WCAG 2.2 AA: 4.5:1 for text and 3:1 for control edges and focus rings. Soft alerts are measured against a 10% tint of the color over the surface, which is how Nuxt UI renders them. {{ passSummary }}</p>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto">
|
||||
<div style="min-width:720px">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 90px 190px 190px;gap:16px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Pair</span><span>Needs</span><span>Light</span><span>Dark</span></div>
|
||||
<sc-for list="{{ contrast }}" as="c" hint-placeholder-count="26">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 90px 190px 190px;gap:16px;padding:8px 16px;border-top:1px solid #e6e4e0;align-items:center;font-size:13px">
|
||||
<span>{{ c.label }}</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#444">{{ c.need }}</span>
|
||||
<span style="display:flex;align-items:center;gap:10px"><span style="width:40px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:600;background:{{ c.light.bg }};color:{{ c.light.fg }};border:1px solid #e6e4e0">Aa</span><span style="font:500 12px 'IBM Plex Mono',monospace">{{ c.light.ratio }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ c.lIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.lIcon }}.svg') center / contain no-repeat;"></span></span>
|
||||
<span style="display:flex;align-items:center;gap:10px"><span style="width:40px;height:28px;display:flex;align-items:center;justify-content:center;font-weight:600;background:{{ c.dark.bg }};color:{{ c.dark.fg }};border:1px solid #444">Aa</span><span style="font:500 12px 'IBM Plex Mono',monospace">{{ c.dark.ratio }}</span><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ c.dIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ c.dIcon }}.svg') center / contain no-repeat;"></span></span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Typography</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">The interface uses IBM Plex Sans in three weights: 400, 500 and 600. IDs, paths, counters and code are set in IBM Plex Mono. Sizes replace Tailwind's <code style="font-family:'IBM Plex Mono',monospace">text-*</code> defaults. On screens narrower than <code style="font-family:'IBM Plex Mono',monospace">md</code>, form fields use 16 px so iOS doesn't zoom in when a field gets focus.</p>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff">
|
||||
<sc-for list="{{ typeUi }}" as="t" hint-placeholder-count="6">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:16px;border-bottom:1px solid #e6e4e0;align-items:center">
|
||||
<span style="font-family:'IBM Plex Sans',sans-serif;font-size:{{ t.size }};line-height:{{ t.lh }};font-weight:{{ t.fw }};overflow:hidden;text-overflow:ellipsis;white-space:nowrap">Before and after: the Rue Verte kitchen</span>
|
||||
<div style="display:flex;flex-direction:column;font-size:12px;line-height:18px;color:#666"><span style="font:500 12px 'IBM Plex Mono',monospace;color:#111">{{ t.name }} · {{ t.size }} / {{ t.lh }} · {{ t.w }}</span><span>{{ t.use }}</span></div>
|
||||
</div>
|
||||
</sc-for>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px;padding:16px;align-items:center">
|
||||
<span style="font:400 13px/20px 'IBM Plex Mono',monospace">GET /v1/article/12 · 8 412 / 10 000</span>
|
||||
<div style="display:flex;flex-direction:column;font-size:12px;line-height:18px;color:#666"><span style="font:500 12px 'IBM Plex Mono',monospace;color:#111">font-mono · 13px / 20px · 400</span><span>Code, paths, IDs, counters</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Article content uses a separate scale in Source Serif 4, applied through the <code style="font-family:'IBM Plex Mono',monospace">.article-content</code> class. The editor surface and the preview both use it, so what the owner writes looks like what a public site would roughly show. The measure is capped at 42 rem, about 70 characters per line.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;align-items:start">
|
||||
<div style="background:#fff;border:1px solid #e6e4e0;padding:40px;font-family:'Source Serif 4',serif;color:#111">
|
||||
<div style="font-size:32px;line-height:40px;font-weight:600;margin:0 0 16px;text-wrap:balance">Choosing lime plaster for old stone walls</div>
|
||||
<p style="margin:0 0 20px;font-size:18px;line-height:30px">Cement traps moisture in solid walls. Lime lets the stone breathe, which is why we strip it back on almost every <a href="#" style="color:#111;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px">farmhouse we take on</a>.</p>
|
||||
<div style="font-size:26px;line-height:34px;font-weight:600;margin:40px 0 12px">What we use</div>
|
||||
<ul style="margin:0 0 20px;padding-left:28px;list-style:square;font-size:18px;line-height:30px"><li style="margin:0 0 6px">Hot-mixed lime for the base coat</li><li style="margin:0 0 6px">Hair or fibre for the scratch coat</li><li style="margin:0 0 6px">A thin lime putty finish</li></ul>
|
||||
<div style="font-size:21px;line-height:30px;font-weight:600;margin:32px 0 8px">Drying time</div>
|
||||
<blockquote style="margin:28px 0;padding-left:20px;border-left:2px solid #111;font-style:italic;font-size:18px;line-height:30px;color:#444">It sets slowly, and that is the point.</blockquote>
|
||||
<div style="font-size:18px;line-height:28px;font-weight:600;margin:24px 0 8px">Before you start</div>
|
||||
<ol style="margin:0 0 20px;padding-left:28px;font-size:18px;line-height:30px"><li style="margin:0 0 6px">Strip loose material back to sound stone.</li><li style="margin:0 0 6px">Wet the wall the evening before.</li></ol>
|
||||
<div style="margin:28px 0 0"><div style="aspect-ratio:16/9;background:#f3f2f0;border:1px dashed #cfccc7;display:flex;align-items:center;justify-content:center;color:#666;font:400 13px 'IBM Plex Sans',sans-serif">Article image</div><div style="margin-top:8px;font:400 14px/20px 'IBM Plex Sans',sans-serif;color:#666">The north wall after the second coat.</div></div>
|
||||
</div>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff">
|
||||
<div style="display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Element</span><span>md and up</span><span>Below md, spacing</span></div>
|
||||
<sc-for list="{{ typeContent }}" as="t" hint-placeholder-count="10">
|
||||
<div style="display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px;line-height:20px">
|
||||
<span style="font:500 13px 'IBM Plex Mono',monospace">{{ t.el }}</span><span>{{ t.desk }}</span><span style="color:#444">{{ t.rest }}</span>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Spacing, radius and density</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Spacing uses Tailwind's 4 px base unit unchanged. Radius is 0 everywhere: setting <code style="font-family:'IBM Plex Mono',monospace">--ui-radius: 0rem</code> flattens every component that derives its corners from it, and <code style="font-family:'IBM Plex Mono',monospace">rounded-none</code> overrides cover the few that hard-code <code style="font-family:'IBM Plex Mono',monospace">rounded-full</code>. The density is compact on desktop. On touch screens, every tap target is at least 44 px.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px;align-items:start">
|
||||
<div style="background:#fff;border:1px solid #e6e4e0;padding:20px;display:flex;flex-direction:column;gap:10px">
|
||||
<sc-for list="{{ spacing }}" as="s" hint-placeholder-count="10">
|
||||
<div style="display:grid;grid-template-columns:44px 64px minmax(0,1fr);gap:12px;align-items:center;font-size:13px"><span style="font:500 12px 'IBM Plex Mono',monospace">{{ s.k }}</span><span style="height:12px;background:#111;width:{{ s.w }}"></span><span style="color:#444">{{ s.px }} · {{ s.use }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="background:#fff;border:1px solid #e6e4e0">
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Control</span><span>Height and use</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="sm"</span><span>28 px · table row actions, toolbar buttons in the editor</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="md"</span><span>32 px · default on desktop: buttons, inputs, selects, tabs</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="lg"</span><span>40 px · auth forms, primary actions in dialogs</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">size="xl"</span><span>44 px · everything below md, via a responsive size prop</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">Table row</span><span>44 px on desktop, 64 px cards on mobile</span></div>
|
||||
<div style="display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">Gutters</span><span>16 px on mobile, 24 px on desktop; sidebar 224 px, collapses to 56 px</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Borders and elevation</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Most surfaces are flat and separated by hairlines. Shadows appear only on things that float above the page.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:24px">
|
||||
<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fff;border:1px solid #e6e4e0"></div><span style="font-weight:500">Hairline</span><span style="color:#444;font-size:13px">1 px <code style="font-family:'IBM Plex Mono',monospace">--ui-border</code>. Cards, table edges, sidebar and top bar dividers. Decorative, so no contrast requirement.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fff;border:1px solid #8a8783;display:flex;align-items:center;padding:0 12px;color:#666">Search by title</div><span style="font-weight:500">Control edge</span><span style="color:#444;font-size:13px">1 px <code style="font-family:'IBM Plex Mono',monospace">--ui-border-accented</code>. Inputs, selects, checkboxes, outline buttons. 3.6:1 on white.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fafafa;display:flex;align-items:center;justify-content:center"><span style="height:32px;padding:0 12px;display:flex;align-items:center;background:#111;color:#fff;font-weight:500;outline:2px solid #111;outline-offset:2px">New article</span></div><span style="font-weight:500">Focus ring</span><span style="color:#444;font-size:13px">2 px <code style="font-family:'IBM Plex Mono',monospace">--ui-primary</code> outline with a 2 px offset, shown only on <code style="font-family:'IBM Plex Mono',monospace">:focus-visible</code>. Nuxt UI's default, kept.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:#fafafa;display:flex;align-items:center;justify-content:center"><div style="width:180px;background:#fff;border:1px solid #e6e4e0;box-shadow:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);padding:4px;font-size:13px"><div style="height:28px;display:flex;align-items:center;gap:8px;padding:0 8px;background:#f3f2f0"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/pencil.svg') center / contain no-repeat;"></span>Edit</div><div style="height:28px;display:flex;align-items:center;gap:8px;padding:0 8px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/globe-lock.svg') center / contain no-repeat;"></span>Unpublish</div></div></div><span style="font-weight:500">Popover</span><span style="color:#444;font-size:13px"><code style="font-family:'IBM Plex Mono',monospace">--shadow-popover</code>. Dropdown menus, selects, toasts. In dark mode it becomes a darker shadow plus the hairline.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px"><div style="height:96px;background:rgb(10 10 10 / 0.4);display:flex;align-items:center;justify-content:center"><div style="width:180px;height:60px;background:#fff;box-shadow:0 16px 48px rgb(17 17 17 / 0.18)"></div></div><span style="font-weight:500">Modal</span><span style="color:#444;font-size:13px"><code style="font-family:'IBM Plex Mono',monospace">--shadow-modal</code> over a 40% <code style="font-family:'IBM Plex Mono',monospace">chalk-950</code> overlay. Modals and slideovers.</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:24px;align-items:start">
|
||||
<div style="border:1px solid #e6e4e0;background:#fff">
|
||||
<div style="display:grid;grid-template-columns:130px 50px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Layer</span><span>z</span><span>Contents</span></div>
|
||||
<sc-for list="{{ zLayers }}" as="z" hint-placeholder-count="8">
|
||||
<div style="display:grid;grid-template-columns:130px 50px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">{{ z.n }}</span><span style="font-family:'IBM Plex Mono',monospace">{{ z.v }}</span><span style="color:#444">{{ z.u }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff">
|
||||
<div style="display:grid;grid-template-columns:90px 70px minmax(0,1fr);gap:12px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500;font-size:13px"><span>Breakpoint</span><span>Min</span><span>What changes</span></div>
|
||||
<sc-for list="{{ breakpoints }}" as="b" hint-placeholder-count="6">
|
||||
<div style="display:grid;grid-template-columns:90px 70px minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:13px"><span style="font-family:'IBM Plex Mono',monospace">{{ b.n }}</span><span style="font-family:'IBM Plex Mono',monospace">{{ b.v }}</span><span style="color:#444">{{ b.u }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Motion</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Motion is there to show where something came from or that something is working. It is short and never decorative.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
|
||||
<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">120 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-fast · ease-standard</span><span style="color:#444;font-size:13px">Hover and pressed colors, focus ring, the counter turning to warning, the switch thumb.</span></div>
|
||||
<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">180 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-base · ease-enter / ease-exit</span><span style="color:#444;font-size:13px">Dropdowns and tooltips (fade plus a 4 px shift), the tab indicator, toasts sliding in, SaveStatus crossfades.</span></div>
|
||||
<div style="background:#fff;padding:20px;display:flex;flex-direction:column;gap:6px"><span style="font:600 20px/28px 'IBM Plex Mono',monospace">240 ms</span><span style="font:400 12px 'IBM Plex Mono',monospace;color:#666">--duration-slow · ease-enter / ease-exit</span><span style="color:#444;font-size:13px">Modals (fade plus scale from 0.98), slideovers (slide from the edge), sidebar collapse.</span></div>
|
||||
</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:24px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600">Never animates</span><span style="color:#444;text-wrap:pretty">Route changes, table rows sorting or filtering, numbers counting up, the logo, editor text, and anything that runs on page load.</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px"><span style="font-weight:600">Reduced motion</span><span style="color:#444;text-wrap:pretty">With <code style="font-family:'IBM Plex Mono',monospace">prefers-reduced-motion: reduce</code>, every transition and animation completes instantly, skeletons stop pulsing and become flat blocks, and toasts appear without sliding. The one exception is the spinner on the automatic verification screen. It keeps turning, slowed to 1.6 s per rotation, because it is the only sign that work is happening.</span></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Icons</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Lucide through Iconify, using Nuxt UI's <code style="font-family:'IBM Plex Mono',monospace">i-lucide-*</code> classes. Icons are 16 px next to 13–14 px text and 20 px on mobile top bars. They are always paired with a visible label or an <code style="font-family:'IBM Plex Mono',monospace">aria-label</code>. Each icon maps to one meaning: Eye is only ever show password, and Preview uses Book Open.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));border-top:1px solid #e6e4e0;border-left:1px solid #e6e4e0;background:#fff">
|
||||
<sc-for list="{{ icons }}" as="i" hint-placeholder-count="60">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:10px 14px;border-right:1px solid #e6e4e0;border-bottom:1px solid #e6e4e0;min-width:0"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ i.n }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ i.n }}.svg') center / contain no-repeat;"></span><span style="flex:1;min-width:0;font-size:13px">{{ i.a }}</span><span style="font:400 11px 'IBM Plex Mono',monospace;color:#666;white-space:nowrap">{{ i.n }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Where Nuxt UI defaults bend</h2>
|
||||
<div style="display:flex;flex-direction:column;border-top:1px solid #e6e4e0">
|
||||
<sc-for list="{{ bends }}" as="b" hint-placeholder-count="8">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px;padding:14px 0;border-bottom:1px solid #e6e4e0"><span style="font-weight:600">{{ b.w }}</span><span style="color:#444;text-wrap:pretty">{{ b.r }}</span></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:24px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif">Files</h2>
|
||||
<p style="margin:0;max-width:720px;color:#444;text-wrap:pretty">Ready to paste into the repository. They follow its code style: tabs, no semicolons, single quotes and no comments. The CSS goes in <code style="font-family:'IBM Plex Mono',monospace">src/assets/main.css</code> and the config in <code style="font-family:'IBM Plex Mono',monospace">src/theme/ui.config.ts</code>. Add <code style="font-family:'IBM Plex Mono',monospace">class="isolate"</code> to the app root, as Nuxt UI requires.</p>
|
||||
<div style="border:1px solid #222;background:#111;color:#e6e4e0">
|
||||
<div style="display:flex;align-items:stretch;border-bottom:1px solid #333;overflow-x:auto">
|
||||
<sc-for list="{{ fileTabs }}" as="f" hint-placeholder-count="3">
|
||||
<button onClick="{{ f.pick }}" aria-pressed="{{ f.active }}" style="all:unset;cursor:pointer;height:44px;padding:0 16px;display:flex;align-items:center;font:500 13px 'IBM Plex Mono',monospace;color:{{ f.color }};border-bottom:2px solid {{ f.line }}" style-focus-visible="outline:2px solid #fafafa;outline-offset:-2px">{{ f.name }}</button>
|
||||
</sc-for>
|
||||
<span style="flex:1"></span>
|
||||
<button onClick="{{ copy }}" style="all:unset;cursor:pointer;height:44px;padding:0 16px;display:flex;align-items:center;gap:8px;font:500 13px 'IBM Plex Sans',sans-serif;color:#fafafa" style-hover="background:#222"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ copyIcon }}.svg') center / contain no-repeat;"></span><span aria-live="polite">{{ copyLabel }}</span></button>
|
||||
</div>
|
||||
<pre style="margin:0;padding:20px;max-height:560px;overflow:auto;font:400 13px/20px 'IBM Plex Mono',monospace;tab-size:4;white-space:pre">{{ code }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
state = { tokens: null, files: {}, file: 'tokens/renewcms.css', copied: false }
|
||||
componentDidMount() {
|
||||
fetch('tokens/tokens.json').then(r => r.json()).then(tokens => this.setState({ tokens }))
|
||||
for (const f of ['tokens/renewcms.css', 'tokens/ui.config.ts', 'tokens/vite.config.ts']) fetch(f).then(r => r.text()).then(t => this.setState(s => ({ files: { ...s.files, [f]: t } })))
|
||||
}
|
||||
renderVals() {
|
||||
const t = this.state.tokens || { scales: [], vars: [], contrast: [], typeUi: [], typeContent: [] }
|
||||
const scales = t.scales.map(s => ({ ...s, steps: s.steps.map(x => ({ ...x, fg: x.dark ? '#ffffff' : '#111111' })) }))
|
||||
const contrast = t.contrast.map(c => ({ ...c, lIcon: c.need === 'exempt' ? 'minus' : c.lp ? 'check' : 'x', dIcon: c.need === 'exempt' ? 'minus' : c.dp ? 'check' : 'x' }))
|
||||
const req = t.contrast.filter(c => c.need !== 'exempt')
|
||||
const fails = req.filter(c => !c.lp || !c.dp).length
|
||||
const passSummary = t.contrast.length ? (fails ? fails + ' pairs fail.' : 'All ' + req.length + ' required pairs pass in both themes. Dimmed text is used only for disabled controls, which WCAG exempts.') : ''
|
||||
const fw = w => w.startsWith('600') ? 600 : 400
|
||||
const typeUi = t.typeUi.map(x => ({ ...x, fw: fw(x.w) }))
|
||||
const typeContent = t.typeContent.map(x => ({ el: x.el, desk: x.size ? x.size + ' / ' + x.lh + ' · ' + x.w : '', rest: [x.mob, x.sp].filter(Boolean).join(' · ') }))
|
||||
const spacing = [['1', 4, 'icon to label'], ['2', 8, 'inside badges, menu items'], ['3', 12, 'control padding x, table cell padding'], ['4', 16, 'mobile gutter, card padding'], ['5', 20, 'dialog padding on mobile'], ['6', 24, 'desktop gutter, dialog padding'], ['8', 32, 'between page header and content'], ['10', 40, 'auth card padding'], ['12', 48, 'between home sections'], ['16', 64, 'empty state vertical padding']].map(([k, px, use]) => ({ k, px: px + 'px', use, w: px + 'px' }))
|
||||
const zLayers = [['base', 0, 'Page content'], ['--z-sticky', 10, 'Table header, editor toolbar'], ['--z-sidebar', 20, 'UDashboardSidebar, top bar'], ['--z-banner', 30, 'Offline banner'], ['--z-popover', 40, 'Dropdown menu, select, popover'], ['--z-overlay', 50, 'Modal, slideover and their overlays'], ['--z-toast', 60, 'Toaster, above modals so failures stay visible'], ['--z-tooltip', 70, 'Tooltip']].map(([n, v, u]) => ({ n, v, u }))
|
||||
const breakpoints = [['xs', '360', 'Smallest supported width; nothing may overflow'], ['sm', '640', 'Auth card stops being full-bleed'], ['md', '768', 'Article cards become a table; fields drop from 16 to 14 px; content scale grows'], ['lg', '1024', 'Sidebar is persistent (slideover below); editor metadata panel sits inline'], ['xl', '1280', 'Editor gets room for content measure plus metadata panel'], ['2xl', '1536', 'Content is capped at --ui-container; no further changes']].map(([n, v, u]) => ({ n, v: v + 'px', u }))
|
||||
const icons = [['Home', 'house'], ['Articles', 'file-text'], ['Integration', 'plug'], ['Collapse sidebar', 'panel-left-close'], ['Expand sidebar', 'panel-left-open'], ['Open menu (mobile)', 'menu'], ['Close, clear search', 'x'], ['Back', 'arrow-left'], ['Breadcrumb separator', 'chevron-right'], ['User menu', 'chevrons-up-down'], ['Log out', 'log-out'], ['Log in', 'log-in'], ['Light theme', 'sun'], ['Dark theme', 'moon'], ['System theme', 'monitor'], ['New article', 'plus'], ['Edit', 'pencil'], ['Status: Online', 'globe'], ['Status: Draft', 'pencil-line'], ['Publish', 'globe'], ['Unpublish', 'globe-lock'], ['Delete', 'trash-2'], ['Copy API URL', 'link'], ['Row actions', 'ellipsis'], ['Row actions (mobile)', 'ellipsis-vertical'], ['Search', 'search'], ['Sort newest first', 'arrow-down'], ['Sort oldest first', 'arrow-up'], ['Save', 'save'], ['Saving', 'loader-circle'], ['Saved', 'check'], ['Unsaved changes', 'circle-dot'], ['Save failed', 'circle-alert'], ['Retry', 'rotate-cw'], ['Preview', 'book-open'], ['Details panel', 'panel-right'], ['Undo', 'undo-2'], ['Redo', 'redo-2'], ['Paragraph', 'pilcrow'], ['Heading 1', 'heading-1'], ['Heading 2', 'heading-2'], ['Heading 3', 'heading-3'], ['Bold', 'bold'], ['Italic', 'italic'], ['Underline', 'underline'], ['Strikethrough', 'strikethrough'], ['Align left', 'align-left'], ['Align center', 'align-center'], ['Align right', 'align-right'], ['Justify', 'align-justify'], ['Bulleted list', 'list'], ['Numbered list', 'list-ordered'], ['Indent', 'indent-increase'], ['Outdent', 'indent-decrease'], ['Clear formatting', 'remove-formatting'], ['Insert image', 'image-plus'], ['Choose file', 'upload'], ['Drop to upload', 'image-down'], ['File rejected', 'file-x'], ['Show password', 'eye'], ['Hide password', 'eye-off'], ['Rule met', 'check'], ['Rule not met yet', 'circle'], ['Email sent', 'mail-check'], ['Verifying', 'loader-circle'], ['Account verified', 'shield-check'], ['Link invalid or expired', 'link-2-off'], ['Cancel registration', 'user-x'], ['Too many attempts', 'timer'], ['Session expired', 'clock'], ['Success', 'circle-check'], ['Info', 'info'], ['Warning', 'triangle-alert'], ['Error', 'circle-x'], ['Offline', 'wifi-off'], ['Not found', 'file-question-mark'], ['Server error', 'server-crash'], ['Copy', 'copy'], ['Copied', 'check'], ['External link', 'external-link']].map(([a, n]) => ({ a, n }))
|
||||
const bends = [
|
||||
{ w: 'Primary shade 900 / 50', r: 'Nuxt UI points --ui-primary at shade 500 (light) and 400 (dark). On the ink scale those are mid-grays, so it points at 900 (#111) and 50 (#fafafa) instead to keep the brand black.' },
|
||||
{ w: 'White surfaces, #fafafa canvas', r: '--ui-bg is white for cards, tables and the sidebar. The brand background #fafafa becomes --ui-bg-muted, applied to UDashboardPanel body, so panels read as sheets on a desk.' },
|
||||
{ w: 'Darker control edges', r: '--ui-border-accented uses chalk-450 (#8a8783) instead of neutral-300. Inputs and checkboxes need 3:1 against their surface (WCAG 1.4.11), and #cfccc7 reaches only about 1.6:1.' },
|
||||
{ w: 'Secondary text is sand-700', r: 'The brand sands (#d4c5b0, #e8dfd1) can\'t carry text on white, so --ui-secondary is sand-700 for text and outlines. The sand fills are used directly, for the active nav item and avatars.' },
|
||||
{ w: 'rounded-none on Switch, Avatar, Chip, Progress', r: 'These use rounded-full, which --ui-radius doesn\'t reach. Square corners are a hard brand rule, so their slots are overridden.' },
|
||||
{ w: '16 px fields below md', r: 'Nuxt UI md inputs are 14 px. iOS Safari zooms into any field under 16 px, which breaks editing on a phone.' },
|
||||
{ w: 'Inverted tooltips', r: 'Tooltips use ink on white in light mode and white on ink in dark mode, instead of an elevated surface, so they stand out from menus.' },
|
||||
{ w: 'Toaster above modals', r: 'The toaster is raised to z 60 so a failed delete or save is still visible while a dialog is open.' }
|
||||
]
|
||||
const names = { 'tokens/renewcms.css': 'renewcms.css', 'tokens/ui.config.ts': 'ui.config.ts', 'tokens/vite.config.ts': 'vite.config.ts' }
|
||||
const fileTabs = Object.keys(names).map(f => ({ name: names[f], active: this.state.file === f, color: this.state.file === f ? '#fafafa' : '#999999', line: this.state.file === f ? '#fafafa' : 'transparent', pick: () => this.setState({ file: f, copied: false }) }))
|
||||
const code = this.state.files[this.state.file] || ''
|
||||
return {
|
||||
scales, vars: t.vars, contrast, passSummary, typeUi, typeContent, spacing, zLayers, breakpoints, icons, bends, fileTabs, code,
|
||||
copyLabel: this.state.copied ? 'Copied' : 'Copy',
|
||||
copyIcon: this.state.copied ? 'check' : 'copy',
|
||||
copy: () => { navigator.clipboard && navigator.clipboard.writeText(code); this.setState({ copied: true }); clearTimeout(this.t); this.t = setTimeout(() => this.setState({ copied: false }), 2000) }
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,179 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;background:#fafafa;color:#222;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:#111;text-underline-offset:3px}a:hover{color:#444}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div data-screen-label="Handoff" style="max-width:1200px;margin:0 auto;padding:56px 24px 96px;display:flex;flex-direction:column;gap:64px">
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;align-items:center;gap:12px"><svg width="36" height="36" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><h1 style="margin:0;font:600 34px/42px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:#111">RenewCMS handoff</h1></div>
|
||||
<p style="margin:0;max-width:760px;font-size:16px;line-height:26px;color:#444;text-wrap:pretty">Everything needed to build the back-office in Vue 3, vue-router, Pinia and Nuxt UI v4. Tokens have one source of truth, <code>tokens/renewcms.css</code> plus <code>tokens/ui.config.ts</code>. Components use PascalCase names and routes are kebab-case, matching the code.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1px;background:#e6e4e0;border:1px solid #e6e4e0">
|
||||
<sc-for list="{{ files }}" as="f" hint-placeholder-count="10"><a href="{{ f.href }}" style="background:#fff;padding:14px 16px;display:flex;flex-direction:column;gap:2px;text-decoration:none"><span style="font-weight:600;color:#111">{{ f.t }}</span><span style="color:#666">{{ f.d }}</span></a></sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:16px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">Route map</h2>
|
||||
<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px;text-wrap:pretty">A global <code>router.beforeEach</code> guard reads <code>meta.auth</code>. On the first navigation it resolves the session with <code>GET /v1/auth/me</code> (API pending) and caches the result in the <code>session</code> store. A fetch wrapper, <code>useApi</code>, turns any 401 into <code>/login?redirect=&reason=expired</code> and any 403 from an unverified account into <code>/register/pending</code>.</p>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:980px">
|
||||
<div style="display:grid;grid-template-columns:230px 120px 90px 170px minmax(0,1fr);gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Path</span><span>Layout</span><span>Auth</span><span>Screen</span><span>API calls</span></div>
|
||||
<sc-for list="{{ routes }}" as="r" hint-placeholder-count="13"><div style="display:grid;grid-template-columns:230px 120px 90px 170px minmax(0,1fr);gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0"><code style="color:#111">{{ r.p }}</code><span>{{ r.l }}</span><span>{{ r.a }}</span><span style="font-weight:500">{{ r.s }}</span><code style="color:#444">{{ r.api }}</code></div></sc-for>
|
||||
</div></div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:16px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">Component inventory</h2>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:1100px">
|
||||
<div style="display:grid;grid-template-columns:170px 200px minmax(0,1.4fr) 150px 150px 170px;gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Component</span><span>Nuxt UI base</span><span>Props</span><span>Emits</span><span>Slots</span><span>Used on</span></div>
|
||||
<sc-for list="{{ components }}" as="c" hint-placeholder-count="20"><div style="display:grid;grid-template-columns:170px 200px minmax(0,1.4fr) 150px 150px 170px;gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0;font-size:12px;line-height:18px"><span style="font:600 13px 'IBM Plex Sans',sans-serif;color:#111">{{ c.n }}</span><code style="color:#444">{{ c.b }}</code><code style="color:#222">{{ c.p }}</code><code style="color:#444">{{ c.e }}</code><code style="color:#444">{{ c.s }}</code><span style="color:#444">{{ c.u }}</span></div></sc-for>
|
||||
</div></div>
|
||||
<p style="margin:0;color:#666">The composables behind these components are <code>useSession</code>, <code>useApi</code>, <code>useArticles</code> (the list cache plus actions shared by the table, cards and editor), <code>useArticleDraft</code> (dirty state, save, and the sessionStorage mirror), <code>useImageUpload</code> (XHR with progress) and <code>useRetryAfter</code> (429 countdown).</p>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:16px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">State matrix</h2>
|
||||
<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px">Every state is drawn at desktop and mobile on the <a href="RenewCMS Screens Auth.dc.html">auth</a> and <a href="RenewCMS Screens Back-office.dc.html">back-office</a> boards, with final copy.</p>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,560px),1fr));gap:16px">
|
||||
<sc-for list="{{ matrix }}" as="m" hint-placeholder-count="11">
|
||||
<div style="background:#fff;border:1px solid #e6e4e0">
|
||||
<div style="padding:12px 16px;border-bottom:1px solid #e6e4e0;display:flex;align-items:baseline;justify-content:space-between;gap:12px"><span style="font:600 15px/22px 'IBM Plex Sans',sans-serif;color:#111">{{ m.s }}</span><code style="color:#666">{{ m.r }}</code></div>
|
||||
<sc-for list="{{ m.states }}" as="x" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:170px minmax(0,1fr);gap:12px;padding:8px 16px;border-top:1px solid #f3f2f0;font-size:12px;line-height:18px"><span style="font-weight:500;color:#111">{{ x.n }}</span><span style="color:#444">{{ x.t }}</span></div></sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:16px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">HTTP status to copy</h2>
|
||||
<p style="margin:0;max-width:760px;color:#444;font-size:14px;line-height:22px;text-wrap:pretty">Response bodies are plain text and are never shown. <code>useApi</code> throws an <code>ApiError</code> with the <code>status</code> and a <code>context</code> key, and each screen maps them to the copy below.</p>
|
||||
<div style="border:1px solid #e6e4e0;background:#fff;overflow-x:auto"><div style="min-width:860px">
|
||||
<div style="display:grid;grid-template-columns:70px 220px minmax(0,1fr) 150px;gap:14px;padding:10px 16px;background:#f3f2f0;color:#666;font-weight:500"><span>Status</span><span>Where</span><span>Copy</span><span>Surface</span></div>
|
||||
<sc-for list="{{ errors }}" as="e" hint-placeholder-count="18"><div style="display:grid;grid-template-columns:70px 220px minmax(0,1fr) 150px;gap:14px;padding:10px 16px;border-top:1px solid #e6e4e0"><code style="color:#111;font-weight:500">{{ e.c }}</code><span>{{ e.w }}</span><span style="color:#222">{{ e.t }}</span><span style="color:#666">{{ e.s }}</span></div></sc-for>
|
||||
</div></div>
|
||||
</section>
|
||||
|
||||
<section style="display:flex;flex-direction:column;gap:16px">
|
||||
<h2 style="margin:0;font:600 24px/32px 'IBM Plex Sans',sans-serif;color:#111">API pending</h2>
|
||||
<div style="display:flex;flex-direction:column;border-top:1px solid #e6e4e0">
|
||||
<sc-for list="{{ pending }}" as="p" hint-placeholder-count="5"><div style="display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:24px;padding:12px 0;border-bottom:1px solid #e6e4e0"><code style="color:#111;font-weight:500">{{ p.a }}</code><span style="color:#444;text-wrap:pretty">{{ p.d }}</span></div></sc-for>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const files = [
|
||||
{ t: 'Prototype', d: 'The five flows, clickable', href: 'RenewCMS Prototype.dc.html' },
|
||||
{ t: 'Foundations', d: 'Tokens, contrast, type, motion, icons', href: 'RenewCMS Foundations.dc.html' },
|
||||
{ t: 'Primitives', d: 'Themed Nuxt UI components', href: 'RenewCMS Components Primitives.dc.html' },
|
||||
{ t: 'Product components', d: '17 RenewCMS components', href: 'RenewCMS Components Product.dc.html' },
|
||||
{ t: 'Auth screens', d: 'Six public routes, every state', href: 'RenewCMS Screens Auth.dc.html' },
|
||||
{ t: 'Back-office screens', d: 'Verified routes and global states', href: 'RenewCMS Screens Back-office.dc.html' },
|
||||
{ t: 'Emails', d: 'Previews of both templates', href: 'RenewCMS Emails.dc.html' },
|
||||
{ t: 'tokens/renewcms.css', d: '@theme, :root, .dark, .article-content', href: 'tokens/renewcms.css' },
|
||||
{ t: 'tokens/ui.config.ts', d: 'Nuxt UI colors, icons, overrides', href: 'tokens/ui.config.ts' },
|
||||
{ t: 'tokens/vite.config.ts', d: 'Vite plugin setup', href: 'tokens/vite.config.ts' },
|
||||
{ t: 'emails/verification.html', d: 'Go html/template', href: 'emails/verification.html' },
|
||||
{ t: 'emails/password-reset.html', d: 'Go html/template', href: 'emails/password-reset.html' },
|
||||
{ t: 'brand/favicon.svg', d: '16 px grid mark, dark-aware', href: 'brand/favicon.svg' }
|
||||
]
|
||||
const routes = [
|
||||
['/', 'none', 'any', 'Redirect', 'none; goes to /home or /login'],
|
||||
['/login', 'AuthShell', 'public', 'LoginPage', 'GET /v1/auth/registration* · POST /v1/auth/login'],
|
||||
['/register', 'AuthShell', 'public', 'RegisterPage', 'POST /v1/auth/register'],
|
||||
['/register/pending', 'AuthShell', 'session', 'PendingPage', 'DELETE /v1/auth/register · POST /v1/auth/logout'],
|
||||
['/register/validate', 'AuthShell', 'public', 'VerifyPage', 'POST /v1/auth/verify (+ POST /login inline on 401)'],
|
||||
['/register/reset/request', 'AuthShell', 'public', 'ResetRequestPage', 'POST /v1/auth/password-reset'],
|
||||
['/register/reset/validate', 'AuthShell', 'public', 'ResetConfirmPage', 'POST /v1/auth/password-reset/confirm'],
|
||||
['/home', 'DashboardShell', 'verified', 'HomePage', 'GET /v1/article/'],
|
||||
['/article', 'DashboardShell', 'verified', 'ArticlesPage', 'GET /v1/article/ · PATCH /{id}/publish|unpublish · DELETE /{id}'],
|
||||
['/article/new', 'DashboardShell', 'verified', 'ArticlesPage + NewArticleModal', 'POST /v1/article/'],
|
||||
['/article/:id/edit', 'DashboardShell', 'verified', 'EditorPage', 'GET /{id} · PATCH /{id} · PATCH /{id}/publish|unpublish · POST /{id}/image · DELETE /{id}'],
|
||||
['/integration', 'DashboardShell', 'verified', 'IntegrationPage', 'none'],
|
||||
['/:pathMatch(.*)*', 'either', 'any', 'NotFoundPage', 'none']
|
||||
].map(([p, l, a, s, api]) => ({ p, l, a, s, api }))
|
||||
const components = [
|
||||
['AuthShell', 'UPageCard, UColorModeSelect', 'title, description?', 'none', 'default, notice, footer', 'All public routes'],
|
||||
['DashboardShell', 'UDashboardGroup, UDashboardSidebar, UNavigationMenu, UDashboardPanel, UDashboardNavbar, UBreadcrumb', 'none (reads route.meta and the session store)', 'none', 'default, navbar-right', 'All verified routes'],
|
||||
['UserMenu', 'UDropdownMenu, UButton, UAvatar', 'none', 'logout', 'none', 'DashboardShell'],
|
||||
['PageHeader', 'UPageHeader', 'title, description?', 'none', 'actions, meta', 'Home, Articles, Integration'],
|
||||
['ArticleStatusBadge', 'UBadge', "online: boolean, size?: 'sm'|'md', pending?: 'publish'|'unpublish'", 'none', 'none', 'Home, Articles, Editor'],
|
||||
['ArticleTable', 'UTabs, UInput, UTable, UDropdownMenu, UPagination', 'articles: Article[], loading, busyIds: Set<number>', 'publish, unpublish, delete, copy-url', 'empty, toolbar-right', 'Articles (md and up)'],
|
||||
['ArticleCardList', 'ULink, UDropdownMenu (custom list)', 'same as ArticleTable', 'same as ArticleTable', 'empty', 'Articles (below md)'],
|
||||
['EmptyState', 'UEmpty', "variant: 'no-articles'|'no-results'|'no-drafts'|'no-online', query?", 'action', 'none', 'Home, Articles'],
|
||||
['ConfirmDialog', 'UModal via useOverlay', "title, description, confirmLabel, pendingLabel, tone: 'danger'|'neutral', action: () => Promise<void>", 'close(confirmed)', 'none', 'Articles, Editor, Pending'],
|
||||
['NewArticleModal', 'UModal, UForm, UFormField, UInput, UTextarea', 'none', 'created(article)', 'none', 'Home, Articles, /article/new'],
|
||||
['ArticleEditor', 'UEditor, UEditorToolbar, UDropdownMenu (+ custom Indent extension)', 'modelValue: string, articleId: number, disabled?', 'update:modelValue, request-image', 'none', 'Editor'],
|
||||
['ImageUploader', 'UModal, UFileUpload, UProgress', 'articleId: number', 'uploaded(location), close', 'none', 'Editor'],
|
||||
['SaveStatus', 'custom (span + UButton)', "state: 'clean'|'dirty'|'saving'|'saved'|'error'|'offline', savedAt?: Date", 'retry', 'none', 'Editor'],
|
||||
['PublishControl', 'UButton', 'online: boolean, dirty: boolean, pending?: string, disabled?', 'publish, unpublish', 'none', 'Editor'],
|
||||
['ArticleDetails', 'UCard (desktop) / USlideover (mobile)', 'article: Article', 'copy-url', 'none', 'Editor'],
|
||||
['CharacterCounter', 'custom', 'value: number, max: number, min?: number, warnAt?: number', 'none', 'none', 'NewArticleModal, Editor, Register'],
|
||||
['PasswordStrengthHint', 'custom (in UFormField #help)', 'rules: { label, met }[], showErrors: boolean', 'none', 'none', 'Register, Reset'],
|
||||
['ResultPanel', 'custom + UButton', "tone: 'success'|'error'|'info', icon, title, description, actions: ButtonProps[]", 'none', 'default', 'Pending, Verify, Reset request, Reset, Register (403)'],
|
||||
['CodeBlock', 'custom (shiki) + UButton', 'code: string, lang: string, label?', 'none', 'none', 'Integration'],
|
||||
['EndpointCard', 'UCard, UBadge, UTabs', "method: 'GET', path, description, examples: { fetch, curl, response }", 'none', 'none', 'Integration'],
|
||||
['ErrorView', 'custom + UButton', "kind: 'not-found'|'error'", 'retry', 'none', 'Not found, error boundary'],
|
||||
['OfflineBanner', 'UBanner', 'none (reads useOnline)', 'none', 'none', 'DashboardShell'],
|
||||
['AppBoot', 'USkeleton inside DashboardShell', 'none', 'none', 'none', 'First load of any verified route']
|
||||
].map(([n, b, p, e, s, u]) => ({ n, b, p, e, s, u }))
|
||||
const M = (s, r, list) => ({ s, r, states: list.map(([n, t]) => ({ n, t })) })
|
||||
const matrix = [
|
||||
M('App boot', 'any verified route', [['Checking session', 'First navigation, while GET /v1/auth/me* is pending'], ['Verified', '200 with is_verified: the route renders'], ['Unverified', '200 with is_verified false: goes to /register/pending'], ['No session', '401: goes to /login?redirect=']]),
|
||||
M('Log in', '/login', [['Default', 'Registration closed'], ['Fresh install', 'registration.open is true*'], ['Validation errors', 'Client rules fail on submit'], ['Submitting', 'Request in flight'], ['Wrong credentials', '403'], ['Too many attempts', '429 with Retry-After*'], ['Session expired', '?reason=expired from a 401'], ['Password changed', '?reason=password-changed'], ['Server error', '500 or network']]),
|
||||
M('Register', '/register', [['Default', 'Open instance'], ['Validation errors', 'Client rules fail'], ['Submitting', 'In flight'], ['Registration closed', '403'], ['Server error', '500 or network']]),
|
||||
M('Pending', '/register/pending', [['Default', 'After registering (email known)'], ['Email unknown', 'After logging in unverified'], ['Confirm cancel', 'Cancel registration clicked'], ['Cancelling', 'DELETE in flight'], ['Cancelled', '200: /register with toast'], ['Already verified', '403: /home with toast']]),
|
||||
M('Verify', '/register/validate?c=', [['Verifying', 'On load'], ['Success', '200: /home with toast'], ['Invalid or expired', '403'], ['No session', '401: inline log in, then retry'], ['Missing code', 'No c parameter']]),
|
||||
M('Forgot password', '/register/reset/request', [['Default', 'Page load'], ['Validation', 'Invalid email'], ['Submitting', 'In flight'], ['Sent', 'Any 200 (neutral copy)'], ['Too many attempts', '429*'], ['Server error', '500 or network']]),
|
||||
M('Reset password', '/register/reset/validate', [['Default', 'c and email present'], ['Too short', 'Under 8 characters'], ['Mismatch', 'Confirm field differs'], ['Submitting', 'In flight'], ['Success', '200: /login?reason=password-changed'], ['Invalid or expired', '403'], ['Missing parameters', 'No c or no email']]),
|
||||
M('Home', '/home', [['Loading', 'List in flight (after 150 ms)'], ['Default', 'List loaded'], ['Empty', 'Zero articles'], ['Error', '500 or network']]),
|
||||
M('Articles', '/article', [['Loading', 'List in flight'], ['Default', 'Loaded'], ['Empty', 'Zero articles'], ['No results', 'Search matches nothing'], ['Empty tab', 'No drafts, or nothing online'], ['Row busy', 'Publish or unpublish in flight'], ['Action failed', '500 or network: toast with Retry'], ['Row vanished', '404 on any row action'], ['Delete confirm, in progress, failed, done', 'ConfirmDialog, then DELETE: 204 or 500']]),
|
||||
M('New article', 'modal · /article/new', [['Default', 'Opened'], ['Validation', 'Title under 3 or body empty'], ['Submitting', 'POST in flight'], ['Title rejected', 'Server 400'], ['Error', '500 or network'], ['Created', '201: editor, with a toast']]),
|
||||
M('Editor', '/article/:id/edit', [['Loading', 'GET in flight'], ['Not found', '404'], ['Saved', 'Clean'], ['Unsaved', 'Any edit'], ['Saving', 'PATCH in flight'], ['Save failed', '500 or network'], ['Near the limit', 'At least 9 000 HTML characters'], ['Too long', 'Over 10 000: Save and Publish disabled'], ['Preview', 'Switch on'], ['Uploading, rejected, inserted', 'ImageUploader'], ['Publishing, unpublishing', 'PATCH publish or unpublish'], ['Leave guard', 'Navigating away while dirty'], ['Offline', 'navigator.onLine is false'], ['Deleted', '204: /article with toast'], ['Session expired', '401: draft kept in sessionStorage, then /login']]),
|
||||
M('Integration', '/integration', [['Default', 'Page load'], ['Copied', 'Copy clicked (2 s)']])
|
||||
]
|
||||
const errors = [
|
||||
['400', 'Any form', 'The field error from the client rules. A server 400 that got through: "Something in the form isn\'t valid. Check the highlighted fields."', 'Field + alert'],
|
||||
['401', 'Any back-office call', 'Goes to /login?redirect=<path>&reason=expired. "Your session expired. Log in again to pick up where you left off."', 'Redirect + alert'],
|
||||
['401', 'Verify', '"Log in to finish verifying." Inline log in, then retry', 'Inline form'],
|
||||
['403', 'Log in', '"That username and password don\'t match. Check both and try again."', 'Alert'],
|
||||
['403', 'Register', '"This site already has an owner. Log in instead."', 'ResultPanel'],
|
||||
['403', 'Any back-office call', 'Unverified: goes to /register/pending', 'Redirect'],
|
||||
['403', 'Verify', '"This verification link doesn\'t work." Offers Cancel registration and start over', 'ResultPanel'],
|
||||
['403', 'Cancel registration', '"Your account is already verified." Goes to /home', 'Toast'],
|
||||
['403', 'Reset confirm', '"This reset link has expired." Offers Request a new link', 'ResultPanel'],
|
||||
['404', 'Editor load', '"This article doesn\'t exist." Offers All articles', 'ErrorView'],
|
||||
['404', 'Row or editor action', '"That article no longer exists." The row is removed', 'Toast'],
|
||||
['404', 'Unknown route', '"Page not found"', 'ErrorView'],
|
||||
['429', 'Log in, reset request', '"Too many attempts. For your security, wait a moment before trying again." With a countdown*', 'Alert + disabled button'],
|
||||
['500', 'Save', '"Save failed" + Retry. Changes are kept', 'SaveStatus'],
|
||||
['500', 'Publish / unpublish', '"Couldn\'t publish" / "Couldn\'t unpublish" + Retry', 'Toast'],
|
||||
['500', 'Delete', '"Couldn\'t delete the article, so it\'s still there. Try again in a moment."', 'Inline in dialog'],
|
||||
['500', 'Upload', '"Upload failed. The server didn\'t accept the file. Your article hasn\'t changed."', 'ImageUploader'],
|
||||
['network', 'Anywhere', '"Couldn\'t reach RenewCMS. Check your connection and try again." Offline: banner', 'Alert / toast / banner']
|
||||
].map(([c, w, t, s]) => ({ c, w, t, s }))
|
||||
const pending = [
|
||||
{ a: 'GET /v1/auth/me → User | 401', d: 'The session check at boot. The HttpOnly cookie can\'t be read from JS. Until this exists, the guard can call GET /v1/article/ and infer: 401 means logged out, but verified and unverified users can\'t be told apart.' },
|
||||
{ a: 'GET /v1/auth/registration → { open }', d: 'Shows "Create the owner account" on /login. Without it, the link is hidden and /register is reachable by URL only.' },
|
||||
{ a: '429 + Retry-After on /login, /password-reset', d: 'Drives the countdown state. The UI falls back to 60 s if the header is missing.' },
|
||||
{ a: 'Serving /static/uploadedImages/*', d: 'The editor and preview are designed as if images load. Until they do, img tags show a broken image.' },
|
||||
{ a: 'Not supported (disabled or omitted)', d: 'Renaming a title (shown read-only, with an explanation in Details), resending the verification email (the pending page explains how to start over), changing the password while logged in, editing the profile or email, listing or deleting individual images, multiple users.' }
|
||||
]
|
||||
return { files, routes, components, matrix, errors, pending }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,407 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px;overflow:hidden}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}[data-act]{cursor:pointer}.hs [data-act]{outline:2px dashed #c9a86a !important;outline-offset:-2px}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" data-screen-label="Prototype" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;height:100vh;display:flex;background:var(--rc-canvas);color:var(--ui-text)">
|
||||
|
||||
<aside style="width:320px;flex-shrink:0;height:100vh;overflow-y:auto;background:var(--ui-bg);border-right:1px solid var(--ui-border);padding:24px;display:flex;flex-direction:column;gap:24px">
|
||||
<div style="display:flex;align-items:center;gap:10px"><svg width="28" height="28" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><div style="display:flex;flex-direction:column"><span style="font:600 16px/22px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">RenewCMS prototype</span><span style="color:var(--ui-text-muted)">Click through the real screens.</span></div></div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="display:flex;border:1px solid var(--ui-border-accented)"><sc-for list="{{ devices }}" as="d" hint-placeholder-count="2"><button onClick="{{ d.pick }}" aria-pressed="{{ d.on }}" style="all:unset;cursor:pointer;flex:1;height:32px;display:flex;align-items:center;justify-content:center;font-weight:500;background:{{ d.bg }};color:{{ d.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ d.label }}</button></sc-for></div>
|
||||
<div style="display:flex;border:1px solid var(--ui-border-accented)"><sc-for list="{{ modes }}" as="m" hint-placeholder-count="3"><button onClick="{{ m.pick }}" aria-pressed="{{ m.on }}" style="all:unset;cursor:pointer;flex:1;height:32px;display:flex;align-items:center;justify-content:center;font-weight:500;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button></sc-for></div>
|
||||
<button onClick="{{ toggleHs }}" aria-pressed="{{ hs }}" style="all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--ui-text-toned)" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span style="width:32px;height:18px;padding:2px;display:flex;justify-content:{{ hsJust }};background:{{ hsBg }}"><span style="width:14px;height:14px;background:var(--ui-bg)"></span></span>Show clickable areas</button>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<sc-for list="{{ flows }}" as="f" hint-placeholder-count="5">
|
||||
<div style="border:1px solid {{ f.bd }};background:var(--ui-bg)">
|
||||
<button onClick="{{ f.pick }}" style="all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;padding:12px 14px;width:100%;box-sizing:border-box" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:-2px"><span style="font-weight:600;font-size:14px;color:var(--ui-text-highlighted)">{{ f.name }}</span><span style="color:var(--ui-text-muted)">{{ f.desc }}</span></button>
|
||||
<sc-if value="{{ f.on }}">
|
||||
<div style="padding:0 14px 14px;display:flex;flex-direction:column;gap:6px">
|
||||
<sc-for list="{{ f.steps }}" as="s" hint-placeholder-count="4"><span style="display:flex;align-items:center;gap:8px;color:{{ s.fg }};font-weight:{{ s.fw }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;width:14px;height:14px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ s.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ s.icon }}.svg') center / contain no-repeat"></span>{{ s.t }}</span></sc-for>
|
||||
<sc-if value="{{ hint }}"><span aria-live="polite" style="margin-top:6px;padding:8px 10px;background:var(--rc-sand);color:#111;font-size:12px;line-height:18px">{{ hint }}</span></sc-if>
|
||||
<div style="display:flex;flex-direction:column;gap:6px;margin-top:6px">
|
||||
<sc-for list="{{ tools }}" as="t" hint-placeholder-count="0"><button onClick="{{ t.run }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:8px;background:var(--ui-primary);color:var(--ui-bg);font-weight:500" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span>{{ t.label }}</button></sc-for>
|
||||
<button onClick="{{ f.pick }}" style="all:unset;cursor:pointer;height:32px;padding:0 12px;display:flex;align-items:center;gap:8px;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px"><span aria-hidden="true" style="display:inline-block;width:16px;height:16px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/rotate-cw.svg') center / contain no-repeat"></span>Restart this flow</button>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<span style="color:var(--ui-text-muted);font-size:12px;line-height:18px">Typing is simulated: in the editor, click the text to make a change. Forms fill themselves when you submit. Network delays are faked.</span>
|
||||
</aside>
|
||||
|
||||
<main ref="{{ stageRef }}" style="flex:1;min-width:0;height:100vh;overflow:auto;display:flex;align-items:center;justify-content:center;padding:24px">
|
||||
<div style="flex-shrink:0;width:{{ boxW }};height:{{ boxH }};box-shadow:0 8px 40px rgb(0 0 0 / 0.15);overflow:hidden">
|
||||
<div onClick="{{ onStage }}" class="{{ hsClass }}" style="width:{{ devW }};height:{{ devH }};zoom:{{ zoom }};position:relative;overflow:hidden;background:var(--ui-bg-muted)">
|
||||
<sc-if value="{{ isAuth }}"><div style="width:100%;height:100%;overflow:hidden;background:{{ authBg }};padding-top:{{ authTop }};display:flex;flex-direction:column;align-items:center"><dc-import name="AuthCard" s="{{ authS }}" mobile="{{ mobile }}" hint-size="400px,520px"></dc-import></div></sc-if>
|
||||
<sc-if value="{{ isApp }}"><dc-import name="AppFrame" s="{{ appS }}" mobile="{{ mobile }}" hint-size="100%,100%"></dc-import></sc-if>
|
||||
<sc-if value="{{ isEmail }}"><div style="width:100%;height:100%;display:flex;flex-direction:column;background:var(--ui-bg)"><div style="flex-shrink:0;padding:14px 20px;border-bottom:1px solid var(--ui-border);display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">{{ emailSubject }}</span><span style="color:var(--ui-text-muted)">From RenewCMS · to marta@renew.example</span></div><iframe title="Email" srcDoc="{{ emailHtml }}" style="flex:1;width:100%;border:0"></iframe></div></sc-if>
|
||||
<sc-if value="{{ mnav }}">
|
||||
<div data-act="mnav-close" style="position:absolute;inset:0;z-index:50;background:var(--rc-overlay)">
|
||||
<div style="position:absolute;left:0;top:0;bottom:0;width:280px;background:var(--ui-bg);padding:12px;display:flex;flex-direction:column;gap:2px">
|
||||
<div style="display:flex;align-items:center;gap:10px;height:48px;padding:0 6px;margin-bottom:8px"><svg width="26" height="26" viewBox="0 0 16 16" shape-rendering="crispEdges"><rect width="16" height="16" fill="#111"></rect><path fill="#fff" fill-rule="evenodd" d="M4 3h6v1h1v1h1v3h-1v1h-1v1h1v1h1v2h-2v-2h-1v-1H6v3H4zm2 2v3h4V5z"></path></svg><span style="font-weight:600;font-size:15px;color:var(--ui-text-highlighted)">RenewCMS</span></div>
|
||||
<sc-for list="{{ mnavItems }}" as="n" hint-placeholder-count="4"><div data-act="{{ n.act }}" style="height:44px;padding:0 12px;display:flex;align-items:center;gap:12px;font-size:15px;background:{{ n.bg }};color:{{ n.fg }}"><span aria-hidden="true" style="display:inline-block;width:18px;height:18px;background-color:currentColor;-webkit-mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ n.icon }}.svg') center / contain no-repeat"></span>{{ n.t }}</div></sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ hasToasts }}">
|
||||
<div aria-live="polite" style="position:absolute;z-index:60;display:flex;flex-direction:column;gap:8px;left:{{ tL }};right:{{ tR }};bottom:{{ tB }};width:{{ tW }}">
|
||||
<sc-for list="{{ toasts }}" as="t" hint-placeholder-count="1">
|
||||
<div style="display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);font-size:{{ tF }}"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ t.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ t.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ t.title }}</span><span style="color:var(--ui-text-muted)">{{ t.text }}</span></div></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"theme":{"editor":"enum","options":["system","light","dark"],"default":"light","tsType":"'system' | 'light' | 'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
rootRef = React.createRef()
|
||||
stageRef = React.createRef()
|
||||
timers = []
|
||||
light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
|
||||
dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
|
||||
base() {
|
||||
return [
|
||||
{ id: 1, t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago', imgs: 3 },
|
||||
{ id: 2, t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday', imgs: 2 },
|
||||
{ id: 3, t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago', imgs: 6 },
|
||||
{ id: 4, t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago', imgs: 3 },
|
||||
{ id: 5, t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026', imgs: 1 },
|
||||
{ id: 6, t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026', imgs: 0 }
|
||||
]
|
||||
}
|
||||
flowDefs = [
|
||||
{ key: 'first', name: 'First run', desc: 'Register, verify by email, write and publish.', steps: [['register', 'Create the owner account'], ['pending', 'Check your email'], ['verified', 'Verify from the email'], ['firstArticle', 'Write the first article'], ['published', 'Publish it']], hints: { register: 'Click "Create account".', pending: 'Use "Open the verification email" below.', verified: 'Click "Verify my account" in the email.', firstArticle: 'Click "New article", then "Create draft".', published: 'Click "Publish" in the editor header.' } },
|
||||
{ key: 'edit', name: 'Edit an article', desc: 'Log in, upload an image, save, unpublish.', steps: [['login', 'Log in'], ['openArticle', 'Open an article'], ['upload', 'Upload an image'], ['saved', 'Save'], ['unpublished', 'Unpublish']], hints: { login: 'Click "Log in".', openArticle: 'Go to Articles and click an online article.', upload: 'Click the image button at the end of the toolbar, then the drop area.', saved: 'Click "Save".', unpublished: 'Click "Unpublish".' } },
|
||||
{ key: 'reset', name: 'Forgot password', desc: 'Request a link, reset, log in.', steps: [['forgot', 'Ask for a reset link'], ['email', 'Open the email'], ['changed', 'Choose a new password'], ['login', 'Log in']], hints: { forgot: 'Click "Forgot password?", then "Send reset link".', email: 'Use "Open the reset email" below, then click its button.', changed: 'Click "Change password".', login: 'Click "Log in".' } },
|
||||
{ key: 'delete', name: 'Delete an article', desc: 'From the row menu, with confirmation.', steps: [['menu', 'Open the row menu'], ['confirm', 'Confirm the delete'], ['deleted', 'Article deleted']], hints: { menu: 'Click the ••• button on any row. On mobile, tap ⋮.', confirm: 'Choose "Delete…", then "Delete article".', deleted: '' } },
|
||||
{ key: 'expiry', name: 'Session expiry mid-edit', desc: 'Your unsaved work survives a new login.', steps: [['edited', 'Make a change'], ['expire', 'Session expires'], ['relogin', 'Log in again'], ['restored', 'Back in the editor, changes kept']], hints: { edited: 'Click the article text to make a change.', expire: 'Use "Simulate session expiry" below.', relogin: 'Click "Log in".', restored: '' } }
|
||||
]
|
||||
start(key) {
|
||||
const articles = this.base()
|
||||
const common = { flow: key, done: [], modal: null, menu: null, busy: null, toasts: [], auth: {}, mnav: false, expired: false, copied: false, email: null, ed: null, cur: null }
|
||||
if (key === 'first') return { ...common, route: 'register', regOpen: true, articles: [] }
|
||||
if (key === 'edit') return { ...common, route: 'login', regOpen: false, articles }
|
||||
if (key === 'reset') return { ...common, route: 'login', regOpen: false, articles }
|
||||
if (key === 'delete') return { ...common, route: 'articles', regOpen: false, articles }
|
||||
return { ...common, route: 'editor', regOpen: false, articles, cur: 1, ed: { status: 'online', save: 'saved', image: false, preview: false } }
|
||||
}
|
||||
state = { device: 'desktop', mode: this.props.theme ?? 'light', hs: false, zoom: 1, emails: {}, ...this.start('first') }
|
||||
later(fn, ms) { this.timers.push(setTimeout(fn, ms)) }
|
||||
clearTimers() { this.timers.forEach(clearTimeout); this.timers = [] }
|
||||
mark(...keys) { this.setState(s => ({ done: [...new Set([...s.done, ...keys])] })) }
|
||||
toast(tone, icon, title, text) {
|
||||
const id = Math.random()
|
||||
this.setState(s => ({ toasts: [...s.toasts.filter(t => t.title !== title), { id, tone, icon, title, text }].slice(-3) }))
|
||||
if (tone !== 'error') this.later(() => this.setState(s => ({ toasts: s.toasts.filter(t => t.id !== id) })), 5000)
|
||||
}
|
||||
resolved() {
|
||||
if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
return this.state.mode
|
||||
}
|
||||
apply() {
|
||||
const el = this.rootRef.current
|
||||
if (!el) return
|
||||
const vars = this.resolved() === 'dark' ? this.dark : this.light
|
||||
for (const k in vars) el.style.setProperty(k, vars[k])
|
||||
}
|
||||
fit() {
|
||||
const el = this.stageRef.current
|
||||
if (!el) return
|
||||
const w = el.clientWidth - 48, h = el.clientHeight - 48
|
||||
const [dw, dh] = this.state.device === 'desktop' ? [1440, 900] : [390, 844]
|
||||
const zoom = Math.max(0.3, Math.min(1, w / dw, h / dh))
|
||||
if (Math.abs(zoom - this.state.zoom) > 0.005) this.setState({ zoom })
|
||||
}
|
||||
componentDidMount() {
|
||||
this.apply()
|
||||
this._dev = this.state.device
|
||||
this.fit()
|
||||
this.ro = new ResizeObserver(() => this.fit())
|
||||
if (this.stageRef.current) this.ro.observe(this.stageRef.current)
|
||||
this.onMsg = e => { if (e.data && e.data.rcEmail) this.emailClick() }
|
||||
window.addEventListener('message', this.onMsg)
|
||||
const load = (k, f) => fetch(f).then(r => r.text()).then(t => this.setState(s => ({ emails: { ...s.emails, [k]: t } })))
|
||||
load('verify', 'emails/verification.html')
|
||||
load('reset', 'emails/password-reset.html')
|
||||
}
|
||||
componentWillUnmount() { this.clearTimers(); this.ro && this.ro.disconnect(); window.removeEventListener('message', this.onMsg) }
|
||||
componentDidUpdate(p) {
|
||||
if (p && p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
|
||||
this.apply()
|
||||
if (this._dev !== this.state.device) { this._dev = this.state.device; this.fit() }
|
||||
}
|
||||
pickFlow(key) { this.clearTimers(); this.setState(this.start(key)) }
|
||||
art(id) { return this.state.articles.find(a => a.id === id) }
|
||||
patchArt(id, p) { this.setState(s => ({ articles: s.articles.map(a => a.id === id ? { ...a, ...p } : a) })) }
|
||||
dirty() { const e = this.state.ed; return this.state.route === 'editor' && e && (e.save === 'dirty' || e.save === 'error') }
|
||||
go(route, extra = {}) {
|
||||
if (this.dirty() && route !== 'editor' && route !== 'login') { this.setState({ modal: { type: 'leave', target: route }, mnav: false }); return }
|
||||
this.setState({ route, menu: null, mnav: false, modal: null, ...extra })
|
||||
}
|
||||
openEditor(id) {
|
||||
const a = this.art(id)
|
||||
if (!a) return
|
||||
this.setState({ route: 'editor', cur: id, menu: null, ed: { status: a.on ? 'online' : 'draft', save: 'saved', image: false, preview: false, body: a.body } })
|
||||
this.mark('openArticle')
|
||||
}
|
||||
emailClick() {
|
||||
const s = this.state
|
||||
if (s.route !== 'email') return
|
||||
if (s.email === 'verify') {
|
||||
this.setState({ route: 'verify' })
|
||||
this.later(() => { this.setState({ route: 'home' }); this.mark('verified'); this.toast('success', 'circle-check', 'Your account is verified', 'Welcome to RenewCMS.') }, 1400)
|
||||
} else {
|
||||
this.setState({ route: 'reset', auth: {} })
|
||||
this.mark('email')
|
||||
}
|
||||
}
|
||||
act(a) {
|
||||
const s = this.state
|
||||
if (a === 'mnav-close') return this.setState({ mnav: false })
|
||||
if (a.startsWith('nav-')) return this.go(a.slice(4))
|
||||
if (a === 'logout') { this.clearTimers(); this.setState({ route: 'login', auth: {}, mnav: false, menu: null, modal: null }); return this.toast('info', 'info', 'You\'re logged out', 'Log in again to keep working.') }
|
||||
if (s.modal) return this.modalAct(a)
|
||||
const r = s.route
|
||||
if (r === 'login') {
|
||||
if (a === 'forgot') return this.setState({ route: 'forgot', auth: {} })
|
||||
if (a === 'footer') return this.setState({ route: 'register', auth: {} })
|
||||
if (a === 'submit' && !s.auth.submitting) {
|
||||
this.setState({ auth: { ...s.auth, u: 'marta', p: 'limewash2026', submitting: true } })
|
||||
this.later(() => {
|
||||
this.mark('login')
|
||||
if (this.state.expired) { this.setState({ route: 'editor', expired: false, auth: {} }); this.mark('relogin', 'restored'); this.toast('info', 'info', 'Unsaved changes restored', 'Your edits from before the session expired are back. Save to keep them.') }
|
||||
else this.setState({ route: 'home', auth: {} })
|
||||
}, 800)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (r === 'register') {
|
||||
if (a === 'footer') return this.setState({ route: 'login', auth: {} })
|
||||
if (a === 'submit' && !s.auth.submitting) {
|
||||
this.setState({ auth: { u: 'marta', e: 'marta@renew.example', p: 'limewash2026', submitting: true } })
|
||||
this.later(() => { this.setState({ route: 'pending', auth: {} }); this.mark('register') }, 900)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (r === 'pending') {
|
||||
if (a === 'result-0') return this.setState({ route: 'login', auth: {} })
|
||||
if (a === 'result-1') { this.setState({ route: 'register', auth: {} }); return this.toast('success', 'circle-check', 'Registration cancelled', 'You can create the owner account again.') }
|
||||
return
|
||||
}
|
||||
if (r === 'forgot') {
|
||||
if (a === 'below') return this.setState({ route: 'login', auth: {} })
|
||||
if (a === 'submit' && !s.auth.submitting) {
|
||||
this.setState({ auth: { e: 'marta@renew.example', submitting: true } })
|
||||
this.later(() => { this.setState({ route: 'forgot-sent', auth: {} }); this.mark('forgot') }, 800)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (r === 'forgot-sent') { if (a === 'result-0') this.setState({ route: 'login', auth: {} }); return }
|
||||
if (r === 'reset') {
|
||||
if (a === 'submit' && !s.auth.submitting) {
|
||||
this.setState({ auth: { p: 'limewash2026', c: 'limewash2026', submitting: true } })
|
||||
this.later(() => { this.setState({ route: 'login', auth: { changed: true } }); this.mark('changed') }, 900)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (a === 'new' || a === 'empty' || (a === 'm-action' && r === 'home')) return this.setState({ modal: { type: 'new' }, menu: null })
|
||||
if (a === 'm-lead' && r !== 'editor') return this.setState({ mnav: true })
|
||||
if (a.startsWith('open-')) return this.openEditor(Number(a.slice(5)))
|
||||
if (a.startsWith('menu-')) { const id = Number(a.slice(5)); this.setState({ menu: s.menu === id ? null : id }); return this.mark('menu') }
|
||||
if (a.startsWith('del-')) return this.setState({ menu: null, modal: { type: 'delete', id: Number(a.slice(4)) } })
|
||||
if (a.startsWith('pub-')) {
|
||||
const id = Number(a.slice(4)), art = this.art(id)
|
||||
this.setState({ menu: null, busy: id })
|
||||
this.later(() => { this.patchArt(id, { on: !art.on, u: 'Just now' }); this.setState({ busy: null }); art.on ? this.toast('success', 'circle-check', 'Article unpublished', 'It\'s a draft again and hidden from your website.') : this.toast('success', 'circle-check', 'Article published', '"' + art.t + '" is now online.') }, 900)
|
||||
return
|
||||
}
|
||||
if (a === 'copyurl') { this.setState({ menu: null }); return this.toast('success', 'check', 'API URL copied', 'Paste it wherever your site needs it.') }
|
||||
if (a === 'copy') { this.setState({ copied: true }); return this.later(() => this.setState({ copied: false }), 2000) }
|
||||
if (r === 'editor') return this.editorAct(a)
|
||||
if (s.menu) this.setState({ menu: null })
|
||||
}
|
||||
editorAct(a) {
|
||||
const s = this.state, e = s.ed, art = this.art(s.cur)
|
||||
const setEd = p => this.setState(st => ({ ed: { ...st.ed, ...p } }))
|
||||
if (a === 'type' && !e.preview && !e.pending) { setEd({ save: 'dirty' }); return this.mark('edited') }
|
||||
if (a === 'preview') return setEd({ preview: !e.preview })
|
||||
if (a === 'back' || a === 'm-lead') return this.go('articles')
|
||||
if (a === 'overflow' || a === 'm-action') return this.setState({ modal: { type: 'delete', id: s.cur, fromEditor: true } })
|
||||
if (a === 'tb-image-plus') return this.setState({ modal: { type: 'upload', state: 'idle' } })
|
||||
if (a === 'save' && (e.save === 'dirty' || e.save === 'error')) {
|
||||
setEd({ save: 'saving' })
|
||||
this.later(() => { setEd({ save: 'saved' }); this.patchArt(s.cur, { u: 'Just now' }); this.mark('saved') }, 800)
|
||||
return
|
||||
}
|
||||
if (a === 'publish' && !e.pending) {
|
||||
const wasDirty = e.save === 'dirty' || e.save === 'error'
|
||||
if (e.status === 'online') {
|
||||
setEd({ pending: 'Unpublishing…' })
|
||||
this.later(() => { setEd({ pending: null, status: 'draft' }); this.patchArt(s.cur, { on: false, u: 'Just now' }); this.mark('unpublished'); this.toast('success', 'circle-check', 'Article unpublished', 'It\'s a draft again and hidden from your website.') }, 900)
|
||||
} else {
|
||||
setEd({ pending: wasDirty ? 'Saving and publishing…' : 'Publishing…', save: wasDirty ? 'saving' : e.save })
|
||||
this.later(() => { setEd({ pending: null, status: 'online', save: 'saved' }); this.patchArt(s.cur, { on: true, u: 'Just now' }); this.mark('published'); this.toast('success', 'circle-check', 'Article published', '"' + art.t + '" is now online.') }, 1100)
|
||||
}
|
||||
}
|
||||
}
|
||||
modalAct(a) {
|
||||
const s = this.state, m = s.modal
|
||||
const close = () => this.setState({ modal: null })
|
||||
if (m.loading) return
|
||||
if (m.type === 'new') {
|
||||
if (a === 'modal-cancel' || a === 'modal-close') return close()
|
||||
if (a === 'modal-confirm') {
|
||||
this.setState({ modal: { ...m, loading: true } })
|
||||
this.later(() => {
|
||||
const id = Math.max(0, ...this.state.articles.map(x => x.id)) + 1
|
||||
const art = { id, t: 'Choosing tiles for a small bathroom', on: false, c: '25 Sep 2026', u: 'Just now', imgs: 0, body: 'Small rooms show every grout line, so we start with the floor and work up.' }
|
||||
this.setState(st => ({ articles: [art, ...st.articles], modal: null, route: 'editor', cur: id, ed: { status: 'draft', save: 'saved', image: false, preview: false, body: art.body } }))
|
||||
this.mark('firstArticle')
|
||||
this.toast('info', 'info', 'Draft created', 'It stays private until you publish it.')
|
||||
}, 900)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (m.type === 'delete') {
|
||||
if (a === 'modal-cancel' || a === 'modal-close') return close()
|
||||
if (a === 'modal-confirm') {
|
||||
const art = this.art(m.id)
|
||||
this.setState({ modal: { ...m, loading: true } })
|
||||
this.mark('confirm')
|
||||
this.later(() => {
|
||||
this.setState(st => ({ articles: st.articles.filter(x => x.id !== m.id), modal: null, route: m.fromEditor ? 'articles' : st.route, ed: m.fromEditor ? null : st.ed }))
|
||||
this.mark('deleted')
|
||||
this.toast('success', 'circle-check', 'Article deleted', '"' + art.t + '" and its images are gone.')
|
||||
}, 1000)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (m.type === 'upload') {
|
||||
if (a === 'modal-cancel' || a === 'modal-close') return close()
|
||||
if ((a === 'upload-pick' || a === 'modal-confirm') && m.state !== 'uploading') {
|
||||
this.setState({ modal: { ...m, state: 'uploading' } })
|
||||
this.later(() => {
|
||||
this.setState(st => ({ modal: null, ed: { ...st.ed, image: true, save: 'dirty' } }))
|
||||
this.mark('upload')
|
||||
this.toast('success', 'circle-check', 'Image added', 'Save to keep it in the article.')
|
||||
}, 1500)
|
||||
}
|
||||
return
|
||||
}
|
||||
if (m.type === 'leave') {
|
||||
if (a === 'modal-cancel') { this.setState(st => ({ modal: null, ed: { ...st.ed, save: 'saved' }, route: m.target, menu: null, mnav: false })); return }
|
||||
if (a === 'modal-confirm' || a === 'modal-close') return close()
|
||||
}
|
||||
}
|
||||
authS() {
|
||||
const s = this.state, A = s.auth || {}, sub = !!A.submitting
|
||||
const U = v => ({ label: 'Username', ph: 'Your username', value: v })
|
||||
const P = (v, o = {}) => ({ label: 'Password', pw: true, value: v, ...o })
|
||||
const E = (v, o = {}) => ({ label: 'Email', ph: 'you@example.com', value: v, ...o })
|
||||
if (s.route === 'login') return { title: 'Log in', desc: 'Welcome back. Log in to manage your articles.', fields: [U(A.u), P(A.p, { link: 'Forgot password?' })], submit: { t: sub ? 'Logging in…' : 'Log in', loading: sub }, notice: s.expired ? { tone: 'info', icon: 'clock', title: 'Your session expired', text: 'Log in again to pick up where you left off. Unsaved changes are kept on this device.' } : A.changed ? { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' } : null, footer: s.regOpen ? { pre: 'First time here?', link: 'Create the owner account' } : null, pending: s.regOpen }
|
||||
if (s.route === 'register') return { title: 'Create the owner account', desc: 'This creates the single admin account for this site. Once it\'s verified, registration closes.', fields: [{ ...U(A.u), ph: 'e.g. marta', count: ((A.u || '').length) + ' / 20', help: 'Letters and numbers, 3 to 20 characters. You\'ll use it to log in.' }, E(A.e, { help: 'We\'ll send a verification link here.' }), P(A.p, { hints: [{ t: 'At least 8 characters', s: A.p ? 'met' : 'unmet' }] })], submit: { t: sub ? 'Creating account…' : 'Create account', loading: sub }, footer: { pre: 'Already set up?', link: 'Log in' } }
|
||||
if (s.route === 'pending') return { result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'We sent a verification link to marta@renew.example. It expires in 2 hours.', note: 'Opened it on another device? That works too; you\'ll log in there first. Can\'t find it? Check your spam folder. If the link has expired, cancel your registration and start again.', actions: [{ t: 'Log out', secondary: true }, { t: 'Cancel registration', secondary: true }] } }
|
||||
if (s.route === 'verify') return { spinner: 'Verifying your account…' }
|
||||
if (s.route === 'forgot') return { title: 'Reset your password', desc: 'Enter the email for your account and we\'ll send you a link to choose a new password.', fields: [E(A.e)], submit: { t: sub ? 'Sending…' : 'Send reset link', loading: sub }, below: 'Back to log in' }
|
||||
if (s.route === 'forgot-sent') return { result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'If an account exists for that email, a password reset link has been sent.', note: 'The link expires in 1 hour.', actions: [{ t: 'Back to log in', secondary: true }] } }
|
||||
if (s.route === 'reset') return { title: 'Choose a new password', desc: 'Pick something you haven\'t used here before. You\'ll log in with it next.', fields: [E('marta@renew.example', { ro: true, help: 'From your reset link.' }), P(A.p, { label: 'New password', hints: [{ t: 'At least 8 characters', s: A.p ? 'met' : 'unmet' }] }), P(A.c, { label: 'Confirm new password', hints: [{ t: 'Passwords match', s: A.c ? 'met' : 'unmet' }] })], submit: { t: sub ? 'Changing password…' : 'Change password', loading: sub } }
|
||||
return {}
|
||||
}
|
||||
appS() {
|
||||
const s = this.state, arts = s.articles
|
||||
const on = arts.filter(a => a.on).length
|
||||
const counts = [arts.length, on, arts.length - on]
|
||||
const T = (name, crumb) => ({ nav: name, crumbs: crumb })
|
||||
if (s.route === 'home') return { kind: 'home', ...T('home', ['Home']), mTitle: 'Home', mAction: 'plus', home: arts.length ? { sub: 'Here\'s where things stand on your site.', stats: [{ n: String(counts[0]), l: 'articles' }, { n: String(counts[1]), l: 'online' }, { n: String(counts[2]), l: 'drafts' }], recent: arts.slice(0, 5).map(a => ({ ...a, draft: !a.on })) } : { sub: 'Welcome to RenewCMS.', empty: true }, modal: this.modalS() }
|
||||
if (s.route === 'articles') return { kind: 'articles', ...T('articles', ['Articles']), mTitle: 'Articles', list: { counts, rows: arts.map(a => ({ ...a, menu: s.menu === a.id, busy: s.busy === a.id ? (a.on ? 'Unpublishing…' : 'Publishing…') : null })), empty: arts.length ? null : { icon: 'file-text', title: 'No articles yet', text: 'Write your first one. It stays a draft until you publish it.', action: 'New article', primary: true } }, modal: this.modalS() }
|
||||
if (s.route === 'integration') return { kind: 'integration', ...T('integration', ['Integration']), mTitle: 'Integration', copied: s.copied }
|
||||
if (s.route === 'editor') {
|
||||
const a = this.art(s.cur) || {}, e = s.ed || {}
|
||||
return { kind: 'editor', ...T('articles', ['Articles', a.t]), mTitle: 'Edit article', mLead: 'arrow-left', mAction: 'ellipsis', ed: { ...e, title: a.t, imgs: (a.imgs || 0) + (e.image ? 1 : 0) }, modal: this.modalS() }
|
||||
}
|
||||
return { kind: 'home', home: { sub: '' } }
|
||||
}
|
||||
modalS() {
|
||||
const m = this.state.modal
|
||||
if (!m) return null
|
||||
if (m.type === 'new') return { title: 'New article', desc: 'It\'s saved as a draft. Titles can\'t be changed later, so check it now.', close: true, cancel: 'Cancel', confirm: m.loading ? 'Creating…' : 'Create draft', loading: m.loading, wide: true, fields: [{ label: 'Title', value: 'Choosing tiles for a small bathroom', count: '35 / 200', help: '3 to 200 characters.' }, { label: 'First paragraph', value: 'Small rooms show every grout line, so we start with the floor and work up.', area: true, help: 'You can format it and add images in the editor.' }] }
|
||||
if (m.type === 'delete') {
|
||||
const a = this.art(m.id) || { t: '', imgs: 0 }
|
||||
const imgs = a.imgs === 0 ? '' : a.imgs === 1 ? ' and its image' : ' and its ' + a.imgs + ' images'
|
||||
return { title: 'Delete this article?', desc: '"' + a.t + '"' + imgs + ' will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: m.loading ? 'Deleting…' : 'Delete article', tone: 'danger', loading: m.loading }
|
||||
}
|
||||
if (m.type === 'upload') return { title: 'Add an image', close: true, upload: { state: m.state }, cancel: m.state === 'uploading' ? 'Cancel upload' : 'Cancel' }
|
||||
if (m.type === 'leave') { const a = this.art(this.state.cur) || {}; return { title: 'Leave without saving?', desc: 'Your changes to "' + a.t + '" haven\'t been saved.', cancel: 'Discard changes', confirm: 'Keep editing' } }
|
||||
return null
|
||||
}
|
||||
emailHtml() {
|
||||
const s = this.state, t = s.emails[s.email] || ''
|
||||
if (!t) return ''
|
||||
let h = t.split('{{.Host}}').join('https://cms.renew.example').split('{{.VerificationCode}}').join('7f3c9a2e4b1d').split('{{.Email}}').join('marta@renew.example')
|
||||
if (this.resolved() === 'dark') h = h.replace('@media (prefers-color-scheme: dark)', '@media all')
|
||||
const tag = 'scr' + 'ipt'
|
||||
return h.replace('</body>', '<' + tag + '>document.addEventListener("click",function(e){var a=e.target.closest("a");if(a){e.preventDefault();parent.postMessage({rcEmail:true},"*")}})</' + tag + '></body>')
|
||||
}
|
||||
renderVals() {
|
||||
const s = this.state
|
||||
const mobile = s.device === 'mobile'
|
||||
const authRoutes = ['login', 'register', 'pending', 'verify', 'forgot', 'forgot-sent', 'reset']
|
||||
const isAuth = authRoutes.includes(s.route), isEmail = s.route === 'email', isApp = !isAuth && !isEmail
|
||||
const def = this.flowDefs.find(f => f.key === s.flow)
|
||||
const next = def.steps.find(([k]) => !s.done.includes(k))
|
||||
const flows = this.flowDefs.map(f => {
|
||||
const on = f.key === s.flow
|
||||
return { name: f.name, desc: f.desc, on, bd: on ? 'var(--ui-primary)' : 'var(--ui-border)', pick: () => this.pickFlow(f.key), steps: f.steps.map(([k, t]) => { const d = s.done.includes(k), n = next && next[0] === k; return { t, icon: d ? 'circle-check' : n ? 'circle-dot' : 'circle', fg: d ? 'var(--ui-success)' : n ? 'var(--ui-text-highlighted)' : 'var(--ui-text-muted)', fw: n ? 600 : 400 } }) }
|
||||
})
|
||||
const hint = next ? (def.hints[next[0]] || '') : 'Flow complete. Restart it, or pick another.'
|
||||
const tools = []
|
||||
if (s.route === 'pending') tools.push({ label: 'Open the verification email', icon: 'mail', run: () => { this.setState({ route: 'email', email: 'verify' }); this.mark('pending') } })
|
||||
if (s.route === 'forgot-sent') tools.push({ label: 'Open the reset email', icon: 'mail', run: () => this.setState({ route: 'email', email: 'reset' }) })
|
||||
if (s.route === 'editor' && s.flow === 'expiry') tools.push({ label: 'Simulate session expiry', icon: 'clock', run: () => { this.clearTimers(); this.setState({ route: 'login', expired: true, auth: {}, modal: null }); this.mark('expire') } })
|
||||
const devs = [['desktop', 'Desktop'], ['mobile', 'Mobile']].map(([k, label]) => { const on = s.device === k; return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ device: k }) } })
|
||||
const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => { const on = s.mode === k; return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) } })
|
||||
const [dw, dh] = mobile ? [390, 844] : [1440, 900]
|
||||
const navKey = s.route === 'editor' ? 'articles' : s.route
|
||||
const mnavItems = [['nav-home', 'house', 'Home', 'home'], ['nav-articles', 'file-text', 'Articles', 'articles'], ['nav-integration', 'plug', 'Integration', 'integration'], ['logout', 'log-out', 'Log out', '']].map(([act, icon, t, k]) => ({ act, icon, t, bg: k && k === navKey ? 'var(--rc-sand)' : 'transparent', fg: k && k === navKey ? '#111111' : 'var(--ui-text-toned)' }))
|
||||
const toasts = s.toasts.map(t => ({ ...t, fg: 'var(--ui-' + t.tone + ')' }))
|
||||
return {
|
||||
rootRef: this.rootRef, stageRef: this.stageRef,
|
||||
devices: devs, modes, flows, hint, tools,
|
||||
hs: s.hs, hsClass: s.hs ? 'hs' : '', hsJust: s.hs ? 'flex-end' : 'flex-start', hsBg: s.hs ? 'var(--ui-primary)' : 'var(--ui-bg-accented)', toggleHs: () => this.setState({ hs: !s.hs }),
|
||||
mobile, isAuth, isApp, isEmail,
|
||||
authS: isAuth ? this.authS() : {}, appS: isApp ? this.appS() : {},
|
||||
authBg: mobile ? 'var(--ui-bg)' : 'var(--ui-bg-muted)', authTop: mobile ? '40px' : '108px',
|
||||
emailHtml: isEmail ? this.emailHtml() : '', emailSubject: s.email === 'reset' ? 'Reset your RenewCMS password' : 'Verify your RenewCMS account',
|
||||
devW: dw + 'px', devH: dh + 'px', zoom: s.zoom, boxW: Math.round(dw * s.zoom) + 'px', boxH: Math.round(dh * s.zoom) + 'px',
|
||||
mnav: s.mnav && mobile, mnavItems,
|
||||
hasToasts: toasts.length > 0, toasts,
|
||||
tL: mobile ? '16px' : 'auto', tR: mobile ? '16px' : '24px', tB: mobile ? '16px' : '24px', tW: mobile ? 'auto' : '356px', tF: mobile ? '14px' : '13px',
|
||||
onStage: e => {
|
||||
const el = e.target.closest('[data-act]')
|
||||
if (!el) { if (this.state.menu) this.setState({ menu: null }); return }
|
||||
e.stopPropagation()
|
||||
this.act(el.getAttribute('data-act'))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,186 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" data-screen-label="Auth screens" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;background:var(--rc-canvas);color:var(--ui-text);padding:64px;display:flex;flex-direction:column;gap:72px;width:max-content;min-width:100%">
|
||||
|
||||
<div style="display:flex;align-items:flex-end;gap:32px;max-width:1400px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:10px">
|
||||
<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Screens: public and auth</h1>
|
||||
<p style="margin:0;max-width:880px;font-size:16px;line-height:26px;color:var(--ui-text-toned);text-wrap:pretty">Every state of the six public routes, at 1440 px (shown at 50%) and 390 px (shown at 75%). Use the switch on the right to see all of them in dark mode. Final copy is written into each state. The back-office screens and global states are on <a href="RenewCMS Screens Back-office.dc.html">the back-office board</a>, and the emails are on <a href="RenewCMS Emails.dc.html">the email board</a>.</p>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
|
||||
<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
|
||||
<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:36px;padding:0 14px;display:flex;align-items:center;font-weight:500;font-size:14px;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="6">
|
||||
<section data-screen-label="{{ g.label }}" style="display:flex;flex-direction:column;gap:28px">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;max-width:1100px">
|
||||
<h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ g.title }}</h2>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)"><span>{{ g.route }}</span><span style="color:var(--ui-text-muted)">{{ g.api }}</span></div>
|
||||
<sc-if value="{{ g.note }}"><p style="margin:4px 0 0;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">{{ g.note }}</p></sc-if>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
|
||||
<sc-for list="{{ g.states }}" as="st" hint-placeholder-count="4">
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}</span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
|
||||
<div style="display:flex;gap:24px;align-items:flex-start">
|
||||
<div style="width:720px;height:450px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0">
|
||||
<div style="width:1440px;height:900px;zoom:0.5;background:var(--ui-bg-muted);padding-top:108px;position:relative;display:flex;flex-direction:column;align-items:center">
|
||||
<dc-import name="AuthCard" s="{{ st }}" mobile="{{ false }}" hint-size="400px,520px"></dc-import>
|
||||
<sc-if value="{{ st.dialog }}">
|
||||
<div style="position:absolute;inset:0;background:var(--rc-overlay);display:flex;align-items:flex-start;justify-content:center;padding-top:220px">
|
||||
<div role="alertdialog" style="width:440px;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
|
||||
<div style="padding:24px 24px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.dialog.title }}</span><span style="color:var(--ui-text-toned);font-size:14px;line-height:22px">{{ st.dialog.text }}</span></div>
|
||||
<div style="padding:24px;display:flex;justify-content:flex-end;gap:8px"><span style="height:32px;padding:0 12px;display:flex;align-items:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500">{{ st.dialog.cancel }}</span><span style="height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;background:var(--ui-error);color:var(--ui-bg);font-weight:500">{{ st.dialog.confirm }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ st.toast }}">
|
||||
<div style="position:absolute;right:24px;bottom:24px;width:356px;display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop)"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:2px;width:16px;height:16px;background-color:{{ st.toast.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ st.toast.title }}</span><span style="color:var(--ui-text-muted)">{{ st.toast.text }}</span></div></div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width:293px;height:633px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0">
|
||||
<div style="width:390px;height:844px;zoom:0.75;background:var(--ui-bg);padding-top:40px;position:relative;display:flex;flex-direction:column">
|
||||
<dc-import name="AuthCard" s="{{ st }}" mobile="{{ true }}" hint-size="390px,600px"></dc-import>
|
||||
<sc-if value="{{ st.dialog }}">
|
||||
<div style="position:absolute;inset:0;background:var(--rc-overlay);display:flex;align-items:flex-end;padding:16px">
|
||||
<div role="alertdialog" style="width:100%;background:var(--ui-bg);box-shadow:var(--rc-shadow-modal)">
|
||||
<div style="padding:20px 20px 0;display:flex;flex-direction:column;gap:8px"><span style="font:600 17px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.dialog.title }}</span><span style="color:var(--ui-text-toned);font-size:15px;line-height:23px">{{ st.dialog.text }}</span></div>
|
||||
<div style="padding:20px;display:flex;flex-direction:column;gap:8px"><span style="height:44px;display:flex;align-items:center;justify-content:center;background:var(--ui-error);color:var(--ui-bg);font-weight:500;font-size:15px">{{ st.dialog.confirm }}</span><span style="height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border-accented);color:var(--ui-text-highlighted);font-weight:500;font-size:15px">{{ st.dialog.cancel }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ st.toast }}">
|
||||
<div style="position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:10px;padding:12px 14px;background:var(--ui-bg);border:1px solid var(--ui-border);box-shadow:var(--rc-shadow-pop);font-size:14px"><span aria-hidden="true" style="display:inline-block;flex-shrink:0;margin-top:3px;width:16px;height:16px;background-color:{{ st.toast.fg }};-webkit-mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat;mask:url('https://api.iconify.design/lucide/{{ st.toast.icon }}.svg') center / contain no-repeat"></span><div style="flex:1;display:flex;flex-direction:column;gap:2px"><span style="font-weight:600;color:var(--ui-text-highlighted)">{{ st.toast.title }}</span><span style="color:var(--ui-text-muted)">{{ st.toast.text }}</span></div></div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"theme":{"editor":"enum","options":["system","light","dark"],"default":"light","tsType":"'system' | 'light' | 'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { mode: this.props.theme ?? 'light' }
|
||||
rootRef = React.createRef()
|
||||
light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
|
||||
dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
|
||||
resolved() {
|
||||
if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
return this.state.mode
|
||||
}
|
||||
apply() {
|
||||
const el = this.rootRef.current
|
||||
if (!el) return
|
||||
const vars = this.resolved() === 'dark' ? this.dark : this.light
|
||||
for (const k in vars) el.style.setProperty(k, vars[k])
|
||||
document.body.style.background = vars['--rc-canvas']
|
||||
}
|
||||
componentDidMount() { this.apply() }
|
||||
componentDidUpdate(p) {
|
||||
if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
|
||||
this.apply()
|
||||
}
|
||||
groups() {
|
||||
const U = (o = {}) => ({ label: 'Username', ph: 'Your username', ...o })
|
||||
const P = (o = {}) => ({ label: 'Password', pw: true, ...o })
|
||||
const E = (o = {}) => ({ label: 'Email', ph: 'you@example.com', ...o })
|
||||
const pwHint = s => [{ t: 'At least 8 characters', s }]
|
||||
const toast = (tone, icon, title, text) => ({ fg: 'var(--ui-' + tone + ')', icon, title, text })
|
||||
const login = { title: 'Log in', desc: 'Welcome back. Log in to manage your articles.', submit: { t: 'Log in' } }
|
||||
const loginF = (u, p) => [U(u), P({ link: 'Forgot password?', ...p })]
|
||||
const reg = { title: 'Create the owner account', desc: 'This creates the single admin account for this site. Once it\'s verified, registration closes.', submit: { t: 'Create account' }, footer: { pre: 'Already set up?', link: 'Log in' } }
|
||||
const regF = (u, e, p) => [U({ ph: 'e.g. marta', count: ((u && u.value) || '').length + ' / 20', help: 'Letters and numbers, 3 to 20 characters. You\'ll use it to log in.', ...u }), E({ help: 'We\'ll send a verification link here.', ...e }), P({ hints: pwHint('unmet'), ...p })]
|
||||
const pendingResult = email => ({ tone: 'success', icon: 'mail-check', title: 'Check your email', text: email ? 'We sent a verification link to ' + email + '. It expires in 2 hours.' : 'We sent a verification link to the email you registered with. It expires in 2 hours.', note: 'Opened it on another device? That works too; you\'ll log in there first. Can\'t find it? Check your spam folder. If the link has expired, cancel your registration and start again.', actions: [{ t: 'Log out', secondary: true }, { t: 'Cancel registration', secondary: true }] })
|
||||
const cancelDialog = (loading) => ({ title: 'Cancel your registration?', text: 'Your account will be deleted. You can register again with the same or a different email.', confirm: loading ? 'Cancelling…' : 'Cancel registration', cancel: 'Keep my account' })
|
||||
const reqBase = { title: 'Reset your password', desc: 'Enter the email for your account and we\'ll send you a link to choose a new password.', submit: { t: 'Send reset link' }, below: 'Back to log in' }
|
||||
const rv = { title: 'Choose a new password', desc: 'Pick something you haven\'t used here before. You\'ll log in with it next.', submit: { t: 'Change password' } }
|
||||
const rvF = (p, c, hints) => [E({ value: 'marta@renew.example', ro: true, help: 'From your reset link.' }), P({ label: 'New password', hints: [{ t: 'At least 8 characters', s: hints[0] }], ...p }), P({ label: 'Confirm new password', hints: [{ t: 'Passwords match', s: hints[1] }], ...c })]
|
||||
const expired = { tone: 'error', icon: 'link-2-off', title: 'This reset link has expired', text: 'Reset links work once, for 1 hour. Request a new one and use it within the hour.', actions: [{ t: 'Request a new link' }, { t: 'Back to log in', secondary: true }] }
|
||||
return [
|
||||
{ label: 'Log in', title: 'Log in', route: '/login', api: 'GET /v1/auth/registration (pending) · POST /v1/auth/login', note: 'After logging in, you go back to the page you originally asked for (?redirect=), or to /home. An unverified account goes to /register/pending. "Create the owner account" appears only when registration is open.', states: [
|
||||
{ ...login, name: 'Default', trigger: 'Registration is closed, which is the usual case.', fields: loginF({}, {}) },
|
||||
{ ...login, name: 'Fresh install', trigger: 'GET /v1/auth/registration returns { open: true }.', fields: loginF({}, {}), footer: { pre: 'First time here?', link: 'Create the owner account' }, pending: true },
|
||||
{ ...login, name: 'Validation errors', trigger: 'Submit with a short username and an empty password. Nothing is sent.', fields: loginF({ value: 'ma', err: 'Use at least 3 characters.' }, { err: 'Enter your password.' }) },
|
||||
{ ...login, name: 'Submitting', trigger: 'The request is in flight. Fields and button are disabled.', fields: loginF({ value: 'marta' }, { value: 'limewash2026' }), submit: { t: 'Logging in…', loading: true } },
|
||||
{ ...login, name: 'Wrong credentials (403)', trigger: 'The API doesn\'t say which field is wrong, so neither does the message. The password is cleared and gets focus.', notice: { tone: 'error', icon: 'circle-x', title: 'That username and password don\'t match', text: 'Check both and try again. Passwords are case-sensitive.' }, fields: loginF({ value: 'marta' }, { focus: true }) },
|
||||
{ ...login, name: 'Too many attempts (429)', trigger: 'Retry-After is counted down. The button re-enables at zero.', notice: { tone: 'info', icon: 'timer', title: 'Too many attempts', text: 'For your security, wait a moment before trying again.' }, fields: loginF({ value: 'marta' }, { value: 'limewash' }), submit: { t: 'Try again in 0:42', disabled: true }, pending: true },
|
||||
{ ...login, name: 'Session expired', trigger: 'Redirected from a 401 with ?redirect=/article/12/edit&reason=expired. Unsaved edits are kept in the browser.', notice: { tone: 'info', icon: 'clock', title: 'Your session expired', text: 'Log in again to pick up where you left off. Unsaved changes are kept on this device.' }, fields: loginF({ value: 'marta' }, { focus: true }) },
|
||||
{ ...login, name: 'Password changed', trigger: 'Arrived from a successful reset with ?reason=password-changed.', notice: { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' }, fields: loginF({}, {}) },
|
||||
{ ...login, name: 'Server or network error', trigger: 'A 500 or no response. The fields keep their values.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t reach RenewCMS', text: 'Check your connection and try again.' }, fields: loginF({ value: 'marta' }, { value: 'limewash2026' }) }
|
||||
] },
|
||||
{ label: 'Register', title: 'Create the owner account', route: '/register', api: 'POST /v1/auth/register', note: 'Seen once, on a fresh install. After registering, the new user is logged in but not yet verified, and goes to /register/pending.', states: [
|
||||
{ ...reg, name: 'Default', trigger: 'Registration is open.', fields: regF({}, {}, {}) },
|
||||
{ ...reg, name: 'Validation errors', trigger: 'Checked on blur and on submit, using the same rules as the API.', fields: regF({ value: 'ma', err: 'Use 3 to 20 characters.', countErr: true, help: '' }, { value: 'marta@renew', err: 'Enter a full email address, like name@example.com.', help: '' }, { value: 'lime', hints: pwHint('err') }) },
|
||||
{ ...reg, name: 'Filled, valid', trigger: 'Every rule is met and the checklist item turns green.', fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', shown: true, hints: pwHint('met') }) },
|
||||
{ ...reg, name: 'Submitting', trigger: 'Fields and button are disabled.', fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', hints: pwHint('met') }), submit: { t: 'Creating account…', loading: true } },
|
||||
{ name: 'Registration closed (403)', trigger: 'Someone already verified an owner account. The form is replaced.', result: { tone: 'info', icon: 'user-x', title: 'This site already has an owner', text: 'Log in instead.', actions: [{ t: 'Go to log in' }] } },
|
||||
{ ...reg, name: 'Server error', trigger: 'A 500 or no response. The values are kept.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t create the account', text: 'Something went wrong on the server. Try again in a moment.' }, fields: regF({ value: 'marta' }, { value: 'marta@renew.example' }, { value: 'limewash2026', hints: pwHint('met') }) }
|
||||
] },
|
||||
{ label: 'Pending', title: 'Check your email', route: '/register/pending', api: 'DELETE /v1/auth/register · POST /v1/auth/logout', note: 'Any back-office route visited by an unverified account lands here. There\'s no way to resend the email because the API doesn\'t offer one, so the note explains the way out.', states: [
|
||||
{ name: 'Default', trigger: 'Straight after registering, when the email is known from the form.', result: pendingResult('marta@renew.example') },
|
||||
{ name: 'Email unknown', trigger: 'Arrived after logging in as an unverified user.', result: pendingResult(null) },
|
||||
{ name: 'Confirm cancel', trigger: '"Cancel registration" opens the destructive ConfirmDialog.', result: pendingResult('marta@renew.example'), dialog: cancelDialog(false) },
|
||||
{ name: 'Cancelling', trigger: 'DELETE in flight. The dialog can\'t be dismissed.', result: pendingResult('marta@renew.example'), dialog: cancelDialog(true) },
|
||||
{ ...reg, name: 'Cancelled', trigger: '200 → /register, with a toast.', fields: regF({}, {}, {}), toast: toast('success', 'circle-check', 'Registration cancelled', 'You can create the owner account again.') },
|
||||
{ name: 'Already verified (403)', trigger: 'Verified on another device. Goes to /home; shown here as the toast over the destination.', result: { tone: 'success', icon: 'shield-check', title: 'You\'re verified', text: 'Taking you to your dashboard…', actions: [] }, toast: toast('info', 'info', 'Your account is already verified', 'There\'s nothing to cancel.') }
|
||||
] },
|
||||
{ label: 'Verify', title: 'Verify account', route: '/register/validate?c=CODE', api: 'POST /v1/auth/verify', note: 'Opened from the verification email, and submits automatically on load. This is the only full-card spinner in the product.', states: [
|
||||
{ name: 'Verifying', trigger: 'On load, with a code in the URL.', spinner: 'Verifying your account…' },
|
||||
{ name: 'Success', trigger: '200 → /home after 800 ms, with a toast.', result: { tone: 'success', icon: 'shield-check', title: 'Your account is verified', text: 'Taking you to your dashboard…', actions: [] }, toast: toast('success', 'circle-check', 'Your account is verified', 'Welcome to RenewCMS.') },
|
||||
{ name: 'Invalid or expired (403)', trigger: 'The code is wrong, used, or older than 2 hours.', result: { tone: 'error', icon: 'link-2-off', title: 'This verification link doesn\'t work', text: 'It may have expired (links last 2 hours) or already been used.', note: 'Cancel your registration and start over to get a new link.', actions: [{ t: 'Cancel registration and start over' }, { t: 'Log out', secondary: true }] } },
|
||||
{ name: 'No session (401)', trigger: 'Opened in another browser or device. Log in inline, then verification retries automatically with the same code.', title: 'Log in to finish verifying', desc: 'You opened this link somewhere you\'re not logged in. Log in here and we\'ll verify your account right after.', fields: [U(), P()], submit: { t: 'Log in and verify' } },
|
||||
{ name: 'No session, retrying', trigger: 'Logged in inline. Now verifying.', spinner: 'Verifying your account…' },
|
||||
{ name: 'Missing code', trigger: 'The link has no ?c= parameter. No request is made.', result: { tone: 'error', icon: 'link-2-off', title: 'This link is incomplete', text: 'The verification code is missing. Open the link from your email again, or copy the full address into your browser.', actions: [{ t: 'Go to log in', secondary: true }] } }
|
||||
] },
|
||||
{ label: 'Forgot password', title: 'Forgot password', route: '/register/reset/request', api: 'POST /v1/auth/password-reset', note: 'The sent state reads the same whether or not the email exists, so the page doesn\'t reveal which emails have accounts.', states: [
|
||||
{ ...reqBase, name: 'Default', trigger: 'From "Forgot password?" on log in.', fields: [E()] },
|
||||
{ ...reqBase, name: 'Validation error', trigger: 'Invalid email on submit. Nothing is sent.', fields: [E({ value: 'marta@renew', err: 'Enter a full email address, like name@example.com.' })] },
|
||||
{ ...reqBase, name: 'Submitting', trigger: 'Request in flight.', fields: [E({ value: 'marta@renew.example' })], submit: { t: 'Sending…', loading: true } },
|
||||
{ name: 'Sent', trigger: 'Any 200, whether or not the account exists.', result: { tone: 'success', icon: 'mail-check', title: 'Check your email', text: 'If an account exists for that email, a password reset link has been sent.', note: 'The link expires in 1 hour.', actions: [{ t: 'Back to log in', secondary: true }] } },
|
||||
{ ...reqBase, name: 'Too many attempts (429)', trigger: 'Rate limit with Retry-After.', notice: { tone: 'info', icon: 'timer', title: 'Too many requests', text: 'Wait a moment before asking for another link.' }, fields: [E({ value: 'marta@renew.example' })], submit: { t: 'Try again in 0:58', disabled: true }, pending: true },
|
||||
{ ...reqBase, name: 'Server error', trigger: '500 or no response.', notice: { tone: 'error', icon: 'circle-x', title: 'Couldn\'t send the link', text: 'Check your connection and try again.' }, fields: [E({ value: 'marta@renew.example' })] }
|
||||
] },
|
||||
{ label: 'Reset password', title: 'Choose a new password', route: '/register/reset/validate?c=CODE&email=EMAIL', api: 'POST /v1/auth/password-reset/confirm', note: 'Opened from the reset email. The email comes from the URL and is read-only. The confirm field is checked only in the browser.', states: [
|
||||
{ ...rv, name: 'Default', trigger: 'Both parameters are present.', fields: rvF({}, {}, ['unmet', 'unmet']) },
|
||||
{ ...rv, name: 'Too short', trigger: 'On submit, with fewer than 8 characters.', fields: rvF({ value: 'lime', err: '' }, { value: 'lime' }, ['err', 'met']) },
|
||||
{ ...rv, name: 'Mismatch', trigger: 'On blur of the confirm field, or on submit.', fields: rvF({ value: 'limewash2026' }, { value: 'limewash2025', err: 'The passwords don\'t match.' }, ['met', 'err']) },
|
||||
{ ...rv, name: 'Submitting', trigger: 'Request in flight.', fields: rvF({ value: 'limewash2026' }, { value: 'limewash2026' }, ['met', 'met']), submit: { t: 'Changing password…', loading: true } },
|
||||
{ ...login, name: 'Success', trigger: '200 → /login?reason=password-changed.', notice: { tone: 'success', icon: 'circle-check', title: 'Password changed', text: 'Log in with your new password.' }, fields: loginF({}, {}) },
|
||||
{ name: 'Invalid or expired (403)', trigger: 'The code is wrong, used, or older than 1 hour.', result: expired },
|
||||
{ name: 'Missing parameters', trigger: 'The link has no c or no email. No request is made.', result: { tone: 'error', icon: 'link-2-off', title: 'This link is incomplete', text: 'Part of the reset link is missing. Open it from your email again, or request a new one.', actions: [{ t: 'Request a new link' }] } }
|
||||
] }
|
||||
]
|
||||
}
|
||||
renderVals() {
|
||||
const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
|
||||
const on = this.state.mode === k
|
||||
return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
|
||||
})
|
||||
return { rootRef: this.rootRef, modes, groups: this.groups() }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<link rel="icon" href="brand/favicon.svg">
|
||||
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap" rel="stylesheet">
|
||||
<style>body{margin:0;font-family:'IBM Plex Sans',sans-serif;font-size:13px;line-height:20px}*{box-sizing:border-box}a{color:inherit;text-underline-offset:3px}a:hover{opacity:.8}code{font-family:'IBM Plex Mono',monospace;font-size:12px}</style>
|
||||
</helmet>
|
||||
<div ref="{{ rootRef }}" data-screen-label="Back-office screens" style="--ui-bg:#ffffff;--ui-bg-muted:#fafafa;--ui-bg-elevated:#f3f2f0;--ui-bg-accented:#e6e4e0;--ui-bg-inverted:#111111;--ui-text-dimmed:#999999;--ui-text-muted:#666666;--ui-text-toned:#444444;--ui-text:#222222;--ui-text-highlighted:#111111;--ui-text-inverted:#ffffff;--ui-border:#e6e4e0;--ui-border-muted:#f3f2f0;--ui-border-accented:#8a8783;--ui-primary:#111111;--ui-secondary:#635643;--ui-success:#315b33;--ui-info:#34536d;--ui-warning:#6c4700;--ui-error:#882c21;--rc-sand:#e8dfd1;--rc-success-soft:#eaefea;--rc-info-soft:#ebeef0;--rc-warning-soft:#f0ede6;--rc-error-soft:#f3eae9;--rc-overlay:rgb(10 10 10 / 0.4);--rc-shadow-pop:0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);--rc-shadow-modal:0 16px 48px rgb(17 17 17 / 0.18);--rc-canvas:#ecebe8;background:var(--rc-canvas);color:var(--ui-text);padding:64px;display:flex;flex-direction:column;gap:72px;width:max-content;min-width:100%">
|
||||
|
||||
<div style="display:flex;align-items:flex-end;gap:32px;max-width:1400px">
|
||||
<div style="flex:1;display:flex;flex-direction:column;gap:10px">
|
||||
<h1 style="margin:0;font:600 36px/44px 'IBM Plex Sans',sans-serif;letter-spacing:-0.02em;color:var(--ui-text-highlighted)">Screens: back-office and global</h1>
|
||||
<p style="margin:0;max-width:880px;font-size:16px;line-height:26px;color:var(--ui-text-toned);text-wrap:pretty">Every state of the verified-only routes, plus the global states, at 1440 px (shown at 50%) and 390 px (shown at 75%). The theme switch shows all of them in dark mode. Session expiry and unverified redirects end on screens from <a href="RenewCMS Screens Auth.dc.html">the auth board</a>.</p>
|
||||
</div>
|
||||
<div role="radiogroup" aria-label="Theme" style="display:flex;border:1px solid var(--ui-border-accented);background:var(--ui-bg)">
|
||||
<sc-for list="{{ modes }}" as="m" hint-placeholder-count="3">
|
||||
<button role="radio" aria-checked="{{ m.on }}" onClick="{{ m.pick }}" style="all:unset;cursor:pointer;height:36px;padding:0 14px;display:flex;align-items:center;font-weight:500;font-size:14px;background:{{ m.bg }};color:{{ m.fg }}" style-focus-visible="outline:2px solid var(--ui-primary);outline-offset:2px">{{ m.label }}</button>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="7">
|
||||
<section data-screen-label="{{ g.label }}" style="display:flex;flex-direction:column;gap:28px">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;max-width:1100px">
|
||||
<h2 style="margin:0;font:600 28px/36px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ g.title }}</h2>
|
||||
<div style="display:flex;gap:16px;flex-wrap:wrap;font:400 14px/22px 'IBM Plex Mono',monospace;color:var(--ui-text-toned)"><span>{{ g.route }}</span><span style="color:var(--ui-text-muted)">{{ g.api }}</span></div>
|
||||
<sc-if value="{{ g.note }}"><p style="margin:4px 0 0;font-size:15px;line-height:24px;color:var(--ui-text-toned);text-wrap:pretty">{{ g.note }}</p></sc-if>
|
||||
</div>
|
||||
<div style="display:flex;flex-wrap:wrap;gap:40px;align-items:flex-start">
|
||||
<sc-for list="{{ g.states }}" as="st" hint-placeholder-count="4">
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;flex-direction:column;gap:2px;max-width:1040px"><span style="font:600 16px/24px 'IBM Plex Sans',sans-serif;color:var(--ui-text-highlighted)">{{ st.name }}</span><span style="font-size:13px;color:var(--ui-text-muted)">{{ st.trigger }}</span></div>
|
||||
<div style="display:flex;gap:24px;align-items:flex-start">
|
||||
<div style="width:720px;height:450px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:1440px;height:900px;zoom:0.5"><dc-import name="AppFrame" s="{{ st }}" mobile="{{ false }}" hint-size="1440px,900px"></dc-import></div></div>
|
||||
<div style="width:293px;height:633px;overflow:hidden;border:1px solid var(--ui-border);flex-shrink:0"><div style="width:390px;height:844px;zoom:0.75"><dc-import name="AppFrame" s="{{ st.m }}" mobile="{{ true }}" hint-size="390px,844px"></dc-import></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"theme":{"editor":"enum","options":["system","light","dark"],"default":"light","tsType":"'system' | 'light' | 'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { mode: this.props.theme ?? 'light' }
|
||||
rootRef = React.createRef()
|
||||
light = { '--ui-bg': '#ffffff', '--ui-bg-muted': '#fafafa', '--ui-bg-elevated': '#f3f2f0', '--ui-bg-accented': '#e6e4e0', '--ui-bg-inverted': '#111111', '--ui-text-dimmed': '#999999', '--ui-text-muted': '#666666', '--ui-text-toned': '#444444', '--ui-text': '#222222', '--ui-text-highlighted': '#111111', '--ui-text-inverted': '#ffffff', '--ui-border': '#e6e4e0', '--ui-border-muted': '#f3f2f0', '--ui-border-accented': '#8a8783', '--ui-primary': '#111111', '--ui-secondary': '#635643', '--ui-success': '#315b33', '--ui-info': '#34536d', '--ui-warning': '#6c4700', '--ui-error': '#882c21', '--rc-sand': '#e8dfd1', '--rc-success-soft': '#eaefea', '--rc-info-soft': '#ebeef0', '--rc-warning-soft': '#f0ede6', '--rc-error-soft': '#f3eae9', '--rc-overlay': 'rgb(10 10 10 / 0.4)', '--rc-shadow-pop': '0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06)', '--rc-shadow-modal': '0 16px 48px rgb(17 17 17 / 0.18)', '--rc-canvas': '#ecebe8' }
|
||||
dark = { '--ui-bg': '#111111', '--ui-bg-muted': '#0a0a0a', '--ui-bg-elevated': '#1a1a1a', '--ui-bg-accented': '#222222', '--ui-bg-inverted': '#fafafa', '--ui-text-dimmed': '#666666', '--ui-text-muted': '#999999', '--ui-text-toned': '#cfccc7', '--ui-text': '#e6e4e0', '--ui-text-highlighted': '#fafafa', '--ui-text-inverted': '#111111', '--ui-border': '#333333', '--ui-border-muted': '#222222', '--ui-border-accented': '#666666', '--ui-primary': '#fafafa', '--ui-secondary': '#d4c5b0', '--ui-success': '#a3caa3', '--ui-info': '#a5c2db', '--ui-warning': '#dfb67d', '--ui-error': '#fba394', '--rc-sand': '#d4c5b0', '--rc-success-soft': '#1f241f', '--rc-info-soft': '#202428', '--rc-warning-soft': '#2a251e', '--rc-error-soft': '#2c201f', '--rc-overlay': 'rgb(0 0 0 / 0.6)', '--rc-shadow-pop': '0 4px 16px rgb(0 0 0 / 0.5)', '--rc-shadow-modal': '0 16px 48px rgb(0 0 0 / 0.6)', '--rc-canvas': '#1c1c1c' }
|
||||
resolved() {
|
||||
if (this.state.mode === 'system') return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
return this.state.mode
|
||||
}
|
||||
apply() {
|
||||
const el = this.rootRef.current
|
||||
if (!el) return
|
||||
const vars = this.resolved() === 'dark' ? this.dark : this.light
|
||||
for (const k in vars) el.style.setProperty(k, vars[k])
|
||||
document.body.style.background = vars['--rc-canvas']
|
||||
}
|
||||
componentDidMount() { this.apply() }
|
||||
componentDidUpdate(p) {
|
||||
if (p.theme !== this.props.theme && this.props.theme) this.setState({ mode: this.props.theme })
|
||||
this.apply()
|
||||
}
|
||||
groups() {
|
||||
const base = [
|
||||
{ t: 'How we price a bathroom renovation', on: true, c: '12 Mar 2026', u: '2 hours ago' },
|
||||
{ t: 'Choosing lime plaster for old stone walls', on: false, c: '9 Sep 2026', u: 'Yesterday' },
|
||||
{ t: 'Before and after: the Rue Verte kitchen', on: true, c: '28 Aug 2026', u: '3 days ago' },
|
||||
{ t: 'Winter checklist for timber windows', on: false, c: '2 Sep 2026', u: '5 days ago' },
|
||||
{ t: 'Why we reuse original floorboards', on: true, c: '14 Jun 2026', u: '18 Aug 2026' },
|
||||
{ t: 'Our first passive-house retrofit', on: true, c: '3 Apr 2026', u: '2 Jul 2026' }
|
||||
]
|
||||
const rows = (patch = {}) => base.map((r, i) => patch[i] ? { ...r, ...patch[i] } : r)
|
||||
const T = (tone, icon, title, text, action) => ({ tone, icon, title, text, action })
|
||||
const withM = (st, mo = {}) => ({ ...st, m: { ...st, ...mo } })
|
||||
const home = { kind: 'home', nav: 'home', crumbs: ['Home'], mTitle: 'Home', mAction: 'plus' }
|
||||
const stats = [{ n: '6', l: 'articles' }, { n: '4', l: 'online' }, { n: '2', l: 'drafts' }]
|
||||
const recent = base.slice(0, 5).map(r => ({ ...r, draft: !r.on }))
|
||||
const list = { kind: 'articles', nav: 'articles', crumbs: ['Articles'], mTitle: 'Articles' }
|
||||
const L = (o = {}) => ({ ...list, ...o, list: { rows: rows(), ...(o.list || {}) } })
|
||||
const nm = (o = {}) => ({ title: 'New article', desc: 'It\'s saved as a draft. Titles can\'t be changed later, so check it now.', close: true, cancel: 'Cancel', confirm: 'Create draft', wide: true, ...o, fields: o.fields || [{ label: 'Title', ph: 'e.g. Choosing tiles for a small bathroom', count: '0 / 200', help: '3 to 200 characters.', focus: true }, { label: 'First paragraph', ph: 'Start writing. You\'ll continue in the editor.', area: true, help: 'You can format it and add images in the editor.' }] })
|
||||
const nf = (title, body, extra = {}) => [{ label: 'Title', value: title, count: [...title].length + ' / 200', ...(extra.t || {}) }, { label: 'First paragraph', value: body, area: true, ...(extra.b || {}) }]
|
||||
const ed = { kind: 'editor', nav: 'articles', crumbs: ['Articles', 'How we price a bathroom renovation'], mTitle: 'Edit article', mLead: 'arrow-left', mAction: 'ellipsis' }
|
||||
const E = (o = {}, extra = {}) => withM({ ...ed, ...extra, ed: { status: 'draft', save: 'saved', ...o } })
|
||||
const del = (loading, err) => ({ title: 'Delete this article?', desc: '"Winter checklist for timber windows" and its 3 images will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: loading ? 'Deleting…' : 'Delete article', tone: 'danger', loading, notice: err })
|
||||
return [
|
||||
{ label: 'Boot', title: 'App boot', route: 'any route, first load', api: 'GET /v1/auth/me (pending)', note: 'While the session is checked, the shell renders with skeletons, never a spinner. The possible outcomes are: 200 with a verified user, which renders the route; 200 with an unverified user, which goes to /register/pending; and 401, which goes to /login?redirect=<path>. Public routes skip this check.', states: [
|
||||
withM({ ...home, name: 'Checking session', trigger: 'The first paint on any back-office URL, and usually visible for well under a second.', boot: true })
|
||||
] },
|
||||
{ label: 'Home', title: 'Home', route: '/home', api: 'GET /v1/article/', note: 'The counts come from the list, so there\'s no separate endpoint. The five most recently updated articles link to the editor.', states: [
|
||||
withM({ ...home, name: 'Default', trigger: 'The articles loaded.', home: { sub: 'Here\'s where things stand on your site.', stats, recent } }),
|
||||
withM({ ...home, name: 'Loading', trigger: 'The list request is in flight. Skeletons appear after 150 ms.', home: { sub: 'Here\'s where things stand on your site.', stats: stats.map(() => ({ skel: true })), recent: Array.from({ length: 5 }, () => ({ skel: true })) } }),
|
||||
withM({ ...home, name: 'Empty, first run', trigger: 'Zero articles: a single call to action, and no stats.', home: { sub: 'Welcome to RenewCMS.', empty: true } }),
|
||||
withM({ ...home, name: 'Error', trigger: 'A 500 or network failure on the list request.', home: { sub: 'Here\'s where things stand on your site.', error: true } })
|
||||
] },
|
||||
{ label: 'Articles', title: 'Articles', route: '/article', api: 'GET /v1/article/ · PATCH …/publish · PATCH …/unpublish · DELETE /v1/article/{id}', note: 'Rows update when the server responds, not optimistically. Search, tab and sort are stored in the query string.', states: [
|
||||
withM({ ...L(), name: 'Default', trigger: 'The list loaded, sorted by last updated.' }),
|
||||
withM({ ...L({ list: { rows: rows({ 3: { menu: true } }) } }), name: 'Row menu open', trigger: 'The ellipsis button, or Enter on the focused menu button.' }),
|
||||
withM({ ...L({ list: { loading: true } }), name: 'Loading', trigger: 'The first load, or a retry.' }),
|
||||
withM({ ...L({ list: { counts: [0, 0, 0], empty: { icon: 'file-text', title: 'No articles yet', text: 'Write your first one. It stays a draft until you publish it.', action: 'New article', primary: true } } }), name: 'Empty', trigger: 'The list is empty.' }),
|
||||
withM({ ...L({ list: { q: 'tiles', empty: { icon: 'search', title: 'No articles match "tiles"', text: 'Check the spelling, or search for a shorter part of the title.', action: 'Clear search' } } }), name: 'No results', trigger: 'Search matched nothing. The tab counts still show the full list.' }),
|
||||
withM({ ...L({ list: { tab: 2, counts: [4, 4, 0], empty: { icon: 'pencil-line', title: 'No drafts', text: 'Everything you\'ve written is online.', action: 'New article' } } }), name: 'No drafts', trigger: 'Drafts tab with nothing in it. The "Online" tab has an equivalent "Nothing is online yet" state.' }),
|
||||
withM({ ...L({ list: { rows: rows({ 3: { busy: 'Publishing…' } }) } }), name: 'Action in progress', trigger: 'Publish chosen from the row menu. That row is disabled.' }),
|
||||
withM({ ...L({ list: { rows: rows({ 3: { on: true, u: 'Just now' } }) }, toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.')] }), name: 'Published', trigger: '200: the row updates in place and a toast confirms.' }),
|
||||
withM({ ...L({ toasts: [T('error', 'circle-x', 'Couldn\'t unpublish', 'The server didn\'t respond. Nothing changed.', 'Retry')] }), name: 'Action failed', trigger: 'A 500 or network error. The row stays as it was, and the toast stays until retried or dismissed.' }),
|
||||
withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 1) }, toasts: [T('info', 'info', 'That article no longer exists', 'It was deleted somewhere else, so we removed it from the list.')] }), name: 'Row vanished (404)', trigger: 'Any row action gets a 404.' }),
|
||||
withM({ ...L({ modal: del(false) }), name: 'Delete: confirm', trigger: 'Delete… from the row menu.' }),
|
||||
withM({ ...L({ modal: del(true) }), name: 'Delete: in progress', trigger: 'DELETE in flight. The dialog can\'t be dismissed.' }),
|
||||
withM({ ...L({ modal: del(false, 'Couldn\'t delete the article, so it\'s still there. Try again in a moment.') }), name: 'Delete: failed', trigger: '500, a partial failure where the article is kept. The error shows inside the dialog.' }),
|
||||
withM({ ...L({ list: { counts: [5, 4, 1], rows: rows().filter((r, i) => i !== 3) }, toasts: [T('success', 'circle-check', 'Article deleted', '"Winter checklist for timber windows" and its images are gone.')] }), name: 'Deleted', trigger: '204: the row is removed and focus moves to the next row. This is also where a delete from the editor ends up.' })
|
||||
] },
|
||||
{ label: 'New article', title: 'New article', route: 'modal from anywhere · /article/new', api: 'POST /v1/article/', note: 'Recommendation: a modal. It needs two fields, and keeping the page underneath means cancelling costs nothing. /article/new opens the same modal over the article list, so it can be linked to and the back button closes it. A successful create always makes a draft and goes to the editor.', states: [
|
||||
withM({ ...L({ modal: nm() }), name: 'Default', trigger: '"New article" from Home, Articles or the empty state.' }),
|
||||
withM({ ...L({ modal: nm({ fields: nf('Ti', '', { t: { err: 'Use at least 3 characters.', countErr: true }, b: { err: 'Add a first paragraph. It can be a single sentence.' } }) }) }), name: 'Validation', trigger: 'On submit or blur. Nothing is sent.' }),
|
||||
withM({ ...L({ modal: nm({ loading: true, confirm: 'Creating…', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.') }) }), name: 'Submitting', trigger: 'Request in flight. Fields are disabled and the dialog can\'t be dismissed.' }),
|
||||
withM({ ...L({ modal: nm({ notice: 'Something in the form isn\'t valid. Check the highlighted fields.', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.', { t: { err: 'Check this title and try again.' } }) }) }), name: 'Title rejected (400)', trigger: 'A server 400 that got past the browser checks. The raw error isn\'t shown.' }),
|
||||
withM({ ...L({ modal: nm({ notice: 'Couldn\'t create the article. Your text is still here. Try again in a moment.', fields: nf('Choosing tiles for a small bathroom', 'Small rooms show every grout line, so we start with the floor.') }) }), name: 'Error', trigger: '500 or network failure.' })
|
||||
] },
|
||||
{ label: 'Editor', title: 'Editor', route: '/article/:id/edit', api: 'GET /v1/article/{id} · PATCH /v1/article/{id} · PATCH …/publish|unpublish · POST …/image · DELETE', note: 'On mobile, Save and Publish sit in a sticky bottom bar and the details panel opens as a slideover. A session expiry mid-edit keeps the draft in sessionStorage and goes to /login?redirect=/article/12/edit. After logging in, the editor restores the draft and shows "Unsaved changes".', states: [
|
||||
E({ loading: true }, { name: 'Loading', trigger: 'GET in flight. Skeletons for the title, content and details.' }),
|
||||
E({}, { name: 'Saved', trigger: 'Just opened or just saved. Save is disabled.' }),
|
||||
E({ save: 'dirty' }, { name: 'Unsaved changes', trigger: 'Any edit. Publish becomes "Save and publish". Leaving asks for confirmation.' }),
|
||||
E({ save: 'saving' }, { name: 'Saving', trigger: 'Save, or Ctrl/⌘ S.' }),
|
||||
E({ save: 'error' }, { name: 'Save failed', trigger: '500 or network failure. The changes are kept and Retry resends them.' }),
|
||||
E({ save: 'dirty', len: 9240 }, { name: 'Near the limit', trigger: '90% of 10 000 HTML characters.' }),
|
||||
E({ save: 'dirty', len: 10214 }, { name: 'Too long', trigger: 'Over 10 000. Save and Publish are disabled until it\'s shorter.' }),
|
||||
E({ preview: true }, { name: 'Preview', trigger: 'The Preview switch. Shows the title and body in the content scale, the way a public site might.' }),
|
||||
E({ save: 'dirty' }, { name: 'Upload: choose', trigger: 'The image button in the toolbar, or a file dropped on the editor.', modal: { title: 'Add an image', close: true, upload: { state: 'idle' }, cancel: 'Cancel' } }),
|
||||
E({ save: 'dirty' }, { name: 'Upload: in progress', trigger: 'A valid file is uploading. Closing the dialog cancels the upload.', modal: { title: 'Add an image', close: true, upload: { state: 'uploading' }, cancel: 'Cancel upload' } }),
|
||||
E({ save: 'dirty' }, { name: 'Upload: rejected', trigger: 'Checked in the browser, so nothing is sent.', modal: { title: 'Add an image', close: true, upload: { state: 'rejected' }, cancel: 'Cancel', confirm: 'Choose another file' } }),
|
||||
E({ save: 'dirty', image: true }, { name: 'Upload: inserted', trigger: '201: the image goes in at the cursor, and the article now has unsaved changes.', toasts: [T('success', 'circle-check', 'Image added', 'Save to keep it in the article.')] }),
|
||||
E({ save: 'saving', pending: 'Saving and publishing…' }, { name: 'Publishing', trigger: '"Save and publish": the PATCH body, then the publish request.' }),
|
||||
E({ status: 'online' }, { name: 'Published', trigger: '200: the badge flips, Unpublish is offered and a toast confirms.', toasts: [T('success', 'circle-check', 'Article published', '"How we price a bathroom renovation" is now online.')] }),
|
||||
E({ status: 'online', pending: 'Unpublishing…' }, { name: 'Unpublishing', trigger: 'Unpublish doesn\'t save pending edits.' }),
|
||||
E({}, { name: 'Delete: confirm', trigger: 'Delete… from the overflow menu. After a 204, it goes to /article with the "Article deleted" toast.', modal: { title: 'Delete this article?', desc: '"How we price a bathroom renovation" and its 3 images will be deleted. This can\'t be undone.', cancel: 'Cancel', confirm: 'Delete article', tone: 'danger' } }),
|
||||
E({ save: 'dirty' }, { name: 'Leave with unsaved changes', trigger: 'Back, a nav link or closing the tab.', modal: { title: 'Leave without saving?', desc: 'Your changes to "How we price a bathroom renovation" haven\'t been saved.', cancel: 'Discard changes', confirm: 'Keep editing' } }),
|
||||
E({ save: 'offline' }, { name: 'Offline', trigger: 'The connection dropped. Writing continues, and Save and Publish wait.', offline: true }),
|
||||
E({ notfound: true }, { name: 'Not found (404)', trigger: 'Unknown id, or the article was deleted elsewhere.' })
|
||||
] },
|
||||
{ label: 'Integration', title: 'Connect your website', route: '/integration', api: 'none (static)', note: 'Written for a developer. The base URL is window.location.origin.', states: [
|
||||
withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', name: 'Default', trigger: 'Opened from the sidebar or the Home card.' }),
|
||||
withM({ kind: 'integration', nav: 'integration', crumbs: ['Integration'], mTitle: 'Integration', copied: true, name: 'Copied', trigger: 'The base URL was copied. The button reads "Copied" for 2 s and this is announced.' })
|
||||
] },
|
||||
{ label: 'Global', title: 'Global states', route: 'any route', api: '', note: 'A 401 on any back-office call redirects to /login?redirect=<path>&reason=expired (see "Session expired" on the auth board). A 403 from an unverified account redirects to /register/pending. A 429 appears only on log in and password reset. Toasts sit bottom right on desktop and bottom center on mobile, at most 3 at once. Success and info last 5 s; errors stay until dismissed.', states: [
|
||||
withM({ kind: 'error', nav: '', crumbs: ['Not found'], mTitle: 'Not found', name: '404 inside the shell', trigger: 'An unknown route while logged in. Logged out, the same content appears inside AuthShell.', err: { code: '404', title: 'Page not found', text: 'The link may be mistyped, or the page may have moved.', primary: 'Go to Home', secondary: 'All articles' } }),
|
||||
withM({ kind: 'error', nav: 'home', crumbs: ['Home'], mTitle: 'Home', name: 'Generic error', trigger: 'An unexpected error while rendering a route.', err: { code: 'Error', title: 'Something went wrong', text: 'This page couldn\'t load. Your saved work is safe. Try again, and if it keeps happening, restart the RenewCMS server.', primary: 'Try again', secondary: 'Go to Home' } }),
|
||||
withM({ ...L({ offline: true }), name: 'Offline banner', trigger: 'navigator.onLine is false. The banner is shown on every back-office page.' }),
|
||||
withM({ ...L({ toasts: [T('success', 'circle-check', 'Article published', '"Winter checklist for timber windows" is now online.'), T('info', 'info', 'That article no longer exists', 'It was deleted somewhere else, so we removed it from the list.'), T('error', 'circle-x', 'Couldn\'t unpublish', 'The server didn\'t respond. Nothing changed.', 'Retry')] }), name: 'Toast stack', trigger: 'Three at most, newest at the bottom. A fourth pushes out the oldest non-error toast.' })
|
||||
] }
|
||||
]
|
||||
}
|
||||
renderVals() {
|
||||
const modes = [['system', 'System'], ['light', 'Light'], ['dark', 'Dark']].map(([k, label]) => {
|
||||
const on = this.state.mode === k
|
||||
return { label, on, bg: on ? 'var(--ui-primary)' : 'transparent', fg: on ? 'var(--ui-bg)' : 'var(--ui-text-toned)', pick: () => this.setState({ mode: k }) }
|
||||
})
|
||||
return { rootRef: this.rootRef, modes, groups: this.groups() }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" shape-rendering="crispEdges" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTplOTQ3NWYzYi1iMzk1LTQwYTItYTc0NC02OTBiNWNhN2ExYmEAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaBZb8xjia8MHL36GYqgFh9IAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDphMzk4M2EzMy03MTA2LTQwODctYjI1Yy05ZDBjMDgyNTBhNWNscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoZLnQVKFQmfShOH339JG7cQAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggm30c/9ae4hGpd7ZqF9l6g7kujDirGaXyTi536jB+bcekZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaLY9Kv67+CqoKTGwY2CZrToAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCB5yyMJKOtdrWszMUivonxA1KFo3L7r2RCA4Mx1H0/3uWRuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBiYZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmU5NDc1ZjNiLWIzOTUtNDBhMi1hNzQ0LTY5MGI1Y2E3YTFiYS9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjViZTQwMjZjLWM3ZjctNDUzNC1hYmFiLTY3OTc0OWZjNGFkY3JjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCCbfRz/1p7iEal3tmoX2XqDuS6MOKsZpfJOLnfqMH5tx6JjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggM1R3FsRboXyA4rm7pAVOcC/HIi2cgqmrpa/mZrSD7n6iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggoD1kSgBM7/QspOsFvy5FPeDatbpPPR1Z+79+Ox5QvZZ0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAALine truncated
|
||||
|
After Width: | Height: | Size: 7.9 KiB |
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
<title>Reset your password</title>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; }
|
||||
table { border-collapse: collapse; }
|
||||
a { color: #111111; }
|
||||
@media (max-width: 620px) {
|
||||
.rc-card { padding: 28px 20px !important; }
|
||||
.rc-btn a { display: block !important; }
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.rc-bg { background-color: #0a0a0a !important; }
|
||||
.rc-card { background-color: #111111 !important; border-color: #333333 !important; }
|
||||
.rc-h1, .rc-word { color: #fafafa !important; }
|
||||
.rc-text { color: #e6e4e0 !important; }
|
||||
.rc-muted { color: #999999 !important; }
|
||||
.rc-mark { border: 1px solid #444444 !important; }
|
||||
.rc-btn td { background-color: #fafafa !important; }
|
||||
.rc-btn a { background-color: #fafafa !important; color: #111111 !important; border-color: #fafafa !important; }
|
||||
.rc-url { color: #e6e4e0 !important; background-color: #1a1a1a !important; }
|
||||
.rc-rule { border-color: #333333 !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="rc-bg" style="margin:0;padding:0;background-color:#fafafa;">
|
||||
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">Choose a new password for RenewCMS. The link expires in 1 hour.</div>
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="rc-bg" style="background-color:#fafafa;">
|
||||
<tr>
|
||||
<td align="center" style="padding:40px 12px;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;">
|
||||
<tr>
|
||||
<td style="padding:0 0 20px 0;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="rc-mark" width="32" height="32" align="center" valign="middle" bgcolor="#111111" style="width:32px;height:32px;background-color:#111111;color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:bold;line-height:32px;">R</td>
|
||||
<td class="rc-word" style="padding-left:10px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:17px;font-weight:600;color:#111111;">RenewCMS</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="rc-card" style="background-color:#ffffff;border:1px solid #e6e4e0;padding:40px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;">
|
||||
<h1 class="rc-h1" style="margin:0 0 16px 0;font-size:24px;line-height:32px;font-weight:600;color:#111111;">Reset your password</h1>
|
||||
<p class="rc-text" style="margin:0 0 28px 0;font-size:16px;line-height:26px;color:#222222;">Someone asked to reset the password for the RenewCMS account that uses {{.Email}} at {{.Host}}.</p>
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="rc-btn">
|
||||
<tr>
|
||||
<td bgcolor="#111111" style="background-color:#111111;">
|
||||
<a href="{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}" target="_blank" style="display:inline-block;padding:14px 24px;border:1px solid #111111;background-color:#111111;color:#ffffff;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:20px;text-decoration:none;text-align:center;">Choose a new password</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="rc-muted" style="margin:16px 0 0 0;font-size:14px;line-height:22px;color:#666666;">This link expires in 1 hour and works once.</p>
|
||||
<p class="rc-muted" style="margin:28px 0 8px 0;font-size:14px;line-height:22px;color:#666666;">If the button doesn't work, copy this address into your browser:</p>
|
||||
<p class="rc-url" style="margin:0;padding:10px 12px;background-color:#f3f2f0;font-family:'IBM Plex Mono',Menlo,Consolas,monospace;font-size:13px;line-height:20px;color:#222222;word-break:break-all;">{{.Host}}/register/reset/validate?c={{.VerificationCode}}&email={{.Email}}</p>
|
||||
<p class="rc-text rc-rule" style="margin:28px 0 0 0;padding-top:20px;border-top:1px solid #e6e4e0;font-size:14px;line-height:22px;color:#222222;">If this wasn't you, ignore this email; nothing will change.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="rc-muted" style="padding:20px 0 0 0;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;color:#666666;">RenewCMS · {{.Host}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,72 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="color-scheme" content="light dark">
|
||||
<meta name="supported-color-schemes" content="light dark">
|
||||
<title>Verify your account</title>
|
||||
<style>
|
||||
body { margin: 0; padding: 0; width: 100%; -webkit-text-size-adjust: 100%; }
|
||||
table { border-collapse: collapse; }
|
||||
a { color: #111111; }
|
||||
@media (max-width: 620px) {
|
||||
.rc-card { padding: 28px 20px !important; }
|
||||
.rc-btn a { display: block !important; }
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.rc-bg { background-color: #0a0a0a !important; }
|
||||
.rc-card { background-color: #111111 !important; border-color: #333333 !important; }
|
||||
.rc-h1, .rc-word { color: #fafafa !important; }
|
||||
.rc-text { color: #e6e4e0 !important; }
|
||||
.rc-muted { color: #999999 !important; }
|
||||
.rc-mark { border: 1px solid #444444 !important; }
|
||||
.rc-btn td { background-color: #fafafa !important; }
|
||||
.rc-btn a { background-color: #fafafa !important; color: #111111 !important; border-color: #fafafa !important; }
|
||||
.rc-url { color: #e6e4e0 !important; background-color: #1a1a1a !important; }
|
||||
.rc-rule { border-color: #333333 !important; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="rc-bg" style="margin:0;padding:0;background-color:#fafafa;">
|
||||
<div style="display:none;max-height:0;overflow:hidden;opacity:0;color:transparent;">Confirm your email to finish setting up RenewCMS. The link expires in 2 hours.</div>
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="rc-bg" style="background-color:#fafafa;">
|
||||
<tr>
|
||||
<td align="center" style="padding:40px 12px;">
|
||||
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="max-width:600px;">
|
||||
<tr>
|
||||
<td style="padding:0 0 20px 0;">
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
|
||||
<tr>
|
||||
<td class="rc-mark" width="32" height="32" align="center" valign="middle" bgcolor="#111111" style="width:32px;height:32px;background-color:#111111;color:#ffffff;font-family:Arial,Helvetica,sans-serif;font-size:19px;font-weight:bold;line-height:32px;">R</td>
|
||||
<td class="rc-word" style="padding-left:10px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:17px;font-weight:600;color:#111111;">RenewCMS</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="rc-card" style="background-color:#ffffff;border:1px solid #e6e4e0;padding:40px;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;">
|
||||
<h1 class="rc-h1" style="margin:0 0 16px 0;font-size:24px;line-height:32px;font-weight:600;color:#111111;">Verify your account</h1>
|
||||
<p class="rc-text" style="margin:0 0 28px 0;font-size:16px;line-height:26px;color:#222222;">Someone, hopefully you, created the owner account for RenewCMS at {{.Host}}. Verify this email address to finish setting it up.</p>
|
||||
<table role="presentation" cellpadding="0" cellspacing="0" border="0" class="rc-btn">
|
||||
<tr>
|
||||
<td bgcolor="#111111" style="background-color:#111111;">
|
||||
<a href="{{.Host}}/register/validate?c={{.VerificationCode}}" target="_blank" style="display:inline-block;padding:14px 24px;border:1px solid #111111;background-color:#111111;color:#ffffff;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:16px;font-weight:600;line-height:20px;text-decoration:none;text-align:center;">Verify my account</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<p class="rc-muted" style="margin:16px 0 0 0;font-size:14px;line-height:22px;color:#666666;">This link expires in 2 hours.</p>
|
||||
<p class="rc-muted" style="margin:28px 0 8px 0;font-size:14px;line-height:22px;color:#666666;">If the button doesn't work, copy this address into your browser:</p>
|
||||
<p class="rc-url" style="margin:0;padding:10px 12px;background-color:#f3f2f0;font-family:'IBM Plex Mono',Menlo,Consolas,monospace;font-size:13px;line-height:20px;color:#222222;word-break:break-all;">{{.Host}}/register/validate?c={{.VerificationCode}}</p>
|
||||
<p class="rc-text rc-rule" style="margin:28px 0 0 0;padding-top:20px;border-top:1px solid #e6e4e0;font-size:14px;line-height:22px;color:#222222;">If this wasn't you, ignore this email; nothing will change.</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="rc-muted" style="padding:20px 0 0 0;font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif;font-size:12px;line-height:18px;color:#666666;">RenewCMS · {{.Host}}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,334 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');
|
||||
@import 'tailwindcss';
|
||||
@import '@nuxt/ui';
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
|
||||
--font-serif: 'Source Serif 4', ui-serif, Georgia, serif;
|
||||
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
|
||||
|
||||
--color-ink-50: #fafafa;
|
||||
--color-ink-100: #f2f2f2;
|
||||
--color-ink-200: #e5e5e5;
|
||||
--color-ink-300: #cccccc;
|
||||
--color-ink-400: #999999;
|
||||
--color-ink-500: #666666;
|
||||
--color-ink-600: #444444;
|
||||
--color-ink-700: #333333;
|
||||
--color-ink-800: #222222;
|
||||
--color-ink-900: #111111;
|
||||
--color-ink-950: #0a0a0a;
|
||||
|
||||
--color-chalk-50: #fafafa;
|
||||
--color-chalk-100: #f3f2f0;
|
||||
--color-chalk-200: #e6e4e0;
|
||||
--color-chalk-300: #cfccc7;
|
||||
--color-chalk-400: #999999;
|
||||
--color-chalk-450: #8a8783;
|
||||
--color-chalk-500: #666666;
|
||||
--color-chalk-600: #444444;
|
||||
--color-chalk-700: #333333;
|
||||
--color-chalk-800: #222222;
|
||||
--color-chalk-850: #1a1a1a;
|
||||
--color-chalk-900: #111111;
|
||||
--color-chalk-950: #0a0a0a;
|
||||
|
||||
--color-sand-50: #f7f4ef;
|
||||
--color-sand-100: #f0eae1;
|
||||
--color-sand-200: #e8dfd1;
|
||||
--color-sand-300: #d4c5b0;
|
||||
--color-sand-400: #bba88e;
|
||||
--color-sand-500: #9c8a70;
|
||||
--color-sand-600: #7d6d56;
|
||||
--color-sand-700: #635643;
|
||||
--color-sand-800: #4a4033;
|
||||
--color-sand-900: #322b23;
|
||||
--color-sand-950: #211c17;
|
||||
|
||||
--color-moss-50: #f0faf0;
|
||||
--color-moss-100: #e1f3e1;
|
||||
--color-moss-200: #c7e2c7;
|
||||
--color-moss-300: #a3caa3;
|
||||
--color-moss-400: #7fac7f;
|
||||
--color-moss-500: #5f8e60;
|
||||
--color-moss-600: #457347;
|
||||
--color-moss-700: #315b33;
|
||||
--color-moss-800: #1f4422;
|
||||
--color-moss-900: #143015;
|
||||
--color-moss-950: #081e0a;
|
||||
|
||||
--color-slate-50: #f0f8ff;
|
||||
--color-slate-100: #e2effa;
|
||||
--color-slate-200: #c8dcee;
|
||||
--color-slate-300: #a5c2db;
|
||||
--color-slate-400: #81a3c0;
|
||||
--color-slate-500: #6284a2;
|
||||
--color-slate-600: #486a86;
|
||||
--color-slate-700: #34536d;
|
||||
--color-slate-800: #223d53;
|
||||
--color-slate-900: #162b3c;
|
||||
--color-slate-950: #0a1a26;
|
||||
|
||||
--color-ochre-50: #fff5e8;
|
||||
--color-ochre-100: #fdead1;
|
||||
--color-ochre-200: #f1d4ad;
|
||||
--color-ochre-300: #dfb67d;
|
||||
--color-ochre-400: #c4954f;
|
||||
--color-ochre-500: #a67628;
|
||||
--color-ochre-600: #8a5b00;
|
||||
--color-ochre-700: #6c4700;
|
||||
--color-ochre-800: #503400;
|
||||
--color-ochre-900: #3a2400;
|
||||
--color-ochre-950: #241500;
|
||||
|
||||
--color-brick-50: #fef4f2;
|
||||
--color-brick-100: #ffe7e2;
|
||||
--color-brick-200: #ffcbc2;
|
||||
--color-brick-300: #fba394;
|
||||
--color-brick-400: #e37e6e;
|
||||
--color-brick-500: #c45d4e;
|
||||
--color-brick-600: #a54134;
|
||||
--color-brick-700: #882c21;
|
||||
--color-brick-800: #6a1a11;
|
||||
--color-brick-900: #4d0f08;
|
||||
--color-brick-950: #330503;
|
||||
|
||||
--text-xs: 0.75rem;
|
||||
--text-xs--line-height: 16px;
|
||||
--text-sm: 0.8125rem;
|
||||
--text-sm--line-height: 20px;
|
||||
--text-base: 0.875rem;
|
||||
--text-base--line-height: 22px;
|
||||
--text-lg: 1rem;
|
||||
--text-lg--line-height: 24px;
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: 28px;
|
||||
--text-2xl: 1.75rem;
|
||||
--text-2xl--line-height: 36px;
|
||||
|
||||
--breakpoint-xs: 22.5rem;
|
||||
--breakpoint-sm: 40rem;
|
||||
--breakpoint-md: 48rem;
|
||||
--breakpoint-lg: 64rem;
|
||||
--breakpoint-xl: 80rem;
|
||||
|
||||
--shadow-popover: 0 4px 16px rgb(17 17 17 / 0.08), 0 1px 2px rgb(17 17 17 / 0.06);
|
||||
--shadow-modal: 0 16px 48px rgb(17 17 17 / 0.18);
|
||||
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--ease-enter: cubic-bezier(0, 0, 0, 1);
|
||||
--ease-exit: cubic-bezier(0.4, 0, 1, 1);
|
||||
}
|
||||
|
||||
:root {
|
||||
--ui-radius: 0rem;
|
||||
--ui-header-height: 3rem;
|
||||
--ui-container: 72rem;
|
||||
--duration-fast: 120ms;
|
||||
--duration-base: 180ms;
|
||||
--duration-slow: 240ms;
|
||||
--z-sticky: 10;
|
||||
--z-sidebar: 20;
|
||||
--z-banner: 30;
|
||||
--z-popover: 40;
|
||||
--z-overlay: 50;
|
||||
--z-toast: 60;
|
||||
--z-tooltip: 70;
|
||||
--ui-bg: var(--color-white);
|
||||
--ui-bg-muted: var(--color-chalk-50);
|
||||
--ui-bg-elevated: var(--color-chalk-100);
|
||||
--ui-bg-accented: var(--color-chalk-200);
|
||||
--ui-bg-inverted: var(--color-chalk-900);
|
||||
--ui-text-dimmed: var(--color-chalk-400);
|
||||
--ui-text-muted: var(--color-chalk-500);
|
||||
--ui-text-toned: var(--color-chalk-600);
|
||||
--ui-text: var(--color-chalk-800);
|
||||
--ui-text-highlighted: var(--color-chalk-900);
|
||||
--ui-text-inverted: var(--color-white);
|
||||
--ui-border: var(--color-chalk-200);
|
||||
--ui-border-muted: var(--color-chalk-100);
|
||||
--ui-border-accented: var(--color-chalk-450);
|
||||
--ui-border-inverted: var(--color-chalk-900);
|
||||
--ui-primary: var(--ui-color-primary-900);
|
||||
--ui-secondary: var(--ui-color-secondary-700);
|
||||
--ui-success: var(--ui-color-success-700);
|
||||
--ui-info: var(--ui-color-info-700);
|
||||
--ui-warning: var(--ui-color-warning-700);
|
||||
--ui-error: var(--ui-color-error-700);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--ui-bg: var(--color-chalk-900);
|
||||
--ui-bg-muted: var(--color-chalk-950);
|
||||
--ui-bg-elevated: var(--color-chalk-850);
|
||||
--ui-bg-accented: var(--color-chalk-800);
|
||||
--ui-bg-inverted: var(--color-chalk-50);
|
||||
--ui-text-dimmed: var(--color-chalk-500);
|
||||
--ui-text-muted: var(--color-chalk-400);
|
||||
--ui-text-toned: var(--color-chalk-300);
|
||||
--ui-text: var(--color-chalk-200);
|
||||
--ui-text-highlighted: var(--color-chalk-50);
|
||||
--ui-text-inverted: var(--color-chalk-900);
|
||||
--ui-border: var(--color-chalk-700);
|
||||
--ui-border-muted: var(--color-chalk-800);
|
||||
--ui-border-accented: var(--color-chalk-500);
|
||||
--ui-border-inverted: var(--color-chalk-50);
|
||||
--ui-primary: var(--ui-color-primary-50);
|
||||
--ui-secondary: var(--ui-color-secondary-300);
|
||||
--ui-success: var(--ui-color-success-300);
|
||||
--ui-info: var(--ui-color-info-300);
|
||||
--ui-warning: var(--ui-color-warning-300);
|
||||
--ui-error: var(--ui-color-error-300);
|
||||
--shadow-popover: 0 4px 16px rgb(0 0 0 / 0.5);
|
||||
--shadow-modal: 0 16px 48px rgb(0 0 0 / 0.6);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--ui-bg-muted);
|
||||
color: var(--ui-text);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--text-sm);
|
||||
line-height: var(--text-sm--line-height);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
font-family: var(--font-serif);
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.75rem;
|
||||
color: var(--ui-text-highlighted);
|
||||
max-width: 42rem;
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
.article-content > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.article-content h1,
|
||||
.article-content h2,
|
||||
.article-content h3,
|
||||
.article-content h4 {
|
||||
font-weight: 600;
|
||||
text-wrap: balance;
|
||||
color: var(--ui-text-highlighted);
|
||||
}
|
||||
.article-content h1 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 2.25rem;
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
.article-content h2 {
|
||||
font-size: 1.4375rem;
|
||||
line-height: 1.9375rem;
|
||||
margin: 2.5rem 0 0.75rem;
|
||||
}
|
||||
.article-content h3 {
|
||||
font-size: 1.1875rem;
|
||||
line-height: 1.75rem;
|
||||
margin: 2rem 0 0.5rem;
|
||||
}
|
||||
.article-content h4 {
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.625rem;
|
||||
margin: 1.5rem 0 0.5rem;
|
||||
}
|
||||
.article-content p {
|
||||
font-size: 1.0625rem;
|
||||
line-height: 1.75rem;
|
||||
margin: 0 0 1.25rem;
|
||||
}
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
margin: 0 0 1.25rem;
|
||||
padding-left: 1.75rem;
|
||||
}
|
||||
.article-content ul {
|
||||
list-style: square;
|
||||
}
|
||||
.article-content ol {
|
||||
list-style: decimal;
|
||||
}
|
||||
.article-content li {
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
.article-content li::marker {
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
.article-content blockquote {
|
||||
margin: 1.75rem 0;
|
||||
padding-left: 1.25rem;
|
||||
border-left: 2px solid var(--ui-primary);
|
||||
font-style: italic;
|
||||
color: var(--ui-text-toned);
|
||||
}
|
||||
.article-content a {
|
||||
color: var(--ui-text-highlighted);
|
||||
text-decoration: underline;
|
||||
text-decoration-thickness: 1px;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
.article-content a:hover {
|
||||
text-decoration-thickness: 2px;
|
||||
}
|
||||
.article-content img {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
margin: 1.75rem 0;
|
||||
}
|
||||
.article-content figure {
|
||||
margin: 1.75rem 0;
|
||||
}
|
||||
.article-content figure img {
|
||||
margin: 0;
|
||||
}
|
||||
.article-content figcaption {
|
||||
margin-top: 0.5rem;
|
||||
font-family: var(--font-sans);
|
||||
font-size: 0.8125rem;
|
||||
line-height: 1.25rem;
|
||||
color: var(--ui-text-muted);
|
||||
}
|
||||
@media (min-width: 48rem) {
|
||||
.article-content h1 {
|
||||
font-size: 2rem;
|
||||
line-height: 2.5rem;
|
||||
}
|
||||
.article-content h2 {
|
||||
font-size: 1.625rem;
|
||||
line-height: 2.125rem;
|
||||
}
|
||||
.article-content h3 {
|
||||
font-size: 1.3125rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.article-content h4 {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
.article-content p {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.article-content {
|
||||
font-size: 1.125rem;
|
||||
line-height: 1.875rem;
|
||||
}
|
||||
.article-content figcaption {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
.animate-spin {
|
||||
animation-duration: 1.6s !important;
|
||||
animation-iteration-count: infinite !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,183 @@
|
||||
export const renewUi = {
|
||||
colors: {
|
||||
primary: 'ink',
|
||||
secondary: 'sand',
|
||||
success: 'moss',
|
||||
info: 'slate',
|
||||
warning: 'ochre',
|
||||
error: 'brick',
|
||||
neutral: 'chalk'
|
||||
},
|
||||
icons: {
|
||||
loading: 'i-lucide-loader-circle',
|
||||
close: 'i-lucide-x',
|
||||
check: 'i-lucide-check',
|
||||
search: 'i-lucide-search',
|
||||
chevronDown: 'i-lucide-chevron-down',
|
||||
chevronRight: 'i-lucide-chevron-right',
|
||||
arrowLeft: 'i-lucide-arrow-left',
|
||||
copy: 'i-lucide-copy',
|
||||
copyCheck: 'i-lucide-check',
|
||||
dark: 'i-lucide-moon',
|
||||
light: 'i-lucide-sun',
|
||||
system: 'i-lucide-monitor',
|
||||
success: 'i-lucide-circle-check',
|
||||
info: 'i-lucide-info',
|
||||
warning: 'i-lucide-triangle-alert',
|
||||
error: 'i-lucide-circle-x',
|
||||
menu: 'i-lucide-menu',
|
||||
panelClose: 'i-lucide-panel-left-close',
|
||||
panelOpen: 'i-lucide-panel-left-open',
|
||||
ellipsis: 'i-lucide-ellipsis',
|
||||
upload: 'i-lucide-upload',
|
||||
eye: 'i-lucide-eye',
|
||||
eyeOff: 'i-lucide-eye-off'
|
||||
},
|
||||
button: {
|
||||
slots: {
|
||||
base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)'
|
||||
},
|
||||
defaultVariants: {
|
||||
size: 'md'
|
||||
}
|
||||
},
|
||||
input: {
|
||||
slots: {
|
||||
base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted'
|
||||
},
|
||||
variants: {
|
||||
size: {
|
||||
md: {
|
||||
base: 'text-base md:text-sm'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
textarea: {
|
||||
slots: {
|
||||
base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted text-base md:text-sm'
|
||||
}
|
||||
},
|
||||
select: {
|
||||
slots: {
|
||||
base: 'rounded-none ring-(--ui-border-accented)',
|
||||
content: 'rounded-none shadow-(--shadow-popover)'
|
||||
}
|
||||
},
|
||||
checkbox: {
|
||||
slots: {
|
||||
base: 'rounded-none ring-(--ui-border-accented)'
|
||||
}
|
||||
},
|
||||
switch: {
|
||||
slots: {
|
||||
base: 'rounded-none',
|
||||
thumb: 'rounded-none'
|
||||
}
|
||||
},
|
||||
avatar: {
|
||||
slots: {
|
||||
root: 'rounded-none bg-(--ui-color-secondary-300)',
|
||||
fallback: 'text-(--ui-color-primary-900) font-semibold'
|
||||
}
|
||||
},
|
||||
chip: {
|
||||
slots: {
|
||||
base: 'rounded-none'
|
||||
}
|
||||
},
|
||||
progress: {
|
||||
slots: {
|
||||
base: 'rounded-none',
|
||||
indicator: 'rounded-none'
|
||||
}
|
||||
},
|
||||
badge: {
|
||||
slots: {
|
||||
base: 'rounded-none font-medium'
|
||||
}
|
||||
},
|
||||
kbd: {
|
||||
base: 'rounded-none font-mono'
|
||||
},
|
||||
tabs: {
|
||||
slots: {
|
||||
list: 'rounded-none',
|
||||
trigger: 'rounded-none',
|
||||
indicator: 'rounded-none'
|
||||
}
|
||||
},
|
||||
dropdownMenu: {
|
||||
slots: {
|
||||
content: 'rounded-none shadow-(--shadow-popover)',
|
||||
item: 'rounded-none'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
slots: {
|
||||
content: 'rounded-none bg-inverted text-inverted ring-0'
|
||||
}
|
||||
},
|
||||
modal: {
|
||||
slots: {
|
||||
content: 'rounded-none shadow-(--shadow-modal) divide-default',
|
||||
overlay: 'bg-(--ui-color-neutral-950)/40'
|
||||
}
|
||||
},
|
||||
slideover: {
|
||||
slots: {
|
||||
content: 'rounded-none shadow-(--shadow-modal)',
|
||||
overlay: 'bg-(--ui-color-neutral-950)/40'
|
||||
}
|
||||
},
|
||||
toast: {
|
||||
slots: {
|
||||
root: 'rounded-none shadow-(--shadow-popover)',
|
||||
progress: 'rounded-none'
|
||||
}
|
||||
},
|
||||
toaster: {
|
||||
slots: {
|
||||
viewport: 'z-(--z-toast)'
|
||||
}
|
||||
},
|
||||
alert: {
|
||||
slots: {
|
||||
root: 'rounded-none'
|
||||
}
|
||||
},
|
||||
card: {
|
||||
slots: {
|
||||
root: 'rounded-none'
|
||||
}
|
||||
},
|
||||
table: {
|
||||
slots: {
|
||||
thead: 'bg-elevated',
|
||||
th: 'text-muted font-medium py-2',
|
||||
td: 'py-3',
|
||||
tr: 'data-[selectable=true]:hover:bg-elevated'
|
||||
}
|
||||
},
|
||||
navigationMenu: {
|
||||
compoundVariants: [
|
||||
{
|
||||
orientation: 'vertical',
|
||||
active: true,
|
||||
class: {
|
||||
link: 'bg-(--ui-color-secondary-200) text-(--ui-color-primary-900) dark:bg-(--ui-color-secondary-300) before:hidden'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
dashboardSidebar: {
|
||||
slots: {
|
||||
root: 'bg-default'
|
||||
}
|
||||
},
|
||||
dashboardPanel: {
|
||||
slots: {
|
||||
body: 'bg-muted'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import ui from '@nuxt/ui/vite'
|
||||
import { renewUi } from './src/theme/ui.config'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
ui({
|
||||
ui: renewUi,
|
||||
colorMode: true,
|
||||
theme: {
|
||||
colors: ['primary', 'secondary', 'success', 'info', 'warning', 'error']
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
@@ -0,0 +1,115 @@
|
||||
# State matrix and error copy
|
||||
|
||||
Every state is drawn at desktop and mobile on the screen boards, with final copy. Each screen's file in `screens/` has the full copy per state.
|
||||
|
||||
| Screen | Route | State | Trigger | Spec |
|
||||
|---|---|---|---|---|
|
||||
| App boot | `any verified route` | Checking session | First navigation, while GET /v1/auth/me is pending | [boot](screens/boot.md) |
|
||||
| App boot | `any verified route` | Verified | 200 with is_verified: the route renders | [boot](screens/boot.md) |
|
||||
| App boot | `any verified route` | Unverified | 200 with is_verified false: goes to /register/pending | [boot](screens/boot.md) |
|
||||
| App boot | `any verified route` | No session | 401: goes to /login?redirect= | [boot](screens/boot.md) |
|
||||
| Log in | `/login` | Default | Registration closed | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Fresh install | registration.open is true | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Validation errors | Client rules fail on submit | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Submitting | Request in flight | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Wrong credentials | 403 | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Too many attempts | 429 with Retry-After | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Session expired | ?reason=expired from a 401 | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Password changed | ?reason=password-changed | [log-in](screens/log-in.md) |
|
||||
| Log in | `/login` | Server error | 500 or network | [log-in](screens/log-in.md) |
|
||||
| Register | `/register` | Default | Open instance | [register](screens/register.md) |
|
||||
| Register | `/register` | Validation errors | Client rules fail | [register](screens/register.md) |
|
||||
| Register | `/register` | Submitting | In flight | [register](screens/register.md) |
|
||||
| Register | `/register` | Registration closed | 403 | [register](screens/register.md) |
|
||||
| Register | `/register` | Server error | 500 or network | [register](screens/register.md) |
|
||||
| Pending | `/register/pending` | Default | After registering (email known) | [pending](screens/pending.md) |
|
||||
| Pending | `/register/pending` | Email unknown | After logging in unverified | [pending](screens/pending.md) |
|
||||
| Pending | `/register/pending` | Confirm cancel | Cancel registration clicked | [pending](screens/pending.md) |
|
||||
| Pending | `/register/pending` | Cancelling | DELETE in flight | [pending](screens/pending.md) |
|
||||
| Pending | `/register/pending` | Cancelled | 200: /register with toast | [pending](screens/pending.md) |
|
||||
| Pending | `/register/pending` | Already verified | 403: /home with toast | [pending](screens/pending.md) |
|
||||
| Verify | `/register/validate?c=` | Verifying | On load | [verify](screens/verify.md) |
|
||||
| Verify | `/register/validate?c=` | Success | 200: /home with toast | [verify](screens/verify.md) |
|
||||
| Verify | `/register/validate?c=` | Invalid or expired | 403 | [verify](screens/verify.md) |
|
||||
| Verify | `/register/validate?c=` | No session | 401: inline log in, then retry | [verify](screens/verify.md) |
|
||||
| Verify | `/register/validate?c=` | Missing code | No c parameter | [verify](screens/verify.md) |
|
||||
| Forgot password | `/register/reset/request` | Default | Page load | [forgot-password](screens/forgot-password.md) |
|
||||
| Forgot password | `/register/reset/request` | Validation | Invalid email | [forgot-password](screens/forgot-password.md) |
|
||||
| Forgot password | `/register/reset/request` | Submitting | In flight | [forgot-password](screens/forgot-password.md) |
|
||||
| Forgot password | `/register/reset/request` | Sent | Any 200 (neutral copy) | [forgot-password](screens/forgot-password.md) |
|
||||
| Forgot password | `/register/reset/request` | Too many attempts | 429 | [forgot-password](screens/forgot-password.md) |
|
||||
| Forgot password | `/register/reset/request` | Server error | 500 or network | [forgot-password](screens/forgot-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Default | c and email present | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Too short | Under 8 characters | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Mismatch | Confirm field differs | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Submitting | In flight | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Success | 200: /login?reason=password-changed | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Invalid or expired | 403 | [reset-password](screens/reset-password.md) |
|
||||
| Reset password | `/register/reset/validate` | Missing parameters | No c or no email | [reset-password](screens/reset-password.md) |
|
||||
| Home | `/home` | Loading | List in flight (after 150 ms) | [home](screens/home.md) |
|
||||
| Home | `/home` | Default | List loaded | [home](screens/home.md) |
|
||||
| Home | `/home` | Empty | Zero articles | [home](screens/home.md) |
|
||||
| Home | `/home` | Error | 500 or network | [home](screens/home.md) |
|
||||
| Articles | `/article` | Loading | List in flight | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Default | Loaded | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Empty | Zero articles | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | No results | Search matches nothing | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Empty tab | No drafts, or nothing online | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Row busy | Publish or unpublish in flight | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Action failed | 500 or network: toast with Retry | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Row vanished | 404 on any row action | [articles](screens/articles.md) |
|
||||
| Articles | `/article` | Delete confirm, in progress, failed, done | ConfirmDialog, then DELETE: 204 or 500 | [articles](screens/articles.md) |
|
||||
| New article | `modal · /article/new` | Default | Opened | [new-article](screens/new-article.md) |
|
||||
| New article | `modal · /article/new` | Validation | Title under 3 or body empty | [new-article](screens/new-article.md) |
|
||||
| New article | `modal · /article/new` | Submitting | POST in flight | [new-article](screens/new-article.md) |
|
||||
| New article | `modal · /article/new` | Title rejected | Server 400 | [new-article](screens/new-article.md) |
|
||||
| New article | `modal · /article/new` | Error | 500 or network | [new-article](screens/new-article.md) |
|
||||
| New article | `modal · /article/new` | Created | 201: editor, with a toast | [new-article](screens/new-article.md) |
|
||||
| Editor | `/article/:id/edit` | Loading | GET in flight | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Not found | 404 | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Saved | Clean | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Unsaved | Any edit | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Saving | PATCH in flight | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Save failed | 500 or network | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Near the limit | At least 9 000 HTML characters | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Too long | Over 10 000: Save and Publish disabled | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Preview | Switch on | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Uploading, rejected, inserted | ImageUploader | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Publishing, unpublishing | PATCH publish or unpublish | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Leave guard | Navigating away while dirty | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Offline | navigator.onLine is false | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Deleted | 204: /article with toast | [editor](screens/editor.md) |
|
||||
| Editor | `/article/:id/edit` | Session expired | 401: draft kept in sessionStorage, then /login | [editor](screens/editor.md) |
|
||||
| Integration | `/integration` | Default | Page load | [integration](screens/integration.md) |
|
||||
| Integration | `/integration` | Copied | Copy clicked (2 s) | [integration](screens/integration.md) |
|
||||
|
||||
## HTTP status to copy
|
||||
|
||||
Response bodies are plain text and are never shown. `useApi` throws an `ApiError` with the status and a context key, and each screen maps them to this copy.
|
||||
|
||||
| Status | Where | Copy | Surface |
|
||||
|---|---|---|---|
|
||||
| 400 | Any form | The field error from the client rules. A server 400 that got through: "Something in the form isn't valid. Check the highlighted fields." | Field + alert |
|
||||
| 401 | Any back-office call | Goes to /login?redirect=<path>&reason=expired. "Your session expired. Log in again to pick up where you left off." | Redirect + alert |
|
||||
| 401 | Verify | "Log in to finish verifying." Inline log in, then retry | Inline form |
|
||||
| 403 | Log in | "That username and password don't match. Check both and try again." | Alert |
|
||||
| 403 | Register | "This site already has an owner. Log in instead." | ResultPanel |
|
||||
| 403 | Any back-office call | Unverified: goes to /register/pending | Redirect |
|
||||
| 403 | Verify | "This verification link doesn't work." Offers Cancel registration and start over | ResultPanel |
|
||||
| 403 | Cancel registration | "Your account is already verified." Goes to /home | Toast |
|
||||
| 403 | Reset confirm | "This reset link has expired." Offers Request a new link | ResultPanel |
|
||||
| 404 | Editor load | "This article doesn't exist." Offers All articles | ErrorView |
|
||||
| 404 | Row or editor action | "That article no longer exists." The row is removed | Toast |
|
||||
| 404 | Unknown route | "Page not found" | ErrorView |
|
||||
| 429 | Log in, reset request | "Too many attempts. For your security, wait a moment before trying again." With a countdown | Alert + disabled button |
|
||||
| 500 | Save | "Save failed" + Retry. Changes are kept | SaveStatus |
|
||||
| 500 | Publish / unpublish | "Couldn't publish" / "Couldn't unpublish" + Retry | Toast |
|
||||
| 500 | Delete | "Couldn't delete the article, so it's still there. Try again in a moment." | Inline in dialog |
|
||||
| 500 | Upload | "Upload failed. The server didn't accept the file. Your article hasn't changed." | ImageUploader |
|
||||
| network | Anywhere | "Couldn't reach RenewCMS. Check your connection and try again." Offline: banner | Alert / toast / banner |
|
||||
|
||||
## API the design marked pending
|
||||
|
||||
All four now exist: `GET /v1/auth/me`, `GET /v1/auth/registration`, `429` with `Retry-After` on `/v1/auth/login` and `/v1/auth/password-reset`, and `/static/uploadedImages/*`. Still not supported, so shown disabled or omitted:
|
||||
|
||||
Renaming a title (shown read-only, with an explanation in Details), resending the verification email (the pending page explains how to start over), changing the password while logged in, editing the profile or email, listing or deleting individual images, multiple users.
|
||||
Reference in new issue
Block a user