@vezham/config 26.0.0-alpha.5 → 26.0.0-alpha.6

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>

package/dist/lib/metadata/templates/offline.html

@@ -0,0 +1,210 @@
+<!doctype html>
+<!-- {{generatedNotice}} -->
+<html lang="en">
+  <head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.5, user-scalable=1, shrink-to-fit=no" />
+    <meta name="author" content="{{author}}" />
+    <title>Offline | {{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);
+      }
+
+      .dark .vx-offline__image,
+      [data-theme='dark'] .vx-offline__image {
+        filter: invert(1) hue-rotate(180deg);
+      }
+
+      .vx-offline {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        min-height: 100vh;
+        padding: 1.5rem;
+        text-align: left;
+      }
+
+      .empty-state {
+        padding: 0.5rem;
+      }
+
+      .vx-offline__content {
+        align-items: flex-start;
+        display: flex;
+        flex-direction: column;
+        gap: 0.75rem;
+        justify-content: center;
+        max-width: 36rem;
+        width: 100%;
+      }
+
+      .vx-offline__image {
+        height: auto;
+        margin-bottom: 0.75rem;
+        max-height: 16rem;
+        max-width: 100%;
+        object-fit: contain;
+        width: min(20rem, 70vw);
+      }
+
+      .typography {
+        color: var(--foreground);
+        margin: 0;
+      }
+
+      .typography--h2 {
+        font-size: 1.875rem;
+        font-weight: 600;
+        line-height: 2.25rem;
+      }
+
+      .typography--body {
+        font-size: 1rem;
+        line-height: 1.75rem;
+      }
+
+      .typography--color-muted {
+        color: var(--muted);
+      }
+
+      .button {
+        align-items: center;
+        border: 0;
+        border-radius: 1.5rem;
+        cursor: pointer;
+        display: inline-flex;
+        font: inherit;
+        font-size: 0.875rem;
+        font-weight: 500;
+        height: 2.25rem;
+        justify-content: center;
+        padding: 0 1rem;
+        text-decoration: none;
+        --button-bg: transparent;
+        --button-bg-hover: var(--button-bg);
+        --button-fg: currentcolor;
+        background: var(--button-bg);
+        color: var(--button-fg);
+      }
+
+      .button--secondary {
+        --button-bg: var(--default);
+        --button-bg-hover: 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);
+        }
+
+        :root:not(.light):not(.dark):not([data-theme]) .vx-offline__image {
+          filter: invert(1) hue-rotate(180deg);
+        }
+      }
+
+      @media only screen and (orientation: landscape) {
+        .vx-offline__image {
+          max-height: 11rem;
+          width: min(14rem, 30vw);
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <main class="vx-offline">
+      <div class="empty-state">
+        <div class="vx-offline__content">
+          <!-- prettier-ignore -->
+          <img
+            class="vx-offline__image"
+            src="{{imageUrl}}"
+            alt="Offline" />
+          <h1 class="typography typography--h2">Oops! You're offline</h1>
+          <p class="typography typography--color-muted typography--body">
+            Please check your connection and try again.
+          </p>
+          <a class="button button--secondary" href="/">Back to Home</a>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>