* feat(admin): add backup manager UI with 1-click restore * feat(admin): collapse older backup entries by default * fix(theme): isolate admin layout, instant DOM theme updates, and add Light/Dark mode toggle * feat(admin): replace text controls for Photo Frame and Hero Style with visual preview cards * fix(admin): define missing CSS rules for button system (.btn, .preset-btn) * feat(admin): redesign theme settings with segmented mode toggle, accent color swatches, and custom iOS-style toggle cards * feat(admin): upgrade all settings tabs with visual grid previews, Google SEO snippet preview, and toggle cards * feat(admin): overhaul Pages Builder UX with slide-over drawer, card hover badges, real-time search, and floating save bar * fix(admin): remove leftover dangling syntax snippet in PageBuilder.tsx * fix(admin): add position: relative to subpage-tile so hover overlay is contained inside the tile * style(admin): replace all emojis with clean Leica-style vector SVG icons * fix(types): extend IconProps with SVGProps to allow style prop on Leica SVG icons * feat(admin): add subpage live-preview, privacy analytics, and asset protection settings * fix(typecheck): fix AlbumEntry property access in subpage drawer preview mode * fix(types): fix ImmichAlbumInfo property names thumbnailAssetId and albumName in PageBuilder.tsx * fix(types): add protection and watermark optional properties to AppConfig interface * feat(settings): add toggle for disabling analytics tracking (defaults to enabled) * feat(ux): show status banner when analytics tracking is disabled + add live sync indicator * feat(watermark): render customizable watermark overlay on Lightbox images + rename section to Portfolio Features & Modules * fix(types): import type LightboxWatermark in PhotoGrid.tsx * fix(types): destructure watermark prop in PhotoGrid function signature * feat(seo): add configurable subpage title template and metadata descriptions * feat(seo): add generateMetadata to about page for title template support * feat(proofing): add client proofing, favorites selection, compact URL bitmasking, and export modal * feat(essay): add Photo Essay storytelling mode with RSC markdown parser and fullbleed/pair layouts * feat(subpages): add page enabled toggle to deactivate subpages without deleting them * feat(admin): add visual essay block builder for photo essay storytelling pages * security: add Trivy container scan to Docker publish workflow Scans the built image for CRITICAL/HIGH CVEs on every release and uploads results to the GitHub Security tab. Non-blocking for now (exit-code 0) so releases aren't gated on findings. Also documents the scan and existing Dependabot coverage in the README. --------- Co-authored-by: ralksta <ralksta@users.noreply.github.com>
274 lines
8.8 KiB
TypeScript
274 lines
8.8 KiB
TypeScript
export interface EssayFrontmatter {
|
|
title?: string;
|
|
subtitle?: string;
|
|
date?: string;
|
|
author?: string;
|
|
coverAssetId?: string;
|
|
layout?: string;
|
|
}
|
|
|
|
export type EssayBlock =
|
|
| { type: 'heading'; level: number; text: string }
|
|
| { type: 'paragraph'; html: string }
|
|
| { type: 'quote'; text: string; author?: string }
|
|
| { type: 'photo'; assetId: string; caption?: string; layout: 'fullbleed' | 'wide' | 'contained' }
|
|
| { type: 'photo-pair'; assetIds: [string, string]; caption?: string };
|
|
|
|
export interface ParsedEssay {
|
|
frontmatter: EssayFrontmatter;
|
|
blocks: EssayBlock[];
|
|
referencedAssetIds: string[];
|
|
}
|
|
|
|
/** Sanitize inline HTML strings to prevent XSS attacks in essay blocks */
|
|
export function sanitizeHtml(input: string): string {
|
|
return input
|
|
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
|
.replace(/on\w+="[^"]*"/gi, '')
|
|
.replace(/javascript:/gi, '');
|
|
}
|
|
|
|
/** Simple Markdown inline formatting (bold, italic, links, code) */
|
|
export function renderInlineMarkdown(text: string): string {
|
|
let html = sanitizeHtml(text);
|
|
// Bold: **text** or __text__
|
|
html = html.replace(/(\*\*|__)(.*?)\1/g, '<strong>$2</strong>');
|
|
// Italic: *text* or _text_
|
|
html = html.replace(/(\*|_)(.*?)\1/g, '<em>$2</em>');
|
|
// Links: [label](url)
|
|
html = html.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (match, label, url) => {
|
|
const safeUrl = url.trim().replace(/^javascript:/i, '');
|
|
return `<a href="${safeUrl}" target="_blank" rel="noopener noreferrer">${label}</a>`;
|
|
});
|
|
return html;
|
|
}
|
|
|
|
/** Parse frontmatter (YAML block delimited by ---) */
|
|
export function parseFrontmatter(content: string): { frontmatter: EssayFrontmatter; body: string } {
|
|
const frontmatterMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---\r?\n?/);
|
|
if (!frontmatterMatch) {
|
|
return { frontmatter: {}, body: content };
|
|
}
|
|
|
|
const rawYaml = frontmatterMatch[1];
|
|
const body = content.slice(frontmatterMatch[0].length);
|
|
const frontmatter: EssayFrontmatter = {};
|
|
|
|
for (const line of rawYaml.split('\n')) {
|
|
const trimmed = line.trim();
|
|
if (!trimmed || trimmed.startsWith('#')) continue;
|
|
const colonIdx = trimmed.indexOf(':');
|
|
if (colonIdx === -1) continue;
|
|
|
|
const key = trimmed.slice(0, colonIdx).trim();
|
|
let val = trimmed.slice(colonIdx + 1).trim();
|
|
if ((val.startsWith('"') && val.endsWith('"')) || (val.startsWith("'") && val.endsWith("'"))) {
|
|
val = val.slice(1, -1);
|
|
}
|
|
|
|
if (key === 'title') frontmatter.title = val;
|
|
else if (key === 'subtitle') frontmatter.subtitle = val;
|
|
else if (key === 'date') frontmatter.date = val;
|
|
else if (key === 'author') frontmatter.author = val;
|
|
else if (key === 'coverAssetId') frontmatter.coverAssetId = val;
|
|
else if (key === 'layout') frontmatter.layout = val;
|
|
}
|
|
|
|
return { frontmatter, body };
|
|
}
|
|
|
|
/** Parse Essay Markdown content into structured blocks */
|
|
export function parseEssayMarkdown(rawContent: string): ParsedEssay {
|
|
const { frontmatter, body } = parseFrontmatter(rawContent);
|
|
const blocks: EssayBlock[] = [];
|
|
const referencedAssetIds = new Set<string>();
|
|
|
|
if (frontmatter.coverAssetId) {
|
|
referencedAssetIds.add(frontmatter.coverAssetId);
|
|
}
|
|
|
|
// Split body into paragraph chunks separated by blank lines
|
|
const chunks = body
|
|
.split(/\r?\n\s*\r?\n/)
|
|
.map((c) => c.trim())
|
|
.filter(Boolean);
|
|
|
|
for (const chunk of chunks) {
|
|
// 1. Headings (# H1, ## H2, ### H3)
|
|
const headingMatch = chunk.match(/^(#{1,6})\s+(.+)$/);
|
|
if (headingMatch) {
|
|
blocks.push({
|
|
type: 'heading',
|
|
level: headingMatch[1].length,
|
|
text: headingMatch[2].trim(),
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// 2. Blockquote (> Quote text)
|
|
if (chunk.startsWith('>')) {
|
|
const quoteText = chunk
|
|
.split('\n')
|
|
.map((l) => l.replace(/^>\s?/, ''))
|
|
.join(' ')
|
|
.trim();
|
|
|
|
// Check for quote author (-- Author Name)
|
|
const authorMatch = quoteText.match(/^(.*?)(?:\s+--\s+(.+))?$/);
|
|
if (authorMatch) {
|
|
blocks.push({
|
|
type: 'quote',
|
|
text: renderInlineMarkdown(authorMatch[1]),
|
|
author: authorMatch[2] ? authorMatch[2].trim() : undefined,
|
|
});
|
|
}
|
|
continue;
|
|
}
|
|
|
|
// 3. Image syntax:  or 
|
|
const imgMatch = chunk.match(/^!\[([^\]]+)\]\(([^)]*)\)$/);
|
|
if (imgMatch) {
|
|
const rawTarget = imgMatch[1].trim();
|
|
const caption = imgMatch[2].trim() ? renderInlineMarkdown(imgMatch[2].trim()) : undefined;
|
|
|
|
// Side-by-side pair: 
|
|
if (rawTarget.includes(',')) {
|
|
const parts = rawTarget.split(',').map((s) => s.trim());
|
|
if (parts.length >= 2) {
|
|
const id1 = parts[0];
|
|
const id2 = parts[1];
|
|
referencedAssetIds.add(id1);
|
|
referencedAssetIds.add(id2);
|
|
blocks.push({
|
|
type: 'photo-pair',
|
|
assetIds: [id1, id2],
|
|
caption,
|
|
});
|
|
continue;
|
|
}
|
|
}
|
|
|
|
// Single photo: 
|
|
let assetId = rawTarget;
|
|
let layout: 'fullbleed' | 'wide' | 'contained' = 'contained';
|
|
|
|
if (rawTarget.includes(':')) {
|
|
const [id, l] = rawTarget.split(':');
|
|
assetId = id.trim();
|
|
const normLayout = l.trim().toLowerCase();
|
|
if (normLayout === 'fullbleed') layout = 'fullbleed';
|
|
else if (normLayout === 'wide') layout = 'wide';
|
|
}
|
|
|
|
referencedAssetIds.add(assetId);
|
|
blocks.push({
|
|
type: 'photo',
|
|
assetId,
|
|
caption,
|
|
layout,
|
|
});
|
|
continue;
|
|
}
|
|
|
|
// 4. Standard Text Paragraph
|
|
blocks.push({
|
|
type: 'paragraph',
|
|
html: renderInlineMarkdown(chunk.replace(/\r?\n/g, ' ')),
|
|
});
|
|
}
|
|
|
|
return {
|
|
frontmatter,
|
|
blocks,
|
|
referencedAssetIds: Array.from(referencedAssetIds),
|
|
};
|
|
}
|
|
|
|
/** Load and parse an essay file from content/essays/ */
|
|
export function loadEssayFromFile(filename: string): ParsedEssay | null {
|
|
if (typeof window !== 'undefined') return null;
|
|
try {
|
|
// Dynamic require for Node.js modules so client bundler doesn't fail
|
|
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
const nodeFs = require('fs');
|
|
// eslint-disable-next-line @typescript-eslint/no-require-imports
|
|
const nodePath = require('path');
|
|
|
|
const filePath = nodePath.isAbsolute(filename)
|
|
? filename
|
|
: nodePath.join(process.cwd(), 'content', 'essays', filename);
|
|
|
|
if (!nodeFs.existsSync(filePath)) {
|
|
console.warn(`[Essay] File not found: ${filePath}`);
|
|
return null;
|
|
}
|
|
|
|
const content = nodeFs.readFileSync(filePath, 'utf-8');
|
|
return parseEssayMarkdown(content);
|
|
} catch (error) {
|
|
console.error(`[Essay] Failed to load essay file "${filename}":`, error);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
/** Converts a ParsedEssay structure back into clean Markdown syntax */
|
|
export function serializeEssayMarkdown(essay: ParsedEssay): string {
|
|
const lines: string[] = [];
|
|
|
|
// Frontmatter
|
|
const fmKeys = Object.keys(essay.frontmatter) as Array<keyof EssayFrontmatter>;
|
|
if (fmKeys.length > 0 && fmKeys.some((k) => essay.frontmatter[k])) {
|
|
lines.push('---');
|
|
for (const key of fmKeys) {
|
|
const val = essay.frontmatter[key];
|
|
if (val) {
|
|
lines.push(`${key}: "${val.replace(/"/g, '\\"')}"`);
|
|
}
|
|
}
|
|
lines.push('---');
|
|
lines.push('');
|
|
}
|
|
|
|
// Blocks
|
|
for (const block of essay.blocks) {
|
|
switch (block.type) {
|
|
case 'heading': {
|
|
const hashes = '#'.repeat(Math.min(Math.max(block.level, 1), 6));
|
|
lines.push(`${hashes} ${block.text}`);
|
|
break;
|
|
}
|
|
case 'paragraph': {
|
|
const text = block.html.replace(/<[^>]+>/g, (tag) => {
|
|
if (tag.startsWith('<strong>') || tag.startsWith('<b>')) return '**';
|
|
if (tag.startsWith('</strong>') || tag.startsWith('</b>')) return '**';
|
|
if (tag.startsWith('<em>') || tag.startsWith('<i>')) return '*';
|
|
if (tag.startsWith('</em>') || tag.startsWith('</i>')) return '*';
|
|
return '';
|
|
});
|
|
lines.push(text);
|
|
break;
|
|
}
|
|
case 'quote': {
|
|
const authorSuffix = block.author ? ` -- ${block.author}` : '';
|
|
const text = block.text.replace(/<[^>]+>/g, '');
|
|
lines.push(`> ${text}${authorSuffix}`);
|
|
break;
|
|
}
|
|
case 'photo': {
|
|
const layoutSuffix = block.layout !== 'contained' ? `:${block.layout}` : '';
|
|
const caption = block.caption ? block.caption.replace(/<[^>]+>/g, '') : '';
|
|
lines.push(``);
|
|
break;
|
|
}
|
|
case 'photo-pair': {
|
|
const caption = block.caption ? block.caption.replace(/<[^>]+>/g, '') : '';
|
|
lines.push(`![${block.assetIds[0]}, ${block.assetIds[1]}](${caption})`);
|
|
break;
|
|
}
|
|
}
|
|
lines.push('');
|
|
}
|
|
|
|
return lines.join('\n').trim();
|
|
}
|