@lad-sapienza/scms-core 0.1.0-alpha.0

package/components/Record/Image.tsx

@@ -0,0 +1,114 @@
+import { useContext } from 'react';
+import { RecordContext } from './context';
+import { getValueByDotPath } from './utils';
+
+interface DirectusFileRef {
+  id?: string;
+  filename_download?: string;
+  description?: string;
+  title?: string;
+}
+
+export interface ImageProps {
+  fieldName: string;
+  index?: number | 'all';
+  dEndPoint?: string;
+  preset?: string | null;
+  custom?: string | null;
+  className?: string;
+  alt?: string;
+  record?: any;
+}
+
+function asFileRef(item: any): DirectusFileRef | null {
+  if (!item) return null;
+
+  if (item.directus_files_id && typeof item.directus_files_id === 'object') {
+    return item.directus_files_id;
+  }
+
+  if (typeof item === 'object' && item.id) {
+    return item;
+  }
+
+  return null;
+}
+
+function buildImageUrl(
+  endpoint: string,
+  file: DirectusFileRef,
+  preset?: string | null,
+  custom?: string | null,
+): string {
+  const base = `${endpoint.replace(/\/$/, '')}/assets/${file.id}${file.filename_download ? `/${file.filename_download}` : ''}`;
+
+  if (preset) return `${base}?key=${encodeURIComponent(preset)}`;
+  if (custom) return `${base}?${custom}`;
+  return base;
+}
+
+export function Image({
+  fieldName,
+  index = 0,
+  dEndPoint = import.meta.env.PUBLIC_DIRECTUS_URL,
+  preset = null,
+  custom = null,
+  className,
+  alt,
+  record,
+}: ImageProps) {
+  const contextRecord = useContext(RecordContext);
+  const sourceRecord = record ?? contextRecord;
+
+  if (!sourceRecord) return null;
+
+  const rawValue = getValueByDotPath(sourceRecord, fieldName);
+  if (!rawValue) return null;
+
+  const list = Array.isArray(rawValue) ? rawValue : [rawValue];
+
+  // Render images: handle both plain URLs and Directus file objects
+  const renderItems = list.map((item, idx) => {
+    // Handle plain URL strings
+    if (typeof item === 'string' && (item.startsWith('http') || item.startsWith('/'))) {
+      return (
+        <img
+          key={idx}
+          src={item}
+          alt={alt || fieldName}
+          className={className}
+        />
+      );
+    }
+
+    // Handle Directus file objects
+    const file = asFileRef(item);
+    if (!file?.id) return null;
+
+    if (!dEndPoint) return null;
+
+    const src = buildImageUrl(dEndPoint, file, preset, custom);
+    const imageAlt = alt || file.description || file.title || file.filename_download || '';
+
+    return (
+      <img
+        key={idx}
+        src={src}
+        alt={imageAlt}
+        className={className}
+      />
+    );
+  });
+
+  const validImages = renderItems.filter(Boolean);
+  if (validImages.length === 0) return null;
+
+  if (index === 'all') {
+    return <>{validImages}</>;
+  }
+
+  return validImages[index] || validImages[0];
+}
+
+
+export default Image;

package/components/Record/RecordFetcher.tsx

