octocms 0.3.2 → 0.3.4

package/admin/AdminApp.tsx

@@ -0,0 +1,59 @@
+import React, { Suspense } from 'react';
+
+import { CollectionPage } from './pages/CollectionPage';
+import { DashboardPage } from './pages/DashboardPage';
+import { EntryPage } from './pages/EntryPage';
+import { MediaPage } from './pages/MediaPage';
+import { SearchPage } from './pages/SearchPage';
+
+type AdminAppProps = {
+  params: Promise<{ path?: string[] }>;
+};
+
+/**
+ * Catch-all admin router component. Mount this as the default export of a
+ * Next.js optional catch-all route at `src/app/cms/[[...path]]/page.tsx`:
+ *
+ *   export { AdminApp as default } from 'octocms/admin/AdminApp';
+ *
+ * Route segments map to admin pages:
+ *   /cms            → DashboardPage
+ *   /cms/search     → SearchPage
+ *   /cms/media      → MediaPage (library)
+ *   /cms/media/<id> → MediaPage with that asset selected (detail panel)
+ *   /cms/<type>     → CollectionPage
+ *   /cms/<type>/<id>→ EntryPage
+ */
+export function AdminApp({ params }: AdminAppProps) {
+  return (
+    <Suspense fallback={null}>
+      <AdminAppRouter params={params} />
+    </Suspense>
+  );
+}
+
+async function AdminAppRouter({ params }: AdminAppProps) {
+  const { path } = await params;
+  const segments = path ?? [];
+
+  if (segments.length === 0) {
+    return <DashboardPage />;
+  }
+
+  if (segments[0] === 'search') {
+    return <SearchPage />;
+  }
+
+  if (segments[0] === 'media') {
+    const initialMediaId = segments.length >= 2 ? segments[1] : undefined;
+    return <MediaPage initialMediaId={initialMediaId} />;
+  }
+
+  if (segments.length === 1) {
+    const [type] = segments;
+    return <CollectionPage params={Promise.resolve({ type })} />;
+  }
+
+  const [type, id] = segments;
+  return <EntryPage params={Promise.resolve({ type, id })} />;
+}

package/admin/ThemeProvider.test.tsx

@@ -0,0 +1,177 @@
+import { act, render, renderHook, screen } from '@testing-library/react';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { ThemeProvider, useTheme } from './ThemeProvider';
+
+// ---------------------------------------------------------------------------
+// matchMedia mock — must be set before ThemeProvider mounts.
+// ---------------------------------------------------------------------------
+function mockMatchMedia(prefersDark: boolean) {
+  const listeners: ((e: Partial<MediaQueryListEvent>) => void)[] = [];
+
+  const mq = {
+    matches: prefersDark,
+    addEventListener: vi.fn((_: string, fn: (e: Partial<MediaQueryListEvent>) => void) => {
+      listeners.push(fn);
+    }),
+    removeEventListener: vi.fn((_: string, fn: (e: Partial<MediaQueryListEvent>) => void) => {
+      const idx = listeners.indexOf(fn);
+      if (idx !== -1) listeners.splice(idx, 1);
+    }),
+    // Helper to simulate system preference change in tests
+    _emit: (matches: boolean) => {
+      listeners.forEach((fn) => fn({ matches }));
+    },
+  };
+
+  Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn(() => mq),
+  });
+
+  return mq;
+}
+
+// ---------------------------------------------------------------------------
+// Wrapper helper
+// ---------------------------------------------------------------------------
+function wrapper(initialTheme: 'light' | 'dark' | 'system') {
+  return ({ children }: { children: React.ReactNode }) => (
+    <ThemeProvider initialTheme={initialTheme}>{children}</ThemeProvider>
+  );
+}
+
+beforeEach(() => {
+  // Reset document.body classes between tests
+  document.body.className = '';
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+  document.body.className = '';
+});
+
+describe('ThemeProvider', () => {
+  it('renders children', () => {
+    mockMatchMedia(false);
+    render(
+      <ThemeProvider initialTheme="light">
+        <span>hello</span>
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('hello')).toBeTruthy();
+  });
+
+  describe('resolvedTheme', () => {
+    it('is "light" when initialTheme is "light"', () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('light') });
+      expect(result.current.resolvedTheme).toBe('light');
+    });
+
+    it('is "dark" when initialTheme is "dark"', () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('dark') });
+      expect(result.current.resolvedTheme).toBe('dark');
+    });
+
+    it('is "dark" when initialTheme is "system" and system prefers dark', async () => {
+      mockMatchMedia(true);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('system') });
+      // useEffect runs after render; wait for state update
+      await act(async () => {});
+      expect(result.current.resolvedTheme).toBe('dark');
+    });
+
+    it('is "light" when initialTheme is "system" and system prefers light', async () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('system') });
+      await act(async () => {});
+      expect(result.current.resolvedTheme).toBe('light');
+    });
+  });
+
+  describe('setTheme', () => {
+    it('updates theme state', async () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('light') });
+      act(() => {
+        result.current.setTheme('dark');
+      });
+      expect(result.current.theme).toBe('dark');
+      expect(result.current.resolvedTheme).toBe('dark');
+    });
+
+    it('writes to document.cookie', () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('light') });
+      act(() => {
+        result.current.setTheme('dark');
+      });
+      expect(document.cookie).toContain('cms-theme=dark');
+    });
+
+    it('switches back to light', () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('dark') });
+      act(() => {
+        result.current.setTheme('light');
+      });
+      expect(result.current.resolvedTheme).toBe('light');
+    });
+  });
+
+  describe('document.body dark class', () => {
+    it('adds dark class when resolvedTheme is dark', async () => {
+      mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('dark') });
+      await act(async () => {});
+      expect(result.current.resolvedTheme).toBe('dark');
+      expect(document.body.classList.contains('dark')).toBe(true);
+    });
+
+    it('does not add dark class when resolvedTheme is light', async () => {
+      mockMatchMedia(false);
+      renderHook(() => useTheme(), { wrapper: wrapper('light') });
+      await act(async () => {});
+      expect(document.body.classList.contains('dark')).toBe(false);
+    });
+
+    it('removes dark class on unmount', async () => {
+      mockMatchMedia(false);
+      const { unmount } = renderHook(() => useTheme(), { wrapper: wrapper('dark') });
+      await act(async () => {});
+      expect(document.body.classList.contains('dark')).toBe(true);
+      unmount();
+      expect(document.body.classList.contains('dark')).toBe(false);
+    });
+  });
+
+  describe('system preference change', () => {
+    it('resolvedTheme updates when system changes to dark', async () => {
+      const mq = mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('system') });
+      await act(async () => {});
+      expect(result.current.resolvedTheme).toBe('light');
+
+      await act(async () => {
+        mq._emit(true);
+      });
+      expect(result.current.resolvedTheme).toBe('dark');
+    });
+
+    it('resolvedTheme does not respond to system changes when theme is explicitly set', async () => {
+      const mq = mockMatchMedia(false);
+      const { result } = renderHook(() => useTheme(), { wrapper: wrapper('dark') });
+      await act(async () => {});
+      expect(result.current.resolvedTheme).toBe('dark');
+
+      // System changes to light — explicit 'dark' should be unaffected
+      await act(async () => {
+        mq._emit(false);
+      });
+      expect(result.current.resolvedTheme).toBe('dark');
+    });
+  });
+});

package/admin/ThemeProvider.tsx

