keystone-design-bootstrap 1.0.3

package/src/utils/cx.ts

@@ -0,0 +1,25 @@
+import { extendTailwindMerge } from "tailwind-merge";
+
+const twMerge = extendTailwindMerge({
+    extend: {
+        theme: {
+            text: ["display-xs", "display-sm", "display-md", "display-lg", "display-xl", "display-2xl"],
+        },
+    },
+});
+
+/**
+ * This function is a wrapper around the twMerge function.
+ * It is used to merge the classes inside style objects.
+ */
+export const cx = twMerge;
+
+/**
+ * This function does nothing besides helping us to be able to
+ * sort the classes inside style objects which is not supported
+ * by the Tailwind IntelliSense by default.
+ */
+export function sortCx<T extends Record<string, string | number | Record<string, string | number | Record<string, string | number>>>>(classes: T): T {
+    return classes;
+}
+

package/src/utils/gradient-placeholder.ts

@@ -0,0 +1,59 @@
+/**
+ * Generates a beautiful gradient SVG data URL using the full color palette
+ * Based on gradients used in corporate marketing site animations
+ * Each seed (post ID or index) will consistently return the same gradient
+ */
+export const getGradientUrl = (seed: string | number): string => {
+  // Beautiful gradient combinations using the full palette from corporate marketing site
+  // Colors match Tailwind's default palette (purple, pink, blue, green, orange, indigo)
+  const gradients = [
+    // Purple gradients (like from-purple-200 to-purple-300)
+    ['rgb(233, 213, 255)', 'rgb(221, 214, 254)', 'rgb(196, 181, 253)'], // purple-200 to purple-300
+    ['rgb(250, 232, 255)', 'rgb(251, 207, 232)', 'rgb(244, 114, 182)'], // pink-200 to pink-300 via pink-400
+    // Blue gradients (like from-blue-200 to-blue-300)
+    ['rgb(191, 219, 254)', 'rgb(147, 197, 253)', 'rgb(96, 165, 250)'], // blue-200 to blue-300 to blue-400
+    // Green gradients (like from-green-200 to-green-300)
+    ['rgb(187, 247, 208)', 'rgb(134, 239, 172)', 'rgb(74, 222, 128)'], // green-200 to green-300 to green-400
+    // Pink to Purple (like from-pink-400 to-purple-500)
+    ['rgb(244, 114, 182)', 'rgb(217, 70, 239)', 'rgb(168, 85, 247)'], // pink-400 to purple-500
+    // Blue to Purple (like from-blue-500 to-purple-600)
+    ['rgb(59, 130, 246)', 'rgb(147, 51, 234)', 'rgb(147, 51, 234)'], // blue-500 to purple-600
+    // Indigo to Purple (like from-indigo-500 to-purple-600)
+    ['rgb(99, 102, 241)', 'rgb(139, 92, 246)', 'rgb(147, 51, 234)'], // indigo-500 to purple-600
+    // Orange gradients (like from-orange-200 to-orange-300)
+    ['rgb(254, 215, 170)', 'rgb(253, 186, 116)', 'rgb(251, 146, 60)'], // orange-200 to orange-300 to orange-400
+    // Purple to Pink (like from-purple-400 to-pink-400)
+    ['rgb(192, 132, 252)', 'rgb(232, 121, 249)', 'rgb(244, 114, 182)'], // purple-400 to pink-400
+    // Softer blue-green blend
+    ['rgb(165, 243, 252)', 'rgb(103, 232, 249)', 'rgb(134, 239, 172)'], // cyan-300 to green-400
+    // Warm pink-orange
+    ['rgb(251, 207, 232)', 'rgb(254, 202, 202)', 'rgb(253, 186, 116)'], // pink-200 to orange-300
+    // Cool indigo-blue
+    ['rgb(199, 210, 254)', 'rgb(165, 180, 252)', 'rgb(129, 140, 248)'], // indigo-200 to indigo-400
+  ];
+  
+  // Calculate consistent index from seed
+  const index = typeof seed === 'string' 
+    ? seed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0) % gradients.length
+    : Number(seed) % gradients.length;
+  
+  const [color1, color2, color3] = gradients[index];
+  
+  // Generate SVG with gradient (diagonal like bg-gradient-to-br)
+  const svg = `
+    <svg width="600" height="400" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <linearGradient id="grad${index}" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" style="stop-color:${color1};stop-opacity:1" />
+          <stop offset="50%" style="stop-color:${color2};stop-opacity:1" />
+          <stop offset="100%" style="stop-color:${color3};stop-opacity:1" />
+        </linearGradient>
+      </defs>
+      <rect width="600" height="400" fill="url(#grad${index})" />
+    </svg>
+  `.trim();
+  
+  // Convert to base64 data URL
+  return `data:image/svg+xml;base64,${btoa(svg)}`;
+};
+

package/src/utils/is-react-component.ts