@@ -0,0 +1,127 @@
+import { useState, useEffect } from 'react';
+import type { ComponentType } from 'react';
+
+export interface RecordFetcherProps {
+  /** Directus base URL. Defaults to PUBLIC_DIRECTUS_URL env var. */
+  directusUrl?: string;
+  /** Directus static token for authentication. Defaults to PUBLIC_DIRECTUS_TOKEN env var. */
+  directusToken?: string;
+  /**
+   * Fields to fetch (Directus fields query, e.g. `"*.*.*"`).
+   * Defaults to `"*.*.*"`.
+   */
+  fields?: string;
+  /**
+   * User-provided layout component that receives the fetched `record` as a prop.
+   * It also receives `table` and `id` for context.
+   */
+  Layout: ComponentType<{ record: any; table: string; id: string }>;
+  /** Optional custom loading component. */
+  LoadingComponent?: ComponentType;
+  /** Optional custom error component. */
+  ErrorComponent?: ComponentType<{ table: string; id: string }>;
+}
+
+function DefaultLoading() {
+  return (
+    <div style={{ padding: '2rem', opacity: 0.5 }}>
+      Loading record&hellip;
+    </div>
+  );
+}
+
+function DefaultError({ table, id }: { table: string; id: string }) {
+  return (
+    <div style={{ padding: '2rem', color: 'red' }}>
+      Record not found for table &ldquo;{table}&rdquo; with ID &ldquo;{id}&rdquo;.
+    </div>
+  );
+}
+
+/**
+ * Core component that reads `table`, `id`, and `fields` from the URL query
+ * string, fetches the matching Directus record, and renders the user-supplied
+ * `Layout` component with the resolved `record` object.
+ *
+ * **Usage in an Astro page:**
+ * ```astro
+ * ---
+ * import RecordFetcher from '@lad-sapienza/scms-core/components/Record/RecordFetcher.tsx';
+ * import MyLayout from '@components/MyRecordLayout.tsx';
+ * ---
+ * <RecordFetcher Layout={MyLayout} client:load />
+ * ```
+ *
+ * **User layout** only needs to accept `record`:
+ * ```tsx
+ * export default function MyRecordLayout({ record }) {
+ *   return <h1>{record.title}</h1>;
+ * }
+ * ```
+ *
+ * URL query parameters recognised:
+ * - `table` — Directus collection name (required)
+ * - `id`    — Record primary key (required)
+ * - `fields` — Directus fields selector (optional, overrides the `fields` prop)
+ */
+export function RecordFetcher({
+  directusUrl = import.meta.env.PUBLIC_DIRECTUS_URL ?? '',
+  directusToken = import.meta.env.PUBLIC_DIRECTUS_TOKEN ?? '',
+  fields: fieldsProp = '*.*.*',
+  Layout,
+  LoadingComponent = DefaultLoading,
+  ErrorComponent = DefaultError,
+}: RecordFetcherProps) {
+  const [record, setRecord] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [table, setTable] = useState('');
+  const [id, setId] = useState('');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const actualTable = params.get('table') ?? '';
+    const actualId = params.get('id') ?? '';
+    const fields = params.get('fields') ?? fieldsProp;
+
+    setTable(actualTable);
+    setId(actualId);
+
+    if (!actualTable || !actualId) {
+      setError(true);
+      setLoading(false);
+      return;
+    }
+
+    const url = `${directusUrl.replace(/\/$/, '')}/items/${actualTable}/${actualId}?fields=${encodeURIComponent(fields)}`;
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (directusToken) {
+      headers['Authorization'] = `Bearer ${directusToken}`;
+    }
+
+    fetch(url, { headers })
+      .then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then(data => {
+        setRecord(data.data ?? data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('RecordFetcher: error fetching record:', err);
+        setError(true);
+        setLoading(false);
+      });
+  }, [directusUrl, directusToken, fieldsProp]);
+
+  if (loading) return <LoadingComponent />;
+  if (error || !record) return <ErrorComponent table={table} id={id} />;
+
+  return <Layout record={record} table={table} id={id} />;
+}
+
+export default RecordFetcher;

package/components/Record/context.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+export const RecordContext = React.createContext<any>(null);
+
+export interface RecordProviderProps {
+  record: any;
+  children?: React.ReactNode;
+}
+
+export function RecordProvider({ record, children }: RecordProviderProps) {
+  return <RecordContext.Provider value={record}>{children}</RecordContext.Provider>;
+}
+
+export default RecordProvider;

package/components/Record/index.ts

