@hkdigital/lib-core 0.5.93 → 0.5.95

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

@@ -0,0 +1,108 @@
+export default SEO;
+type SEO = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<SEOProps>): void;
+};
+declare const SEO: import("svelte").Component<{
+    /**
+     * - Configuration object
+     */
+    config: import("../config.typedef.js").MetaConfig;
+    /**
+     * - Page title (defaults to config name)
+     */
+    title?: string | undefined;
+    /**
+     * Page description (defaults to config description)
+     */
+    description?: string | undefined;
+    /**
+     * - Canonical URL for this page
+     */
+    url?: string | undefined;
+    /**
+     * Social media preview image URL (defaults to landscape SEO image)
+     */
+    image?: string | undefined;
+    /**
+     * - Alt text for social media image
+     */
+    imageAlt?: string | undefined;
+    /**
+     * - Open Graph type (default: 'website')
+     */
+    type?: string | undefined;
+    /**
+     * Content locale (auto-detected from URL or defaults to config)
+     */
+    locale?: string | undefined;
+    /**
+     * Site name for Open Graph (defaults to config name)
+     */
+    siteName?: string | undefined;
+    /**
+     * Alternate language URLs for hreflang tags
+     */
+    alternateUrls?: Record<string, string> | undefined;
+    /**
+     * Robots meta directives (e.g., 'noindex, nofollow')
+     */
+    robots?: string | undefined;
+    /**
+     * Prevent AI training on this page content
+     */
+    noAiTraining?: boolean | undefined;
+}, {}, "">;
+/**
+ * SEO component props
+ */
+type SEOProps = {
+    /**
+     * - Configuration object
+     */
+    config: import("../config.typedef.js").MetaConfig;
+    /**
+     * - Page title (defaults to config name)
+     */
+    title?: string | undefined;
+    /**
+     * Page description (defaults to config description)
+     */
+    description?: string | undefined;
+    /**
+     * - Canonical URL for this page
+     */
+    url?: string | undefined;
+    /**
+     * Social media preview image URL (defaults to landscape SEO image)
+     */
+    image?: string | undefined;
+    /**
+     * - Alt text for social media image
+     */
+    imageAlt?: string | undefined;
+    /**
+     * - Open Graph type (default: 'website')
+     */
+    type?: string | undefined;
+    /**
+     * Content locale (auto-detected from URL or defaults to config)
+     */
+    locale?: string | undefined;
+    /**
+     * Site name for Open Graph (defaults to config name)
+     */
+    siteName?: string | undefined;
+    /**
+     * Alternate language URLs for hreflang tags
+     */
+    alternateUrls?: Record<string, string> | undefined;
+    /**
+     * Robots meta directives (e.g., 'noindex, nofollow')
+     */
+    robots?: string | undefined;
+    /**
+     * Prevent AI training on this page content
+     */
+    noAiTraining?: boolean | undefined;
+};

package/dist/meta/components.d.ts

@@ -0,0 +1,3 @@
+export { default as Favicons } from "./components/Favicons.svelte";
+export { default as PWA } from "./components/PWA.svelte";
+export { default as SEO } from "./components/SEO.svelte";

package/dist/meta/components.js

@@ -0,0 +1,3 @@
+export { default as Favicons } from './components/Favicons.svelte';
+export { default as PWA } from './components/PWA.svelte';
+export { default as SEO } from './components/SEO.svelte';

package/dist/meta/config.typedef.d.ts

@@ -0,0 +1,98 @@
+declare const _default: {};
+export default _default;
+/**
+ * App identity
+ */
+export type MetaConfig = {
+    /**
+     * - 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("./utils/sitemap/typedef.js").SitemapRoute[];
+    /**
+     *   Robots.txt configuration
+     */
+    robotsConfig: import("./utils/robots/typedef.js").RobotsConfig;
+};

package/dist/meta/config.typedef.js

@@ -0,0 +1,44 @@
+/**
+ * Meta configuration type definitions
+ */
+
+/**
+ * @typedef {Object} MetaConfig
+ *
+ * App identity
+ * @property {string} name - Full app name
+ * @property {string} shortName - Short app name (max 12 characters)
+ * @property {string} description - App description for search engines
+ *
+ * Language and locale
+ * @property {Record<string, {lang: string, locale: string}>} languages
+ *   Language configurations
+ * @property {string} defaultLanguage - Default language code
+ * @property {string} defaultLocale - Default locale
+ *
+ * PWA theme and colors
+ * @property {string} backgroundAndThemeColor - Theme color
+ * @property {string} themeColor - Theme color for browser UI
+ * @property {string} backgroundColor - Background color
+ * @property {string} statusBarStyle - iOS status bar style
+ * @property {string} orientation - Screen orientation
+ * @property {boolean} disablePageZoom - Disable pinch-to-zoom
+ *
+ * SEO images
+ * @property {string} [SeoImageLandscape] - Landscape SEO image URL (1200×630)
+ * @property {string} [SeoImageSquare] - Square SEO image URL (1200×1200)
+ *
+ * Favicon images (processed by imagetools)
+ * @property {Array<{src: string, width: number}>} faviconImages
+ *   Processed favicon images
+ * @property {Array<{src: string, width: number}>} appleTouchIcons
+ *   Processed apple-touch-icon images
+ *
+ * Site configuration
+ * @property {import('./utils/sitemap/typedef.js').SitemapRoute[]} siteRoutes
+ *   Routes for sitemap.xml
+ * @property {import('./utils/robots/typedef.js').RobotsConfig} robotsConfig
+ *   Robots.txt configuration
+ */
+
+export default {};

