keystone-design-bootstrap 1.0.3

package/src/lib/hooks/use-resize-observer.ts

@@ -0,0 +1,68 @@
+import { useEffect } from "react";
+import type { RefObject } from "@react-types/shared";
+
+/**
+ * Checks if the ResizeObserver API is supported.
+ * @returns True if the ResizeObserver API is supported, false otherwise.
+ */
+function hasResizeObserver() {
+    return typeof window.ResizeObserver !== "undefined";
+}
+
+/**
+ * The options for the useResizeObserver hook.
+ */
+type useResizeObserverOptionsType<T> = {
+    /**
+     * The ref to the element to observe.
+     */
+    ref: RefObject<T | undefined | null> | undefined;
+    /**
+     * The box to observe.
+     */
+    box?: ResizeObserverBoxOptions;
+    /**
+     * The callback function to call when the size changes.
+     */
+    onResize: () => void;
+};
+
+/**
+ * A hook that observes the size of an element and calls a callback function when the size changes.
+ * @param options - The options for the hook.
+ */
+export function useResizeObserver<T extends Element>(options: useResizeObserverOptionsType<T>) {
+    const { ref, box, onResize } = options;
+
+    useEffect(() => {
+        const element = ref?.current;
+        if (!element) {
+            return;
+        }
+
+        if (!hasResizeObserver()) {
+            window.addEventListener("resize", onResize, false);
+
+            return () => {
+                window.removeEventListener("resize", onResize, false);
+            };
+        } else {
+            const resizeObserverInstance = new window.ResizeObserver((entries) => {
+                if (!entries.length) {
+                    return;
+                }
+
+                onResize();
+            });
+
+            resizeObserverInstance.observe(element, { box });
+
+            return () => {
+                if (element) {
+                    resizeObserverInstance.unobserve(element);
+                }
+            };
+        }
+    }, [onResize, ref, box]);
+}
+

package/src/lib/server-api.ts