@@ -0,0 +1,11 @@
+export { RecordContext, RecordProvider } from './context';
+export { Field } from './Field';
+export { Image } from './Image';
+export { RecordFetcher } from './RecordFetcher';
+export { useRecordFetcher } from './useRecordFetcher';
+export { getValueByDotPath } from './utils';
+export type { RecordProviderProps } from './context';
+export type { FieldProps } from './Field';
+export type { ImageProps } from './Image';
+export type { RecordFetcherProps } from './RecordFetcher';
+export type { UseRecordFetcherOptions, UseRecordFetcherResult } from './useRecordFetcher';

package/components/Record/useRecordFetcher.ts

@@ -0,0 +1,104 @@
+import { useState, useEffect } from 'react';
+
+export interface UseRecordFetcherOptions {
+  /** Directus base URL. Defaults to PUBLIC_DIRECTUS_URL env var. */
+  directusUrl?: string;
+  /** Directus static token. Defaults to PUBLIC_DIRECTUS_TOKEN env var. */
+  directusToken?: string;
+  /**
+   * Fields to fetch (Directus fields query).
+   * Can be overridden per-request by a `fields` URL query parameter.
+   * Defaults to `"*.*.*"`.
+   */
+  fields?: string;
+}
+
+export interface UseRecordFetcherResult {
+  record: any | null;
+  loading: boolean;
+  error: boolean;
+  table: string;
+  id: string;
+}
+
+/**
+ * React hook that reads `table`, `id`, and `fields` from the URL query string
+ * and fetches the matching Directus record.
+ *
+ * Designed to be called inside a user component that is itself hydrated by
+ * Astro (`client:load` / `client:idle` etc.), avoiding the limitation that
+ * Astro cannot serialize React components across the hydration boundary.
+ *
+ * @example
+ * ```tsx
+ * // usr/components/RecordView.tsx
+ * import { useRecordFetcher } from '@lad-sapienza/scms-core/components/Record/useRecordFetcher';
+ *
+ * export default function RecordView() {
+ *   const { record, loading, error, table, id } = useRecordFetcher();
+ *
+ *   if (loading) return <p>Loading…</p>;
+ *   if (error || !record) return <p>Record not found.</p>;
+ *
+ *   return <h1>{record.title}</h1>;
+ * }
+ * ```
+ *
+ * ```astro
+ * <!-- usr/pages/record.astro -->
+ * <RecordView client:load />
+ * ```
+ */
+export function useRecordFetcher({
+  directusUrl = import.meta.env.PUBLIC_DIRECTUS_URL ?? '',
+  directusToken = import.meta.env.PUBLIC_DIRECTUS_TOKEN ?? '',
+  fields: fieldsProp = '*.*.*',
+}: UseRecordFetcherOptions = {}): UseRecordFetcherResult {
+  const [record, setRecord] = useState<any>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+  const [table, setTable] = useState('');
+  const [id, setId] = useState('');
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const actualTable = params.get('table') ?? '';
+    const actualId = params.get('id') ?? '';
+    const fields = params.get('fields') ?? fieldsProp;
+
+    setTable(actualTable);
+    setId(actualId);
+
+    if (!actualTable || !actualId) {
+      setError(true);
+      setLoading(false);
+      return;
+    }
+
+    const url = `${directusUrl.replace(/\/$/, '')}/items/${actualTable}/${actualId}?fields=${encodeURIComponent(fields)}`;
+
+    const headers: Record<string, string> = {
+      'Content-Type': 'application/json',
+    };
+    if (directusToken) {
+      headers['Authorization'] = `Bearer ${directusToken}`;
+    }
+
+    fetch(url, { headers })
+      .then(r => {
+        if (!r.ok) throw new Error(`HTTP ${r.status}`);
+        return r.json();
+      })
+      .then(data => {
+        setRecord(data.data ?? data);
+        setLoading(false);
+      })
+      .catch(err => {
+        console.error('useRecordFetcher: error fetching record:', err);
+        setError(true);
+        setLoading(false);
+      });
+  }, [directusUrl, directusToken, fieldsProp]);
+
+  return { record, loading, error, table, id };
+}

