From 51c1963c55c1f29787051c88efdc834cfa7ddbcf Mon Sep 17 00:00:00 2001
From: hugo <hugoms@me.com>
Date: Sun, 22 Feb 2026 20:22:10 +0100
Subject: [PATCH] fix: youtube macro gets some spacing aftert the player

---
 .../engine/templates/partials/styles.liquid   |  1 +
 .../GenerationRouteRendererFactory.test.ts    | 47 +++++++++++++++++++
 tests/engine/PreviewServer.test.ts            | 31 ++++++++++++
 3 files changed, 79 insertions(+)

diff --git a/src/main/engine/templates/partials/styles.liquid b/src/main/engine/templates/partials/styles.liquid
index cd8d3be..614afd5 100644
--- a/src/main/engine/templates/partials/styles.liquid
+++ b/src/main/engine/templates/partials/styles.liquid
@@ -82,6 +82,7 @@
   .code-copy-success .code-copy-button { color: var(--pico-ins-color, rgb(53, 117, 56)); border-color: var(--pico-ins-color, rgb(53, 117, 56)); }
   .code-copy-failed .code-copy-button { color: var(--pico-del-color, rgb(183, 72, 72)); border-color: var(--pico-del-color, rgb(183, 72, 72)); }
   .post iframe { width: 100%; min-height: 20rem; }
+  .macro-youtube, .macro-vimeo { margin-bottom: 1rem; }
   .macro-gallery, .macro-photo-archive, .macro-tag-cloud { border: 1px dashed var(--pico-muted-border-color, var(--muted-border-color)); padding: .75rem; margin: 1rem 0; }
   .gallery-container { display: grid; gap: .5rem; }
   .macro-gallery.gallery-cols-1 .gallery-container { grid-template-columns: 1fr; }
diff --git a/tests/engine/GenerationRouteRendererFactory.test.ts b/tests/engine/GenerationRouteRendererFactory.test.ts
index 9035a82..69443c9 100644
--- a/tests/engine/GenerationRouteRendererFactory.test.ts
+++ b/tests/engine/GenerationRouteRendererFactory.test.ts
@@ -136,4 +136,51 @@ describe('GenerationRouteRendererFactory', () => {
     expect(dayTwoHtml).toContain('Post On Day Two');
     expect(dayTwoHtml).not.toContain('Post On Day One');
   });
+
+  it('includes youtube macro spacing styles in preview-backed generated html routes', async () => {
+    const post = makePost({
+      id: 'youtube-1',
+      slug: 'youtube-spacing',
+      title: 'YouTube Spacing',
+      content: ['Intro paragraph.', '[[youtube id="dQw4w9WgXcQ"]]', 'Paragraph after video.'].join('\n\n'),
+      createdAt: new Date('2025-01-15T10:00:00.000Z'),
+    });
+
+    const postEngine = {
+      getPostsFiltered: vi.fn(async () => [post]),
+      getPublishedVersion: vi.fn(async () => null),
+      findPublishedBySlug: vi.fn(async (slug: string) => (slug === post.slug ? post : null)),
+      getPost: vi.fn(async (id: string) => (id === post.id ? post : null)),
+      hasPublishedVersion: vi.fn(async () => false),
+      setProjectContext: vi.fn(),
+    };
+
+    const renderRoute = createPreviewBackedGenerationRouteRenderer({
+      options: {
+        projectId: 'project',
+        dataDir: '/tmp',
+        projectName: 'Project',
+      },
+      maxPostsPerPage: 50,
+      publishedPostsForLookup: [post],
+      engines: {
+        postEngine,
+        mediaEngine: {
+          getAllMedia: vi.fn(async () => []),
+          setProjectContext: vi.fn(),
+        },
+        postMediaEngine: {
+          setProjectContext: vi.fn(),
+          getLinkedMediaForPost: vi.fn(async () => []),
+          getLinkedMediaDataForPost: vi.fn(async () => []),
+        },
+      },
+    });
+
+    const html = await renderRoute('/2025/01/15/youtube-spacing');
+
+    expect(html).toContain('class="macro-youtube"');
+    expect(html).toContain('youtube.com/embed/dQw4w9WgXcQ?rel=0');
+    expect(html).toContain('.macro-youtube, .macro-vimeo { margin-bottom: 1rem; }');
+  });
 });
diff --git a/tests/engine/PreviewServer.test.ts b/tests/engine/PreviewServer.test.ts
index b926cc4..8de11d2 100644
--- a/tests/engine/PreviewServer.test.ts
+++ b/tests/engine/PreviewServer.test.ts
@@ -1570,6 +1570,37 @@ describe('PreviewServer', () => {
     expect(html).toContain('/media/2025/02/archive.jpg');
   });
 
+  it('adds paragraph-like spacing after youtube macro embeds in generated HTML', async () => {
+    const post = makePost({
+      id: 'macro-youtube-spacing-1',
+      slug: 'macro-youtube-spacing',
+      title: 'Macro YouTube Spacing',
+      content: [
+        'Intro paragraph before video.',
+        '',
+        '[[youtube id="dQw4w9WgXcQ"]]',
+        '',
+        'Paragraph after video.',
+      ].join('\n'),
+    });
+
+    server = new PreviewServer({
+      postEngine: makeEngine([post]),
+      settingsEngine: makeSettings(50),
+      getActiveProjectContext: async () => ({ projectId: 'default' }),
+    });
+
+    await server.start(0);
+
+    const response = await fetch(`${server.getBaseUrl()}/`);
+    expect(response.status).toBe(200);
+    const html = await response.text();
+
+    expect(html).toContain('class="macro-youtube"');
+    expect(html).toContain('youtube.com/embed/dQw4w9WgXcQ?rel=0');
+    expect(html).toContain('.macro-youtube, .macro-vimeo { margin-bottom: 1rem; }');
+  });
+
   it('resolves gallery linked images via post-media links even when media.linkedPostIds is empty', async () => {
     const post = makePost({
       id: 'macro-junction-1',