@@ -0,0 +1,33 @@
+/* We cannot use type `unknown` instead of `any` here because it will break the type assertion `isReactComponent` function is providing. */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type React from "react";
+
+type ReactComponent = React.FC<any> | React.ComponentClass<any, any>;
+
+/**
+ * Checks if a given value is a function component.
+ */
+export const isFunctionComponent = (component: any): component is React.FC<any> => {
+    return typeof component === "function";
+};
+
+/**
+ * Checks if a given value is a class component.
+ */
+export const isClassComponent = (component: any): component is React.ComponentClass<any, any> => {
+    return typeof component === "function" && component.prototype && (!!component.prototype.isReactComponent || !!component.prototype.render);
+};
+
+/**
+ * Checks if a given value is a forward ref component.
+ */
+export const isForwardRefComponent = (component: any): component is React.ForwardRefExoticComponent<any> => {
+    return typeof component === "object" && component !== null && component.$$typeof.toString() === "Symbol(react.forward_ref)";
+};
+
+/**
+ * Checks if a given value is a valid React component.
+ */
+export const isReactComponent = (component: any): component is ReactComponent => {
+    return isFunctionComponent(component) || isForwardRefComponent(component) || isClassComponent(component);
+};

package/src/utils/markdown-toc.ts

@@ -0,0 +1,54 @@
+/**
+ * Utility functions for extracting table of contents from markdown
+ */
+
+export interface TableOfContentsItem {
+  id: string;
+  title: string;
+  level: number;
+}
+
+/**
+ * Generate a URL-friendly ID from a heading text
+ */
+function slugify(text: string): string {
+  return text
+    .toLowerCase()
+    .trim()
+    .replace(/[^\w\s-]/g, '') // Remove special characters
+    .replace(/[\s_-]+/g, '-') // Replace spaces and underscores with hyphens
+    .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens
+}
+
+/**
+ * Extract headings from markdown content and generate table of contents
+ */
+export function extractTableOfContents(markdown: string): TableOfContentsItem[] {
+  if (!markdown) return [];
+
+  const toc: TableOfContentsItem[] = [];
+  const lines = markdown.split('\n');
+
+  for (const line of lines) {
+    // Match markdown headings (##, ###, etc.)
+    const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      const title = headingMatch[2].trim();
+      
+      // Only include h2 and h3 headings in TOC
+      if (level >= 2 && level <= 3) {
+        const id = slugify(title);
+        toc.push({
+          id,
+          title,
+          level,
+        });
+      }
+    }
+  }
+
+  return toc;
+}
+
+

package/src/utils/photo-helpers.ts

@@ -0,0 +1,94 @@
+/**
+ * Helper functions for extracting photo URLs from photo associations
+ */
+
+import type { WebsitePhotos } from '../types/api/website-photos';
+
+export interface PhotoAttachment {
+  id: number;
+  photo: {
+    id: number;
+    title: string;
+    thumbnail_url?: string;
+    medium_url?: string;
+    large_url?: string;
+    original_url?: string;
+  };
+  featured: boolean;
+  sort_order: number;
+}
+
+/**
+ * Get the best available photo URL from a photos array
+ * Priority: featured photo > first photo > fallback
+ */
+export function getPhotoUrl(
+  photos?: PhotoAttachment[],
+  fallbackId?: number | string
+): string | null {
+  // Priority 1: Featured photo from photos array
+  if (photos && photos.length > 0) {
+    const featuredPhoto = photos.find(pa => pa.featured);
+    const photoToUse = featuredPhoto || photos[0];
+    const photo = photoToUse.photo;
+    
+    if (photo) {
+      return photo.large_url || photo.medium_url || photo.thumbnail_url || photo.original_url || null;
+    }
+  }
+  
+  // Fallback (gradient or null)
+  return null;
+}
+
+/**
+ * Get avatar URL for team members or authors
+ */
+export function getAvatarUrl(
+  photos?: PhotoAttachment[],
+  fallbackId?: number | string,
+  name?: string
+): string {
+  const photoUrl = getPhotoUrl(photos, fallbackId);
+  
+  if (photoUrl) {
+    return photoUrl;
+  }
+  
+  // Fallback to UI avatars if name is provided
+  if (name) {
+    return `https://ui-avatars.com/api/?name=${encodeURIComponent(name)}&background=random`;
+  }
+  
+  // Final fallback
+  return `https://ui-avatars.com/api/?name=User&background=random`;
+}
+
+/**
+ * Get featured image URL for blog posts
+ */
+export function getFeaturedImageUrl(
+  photos?: PhotoAttachment[],
+  fallbackId?: number | string
+): string | null {
+  return getPhotoUrl(photos, fallbackId);
+}
+
+/**
+ * Get logo URL from website_photos API (which aggregates from account_photos)
+ * 
+ * The website_photos API endpoint returns logos from account_photos with photo_type: 'logo',
+ * with industry fallback. This is the primary and only source for logos.
+ * 
+ * Returns undefined if no logo is available (for PhotoWithFallback gradient fallback)
+ */
+export function getLogoUrl(
+  websitePhotos?: WebsitePhotos | null
+): string | undefined {
+  if (websitePhotos?.logo?.url) {
+    return websitePhotos.logo.url;
+  }
+  
+  return undefined;
+}
+