package/components/Record/utils.ts

@@ -0,0 +1,13 @@
+export function getValueByDotPath(data: any, path: string): any {
+  if (!data || !path) return undefined;
+
+  return path.split('.').reduce((current, segment) => {
+    if (current == null) return undefined;
+
+    if (Array.isArray(current) && /^\d+$/.test(segment)) {
+      return current[Number(segment)];
+    }
+
+    return current[segment];
+  }, data);
+}

package/components/SEO/SEO.astro

@@ -0,0 +1,132 @@
+---
+/**
+ * SEO Component for Astro
+ * Based on the original sCMS SEO implementation
+ * 
+ * This component generates meta tags and structured data for SEO
+ */
+
+interface SiteMetadata {
+  title: string;
+  titleTemplate?: string;
+  description: string;
+  defaultImage?: string;
+  siteName?: string;
+  twitter?: string;
+  author?: string;
+}
+
+interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  author?: string;
+  isArticle?: boolean;
+  datePublished?: string | Date;
+  dateModified?: string | Date;
+  tags?: string[];
+  canonical?: string;
+  siteMetadata?: SiteMetadata;
+}
+
+const {
+  title,
+  description,
+  image,
+  author,
+  isArticle = false,
+  datePublished,
+  dateModified,
+  tags = [],
+  canonical,
+  siteMetadata,
+} = Astro.props;
+
+// Get site metadata from props or use defaults
+const meta = siteMetadata || {
+  title: 's:CMS',
+  description: 'Static Content Management System',
+  defaultImage: '/images/scms-lad.png',
+  siteName: 'LAD: Laboratorio di Archeologia Digitale alla Sapienza',
+  twitter: '@JulianBogdani',
+};
+
+// Get site URL
+const siteUrl = Astro.site?.toString() || 'https://example.com';
+const currentUrl = canonical || new URL(Astro.url.pathname, siteUrl).toString();
+
+// Resolve values
+const resolvedTitle = title || meta.title;
+const resolvedDescription = description || meta.description;
+const resolvedImage = image ? new URL(image, siteUrl).toString() : (meta.defaultImage ? new URL(meta.defaultImage, siteUrl).toString() : undefined);
+const pageTitle = meta.titleTemplate ? meta.titleTemplate.replace('%s', resolvedTitle) : resolvedTitle;
+
+// Format dates
+const formatDate = (date?: string | Date) => {
+  if (!date) return null;
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return d ? d.toISOString() : '';
+};
+
+const pubDate = formatDate(datePublished);
+const modDate = formatDate(dateModified);
+
+// Build Article JSON-LD for structured data
+const articleJsonLd = isArticle ? {
+  '@context': 'https://schema.org',
+  '@type': 'Article',
+  mainEntityOfPage: {
+    '@type': 'WebPage',
+    '@id': currentUrl,
+  },
+  headline: resolvedTitle,
+  description: resolvedDescription,
+  image: resolvedImage ? [resolvedImage] : [],
+  author: author ? [{ '@type': 'Person', name: author }] : (meta.author ? [{ '@type': 'Person', name: meta.author }] : []),
+  publisher: {
+    '@type': 'Organization',
+    name: meta.siteName || meta.title,
+    logo: {
+      '@type': 'ImageObject',
+      url: meta.defaultImage ? new URL(meta.defaultImage, siteUrl).toString() : undefined,
+    },
+  },
+  datePublished: pubDate,
+  dateModified: modDate,
+  keywords: tags.length ? tags.join(', ') : undefined,
+} : null;
+---
+
+<!-- Primary Meta Tags -->
+<title>{pageTitle}</title>
+<meta name="title" content={resolvedTitle} />
+<meta name="description" content={resolvedDescription} />
+<link rel="canonical" href={currentUrl} />
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={isArticle ? 'article' : 'website'} />
+<meta property="og:url" content={currentUrl} />
+<meta property="og:title" content={resolvedTitle} />
+<meta property="og:description" content={resolvedDescription} />
+<meta property="og:site_name" content={meta.siteName || meta.title} />
+{resolvedImage && <meta property="og:image" content={resolvedImage} />}
+
+<!-- Twitter -->
+<meta property="twitter:card" content={resolvedImage ? 'summary_large_image' : 'summary'} />
+<meta property="twitter:url" content={currentUrl} />
+<meta property="twitter:title" content={resolvedTitle} />
+<meta property="twitter:description" content={resolvedDescription} />
+{resolvedImage && <meta property="twitter:image" content={resolvedImage} />}
+{meta.twitter && <meta name="twitter:site" content={meta.twitter} />}
+{meta.twitter && <meta name="twitter:creator" content={meta.twitter} />}
+
+<!-- Article Metadata -->
+{isArticle && author && <meta name="author" content={author} />}
+{isArticle && pubDate && <meta property="article:published_time" content={pubDate} />}
+{isArticle && modDate && <meta property="article:modified_time" content={modDate} />}
+{isArticle && tags.map(tag => <meta property="article:tag" content={tag} />)}
+
+<!-- Structured Data -->
+{articleJsonLd && (
+  <script type="application/ld+json" set:html={JSON.stringify(articleJsonLd)} is:inline />
+)}

