From 1adc1a736c410a158b02f849c71e5cd9e37748d4 Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:17:38 +0200 Subject: [PATCH 1/9] feat: narrow blog reading column and add tracked CTA - Cap blog post content at 680px for more comfortable line length; YouTube embeds now match the content column since they're already 100%-width inside the wrapper. - Render the existing CallToAction block at the end of blog posts (matches the pattern on /for-teams, /pricing, /features) so readers see App Store and Teams trial CTAs. - Add a blog branch to CallToAction's getEventName so blog-sourced clicks fire as "CTA:+Blog+Bottom+-+Download" and "CTA:+Blog+Bottom+-+Trial" in Plausible, distinguishable from existing marketing-page events. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/layouts/partials/CallToAction.astro | 7 +++++++ docs/src/pages/blog/[slug].astro | 5 ++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/docs/src/layouts/partials/CallToAction.astro b/docs/src/layouts/partials/CallToAction.astro index a53c3733..d76aea41 100644 --- a/docs/src/layouts/partials/CallToAction.astro +++ b/docs/src/layouts/partials/CallToAction.astro @@ -13,6 +13,7 @@ const { enable, title, description, image, call_to_actions } = sectionData.data; const isTeamPage = Astro.url.pathname === "/for-teams"; const isPricingPage = Astro.url.pathname === "/pricing"; +const isBlogPage = Astro.url.pathname.startsWith("/blog/"); const callToActions = isTeamPage ? [...call_to_actions].reverse() @@ -37,6 +38,12 @@ function getEventName(ctaLabel: string): string { } else if (ctaLabel.includes("Trial")) { return "plausible-event-name=CTA:+Pricing+Bottom+-+Trial"; } + } else if (isBlogPage) { + if (ctaLabel.includes("Download")) { + return "plausible-event-name=CTA:+Blog+Bottom+-+Download"; + } else if (ctaLabel.includes("Trial")) { + return "plausible-event-name=CTA:+Blog+Bottom+-+Trial"; + } } return ""; } diff --git a/docs/src/pages/blog/[slug].astro b/docs/src/pages/blog/[slug].astro index a6cebf99..76005b8d 100644 --- a/docs/src/pages/blog/[slug].astro +++ b/docs/src/pages/blog/[slug].astro @@ -7,6 +7,7 @@ import { FaLink } from "react-icons/fa6"; import { Image } from "astro:assets"; import Base from "@/layouts/Base.astro"; +import CallToAction from "@/partials/CallToAction.astro"; import config from "@/config/config.json"; import { selectOgImage } from "@/lib/utils/selectOgImage"; import { dateFormat } from "@/lib/utils/dateFormat"; @@ -209,11 +210,13 @@ const manipulatedDom = dom.serialize();
-
+
+ + From 6d2541e67ebef31ed094fc4e3905c5a3a7cde9b8 Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:25:14 +0200 Subject: [PATCH 2/9] style: cap blog title width at 800px to match narrow reading column Slightly wider than the 680px body column so the heading keeps visual weight while sharing the same centered axis. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/pages/blog/[slug].astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/blog/[slug].astro b/docs/src/pages/blog/[slug].astro index 76005b8d..aef922f4 100644 --- a/docs/src/pages/blog/[slug].astro +++ b/docs/src/pages/blog/[slug].astro @@ -160,7 +160,7 @@ const manipulatedDom = dom.serialize();
-
+
{ articleModifiedTime && (

Date: Wed, 22 Apr 2026 17:26:09 +0200 Subject: [PATCH 3/9] style: left-align blog title at 680px to match content column Title wrapper now uses the same 680px max-width as the body column and shares the same left edge when centered in the container, replacing the previously centered hero text. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/pages/blog/[slug].astro | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/blog/[slug].astro b/docs/src/pages/blog/[slug].astro index aef922f4..149294f6 100644 --- a/docs/src/pages/blog/[slug].astro +++ b/docs/src/pages/blog/[slug].astro @@ -158,13 +158,13 @@ const manipulatedDom = dom.serialize();

-
-
-
+
+
+
{ articleModifiedTime && (

@@ -179,7 +179,7 @@ const manipulatedDom = dom.serialize(); ) }

Date: Wed, 22 Apr 2026 17:28:18 +0200 Subject: [PATCH 4/9] style: use text color for list markers instead of primary blue Bullet and number markers in prose content now match the body text color, reducing visual noise in article lists. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/styles/components.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/styles/components.css b/docs/src/styles/components.css index 44e5c7ea..75317986 100755 --- a/docs/src/styles/components.css +++ b/docs/src/styles/components.css @@ -201,7 +201,7 @@ @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark; @apply prose-tr:border-border; @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px]; - @apply prose-li:marker:text-primary; + @apply prose-li:marker:text-text; @apply prose-figcaption:text-center; } From 8aa3912dc65b04348ba96fba22b287dd54e7ddba Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:29:31 +0200 Subject: [PATCH 5/9] fix: make WordPress YouTube embeds fill the blog content column WordPress oEmbed hardcodes width/height attrs on the iframe (e.g. 500x281), so the wrapper stretches to the column but the iframe stays at its intrinsic size. Target the .wp-embed-aspect-16-9 wrapper to enforce a 16:9 aspect ratio and make the iframe fill it. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/pages/blog/[slug].astro | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/src/pages/blog/[slug].astro b/docs/src/pages/blog/[slug].astro index 149294f6..19d502e2 100644 --- a/docs/src/pages/blog/[slug].astro +++ b/docs/src/pages/blog/[slug].astro @@ -264,4 +264,18 @@ const manipulatedDom = dom.serialize(); .content :global(.heading-anchor:focus-visible) { opacity: 1; } + + /* Make WordPress YouTube / video oEmbeds fill the content column */ + .content :global(.wp-embed-aspect-16-9 .wp-block-embed__wrapper) { + position: relative; + width: 100%; + aspect-ratio: 16 / 9; + } + + .content :global(.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe) { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + } From 3c40257e0bcd4f7c17c1acac98cd01964fcf402a Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:30:33 +0200 Subject: [PATCH 6/9] style: match list item typography to paragraph size and weight List items were falling back to the default prose size while paragraphs used text-h6-sm with medium weight, creating a noticeable size drop inside articles. Apply the same size and weight to list items for a consistent reading rhythm. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/styles/components.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/styles/components.css b/docs/src/styles/components.css index 75317986..94587d00 100755 --- a/docs/src/styles/components.css +++ b/docs/src/styles/components.css @@ -195,7 +195,7 @@ @apply prose-code:px-1 prose-code:text-primary; @apply prose-strong:text-text-dark; @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary; - @apply prose-li:text-text; + @apply prose-li:text-h6-sm prose-li:text-text prose-li:font-medium; @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:border-border prose-table:before:content-[""]; @apply prose-thead:border-border prose-thead:bg-light; @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark; From 97bfb5266e63112c8632a0e6418f6f6dad9ce1cd Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:32:31 +0200 Subject: [PATCH 7/9] style: restyle inline code as a subtle dark pill On the black page background, primary-blue inline code with the default prose backtick decorators reads as visually noisy. Replace with a muted rounded pill (bg-light + subtle border) and off-white text at 90% size, normal weight, no backticks. Co-Authored-By: Claude Opus 4.7 (1M context) --- docs/src/styles/components.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/src/styles/components.css b/docs/src/styles/components.css index 94587d00..54371f3e 100755 --- a/docs/src/styles/components.css +++ b/docs/src/styles/components.css @@ -192,7 +192,8 @@ @apply prose-p:text-h6-sm prose-p:text-text prose-p:font-medium; @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-primary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark; @apply prose-pre:rounded-lg prose-pre:bg-light; - @apply prose-code:px-1 prose-code:text-primary; + @apply prose-code:rounded-md prose-code:border prose-code:border-border/60 prose-code:bg-light prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:font-normal prose-code:text-text-dark; + @apply prose-code:before:content-none prose-code:after:content-none; @apply prose-strong:text-text-dark; @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary; @apply prose-li:text-h6-sm prose-li:text-text prose-li:font-medium; From f2279125dcbbfbe5e0d9b0eccadb5af856b9847c Mon Sep 17 00:00:00 2001 From: Niek Nijland Date: Wed, 22 Apr 2026 17:34:02 +0200 Subject: [PATCH 8/9] fix: scope inline code pill to inline code only The previous change applied the dark pill to every element, which also hit the inside 
 blocks, giving every line of
