@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/src/components/ThemeSections.astro

@@ -5,49 +5,68 @@ import { getTheme } from '../lib/theme';
 import { getRepo } from '../lib/repo';
 import { CONTENT, collectionUrl } from '../lib/content';
 import { sectionIssues } from '../theme-sdk/contract.mjs';
+import { migrateSection, resolveSectionData, wallNow, withExample } from '../lib/sections';
+import { scheduledVisible, localizeData } from '../theme-sdk/fields.mjs';
+import { I18N, requestLocale } from '../lib/i18n';
+import { resolvePreview } from '../lib/designPreview';
 import WidgetRenderer from './WidgetRenderer.astro';
 import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../lib/highlightCode';
 import PostCard from './site/PostCard.astro';
 import '../styles/sections.css';
-interface Props { page: Page; settings: Settings }
+interface Props { page: Page; settings: Settings; editable?: boolean; locale?: string }
 const { page, settings } = Astro.props;
 const theme = getTheme(settings.activeTheme);
 const layout = settings.sectionPages[page.id];
 const repo = await getRepo(Astro.locals);
 const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
-const safeUrl = (value: unknown) => {
-  const s = String(value ?? '').trim();
-  return /^(https?:\/\/|mailto:|tel:|\/(?!\/)|#)/i.test(s) ? s : '';
-};
-const sections = await Promise.all(layout.sections.map(async (section) => {
-  const definition = theme.sections[section.type];
-  const invalid = sectionIssues({ mode: 'sections', sections: [section] }, theme.sections).length > 0;
-  const data = Object.fromEntries(Object.entries(definition?.fields ?? {}).map(([key, field]) => [key, section.data[key] ?? (field as {default?: unknown}).default ?? '']));
+// admin design preview: sections carry their ids so the Design screen can
+// open the one you click (see Site.astro's preview script)
+const editable = Astro.props.editable ?? (await resolvePreview(Astro.url, Astro.cookies, Astro.locals)).role === 'admin';
+const locale = Astro.props.locale ?? requestLocale(Astro.url, Astro.locals);
+const now = Date.now();
+const nowWall = wallNow(settings.timezone || 'UTC', now);
+// another language: dates/times format in it (components read settings.locale)
+const localized = locale !== I18N.defaultLocale && I18N.locales.includes(locale);
+const view = localized ? { ...settings, locale } : settings;
+const sections = await Promise.all(layout.sections.map(async (stored) => {
+  // older instances upgrade through the theme's migrations/<type>.mjs, if any
+  const migrated = migrateSection(theme, stored);
+  const definition = theme.sections[migrated.type];
+  // scheduled sections: outside their window they're hidden for visitors;
+  // the admin preview still shows them (marked) so they can be edited
+  const offSchedule = !scheduledVisible(migrated, nowWall);
+  const example = editable && definition ? withExample(definition, migrated.data) : { data: migrated.data, used: false };
+  // validity is judged on the main-language data (translations are words only)
+  const invalid = migrated.hidden || (offSchedule && !editable) || sectionIssues({ mode: 'sections', sections: [{ ...migrated, data: example.data as typeof migrated.data }] }, theme.sections).length > 0;
+  // another language: its translated words over the shared facts
+  const words = definition && localized && migrated.translations?.[locale] ? localizeData(definition, example.data, migrated.translations[locale]) : example.data;
+  const data = definition && !invalid ? await resolveSectionData(definition, words, { repo, settings: view, now }) : {};
+  const section = migrated;
   const collection = String(data.collection || 'posts');
-  const posts = section.type === 'posts' && !section.hidden && !invalid && CONTENT.collections[collection]
+  const posts = section.type === 'posts' && !invalid && CONTENT.collections[collection]
     ? (await repo.listPublishedPosts(collection)).slice(0, Math.max(1, Math.min(12, Number(data.limit) || 3))) : [];
-  return { ...section, data, invalid, posts, Template: theme.sectionTemplates[section.type] as any };
+  const items = Array.isArray(data.items) ? (data.items as { title?: string; text?: string }[]) : [];
+  return { ...section, data, invalid, posts, items, offSchedule, exampleUsed: example.used, Template: theme.sectionTemplates[section.type] as any };
 }));
+const hero = (d: Record<string, unknown>) => ({ image: String(d.image ?? ''), href: String(d.href ?? '') });
 ---
 <div class="acms-sections">
-  {sections.filter(s => !s.hidden && !s.invalid).map(({ id, type, variant, data, Template, posts }) => (
-    <section id={`section-${id}`} class:list={['acms-section', `section-${type}`, `variant-${variant}`]}>
-      {type === 'live' && !Template ? <LiveCard display={variant} /> : type === 'page-content' ? (page.bodyHtml ? <article class="page-body" set:html={bodyHtml} /> : <WidgetRenderer pageId={page.id} blocks={page.blocks} />) : Template ? <Template data={data} variant={variant} settings={settings} page={page} /> : (
+  {sections.filter(s => !s.hidden && !s.invalid).map(({ id, type, variant, data, Template, posts, items, offSchedule, exampleUsed }) => (
+    <section id={`section-${id}`} class:list={['acms-section', `section-${type}`, `variant-${variant}`, { 'acms-off-schedule': editable && offSchedule }]} data-acms-section={editable ? id : undefined} data-acms-page={editable ? page.id : undefined} data-acms-label={editable ? `${theme.sections[type]?.name ?? type}${offSchedule ? ' · not showing now (scheduled)' : exampleUsed ? ' · example text' : ''}` : undefined}>
+      {type === 'live' && !Template ? <LiveCard display={variant} /> : type === 'page-content' ? (page.bodyHtml ? <article class="page-body" set:html={bodyHtml} /> : <WidgetRenderer pageId={page.id} blocks={page.blocks} />) : Template ? <Template data={data} variant={variant} settings={view} page={page} /> : (
         <>
           <div class="section-copy">
             {data.heading && <h2>{String(data.heading)}</h2>}
             {data.text && <p class="section-text">{String(data.text)}</p>}
-            {data.label && safeUrl(data.href) && <a class="w-btn primary" href={safeUrl(data.href)}>{String(data.label)}</a>}
+            {data.label && hero(data).href && <a class="w-btn primary" href={hero(data).href}>{String(data.label)}</a>}
           </div>
-          {type === 'hero' && safeUrl(data.image) && <img class="section-image" src={safeUrl(data.image)} alt={String(data.alt ?? '')} loading="eager" />}
+          {type === 'hero' && hero(data).image && <img class="section-image" src={hero(data).image} alt={String(data.alt ?? '')} loading="eager" />}
           {['features', 'testimonials', 'faq'].includes(type) && (
             <div class="section-items">
-              {String(data.items ?? '').split('\n').filter(Boolean).map((row) => {
-                const [title, ...body] = row.split('|');
-                return type === 'faq' ? <details><summary>{title}</summary><p>{body.join('|')}</p></details>
-                  : <article><h3>{title}</h3><p>{body.join('|')}</p></article>;
-              })}
+              {items.filter(row => row.title || row.text).map((row) => type === 'faq'
+                ? <details><summary>{row.title}</summary><p>{row.text}</p></details>
+                : <article><h3>{row.title}</h3><p>{row.text}</p></article>)}
             </div>
           )}
           {type === 'posts' && <div class="section-items">{posts.map(post => <PostCard variant={variant === 'list' ? 'row' : 'card'} href={collectionUrl(post.collection, post.slug)} title={post.title} excerpt={post.excerpt} cover={post.cover} coverAlt={post.coverAlt} />)}</div>}