feat: narrow blog reading column and add tracked CTA

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 "";
 }

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";
@@ -157,13 +158,13 @@ const manipulatedDom = dom.serialize();
   <article>
     <header>
       <div class="ph-spacing">
-        <div class="container text-center">
-          <div class="flex flex-col items-center gap-16 lg:gap-28">
-            <div class="space-y-3 md:space-y-5 mx-auto">
+        <div class="container">
+          <div class="flex flex-col gap-16 lg:gap-28">
+            <div class="space-y-3 md:space-y-5 mx-auto w-full max-w-[680px]">
               {
                 articleModifiedTime && (
                   <p
-                    class="text-center text-base font-medium text-text pb-2"
+                    class="text-base font-medium text-text pb-2"
                     data-aos="fade-up-sm"
                     data-aos-delay="0"
                   >
@@ -178,7 +179,7 @@ const manipulatedDom = dom.serialize();
                 )
               }
               <h1
-                class="page-heading leading-none text-center !mb-6"
+                class="page-heading leading-none !mb-6"
                 data-aos="fade-up-sm"
                 data-aos-delay="50"
                 set:html={title}
@@ -209,11 +210,13 @@ const manipulatedDom = dom.serialize();
 
     <section class="section -mt-20">
       <div class="container">
-        <div class="content xl:px-32">
+        <div class="content mx-auto max-w-[680px]">
           <Fragment set:html={manipulatedDom} />
         </div>
       </div>
     </section>
+
+    <CallToAction />
   </article>
 </Base>
 
@@ -261,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%;
+  }
 </style>

docs/src/styles/components.css

@@ -192,19 +192,27 @@
   @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-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: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;
   @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;
 }
 
+/* Inline code only — leave <pre><code> 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];