a code block its own pill background. Replace the prose-code:
utilities with a :not(pre) > code selector so the pill targets
inline code and leaves rendered code blocks to their own theme.

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 docs/src/styles/components.css | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/docs/src/styles/components.css b/docs/src/styles/components.css
index 54371f3e..62351392 100755
--- a/docs/src/styles/components.css
+++ b/docs/src/styles/components.css
@@ -192,8 +192,6 @@
   @apply prose-p:text-h6-sm prose-p:text-text prose-p:font-medium;
   @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-primary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark;
   @apply prose-pre:rounded-lg prose-pre:bg-light;
-  @apply prose-code:rounded-md prose-code:border prose-code:border-border/60 prose-code:bg-light prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[0.9em] prose-code:font-normal prose-code:text-text-dark;
-  @apply prose-code:before:content-none prose-code:after:content-none;
   @apply prose-strong:text-text-dark;
   @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary;
   @apply prose-li:text-h6-sm prose-li:text-text prose-li:font-medium;
@@ -206,6 +204,15 @@
   @apply prose-figcaption:text-center;
 }
 
+/* Inline code only — leave 
 blocks to their own theme */
+.content :not(pre) > code {
+  @apply rounded-md border border-border/60 bg-light px-1.5 py-0.5 text-[0.9em] font-normal text-text-dark;
+}
+.content :not(pre) > code::before,
+.content :not(pre) > code::after {
+  content: none;
+}
+
 /* CTA style */
 .cta {
   @apply relative isolate translate-y-[2px];

From c1f5ef9b2f8b1b7cb448336f3813902cfba5e4dd Mon Sep 17 00:00:00 2001
From: Niek Nijland 
Date: Wed, 22 Apr 2026 17:34:47 +0200
Subject: [PATCH 9/9] style: let list items share a single line-height rhythm

Zero the prose list-item top/bottom margin so consecutive bullets
sit at the same vertical cadence as wrapped lines inside a single
bullet, giving lists a consistent reading rhythm instead of a
larger between-item gap.

Co-Authored-By: Claude Opus 4.7 (1M context) 
---
 docs/src/styles/components.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/styles/components.css b/docs/src/styles/components.css
index 62351392..56a3cf0b 100755
--- a/docs/src/styles/components.css
+++ b/docs/src/styles/components.css
@@ -194,7 +194,7 @@
   @apply prose-pre:rounded-lg prose-pre:bg-light;
   @apply prose-strong:text-text-dark;
   @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary;
-  @apply prose-li:text-h6-sm prose-li:text-text prose-li:font-medium;
+  @apply prose-li:my-0 prose-li:text-h6-sm prose-li:text-text prose-li:font-medium;
   @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:border-border prose-table:before:content-[""];
   @apply prose-thead:border-border prose-thead:bg-light;
   @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark;