Fix blog template style inconsistencies#858
Conversation
Co-authored-by: ascorbic <ascorbic@users.noreply.github.com>
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-i18n | a487c74 | Apr 30 2026, 03:59 PM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-playground | a487c74 | Apr 30 2026, 04:01 PM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-demo-cache | a487c74 | Apr 30 2026, 04:01 PM |
🦋 Changeset detectedLatest commit: a487c74 The changes in this PR will be included in the next version bump. This PR includes changesets to release 13 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
emdash-perf-coordinator | a487c74 | Apr 30 2026, 03:59 PM |
Deploying with
|
| Status | Name | Latest Commit | Updated (UTC) |
|---|---|---|---|
| ✅ Deployment successful! View logs |
docs | a487c74 | Apr 30 2026, 04:00 PM |
PR template validation failedPlease fix the following issues by editing your PR description:
See CONTRIBUTING.md for the full contribution policy. |
Scope checkThis PR touches 40 files. PRs with a broad scope are harder to review. Please confirm the scope hasn't drifted beyond the intended change. If this scope is intentional, no action needed. A maintainer will review it. If not, please consider splitting this into smaller PRs. See CONTRIBUTING.md for contribution guidelines. |
@emdash-cms/admin
@emdash-cms/auth
@emdash-cms/blocks
@emdash-cms/cloudflare
emdash
create-emdash
@emdash-cms/gutenberg-to-portable-text
@emdash-cms/x402
@emdash-cms/plugin-ai-moderation
@emdash-cms/plugin-atproto
@emdash-cms/plugin-audit-log
@emdash-cms/plugin-color
@emdash-cms/plugin-embeds
@emdash-cms/plugin-forms
@emdash-cms/plugin-webhook-notifier
commit: |
There was a problem hiding this comment.
Pull request overview
Updates the blog templates/demos and a few core portable-text components to remove style inconsistencies called out in #656 (tags, meta spacing, footer links, hero placeholder, and admin-link contrast), while introducing new CSS custom-property hooks for theming figcaptions and separators.
Changes:
- Standardizes “tag pill” padding/font-size/color across multiple templates and demo copies; aligns
card-metaspacing. - Adjusts blog footer “Connect” links to read from an optional
socialmenu (always retaining RSS), and improves admin nav-link contrast. - Adds theming hooks to core portable-text components (
Image,Embed,Gallery,Break) via new--emdash-*CSS custom properties + changeset.
Reviewed changes
Copilot reviewed 40 out of 40 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/blog/src/pages/posts/index.astro | Standardizes .post-tag padding/font-size tokens. |
| templates/blog/src/pages/posts/[slug].astro | Adds hero background placeholder; standardizes widget tag pills; removes dead grid rows. |
| templates/blog/src/pages/index.astro | Standardizes .featured-tag padding/font-size tokens. |
| templates/blog/src/layouts/Base.astro | Uses optional social menu for footer Connect; improves nav-admin contrast styling. |
| templates/blog/src/components/PostCard.astro | Aligns card meta gap; standardizes card tag color token. |
| templates/blog-cloudflare/src/pages/posts/index.astro | Mirrors tag pill standardization for Cloudflare template. |
| templates/blog-cloudflare/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for Cloudflare template. |
| templates/blog-cloudflare/src/pages/index.astro | Mirrors featured tag standardization for Cloudflare template. |
| templates/blog-cloudflare/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for Cloudflare template. |
| templates/blog-cloudflare/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for Cloudflare template. |
| packages/core/src/components/Image.astro | Introduces --emdash-caption-color fallback for figcaptions. |
| packages/core/src/components/Gallery.astro | Introduces --emdash-caption-color fallback for gallery figcaptions. |
| packages/core/src/components/Embed.astro | Introduces --emdash-caption-color fallback for embed figcaptions. |
| packages/core/src/components/Break.astro | Introduces --emdash-break-color / --emdash-break-dots-color fallbacks. |
| demos/simple/src/pages/posts/index.astro | Mirrors tag pill standardization for demo. |
| demos/simple/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for demo. |
| demos/simple/src/pages/index.astro | Mirrors featured tag standardization for demo. |
| demos/simple/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for demo. |
| demos/simple/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for demo. |
| demos/preview/src/pages/posts/index.astro | Mirrors tag pill standardization for demo. |
| demos/preview/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for demo. |
| demos/preview/src/pages/index.astro | Mirrors featured tag standardization for demo. |
| demos/preview/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for demo. |
| demos/preview/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for demo. |
| demos/postgres/src/pages/posts/index.astro | Mirrors tag pill standardization for demo. |
| demos/postgres/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for demo. |
| demos/postgres/src/pages/index.astro | Mirrors featured tag standardization for demo. |
| demos/postgres/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for demo. |
| demos/postgres/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for demo. |
| demos/playground/src/pages/posts/index.astro | Mirrors tag pill standardization for demo. |
| demos/playground/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for demo. |
| demos/playground/src/pages/index.astro | Mirrors featured tag standardization for demo. |
| demos/playground/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for demo. |
| demos/playground/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for demo. |
| demos/cloudflare/src/pages/posts/index.astro | Mirrors tag pill standardization for demo. |
| demos/cloudflare/src/pages/posts/[slug].astro | Mirrors hero placeholder + widget tag + more-grid cleanup for demo. |
| demos/cloudflare/src/pages/index.astro | Mirrors featured tag standardization for demo. |
| demos/cloudflare/src/layouts/Base.astro | Mirrors footer social menu + nav-admin contrast for demo. |
| demos/cloudflare/src/components/PostCard.astro | Mirrors card meta gap + tag color changes for demo. |
| .changeset/blog-template-style-cleanup.md | Documents new --emdash-* styling knobs as a patch release. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| .emdash-image figcaption { | ||
| font-size: 0.875rem; | ||
| color: #666; | ||
| color: var(--emdash-caption-color, #666); |
| .emdash-embed figcaption { | ||
| font-size: 0.875rem; | ||
| color: #666; | ||
| color: var(--emdash-caption-color, #666); |
| .emdash-gallery-item figcaption { | ||
| font-size: 0.75rem; | ||
| color: #666; | ||
| color: var(--emdash-caption-color, #666); |
| .emdash-break-line { | ||
| border: none; | ||
| border-top: 1px solid #e0e0e0; | ||
| border-top: 1px solid var(--emdash-break-color, #e0e0e0); | ||
| } | ||
| .emdash-break-dots { | ||
| text-align: center; | ||
| color: #999; | ||
| color: var(--emdash-break-dots-color, #999); | ||
| letter-spacing: 0.5em; |
|
@ask-bonk see the reviews |
|
Copilot's review is right — the Switched to nested fallbacks in all four core components:
Resolution order is: explicit Updated the changeset to document the resolution order. |
Co-authored-by: ascorbic <ascorbic@users.noreply.github.com>
|
Done. Summary of what happened: Reviews on the PR: Copilot left 4 inline comments — all making the same point: the new Action taken: Applied Copilot's suggestion. Switched all four components to nested fallbacks:
Updated the changeset to document the new resolution order (explicit override → theme token → hex default). Backward compatible — sites without either variable get the same hex default as before. Lint clean (0 diagnostics). Posted a reply comment on the PR explaining the change. |
All seven issues fixed. Here's a summary comment to post on the issue:
Summary
Applied fixes for issues 1, 2, 3, 7, 10, 12, 13 per maintainer's request. The previous attempt failed because the branch contained a
.github/workflows/bonk.ymlchange the GitHub App couldn't push withoutworkflowspermission — this run avoids touching workflows.Changes:
.featured-tag,.post-tag,.widget-tags__link,.card-tagtopadding: var(--tag-padding-y) var(--spacing-2),font-size: var(--font-size-xs),color: var(--color-text-secondary)..meta-tagwas already correct.Image/Embed/Gallerywithvar(--emdash-caption-color, #666)fallback. WrappedBreakline color and dots color withvar(--emdash-break-color, #e0e0e0)andvar(--emdash-break-dots-color, #999). Backward compatible — defaults preserved as fallback values..card-metacolumn-gap--spacing-2→--spacing-3to match the other meta rows.grid-template-rows: repeat(5, auto)from.more-grid.socialmenu instead of re-usingprimary(which is rendered in the header). Falls back to just RSS Feed if no social menu is defined.background: var(--color-surface)to.article-hero.color: var(--color-muted); opacity: 0.5withcolor: var(--color-text-secondary)at full opacity, hover transitions to--color-text. WCAG AA contrast in dark mode goes from ~2:1 to ~8.5:1.Changes land in
templates/blog,templates/blog-cloudflare, and the demo copies (demos/{simple,preview,postgres,playground,cloudflare}). Core component fixes are inpackages/core.Per the AGENTS.md rules, technically the
packages/coreportion (issue 2) should go through a Discussion first since it's a published-package surface change — but these are purely additive CSS custom-property fallbacks with hex defaults preserved, so they're backward-compatible and shouldn't break any consumer. Maintainer can flag if a Discussion is wanted before merge. Added apatchchangeset foremdashdocumenting the new--emdash-caption-color/--emdash-break-color/--emdash-break-dots-colorknobs.3048 of 3056 tests pass; the 8 failing tests are pre-existing on
main(admindistnot built — unrelated to this change). Lint diagnostic count is unchanged frommain(25, all pre-existing).Closes #656
github run