@@ -0,0 +1,115 @@
+/**
+ * Server-side API client for SSR
+ * API key is stored securely on the server - never exposed to browser
+ */
+
+const API_URL = process.env.API_URL || 'http://localhost:3000/api/v1';
+const API_KEY = process.env.API_KEY || '';
+
+interface FetchOptions {
+  cache?: RequestCache;
+  revalidate?: number;
+}
+
+async function serverFetch<T>(endpoint: string, options: FetchOptions = {}): Promise<T | null> {
+  const url = `${API_URL}${endpoint}`;
+  
+  try {
+    const fetchOptions: RequestInit & { next?: { revalidate?: number } } = {
+      headers: {
+        'X-API-Key': API_KEY,
+        'Content-Type': 'application/json',
+      },
+      cache: options.cache,
+    };
+    
+    if (options.revalidate) {
+      fetchOptions.next = { revalidate: options.revalidate };
+    }
+    
+    const response = await fetch(url, fetchOptions);
+
+    if (!response.ok) {
+      console.error(`[Server API] Error ${response.status} for ${endpoint}`);
+      return null;
+    }
+
+    const json = await response.json();
+    
+    // Rails API returns { data: [...], meta: {...} }
+    return json.data ?? json;
+  } catch (error) {
+    console.error(`[Server API] Failed to fetch ${endpoint}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Generic serverApi object for flexible endpoint access
+ */
+export const serverApi = {
+  get: <T = any>(endpoint: string, options?: FetchOptions): Promise<T | null> => {
+    return serverFetch<T>(endpoint, options || { revalidate: 60 });
+  }
+};
+
+// Revalidate data every 60 seconds (ISR)
+const defaultOptions: FetchOptions = { revalidate: 60 };
+
+export async function getCompanyInformation() {
+  return serverFetch('/public/company_information', defaultOptions);
+}
+
+export async function getServices() {
+  return serverFetch('/public/services', defaultOptions);
+}
+
+export async function getService(slug: string) {
+  return serverFetch(`/public/services/by_slug/${slug}`, defaultOptions);
+}
+
+export async function getLocations() {
+  return serverFetch('/public/locations', defaultOptions);
+}
+
+export async function getLocation(slug: string) {
+  return serverFetch(`/public/locations/by_slug/${slug}`, defaultOptions);
+}
+
+export async function getReviews() {
+  return serverFetch('/public/reviews', defaultOptions);
+}
+
+export async function getFAQs() {
+  return serverFetch('/public/faq_questions', defaultOptions);
+}
+
+export async function getBlogPosts() {
+  return serverFetch('/public/blog_posts', defaultOptions);
+}
+
+export async function getBlogPost(slug: string) {
+  return serverFetch(`/public/blog_posts/by_slug/${slug}`, defaultOptions);
+}
+
+export async function getTeamMembers() {
+  return serverFetch('/public/team_members', defaultOptions);
+}
+
+export async function getWebsitePhotos() {
+  return serverFetch('/public/website_photos', defaultOptions);
+}
+
+export async function getJobPostings() {
+  return serverFetch('/public/job_postings', defaultOptions);
+}
+
+export async function getJobPosting(slug: string) {
+  return serverFetch(`/public/job_postings/by_slug/${slug}`, defaultOptions);
+}
+
+// Alias for testimonials (API uses "reviews")
+export async function getTestimonials() {
+  return getReviews();
+}
+

package/src/styles/style-overrides.aman.css

@@ -0,0 +1,101 @@
+/* Aman Theme Overrides */
+
+/* Aman theme typography and colors */
+[data-theme="aman"] {
+  /* Typography - use actual font names since CSS variables from next/font are scoped to body */
+  --font-body: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+  --font-display: "Playfair Display", "Playfair Display Fallback", "Didot", "Georgia", serif;
+  
+  /* Aman color palette - warm, elegant tones */
+  --color-bg-primary: #F9F7F0; /* Light warm beige */
+  --color-bg-secondary: #F9F7F0;
+  --background-color-primary: #F9F7F0;
+  --background-color-secondary: #F9F7F0;
+  
+  /* Text colors */
+  --color-text-primary: #1E1E1E; /* Near black for elegant contrast */
+  --color-text-secondary: #505050;
+  --color-text-tertiary: #787878;
+  
+  /* Foreground colors for text classes */
+  --color-fg-primary: #1E1E1E;
+  --color-fg-secondary: #505050;
+  --color-fg-tertiary: #787878;
+  
+  /* Brand accent - elegant gold/bronze */
+  --color-text-brand-accent: #B48C64;
+  --color-text-brand-secondary: #8C6440;
+  
+  /* Border colors */
+  --color-border-primary: #E5E2D9;
+  --color-border-secondary: #D5D2C9;
+}
+
+/* Body text uses Inter */
+[data-theme="aman"] body {
+  font-family: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
+  background-color: #F9F7F0;
+}
+
+/* Headings use Playfair Display */
+[data-theme="aman"] h1,
+[data-theme="aman"] h2,
+[data-theme="aman"] h3,
+[data-theme="aman"] h4,
+[data-theme="aman"] h5,
+[data-theme="aman"] h6 {
+  font-family: "Playfair Display", "Playfair Display Fallback", "Didot", "Georgia", serif !important;
+  font-weight: 400;
+}
+
+/* .font-display class also uses Playfair */
+[data-theme="aman"] .font-display {
+  font-family: "Playfair Display", "Playfair Display Fallback", "Didot", "Georgia", serif !important;
+  font-weight: 400;
+}
+
+/* .font-body class uses Inter */
+[data-theme="aman"] .font-body {
+  font-family: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif !important;
+}
+
+/* Fix header background - ensure solid color */
+[data-theme="aman"] header {
+  background-color: #F9F7F0 !important;
+}
+
+/* Ensure prose content doesn't have white backgrounds */
+[data-theme="aman"] .prose,
+[data-theme="aman"] .prose-lg {
+  background-color: transparent;
+}
+
+/* Navigation styling */
+[data-theme="aman"] nav {
+  font-family: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+}
+
+/* Button text */
+[data-theme="aman"] button,
+[data-theme="aman"] .btn {
+  font-family: "Inter", "Inter Fallback", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+}
+
+/* Sections should use the beige background */
+[data-theme="aman"] section {
+  background-color: #F9F7F0;
+}
+
+/* Override bg-primary class directly */
+[data-theme="aman"] .bg-primary {
+  background-color: #F9F7F0 !important;
+}
+
+/* Paragraphs and general text */
+[data-theme="aman"] p,
+[data-theme="aman"] span,
+[data-theme="aman"] div,
+[data-theme="aman"] li,
+[data-theme="aman"] a {
+  font-family: inherit;
+}

package/src/styles/theme.css

@@ -0,0 +1,224 @@
+/**
+ * Theme CSS
+ * Contains the colors and utilities used by the site template
+ */
+
+@theme {
+    /* ==================== FONTS ==================== */
+    --font-body: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    --font-display: var(--font-inter, "Inter"), -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
+    --font-mono: ui-monospace, "Roboto Mono", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+
+    /* ==================== FONT SIZES ==================== */
+    --text-xs: 0.75rem;
+    --text-xs--line-height: 1.125rem;
+    --text-sm: 0.875rem;
+    --text-sm--line-height: 1.25rem;
+    --text-md: 1rem;
+    --text-md--line-height: 1.5rem;
+    --text-lg: 1.125rem;
+    --text-lg--line-height: 1.75rem;
+    --text-xl: 1.25rem;
+    --text-xl--line-height: 1.875rem;
+    --text-display-xs: 1.5rem;
+    --text-display-xs--line-height: 2rem;
+    --text-display-sm: 1.875rem;
+    --text-display-sm--line-height: 2.375rem;
+    --text-display-md: 2.25rem;
+    --text-display-md--line-height: 2.75rem;
+    --text-display-md--letter-spacing: -0.72px;
+    --text-display-lg: 3rem;
+    --text-display-lg--line-height: 3.75rem;
+    --text-display-lg--letter-spacing: -0.96px;
+    --text-display-xl: 3.75rem;
+    --text-display-xl--line-height: 4.5rem;
+    --text-display-xl--letter-spacing: -1.2px;
+    --text-display-2xl: 4.5rem;
+    --text-display-2xl--line-height: 5.625rem;
+    --text-display-2xl--letter-spacing: -1.44px;
+
+    /* ==================== LAYOUT ==================== */
+    --max-width-container: 1280px;
+    --breakpoint-xxs: 320px;
+    --breakpoint-xs: 600px;
+
+    /* ==================== RADIUS ==================== */
+    --radius-none: 0px;
+    --radius-xs: 0.125rem;
+    --radius-sm: 0.25rem;
+    --radius-DEFAULT: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+
+    /* ==================== SHADOWS ==================== */
+    --shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
+    --shadow-sm: 0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
+    --shadow-md: 0px 4px 6px -1px rgba(10, 13, 18, 0.1), 0px 2px 4px -2px rgba(10, 13, 18, 0.06);
+    --shadow-lg: 0px 12px 16px -4px rgba(10, 13, 18, 0.08), 0px 4px 6px -2px rgba(10, 13, 18, 0.03);
+    --shadow-xl: 0px 20px 24px -4px rgba(10, 13, 18, 0.08), 0px 8px 8px -4px rgba(10, 13, 18, 0.03);
+    --shadow-2xl: 0px 24px 48px -12px rgba(10, 13, 18, 0.18);
+
+    /* ==================== ANIMATIONS ==================== */
+    --animate-marquee: marquee 60s linear infinite;
+
+    @keyframes marquee {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(-100%); }
+    }
+
+    /* ==================== BASE COLORS ==================== */
+    --color-transparent: transparent;
+    --color-white: rgb(255 255 255);
+    --color-black: rgb(0 0 0);
+
+    /* Gray scale - the main palette we actually use */
+    --color-gray-25: rgb(253 253 253);
+    --color-gray-50: rgb(250 250 250);
+    --color-gray-100: rgb(245 245 245);
+    --color-gray-200: rgb(233 234 235);
+    --color-gray-300: rgb(213 215 218);
+    --color-gray-400: rgb(164 167 174);
+    --color-gray-500: rgb(113 118 128);
+    --color-gray-600: rgb(83 88 98);
+    --color-gray-700: rgb(65 70 81);
+    --color-gray-800: rgb(37 43 55);
+    --color-gray-900: rgb(24 29 39);
+    --color-gray-950: rgb(10 13 18);
+
+    /* Blue - used for links, social icons */
+    --color-blue-50: rgb(239 248 255);
+    --color-blue-400: rgb(83 177 253);
+    --color-blue-500: rgb(46 144 250);
+    --color-blue-600: rgb(21 112 239);
+    --color-blue-700: rgb(23 92 211);
+    --color-blue-800: rgb(24 73 169);
+
+    /* Pink - used for Instagram icon */
+    --color-pink-500: rgb(238 70 188);
+    --color-pink-600: rgb(221 37 144);
+
+    /* Brand (green) - minimal set for accent */
+    --color-brand-500: rgb(66 214 116);
+    --color-brand-600: rgb(52 190 100);
+    --color-brand-700: rgb(38 166 84);
+
+    /* Error (red) - for form validation */
+    --color-error-500: rgb(240 68 56);
+    --color-error-600: rgb(217 45 32);
+
+    /* Warning (yellow/orange) - for ratings, alerts */
+    --color-warning-400: rgb(253 176 34);
+    --color-warning-500: rgb(247 144 9);
+    --color-warning-600: rgb(220 104 3);
+
+    /* Success (green) - for success states */
+    --color-success-500: rgb(23 178 106);
+    --color-success-600: rgb(7 148 85);
+
+    /* ==================== SEMANTIC COLORS (Light Mode) ==================== */
+
+    /* Text colors */
+    --color-text-primary: var(--color-gray-900);
+    --color-text-secondary: var(--color-gray-700);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-text-quaternary: var(--color-gray-500);
+    --color-text-disabled: var(--color-gray-500);
+    --color-text-placeholder: var(--color-gray-500);
+    --color-text-white: var(--color-white);
+    --color-text-error-primary: var(--color-error-600);
+    --color-text-brand-secondary: var(--color-brand-700);
+
+    /* Foreground colors (icons, UI elements) */
+    --color-fg-primary: var(--color-gray-900);
+    --color-fg-secondary: var(--color-gray-700);
+    --color-fg-tertiary: var(--color-gray-600);
+    --color-fg-quaternary: var(--color-gray-400);
+    --color-fg-disabled: var(--color-gray-400);
+    --color-fg-white: var(--color-white);
+    --color-fg-brand-primary: var(--color-brand-600);
+    --color-fg-brand-secondary: var(--color-brand-500);
+    --color-fg-error-primary: var(--color-error-600);
+
+    /* Background colors */
+    --color-bg-primary: var(--color-white);
+    --color-bg-secondary: var(--color-gray-50);
+    --color-bg-tertiary: var(--color-gray-100);
+    --color-bg-quaternary: var(--color-gray-200);
+    --color-bg-disabled: var(--color-gray-100);
+    --color-bg-primary_hover: var(--color-gray-50);
+    --color-bg-secondary_hover: var(--color-gray-100);
+    --color-bg-brand-solid: var(--color-brand-600);
+    --color-bg-brand-solid_hover: var(--color-brand-700);
+    --color-bg-error-primary: rgb(254 243 242);
+
+    /* Border colors */
+    --color-border-primary: var(--color-gray-300);
+    --color-border-secondary: var(--color-gray-200);
+    --color-border-tertiary: var(--color-gray-100);
+    --color-border-disabled: var(--color-gray-300);
+    --color-border-brand: var(--color-brand-500);
+    --color-border-error: var(--color-error-500);
+
+    /* Focus ring */
+    --color-focus-ring: var(--color-brand-500);
+
+    /* ==================== TAILWIND PROPERTY MAPPINGS ==================== */
+
+    /* Background property colors */
+    --background-color-primary: var(--color-bg-primary);
+    --background-color-secondary: var(--color-bg-secondary);
+    --background-color-tertiary: var(--color-bg-tertiary);
+    --background-color-quaternary: var(--color-bg-quaternary);
+    --background-color-disabled: var(--color-bg-disabled);
+    --background-color-primary_hover: var(--color-bg-primary_hover);
+    --background-color-secondary_hover: var(--color-bg-secondary_hover);
+    --background-color-brand-solid: var(--color-bg-brand-solid);
+    --background-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
+    --background-color-error-primary: var(--color-bg-error-primary);
+
+    /* Text property colors */
+    --text-color-primary: var(--color-text-primary);
+    --text-color-secondary: var(--color-text-secondary);
+    --text-color-tertiary: var(--color-text-tertiary);
+    --text-color-quaternary: var(--color-text-quaternary);
+    --text-color-disabled: var(--color-text-disabled);
+    --text-color-placeholder: var(--color-text-placeholder);
+    --text-color-brand-secondary: var(--color-text-brand-secondary);
+    --text-color-error-primary: var(--color-text-error-primary);
+
+    /* Border property colors */
+    --border-color-primary: var(--color-border-primary);
+    --border-color-secondary: var(--color-border-secondary);
+    --border-color-tertiary: var(--color-border-tertiary);
+    --border-color-disabled: var(--color-border-disabled);
+    --border-color-brand: var(--color-border-brand);
+    --border-color-error: var(--color-border-error);
+
+    /* Ring property colors */
+    --ring-color-primary: var(--color-border-primary);
+    --ring-color-secondary: var(--color-border-secondary);
+    --ring-color-brand: var(--color-border-brand);
+    --ring-color-error: var(--color-border-error);
+}
+
+/* ==================== SECTION STYLES ==================== */
+
+/* Apply consistent styling to sections in main content */
+:not([data-design-gallery]) > section,
+:not([data-design-gallery]) section {
+    @apply bg-primary py-16 md:py-24;
+}
+
+/* Design gallery previews: no padding or background */
+[data-design-gallery] section {
+    @apply bg-transparent p-0;
+}
+
+/* Sample site sections: restore padding */
+[data-sample-site] section {
+    @apply bg-primary py-16 md:py-24;
+}