@hkdigital/lib-core 0.5.93 → 0.5.95

package/dist/config/generators/imagetools.d.ts

@@ -8,6 +8,12 @@
  * @param {number[]} [options.faviconSizes=FAVICON_SIZES]
  * @param {number[]} [options.appleTouchSizes=APPLE_TOUCH_SIZES]
  *
+ * @param {{width: number, height: number}} [options.seoLandscapeSize]
+ *   SEO landscape image size
+ *
+ * @param {{width: number, height: number}} [options.seoSquareSize]
+ *   SEO square image size
+ *
  * @returns {(
  *   entries: [string, string[]][]
  * ) => (Record<string, string | string[]>[])}
@@ -17,6 +23,14 @@ export function generateResponseConfigs(options?: {
     thumbnailWidth?: number | undefined;
     faviconSizes?: number[] | undefined;
     appleTouchSizes?: number[] | undefined;
+    seoLandscapeSize?: {
+        width: number;
+        height: number;
+    } | undefined;
+    seoSquareSize?: {
+        width: number;
+        height: number;
+    } | undefined;
 }): (entries: [string, string[]][]) => (Record<string, string | string[]>[]);
 /**
  * Configures and returns a function that can be used as

package/dist/config/generators/imagetools.js

@@ -21,6 +21,9 @@ const APPLE_TOUCH_SIZES = [
   180  // iPhone retina, iOS home screen
 ];
 
+const SEO_LANDSCAPE_SIZE = { width: 1200, height: 630 };
+const SEO_SQUARE_SIZE = { width: 1200, height: 1200 };
+
 const DEFAULT_PRESETS = {
 	default: {
 		format: 'avif',
@@ -70,6 +73,12 @@ const DEFAULT_PRESETS = {
  * @param {number[]} [options.faviconSizes=FAVICON_SIZES]
  * @param {number[]} [options.appleTouchSizes=APPLE_TOUCH_SIZES]
  *
+ * @param {{width: number, height: number}} [options.seoLandscapeSize]
+ *   SEO landscape image size
+ *
+ * @param {{width: number, height: number}} [options.seoSquareSize]
+ *   SEO square image size
+ *
  * @returns {(
  *   entries: [string, string[]][]
  * ) => (Record<string, string | string[]>[])}
@@ -115,15 +124,25 @@ export function generateResponseConfigs(options) {
 
 		// @ts-ignore
 		const isAppleTouchIcon = !!entries.find(([key]) => key === 'apple-touch-icons');
+
+		// @ts-ignore
+		const isSeoLandscape = !!entries.find(([key]) => key === 'seo-landscape');
+
+		// @ts-ignore
+		const isSeoSquare = !!entries.find(([key]) => key === 'seo-square');
 		// console.log('responsiveConfig found:', !!responsiveConfig);
 
 		const widths = options?.widths ?? DEFAULT_WIDTHS;
 		const faviconSizes = options?.faviconSizes ?? FAVICON_SIZES;
 		const appleTouchSizes = options?.appleTouchSizes ?? APPLE_TOUCH_SIZES;
+		const seoLandscapeSize = options?.seoLandscapeSize ?? SEO_LANDSCAPE_SIZE;
+		const seoSquareSize = options?.seoSquareSize ?? SEO_SQUARE_SIZE;
 
 		delete configPairs.responsive;
 		delete configPairs.favicons;
 		delete configPairs['apple-touch-icons'];
+		delete configPairs['seo-landscape'];
+		delete configPairs['seo-square'];
 
 		// Always include the main image(s) and a thumbnail version
 		const thumbnailConfig = {
@@ -163,6 +182,30 @@ export function generateResponseConfigs(options) {
 			return appleTouchConfigs;
 		}
 
+		// Handle seo-landscape directive - generate landscape SEO image
+
+		if (isSeoLandscape) {
+			return [{
+				...configPairs,
+				w: String(seoLandscapeSize.width),
+				h: String(seoLandscapeSize.height),
+				format: 'jpg',
+				quality: '95'
+			}];
+		}
+
+		// Handle seo-square directive - generate square SEO image
+
+		if (isSeoSquare) {
+			return [{
+				...configPairs,
+				w: String(seoSquareSize.width),
+				h: String(seoSquareSize.height),
+				format: 'jpg',
+				quality: '95'
+			}];
+		}
+
 		if (!responsiveConfig) {
 			// Directive 'responsive' was not set => return original + thumbnail
 			const originalConfig = configPairs; // No 'w' means original dimensions
@@ -227,6 +270,18 @@ export function generateDefaultDirectives(options) {
 			params.set('as', 'metadata');
 		}
 
+		// > Return picture (URL) if directive 'seo-landscape' is set
+
+		if (params.has('seo-landscape')) {
+			params.set('as', 'picture');
+		}
+
+		// > Return picture (URL) if directive 'seo-square' is set
+
+		if (params.has('seo-square')) {
+			params.set('as', 'picture');
+		}
+
 		// > Process presets
 
 		if (presetName) {

package/dist/config/imagetools.d.ts

@@ -84,3 +84,15 @@ declare module '*?apple-touch-icons' {
   const out: ImageSource;
   export default out;
 }
+
+// Generate SEO landscape image (1200x630)
+declare module '*?seo-landscape' {
+  const out: string;
+  export default out;
+}
+
+// Generate SEO square image (1200x1200)
+declare module '*?seo-square' {
+  const out: string;
+  export default out;
+}

package/dist/meta/README.md

@@ -62,6 +62,12 @@ export const GET = async ({ url }) => {
  *   Supports wildcards (e.g., '*.example.com')
  * @property {string[]} [disallowedPaths]
  *   Paths to block from indexing (e.g., '/admin', '/api/*')
+ * @property {boolean} [allowAiTraining=true]
+ *   Allow AI training bots to crawl content for model training.
+ *   Set to false to block bots like GPTBot, Google-Extended, CCBot, etc.
+ * @property {boolean} [allowAiReading=true]
+ *   Allow AI assistants/chatbots to read content for user responses.
+ *   Set to false to block bots like ChatGPT-User, Claude-Web, etc.
  */
 ```
 
@@ -108,6 +114,54 @@ const config = {
 // Sitemap: https://example.com/sitemap.xml
 ```
 
