@vezham/config 0.0.0-stage → 26.0.0-alpha.6

package/dist/lib/metadata/runtime.js

@@ -0,0 +1,134 @@
+import { resolveI18n } from "../i18n.js";
+import path from "node:path";
+//#region src/lib/metadata/runtime.ts
+var lowerFirst = (value) => value ? `${value.charAt(0).toLowerCase()}${value.slice(1)}` : value;
+var normalizePath = (value) => value.split(path.sep).join("/");
+var getProjectAssetBaseUrl = (projectRoot) => `https://static.cdn.vezham.com/${normalizePath(path.relative(process.cwd(), projectRoot))}`;
+var createVersionedAssetUrl = (baseUrl, version) => {
+	const versionParam = `vx=${encodeURIComponent(version)}`;
+	return (assetPath) => `${baseUrl.replace(/\/$/, "")}/${assetPath.replace(/^\//, "")}?${versionParam}`;
+};
+var getStaticAssetUrl = (assetPath, version) => `https://static.cdn.vezham.com/${assetPath.replace(/^\//, "")}?vx=${encodeURIComponent(version)}`;
+var toAssetUrl = (assetPath, versionedAssetUrl) => /^https?:\/\//.test(assetPath) || assetPath.startsWith("/") ? assetPath : versionedAssetUrl(assetPath);
+var resolveSocialImage = (image) => {
+	const value = image?.trim();
+	if (!value) return {
+		source: "default",
+		url: "/og/image.png"
+	};
+	if (/^https?:\/\//i.test(value)) return {
+		source: "url",
+		url: value
+	};
+	return {
+		source: "path",
+		url: `/${value.replace(/^\/+/, "")}`
+	};
+};
+var getStartupImageMedia = (image) => {
+	if (image.media) return image.media;
+	return [
+		image.colorScheme ? `(prefers-color-scheme: ${image.colorScheme})` : void 0,
+		image.width ? `(device-width: ${image.width}px)` : void 0,
+		image.height ? `(device-height: ${image.height}px)` : void 0,
+		image.pixelRatio ? `(-webkit-device-pixel-ratio: ${image.pixelRatio})` : void 0
+	].filter(Boolean).join(" and ");
+};
+var createStartupImagePath = (template, image) => template.replaceAll("{colorScheme}", image.colorScheme ?? "").replaceAll("{device}", image.device ?? "").replaceAll("{width}", String(image.width ?? "")).replaceAll("{height}", String(image.height ?? "")).replaceAll("{pixelRatio}", String(image.pixelRatio ?? ""));
+var normalizeStartupImages = (startupImages) => {
+	if (Array.isArray(startupImages)) return startupImages;
+	return (startupImages.colorSchemes ?? ["light", "dark"]).flatMap((colorScheme) => startupImages.sizes.map((size) => {
+		const image = {
+			...size,
+			colorScheme
+		};
+		const sourcePath = size.path ?? size.src ?? startupImages.path;
+		return {
+			...image,
+			path: createStartupImagePath(sourcePath, image)
+		};
+	}));
+};
+var normalizeIcons = (icons) => {
+	if (Array.isArray(icons)) return icons;
+	return icons.sizes.map((size) => ({
+		src: icons.path.replaceAll("{size}", String(size)),
+		sizes: `${size}x${size}`,
+		type: icons.type
+	}));
+};
+var getRuntimeMetadata = (config, projectRoot = process.cwd()) => {
+	const { core, metadata, pwa } = config;
+	const { apple, microsoft } = metadata.platforms;
+	const { openGraph, twitter } = metadata.social;
+	const versionedAssetUrl = createVersionedAssetUrl(getProjectAssetBaseUrl(projectRoot), core.version);
+	const title = metadata.title;
+	const description = lowerFirst(core.description);
+	const lightThemeColor = metadata.theme.lightColor;
+	const darkThemeColor = metadata.theme.darkColor;
+	const lightBackgroundColor = metadata.theme.lightBackgroundColor;
+	const darkBackgroundColor = metadata.theme.darkBackgroundColor;
+	const faviconLight = versionedAssetUrl("favicon-light.png");
+	const faviconDark = versionedAssetUrl("favicon-dark.png");
+	const maskIcon = versionedAssetUrl("safari-pinned-tab.svg");
+	const appleTouchIcon = versionedAssetUrl(apple.touchIcon);
+	const openGraphImage = resolveSocialImage(openGraph.image);
+	const twitterImage = resolveSocialImage(twitter.image?.trim() ? twitter.image : openGraph.image);
+	const startupImages = normalizeStartupImages(apple.startupImages).map((image) => ({
+		media: getStartupImageMedia(image),
+		url: toAssetUrl(image.path ?? image.src ?? "", versionedAssetUrl)
+	}));
+	return {
+		...resolveI18n(config.i18n),
+		title,
+		description,
+		url: core.url,
+		manifest: "/manifest.webmanifest",
+		browserConfig: "/browserconfig.xml",
+		startUrl: microsoft.startUrl ?? pwa.startUrl,
+		author: core.publisher,
+		keywords: metadata.keywords,
+		theme: {
+			lightColor: lightThemeColor,
+			darkColor: darkThemeColor,
+			lightBackgroundColor,
+			darkBackgroundColor
+		},
+		mobileWebAppCapable: apple.mobileWebAppCapable,
+		apple: {
+			title: core.name,
+			capable: apple.webAppCapable,
+			touchIcon: appleTouchIcon,
+			startupImages
+		},
+		icons: {
+			faviconLight,
+			faviconDark,
+			maskIcon
+		},
+		microsoft: {
+			applicationName: core.name,
+			config: "/browserconfig.xml",
+			startUrl: microsoft.startUrl
+		},
+		openGraph: {
+			type: openGraph.type,
+			title: core.name,
+			description,
+			image: openGraphImage.url,
+			imageSource: openGraphImage.source,
+			url: core.url
+		},
+		twitter: {
+			creator: twitter.creator,
+			site: twitter.site,
+			title: core.name,
+			description,
+			image: twitterImage.url,
+			url: core.url,
+			card: twitter.card
+		}
+	};
+};
+//#endregion
+export { createVersionedAssetUrl, getProjectAssetBaseUrl, getRuntimeMetadata, getStaticAssetUrl, lowerFirst, normalizeIcons, toAssetUrl };