package/components/TableOfContents/TableOfContents.astro

@@ -0,0 +1,86 @@
+---
+/**
+ * Table of Contents component that extracts headings from the page
+ * Automatically generates TOC from all headings with IDs in the page
+ */
+
+interface Props {
+  /** Maximum heading level to include (1-6) */
+  maxDepth?: number;
+  /** Minimum heading level to include (1-6) */
+  minDepth?: number;
+  /** Title for the TOC section */
+  title?: string;
+}
+
+const { maxDepth = 3, minDepth = 2, title = "Table of Contents" } = Astro.props;
+
+// Generate unique ID for this TOC instance
+const tocId = `toc-${Math.random().toString(36).substring(7)}`;
+---
+
+<nav id={tocId} class="toc bg-light border border-secondary rounded p-3 mb-4 shadow-sm">
+  <h2 class="h5 mb-3 text-secondary">{title}</h2>
+  <ul class="toc-list small"></ul>
+</nav>
+
+<style>
+  .toc {
+    background-color: var(--bs-light);
+    border-color: var(--bs-secondary);
+  }
+  
+  a.toc-link {
+    color: var(--bs-secondary);
+    text-decoration: none;
+    transition: color 0.15s ease-in-out;
+    display: block;
+    padding: 0.25rem 0;
+  }
+  
+  a.toc-link:hover {
+    color: var(--bs-primary);
+    text-decoration: underline;
+  }
+</style>
+
+<script define:vars={{ tocId, minDepth, maxDepth }} is:inline>
+  // Wait for DOM to be ready
+  document.addEventListener('DOMContentLoaded', () => {
+    const tocElement = document.getElementById(tocId);
+    if (!tocElement) return;
+    
+    const tocList = tocElement.querySelector('.toc-list');
+    if (!tocList) return;
+    
+    // Find all headings with IDs in the document
+    const headingSelector = Array.from({ length: maxDepth - minDepth + 1 }, (_, i) => 
+      `h${minDepth + i}[id]`
+    ).join(', ');
+    
+    const headings = document.querySelectorAll(headingSelector);
+    
+    if (headings.length === 0) {
+      tocElement.style.display = 'none';
+      return;
+    }
+    
+    // Build the TOC
+    headings.forEach((heading) => {
+      // ...existing code...
+      const id = heading.id;
+      const text = heading.textContent || '';
+      
+      const li = document.createElement('li');
+      
+      const a = document.createElement('a');
+      a.href = `#${id}`;
+      a.textContent = text;
+      a.className = 'toc-link';
+      
+      li.appendChild(a);
+      tocList.appendChild(li);
+    });
+  });
+</script>
+