package/dist/meta/templates/README.md

@@ -0,0 +1,150 @@
+# Meta Configuration Template
+
+This template provides a complete setup for SEO, PWA, and favicon configuration in your SvelteKit project.
+
+## Quick Start
+
+### 1. Copy template files to your project
+
+```bash
+# From your project root
+cp -r node_modules/@hkdigital/lib-core/meta/templates/lib/* src/lib/
+cp -r node_modules/@hkdigital/lib-core/meta/templates/routes/* src/routes/
+```
+
+This copies:
+- `src/lib/config/meta.js` - Your configuration file
+- `src/lib/assets/meta/*.png` - Placeholder images
+- `src/lib/meta.js` - Glue file connecting library and config
+- `src/routes/(meta)/*.json/+server.js` - Route endpoints
+
+### 2. Customize your configuration
+
+Edit `src/lib/config/meta.js` with your app's information:
+
+```javascript
+export const name = 'Your App Name';
+export const shortName = 'YourApp';
+export const description = 'Your app description';
+export const backgroundAndThemeColor = '#your-color';
+// ... etc
+```
+
+### 3. Replace placeholder images
+
+Replace these files in `src/lib/assets/meta/` with your own:
+- `favicon.png` - 512×512px or larger (PNG with transparency)
+- `preview-landscape.png` - 1200×630px landscape preview (JPG or PNG)
+- `preview-square.png` - 1200×1200px square preview (JPG or PNG)
+
+### 4. Add to your root layout
+
+In `src/routes/+layout.svelte`:
+
+```svelte
+<script>
+  import { Favicons, PWA, SEO, config } from '$lib/meta.js';
+
+  let { children, data } = $props();
+</script>
+
+<Favicons {config} />
+<PWA {config} />
+<SEO {config} locale={data?.locale} />
+
+{@render children()}
+```
+
+### 5. Update app.html
+
+Add placeholders to `src/app.html`:
+
+```html
+<!doctype html>
+<html lang="%lang%">
+  <head>
+    <meta charset="utf-8" />
+    <title>%title%</title>
+    <meta name="description" content="%description%">
+    %sveltekit.head%
+  </head>
+  <body>
+    %sveltekit.body%
+  </body>
+</html>
+```
+
+### 6. Configure hooks (optional)
+
+For language detection, add to `src/hooks.server.js`:
+
+```javascript
+import { handleLang } from '$lib/meta.js';
+
+export async function handle({ event, resolve }) {
+  return handleLang(event, resolve);
+}
+```
+
+## File Structure
+
+After copying the template, your project will have:
+
+```
+src/
+  lib/
+    config/
+      meta.js           # Your configuration (customize this)
+    assets/
+      meta/
+        favicon.png     # Your favicon image
+        preview-landscape.png
+        preview-square.png
+    meta.js             # Glue file (imports library + config)
+  routes/
+    (meta)/             # Route group (not in URL)
+      manifest.json/
+        +server.js      # PWA manifest endpoint
+      robots.txt/
+        +server.js      # Robots.txt endpoint
+      sitemap.xml/
+        +server.js      # Sitemap endpoint
+    +layout.svelte      # Import from $lib/meta.js
+  hooks.server.js       # Optional: language detection
+  app.html              # Add %lang%, %title%, %description%
+```
+
+## How It Works
+
+**Library code** (automatically updated):
+- Components imported from `@hkdigital/lib-core/meta/components`
+- Utilities imported from `@hkdigital/lib-core/meta/utils`
+- When you update the library, components get bug fixes automatically
+
+**Your code** (you customize):
+- `src/lib/config/meta.js` - Your app's configuration
+- `src/lib/assets/meta/*.png` - Your images
+- `src/lib/meta.js` - Connects library components with your config
+- `src/routes/(meta)/` - Route endpoints that use your config
+
+## Configuration Not in Routes
+
+Note that `config/meta.js` is in `src/lib/`, NOT in `src/routes/`. This is intentional:
+
+- Files in `src/routes/` can be served via HTTP
+- Route groups like `(meta)` only affect layout grouping, not HTTP access
+- Keeping config in `src/lib/` prevents accidental HTTP exposure
+- Images in `src/lib/assets/` are processed by Vite imagetools at build time
+
+## Updating
+
+When you update `@hkdigital/lib-core`:
+1. Library components are automatically updated
+2. Your config and images remain untouched
+3. Check changelog for breaking config changes
+
+## Documentation
+
+For complete documentation, see:
+- Main docs: `node_modules/@hkdigital/lib-core/meta/README.md`
+- Component API: Check library source in `node_modules/@hkdigital/lib-core/meta/`