package/dist/lib/metadata/tanstack.d.ts

@@ -0,0 +1,71 @@
+import type { VxConfig } from './types';
+export declare const getTanStackHead: (config: VxConfig, projectRoot?: string) => {
+    meta: ({
+        charSet: string;
+        name?: undefined;
+        content?: undefined;
+        title?: undefined;
+        media?: undefined;
+        property?: undefined;
+    } | {
+        name: string;
+        content: string;
+        charSet?: undefined;
+        title?: undefined;
+        media?: undefined;
+        property?: undefined;
+    } | {
+        title: string;
+        charSet?: undefined;
+        name?: undefined;
+        content?: undefined;
+        media?: undefined;
+        property?: undefined;
+    } | {
+        name: string;
+        media: string;
+        content: string;
+        charSet?: undefined;
+        title?: undefined;
+        property?: undefined;
+    } | {
+        property: string;
+        content: string;
+        charSet?: undefined;
+        name?: undefined;
+        title?: undefined;
+        media?: undefined;
+    })[];
+    links: ({
+        rel: string;
+        href: string;
+        type?: undefined;
+        media?: undefined;
+        color?: undefined;
+    } | {
+        rel: string;
+        type: string;
+        media: string;
+        href: string;
+        color?: undefined;
+    } | {
+        rel: string;
+        media: string;
+        href: string;
+        type?: undefined;
+        color?: undefined;
+    } | {
+        rel: string;
+        type: string;
+        media: string;
+        href: string;
+        color: string;
+    } | {
+        rel: string;
+        media: string;
+        href: string;
+        color: string;
+        type?: undefined;
+    })[];
+};
+//# sourceMappingURL=tanstack.d.ts.map

