fix: youtube macro gets some spacing aftert the player

This commit is contained in:
2026-02-22 20:22:10 +01:00
parent 8c46e5aeee
commit 51c1963c55
3 changed files with 79 additions and 0 deletions

View File

@@ -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-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)); } .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; } .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; } .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; } .gallery-container { display: grid; gap: .5rem; }
.macro-gallery.gallery-cols-1 .gallery-container { grid-template-columns: 1fr; } .macro-gallery.gallery-cols-1 .gallery-container { grid-template-columns: 1fr; }

View File

@@ -136,4 +136,51 @@ describe('GenerationRouteRendererFactory', () => {
expect(dayTwoHtml).toContain('Post On Day Two'); expect(dayTwoHtml).toContain('Post On Day Two');
expect(dayTwoHtml).not.toContain('Post On Day One'); 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; }');
});
}); });

View File

@@ -1570,6 +1570,37 @@ describe('PreviewServer', () => {
expect(html).toContain('/media/2025/02/archive.jpg'); 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 () => { it('resolves gallery linked images via post-media links even when media.linkedPostIds is empty', async () => {
const post = makePost({ const post = makePost({
id: 'macro-junction-1', id: 'macro-junction-1',