hugo/bDS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: style editor for blog

Browse Source
This commit is contained in:
hugo
2026-02-20 20:24:37 +01:00
parent 23facaa36d
commit eeffa247bb
33 changed files with 817 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
tests/engine/MetaEngine.test.ts
View File

@@ -580,6 +580,33 @@ describe('MetaEngine', () => {
expect(metadata?.defaultAuthor).toBe('Loaded Author');
});
it('should persist picoTheme to filesystem', async () => {
await metaEngine.setProjectMetadata({
name: 'Styled Project',
picoTheme: 'slate',
} as any);
const metaDir = metaEngine.getMetaDir();
const projectPath = normalizePath(`${metaDir}/project.json`);
const content = mockFiles.get(projectPath);
const parsed = JSON.parse(content!);
expect(parsed.picoTheme).toBe('slate');
});
it('should load picoTheme from filesystem', async () => {
const metaDir = metaEngine.getMetaDir();
const projectPath = normalizePath(`${metaDir}/project.json`);
mockFiles.set(projectPath, JSON.stringify({
name: 'Loaded Project',
picoTheme: 'zinc',
}));
await metaEngine.loadProjectMetadata();
const metadata = await metaEngine.getProjectMetadata();
expect((metadata as any)?.picoTheme).toBe('zinc');
});
it('should set and get maxPostsPerPage in project metadata', async () => {
await metaEngine.setProjectMetadata({
name: 'My Blog',

56
tests/engine/PreviewServer.test.ts
View File

@@ -196,6 +196,60 @@ describe('PreviewServer', () => {
expect(lightboxLoadingImageResponse.headers.get('content-type')).toContain('image/gif');
});
it('uses selected pico theme stylesheet from project metadata', async () => {
server = new PreviewServer({
postEngine: makeEngine([makePost()]),
settingsEngine: {
setProjectContext: vi.fn(),
async getProjectMetadata() {
return {
maxPostsPerPage: 50,
picoTheme: 'slate',
};
},
} as any,
getActiveProjectContext: async () => ({ projectId: 'default' }),
});
await server.start(0);
const rootResponse = await fetch(`${server.getBaseUrl()}/`);
expect(rootResponse.status).toBe(200);
const rootHtml = await rootResponse.text();
expect(rootHtml).toContain('href="/assets/pico.slate.min.css"');
expect(rootHtml).not.toContain('href="/assets/pico.min.css"');
const themedCss = await fetch(`${server.getBaseUrl()}/assets/pico.slate.min.css`);
expect(themedCss.status).toBe(200);
expect(themedCss.headers.get('content-type')).toContain('text/css');
});
it('supports preview mode override for style preview route', async () => {
server = new PreviewServer({
postEngine: makeEngine([makePost()]),
settingsEngine: {
setProjectContext: vi.fn(),
async getProjectMetadata() {
return {
maxPostsPerPage: 50,
picoTheme: 'slate',
};
},
} as any,
getActiveProjectContext: async () => ({ projectId: 'default' }),
});
await server.start(0);
const response = await fetch(`${server.getBaseUrl()}/__style-preview?theme=slate&mode=dark`);
expect(response.status).toBe(200);
const html = await response.text();
expect(html).toContain('<html lang="en" data-theme="dark">');
expect(html).toContain('href="/assets/pico.slate.min.css"');
});
it('limits list routes to 50 posts', async () => {
const posts = Array.from({ length: 60 }).map((_, index) =>
makePost({
@@ -279,7 +333,7 @@ describe('PreviewServer', () => {
expect(separatorCount).toBe(1);
expect(html).toContain('.archive-day-separator { position: relative; height: 2px;');
expect(html).toContain('color: var(--color);');
expect(html).toContain('color: var(--pico-color, var(--color));');
expect(html).toContain('border-top: 1px solid currentColor;');
expect(html).toContain('opacity: .18;');
expect(html).toContain('.archive-day-separator::before');

22
tests/renderer/components/PagesShortcut.test.tsx
View File

@@ -156,4 +156,26 @@ describe('Pages shortcut UI', () => {
expect(wrappers.length).toBeGreaterThanOrEqual(2);
expect((wrappers[0] as HTMLElement).style.display).toBe('flex');
});
it('opens style tab from settings sidebar navigation', async () => {
useAppStore.setState({
sidebarVisible: true,
tabs: [],
activeTabId: null,
});
useAppStore.getState().setActiveView('settings');
render(<Sidebar />);
const styleButton = await screen.findByRole('button', { name: /style/i });
styleButton.click();
const state = useAppStore.getState();
expect(state.tabs).toEqual(
expect.arrayContaining([
expect.objectContaining({ type: 'style', id: 'style' }),
])
);
expect(state.activeTabId).toBe('style');
});
});

28
tests/renderer/components/StatusBar.test.tsx Normal file
View File

@@ -0,0 +1,28 @@
import React from 'react';
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { StatusBar } from '../../../src/renderer/components/StatusBar/StatusBar';
import { useAppStore } from '../../../src/renderer/store';
vi.mock('../../../src/renderer/components/ProjectSelector', () => ({
ProjectSelector: () => <div data-testid="project-selector">Project</div>,
}));
describe('StatusBar', () => {
beforeEach(() => {
vi.clearAllMocks();
useAppStore.setState({
media: [],
tasks: [],
selectedPostId: null,
totalPosts: 0,
picoTheme: 'slate',
} as any);
});
it('shows the currently applied theme', () => {
render(<StatusBar />);
expect(screen.getByText('Theme: slate')).toBeInTheDocument();
});
});

78
tests/renderer/components/StyleView.test.tsx Normal file
View File

@@ -0,0 +1,78 @@
import React from 'react';
import { describe, it, expect, beforeEach, vi } from 'vitest';
import { fireEvent, render, screen } from '@testing-library/react';
import { StyleView } from '../../../src/renderer/components/StyleView/StyleView';
import { useAppStore } from '../../../src/renderer/store';
describe('StyleView', () => {
beforeEach(() => {
vi.clearAllMocks();
useAppStore.setState({
activeProject: {
id: 'project-1',
name: 'Test Project',
slug: 'test-project',
isActive: true,
createdAt: new Date().toISOString(),
updatedAt: new Date().toISOString(),
},
picoTheme: 'slate',
} as any);
(window as any).electronAPI = {
...(window as any).electronAPI,
meta: {
...(window as any).electronAPI?.meta,
getProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'slate' }),
updateProjectMetadata: vi.fn().mockResolvedValue({ picoTheme: 'blue' }),
},
};
});
it('lets users select a theme and apply it', async () => {
render(<StyleView />);
const blueButton = await screen.findByRole('button', { name: /blue/i });
fireEvent.click(blueButton);
const applyButton = screen.getByRole('button', { name: /apply theme/i });
fireEvent.click(applyButton);
expect((window as any).electronAPI.meta.updateProjectMetadata).toHaveBeenCalledWith(
expect.objectContaining({ picoTheme: 'blue' })
);
});
it('renders the style preview iframe for top posts with selected theme', async () => {
render(<StyleView />);
const iframe = await screen.findByTitle('Theme preview');
expect(iframe.getAttribute('src')).toContain('/__style-preview');
expect(iframe.getAttribute('src')).toContain('theme=slate');
expect(iframe.getAttribute('src')).toContain('mode=auto');
});
it('lets users force dark/light mode for preview iframe', async () => {
render(<StyleView />);
const modeSelect = await screen.findByLabelText(/preview mode/i);
fireEvent.change(modeSelect, { target: { value: 'dark' } });
const iframe = await screen.findByTitle('Theme preview');
expect(iframe.getAttribute('src')).toContain('mode=dark');
});
it('renders each theme swatch with accent, light, and dark tones', async () => {
const { container } = render(<StyleView />);
await screen.findByRole('button', { name: /blue/i });
const blueSwatch = container.querySelector('.style-theme-swatch-blue');
expect(blueSwatch).not.toBeNull();
const tones = blueSwatch?.querySelectorAll('.style-theme-tone') ?? [];
expect(tones.length).toBe(3);
expect(blueSwatch?.textContent).toContain('Blue');
});
});

11
tests/renderer/components/TabBar.test.tsx
View File

@@ -86,4 +86,15 @@ describe('TabBar', () => {
expect(container.querySelector('.tab-bar')).toBeNull();
});
it('renders style tab label', async () => {
useAppStore.setState({
tabs: [{ type: 'style', id: 'style', isTransient: false }],
activeTabId: 'style',
});
render(<TabBar />);
expect(await screen.findByText('Style')).toBeInTheDocument();
});
});

3
tests/renderer/documentationStructure.test.ts
View File

@@ -23,7 +23,8 @@ describe('documentation structure and presentation', () => {
);
const source = readFileSync(viewPath, 'utf8');
expect(source).toContain('@picocss/pico/css/pico.conditional.slate.min.css');
expect(source).toContain('ensureRendererPicoThemeStylesheet');
expect(source).toContain('getRendererPicoTheme');
expect(source).toContain('className="documentation-content markdown-body pico"');
expect(source).toContain('data-theme="auto"');
});

23
tests/renderer/store/tabStore.test.ts
View File

@@ -343,6 +343,29 @@ describe('Tab Management', () => {
expect(getStore().tabs).toHaveLength(1);
});
it('should open style as a dedicated tab', () => {
getStore().openTab({ type: 'style', id: 'style', isTransient: false });
expect(getStore().tabs).toHaveLength(1);
expect(getStore().tabs[0].type).toBe('style');
expect(getStore().activeTabId).toBe('style');
});
it('should restore style tab from persisted state', () => {
const tabState = {
tabs: [
{ type: 'style' as const, id: 'style', isTransient: false },
],
activeTabId: 'style',
};
getStore().restoreTabState(tabState);
expect(getStore().tabs).toHaveLength(1);
expect(getStore().tabs[0].type).toBe('style');
expect(getStore().activeTabId).toBe('style');
});
});
describe('Multiple Tab Types', () => {