+**AI bot control:**
+
+```javascript
+// Block all AI bots from training on your content
+const config = {
+  allowedHosts: '*',
+  allowAiTraining: false
+};
+
+// Generates additional blocks:
+// User-agent: GPTBot
+// Disallow: /
+//
+// User-agent: Google-Extended
+// Disallow: /
+// ... (and other AI training bots)
+```
+
+**AI training vs AI reading:**
+
+```javascript
+// Block training but allow reading (ChatGPT can browse, but not train)
+const config = {
+  allowAiTraining: false,  // Blocks GPTBot, Google-Extended, CCBot
+  allowAiReading: true     // Allows ChatGPT-User, Claude-Web
+};
+
+// Block both training and reading
+const config = {
+  allowAiTraining: false,
+  allowAiReading: false
+};
+```
+
+**Blocked AI training bots:**
+- `GPTBot` - OpenAI training
+- `Google-Extended` - Google AI training
+- `CCBot` - Common Crawl
+- `anthropic-ai` - Anthropic training
+- `FacebookBot` - Meta AI training
+- `PerplexityBot` - Perplexity AI training
+- And others (see `src/lib/meta/robots/index.js` for full list)
+
+**Blocked AI reading bots:**
+- `ChatGPT-User` - ChatGPT browsing
+- `Claude-Web` - Claude browsing
+- `cohere-ai` - Cohere browsing
+
 **Sitemap reference:**
 
 Sitemap reference is always included for allowed hosts:
@@ -277,6 +331,44 @@ const robotsConfig = {
 // All hosts → Allow + Sitemap
 ```
 
+### Block AI training but allow search engines
+
+```javascript
+// Protect premium content from AI training while allowing SEO
+const robotsConfig = {
+  allowedHosts: ['mysite.com', 'www.mysite.com'],
+  disallowedPaths: ['/admin'],
+  allowAiTraining: false,  // Block GPTBot, Google-Extended, etc.
+  allowAiReading: true     // Allow ChatGPT browsing (user queries)
+};
+
+// Generates:
+// User-agent: *
+// Allow: /
+// Disallow: /admin
+// Sitemap: https://mysite.com/sitemap.xml
+//
+// User-agent: GPTBot
+// Disallow: /
+//
+// User-agent: Google-Extended
+// Disallow: /
+// ... (other AI training bots)
+```
+
+### Block all AI bots completely
+
+```javascript
+// Block both AI training and AI reading/browsing
+const robotsConfig = {
+  allowedHosts: ['mysite.com'],
+  allowAiTraining: false,
+  allowAiReading: false
+};
+
+// Blocks: GPTBot, Google-Extended, CCBot, ChatGPT-User, Claude-Web, etc.
+```
+
 ### Complex sitemap configuration
 
 ```javascript

package/dist/meta/components/Favicons.svelte

@@ -0,0 +1,30 @@
+<script>
+  /**
+   * Favicons component
+   *
+   * Generates favicon and apple-touch-icon links for browsers and PWAs.
+   *
+   * @typedef {import('../typedef.js').MetaConfig} MetaConfig
+   */
+
+  /** @type {{ config: MetaConfig }} */
+  let { config } = $props();
+
+  const { faviconImages, appleTouchIcons } = config;
+</script>
+
+<svelte:head>
+  <!-- Basic favicon configuration -->
+  {#each faviconImages as img}
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="{img.width}x{img.width}"
+      href={img.src}
+    />
+  {/each}
+
+  {#each appleTouchIcons as img}
+    <link rel="apple-touch-icon" sizes="{img.width}x{img.width}" href={img.src} />
+  {/each}
+</svelte:head>

package/dist/meta/components/Favicons.svelte.d.ts

@@ -0,0 +1,103 @@
+export default Favicons;
+type Favicons = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Favicons: import("svelte").Component<{
+    config: import("../config.typedef.js").MetaConfig;
+}, {}, "">;
+type $$ComponentProps = {
+    config: {
+        /**
+         * - Full app name
+         */
+        name: string;
+        /**
+         * - Short app name (max 12 characters)
+         */
+        shortName: string;
+        /**
+         * - App description for search engines
+         *
+         * Language and locale
+         */
+        description: string;
+        /**
+         *   Language configurations
+         */
+        languages: Record<string, {
+            lang: string;
+            locale: string;
+        }>;
+        /**
+         * - Default language code
+         */
+        defaultLanguage: string;
+        /**
+         * - Default locale
+         *
+         * PWA theme and colors
+         */
+        defaultLocale: string;
+        /**
+         * - Theme color
+         */
+        backgroundAndThemeColor: string;
+        /**
+         * - Theme color for browser UI
+         */
+        themeColor: string;
+        /**
+         * - Background color
+         */
+        backgroundColor: string;
+        /**
+         * - iOS status bar style
+         */
+        statusBarStyle: string;
+        /**
+         * - Screen orientation
+         */
+        orientation: string;
+        /**
+         * - Disable pinch-to-zoom
+         *
+         * SEO images
+         */
+        disablePageZoom: boolean;
+        /**
+         * - Landscape SEO image URL (1200×630)
+         */
+        SeoImageLandscape?: string | undefined;
+        /**
+         * - Square SEO image URL (1200×1200)
+         *
+         * Favicon images (processed by imagetools)
+         */
+        SeoImageSquare?: string | undefined;
+        /**
+         *   Processed favicon images
+         */
+        faviconImages: Array<{
+            src: string;
+            width: number;
+        }>;
+        /**
+         *   Processed apple-touch-icon images
+         *
+         * Site configuration
+         */
+        appleTouchIcons: Array<{
+            src: string;
+            width: number;
+        }>;
+        /**
+         *   Routes for sitemap.xml
+         */
+        siteRoutes: import("../typedef.js").SitemapRoute[];
+        /**
+         *   Robots.txt configuration
+         */
+        robotsConfig: import("../typedef.js").RobotsConfig;
+    };
+};

package/dist/meta/components/PWA.svelte

@@ -0,0 +1,51 @@
+<script>
+  import { onMount } from 'svelte';
+
+  /**
+   * PWA component
+   *
+   * Generates Progressive Web App meta tags and viewport configuration.
+   *
+   * @typedef {import('../typedef.js').MetaConfig} MetaConfig
+   */
+
+  /** @type {{ config: MetaConfig }} */
+  let { config } = $props();
+
+  const { themeColor, statusBarStyle, name, shortName, disablePageZoom } =
+    config;
+
+  let shouldSetTitle = $state(false);
+
+  onMount(() => {
+    // Check if title element exists and has content
+    const titleElement = document.querySelector('title');
+    const hasTitle = titleElement && titleElement.textContent.trim() !== '';
+
+    if (!hasTitle) {
+      shouldSetTitle = true;
+    }
+  });
+</script>
+
+<svelte:head>
+  {#if shouldSetTitle}
+    <title>{name}</title>
+  {/if}
+
+  {#if !disablePageZoom}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+  {:else}
+    <meta name="viewport"
+         content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
+  {/if}
+
+  <meta name="theme-color" content="{themeColor}">
+  <link rel="manifest" href="/manifest.json">
+
+  <meta name="mobile-web-app-capable" content="yes">
+
+  <!-- iOS-specific meta tags -->
+  <meta name="apple-mobile-web-app-status-bar-style" content="{statusBarStyle}">
+  <meta name="apple-mobile-web-app-title" content="{shortName}">
+</svelte:head>

package/dist/meta/components/PWA.svelte.d.ts

@@ -0,0 +1,103 @@
+export default PWA;
+type PWA = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const PWA: import("svelte").Component<{
+    config: import("../config.typedef.js").MetaConfig;
+}, {}, "">;
+type $$ComponentProps = {
+    config: {
+        /**
+         * - Full app name
+         */
+        name: string;
+        /**
+         * - Short app name (max 12 characters)
+         */
+        shortName: string;
+        /**
+         * - App description for search engines
+         *
+         * Language and locale
+         */
+        description: string;
+        /**
+         *   Language configurations
+         */
+        languages: Record<string, {
+            lang: string;
+            locale: string;
+        }>;
+        /**
+         * - Default language code
+         */
+        defaultLanguage: string;
+        /**
+         * - Default locale
+         *
+         * PWA theme and colors
+         */
+        defaultLocale: string;
+        /**
+         * - Theme color
+         */
+        backgroundAndThemeColor: string;
+        /**
+         * - Theme color for browser UI
+         */
+        themeColor: string;
+        /**
+         * - Background color
+         */
+        backgroundColor: string;
+        /**
+         * - iOS status bar style
+         */
+        statusBarStyle: string;
+        /**
+         * - Screen orientation
+         */
+        orientation: string;
+        /**
+         * - Disable pinch-to-zoom
+         *
+         * SEO images
+         */
+        disablePageZoom: boolean;
+        /**
+         * - Landscape SEO image URL (1200×630)
+         */
+        SeoImageLandscape?: string | undefined;
+        /**
+         * - Square SEO image URL (1200×1200)
+         *
+         * Favicon images (processed by imagetools)
+         */
+        SeoImageSquare?: string | undefined;
+        /**
+         *   Processed favicon images
+         */
+        faviconImages: Array<{
+            src: string;
+            width: number;
+        }>;
+        /**
+         *   Processed apple-touch-icon images
+         *
+         * Site configuration
+         */
+        appleTouchIcons: Array<{
+            src: string;
+            width: number;
+        }>;
+        /**
+         *   Routes for sitemap.xml
+         */
+        siteRoutes: import("../typedef.js").SitemapRoute[];
+        /**
+         *   Robots.txt configuration
+         */
+        robotsConfig: import("../typedef.js").RobotsConfig;
+    };
+};

package/dist/meta/components/SEO.svelte

@@ -0,0 +1,146 @@
+<script>
+  /**
+   * SEO component
+   *
+   * Generates SEO meta tags, Open Graph tags, and hreflang links.
+   *
+   * @typedef {import('../typedef.js').MetaConfig} MetaConfig
+   */
+
+  /**
+   * SEO component props
+   *
+   * @typedef {Object} SEOProps
+   * @property {MetaConfig} config - Configuration object
+   * @property {string} [title] - Page title (defaults to config name)
+   * @property {string} [description]
+   *   Page description (defaults to config description)
+   * @property {string} [url] - Canonical URL for this page
+   * @property {string} [image]
+   *   Social media preview image URL (defaults to landscape SEO image)
+   * @property {string} [imageAlt] - Alt text for social media image
+   * @property {string} [type] - Open Graph type (default: 'website')
+   * @property {string} [locale]
+   *   Content locale (auto-detected from URL or defaults to config)
+   * @property {string} [siteName]
+   *   Site name for Open Graph (defaults to config name)
+   * @property {Record<string, string>} [alternateUrls]
+   *   Alternate language URLs for hreflang tags
+   * @property {string} [robots]
+   *   Robots meta directives (e.g., 'noindex, nofollow')
+   * @property {boolean} [noAiTraining]
+   *   Prevent AI training on this page content
+   */
+
+  /** @type {SEOProps} */
+  let {
+    config,
+    title,
+    description,
+    url = undefined,
+    image,
+    imageAlt,
+    type = 'website',
+    locale = undefined,
+    siteName,
+    alternateUrls = undefined,
+    robots = undefined,
+    noAiTraining = false
+  } = $props();
+
+  // Extract config values
+  const {
+    name: defaultTitle,
+    description: defaultDescription,
+    SeoImageLandscape,
+    SeoImageSquare,
+    defaultLocale,
+    languages
+  } = config;
+
+  // Use the landscape image as default (best for most platforms)
+  const defaultSeoImage = SeoImageLandscape || undefined;
+
+  // Apply defaults from config
+  title = title ?? defaultTitle;
+  description = description ?? defaultDescription;
+  image = image ?? defaultSeoImage;
+  imageAlt = imageAlt ?? title;
+  siteName = siteName ?? defaultTitle;
+
+  // Use locale from prop or fall back to config default
+  const finalLocale = locale || defaultLocale;
+</script>
+
+<svelte:head>
+  <!-- Page title (overrides %title% from app.html) -->
+  <title>{title}</title>
+
+  <!-- Basic SEO -->
+  <meta name="description" content={description}>
+
+  <!-- Robots directives -->
+  {#if robots}
+    <meta name="robots" content={robots}>
+  {/if}
+
+  <!-- AI training and reading restrictions -->
+  {#if noAiTraining}
+    <!-- Google AI -->
+    <meta name="google-extended" content="noindex, nofollow">
+    <!-- OpenAI (ChatGPT) -->
+    <meta name="OAI-SearchBot" content="noindex, nofollow">
+    <!-- Common Crawl -->
+    <meta name="CCBot" content="noindex, nofollow">
+    <!-- Anthropic Claude -->
+    <meta name="anthropic-ai" content="noindex, nofollow">
+    <!-- General AI crawlers -->
+    <meta name="robots" content="noai, noimageai">
+  {/if}
+
+  <!-- Open Graph / Facebook / LinkedIn / Discord -->
+  <meta property="og:type" content={type}>
+  <meta property="og:title" content={title}>
+  <meta property="og:description" content={description}>
+  <meta property="og:site_name" content={siteName}>
+  <meta property="og:locale" content={finalLocale}>
+
+  {#if url}
+    <meta property="og:url" content={url}>
+    <link rel="canonical" href={url}>
+  {/if}
+
+  {#if image}
+    <meta property="og:image" content={image}>
+    <meta property="og:image:alt" content={imageAlt}>
+    <!-- Image metadata (dimensions from preprocessor) -->
+    {#if image === SeoImageLandscape}
+      <meta property="og:image:width" content="1200">
+      <meta property="og:image:height" content="630">
+      <meta property="og:image:type" content="image/jpeg">
+    {/if}
+  {/if}
+
+  <!-- Additional square image for platforms that prefer it -->
+  {#if SeoImageSquare && SeoImageSquare !== image}
+    <meta property="og:image" content={SeoImageSquare}>
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="1200">
+    <meta property="og:image:type" content="image/jpeg">
+  {/if}
+
+  <!-- Alternate locales for Open Graph -->
+  {#each Object.entries(languages) as [code, config]}
+    {#if config.locale !== finalLocale}
+      <meta property="og:locale:alternate" content={config.locale}>
+    {/if}
+  {/each}
+
+  <!-- Alternate language URLs (hreflang) -->
+  {#if alternateUrls}
+    {#each Object.entries(alternateUrls) as [lang, href]}
+      <link rel="alternate" hreflang={lang} href={href}>
+    {/each}
+  {/if}
+
+</svelte:head>