@@ -0,0 +1,85 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+
+import type { Theme } from './theme';
+import { THEME_COOKIE } from './theme';
+
+type ThemeContextValue = {
+  /** The stored preference: 'light' | 'dark' | 'system' */
+  theme: Theme;
+  /** The applied theme after resolving 'system' via matchMedia */
+  resolvedTheme: 'light' | 'dark';
+  setTheme: (theme: Theme) => void;
+};
+
+const ThemeContext = createContext<ThemeContextValue>({
+  theme: 'system',
+  resolvedTheme: 'light',
+  setTheme: () => {},
+});
+
+/**
+ * Hook to access the current theme state and setter from anywhere inside the CMS.
+ */
+export function useTheme(): ThemeContextValue {
+  return useContext(ThemeContext);
+}
+
+type ThemeProviderProps = {
+  /**
+   * Initial theme value from the SSR-read cookie. Passed from AdminLayout
+   * so the first render already has the correct theme without a hydration flash
+   * for users with an explicit 'light' or 'dark' cookie.
+   */
+  initialTheme: Theme;
+  children: React.ReactNode;
+};
+
+/**
+ * Provides theme state for the CMS admin panel.
+ *
+ * - Resolves 'system' by listening to `prefers-color-scheme`.
+ * - Persists the preference to the `cms-theme` cookie (SameSite=Lax, 1 year).
+ * - Syncs `class="dark"` onto `document.body` so that Radix UI portal
+ *   elements (dropdowns, dialogs) — which are appended to `<body>` — also
+ *   inherit the dark CSS variable scope.
+ *
+ * This provider is only mounted inside `src/app/cms/layout.tsx`, so the
+ * `document.body` class never leaks to public pages.
+ */
+export function ThemeProvider({ initialTheme, children }: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(initialTheme);
+  const [systemDark, setSystemDark] = useState(false);
+
+  // Detect system preference on the client and track changes.
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+    setSystemDark(mq.matches);
+
+    const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
+    mq.addEventListener('change', handler);
+    return () => mq.removeEventListener('change', handler);
+  }, []);
+
+  const resolvedTheme: 'light' | 'dark' = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+
+  // Sync dark class to document.body so Radix portals inherit the dark scope.
+  // Safe: ThemeProvider is only mounted under /cms, never on public pages.
+  // The cleanup removes the class when the CMS layout unmounts (e.g. navigating
+  // from /cms to a public route via client-side navigation).
+  useEffect(() => {
+    document.body.classList.toggle('dark', resolvedTheme === 'dark');
+    return () => {
+      document.body.classList.remove('dark');
+    };
+  }, [resolvedTheme]);
+
+  const setTheme = useCallback((next: Theme) => {
+    setThemeState(next);
+    // Persist to cookie for SSR reads on next page load.
+    document.cookie = `${THEME_COOKIE}=${next};path=/;max-age=31536000;SameSite=Lax`;
+  }, []);
+
+  return <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>{children}</ThemeContext.Provider>;
+}

package/admin/actions/build.test.ts

