@lad-sapienza/scms-core 0.1.0-alpha.1 → 0.1.0-alpha.4

package/README.md

@@ -29,9 +29,9 @@ export default defineConfig({
   integrations: [
     ...scms({
       // all optional, default to the paths below
-      contentDir: 'usr/content',
-      pagesDir: 'usr/pages',
-      galleriesDir: 'usr/galleries',
+      contentDir: 'src/content',
+      pagesDir: 'src/pages',
+      galleriesDir: 'src/galleries',
     }),
   ],
 });
@@ -65,16 +65,26 @@ import { directusLoader } from '@lad-sapienza/scms-core/integrations/directusLoa
 
 See each component folder's own `README.md` (`components/DataTb`, `components/Gallery`, `components/ZoteroGeoViewer`, `components/`) for detailed API docs and examples.
 
+## Creating a new site
+
+```bash
+npx --package=@lad-sapienza/scms-core scms-create my-site
+cd my-site
+npm run dev
+```
+
+Prompts for a title, description, author, and site URL, then scaffolds a minimal, ready-to-run Astro + s:CMS project (`src/content.config.ts`, `src/pages/index.astro`, `astro.config.mjs`, etc.) and runs `npm install`.
+
 ## Scaffolding CLI
 
-This package also ships the interactive scaffolding tools sCMS sites use to add content, as `bin` commands — run from the consuming site's project root:
+This package also ships the interactive scaffolding tools s:CMS sites use to add content, as `bin` commands — run from the consuming site's project root:
 
 ```bash
-npx scms-add-collection   # scaffold a new Astro content collection under usr/
+npx scms-add-collection   # scaffold a new Astro content collection under src/
 npx scms-add-content      # add a new content file to an existing collection
 ```
 
-A consuming site typically wires these up as `npm run add-collection` / `npm run add-content` in its own `package.json`.
+A consuming site typically wires these up as `npm run add-collection` / `npm run add-content` in its own `package.json` (this is what `scms-create` sets up automatically).
 
 ## Development
 

package/bin/add-collection.mjs

@@ -11,7 +11,7 @@ import { join, relative } from 'node:path';
 // own location says nothing about the consuming site's layout. ROOT_DIR must
 // be the invoking project's root, i.e. wherever the CLI was run from.
 const ROOT_DIR    = process.cwd();
-const CONFIG_FILE = join(ROOT_DIR, 'usr', 'content.config.ts');
+const CONFIG_FILE = join(ROOT_DIR, 'src', 'content.config.ts');
 
 // ─── Color helpers ────────────────────────────────────────────────────────────
 const G = '\x1b[32m', Y = '\x1b[33m', R = '\x1b[31m';
@@ -150,7 +150,7 @@ const entries = (await getCollection('__COL__'))
     {entries.length === 0 && (
       <p class="text-center text-muted mt-5">
         No entries yet — add Markdown files to{' '}
-        <code>usr/content/__COL__/</code> and set <code>draft: false</code>.
+        <code>src/content/__COL__/</code> and set <code>draft: false</code>.
       </p>
     )}
   </main>
@@ -207,7 +207,7 @@ const entries = (await getCollection('__COL__'))
     {entries.length === 0 && (
       <p class="text-center text-muted mt-5">
         No entries yet — add Markdown files to{' '}
-        <code>usr/content/__COL__/</code> and set <code>draft: false</code>.
+        <code>src/content/__COL__/</code> and set <code>draft: false</code>.
       </p>
     )}
   </main>
@@ -254,7 +254,7 @@ const entries = (await getCollection('__COL__'))
     {entries.length === 0 && (
       <p class="text-center text-muted mt-5">
         No entries yet — add Markdown files to{' '}
-        <code>usr/content/__COL__/</code> and set <code>draft: false</code>.
+        <code>src/content/__COL__/</code> and set <code>draft: false</code>.
       </p>
     )}
   </main>
