release: v0.18.0 (#725)
Release v0.18.0 — merges `dev` into `main`. ## Thanks - [@lancetm714](https://github.com/lancetm714) for the accent-contrast fix (#680 → #724). - [@RichKidsDev](https://github.com/RichKidsDev) for reporting the outdated Impressum (#697). ### Security - **Journal drafts and password-protected entries no longer render publicly as a subpage essay** ([#684](https://github.com/ralksta/immich-folio/pull/684), [GHSA-987w-cpwm-c9g9](https://github.com/ralksta/immich-folio/security/advisories/GHSA-987w-cpwm-c9g9), medium). A subpage's `essayFile` read the journal entry straight from disk, skipping the draft and password rules `/journal/<slug>` applies. It now resolves through the same rules: a draft reads as missing for visitors, and a protected entry shows its password gate, sharing the `lb_auth_journal_<slug>` cookie. - **Immich descriptions are escaped in generated subpage essays** ([#684](https://github.com/ralksta/immich-folio/pull/684), [GHSA-8ppx-39jv-q5xm](https://github.com/ralksta/immich-folio/security/advisories/GHSA-8ppx-39jv-q5xm), low). The essay built from a subpage's albums (`layout: essay` without markdown) put each asset's Immich description into the page as raw HTML. Captions are now HTML-escaped, and they go through `assetCaption()`, so `exif.caption: false` is respected there as well. Tracked in [#689](https://github.com/ralksta/immich-folio/issues/689). - **Admin drafts no longer keep a typed password, and the contact form's email check runs in linear time** ([#727](https://github.com/ralksta/immich-folio/pull/727)). The admin's session drafts wrote a password as typed to `sessionStorage`; a draft holding a plaintext password is now not kept (the unsaved-changes guard still warns). The email pattern could backtrack polynomially on a crafted domain; its labels now exclude the dot and the length is checked first. Both found by CodeQL before release. ### Added - **A built-in contact form with an inbox in the admin** ([#703](https://github.com/ralksta/immich-folio/pull/703), closes [#702](https://github.com/ralksta/immich-folio/issues/702)). `/contact` needs neither SMTP nor a form service: each message is one file in `content/messages/` (mode `0600`), read under the new _Messages_ tab, where _Reply by email_ opens the owner's mail client with the message quoted. Messages older than `contact.retentionDays` (default 90) are deleted. An optional ntfy push goes to `contact.notifyUrl` or `CONTACT_NOTIFY_URL`, and since [#709](https://github.com/ralksta/immich-folio/pull/709) it carries a fixed "new message" line and nothing about the sender — no name, no address, no text. Spam is kept out without a captcha: an off-screen honeypot, a minimum fill time, three submissions a minute per IP and a cap of 500 stored messages. With the Impressum on and no `legal.contactUrl`, the Impressum links the form as its second contact channel. A new doctor check warns when the form is on but nobody is notified. - **A privacy policy page, next to a list of what the site processes** ([#708](https://github.com/ralksta/immich-folio/pull/708)). `/privacy` renders `content/privacy.md`, edited under Settings → Legal, and the footer links it once the file has text; `privacy.enabled: false` hides it. Folio writes no legal text. Beside the editor it lists what _this_ installation does, read off the configuration — the map, statistics, contact form, password cookies, CDN — and marks every entry that involves a third party. _Insert headings_ adds the matching section headings and nothing else. The doctor warns while the Impressum is on and there is no policy. - **French, Spanish, Italian and Dutch interface translations** ([#681](https://github.com/ralksta/immich-folio/pull/681)), selected with `settings.yaml: lang` as before. The admin panel stays English. - **CDN mode for photos and videos** ([#681](https://github.com/ralksta/immich-folio/pull/681)). With `CDN_URL` set, image and video URLs point at a pull CDN whose origin is this server, so repeat views reach neither the server nor Immich. A site password switches the mode off, since a CDN would hand out cached photos without checking the unlock cookie. The CDN origin is added to the CSP, and a doctor check covers the password and `TRUSTED_PROXY_HOPS` cases. See `docs/deployment.md#cdn-mode`. - **A reworked admin panel** ([#712](https://github.com/ralksta/immich-folio/pull/712), [#713](https://github.com/ralksta/immich-folio/pull/713), [#714](https://github.com/ralksta/immich-folio/pull/714), [#716](https://github.com/ralksta/immich-folio/pull/716), [#717](https://github.com/ralksta/immich-folio/pull/717), [#718](https://github.com/ralksta/immich-folio/pull/718), [#719](https://github.com/ralksta/immich-folio/pull/719), [#721](https://github.com/ralksta/immich-folio/pull/721)): - **A sidebar instead of the header row**, grouped by task, with an unread count on Messages and a dot on Diagnostics while Immich is down. It collapses to an icon rail, with names shown on hover and focus, and remembers that per browser. - **`/admin` is an overview**: what needs attention (unread messages, doctor warnings), published pages, journal entries and recent views. - **The site's own visual language** — the preset's fonts, hairline borders, the square marker — and one page header on every screen. The accent is kept for the current place and the primary action; switches are now pills reading ON or OFF, in green rather than the accent, so Studio Modern's red no longer makes an enabled setting look like an error. - **The page builder is a structure list and a panel.** Hero, subpages and standalone albums sit in one list on the left, subpages drag-sorted in place; the selected entry is edited on the right instead of in an overlay. - **Dialogs only where a change is permanent.** Deleting a message or a journal entry, and resetting the favicon (which used to delete the file without asking), go through one confirm dialog in the admin's own look. Removals in the page builder, which only touch unsaved state, happen at once and offer _Undo_. No `window.confirm()` is left. - **Feature switches are grouped by meaning** as one-line rows under Settings → General; page transitions and scroll-to-top moved to Theme → Look & motion. No setting keys changed. ### Changed - **Fonts and the Leaflet stylesheet are served from the site itself** ([#700](https://github.com/ralksta/immich-folio/pull/700)). Every page used to link `fonts.googleapis.com`, which sends each visitor's IP address to Google. The server now fetches a theme's Google fonts once, rewrites the stylesheet and caches the files in `content/.fonts/`; custom fonts in `theme.fonts` keep working. If Google cannot be reached before a font is cached, the page falls back to the theme's system fonts. `leaflet.css` comes from the npm package instead of unpkg. The CSP drops `fonts.googleapis.com`, `fonts.gstatic.com` and `unpkg.com`. - **Email addresses are kept out of the served HTML** ([#705](https://github.com/ralksta/immich-folio/pull/705)). The Impressum and footer render the address only after hydration, from an encoded form, so harvesters reading raw HTML find nothing. Without JavaScript the Impressum shows `name [at] example [dot] de`. This defeats bulk harvesting, not a person with a browser. - **The Impressum cites § 5 DDG and links its contacts** ([#698](https://github.com/ralksta/immich-folio/pull/698), reported in [#697](https://github.com/ralksta/immich-folio/issues/697) by [@RichKidsDev](https://github.com/RichKidsDev)). The TMG was replaced by the DDG in May 2024; `legal.heading` replaces the line for other laws (e.g. § 5 ECG in Austria). `legal.contactUrl` and `legal.contactLabel` add a contact form as the second channel, so a phone number stays optional. Email, phone and contact URL are now links, and the "Created with the Impressum generator by eRecht24" line, shown on every site whether true or not, is gone. Settings → Legal gains fields for heading, contact URL, VAT ID and tax number, and a doctor check flags missing details. - **Missing pages answer `404`** ([#704](https://github.com/ralksta/immich-folio/pull/704)). Every missing page used to answer `200`, because streaming had started before `notFound()` ran. `/contact`, `/impressum`, `/map` and `/privacy` while switched off, and `/journal/<slug>` without an entry, now return a real 404 with the same not-found page. Album and subpage slugs still depend on Immich and stay soft 404s. - **Passwords set in the admin are stored as scrypt hashes** ([#706](https://github.com/ralksta/immich-folio/pull/706), closes [#690](https://github.com/ralksta/immich-folio/issues/690)). Subpage, album, journal-entry and site passwords were written as typed. The save routes now hash them; a stored hash reads _Protected_ with _Change_ and _Remove_ and is never put into an input. Visitors who unlocked a page stay signed in across unrelated saves. Existing plaintext passwords are hashed the next time their file is saved in the admin. - **One notification surface in the admin** ([#707](https://github.com/ralksta/immich-folio/pull/707)) replaces every `alert()`: errors stay until dismissed, successes clear themselves, and screen readers announce both. ### Fixed - **Map tiles load again** ([#701](https://github.com/ralksta/immich-folio/pull/701)). CARTO started answering every tile with an "API KEY REQUIRED" image, leaving `/map` and journal map blocks as a grey grid. Tiles now come from OpenStreetMap; the dark look is a CSS filter, so the map now follows the colour mode. - **The page builder no longer drops a subpage's `proofing:` flag on save** ([#711](https://github.com/ralksta/immich-folio/pull/711)). A page switched off for proofing by hand reverted after any unrelated edit. - **Unsaved edits in Settings and About survive switching admin tabs, and a backup restore is no longer overwritten by the next save** ([#687](https://github.com/ralksta/immich-folio/pull/687)). Editors that were open during a restore now reload and offer unsaved edits back as a conflict. Also: "Restore my changes" after a conflict found nothing, removing an album left its drawer showing the next album, and the journal saved (rotating a backup) without changes. - **Accent-backed buttons stay readable with a light or malformed accent** ([#724](https://github.com/ralksta/immich-folio/pull/724), supersedes [#680](https://github.com/ralksta/immich-folio/pull/680)) — contributed by [@lancetm714](https://github.com/lancetm714). A white accent made the proofing dialog's _Download selected (.zip)_ button white on white. `theme.accent` is now accepted as hex only and normalised to `#rrggbb`, anything else falls back to the preset, and the proofing dialog and filter pills use the mode-aware `--on-accent` text colour from #688. - **Every preset's accent is visible in both colour modes** ([#688](https://github.com/ralksta/immich-folio/pull/688)). Presets had one accent for both modes; minimal's dark mode drew black buttons on black. Presets now carry a light and a dark accent, and text on accent-filled buttons picks black or white for contrast. A custom accent stays the owner's choice in both modes. - **Visitor-side inconsistencies** ([#685](https://github.com/ralksta/immich-folio/pull/685)): after visiting `/impressum`, every subpage header turned centred and uppercase; back links announced "Back to Back to …"; the hero EXIF chip ignored `exif.location`/`camera`/`settings`; videos in journal entries opened as stills; the setup screen named a non-existent `.env.example`. - **An essay's lightbox walks only the photos the story shows** ([#686](https://github.com/ralksta/immich-folio/pull/686)), not every photo of the subpage's albums, and the proofing bar in essays shows the selection count instead of a filter button that did nothing. - **The page panel scrolls with the mouse wheel** ([#720](https://github.com/ralksta/immich-folio/pull/720)). - **The journal editor's top bar wraps on phones** ([#723](https://github.com/ralksta/immich-folio/pull/723), closes [#675](https://github.com/ralksta/immich-folio/issues/675)), so the title stays editable and Save stays on screen. - **Every admin form field has a name for assistive technology** ([#715](https://github.com/ralksta/immich-folio/pull/715)). Only two inputs had a linked label; 47 are linked now, and clicking a label focuses its field. ### Internal - **`SettingsEditor` and `PageBuilder` are split up** ([#710](https://github.com/ralksta/immich-folio/pull/710), [#711](https://github.com/ralksta/immich-folio/pull/711)). The 2,200-line settings editor is a shell with one file per section; the page builder's YAML handling and edits are pure functions under test. Both were checked side by side against `dev` for identical output. - **`useAdminFetch()`** ([#707](https://github.com/ralksta/immich-folio/pull/707)) gives Analytics, Messages, Backups and the journal list one loading and error pattern. - README brought up to v0.17.0 ([#678](https://github.com/ralksta/immich-folio/pull/678), [#679](https://github.com/ralksta/immich-folio/pull/679)). ### Upgrade notes **`content/` gains two directories the app writes to:** `content/.fonts/` for the cached fonts and `content/messages/` for contact-form messages. Both are created on demand, so a writable `content/` is enough, as before. **The server needs outbound HTTPS to Google once per font** to fill the font cache. Until then pages fall back to the theme's system fonts. Visitors' browsers no longer contact Google. **A custom CSP or reverse-proxy allowlist** must now allow `tile.openstreetmap.org` for images instead of `*.basemaps.cartocdn.com`, and no longer needs `fonts.googleapis.com`, `fonts.gstatic.com` or `unpkg.com`. The built-in CSP is updated. **`theme.accent` must be hex** (`#rgb`, `#rrggbb` or `#rrggbbaa`). Anything else, including a value without `#`, falls back to the preset's accent. **Plaintext passwords in `gallery.yaml`, `settings.yaml` or journal entries** are hashed the next time that file is saved in the admin; one save clears the doctor's warning. **New, optional settings:** `contact.*` (the form is off by default), `privacy.enabled`, `legal.heading`, `legal.contactUrl`, `legal.contactLabel`, and the `CDN_URL` and `CONTACT_NOTIFY_URL` environment variables. See `content/settings.yaml.example` and `.env.local.example`. In the example file, `vatId` and `taxId` had swapped sample values; check yours if you copied them. No `IMAGE_CACHE_VERSION` bump is needed this time. --------- Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: ralksta <ralksta@users.noreply.github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Claude Opus 5 <noreply@anthropic.com> Co-authored-by: Ralf <rohlenbo79@gmail.com> Co-authored-by: Paul Thies <110185070+ImScheinox@users.noreply.github.com> Co-authored-by: lancetm714 <108419425+lancetm714@users.noreply.github.com> Co-authored-by: Lance Martin <lancetaylor95@gmail.com>
This commit is contained in:
Ralksta
287
app/admin/components/settings/AboutSection.tsx
Normal file
287
app/admin/components/settings/AboutSection.tsx
Normal file
@@ -0,0 +1,287 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
import * as Icons from '../Icons';
|
||||
import type { SaveStatus } from '../SaveBar';
|
||||
import { useDraft, readDraft } from '../useDraft';
|
||||
import { useContentRestored } from '../contentRestored';
|
||||
|
||||
interface AboutMeta {
|
||||
portrait?: string;
|
||||
name?: string;
|
||||
location?: string;
|
||||
gear?: string[];
|
||||
}
|
||||
|
||||
/** The About editor's state, as kept in a draft. */
|
||||
interface AboutDraft {
|
||||
meta: AboutMeta;
|
||||
body: string;
|
||||
gearText: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* What a draft of the About page is compared against: the file's content, not
|
||||
* the textarea's. `gearText` is derived from `meta.gear` and would make a
|
||||
* trailing newline read as a change on disk.
|
||||
*/
|
||||
function aboutFingerprint(about: AboutDraft): string {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
const { gear: _gear, ...meta } = about.meta;
|
||||
const gear = about.gearText
|
||||
.split('\n')
|
||||
.map((line) => line.trim())
|
||||
.filter(Boolean);
|
||||
return JSON.stringify({ meta, gear, body: about.body });
|
||||
}
|
||||
|
||||
/**
|
||||
* The About page editor's state: content/about.md, loaded over its own
|
||||
* endpoint and saved on its own, but reached through the settings nav and
|
||||
* saved by the same save bar and ⌘S (#554).
|
||||
*
|
||||
* A hook rather than state inside the section, because the section unmounts
|
||||
* when another one is opened while an About edit is still unsaved, and the
|
||||
* save bar has to keep offering it.
|
||||
*/
|
||||
export function useAboutEditor(active: boolean) {
|
||||
const [aboutMeta, setAboutMeta] = useState<AboutMeta>({});
|
||||
const [aboutBody, setAboutBody] = useState('');
|
||||
const [aboutLoading, setAboutLoading] = useState(false);
|
||||
const [aboutLoaded, setAboutLoaded] = useState(false);
|
||||
const [aboutSaving, setAboutSaving] = useState(false);
|
||||
const [aboutDirty, setAboutDirty] = useState(false);
|
||||
const [aboutStatus, setAboutStatus] = useState<SaveStatus>(null);
|
||||
const [aboutGearText, setAboutGearText] = useState('');
|
||||
const [serverAbout, setServerAbout] = useState<AboutDraft | null>(null);
|
||||
|
||||
// Unsaved About edits survive a tab switch or Reload, like settings (#592).
|
||||
const draft = useDraft<AboutDraft>(
|
||||
'about',
|
||||
{ meta: aboutMeta, body: aboutBody, gearText: aboutGearText },
|
||||
aboutDirty,
|
||||
);
|
||||
const loadDraft = draft.load;
|
||||
|
||||
const applyAbout = (value: AboutDraft) => {
|
||||
setAboutMeta(value.meta);
|
||||
setAboutBody(value.body);
|
||||
setAboutGearText(value.gearText);
|
||||
};
|
||||
|
||||
const loadAboutContent = useCallback(async () => {
|
||||
setAboutLoading(true);
|
||||
setAboutStatus(null);
|
||||
try {
|
||||
const res = await fetch('/api/admin/about');
|
||||
if (!res.ok) {
|
||||
throw new Error(
|
||||
res.status === 401
|
||||
? 'Your session has expired. Sign in again to continue.'
|
||||
: `The server answered ${res.status}.`,
|
||||
);
|
||||
}
|
||||
const data = await res.json();
|
||||
const loaded: AboutDraft = {
|
||||
meta: data.meta || {},
|
||||
body: data.body || '',
|
||||
gearText: data.meta?.gear?.join('\n') || '',
|
||||
};
|
||||
setServerAbout(loaded);
|
||||
const restored = loadDraft(aboutFingerprint(loaded));
|
||||
const value = restored ?? loaded;
|
||||
setAboutMeta(value.meta);
|
||||
setAboutBody(value.body);
|
||||
setAboutGearText(value.gearText);
|
||||
setAboutDirty(restored !== null);
|
||||
setAboutLoaded(true);
|
||||
} catch (err) {
|
||||
console.error('Failed to load about content:', err);
|
||||
// aboutLoaded stays false, which is what blocks the save below: an empty
|
||||
// editor written to about.md would replace the page with nothing.
|
||||
setAboutStatus({
|
||||
kind: 'error',
|
||||
message: `Error: ${err instanceof Error ? err.message : 'The About page could not be loaded.'}`,
|
||||
});
|
||||
} finally {
|
||||
setAboutLoading(false);
|
||||
}
|
||||
}, [loadDraft]);
|
||||
|
||||
async function saveAboutContent() {
|
||||
if (!aboutLoaded) return;
|
||||
|
||||
setAboutSaving(true);
|
||||
setAboutStatus(null);
|
||||
const cleanedMeta = { ...aboutMeta };
|
||||
for (const [k, v] of Object.entries(cleanedMeta)) {
|
||||
if (v === '' || v === undefined) delete cleanedMeta[k as keyof typeof cleanedMeta];
|
||||
}
|
||||
const gearLines = aboutGearText
|
||||
.split('\n')
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean);
|
||||
if (gearLines.length > 0) {
|
||||
cleanedMeta.gear = gearLines;
|
||||
} else {
|
||||
delete cleanedMeta.gear;
|
||||
}
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/admin/about', {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ meta: cleanedMeta, body: aboutBody }),
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const saved: AboutDraft = { meta: cleanedMeta, body: aboutBody, gearText: aboutGearText };
|
||||
setServerAbout(saved);
|
||||
draft.saved(aboutFingerprint(saved));
|
||||
setAboutDirty(false);
|
||||
setAboutStatus({ kind: 'success', message: data.message || 'Saved!' });
|
||||
setTimeout(() => setAboutStatus(null), 4000);
|
||||
} else {
|
||||
const err = await res.json();
|
||||
setAboutStatus({ kind: 'error', message: `Error: ${err.error}` });
|
||||
}
|
||||
} catch {
|
||||
setAboutStatus({ kind: 'error', message: 'Error: Failed to save' });
|
||||
} finally {
|
||||
setAboutSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Loaded the first time the About section opens, and only then: the editor
|
||||
// stays mounted across sections, so reloading on every visit would overwrite
|
||||
// unsaved About edits with the file on disk.
|
||||
useEffect(() => {
|
||||
if (active && !aboutLoaded) loadAboutContent();
|
||||
}, [active, aboutLoaded, loadAboutContent]);
|
||||
|
||||
// A kept About draft loads the file at once, from any section, so the save
|
||||
// bar owns up to those edits before the About section is ever opened.
|
||||
useEffect(() => {
|
||||
if (!active && readDraft('about')) loadAboutContent();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// A restored about.md replaces what this editor loaded.
|
||||
useContentRestored(({ target }) => {
|
||||
if (target === 'about' && aboutLoaded) loadAboutContent();
|
||||
});
|
||||
|
||||
function updateAboutMeta(key: string, value: unknown) {
|
||||
setAboutMeta((m) => ({ ...m, [key]: value }));
|
||||
setAboutDirty(true);
|
||||
setAboutStatus(null);
|
||||
}
|
||||
|
||||
return {
|
||||
meta: aboutMeta,
|
||||
body: aboutBody,
|
||||
gearText: aboutGearText,
|
||||
loading: aboutLoading,
|
||||
saving: aboutSaving,
|
||||
dirty: aboutDirty,
|
||||
status: aboutStatus as SaveStatus,
|
||||
updateMeta: updateAboutMeta,
|
||||
setBody: (value: string) => {
|
||||
setAboutBody(value);
|
||||
setAboutDirty(true);
|
||||
setAboutStatus(null);
|
||||
},
|
||||
setGearText: (value: string) => {
|
||||
setAboutGearText(value);
|
||||
setAboutDirty(true);
|
||||
setAboutStatus(null);
|
||||
},
|
||||
save: saveAboutContent,
|
||||
draftStatus: draft.status,
|
||||
dismissDraft: draft.dismiss,
|
||||
discardDraft: () => {
|
||||
draft.discard();
|
||||
if (serverAbout) applyAbout(serverAbout);
|
||||
setAboutDirty(false);
|
||||
setAboutStatus(null);
|
||||
},
|
||||
restoreDraft: () => {
|
||||
const value = draft.takeConflicting();
|
||||
if (!value) return;
|
||||
applyAbout(value);
|
||||
setAboutDirty(true);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export type AboutEditor = ReturnType<typeof useAboutEditor>;
|
||||
|
||||
export default function AboutSection({ about }: { about: AboutEditor }) {
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconCamera size={18} /> About Page
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Edit the portrait, biography and gear shown on the About page. Use General to show or hide
|
||||
the page itself.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{about.loading ? (
|
||||
<div className="admin-spinner" style={{ margin: '2rem auto' }} />
|
||||
) : (
|
||||
<>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="about-portrait-asset-id">Portrait Asset ID</label>
|
||||
<input
|
||||
id="about-portrait-asset-id"
|
||||
value={about.meta.portrait || ''}
|
||||
onChange={(e) => about.updateMeta('portrait', e.target.value)}
|
||||
placeholder="Immich asset UUID for the portrait photo"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="about-name">Name</label>
|
||||
<input
|
||||
id="about-name"
|
||||
value={about.meta.name || ''}
|
||||
onChange={(e) => about.updateMeta('name', e.target.value)}
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="about-location">Location</label>
|
||||
<input
|
||||
id="about-location"
|
||||
value={about.meta.location || ''}
|
||||
onChange={(e) => about.updateMeta('location', e.target.value)}
|
||||
placeholder="City, Country"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="about-gear">Gear (one per line)</label>
|
||||
<textarea
|
||||
id="about-gear"
|
||||
value={about.gearText}
|
||||
onChange={(e) => about.setGearText(e.target.value)}
|
||||
placeholder={`Leica Q3\nSummilux 35mm f/1.4`}
|
||||
rows={4}
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="about-biography">Biography (Markdown)</label>
|
||||
<textarea
|
||||
id="about-biography"
|
||||
value={about.body}
|
||||
onChange={(e) => about.setBody(e.target.value)}
|
||||
placeholder="Photographer based in..."
|
||||
rows={6}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
118
app/admin/components/settings/FooterSection.tsx
Normal file
118
app/admin/components/settings/FooterSection.tsx
Normal file
@@ -0,0 +1,118 @@
|
||||
'use client';
|
||||
|
||||
import * as Icons from '../Icons';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
export default function FooterSection({ settings, update }: SectionProps) {
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconLink size={18} /> Footer & Social Links
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Display branding, Instagram, email and website links in portfolio footer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-brand-name">Footer Brand Name</label>
|
||||
<input
|
||||
id="footer-brand-name"
|
||||
value={settings.footer?.name || ''}
|
||||
onChange={(e) => update('footer.name', e.target.value)}
|
||||
placeholder="My Photography"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-instagram-url">Instagram URL</label>
|
||||
<input
|
||||
id="footer-instagram-url"
|
||||
value={settings.footer?.instagram || ''}
|
||||
onChange={(e) => update('footer.instagram', e.target.value)}
|
||||
placeholder="https://instagram.com/your-handle"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-contact-email">Contact Email</label>
|
||||
<input
|
||||
id="footer-contact-email"
|
||||
value={settings.footer?.email || ''}
|
||||
onChange={(e) => update('footer.email', e.target.value)}
|
||||
placeholder="hello@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-personal-website">Personal Website</label>
|
||||
<input
|
||||
id="footer-personal-website"
|
||||
value={settings.footer?.website || ''}
|
||||
onChange={(e) => update('footer.website', e.target.value)}
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-header" style={{ marginTop: '2rem' }}>
|
||||
<h3>
|
||||
<Icons.IconLink size={18} /> Header Navigation Links (Experimental)
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
External links shown after your pages in the header menu. Only http(s) URLs are allowed;
|
||||
they open in a new tab.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{(settings.navLinks || []).map((link, i) => (
|
||||
<div className="admin-field-row" key={i}>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-label">Label</label>
|
||||
<input
|
||||
id="footer-label"
|
||||
value={link.label || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], label: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="Shop"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="footer-url">URL</label>
|
||||
<input
|
||||
id="footer-url"
|
||||
value={link.url || ''}
|
||||
onChange={(e) => {
|
||||
const next = [...(settings.navLinks || [])];
|
||||
next[i] = { ...next[i], url: e.target.value };
|
||||
update('navLinks', next);
|
||||
}}
|
||||
placeholder="https://shop.example.com"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
style={{ alignSelf: 'flex-end' }}
|
||||
onClick={() => {
|
||||
const next = (settings.navLinks || []).filter((_, j) => j !== i);
|
||||
update('navLinks', next.length > 0 ? next : undefined);
|
||||
}}
|
||||
title="Remove link"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn admin-btn-sm"
|
||||
onClick={() => update('navLinks', [...(settings.navLinks || []), { label: '', url: '' }])}
|
||||
>
|
||||
+ Add external link
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
311
app/admin/components/settings/GeneralSection.tsx
Normal file
311
app/admin/components/settings/GeneralSection.tsx
Normal file
@@ -0,0 +1,311 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import * as Icons from '../Icons';
|
||||
import type { SaveStatus } from '../SaveBar';
|
||||
import { resolveExifDisplay } from '@/lib/config/schema';
|
||||
import { SUPPORTED_LOCALES } from '@/lib/i18n';
|
||||
import { FeatureGroup, FeatureRow, SettingRow } from './fields';
|
||||
import type { SectionProps } from './types';
|
||||
import { useConfirm } from '../ConfirmDialog';
|
||||
|
||||
export default function GeneralSection({ settings, update, updateMany }: SectionProps) {
|
||||
const confirm = useConfirm();
|
||||
// Collapsed by default: the four metadata switches are a detail of one
|
||||
// decision, and showing them permanently is what made the section a wall (#510).
|
||||
const [metadataOpen, setMetadataOpen] = useState(false);
|
||||
const [faviconUploading, setFaviconUploading] = useState(false);
|
||||
const [faviconStatus, setFaviconStatus] = useState<SaveStatus>(null);
|
||||
|
||||
// Resolved the same way the site resolves it, so the switches show what a
|
||||
// visitor actually sees — including a config that only ever set the older
|
||||
// `exifOnHover`.
|
||||
const exif = resolveExifDisplay(settings.exif, settings.exifOnHover);
|
||||
|
||||
// The master switch has no key of its own and needs none: "off" is all four
|
||||
// groups off, a state the site already acts on — with nothing left to show,
|
||||
// the lightbox withdraws its info button and the `i` key entirely (#506).
|
||||
const anyMetadata = exif.camera || exif.settings || exif.location || exif.caption;
|
||||
const metadataSummary =
|
||||
[
|
||||
exif.camera && 'Camera & lens',
|
||||
exif.settings && 'Exposure',
|
||||
exif.location && 'Location',
|
||||
exif.caption && 'Description',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' · ') || 'Nothing published — the lightbox hides its info panel';
|
||||
|
||||
/** Turning it back on selects everything; the details below narrow it again. */
|
||||
const toggleMetadata = () =>
|
||||
updateMany({
|
||||
'exif.camera': !anyMetadata,
|
||||
'exif.settings': !anyMetadata,
|
||||
'exif.location': !anyMetadata,
|
||||
'exif.caption': !anyMetadata,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconGear size={18} /> General Site Settings
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Configure basic site identity, language, and core feature toggles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="general-site-title">Site Title</label>
|
||||
<input
|
||||
id="general-site-title"
|
||||
value={settings.title || ''}
|
||||
onChange={(e) => update('title', e.target.value)}
|
||||
placeholder="My Portfolio"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="general-subtitle">Subtitle</label>
|
||||
<input
|
||||
id="general-subtitle"
|
||||
value={settings.subtitle || ''}
|
||||
onChange={(e) => update('subtitle', e.target.value)}
|
||||
placeholder="A visual journal"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="general-language">Language</label>
|
||||
<select
|
||||
id="general-language"
|
||||
aria-label="Language"
|
||||
value={settings.lang || 'en'}
|
||||
onChange={(e) => update('lang', e.target.value)}
|
||||
>
|
||||
<option value="en">English (US)</option>
|
||||
<option value="de">Deutsch (DE)</option>
|
||||
<option value="fr">Français (FR)</option>
|
||||
<option value="es">Español (ES)</option>
|
||||
<option value="it">Italiano (IT)</option>
|
||||
<option value="nl">Nederlands (NL)</option>
|
||||
<option value="ja">日本語 (JA)</option>
|
||||
</select>
|
||||
<p className="admin-field-hint">
|
||||
The visitor-facing interface is translated for {SUPPORTED_LOCALES.join(', ')}. Other
|
||||
languages still set <code><html lang></code> and date formatting, but show the
|
||||
English interface. The admin panel is always English.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconSparkles size={18} /> Portfolio Features & Modules
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Optional pages, and what the site reveals about your photos and counts about visits.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FeatureGroup
|
||||
icon={<Icons.IconFrame size={13} />}
|
||||
title="Modules"
|
||||
description="Each one adds a page or a control visitors can use."
|
||||
>
|
||||
<div className="feature-list">
|
||||
<FeatureRow
|
||||
icon={<Icons.IconCamera size={15} />}
|
||||
title="About page"
|
||||
description="Portrait, bio and gear at /about"
|
||||
checked={settings.about?.enabled !== false}
|
||||
onToggle={() => update('about.enabled', settings.about?.enabled === false)}
|
||||
href="/admin/settings/about"
|
||||
/>
|
||||
<FeatureRow
|
||||
icon={<Icons.IconMap size={15} />}
|
||||
title="Map"
|
||||
description="Photo locations on a world map at /map"
|
||||
checked={settings.map === true}
|
||||
onToggle={() => update('map', !settings.map)}
|
||||
/>
|
||||
<FeatureRow
|
||||
icon={<Icons.IconHeart size={15} />}
|
||||
title="Client proofing"
|
||||
description="Visitors heart, filter and export a selection of photos"
|
||||
checked={settings.proofing?.enabled !== false}
|
||||
onToggle={() => update('proofing.enabled', settings.proofing?.enabled === false)}
|
||||
/>
|
||||
</div>
|
||||
</FeatureGroup>
|
||||
|
||||
<FeatureGroup
|
||||
icon={<Icons.IconShieldCheck size={13} />}
|
||||
title="What visitors learn about you"
|
||||
description="What each photo reveals, and what is counted about a visit."
|
||||
chip="visible to visitors"
|
||||
>
|
||||
<div className={`metadata-card ${anyMetadata ? 'active' : ''}`}>
|
||||
<button
|
||||
type="button"
|
||||
className="metadata-card-main"
|
||||
onClick={toggleMetadata}
|
||||
aria-pressed={anyMetadata}
|
||||
>
|
||||
<span className="toggle-card-info">
|
||||
<span className="toggle-card-title">
|
||||
<Icons.IconCamera size={16} /> Photo metadata
|
||||
</span>
|
||||
<span className="toggle-card-desc">{metadataSummary}</span>
|
||||
</span>
|
||||
<span className={`switch-toggle ${anyMetadata ? 'on' : ''}`}>
|
||||
<span className="switch-slider" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="metadata-details-btn"
|
||||
onClick={() => setMetadataOpen((open) => !open)}
|
||||
aria-expanded={metadataOpen}
|
||||
>
|
||||
Details
|
||||
<Icons.IconChevronDown
|
||||
size={13}
|
||||
className={`metadata-details-chevron${metadataOpen ? ' open' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
|
||||
{metadataOpen && (
|
||||
<div className="metadata-details">
|
||||
<SettingRow
|
||||
title="Camera & Lens"
|
||||
description="Body, lens and focal length"
|
||||
checked={exif.camera}
|
||||
onToggle={() => update('exif.camera', !exif.camera)}
|
||||
/>
|
||||
<SettingRow
|
||||
title="Exposure Settings"
|
||||
description="Aperture, shutter speed and ISO"
|
||||
checked={exif.settings}
|
||||
onToggle={() => update('exif.settings', !exif.settings)}
|
||||
/>
|
||||
<SettingRow
|
||||
title="Location"
|
||||
description="City and country from the photo's GPS data"
|
||||
checked={exif.location}
|
||||
onToggle={() => update('exif.location', !exif.location)}
|
||||
/>
|
||||
<SettingRow
|
||||
title="Photo Description"
|
||||
description="The description written in Immich"
|
||||
checked={exif.caption}
|
||||
onToggle={() => update('exif.caption', !exif.caption)}
|
||||
/>
|
||||
|
||||
{/* Dependent, not a peer: this only controls the grid overlay, and
|
||||
the overlay carries camera and lens. With those off it has
|
||||
nothing to show, which used to leave it switched on and
|
||||
silently doing nothing (#510). */}
|
||||
<SettingRow
|
||||
indented
|
||||
title="Summary on grid hover"
|
||||
description="Camera and lens over the photo, not only in the lightbox"
|
||||
checked={settings.exifOnHover !== false}
|
||||
disabled={!exif.camera}
|
||||
hint={exif.camera ? undefined : 'Needs Camera & Lens'}
|
||||
onToggle={() => update('exifOnHover', settings.exifOnHover === false)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="feature-list">
|
||||
<FeatureRow
|
||||
icon={<Icons.IconBarChart size={15} />}
|
||||
title="Analytics"
|
||||
description="Cookieless view counts, stored on your server only"
|
||||
checked={settings.analytics !== false}
|
||||
onToggle={() => update('analytics', settings.analytics === false)}
|
||||
href="/admin/analytics"
|
||||
/>
|
||||
</div>
|
||||
</FeatureGroup>
|
||||
|
||||
<div className="admin-field favicon-field">
|
||||
<span className="admin-field-label">Favicon</span>
|
||||
<div className="favicon-row">
|
||||
<input
|
||||
type="file"
|
||||
accept=".svg,.png,.ico,.jpg,.jpeg"
|
||||
disabled={faviconUploading}
|
||||
onChange={async (e) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setFaviconStatus(null);
|
||||
setFaviconUploading(true);
|
||||
const form = new FormData();
|
||||
form.append('file', file);
|
||||
try {
|
||||
const res = await fetch('/api/admin/favicon', {
|
||||
method: 'PUT',
|
||||
body: form,
|
||||
});
|
||||
const data = await res.json();
|
||||
setFaviconStatus(
|
||||
res.ok
|
||||
? { kind: 'success', message: data.message }
|
||||
: { kind: 'error', message: `Error: ${data.error}` },
|
||||
);
|
||||
} catch {
|
||||
setFaviconStatus({ kind: 'error', message: 'Error: Upload failed' });
|
||||
} finally {
|
||||
setFaviconUploading(false);
|
||||
e.target.value = '';
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
className="admin-btn"
|
||||
disabled={faviconUploading}
|
||||
onClick={async () => {
|
||||
// Deletes the uploaded file at once, outside the staged form.
|
||||
const ok = await confirm({
|
||||
title: 'Reset the favicon?',
|
||||
message: 'The uploaded icon is deleted and the bundled default is used again.',
|
||||
confirmLabel: 'Reset',
|
||||
danger: true,
|
||||
});
|
||||
if (!ok) return;
|
||||
setFaviconStatus(null);
|
||||
setFaviconUploading(true);
|
||||
try {
|
||||
const res = await fetch('/api/admin/favicon', { method: 'DELETE' });
|
||||
const data = await res.json();
|
||||
setFaviconStatus(
|
||||
res.ok
|
||||
? { kind: 'success', message: data.message }
|
||||
: { kind: 'error', message: `Error: ${data.error}` },
|
||||
);
|
||||
} catch {
|
||||
setFaviconStatus({ kind: 'error', message: 'Error: Reset failed' });
|
||||
} finally {
|
||||
setFaviconUploading(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
{faviconUploading && <div className="admin-spinner" />}
|
||||
</div>
|
||||
{faviconStatus && (
|
||||
<p className={`save-message ${faviconStatus.kind}`}>{faviconStatus.message}</p>
|
||||
)}
|
||||
<span className="admin-field-hint">
|
||||
SVG, PNG, ICO, or JPEG — max 512 kB. Stored in the content volume. Reset restores the
|
||||
bundled default.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
204
app/admin/components/settings/GridSection.tsx
Normal file
204
app/admin/components/settings/GridSection.tsx
Normal file
@@ -0,0 +1,204 @@
|
||||
'use client';
|
||||
|
||||
import * as Icons from '../Icons';
|
||||
import OptionGrid, { toOptions } from '../fields/OptionGrid';
|
||||
import {
|
||||
PHOTO_GRID_COLUMNS_MAX,
|
||||
PHOTO_GRID_COLUMNS_MIN,
|
||||
PHOTO_GRID_GAP_MAX,
|
||||
} from '@/lib/config/schema';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
const LAYOUTS = ['masonry', 'uniform', 'showcase', 'filmstrip', 'editorial-flow', 'justified'];
|
||||
const ASPECT_RATIOS = ['1', '3/2', '2/3', '16/9', 'auto'];
|
||||
|
||||
const LAYOUT_INFO: Record<string, { label: string; desc: string }> = {
|
||||
masonry: {
|
||||
label: 'Masonry',
|
||||
desc: 'Dynamic pinterest-style staggered columns',
|
||||
},
|
||||
uniform: { label: 'Uniform Grid', desc: 'Clean equal aspect ratio grid' },
|
||||
showcase: {
|
||||
label: 'Showcase',
|
||||
desc: 'Featured hero photos mixed with smaller tiles',
|
||||
},
|
||||
filmstrip: {
|
||||
label: 'Filmstrip',
|
||||
desc: 'Horizontal scrollable film strip timeline',
|
||||
},
|
||||
'editorial-flow': {
|
||||
label: 'Editorial Flow',
|
||||
desc: 'Magazine story layout with varying photo sizes',
|
||||
},
|
||||
justified: {
|
||||
label: 'Justified (Experimental)',
|
||||
desc: 'Equal-height rows that fill the full width',
|
||||
},
|
||||
};
|
||||
const LAYOUT_OPTIONS = toOptions(LAYOUTS, LAYOUT_INFO);
|
||||
|
||||
function LayoutPreview({ value }: { value: string }) {
|
||||
return (
|
||||
<div className="grid-card-preview">
|
||||
<div className={`mini-layout-demo layout-demo-${value}`}>
|
||||
{value === 'masonry' && (
|
||||
<div className="demo-masonry-col-group">
|
||||
<div className="demo-col">
|
||||
<div className="demo-tile h-high" />
|
||||
<div className="demo-tile h-low" />
|
||||
</div>
|
||||
<div className="demo-col">
|
||||
<div className="demo-tile h-low" />
|
||||
<div className="demo-tile h-high" />
|
||||
</div>
|
||||
<div className="demo-col">
|
||||
<div className="demo-tile h-med" />
|
||||
<div className="demo-tile h-med" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{value === 'uniform' && (
|
||||
<div className="demo-uniform-grid">
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
</div>
|
||||
)}
|
||||
{value === 'showcase' && (
|
||||
<div className="demo-showcase-grid">
|
||||
<div className="demo-tile demo-hero" />
|
||||
<div className="demo-col">
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{value === 'filmstrip' && (
|
||||
<div className="demo-filmstrip-row">
|
||||
<div className="demo-tile strip" />
|
||||
<div className="demo-tile strip" />
|
||||
<div className="demo-tile strip" />
|
||||
</div>
|
||||
)}
|
||||
{value === 'editorial-flow' && (
|
||||
<div className="demo-editorial-flow">
|
||||
<div className="demo-tile wide" />
|
||||
<div className="demo-row">
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{value === 'justified' && (
|
||||
<div className="demo-editorial-flow">
|
||||
<div className="demo-row">
|
||||
<div className="demo-tile wide" />
|
||||
<div className="demo-tile" />
|
||||
</div>
|
||||
<div className="demo-row">
|
||||
<div className="demo-tile" />
|
||||
<div className="demo-tile wide" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const ASPECT_RATIO_INFO: Record<string, { label: string; desc: string }> = {
|
||||
'1': { label: 'Square (1:1)', desc: '1:1 ratio square crops' },
|
||||
'3/2': { label: 'Landscape (3:2)', desc: 'Standard 35mm DSLR landscape' },
|
||||
'2/3': { label: 'Portrait (2:3)', desc: 'Vertical portrait orientation' },
|
||||
'16/9': { label: 'Cinema (16:9)', desc: 'Widescreen 16:9 cinematic ratio' },
|
||||
auto: {
|
||||
label: 'Original Auto',
|
||||
desc: 'Uncropped original image proportions',
|
||||
},
|
||||
};
|
||||
const ASPECT_RATIO_OPTIONS = toOptions(ASPECT_RATIOS, ASPECT_RATIO_INFO);
|
||||
|
||||
function AspectRatioPreview({ value }: { value: string }) {
|
||||
return (
|
||||
<div className="ratio-card-preview">
|
||||
<div className={`mini-aspect-box ratio-${value.replace('/', '-')}`}>
|
||||
<div className="mini-aspect-inner" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function GridSection({ settings, update }: SectionProps) {
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconGrid size={18} /> Grid & Layout Engine
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Configure photography gallery column structures and thumbnail aspect ratios.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<OptionGrid
|
||||
label="Layout Algorithm"
|
||||
options={LAYOUT_OPTIONS}
|
||||
value={settings.grid?.layout || 'masonry'}
|
||||
onSelect={(v) => update('grid.layout', v)}
|
||||
cardClassName="grid-layout-card"
|
||||
renderPreview={(o) => <LayoutPreview value={o.value} />}
|
||||
/>
|
||||
|
||||
<OptionGrid
|
||||
label="Aspect Ratio"
|
||||
options={ASPECT_RATIO_OPTIONS}
|
||||
value={settings.grid?.aspectRatio || '1'}
|
||||
onSelect={(v) => update('grid.aspectRatio', v)}
|
||||
cardClassName="ratio-card"
|
||||
renderPreview={(o) => <AspectRatioPreview value={o.value} />}
|
||||
/>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconColumns size={18} /> Spacing & Columns
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Adjust column counts and grid gap spacing. The column count also tiles the album covers on
|
||||
a subpage; their spacing stays with the theme unless a page overrides it.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="grid-columns">
|
||||
Columns ({PHOTO_GRID_COLUMNS_MIN} - {PHOTO_GRID_COLUMNS_MAX})
|
||||
</label>
|
||||
<input
|
||||
id="grid-columns"
|
||||
type="number"
|
||||
min={PHOTO_GRID_COLUMNS_MIN}
|
||||
max={PHOTO_GRID_COLUMNS_MAX}
|
||||
value={settings.grid?.columns ?? 3}
|
||||
onChange={(e) => update('grid.columns', parseInt(e.target.value) || 3)}
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="grid-gap-spacing">Gap Spacing (px)</label>
|
||||
<input
|
||||
id="grid-gap-spacing"
|
||||
type="number"
|
||||
min={0}
|
||||
max={PHOTO_GRID_GAP_MAX}
|
||||
value={settings.grid?.gap ?? 12}
|
||||
onChange={(e) => update('grid.gap', parseInt(e.target.value) || 0)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
255
app/admin/components/settings/LegalSection.tsx
Normal file
255
app/admin/components/settings/LegalSection.tsx
Normal file
@@ -0,0 +1,255 @@
|
||||
'use client';
|
||||
|
||||
import * as Icons from '../Icons';
|
||||
import ToggleCard from '../fields/ToggleCard';
|
||||
import PrivacyEditor from '../PrivacyEditor';
|
||||
import { CONTACT_RETENTION_DEFAULT, CONTACT_RETENTION_MAX, isHttpUrl } from '@/lib/config/schema';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
export default function LegalSection({ settings, update }: SectionProps) {
|
||||
// The Impressum drops a non-http(s) contact URL with a warning in the server
|
||||
// log, where nobody looks; say it here instead.
|
||||
const contactUrl = settings.legal?.contactUrl?.trim();
|
||||
const contactUrlInvalid = !!contactUrl && !isHttpUrl(contactUrl);
|
||||
const notifyUrl = settings.contact?.notifyUrl?.trim();
|
||||
const notifyUrlInvalid = !!notifyUrl && !isHttpUrl(notifyUrl);
|
||||
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconScale size={18} /> Legal Notice & Impressum
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Configure the legal disclosure page required by the German Digitale-Dienste-Gesetz (DDG).
|
||||
</p>
|
||||
{settings.legal?.enabled && (
|
||||
<a
|
||||
href="/impressum"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="admin-btn admin-btn-sm settings-section-action"
|
||||
>
|
||||
View /impressum ↗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
|
||||
<ToggleCard
|
||||
icon={<Icons.IconFileText size={16} />}
|
||||
title="Enable Impressum Page (/impressum)"
|
||||
description="Automatically generates and links /impressum in footer"
|
||||
checked={settings.legal?.enabled === true}
|
||||
onToggle={() => update('legal.enabled', !settings.legal?.enabled)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{settings.legal?.enabled && (
|
||||
<>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-heading">Heading</label>
|
||||
<input
|
||||
id="legal-heading"
|
||||
value={settings.legal?.heading || ''}
|
||||
onChange={(e) => update('legal.heading', e.target.value)}
|
||||
placeholder="Angaben gemäß § 5 DDG"
|
||||
/>
|
||||
<p className="admin-field-hint">
|
||||
Leave empty for the § 5 DDG line in the site language. Set it when a different law
|
||||
applies, e.g. § 5 ECG in Austria.
|
||||
</p>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-full-name-business-name">Full Name / Business Name</label>
|
||||
<input
|
||||
id="legal-full-name-business-name"
|
||||
value={settings.legal?.name || ''}
|
||||
onChange={(e) => update('legal.name', e.target.value)}
|
||||
placeholder="Max Mustermann"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-street-address">Street Address</label>
|
||||
<input
|
||||
id="legal-street-address"
|
||||
value={settings.legal?.address || ''}
|
||||
onChange={(e) => update('legal.address', e.target.value)}
|
||||
placeholder="Musterstraße 1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-zip-city">ZIP & City</label>
|
||||
<input
|
||||
id="legal-zip-city"
|
||||
value={settings.legal?.zipCity || ''}
|
||||
onChange={(e) => update('legal.zipCity', e.target.value)}
|
||||
placeholder="12345 Berlin"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-country">Country</label>
|
||||
<input
|
||||
id="legal-country"
|
||||
value={settings.legal?.country || ''}
|
||||
onChange={(e) => update('legal.country', e.target.value)}
|
||||
placeholder="Germany"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-email">Legal Email</label>
|
||||
<input
|
||||
id="legal-email"
|
||||
value={settings.legal?.email || ''}
|
||||
onChange={(e) => update('legal.email', e.target.value)}
|
||||
placeholder="legal@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-phone-number">Phone Number</label>
|
||||
<input
|
||||
id="legal-phone-number"
|
||||
value={settings.legal?.phone || ''}
|
||||
onChange={(e) => update('legal.phone', e.target.value)}
|
||||
placeholder="+49 123 456789"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-contact-url">Contact Form URL</label>
|
||||
<input
|
||||
id="legal-contact-url"
|
||||
type="url"
|
||||
value={settings.legal?.contactUrl || ''}
|
||||
onChange={(e) => update('legal.contactUrl', e.target.value)}
|
||||
placeholder="https://example.com/contact"
|
||||
aria-invalid={contactUrlInvalid || undefined}
|
||||
aria-describedby={contactUrlInvalid ? 'legal-contact-url-error' : undefined}
|
||||
/>
|
||||
{contactUrlInvalid && (
|
||||
<p
|
||||
id="legal-contact-url-error"
|
||||
className="admin-field-hint admin-field-hint--error"
|
||||
>
|
||||
Must start with https:// or http://. Any other link is left off the page.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-contact-link-text">Contact Link Text</label>
|
||||
<input
|
||||
id="legal-contact-link-text"
|
||||
value={settings.legal?.contactLabel || ''}
|
||||
onChange={(e) => update('legal.contactLabel', e.target.value)}
|
||||
placeholder="Contact form"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-vat-id">VAT ID</label>
|
||||
<input
|
||||
id="legal-vat-id"
|
||||
value={settings.legal?.vatId || ''}
|
||||
onChange={(e) => update('legal.vatId', e.target.value)}
|
||||
placeholder="DE123456789"
|
||||
/>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-tax-number">Tax Number</label>
|
||||
<input
|
||||
id="legal-tax-number"
|
||||
value={settings.legal?.taxId || ''}
|
||||
onChange={(e) => update('legal.taxId', e.target.value)}
|
||||
placeholder="12/345/67890"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="legal-additional-disclosures">Additional Disclosures</label>
|
||||
<textarea
|
||||
id="legal-additional-disclosures"
|
||||
value={settings.legal?.extraInfo || ''}
|
||||
onChange={(e) => update('legal.extraInfo', e.target.value)}
|
||||
placeholder="Verantwortlich für den Inhalt nach § 18 Abs. 2 MStV..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
|
||||
<ToggleCard
|
||||
icon={<Icons.IconFileText size={16} />}
|
||||
title="Contact Form (/contact)"
|
||||
description="Messages are stored on this server and read under Messages. No mail is sent."
|
||||
checked={settings.contact?.enabled === true}
|
||||
onToggle={() => update('contact.enabled', !settings.contact?.enabled)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{settings.contact?.enabled && (
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="contact-notify-url">Notification URL (ntfy)</label>
|
||||
<input
|
||||
id="contact-notify-url"
|
||||
type="url"
|
||||
value={settings.contact?.notifyUrl || ''}
|
||||
onChange={(e) => update('contact.notifyUrl', e.target.value)}
|
||||
placeholder="https://ntfy.sh/your-secret-topic"
|
||||
aria-invalid={notifyUrlInvalid || undefined}
|
||||
aria-describedby="contact-notify-url-hint"
|
||||
/>
|
||||
<p
|
||||
id="contact-notify-url-hint"
|
||||
className={`admin-field-hint${notifyUrlInvalid ? ' admin-field-hint--error' : ''}`}
|
||||
>
|
||||
{notifyUrlInvalid
|
||||
? 'Must start with https:// or http://.'
|
||||
: 'Gets a fixed "new message" push, with nothing about the sender. Pick a topic name nobody can guess. CONTACT_NOTIFY_URL overrides this.'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="contact-retention">Delete messages after (days)</label>
|
||||
<input
|
||||
id="contact-retention"
|
||||
type="number"
|
||||
min={1}
|
||||
max={CONTACT_RETENTION_MAX}
|
||||
value={settings.contact?.retentionDays ?? CONTACT_RETENTION_DEFAULT}
|
||||
onChange={(e) =>
|
||||
update(
|
||||
'contact.retentionDays',
|
||||
parseInt(e.target.value) || CONTACT_RETENTION_DEFAULT,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
|
||||
<ToggleCard
|
||||
icon={<Icons.IconShieldCheck size={16} />}
|
||||
title="Privacy Policy (/privacy)"
|
||||
description="Shown and linked in the footer once the text below is saved"
|
||||
checked={settings.privacy?.enabled !== false}
|
||||
onToggle={() => update('privacy.enabled', settings.privacy?.enabled === false)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PrivacyEditor />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
139
app/admin/components/settings/SecuritySection.tsx
Normal file
139
app/admin/components/settings/SecuritySection.tsx
Normal file
@@ -0,0 +1,139 @@
|
||||
'use client';
|
||||
|
||||
import * as Icons from '../Icons';
|
||||
import ToggleCard from '../fields/ToggleCard';
|
||||
import PasswordField from '../fields/PasswordField';
|
||||
import { resolveWatermarkOpacity } from '@/lib/config/schema';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
export default function SecuritySection({ settings, update }: SectionProps) {
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconLock size={18} /> Site Password
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Puts the whole public site behind one password — useful while a portfolio is still being
|
||||
built, or for a folio only ever shown to clients.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="security-site-password">Site Password</label>
|
||||
<PasswordField
|
||||
id="security-site-password"
|
||||
value={settings.sitePassword}
|
||||
onChange={(password) => update('sitePassword', password ?? '')}
|
||||
placeholder="Leave empty for a public site"
|
||||
label="Site password"
|
||||
/>
|
||||
<p className="admin-field-hint">
|
||||
Stored as a <code>scrypt:…</code> hash in <code>settings.yaml</code>, never as typed. The{' '}
|
||||
<code>SITE_PASSWORD</code> environment variable overrides this field. The admin panel
|
||||
keeps its own password and is never behind this gate.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconShieldCheck size={18} /> Asset Protection & Watermark
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Configure image protection rules, right-click prevention, and watermark overlay.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-toggle-cards-grid">
|
||||
<ToggleCard
|
||||
icon={<Icons.IconLock size={16} />}
|
||||
title="Disable Right-Click Menu"
|
||||
description="Prevents context menu on portfolio images to hinder unauthorized downloads"
|
||||
checked={settings.protection?.disableRightClick === true}
|
||||
onToggle={() =>
|
||||
update('protection.disableRightClick', !settings.protection?.disableRightClick)
|
||||
}
|
||||
/>
|
||||
|
||||
<ToggleCard
|
||||
icon={<Icons.IconBan size={16} />}
|
||||
title="Disable Image Dragging"
|
||||
description="Prevents visitors from dragging images off the portfolio page"
|
||||
checked={settings.protection?.disableImageDrag === true}
|
||||
onToggle={() =>
|
||||
update('protection.disableImageDrag', !settings.protection?.disableImageDrag)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconSparkles size={18} /> Dynamic Watermark Overlay
|
||||
</h3>
|
||||
<p className="settings-section-sub">Overlay copyright branding text on Lightbox images.</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-toggle-cards-grid" style={{ marginBottom: '1.25rem' }}>
|
||||
<ToggleCard
|
||||
icon={<Icons.IconFrame size={16} />}
|
||||
title="Enable Watermark"
|
||||
description="Overlay copyright text on portfolio image views"
|
||||
checked={settings.watermark?.enabled === true}
|
||||
onToggle={() => update('watermark.enabled', !settings.watermark?.enabled)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{settings.watermark?.enabled && (
|
||||
<>
|
||||
<div className="admin-field">
|
||||
<label htmlFor="security-watermark-text">Watermark Text</label>
|
||||
<input
|
||||
id="security-watermark-text"
|
||||
value={settings.watermark?.text || ''}
|
||||
onChange={(e) => update('watermark.text', e.target.value)}
|
||||
placeholder="© Ralfo Photography"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="admin-field-row">
|
||||
<div className="admin-field">
|
||||
<label htmlFor="security-position">Position</label>
|
||||
<select
|
||||
id="security-position"
|
||||
aria-label="Watermark position"
|
||||
value={settings.watermark?.position || 'bottom-right'}
|
||||
onChange={(e) => update('watermark.position', e.target.value)}
|
||||
>
|
||||
<option value="bottom-right">Bottom Right</option>
|
||||
<option value="bottom-left">Bottom Left</option>
|
||||
<option value="center">Center Overlay</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="admin-field">
|
||||
{/* Read through the same normaliser the lightbox uses, so a
|
||||
config written as a percentage shows as "90%" here rather
|
||||
than "9000%" — and is written back as a fraction on save. */}
|
||||
<label htmlFor="security-opacity-100">
|
||||
Opacity ({Math.round(resolveWatermarkOpacity(settings.watermark?.opacity) * 100)}
|
||||
%)
|
||||
</label>
|
||||
<input
|
||||
id="security-opacity-100"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="1"
|
||||
step="0.05"
|
||||
value={resolveWatermarkOpacity(settings.watermark?.opacity)}
|
||||
onChange={(e) => update('watermark.opacity', parseFloat(e.target.value))}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
141
app/admin/components/settings/SeoSection.tsx
Normal file
141
app/admin/components/settings/SeoSection.tsx
Normal file
@@ -0,0 +1,141 @@
|
||||
'use client';
|
||||
|
||||
import * as Icons from '../Icons';
|
||||
import ToggleCard from '../fields/ToggleCard';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
export default function SeoSection({
|
||||
settings,
|
||||
update,
|
||||
siteUrlInfo,
|
||||
}: SectionProps & {
|
||||
/** Resolved site URL and its origin, so the panel can name SITE_URL (#472). */
|
||||
siteUrlInfo: { effective: string | null; source: 'env' | 'settings' | 'none' } | null;
|
||||
}) {
|
||||
return (
|
||||
<div className="settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconSearch size={18} /> Search Engine Optimization (SEO)
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Customize search engine metadata, OpenGraph tags, and indexing rules.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Live Google Search Result Snippet Card */}
|
||||
<div className="google-snippet-preview">
|
||||
<div className="google-snippet-header">
|
||||
<span>
|
||||
<Icons.IconGlobe size={14} /> Google Search Result Preview
|
||||
</span>
|
||||
</div>
|
||||
<div className="google-snippet-card">
|
||||
<div className="google-snippet-url">
|
||||
https://yourportfolio.com <span className="google-snippet-arrow">▼</span>
|
||||
</div>
|
||||
<div className="google-snippet-title">
|
||||
{settings.seo?.title || settings.title || 'My Photography Portfolio'}
|
||||
</div>
|
||||
<div className="google-snippet-desc">
|
||||
{settings.seo?.description ||
|
||||
settings.subtitle ||
|
||||
'A curated selection of photography work.'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="seo-site-url">Site URL</label>
|
||||
<input
|
||||
id="seo-site-url"
|
||||
value={settings.url || ''}
|
||||
onChange={(e) => update('url', e.target.value)}
|
||||
placeholder="https://folio.example"
|
||||
/>
|
||||
<p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
|
||||
Needed for <code>sitemap.xml</code>, the feed and structured data — those are generated
|
||||
without a request, so the address cannot be derived from it. Leave empty and the sitemap
|
||||
stays empty rather than guessing.
|
||||
{siteUrlInfo?.source === 'env' && (
|
||||
<>
|
||||
<br />
|
||||
Currently supplied by the <code>SITE_URL</code> environment variable (
|
||||
<code>{siteUrlInfo.effective}</code>). A value entered here takes precedence once
|
||||
saved.
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="seo-meta-title">SEO Meta Title</label>
|
||||
<input
|
||||
id="seo-meta-title"
|
||||
value={settings.seo?.title || ''}
|
||||
onChange={(e) => update('seo.title', e.target.value)}
|
||||
placeholder="Overrides default site title for Google search results"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="seo-subpage-title-template">Subpage Title Template</label>
|
||||
<input
|
||||
id="seo-subpage-title-template"
|
||||
value={settings.seo?.titleTemplate || ''}
|
||||
onChange={(e) => update('seo.titleTemplate', e.target.value)}
|
||||
placeholder={`%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`}
|
||||
/>
|
||||
<p style={{ fontSize: '0.8rem', opacity: 0.7, marginTop: '4px' }}>
|
||||
Template for subpages & albums. Use <code>%s</code> as placeholder for the page title.
|
||||
<br />
|
||||
<strong>Preview:</strong>{' '}
|
||||
{(
|
||||
settings.seo?.titleTemplate ||
|
||||
`%s | ${settings.seo?.title || settings.title || 'My Portfolio'}`
|
||||
).replace('%s', 'Landscapes')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="seo-meta-description">SEO Meta Description</label>
|
||||
<textarea
|
||||
id="seo-meta-description"
|
||||
value={settings.seo?.description || ''}
|
||||
onChange={(e) => update('seo.description', e.target.value)}
|
||||
placeholder="A curated selection of photography work..."
|
||||
rows={3}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconGlobe size={18} /> Search Crawler Directives
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Control how Googlebot and other web crawlers index your site.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-toggle-cards-grid">
|
||||
<ToggleCard
|
||||
icon={<Icons.IconBan size={16} />}
|
||||
title="noindex (Hide from Google)"
|
||||
description="Instructs search engines NOT to index this site in search results"
|
||||
checked={settings.seo?.noIndex === true}
|
||||
onToggle={() => update('seo.noIndex', !settings.seo?.noIndex)}
|
||||
/>
|
||||
|
||||
<ToggleCard
|
||||
icon={<Icons.IconLink size={16} />}
|
||||
title="nofollow (Block Link Following)"
|
||||
description="Instructs search engine crawlers not to follow outgoing links"
|
||||
checked={settings.seo?.noFollow === true}
|
||||
onToggle={() => update('seo.noFollow', !settings.seo?.noFollow)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
495
app/admin/components/settings/ThemeSection.tsx
Normal file
495
app/admin/components/settings/ThemeSection.tsx
Normal file
@@ -0,0 +1,495 @@
|
||||
'use client';
|
||||
|
||||
import { useState, type CSSProperties } from 'react';
|
||||
import * as Icons from '../Icons';
|
||||
import OptionGrid, { toOptions } from '../fields/OptionGrid';
|
||||
import { DEFAULT_PRESET } from '@/lib/config/theme';
|
||||
import { effectiveTheme, FeatureRow } from './fields';
|
||||
import type { SectionProps } from './types';
|
||||
|
||||
const PRESETS = ['studio-modern', 'studio', 'minimal', 'editorial', 'classic', 'noir', 'monograph'];
|
||||
const PHOTO_FRAMES = ['none', 'passepartout', 'shadow'];
|
||||
const HERO_STYLES = ['split', 'fullbleed', 'minimal', 'stacked', 'typographic', 'mosaic', 'cover'];
|
||||
|
||||
const PHOTO_FRAME_INFO: Record<string, { label: string; desc: string }> = {
|
||||
none: { label: 'None', desc: 'Flush image with crisp edges' },
|
||||
passepartout: {
|
||||
label: 'Passepartout',
|
||||
desc: 'Classic gallery matting border',
|
||||
},
|
||||
shadow: { label: 'Shadow', desc: 'Soft floating drop shadow' },
|
||||
};
|
||||
const PHOTO_FRAME_OPTIONS = toOptions(PHOTO_FRAMES, PHOTO_FRAME_INFO);
|
||||
|
||||
function PhotoFramePreview({ value }: { value: string }) {
|
||||
return (
|
||||
<div className="frame-card-preview">
|
||||
<div className={`mini-frame-demo frame-${value}`}>
|
||||
<div className="mini-frame-photo" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const HERO_STYLE_INFO: Record<string, { label: string; desc: string }> = {
|
||||
split: { label: 'Split', desc: 'Side-by-side title & photo' },
|
||||
fullbleed: { label: 'Fullbleed', desc: 'Edge-to-edge full width banner' },
|
||||
minimal: { label: 'Minimal', desc: 'Centered title with subtle photo' },
|
||||
stacked: { label: 'Stacked', desc: 'Title stacked directly over photo' },
|
||||
typographic: { label: 'Typographic', desc: 'Oversized magazine masthead' },
|
||||
mosaic: { label: 'Mosaic', desc: 'Dynamic photo collage layout' },
|
||||
cover: {
|
||||
label: 'Cover (Experimental)',
|
||||
desc: 'Fullscreen splash with a single Enter link',
|
||||
},
|
||||
};
|
||||
const HERO_STYLE_OPTIONS = toOptions(HERO_STYLES, HERO_STYLE_INFO);
|
||||
|
||||
function HeroStylePreview({ value }: { value: string }) {
|
||||
return (
|
||||
<div className="hero-card-preview">
|
||||
<div className={`mini-hero-demo hero-demo-${value}`}>
|
||||
{value === 'split' && (
|
||||
<>
|
||||
<div className="hero-demo-text">
|
||||
<div className="demo-line title" />
|
||||
<div className="demo-line sub" />
|
||||
</div>
|
||||
<div className="hero-demo-photo" />
|
||||
</>
|
||||
)}
|
||||
{value === 'fullbleed' && (
|
||||
<div className="hero-demo-full">
|
||||
<div className="demo-line title light" />
|
||||
</div>
|
||||
)}
|
||||
{value === 'minimal' && (
|
||||
<>
|
||||
<div className="hero-demo-center-text">
|
||||
<div className="demo-line title short" />
|
||||
</div>
|
||||
<div className="hero-demo-photo small" />
|
||||
</>
|
||||
)}
|
||||
{value === 'stacked' && (
|
||||
<>
|
||||
<div className="hero-demo-text">
|
||||
<div className="demo-line title" />
|
||||
</div>
|
||||
<div className="hero-demo-photo banner" />
|
||||
</>
|
||||
)}
|
||||
{value === 'typographic' && (
|
||||
<>
|
||||
<div className="demo-line title giant" />
|
||||
<div className="hero-demo-grid2">
|
||||
<div className="hero-demo-photo" />
|
||||
<div className="hero-demo-photo" />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{value === 'mosaic' && (
|
||||
<div className="hero-demo-mosaic">
|
||||
<div className="hero-demo-photo big" />
|
||||
<div className="hero-demo-photo-col">
|
||||
<div className="hero-demo-photo" />
|
||||
<div className="hero-demo-photo" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Card metadata for the theme picker. `font`, `radius` and `frame` mirror the
|
||||
* real preset definitions in lib/config/theme.ts so the mini mockups show what
|
||||
* the preset actually does; `gap` is the visual density of its gallery grid.
|
||||
*/
|
||||
const THEME_INFO: Record<
|
||||
string,
|
||||
{
|
||||
desc: string;
|
||||
label: string;
|
||||
accent: string;
|
||||
bg: string;
|
||||
tile: string;
|
||||
font: string;
|
||||
type: 'serif' | 'sans' | 'mono';
|
||||
radius: number;
|
||||
frame: 'none' | 'passepartout' | 'shadow';
|
||||
gap: number;
|
||||
}
|
||||
> = {
|
||||
studio: {
|
||||
label: 'Studio',
|
||||
desc: 'Clean, high-contrast grid with sans-serif type.',
|
||||
bg: '#141414',
|
||||
tile: '#242424',
|
||||
accent: '#e60012',
|
||||
font: 'Playfair Display',
|
||||
type: 'serif',
|
||||
radius: 0,
|
||||
frame: 'passepartout',
|
||||
gap: 4,
|
||||
},
|
||||
'studio-modern': {
|
||||
label: 'Studio Modern',
|
||||
desc: 'Leica precision: Archivo grotesque, mono EXIF, red signal accents.',
|
||||
bg: '#121212',
|
||||
tile: '#191919',
|
||||
accent: '#e60012',
|
||||
font: 'Archivo',
|
||||
type: 'sans',
|
||||
radius: 0,
|
||||
frame: 'none',
|
||||
gap: 3,
|
||||
},
|
||||
minimal: {
|
||||
label: 'Minimal',
|
||||
desc: 'Pure raw layouts with tiny gaps and high whitespace.',
|
||||
bg: '#ffffff',
|
||||
tile: '#f3f3f3',
|
||||
accent: '#111111',
|
||||
font: 'Geist',
|
||||
type: 'sans',
|
||||
radius: 0,
|
||||
frame: 'none',
|
||||
gap: 2,
|
||||
},
|
||||
editorial: {
|
||||
label: 'Editorial',
|
||||
desc: 'Warm backgrounds, elegant serifs and large headers.',
|
||||
bg: '#fbf9f4',
|
||||
tile: '#e5dfd4',
|
||||
accent: '#b89053',
|
||||
font: 'Bodoni Moda',
|
||||
type: 'serif',
|
||||
radius: 0,
|
||||
frame: 'shadow',
|
||||
gap: 8,
|
||||
},
|
||||
classic: {
|
||||
label: 'Classic',
|
||||
desc: 'Soft traditional photographer portfolio with shadows.',
|
||||
bg: '#f7f7f7',
|
||||
tile: '#ffffff',
|
||||
accent: '#444444',
|
||||
font: 'Cinzel',
|
||||
type: 'serif',
|
||||
radius: 12,
|
||||
frame: 'passepartout',
|
||||
gap: 7,
|
||||
},
|
||||
noir: {
|
||||
label: 'Noir',
|
||||
desc: 'High drama absolute pitch black, stark high-fashion look.',
|
||||
bg: '#000000',
|
||||
tile: '#151515',
|
||||
accent: '#ffffff',
|
||||
font: 'Libre Baskerville',
|
||||
type: 'serif',
|
||||
radius: 0,
|
||||
frame: 'passepartout',
|
||||
gap: 6,
|
||||
},
|
||||
monograph: {
|
||||
label: 'Monograph',
|
||||
desc: 'Typewriter monospace font, grid borders and document feel.',
|
||||
bg: '#f4f4f6',
|
||||
tile: '#ffffff',
|
||||
accent: '#555555',
|
||||
font: 'Instrument Serif',
|
||||
type: 'mono',
|
||||
radius: 0,
|
||||
frame: 'none',
|
||||
gap: 5,
|
||||
},
|
||||
};
|
||||
|
||||
/* The preset group sits below THEME_INFO on purpose. PRESET_OPTIONS is built
|
||||
at module evaluation and reads it through themeInfo(); declared above, it
|
||||
hit the temporal dead zone and the whole Settings page failed to load with
|
||||
"Cannot access 'THEME_INFO' before initialization". tsc does not catch it
|
||||
because the read goes through a hoisted function, and a production build
|
||||
succeeds because the module is only evaluated in the browser (#542). */
|
||||
/** The theme picker's own metadata, with the fallback the card grid needs. */
|
||||
function themeInfo(value: string) {
|
||||
return (
|
||||
THEME_INFO[value] || {
|
||||
label: value,
|
||||
desc: '',
|
||||
bg: '#fff',
|
||||
tile: '#eee',
|
||||
accent: '#333',
|
||||
font: 'System',
|
||||
type: 'sans' as const,
|
||||
radius: 0,
|
||||
frame: 'none' as const,
|
||||
gap: 4,
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
const PRESET_OPTIONS = PRESETS.map((value) => ({
|
||||
value,
|
||||
label: themeInfo(value).label,
|
||||
desc: themeInfo(value).desc,
|
||||
}));
|
||||
|
||||
function PresetPreview({ value }: { value: string }) {
|
||||
const i = themeInfo(value);
|
||||
return (
|
||||
<div className="preset-card-preview" data-frame={i.frame}>
|
||||
<div className="mini-header">
|
||||
<span className={`mini-specimen type-${i.type}`}>Aa</span>
|
||||
<span className="mini-line" />
|
||||
</div>
|
||||
<div className="mini-grid">
|
||||
<div className="mini-tile" />
|
||||
<div className="mini-tile" />
|
||||
<div className="mini-tile" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PresetSpecs({ value }: { value: string }) {
|
||||
const i = themeInfo(value);
|
||||
return (
|
||||
<span className="preset-card-specs">
|
||||
{i.font} · radius {i.radius} · {i.frame}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ThemeSection({ settings, update }: SectionProps) {
|
||||
// Read off the page on mount: the toggle previews light and dark on the
|
||||
// admin itself, and the page may already be in either.
|
||||
const [currentMode, setCurrentMode] = useState<'dark' | 'light'>(() =>
|
||||
typeof document !== 'undefined' &&
|
||||
document.documentElement.getAttribute('data-theme') === 'light'
|
||||
? 'light'
|
||||
: 'dark',
|
||||
);
|
||||
|
||||
const toggleMode = (mode: 'dark' | 'light') => {
|
||||
setCurrentMode(mode);
|
||||
if (typeof document !== 'undefined') {
|
||||
document.documentElement.setAttribute('data-theme', mode);
|
||||
localStorage.setItem('theme', mode);
|
||||
}
|
||||
};
|
||||
|
||||
// Same idea for the theme: an unset field shows the preset's own value, not
|
||||
// a fallback of this form's — Classic used to read "split hero, no frame".
|
||||
const theme = effectiveTheme(settings.theme);
|
||||
|
||||
return (
|
||||
<div className="settings-panel theme-settings-panel">
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconPalette size={18} /> Theme Presets & Color Mode
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Choose a typography preset and preview in Light or Dark mode.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<label htmlFor="theme-visitor-default-mode">Visitor Default Mode</label>
|
||||
<select
|
||||
id="theme-visitor-default-mode"
|
||||
aria-label="Visitor default mode"
|
||||
value={settings.mode || 'dark'}
|
||||
onChange={(e) => update('mode', e.target.value)}
|
||||
>
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
<option value="auto">Follow the visitor's system</option>
|
||||
</select>
|
||||
<p className="admin-field-hint">
|
||||
What a first-time visitor sees. The light/dark toggle in the site header still lets them
|
||||
choose, and their choice is remembered on their device. The preview below is your own, and
|
||||
does not change this.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<OptionGrid
|
||||
label="Preset"
|
||||
options={PRESET_OPTIONS}
|
||||
value={settings.theme?.preset || DEFAULT_PRESET}
|
||||
onSelect={(v) => update('theme.preset', v)}
|
||||
cardClassName="theme-preset-card"
|
||||
renderPreview={(o) => <PresetPreview value={o.value} />}
|
||||
renderSpecs={(o) => <PresetSpecs value={o.value} />}
|
||||
cardStyle={(o) => {
|
||||
const i = themeInfo(o.value);
|
||||
return {
|
||||
'--preset-accent': i.accent,
|
||||
'--preset-bg': i.bg,
|
||||
'--preset-tile': i.tile,
|
||||
'--preset-radius': `${i.radius}px`,
|
||||
'--preset-gap': `${i.gap}px`,
|
||||
} as CSSProperties;
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="admin-field">
|
||||
<span className="admin-field-label">Color Mode</span>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '0.78rem',
|
||||
color: 'var(--admin-text-muted)',
|
||||
margin: '0.25rem 0 0.6rem',
|
||||
lineHeight: '1.4',
|
||||
}}
|
||||
>
|
||||
Presets like <strong>Editorial</strong>, <strong>Minimal</strong> &{' '}
|
||||
<strong>Classic</strong> feature warm light/cream backgrounds in Light Mode and charcoal
|
||||
in Dark Mode.
|
||||
</p>
|
||||
<div className="segmented-control">
|
||||
<button
|
||||
type="button"
|
||||
className={`segment-btn ${currentMode === 'light' ? 'active' : ''}`}
|
||||
onClick={() => toggleMode('light')}
|
||||
>
|
||||
<Icons.IconSun size={14} /> Light Mode (Cream / Beige)
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={`segment-btn ${currentMode === 'dark' ? 'active' : ''}`}
|
||||
onClick={() => toggleMode('dark')}
|
||||
>
|
||||
<Icons.IconMoon size={14} /> Dark Mode (Charcoal)
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconTarget size={18} /> Accent Color
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Pick a primary accent color for links, buttons, and highlights.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-field">
|
||||
<div className="accent-picker-wrapper">
|
||||
<div className="color-swatches-row">
|
||||
{[
|
||||
{ hex: '#e60012', name: 'Studio Red' },
|
||||
{ hex: '#b89053', name: 'Editorial Gold' },
|
||||
{ hex: '#10b981', name: 'Emerald' },
|
||||
{ hex: '#3b82f6', name: 'Sapphire' },
|
||||
{ hex: '#8b5cf6', name: 'Violet' },
|
||||
{ hex: '#ffffff', name: 'Monochrome White' },
|
||||
{ hex: '#000000', name: 'Obsidian Black' },
|
||||
].map((swatch) => {
|
||||
const isSelected = theme.accent.toLowerCase() === swatch.hex.toLowerCase();
|
||||
return (
|
||||
<button
|
||||
key={swatch.hex}
|
||||
type="button"
|
||||
className={`color-swatch-btn ${isSelected ? 'active' : ''}`}
|
||||
style={{ backgroundColor: swatch.hex }}
|
||||
onClick={() => update('theme.accent', swatch.hex)}
|
||||
title={swatch.name}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="color-field">
|
||||
<input
|
||||
type="color"
|
||||
aria-label="Accent colour"
|
||||
value={theme.accent}
|
||||
onChange={(e) => update('theme.accent', e.target.value)}
|
||||
/>
|
||||
<input
|
||||
aria-label="Accent colour (hex)"
|
||||
type="text"
|
||||
value={settings.theme?.accent || ''}
|
||||
onChange={(e) => update('theme.accent', e.target.value)}
|
||||
placeholder={theme.accent}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconFrame size={18} /> Photo Frame & Layout
|
||||
</h3>
|
||||
<p className="settings-section-sub">
|
||||
Customize image presentation borders and hero layouts.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<OptionGrid
|
||||
label="Photo Frame"
|
||||
options={PHOTO_FRAME_OPTIONS}
|
||||
value={theme.photoFrame}
|
||||
onSelect={(v) => update('theme.photoFrame', v)}
|
||||
cardClassName="frame-card"
|
||||
renderPreview={(o) => <PhotoFramePreview value={o.value} />}
|
||||
/>
|
||||
|
||||
<OptionGrid
|
||||
label="Hero Style"
|
||||
options={HERO_STYLE_OPTIONS}
|
||||
value={theme.heroStyle}
|
||||
onSelect={(v) => update('theme.heroStyle', v)}
|
||||
cardClassName="hero-card"
|
||||
renderPreview={(o) => <HeroStylePreview value={o.value} />}
|
||||
/>
|
||||
|
||||
<div className="settings-section-divider" />
|
||||
|
||||
<div className="settings-section-header">
|
||||
<h3>
|
||||
<Icons.IconSparkles size={18} /> Look & motion
|
||||
</h3>
|
||||
<p className="settings-section-sub">Effects and small controls on every page.</p>
|
||||
</div>
|
||||
|
||||
<div className="feature-list">
|
||||
<FeatureRow
|
||||
icon={<Icons.IconSparkles size={15} />}
|
||||
title="Page transitions"
|
||||
description="A short fade between pages"
|
||||
checked={settings.transitions !== false}
|
||||
onToggle={() => update('transitions', settings.transitions === false)}
|
||||
/>
|
||||
<FeatureRow
|
||||
icon={<Icons.IconArrowUp size={15} />}
|
||||
title="Scroll-to-top button"
|
||||
description="A floating arrow on long pages"
|
||||
checked={settings.scrollToTop !== false}
|
||||
onToggle={() => update('scrollToTop', settings.scrollToTop === false)}
|
||||
/>
|
||||
<FeatureRow
|
||||
icon={<Icons.IconFilm size={15} />}
|
||||
title="Film grain"
|
||||
description="Analog noise over the background"
|
||||
checked={theme.grain}
|
||||
onToggle={() => update('theme.grain', !theme.grain)}
|
||||
/>
|
||||
<FeatureRow
|
||||
icon={<Icons.IconTarget size={15} />}
|
||||
title="Header accent dot"
|
||||
description="A dot beside the active section heading"
|
||||
checked={theme.headerDot}
|
||||
onToggle={() => update('theme.headerDot', !theme.headerDot)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
154
app/admin/components/settings/fields.tsx
Normal file
154
app/admin/components/settings/fields.tsx
Normal file
@@ -0,0 +1,154 @@
|
||||
'use client';
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
import Link from 'next/link';
|
||||
import * as Icons from '../Icons';
|
||||
// Direct import from the theme module, not from '@/lib/config': the config
|
||||
// index pulls in `fs` and cannot be bundled into a client component.
|
||||
import { resolveTheme } from '@/lib/config/theme';
|
||||
import type { SettingsYaml } from '@/lib/config/schema';
|
||||
import type { Settings } from './types';
|
||||
|
||||
/**
|
||||
* One labelled block of related switches.
|
||||
*
|
||||
* The features panel was a single flat grid of identical cards, so nothing said
|
||||
* which switches belonged together — and a switch that publishes private notes
|
||||
* looked exactly like one that controls a fade (#510).
|
||||
*/
|
||||
export function FeatureGroup({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
chip,
|
||||
children,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
/** Short marker for a group that needs its own weight, e.g. what visitors see. */
|
||||
chip?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="settings-group">
|
||||
<div className="settings-group-head">
|
||||
<span className="settings-group-title">
|
||||
{icon}
|
||||
{title}
|
||||
{chip && <span className="settings-group-chip">{chip}</span>}
|
||||
</span>
|
||||
<span className="settings-group-desc">{description}</span>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* A switch inside a group panel. Deliberately lighter than a toggle card: these
|
||||
* are settings *of* the panel they sit in, and rendering them as peers of the
|
||||
* top-level cards is what hid the structure in the first place.
|
||||
*/
|
||||
export function SettingRow({
|
||||
title,
|
||||
description,
|
||||
checked,
|
||||
onToggle,
|
||||
disabled,
|
||||
hint,
|
||||
indented,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onToggle: () => void;
|
||||
/** A row whose parent switch is off — shown, but inert and explained. */
|
||||
disabled?: boolean;
|
||||
hint?: string;
|
||||
indented?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
className={`setting-row${indented ? ' setting-row--indented' : ''}${
|
||||
disabled ? ' setting-row--disabled' : ''
|
||||
}`}
|
||||
onClick={onToggle}
|
||||
disabled={disabled}
|
||||
aria-pressed={checked}
|
||||
>
|
||||
<span className="setting-row-info">
|
||||
<span className="setting-row-title">{title}</span>
|
||||
<span className="setting-row-desc">{description}</span>
|
||||
{hint && (
|
||||
<span className="setting-row-hint">
|
||||
<Icons.IconBan size={11} /> {hint}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
<span className={`switch-toggle switch-toggle--sm ${checked && !disabled ? 'on' : ''}`}>
|
||||
<span className="switch-slider" />
|
||||
</span>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* One switch in a feature list: a single dense line instead of a card. Cards
|
||||
* gave every switch the same weight, so a fade and a whole page looked alike;
|
||||
* rows grouped by meaning let the group heading carry that weight instead.
|
||||
* The optional link sits beside the switch, not inside it — a link nested in
|
||||
* a button is invalid and swallows the click.
|
||||
*/
|
||||
export function FeatureRow({
|
||||
icon,
|
||||
title,
|
||||
description,
|
||||
checked,
|
||||
onToggle,
|
||||
href,
|
||||
}: {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
description: string;
|
||||
checked: boolean;
|
||||
onToggle: () => void;
|
||||
/** Where this feature is configured beyond on/off. */
|
||||
href?: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="feature-row">
|
||||
<button type="button" className="feature-row-main" onClick={onToggle} aria-pressed={checked}>
|
||||
<span className="feature-row-icon">{icon}</span>
|
||||
<span className="feature-row-info">
|
||||
<span className="feature-row-title">{title}</span>
|
||||
<span className="feature-row-desc">{description}</span>
|
||||
</span>
|
||||
<span className={`switch-toggle ${checked ? 'on' : ''}`}>
|
||||
<span className="switch-slider" />
|
||||
</span>
|
||||
</button>
|
||||
{/* Reserved even without a link, so every switch lines up in one column. */}
|
||||
{href ? (
|
||||
<Link href={href} className="feature-row-link">
|
||||
Configure →
|
||||
</Link>
|
||||
) : (
|
||||
<span className="feature-row-link" aria-hidden="true" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* The theme as the site resolves it. A preset name the form does not know (a
|
||||
* hand-edited typo) falls back to the default instead of taking the panel down.
|
||||
*/
|
||||
export function effectiveTheme(raw: Settings['theme']) {
|
||||
try {
|
||||
return resolveTheme(raw as SettingsYaml['theme']);
|
||||
} catch {
|
||||
return resolveTheme(undefined);
|
||||
}
|
||||
}
|
||||
95
app/admin/components/settings/types.ts
Normal file
95
app/admin/components/settings/types.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
/**
|
||||
* Shared shape of the settings form (#554). The sections edit one object
|
||||
* that mirrors settings.yaml; SettingsEditor owns it and hands each section
|
||||
* the object plus the two ways to change it.
|
||||
*/
|
||||
|
||||
export interface Settings {
|
||||
title?: string;
|
||||
subtitle?: string;
|
||||
/** Absolute site URL for sitemap, feed and structured data (#472). */
|
||||
url?: string;
|
||||
lang?: string;
|
||||
sitePassword?: string;
|
||||
mode?: 'light' | 'dark' | 'auto';
|
||||
exifOnHover?: boolean;
|
||||
exif?: {
|
||||
camera?: boolean;
|
||||
settings?: boolean;
|
||||
location?: boolean;
|
||||
caption?: boolean;
|
||||
};
|
||||
map?: boolean;
|
||||
transitions?: boolean;
|
||||
scrollToTop?: boolean;
|
||||
analytics?: boolean;
|
||||
theme?: {
|
||||
preset?: string;
|
||||
accent?: string;
|
||||
photoFrame?: string;
|
||||
grain?: boolean;
|
||||
headerDot?: boolean;
|
||||
heroStyle?: string;
|
||||
};
|
||||
grid?: {
|
||||
columns?: number;
|
||||
gap?: number;
|
||||
aspectRatio?: string;
|
||||
layout?: string;
|
||||
};
|
||||
footer?: {
|
||||
name?: string;
|
||||
instagram?: string;
|
||||
email?: string;
|
||||
website?: string;
|
||||
};
|
||||
/** EXPERIMENTAL: external links appended to the header navigation */
|
||||
navLinks?: Array<{ label?: string; url?: string }>;
|
||||
contact?: { enabled?: boolean; notifyUrl?: string; retentionDays?: number };
|
||||
privacy?: { enabled?: boolean };
|
||||
legal?: {
|
||||
enabled?: boolean;
|
||||
heading?: string;
|
||||
name?: string;
|
||||
address?: string;
|
||||
zipCity?: string;
|
||||
country?: string;
|
||||
email?: string;
|
||||
phone?: string;
|
||||
contactUrl?: string;
|
||||
contactLabel?: string;
|
||||
taxId?: string;
|
||||
vatId?: string;
|
||||
extraInfo?: string;
|
||||
};
|
||||
seo?: {
|
||||
title?: string;
|
||||
description?: string;
|
||||
titleTemplate?: string;
|
||||
noIndex?: boolean;
|
||||
noFollow?: boolean;
|
||||
};
|
||||
protection?: {
|
||||
disableRightClick?: boolean;
|
||||
disableImageDrag?: boolean;
|
||||
};
|
||||
proofing?: {
|
||||
enabled?: boolean;
|
||||
allowMailto?: boolean;
|
||||
};
|
||||
watermark?: {
|
||||
enabled?: boolean;
|
||||
text?: string;
|
||||
opacity?: number;
|
||||
position?: 'bottom-right' | 'bottom-left' | 'center';
|
||||
};
|
||||
about?: { enabled?: boolean };
|
||||
}
|
||||
|
||||
export interface SectionProps {
|
||||
settings: Settings;
|
||||
/** Set one dotted path, e.g. `theme.accent`. An empty value removes the key. */
|
||||
update: (path: string, value: unknown) => void;
|
||||
/** Set several paths in one state update. */
|
||||
updateMany: (entries: Record<string, unknown>) => void;
|
||||
}
|
||||
Reference in New Issue
Block a user