package/dist/lib/metadata/tanstack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tanstack.d.ts","sourceRoot":"","sources":["../../../src/lib/metadata/tanstack.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEvC,eAAO,MAAM,eAAe,GAC1B,QAAQ,QAAQ,EAChB,oBAA2B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJ5B,CAAA"}

package/dist/lib/metadata/tanstack.js

@@ -0,0 +1,194 @@
+import { getRuntimeMetadata } from "./runtime.js";
+//#region src/lib/metadata/tanstack.ts
+var getTanStackHead = (config, projectRoot = process.cwd()) => {
+	const metadata = getRuntimeMetadata(config, projectRoot);
+	return {
+		meta: [
+			{ charSet: "utf-8" },
+			{
+				name: "viewport",
+				content: "width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1, shrink-to-fit=no"
+			},
+			{
+				name: "author",
+				content: metadata.author?.name ?? ""
+			},
+			{
+				name: "keywords",
+				content: metadata.keywords.join(", ")
+			},
+			{ title: metadata.title },
+			{
+				name: "description",
+				content: metadata.description
+			},
+			{
+				name: "theme-color",
+				media: "(prefers-color-scheme: light)",
+				content: metadata.theme.lightColor
+			},
+			{
+				name: "theme-color",
+				media: "(prefers-color-scheme: dark)",
+				content: metadata.theme.darkColor
+			},
+			{
+				name: "background-color",
+				media: "(prefers-color-scheme: light)",
+				content: metadata.theme.lightBackgroundColor
+			},
+			{
+				name: "background-color",
+				media: "(prefers-color-scheme: dark)",
+				content: metadata.theme.darkBackgroundColor
+			},
+			{
+				name: "mobile-web-app-capable",
+				content: metadata.mobileWebAppCapable ? "yes" : "no"
+			},
+			{
+				name: "apple-mobile-web-app-title",
+				content: metadata.apple.title
+			},
+			{
+				name: "apple-mobile-web-app-capable",
+				content: metadata.apple.capable ? "yes" : "no"
+			},
+			{
+				name: "application-name",
+				content: metadata.microsoft.applicationName
+			},
+			{
+				name: "msapplication-config",
+				content: metadata.microsoft.config
+			},
+			{
+				name: "msapplication-starturl",
+				content: metadata.microsoft.startUrl
+			},
+			{
+				property: "og:type",
+				content: metadata.openGraph.type
+			},
+			{
+				property: "og:title",
+				content: metadata.openGraph.title
+			},
+			{
+				property: "og:description",
+				content: metadata.openGraph.description
+			},
+			{
+				property: "og:image",
+				content: metadata.openGraph.image
+			},
+			{
+				property: "og:url",
+				content: metadata.openGraph.url
+			},
+			{
+				name: "twitter:creator",
+				content: metadata.twitter.creator
+			},
+			{
+				name: "twitter:site",
+				content: metadata.twitter.site
+			},
+			{
+				name: "twitter:title",
+				content: metadata.twitter.title
+			},
+			{
+				name: "twitter:description",
+				content: metadata.twitter.description
+			},
+			{
+				name: "twitter:image",
+				content: metadata.twitter.image
+			},
+			{
+				name: "twitter:url",
+				content: metadata.twitter.url
+			},
+			{
+				name: "twitter:card",
+				content: metadata.twitter.card
+			}
+		],
+		links: [
+			{
+				rel: "manifest",
+				href: metadata.manifest
+			},
+			{
+				rel: "icon",
+				type: "image/x-icon",
+				media: "(prefers-color-scheme: light)",
+				href: metadata.icons.faviconLight
+			},
+			{
+				rel: "icon",
+				type: "image/x-icon",
+				media: "(prefers-color-scheme: dark)",
+				href: metadata.icons.faviconDark
+			},
+			{
+				rel: "icon",
+				media: "(prefers-color-scheme: light)",
+				href: metadata.icons.faviconLight
+			},
+			{
+				rel: "icon",
+				media: "(prefers-color-scheme: dark)",
+				href: metadata.icons.faviconDark
+			},
+			{
+				rel: "icon",
+				type: "image/svg+xml",
+				media: "(prefers-color-scheme: light)",
+				href: metadata.icons.maskIcon,
+				color: "black"
+			},
+			{
+				rel: "icon",
+				type: "image/svg+xml",
+				media: "(prefers-color-scheme: dark)",
+				href: metadata.icons.maskIcon,
+				color: "white"
+			},
+			{
+				rel: "shortcut icon",
+				media: "(prefers-color-scheme: light)",
+				href: metadata.icons.faviconLight
+			},
+			{
+				rel: "shortcut icon",
+				media: "(prefers-color-scheme: dark)",
+				href: metadata.icons.faviconDark
+			},
+			{
+				rel: "mask-icon",
+				media: "(prefers-color-scheme: light)",
+				href: metadata.icons.maskIcon,
+				color: "black"
+			},
+			{
+				rel: "mask-icon",
+				media: "(prefers-color-scheme: dark)",
+				href: metadata.icons.maskIcon,
+				color: "white"
+			},
+			{
+				rel: "apple-touch-icon",
+				href: metadata.apple.touchIcon
+			},
+			...metadata.apple.startupImages.map((image) => ({
+				rel: "apple-touch-startup-image",
+				media: image.media,
+				href: image.url
+			}))
+		]
+	};
+};
+//#endregion
+export { getTanStackHead };