package/dist/meta/templates/lib/config/meta.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Meta configuration
+ *
+ * Customize this file with your app's information.
+ * After copying to your project, update all values below.
+ */
+/**
+ * App identity
+ */
+export const name: "Your App Name";
+export const shortName: "YourApp";
+export const description: "Your app description for search engines";
+/**
+ * Language and locale configuration
+ *
+ * @type {Record<string, {lang: string, locale: string}>}
+ */
+export const languages: Record<string, {
+    lang: string;
+    locale: string;
+}>;
+export const defaultLanguage: "en";
+export const defaultLocale: string;
+/**
+ * PWA theme and colors
+ */
+export const backgroundAndThemeColor: "#082962";
+export const themeColor: "#082962";
+export const backgroundColor: "#082962";
+/**
+ * iOS PWA configuration
+ */
+export const statusBarStyle: "black-translucent";
+/**
+ * Screen orientation
+ */
+export const orientation: "any";
+/**
+ * Disable pinch-to-zoom
+ *
+ * Only enable for games or canvas apps where zoom breaks functionality
+ */
+export const disablePageZoom: false;
+export const SeoImageLandscape: string;
+export const SeoImageSquare: string;
+export const faviconImages: import("../../../../config/typedef").ImageSource;
+export const appleTouchIcons: import("../../../../config/typedef").ImageSource;
+/**
+ * Site routes for sitemap.xml
+ *
+ * @type {import('../../../typedef.js').SitemapRoute[]}
+ *
+ * @see @hkdigital/lib-core/meta/README.md for configuration options
+ */
+export const siteRoutes: import("../../../typedef.js").SitemapRoute[];
+/**
+ * Robots.txt configuration
+ *
+ * @type {import('../../../typedef.js').RobotsConfig}
+ *
+ * @see @hkdigital/lib-core/meta/README.md for configuration options
+ */
+export const robotsConfig: import("../../../typedef.js").RobotsConfig;

package/dist/meta/templates/lib/config/meta.js

@@ -0,0 +1,112 @@
+/**
+ * Meta configuration
+ *
+ * Customize this file with your app's information.
+ * After copying to your project, update all values below.
+ */
+
+/**
+ * App identity
+ */
+export const name = 'Your App Name';
+export const shortName = 'YourApp';  // max 12 characters
+export const description = 'Your app description for search engines';
+
+/**
+ * Language and locale configuration
+ *
+ * @type {Record<string, {lang: string, locale: string}>}
+ */
+export const languages = {
+  'en': { lang: 'en-GB', locale: 'en_GB' },
+  'nl': { lang: 'nl-NL', locale: 'nl_NL' }
+
+  // Add more languages as needed:
+  // 'es': { lang: 'es-ES', locale: 'es_ES' },
+  // 'en-us': { lang: 'en-US', locale: 'en_US' }
+};
+
+export const defaultLanguage = 'en';
+export const defaultLocale = languages[defaultLanguage].locale;
+
+/**
+ * PWA theme and colors
+ */
+export const backgroundAndThemeColor = '#082962';
+export const themeColor = backgroundAndThemeColor;
+export const backgroundColor = backgroundAndThemeColor;
+
+/**
+ * iOS PWA configuration
+ */
+export const statusBarStyle = 'black-translucent';  // 'default' | 'black' | 'black-translucent'
+
+/**
+ * Screen orientation
+ */
+export const orientation = 'any';  // 'any' | 'landscape' | 'portrait'
+
+/**
+ * Disable pinch-to-zoom
+ *
+ * Only enable for games or canvas apps where zoom breaks functionality
+ */
+export const disablePageZoom = false;
+
+/**
+ * SEO social media preview images
+ *
+ * Replace the image files with your own designs.
+ * The images are processed by Vite imagetools to correct dimensions.
+ *
+ * To disable: comment out imports and set to null
+ */
+import SeoLandscapeImg from '../../../../assets/meta/preview-landscape.png?seo-landscape';
+import SeoSquareImg from '../../../../assets/meta/preview-square.png?seo-square';
+
+export const SeoImageLandscape = SeoLandscapeImg;  // 1200×630
+export const SeoImageSquare = SeoSquareImg;        // 1200×1200
+
+// To disable SEO images:
+// export const SeoImageLandscape = null;
+// export const SeoImageSquare = null;
+
+/**
+ * Favicon images (processed by Vite imagetools)
+ */
+import FaviconImgs from '../../../../assets/meta/favicon.png?favicons';
+import AppleTouchImgs from '../../../../assets/meta/favicon.png?apple-touch-icons';
+
+export const faviconImages = FaviconImgs;
+export const appleTouchIcons = AppleTouchImgs;
+
+/**
+ * Site routes for sitemap.xml
+ *
+ * @type {import('../../../typedef.js').SitemapRoute[]}
+ *
+ * @see @hkdigital/lib-core/meta/README.md for configuration options
+ */
+export const siteRoutes = [
+  '/'
+  // Add your routes:
+  // '/about',
+  // '/contact',
+  // { path: '/blog', priority: 0.9, changefreq: 'daily' }
+];
+
+/**
+ * Robots.txt configuration
+ *
+ * @type {import('../../../typedef.js').RobotsConfig}
+ *
+ * @see @hkdigital/lib-core/meta/README.md for configuration options
+ */
+export const robotsConfig = {
+  allowedHosts: '*',       // '*' allows all hosts
+  disallowedPaths: [],     // e.g., ['/admin', '/api']
+
+  // AI bot control (site-wide via robots.txt)
+  allowAiTraining: true,   // GPTBot, Google-Extended, CCBot, anthropic-ai
+  allowAiReading: true     // ChatGPT-User, Claude-Web, cohere-ai
+};