@@ -0,0 +1,120 @@
+import { revalidatePath, updateTag } from 'next/cache';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { buildJsons } from './build';
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+vi.mock('next/cache', () => ({
+  revalidatePath: vi.fn(),
+  updateTag: vi.fn(),
+}));
+
+vi.mock('../github', () => ({
+  isProductionMode: vi.fn(() => false),
+  saveGitHubFile: vi.fn(),
+}));
+
+vi.mock('fs/promises', () => ({
+  default: {
+    readFile: vi.fn(),
+    mkdir: vi.fn(),
+    writeFile: vi.fn(),
+  },
+}));
+
+vi.mock('glob', () => ({
+  glob: vi.fn(),
+}));
+
+const mockConfig = {
+  contentFolder: 'cms/content',
+  search: {
+    publicCollections: {
+      post: { urlPattern: '/blog/:slug' },
+    },
+  },
+  collections: {
+    post: {
+      label: 'Post',
+      fields: {
+        title: { label: 'Title', format: 'string', entryTitle: true },
+        slug: { label: 'Slug', format: 'slug' },
+      },
+    },
+  },
+} as any;
+
+vi.mock('../../lib/configStore', () => ({ getConfig: () => mockConfig }));
+
+vi.mock('octocms/lib/companionMarkdown', () => ({
+  companionMarkdownPathsForEntry: vi.fn(() => ({})),
+  companionRichTextPathsForEntry: vi.fn(() => ({})),
+}));
+
+vi.mock('octocms/lib/searchIndex', () => ({
+  buildSearchIndex: vi.fn(() => '{}'),
+}));
+
+// ─── buildJsons ───────────────────────────────────────────────────────────────
+
+describe('buildJsons', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns success', async () => {
+    const result = await buildJsons();
+    expect(result).toEqual({ success: true });
+  });
+
+  it('calls updateTag for homePage and blog cache keys', async () => {
+    await buildJsons();
+
+    expect(updateTag).toHaveBeenCalledWith('homePage');
+    expect(updateTag).toHaveBeenCalledWith('blog');
+    expect(vi.mocked(updateTag).mock.calls.length).toBe(2);
+  });
+
+  it('revalidates the standard public page paths', async () => {
+    await buildJsons();
+
+    expect(revalidatePath).toHaveBeenCalledWith('/', 'layout');
+    expect(revalidatePath).toHaveBeenCalledWith('/blog', 'page');
+    expect(revalidatePath).toHaveBeenCalledWith('/blog/[slug]', 'page');
+  });
+
+  it('revalidates slug paths when blogPaths provided', async () => {
+    await buildJsons(undefined, {
+      blogPaths: ['/blog/my-post', '/blog/old-slug'],
+    });
+
+    expect(revalidatePath).toHaveBeenCalledWith('/blog/my-post');
+    expect(revalidatePath).toHaveBeenCalledWith('/blog/old-slug');
+  });
+
+  it('dedupes blogPaths', async () => {
+    await buildJsons(undefined, { blogPaths: ['/blog/x', '/blog/x'] });
+
+    const blogCalls = vi.mocked(revalidatePath).mock.calls.filter(([p]) => p === '/blog/x');
+    expect(blogCalls.length).toBe(1);
+  });
+
+  it('does not call extra revalidatePath for blogPaths when undefined', async () => {
+    await buildJsons();
+
+    const calls = vi.mocked(revalidatePath).mock.calls.map(([p]) => p);
+    expect(calls.filter((p) => p.startsWith('/blog/') && p !== '/blog' && p !== '/blog/[slug]')).toEqual([]);
+  });
+
+  it('returns failure when updateTag throws', async () => {
+    vi.mocked(updateTag).mockImplementationOnce(() => {
+      throw new Error('tag error');
+    });
+
+    const result = await buildJsons();
+    expect(result).toEqual({ success: false, error: 'tag error' });
+  });
+});

package/admin/actions/build.ts

