Astro Frontend

Astro frontend

Dashless generates a complete, ordinary Astro project. It is owned source code, not a managed theme account or proprietary runtime.

Content mapping

• The WordPress site title becomes the masthead.
• A configured static front Page supplies the homepage title and introduction.
• The newest Post becomes the featured entry.
• Recent Posts fill the story grid.
• Categories populate the topic directory and archives.
• Tags populate the tag directory and archives.
• WordPress Pages populate the main navigation.
• Parent Page relationships become nested routes.
• The configured posts route defaults to /stories/.

Production content always comes from WordPress. The project does not contain demo posts, fallback articles, or a second editorial store.

Generated routes and assets

The stock project includes:

• homepage and nested Page routes;
• paginated story archives;
• individual story routes;
• category/topic and tag directories and archives;
• client-side static search with safe text-node result rendering;
• mirrored WordPress media;
• RSS;
• XML sitemap and robots rules;
• canonical URLs, Open Graph fields, and structured data;
• build-generated social cards;
• a real static 404 route; and
• a favicon and complete responsive styling.

Hypertext Diary

The default design is a colorful late-1990s personal-web publication with modern editorial readability. It uses browser-window framing, offset borders, status strips, chunky cards, hand-labeled archives, blog widgets, a day/night palette, and a few playful details.

It deliberately uses CSS shapes and system typefaces. There is no font CDN, JavaScript UI framework, image pack, analytics service, or theme account.

The Teddy logo and favicon under public/ are example identity assets. Replace them, remove them, or restyle the site without changing the content or deployment contracts.

Customization map

File	What to change there
dashless.config.mjs	Site identity, public URL, content paths, pagination, and WordPress source
src/styles/global.css	Palette, type, surfaces, shadows, responsive behavior, and night mode
src/layouts/SiteLayout.astro	Shared header, navigation, status strip, footer, theme control, and metadata
src/pages/index.astro	Homepage composition
src/components/StoryCard.astro	Archive cards
src/pages/stories/[slug].astro	Story presentation
src/lib/social-card.mjs	1200×630 share-card composition
src/lib/dashless.mjs	WordPress reads, mapping, preview overlay, and media mirroring

The visual layer can be replaced completely. Keep the WordPress data source, content digest markers, preview overlay, and route integrity intact.

Social cards

Every published WordPress Post receives a 1200×630 PNG card during the build. It uses WordPress-backed title, publication date, first category, featured image, and the configured site identity.

If a Post has no usable featured image, the card uses a decorative visual fallback without altering WordPress. Digest-based filenames make changed cards cache-safe, and later builds remove stale card files.

The generated card feeds Open Graph, Twitter, and Article metadata without an image service or server runtime.

Navigation transitions

Hypertext Diary uses the browser's native cross-document View Transitions API. Post titles and featured images can move naturally from an archive card into the article while navigation remains ordinary multi-page HTML.

Unsupported browsers get an immediate page load. Reduced-motion visitors receive effectively instant transitions. Transition names derive from stable WordPress IDs and must remain unique within a page.

Accessibility and resilience

• Semantic landmarks and a skip link
• Visible keyboard focus for every interactive control
• Reduced-motion support for custom and native transitions
• Strong contrast in day and night palettes
• Dedicated article styles for tables, code, blockquotes, images, and print
• Safe DOM text insertion in search results
• Accessible, layout-stable fallback art when media cannot be mirrored
• Responsive single-column layouts on narrow screens
• No dependence on JavaScript for ordinary navigation or article reading

Quality workflow

Dashless packages a site-director skill and a deterministic audit. A complete visual pass should cover:

1. Structure: route coverage, content mapping, navigation, empty states, and representative long content.
2. Responsive presentation: wide desktop, ordinary mobile, and narrow mobile layouts.
3. Interaction and resilience: keyboard focus, day/night mode, reduced motion, missing media, search, 404, and no-JavaScript reading.

Run the production audit against a completed build:

node skills/design-dashless-astro-sites/scripts/audit-dist.mjs --project /path/to/generated/site

build_frontend also runs Astro's checks and static build. Design work should use preview_frontend, which does not create a publication token or alter WordPress content.