package/dist/meta/templates/lib/meta.d.ts

@@ -0,0 +1,7 @@
+import { Favicons } from '../../components.js';
+import { PWA } from '../../components.js';
+import { SEO } from '../../components.js';
+export const getLangFromPath: Function;
+export const injectLang: Function;
+export const handleLang: Function;
+export { Favicons, PWA, SEO, config };

package/dist/meta/templates/lib/meta.js

@@ -0,0 +1,23 @@
+/**
+ * Meta components configured for your app
+ *
+ * This file imports the library components and configures them with your
+ * app's config. Components are automatically updated when you update the
+ * @hkdigital/lib-core library.
+ */
+
+import { Favicons, PWA, SEO } from '../../components.js';
+import { createLangUtils } from '../../utils.js';
+import * as config from '../../../config/meta.js';
+
+// Create configured language utilities
+const { getLangFromPath, injectLang, handleLang } = createLangUtils(config);
+
+// Re-export components (they'll receive config as a prop in your layout)
+export { Favicons, PWA, SEO };
+
+// Export language utilities
+export { getLangFromPath, injectLang, handleLang };
+
+// Export config for convenience
+export { config };

package/dist/meta/templates/routes/(meta)/manifest.json/+server.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const GET: import("@sveltejs/kit").RequestHandler;

package/dist/meta/templates/routes/(meta)/manifest.json/+server.js

@@ -0,0 +1,42 @@
+// @see https://developer.mozilla.org/en-US/docs/
+//        Web/Progressive_web_apps/Manifest/Reference
+
+import {
+  name,
+  shortName,
+  description,
+  backgroundAndThemeColor,
+  orientation
+} from '../../../../../config/meta.js';
+
+import faviconImages from '../../../../../assets/meta/favicon.png?favicons';
+
+/* Generate manifest data */
+
+const manifest = {
+  name,
+  short_name: shortName,
+  description,
+
+  start_url: '/',
+  scope: '/',
+
+  icons: faviconImages.map((item) => {
+    return {
+      src: item.src,
+      sizes: `${item.width}x${item.width}`,
+      type: 'image/png'
+    };
+  }),
+
+  theme_color: backgroundAndThemeColor,
+  background_color: backgroundAndThemeColor,
+
+  display: 'fullscreen',
+  orientation
+};
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const GET = async () => {
+  return new Response(JSON.stringify(manifest));
+};

package/dist/meta/templates/routes/(meta)/robots.txt/+server.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const GET: import("@sveltejs/kit").RequestHandler;

package/dist/meta/templates/routes/(meta)/robots.txt/+server.js

@@ -0,0 +1,9 @@
+import { text } from '@sveltejs/kit';
+import { generateRobotsTxt } from '../../../../utils.js';
+import { robotsConfig } from '../../../../../config/meta.js';
+
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const GET = async ({ url }) => {
+  const robotsTxt = generateRobotsTxt(url, robotsConfig);
+  return text(robotsTxt);
+};

package/dist/meta/templates/routes/(meta)/sitemap.xml/+server.d.ts

@@ -0,0 +1,2 @@
+/** @type {import('@sveltejs/kit').RequestHandler} */
+export const GET: import("@sveltejs/kit").RequestHandler;