fix: youtube macro gets some spacing aftert the player
This commit is contained in:
@@ -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; }
|
||||||
|
|||||||
@@ -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; }');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -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',
|
||||||
|
|||||||
Reference in New Issue
Block a user