@@ -0,0 +1,139 @@
+'use server';
+
+import fsPromises from 'fs/promises';
+import path from 'path';
+
+import { glob } from 'glob';
+import { revalidatePath, updateTag } from 'next/cache';
+
+import { getConfig } from '../../lib/configStore';
+import { companionMarkdownPathsForEntry, companionRichTextPathsForEntry } from '../../lib/companionMarkdown';
+import { buildSearchIndex, type EntryForSearch } from '../../lib/searchIndex';
+
+import { isProductionMode, saveGitHubFile } from '../github';
+import { actionErr, actionOk, type ActionResult } from './utils';
+
+/** Cache tags used by `getHomePage` / `getBlog` / `getPublishedPosts` in `src/app/cms/ssr/getPageContent.ts`. */
+const PUBLIC_CACHE_TAGS = ['homePage', 'blog'] as const;
+
+const SEARCH_INDEX_FILE_PATH = 'cms/__generated__/search-index.json';
+
+export type BuildJsonsOptions = {
+  /** Slug-based `/blog/...` paths to revalidate in addition to the dynamic route segment. */
+  blogPaths?: string[];
+};
+
+/** Helper: gather all searchable entries from the filesystem. */
+async function getEntriesForPublicSearch(): Promise<EntryForSearch[]> {
+  const config = getConfig();
+  const publicCollections = config.search?.publicCollections;
+  if (!publicCollections || Object.keys(publicCollections).length === 0) {
+    return [];
+  }
+
+  const files = await glob(`${config.contentFolder}/**/*.json`);
+  const entries: EntryForSearch[] = [];
+
+  for (const file of files) {
+    const normalized = file.replace(/\\/g, '/');
+    // Skip media entries
+    if (normalized.includes('/media/')) continue;
+
+    try {
+      const filePath = path.join(process.cwd(), normalized);
+      const data = await fsPromises.readFile(filePath, { encoding: 'utf8' });
+      const content = JSON.parse(data) as Record<string, unknown>;
+      const sys = content.sys as { type?: string } | undefined;
+      const type = sys?.type;
+
+      // Only include entries from publicCollections
+      if (!type || !(type in publicCollections)) continue;
+
+      // Read companion markdown/richtext files
+      const companions: Record<string, string> = {};
+      if (type) {
+        const mdPaths = companionMarkdownPathsForEntry(normalized, type, config.collections);
+        for (const [fieldName, mdPath] of Object.entries(mdPaths)) {
+          try {
+            const mdFilePath = path.join(process.cwd(), mdPath);
+            companions[fieldName] = await fsPromises.readFile(mdFilePath, { encoding: 'utf8' });
+          } catch {
+            companions[fieldName] = '';
+          }
+        }
+        const rtPaths = companionRichTextPathsForEntry(normalized, type, config.collections);
+        for (const [fieldName, rtPath] of Object.entries(rtPaths)) {
+          try {
+            const rtFilePath = path.join(process.cwd(), rtPath);
+            companions[fieldName] = await fsPromises.readFile(rtFilePath, { encoding: 'utf8' });
+          } catch {
+            companions[fieldName] = '';
+          }
+        }
+      }
+
+      entries.push({
+        path: normalized.replace(`${config.contentFolder}/`, ''),
+        content,
+        companionContent: companions,
+      });
+    } catch {
+      // Skip unreadable files
+    }
+  }
+
+  return entries;
+}
+
+/** Build and write the public search index. */
+async function buildAndWriteSearchIndex(): Promise<void> {
+  const config = getConfig();
+  const publicCollections = config.search?.publicCollections;
+  if (!publicCollections || Object.keys(publicCollections).length === 0) {
+    return;
+  }
+
+  try {
+    const entries = await getEntriesForPublicSearch();
+    const indexJson = buildSearchIndex(entries, config, Object.keys(publicCollections));
+
+    if (isProductionMode()) {
+      // Write to GitHub
+      await saveGitHubFile(SEARCH_INDEX_FILE_PATH, indexJson, 'CMS: update search index');
+    } else {
+      // Write to local filesystem
+      const filePath = path.join(process.cwd(), SEARCH_INDEX_FILE_PATH);
+      await fsPromises.mkdir(path.dirname(filePath), { recursive: true });
+      await fsPromises.writeFile(filePath, indexJson, 'utf8');
+    }
+  } catch {
+    // Silently fail search index generation to not block the build
+  }
+}
+
+export const buildJsons = async (_editedFileName?: string, options?: BuildJsonsOptions): Promise<ActionResult> => {
+  try {
+    for (const tag of PUBLIC_CACHE_TAGS) {
+      updateTag(tag);
+    }
+
+    revalidatePath('/', 'layout');
+    revalidatePath('/blog', 'page');
+    revalidatePath('/blog/[slug]', 'page');
+
+    const seen = new Set<string>();
+    for (const p of options?.blogPaths ?? []) {
+      if (typeof p === 'string' && p.startsWith('/blog/') && !seen.has(p)) {
+        seen.add(p);
+        revalidatePath(p);
+      }
+    }
+
+    // Build and write the public search index
+    await buildAndWriteSearchIndex();
+
+    return actionOk();
+  } catch (e) {
+    return actionErr(e);
+  }
+};