@@ -420,10 +420,15 @@ const { Content } = await render(entry);
 
 // ─── Main ─────────────────────────────────────────────────────────────────────
 async function main() {
-  // Parse existing collections
-  const cfgSrc    = readFileSync(CONFIG_FILE, 'utf8');
-  const exportM   = cfgSrc.match(/export const collections\s*=\s*\{([^}]+)\}/s);
-  const existing  = exportM
+  // Parse existing collections. Search only from the `// Export all
+  // collections` marker onward (the real export always follows it) — a plain
+  // whole-file regex would also match doc-comment examples mentioning the
+  // same "export const collections = {...}" text earlier in the file.
+  const cfgSrc     = readFileSync(CONFIG_FILE, 'utf8');
+  const markerIdx  = cfgSrc.indexOf('// Export all collections');
+  const searchFrom = markerIdx === -1 ? cfgSrc : cfgSrc.slice(markerIdx);
+  const exportM    = searchFrom.match(/export const collections\s*=\s*\{([^}]+)\}/s);
+  const existing   = exportM
     ? [...exportM[1].matchAll(/(?:['"]([\w-]+)['"]|(\w+))\s*:/g)].map(m => m[1] ?? m[2])
     : [];
 
@@ -465,14 +470,14 @@ async function main() {
   ok(`Type: ${colType}`);
   rl.close();
 
-  // ─── 1. Update usr/content.config.ts ──────────────────────────────────────
+  // ─── 1. Update src/content.config.ts ──────────────────────────────────────
   const newBlock =
     `\n// Schema for ${colName} entries  [${colType} type]\n` +
     `// TODO: customize the schema fields to match your content structure\n` +
     `const ${varName} = defineCollection({\n` +
     `  loader: glob({\n` +
     `    pattern: '**/*.{md,mdx}',\n` +
-    `    base: './usr/content/${colName}',\n` +
+    `    base: './src/content/${colName}',\n` +
     `  }),\n` +
     `  schema: z.object({\n` +
     `${SCHEMA[colType]}\n` +
@@ -480,20 +485,29 @@ async function main() {
     `});\n`;
 
   const MARKER = '// Export all collections';
-  let cfg = readFileSync(CONFIG_FILE, 'utf8');
-  if (!cfg.includes(MARKER)) error(`Marker '${MARKER}' not found in config.ts`);
-
-  cfg = cfg.replace(MARKER, newBlock + MARKER);
-  cfg = cfg.replace(
-    /(export const collections\s*=\s*\{)([^}]+)(\};)/s,
+  const cfg = readFileSync(CONFIG_FILE, 'utf8');
+  const markerIndex = cfg.indexOf(MARKER);
+  if (markerIndex === -1) error(`Marker '${MARKER}' not found in config.ts`);
+
+  // Only ever scan/edit the file from the marker onward — the real `export
+  // const collections = {...}` always lives there. Scanning the whole file
+  // for that pattern is fragile: doc-comment examples earlier in the file
+  // (e.g. in the template this script ships against) can contain the exact
+  // same text, and a plain first-match regex would silently edit the
+  // comment instead of the real export.
+  const before = cfg.slice(0, markerIndex);
+  const after = (newBlock + cfg.slice(markerIndex)).replace(
+    // [^}]* (zero or more), not [^}]+ — a fresh scms-create site starts with
+    // an empty `export const collections = {};`, and `+` would fail to match it.
+    /(export const collections\s*=\s*\{)([^}]*)(\};)/s,
     (_, open, inner, close) => `${open}${inner.trimEnd()}\n  ${toObjectKey(colName)}: ${varName},\n${close}`
   );
-  writeFileSync(CONFIG_FILE, cfg, 'utf8');
-  ok('usr/content.config.ts updated');
+  writeFileSync(CONFIG_FILE, before + after, 'utf8');
+  ok('src/content.config.ts updated');
 
   // ─── 2. Sample content file ───────────────────────────────────────────────
   const today      = new Date().toISOString().slice(0, 10);
-  const contentDir = join(ROOT_DIR, 'usr', 'content', colName);
+  const contentDir = join(ROOT_DIR, 'src', 'content', colName);
   mkdirSync(contentDir, { recursive: true });
 
   const SAMPLE_NAME = { blog: 'sample-post.md', docs: 'sample-doc.md', generic: 'sample.md' };
@@ -520,7 +534,7 @@ async function main() {
   ok(relative(ROOT_DIR, samplePath));
 
   // ─── 3. Page templates ────────────────────────────────────────────────────
-  const pagesDir = join(ROOT_DIR, 'usr', 'pages', colName);
+  const pagesDir = join(ROOT_DIR, 'src', 'pages', colName);
   mkdirSync(pagesDir, { recursive: true });
 
   const sub       = (s) => s.replaceAll('__COL__', colName);
@@ -537,9 +551,9 @@ async function main() {
   console.log(`${G}${B}Collection '${colName}' scaffolded successfully!${X}`);
   console.log('');
   console.log(`  ${B}Next steps:${X}`);
-  console.log(`    1. Open ${B}usr/content.config.ts${X} and review the schema for '${colName}'`);
-  console.log(`    2. Edit the page files in ${B}usr/pages/${colName}/${X} to customise the UI`);
-  console.log(`    3. Replace the sample file in ${B}usr/content/${colName}/${X} with real content`);
+  console.log(`    1. Open ${B}src/content.config.ts${X} and review the schema for '${colName}'`);
+  console.log(`    2. Edit the page files in ${B}src/pages/${colName}/${X} to customise the UI`);
+  console.log(`    3. Replace the sample file in ${B}src/content/${colName}/${X} with real content`);
   console.log(`    4. Run ${B}npm run dev${X} and visit ${B}/${colName}${X}`);
   console.log('');
 }

package/bin/add-content.mjs

@@ -12,8 +12,8 @@ import { execSync } from 'node:child_process';
 // own location says nothing about the consuming site's layout. ROOT_DIR must
 // be the invoking project's root, i.e. wherever the CLI was run from.
 const ROOT_DIR     = process.cwd();
-const CONFIG_FILE  = join(ROOT_DIR, 'usr', 'content.config.ts');
-const CONTENT_BASE = join(ROOT_DIR, 'usr', 'content');
+const CONFIG_FILE  = join(ROOT_DIR, 'src', 'content.config.ts');
+const CONTENT_BASE = join(ROOT_DIR, 'src', 'content');
 
 // ─── Color helpers ────────────────────────────────────────────────────────────
 const G = '\x1b[32m', Y = '\x1b[33m', R = '\x1b[31m';
@@ -43,9 +43,16 @@ const ask = async (prompt) => {
 
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 
-/** Parse top-level collection keys from export const collections = { ... } */
+/**
+ * Parse top-level collection keys from export const collections = { ... }.
+ * Searches only from the `// Export all collections` marker onward (the real
+ * export always follows it) — a plain whole-file regex would also match
+ * doc-comment examples mentioning the same text earlier in the file.
+ */
 function parseCollections(src) {
-  const m = src.match(/export const collections\s*=\s*\{([^}]+)\}/s);
+  const markerIdx = src.indexOf('// Export all collections');
+  const searchFrom = markerIdx === -1 ? src : src.slice(markerIdx);
+  const m = searchFrom.match(/export const collections\s*=\s*\{([^}]+)\}/s);
   if (!m) return [];
   // Keys may be quoted (e.g. 'my-collection': ...) when the name isn't a
   // valid bare identifier — see toObjectKey() in add-collection.mjs.
@@ -71,7 +78,7 @@ function hasMdx(dir) {
 /** Extract z.object field lines for a named collection from config.ts */
 function parseSchemaFields(src, colName) {
   const pat = new RegExp(
-    `defineCollection\\(\\{.*?base\\s*:\\s*['"]\\./usr/content/${colName}['"].*?z\\.object\\(\\{(.*?)\\}\\)`,
+    `defineCollection\\(\\{.*?base\\s*:\\s*['"]\\./src/content/${colName}['"].*?z\\.object\\(\\{(.*?)\\}\\)`,
     's'
   );
   const m = src.match(pat);
@@ -177,7 +184,7 @@ async function main() {
       continue;
     }
     if (existsSync(join(colDir, raw, `index.${ext}`))) {
-      warn(`File already exists: usr/content/${collection}/${raw}/index.${ext}`);
+      warn(`File already exists: src/content/${collection}/${raw}/index.${ext}`);
       continue;
     }
     slug = raw;
@@ -253,7 +260,7 @@ async function main() {
   console.log(`${G}${B}Done!${X}`);
   console.log('');
   console.log(`  ${B}Next steps:${X}`);
-  console.log(`    1. Open ${B}usr/content/${collection}/${slug}/index.${ext}${X} and write your content`);
+  console.log(`    1. Open ${B}src/content/${collection}/${slug}/index.${ext}${X} and write your content`);
   console.log(`    2. Set ${B}draft: false${X} when the content is ready to publish`);
   console.log(`    3. Run ${B}npm run dev${X} and visit ${B}/${collection}/${slug}${X}`);
   console.log('');

package/bin/create.mjs

@@ -0,0 +1,149 @@
+#!/usr/bin/env node
+// create.mjs — Guided scaffold of a new s:CMS site.
+// Usage: npx --package=@lad-sapienza/scms-core scms-create [directory]
+
+import { createInterface } from 'node:readline';
+import {
+  existsSync, readdirSync, readFileSync, writeFileSync, mkdirSync, statSync,
+} from 'node:fs';
+import { join, dirname, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { spawnSync, execSync } from 'node:child_process';
+
+const __dirname     = dirname(fileURLToPath(import.meta.url));
+const PACKAGE_ROOT   = join(__dirname, '..');
+const TEMPLATE_DIR   = join(PACKAGE_ROOT, 'template');
+const OWN_PACKAGE     = JSON.parse(readFileSync(join(PACKAGE_ROOT, 'package.json'), 'utf8'));
+
+// ─── Color helpers ────────────────────────────────────────────────────────────
+const G = '\x1b[32m', Y = '\x1b[33m', R = '\x1b[31m';
+const B = '\x1b[1m',  X = '\x1b[0m';
+const ok    = (...a) => console.log(`${G}✔${X}  ${a.join(' ')}`);
+const warn  = (...a) => console.log(`${Y}⚠${X}  ${a.join(' ')}`);
+const error = (...a) => { console.error(`${R}✖${X}  ${a.join(' ')}`); process.exit(1); };
+
+// ─── Readline helper ──────────────────────────────────────────────────────────
+// Same async-iterator pattern as add-collection.mjs / add-content.mjs — avoids
+// the readline hang on piped/pasted (non-TTY) input those scripts already fixed.
+const rl  = createInterface({ input: process.stdin, output: process.stdout });
+rl.on('SIGINT', () => { console.log(''); process.exit(0); });
+const rlIterator = rl[Symbol.asyncIterator]();
+const ask = async (prompt) => {
+  process.stdout.write(prompt);
+  const { value, done } = await rlIterator.next();
+  if (done) { console.log(''); process.exit(0); }
+  return value;
+};
+
+/** Strip a leading semver range operator (^, ~, >=, etc.) to get a bare version. */
+const bareVersion = (range) => range.replace(/^[^\d]*/, '');
+
+/** Recursively copy `template/`, substituting placeholders and stripping .tmpl suffixes. */
+function copyTemplate(srcDir, destDir, replacements) {
+  mkdirSync(destDir, { recursive: true });
+  for (const entry of readdirSync(srcDir, { withFileTypes: true })) {
+    const srcPath = join(srcDir, entry.name);
+    if (entry.isDirectory()) {
+      copyTemplate(srcPath, join(destDir, entry.name), replacements);
+      continue;
+    }
+    const isTemplate = entry.name.endsWith('.tmpl');
+    const destName = isTemplate ? entry.name.slice(0, -'.tmpl'.length) : entry.name;
+    const destPath = join(destDir, destName);
+    let content = readFileSync(srcPath, 'utf8');
+    if (isTemplate) {
+      for (const [placeholder, value] of Object.entries(replacements)) {
+        content = content.replaceAll(placeholder, value);
+      }
+    }
+    writeFileSync(destPath, content, 'utf8');
+  }
+}
+
+async function main() {
+  console.log('');
+  console.log(`${B}Create a new s:CMS site${X}`);
+  console.log('');
+
+  // ─── Prompt: target directory ────────────────────────────────────────────
+  const argDir = process.argv[2];
+  let targetDir;
+  if (argDir) {
+    targetDir = argDir;
+  } else {
+    while (true) {
+      const raw = (await ask(`${B}Directory${X} (will be created): `)).trim();
+      if (!raw) { warn('Please enter a directory name.'); continue; }
+      targetDir = raw;
+      break;
+    }
+  }
+  const targetPath = join(process.cwd(), targetDir);
+  if (existsSync(targetPath) && readdirSync(targetPath).length > 0) {
+    error(`${targetDir}/ already exists and is not empty.`);
+  }
+
+  // ─── Prompt: site info ────────────────────────────────────────────────────
+  const dirBasedTitle = targetDir.split('/').pop().replace(/[-_]/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  const title = (await ask(`${B}Site title${X} [${dirBasedTitle}]: `)).trim() || dirBasedTitle;
+
+  const description = (await ask(`${B}Description${X}: `)).trim() || `A site built with s:CMS.`;
+
+  let gitAuthor = '';
+  try {
+    gitAuthor = execSync('git config user.name', { encoding: 'utf8', stdio: ['ignore', 'pipe', 'ignore'] }).trim();
+  } catch { /* git not available or no config */ }
+  const author = (await ask(`${B}Author${X}${gitAuthor ? ` [${gitAuthor}]` : ''}: `)).trim() || gitAuthor;
+
+  const siteUrl = (await ask(`${B}Site URL${X} (for sitemap/canonical URLs, e.g. https://example.com): `)).trim();
+
+  const installNow = (await ask(`${B}Run npm install now?${X} [Y/n]: `)).trim().toLowerCase() !== 'n';
+
+  rl.close();
+
+  // ─── Copy + customize the template ────────────────────────────────────────
+  const npmPackageName = targetDir.split('/').pop().toLowerCase().replace(/[^a-z0-9-]/g, '-');
+  const peers = OWN_PACKAGE.peerDependencies || {};
+
+  const replacements = {
+    __NAME__: npmPackageName,
+    __TITLE__: title,
+    __DESCRIPTION__: description,
+    __AUTHOR__: author,
+    __SITE_URL__: siteUrl,
+    __SCMS_VERSION__: OWN_PACKAGE.version,
+    __ASTRO_VERSION__: bareVersion(peers.astro ?? '7.0.0'),
+    __REACT_VERSION__: bareVersion(peers.react ?? '19.0.0'),
+    __REACT_DOM_VERSION__: bareVersion(peers['react-dom'] ?? '19.0.0'),
+    __MAPLIBRE_VERSION__: bareVersion(peers['maplibre-gl'] ?? '5.0.0'),
+    __TYPES_REACT_VERSION__: bareVersion(peers['@types/react'] ?? '19.0.0'),
+    __TYPES_REACT_DOM_VERSION__: bareVersion(peers['@types/react-dom'] ?? '19.0.0'),
+  };
+
+  copyTemplate(TEMPLATE_DIR, targetPath, replacements);
+  ok(`Created ${relative(process.cwd(), targetPath) || '.'}/`);
+
+  // ─── Install ───────────────────────────────────────────────────────────────
+  if (installNow) {
+    console.log('');
+    console.log(`${B}Installing dependencies...${X}`);
+    const result = spawnSync('npm', ['install'], { cwd: targetPath, stdio: 'inherit' });
+    if (result.status !== 0) {
+      warn('npm install failed — run it yourself once you\'ve reviewed the error above.');
+    } else {
+      ok('Dependencies installed');
+    }
+  }
+
+  // ─── Summary ──────────────────────────────────────────────────────────────
+  console.log('');
+  console.log(`${G}${B}Site scaffolded successfully!${X}`);
+  console.log('');
+  console.log(`  ${B}Next steps:${X}`);
+  console.log(`    1. cd ${targetDir}`);
+  if (!installNow) console.log(`    2. npm install`);
+  console.log(`    ${installNow ? 2 : 3}. npm run dev`);
+  console.log('');
+}
+
+main().catch((err) => error(String(err)));

package/components/BSNavbar.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from "react";
 import { Menu, X, ChevronRight } from "lucide-react";
+import { useTranslation } from "./i18n";
 
 /**
  * A single navigation link entry.
@@ -43,7 +44,7 @@ interface CssClasses {
  * Active state is computed internally from `currentPath` — no need to set
  * `isActive` on individual menu items.
  *
- * Menu data can be loaded from a YAML file (e.g. `usr/content/data/menu.yaml`)
+ * Menu data can be loaded from a YAML file (e.g. `src/content/data/menu.yaml`)
  * and passed straight to `menuItems`.
  *
  * Must be hydrated with `client:load` when used inside an Astro component.
@@ -63,7 +64,7 @@ interface CssClasses {
  * />
  * ```
  *
- * @example YAML menu structure (`usr/content/data/menu.yaml`)
+ * @example YAML menu structure (`src/content/data/menu.yaml`)
  * ```yaml
  * - href: /
  *   label: Home
@@ -100,7 +101,10 @@ interface BSNavbarProps {
 function isItemActive(item: MenuItem, currentPath: string): boolean {
   const target = item.match ?? item.href;
   if (target) {
-    const active = target === "/" ? currentPath === "/" : currentPath.startsWith(target);
+    // A target ending in "/" is an index page (e.g. "/" itself, or a
+    // locale-prefixed home like "/it/") — match it exactly, otherwise
+    // startsWith would make it "active" for every page beneath it too.
+    const active = target.endsWith("/") ? currentPath === target : currentPath.startsWith(target);
     if (active) return true;
   }
   return item.children?.some(child => isItemActive(child, currentPath)) ?? false;
@@ -159,11 +163,7 @@ const DropdownItem: React.FC<{ item: MenuItem; currentPath: string }> = ({ item,
       </button>
       {isOpen && (
         <ul
-          className="dropdown-menu show"
-          style={openLeft
-            ? { position: "absolute", right: "100%", left: "auto", top: 0, minWidth: "12rem" }
-            : { position: "absolute", left: "100%", top: 0, minWidth: "12rem" }
-          }
+          className={`dropdown-menu show scms-nested-dropdown${openLeft ? " scms-nested-dropdown--left" : ""}`}
         >
           {item.children!.map((child, i) => (
             <DropdownItem key={child.href ?? i} item={child} currentPath={currentPath} />
@@ -229,10 +229,44 @@ const NavItem: React.FC<{ item: MenuItem; currentPath: string; liClass?: string
 // BSNavbar — root component
 // ---------------------------------------------------------------------------
 const BSNavbar: React.FC<BSNavbarProps> = ({ menuItems, currentPath = "/", cssClasses = {}, brand }) => {
+  const t = useTranslation();
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <nav className={`navbar navbar-expand-md ${cssClasses.nav ?? ""}`}>
+      {/*
+        Third-level (and deeper) dropdowns cascade sideways on desktop
+        (position: absolute; left/right: 100% — see DropdownItem below).
+        Below Bootstrap's md breakpoint the navbar collapses into a
+        single narrow column (navbar-expand-md), and a sideways flyout
+        has nowhere to go but off the edge of the screen — unreachable,
+        not just visually broken. Below md, this flips the same markup
+        to flow inline instead, indented to show the hierarchy.
+      */}
+      <style>{`
+        @media (max-width: 767.98px) {
+          .scms-nested-dropdown {
+            position: static !important;
+            width: 100% !important;
+            min-width: 0 !important;
+            box-shadow: none !important;
+            border: none !important;
+            padding-left: 1rem;
+          }
+        }
+        @media (min-width: 768px) {
+          .scms-nested-dropdown {
+            position: absolute;
+            left: 100%;
+            top: 0;
+            min-width: 12rem;
+          }
+          .scms-nested-dropdown.scms-nested-dropdown--left {
+            left: auto;
+            right: 100%;
+          }
+        }
+      `}</style>
       <div className="container">
         {brand && (
           <a className={`navbar-brand ${brand.cssClasses ?? ""}`} href={brand.link}>
@@ -245,9 +279,9 @@ const BSNavbar: React.FC<BSNavbarProps> = ({ menuItems, currentPath = "/", cssCl
           onClick={() => setIsOpen(prev => !prev)}
           aria-controls="navbarCollapse"
           aria-expanded={isOpen}
-          aria-label="Toggle navigation"
+          aria-label={t('navbar.toggleNavigation')}
         >
-          {isOpen ? <X size={24} className="text-dark" /> : <Menu size={24} className="text-dark" />}
+          {isOpen ? <X size={24} /> : <Menu size={24} />}
         </button>
         <div className={`collapse navbar-collapse${isOpen ? " show" : ""}`} id="navbarCollapse">
           <ul className={`navbar-nav ${cssClasses.ul ?? ""}`}>

package/components/DataTb/DataTb.astro

@@ -17,7 +17,7 @@
  * headless data-loaders (they render nothing; they call onDataLoad/onLoadingChange/
  * onError) for building a fully custom table UI — they are not children of
  * <DataTb>, which has no children/composition API. See the "Headless Source
- * Components" section of usr/content/docs/components/datatb.mdx.
+ * Components" section of DataTb/README.md.
  */
 
 // Re-export for convenience. `DataTb` itself is deliberately not re-exported

package/components/DataTb/DataTb.tsx

@@ -17,6 +17,7 @@ import {
   type ColumnFiltersState,
 } from '@tanstack/react-table';
 import { fetchData } from '../../utils/data-fetcher';
+import { useTranslation } from '../i18n';
 import type { DataRow, DataTbProps } from './types';
 import {
   autoDetectColumns,
@@ -33,13 +34,18 @@ export function DataTb({
   initialSort,
   className = '',
   source,
-  loadingMessage = 'Loading data...',
-  emptyMessage = 'No data available',
-  errorMessage = 'Error loading data',
+  loadingMessage,
+  emptyMessage,
+  errorMessage,
   truncateContent = true,
   truncateMaxWidth = '20rem',
   contentSize = 'sm',
 }: DataTbProps) {
+  const t = useTranslation();
+  const resolvedLoadingMessage = loadingMessage ?? t('dataTb.loading');
+  const resolvedEmptyMessage = emptyMessage ?? t('dataTb.empty');
+  const resolvedErrorMessage = errorMessage ?? t('dataTb.error');
+
   const [data, setData] = useState<DataRow[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<Error | null>(null);
@@ -148,7 +154,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-loading p-4 text-center text-secondary">
-          {loadingMessage}
+          {resolvedLoadingMessage}
         </div>
       </div>
     );
@@ -159,7 +165,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-error p-4 text-center text-danger">
-          {errorMessage}: {error.message}
+          {resolvedErrorMessage}: {error.message}
         </div>
       </div>
     );
@@ -170,7 +176,7 @@ export function DataTb({
     return (
       <div className="datatb-container">
         <div className="datatb-empty p-4 text-center text-secondary">
-          {emptyMessage}
+          {resolvedEmptyMessage}
         </div>
       </div>
     );
@@ -178,6 +184,12 @@ export function DataTb({
 
   return (
     <div className={`datatb-container ${className}`}>
+      <style>{`
+        .datatb-thead {
+          --bs-table-bg: var(--bs-tertiary-bg);
+          --bs-table-color: var(--bs-emphasis-color);
+        }
+      `}</style>
 
       {/* Search input */}
       {searchable && (
@@ -186,7 +198,7 @@ export function DataTb({
             type="text"
             value={globalFilter ?? ''}
             onChange={(e) => setGlobalFilter(e.target.value)}
-            placeholder="Search..."
+            placeholder={t('dataTb.searchPlaceholder')}
             className="form-control form-control-sm"
             style={{ maxWidth: '24rem' }}
           />
@@ -196,7 +208,7 @@ export function DataTb({
       {/* Table */}
       <div className="datatb-table-wrapper table-responsive border rounded shadow-sm">
         <table className="datatb-table table table-sm table-hover mb-0">
-          <thead className="table-light">
+          <thead className="datatb-thead">
             {table.getHeaderGroups().map((headerGroup) => (
               <tr key={headerGroup.id}>
                 {headerGroup.headers.map((header, index) => (
@@ -309,7 +321,10 @@ export function DataTb({
 
           <div className="d-flex align-items-center gap-2 flex-nowrap">
             <span className="small text-secondary text-nowrap">
-              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+              {t('dataTb.paginationSummary', {
+                page: table.getState().pagination.pageIndex + 1,
+                totalPages: table.getPageCount(),
+              })}
             </span>
 
             {paginationConfig.showPageSize !== false && (
@@ -330,7 +345,7 @@ export function DataTb({
             )}
 
             <span className="small text-secondary text-nowrap">
-              ({data.length} total)
+              {t('dataTb.rowsTotal', { count: data.length })}
             </span>
           </div>
         </div>

package/components/DataTb/README.md

@@ -11,7 +11,7 @@ A powerful, flexible data table component for Astro with support for multiple da
 - 🎨 **Auto-detection**: Automatically detects columns from data
 - ⚙️ **Customizable**: Override columns, formatting, and rendering
 - 🎯 **TypeScript**: Full type safety
-- 💅 **Bootstrap Styled**: Uses the same Bootstrap 5 classes as the rest of s:CMS, themeable via `usr/styles/global.css`
+- 💅 **Bootstrap Styled**: Uses the same Bootstrap 5 classes as the rest of s:CMS, themeable via your site's `src/styles/global.css`
 
 ## Basic Usage
 
@@ -272,4 +272,4 @@ Data fetching is handled internally based on the `source`/`csv`/`json`/`api`/`di
 
 ## Examples
 
-See the [DataTb docs page](../../../usr/content/docs/components/datatb.mdx) (rendered at `/docs/components/datatb` on a running site) for live, interactive examples of every prop and source type.
+See the [DataTb docs page](https://scms.lad-sapienza.it/docs/components/datatb) on the s:CMS demo site for live, interactive examples of every prop and source type.

package/components/Gallery/Gallery.astro

@@ -7,7 +7,7 @@
  * for how auto-loading works without each caller needing its own glob).
  *
  * <Gallery />                     colocated: ./gallery/ next to this page/content file
- * <Gallery name="scavi-2024" />   shared: usr/galleries/scavi-2024/
+ * <Gallery name="scavi-2024" />   shared: src/galleries/scavi-2024/
  * <Gallery images={[...]} />      explicit: pass images directly (remote, custom order, ...)
  */
 import { Gallery as GalleryClient } from './Gallery';

package/components/Gallery/Gallery.tsx

@@ -7,6 +7,7 @@
 
 import { Gallery as PhotoSwipeGallery, Item } from 'react-photoswipe-gallery';
 import type { GalleryImage } from './types';
+import { useTranslation } from '../i18n';
 import 'photoswipe/dist/photoswipe.css';
 
 interface Props {
@@ -43,6 +44,8 @@ export function Gallery({
   columns = { min: 200, max: 1 },
   className = '',
 }: Props) {
+  const t = useTranslation();
+
   if (images.length === 0) {
     return null;
   }
@@ -112,7 +115,7 @@ export function Gallery({
                   tabIndex={0}
                   style={{ cursor: 'pointer', overflow: 'hidden', borderRadius: '4px' }}
                   data-caption={image.caption || image.alt}
-                  aria-label={`Open image: ${image.alt}`}
+                  aria-label={t('gallery.openImage', { alt: image.alt })}
                 >
                   <img
                     src={image.thumb}