package/dist/lib/metadata/templates/not-found.html

@@ -0,0 +1,224 @@
+<!doctype html>
+<!-- {{generatedNotice}} -->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="{{author}}" />
+    <title>Page Not Found | {{appName}}</title>
+    <style>
+      :root,
+      .light {
+        color-scheme: light;
+        --white: oklch(100% 0 0);
+        --snow: oklch(0.9911 0 0);
+        --eclipse: oklch(0.2103 0.0059 285.89);
+        --background: oklch(0.9702 0 0);
+        --foreground: var(--eclipse);
+        --muted: oklch(0.5517 0.0138 285.94);
+        --default: oklch(94% 0.001 286.375);
+        --default-foreground: var(--eclipse);
+        --accent: oklch(0.6204 0.195 253.83);
+        --accent-soft-foreground: color-mix(
+          in oklab,
+          var(--accent) 70%,
+          var(--foreground) 30%
+        );
+        --default-hover: color-mix(
+          in oklab,
+          var(--default) 96%,
+          var(--default-foreground) 4%
+        );
+      }
+
+      .dark,
+      [data-theme='dark'] {
+        color-scheme: dark;
+        --background: oklch(12% 0.005 285.823);
+        --foreground: var(--snow);
+        --muted: oklch(70.5% 0.015 286.067);
+        --default: oklch(27.4% 0.006 286.033);
+        --default-foreground: var(--snow);
+        --accent-soft-foreground: color-mix(
+          in oklab,
+          var(--accent) 80%,
+          var(--foreground) 30%
+        );
+      }
+
+      * {
+        box-sizing: border-box;
+      }
+
+      body {
+        background: var(--white);
+        color: var(--foreground);
+        font-family: ui-sans-serif, system-ui, sans-serif;
+        margin: 0;
+      }
+
+      .dark body,
+      [data-theme='dark'] body {
+        background: var(--background);
+      }
+
+      .vx-not-found {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 1.5rem;
+        text-align: left;
+      }
+
+      .empty-state {
+        max-width: 37rem;
+        padding: 0.5rem;
+        width: 100%;
+      }
+
+      .vx-not-found__content {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        justify-content: center;
+        max-width: 36rem;
+        width: 100%;
+      }
+
+      .vx-not-found__image {
+        height: auto;
+        margin-bottom: 0.75rem;
+        max-height: 16rem;
+        max-width: 100%;
+        object-fit: contain;
+        width: min(20rem, 70vw);
+      }
+
+      .vx-not-found__path {
+        font-weight: 600;
+        overflow-wrap: anywhere;
+      }
+
+      .typography {
+        color: var(--foreground);
+        margin: 0;
+      }
+
+      .typography--h1 {
+        font-size: 2.25rem;
+        font-weight: 600;
+        line-height: 2.5rem;
+      }
+
+      .typography--h2 {
+        font-size: 1.875rem;
+        font-weight: 600;
+        line-height: 2.25rem;
+      }
+
+      .typography--body {
+        color: var(--muted);
+        font-size: 1rem;
+        line-height: 1.75rem;
+      }
+
+      .typography--color-muted {
+        color: var(--muted);
+      }
+
+      .button {
+        align-items: center;
+        border-radius: 1.5rem;
+        cursor: pointer;
+        display: flex;
+        font-size: 0.875rem;
+        font-weight: 500;
+        gap: 0.5rem;
+        height: 2.25rem;
+        justify-content: center;
+        padding: 0 1rem;
+        text-decoration: none;
+        width: fit-content;
+        --button-bg: transparent;
+        --button-bg-hover: var(--button-bg);
+        --button-bg-pressed: var(--button-bg-hover);
+        --button-fg: currentcolor;
+        background: var(--button-bg);
+        color: var(--button-fg);
+      }
+
+      .button--secondary {
+        --button-bg: var(--default);
+        --button-bg-hover: var(--default-hover);
+        --button-bg-pressed: var(--default-hover);
+        --button-fg: var(--accent-soft-foreground);
+      }
+
+      .button:hover {
+        background: var(--button-bg-hover);
+      }
+
+      .button:focus-visible {
+        outline: 2px solid var(--accent);
+        outline-offset: 2px;
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root:not(.light):not(.dark):not([data-theme]) {
+          color-scheme: dark;
+          --background: oklch(12% 0.005 285.823);
+          --foreground: var(--snow);
+          --muted: oklch(70.5% 0.015 286.067);
+          --default: oklch(27.4% 0.006 286.033);
+          --default-foreground: var(--snow);
+          --accent-soft-foreground: color-mix(
+            in oklab,
+            var(--accent) 80%,
+            var(--foreground) 30%
+          );
+        }
+
+        :root:not(.light):not(.dark):not([data-theme]) body {
+          background: var(--background);
+        }
+      }
+
+      @media only screen and (orientation: landscape) {
+        .vx-not-found__image {
+          max-height: 11rem;
+          width: min(14rem, 30vw);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="vx-not-found">
+      <div class="empty-state">
+        <div class="vx-not-found__content">
+          <img
+            class="vx-not-found__image"
+            src="{{imageUrl}}"
+            alt="Page not found" />
+          <h1 class="typography typography--color-muted typography--h1">404</h1>
+          <h2 class="typography typography--h2">Page not found</h2>
+          <p class="typography typography--color-muted typography--body">
+            {{appName}} could not find the page you requested<span
+              class="vx-not-found__path"
+              data-vx-not-found-path></span
+            >.
+          </p>
+          <a class="button button--secondary" href="/">Back to Home</a>
+        </div>
+      </div>
+    </main>
+    <script>
+      const pathElement = document.querySelector('[data-vx-not-found-path]')
+
+      if (pathElement) {
+        pathElement.textContent = ': ' + (window.location.pathname || '/')
+      }
+    </script>
+  </body>
+</html>