@htlkg/astro 0.0.1

package/src/htlkg/virtual-modules.ts

@@ -0,0 +1,81 @@
+/**
+ * Virtual module setup for htlkg integration
+ * Creates Vite virtual modules to pass configuration to middleware and pages
+ */
+
+import type { RouteGuardConfig, LoginPageConfig, RoutePattern } from './config.js';
+
+/**
+ * Serialize a route pattern (RegExp or string) to JavaScript code
+ */
+function serializePattern(pattern: RegExp | string): string {
+	if (pattern instanceof RegExp) {
+		return `new RegExp(${JSON.stringify(pattern.source)}, ${JSON.stringify(pattern.flags)})`;
+	}
+	return JSON.stringify(pattern);
+}
+
+/**
+ * Serialize an array of route patterns to JavaScript code
+ */
+function serializePatterns(patterns: RoutePattern[]): string {
+	if (!patterns || patterns.length === 0) return '[]';
+	return `[${patterns.map(serializePattern).join(', ')}]`;
+}
+
+/**
+ * Create the virtual module plugin for Vite
+ * This plugin provides configuration to middleware and pages at runtime
+ */
+export function createVirtualModulePlugin(
+	authConfig: RouteGuardConfig,
+	loginPageConfig: LoginPageConfig | false | null,
+	amplifyConfig: Record<string, unknown> | null
+) {
+	return {
+		name: 'htlkg-config',
+		resolveId(id: string) {
+			if (id === 'virtual:htlkg-config') {
+				return '\0virtual:htlkg-config';
+			}
+		},
+		load(id: string) {
+			if (id === '\0virtual:htlkg-config') {
+				// Serialize auth configuration with RegExp support
+				const serializedAuthConfig = `{
+					publicRoutes: ${serializePatterns(authConfig.publicRoutes || [])},
+					authenticatedRoutes: ${serializePatterns(authConfig.authenticatedRoutes || [])},
+					adminRoutes: ${serializePatterns(authConfig.adminRoutes || [])},
+					brandRoutes: ${JSON.stringify(authConfig.brandRoutes || [])},
+					loginUrl: ${JSON.stringify(authConfig.loginUrl || '/login')}
+				}`;
+
+				const serializedAmplifyConfig = amplifyConfig
+					? JSON.stringify(amplifyConfig)
+					: 'null';
+
+				const serializedLoginPageConfig = loginPageConfig !== false && loginPageConfig !== null
+					? JSON.stringify(loginPageConfig)
+					: 'null';
+
+				return `export const routeGuardConfig = ${serializedAuthConfig};
+export const loginPageConfig = ${serializedLoginPageConfig};
+export const amplifyConfig = ${serializedAmplifyConfig};`;
+			}
+		},
+	};
+}
+
+/**
+ * Type definitions for the virtual module
+ * This should be injected into the project's type definitions
+ */
+export const virtualModuleTypes = `
+declare module 'virtual:htlkg-config' {
+  import type { RouteGuardConfig, LoginPageConfig } from '@htlkg/astro/htlkg/config';
+  
+  export const routeGuardConfig: RouteGuardConfig;
+  export const loginPageConfig: LoginPageConfig | null;
+  export const amplifyConfig: Record<string, unknown> | null;
+}
+`;

package/src/index.ts

@@ -0,0 +1,37 @@
+/**
+ * @htlkg/astro
+ * 
+ * Astro integration, layouts, page patterns, middleware, and utilities for Hotelinking applications.
+ * 
+ * @module @htlkg/astro
+ */
+
+// Main htlkg integration
+export { htlkg } from './htlkg/index.js';
+
+// Configuration types
+export type {
+	HtlkgIntegrationOptions,
+	RouteGuardConfig,
+	LoginPageConfig,
+	BrandRouteConfig,
+	RoutePattern,
+	AuthUser,
+} from './htlkg/config.js';
+
+export { isAuthenticatedUser } from './htlkg/config.js';
+
+// Layouts, Components, and Patterns are not exported from main index
+// They contain .astro files which cannot be bundled
+// Import them directly from their subpaths:
+// - '@htlkg/astro/layouts'
+// - '@htlkg/astro/components'
+// - '@htlkg/astro/patterns/admin'
+// - '@htlkg/astro/patterns/brand'
+
+// Utils
+export * from './utils';
+
+// Middleware is not exported from main index to avoid bundling astro:middleware
+// It's loaded by Astro at runtime via the entrypoint specified in addMiddleware
+// Import from '@htlkg/astro/middleware' if needed

package/src/layouts/AdminLayout.astro

@@ -0,0 +1,184 @@
+---
+/**
+ * Admin Layout
+ *
+ * Admin layout using uiWrapper from @hotelinking/ui with sidebar, topbar, and content area.
+ * Implements the same logic as the old AdminWrapper.vue but directly in the layout.
+ *
+ * This layout will be fully implemented in a future task.
+ * For now, it provides a basic structure.
+ */
+
+interface User {
+  username?: string;
+  email?: string;
+  isAdmin?: boolean;
+  attributes?: {
+    email?: string;
+  };
+}
+
+interface BreadcrumbItem {
+  label: string;
+  routeName: string;
+  current?: boolean;
+}
+
+interface SidebarItem {
+  name: string;
+  routeName: string;
+  icon?: string;
+  id: string;
+}
+
+interface TopbarAction {
+  name: string;
+  event: string;
+  icon: string;
+}
+
+interface SelectItem {
+  name: string;
+  id: string;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  currentPage?: string;
+  user?: User;
+  showBreadcrumbs?: boolean;
+  breadcrumbs?: BreadcrumbItem[];
+  sidebarLogo?: string;
+  sidebarTitle?: string;
+  sidebarItems?: SidebarItem[];
+  topbarActions?: TopbarAction[];
+  selectItems?: SelectItem[];
+  selectedItem?: SelectItem;
+  sidebarOpenByDefault?: boolean;
+}
+
+const {
+  title,
+  description,
+  currentPage = "dashboard",
+  user,
+  showBreadcrumbs = false,
+  breadcrumbs = [],
+  sidebarLogo = "https://images.hotelinking.com/login/logo.png",
+  sidebarTitle = "Admin",
+  sidebarItems = [],
+  topbarActions = [],
+  selectItems = [],
+  selectedItem = { name: "", id: "" },
+  sidebarOpenByDefault = true,
+} = Astro.props;
+
+// Format user data for display
+const userData = user
+  ? {
+      username: user.username || "Admin",
+      email: user.attributes?.email || user.email || "admin@example.com",
+      avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(user.username || "Admin")}&background=3B82F6&color=fff`,
+    }
+  : {
+      username: "Admin",
+      email: "admin@example.com",
+      avatar:
+        "https://ui-avatars.com/api/?name=Admin&background=3B82F6&color=fff",
+    };
+
+// Build products sidebar based on user admin status
+const baseProducts = [
+  {
+    name: "DeskForce",
+    icon: "https://images.hotelinking.com/ui/ImagoDeskForce.svg",
+  },
+  {
+    name: "GuestMaker",
+    icon: "https://images.hotelinking.com/ui/ImagoGuestMaker.svg",
+  },
+  {
+    name: "WifiBot",
+    icon: "https://images.hotelinking.com/ui/ImagoWiFiBot.svg",
+  },
+];
+
+const productsSidebar = user?.isAdmin
+  ? [
+      {
+        name: "Admin",
+        icon: "https://images.hotelinking.com/login/logo.png",
+        active: true,
+      },
+      ...baseProducts,
+    ]
+  : baseProducts;
+
+import { ClientRouter } from "astro:transitions";
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="https://images.hotelinking.com/login/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title}</title>
+    {description && <meta name="description" content={description} />}
+    <ClientRouter />
+  </head>
+  <body>
+    <div id="app">
+      <!-- TODO: Implement uiWrapper integration -->
+      <!-- This will be implemented in task 7.1 -->
+
+      <!-- Breadcrumbs Section (if enabled) -->
+      {
+        showBreadcrumbs && breadcrumbs.length > 0 && (
+          <div class="breadcrumbs-section mb-6 px-6 pt-6">
+            <nav class="flex" aria-label="Breadcrumb">
+              {breadcrumbs.map((crumb, index) => (
+                <>
+                  {crumb.routeName ? (
+                    <a
+                      href={crumb.routeName}
+                      class="text-gray-500 hover:text-gray-700"
+                    >
+                      {crumb.label}
+                    </a>
+                  ) : (
+                    <span class="text-gray-900">{crumb.label}</span>
+                  )}
+                  {index < breadcrumbs.length - 1 && (
+                    <span class="mx-2 text-gray-400">/</span>
+                  )}
+                </>
+              ))}
+            </nav>
+          </div>
+        )
+      }
+
+      <!-- Page Header -->
+      <div class="px-6 mb-6">
+        <div class="flex items-center justify-between">
+          <div>
+            <h1 class="text-2xl font-bold leading-7 sm:text-4xl sm:truncate">
+              {title}
+            </h1>
+            {description && <p class="text-gray-600 mt-2">{description}</p>}
+          </div>
+          <div class="flex items-center gap-3">
+            <slot name="actions" />
+          </div>
+        </div>
+      </div>
+
+      <!-- Page Content -->
+      <div class="px-6">
+        <slot />
+      </div>
+    </div>
+  </body>
+</html>

package/src/layouts/AuthLayout.astro

@@ -0,0 +1,164 @@
+---
+/**
+ * Auth Layout
+ *
+ * Centered layout for authentication pages (login, register, forgot password).
+ * Clean design with centered card and optional branding.
+ *
+ * @example
+ * ```astro
+ * <AuthLayout
+ *   title="Login"
+ *   description="Sign in to your account"
+ * >
+ *   <LoginForm />
+ * </AuthLayout>
+ * ```
+ */
+
+interface Props {
+  title: string;
+  description?: string;
+  showLogo?: boolean;
+}
+
+const { title, description, showLogo = true } = Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="https://images.hotelinking.com/login/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{title} | Hotelinking</title>
+    {description && <meta name="description" content={description} />}
+  </head>
+  <body>
+    <div id="app" class="auth-layout">
+      <div class="auth-container">
+        {
+          showLogo && (
+            <div class="auth-logo">
+              <img
+                src="https://images.hotelinking.com/login/logo.png"
+                alt="Hotelinking"
+                class="logo-image"
+              />
+            </div>
+          )
+        }
+
+        <div class="auth-card">
+          <div class="auth-header">
+            <h1 class="auth-title">{title}</h1>
+            {description && <p class="auth-description">{description}</p>}
+          </div>
+
+          <div class="auth-content">
+            <slot />
+          </div>
+
+          <div class="auth-footer">
+            <slot name="footer" />
+          </div>
+        </div>
+
+        <div class="auth-links">
+          <slot name="links" />
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+
+<style>
+  .auth-layout {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 2rem;
+  }
+
+  .auth-container {
+    width: 100%;
+    max-width: 28rem;
+  }
+
+  .auth-logo {
+    text-align: center;
+    margin-bottom: 2rem;
+  }
+
+  .logo-image {
+    height: 3rem;
+    filter: brightness(0) invert(1);
+  }
+
+  .auth-card {
+    background: white;
+    border-radius: 1rem;
+    box-shadow:
+      0 20px 25px -5px rgba(0, 0, 0, 0.1),
+      0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    overflow: hidden;
+  }
+
+  .auth-header {
+    padding: 2rem 2rem 1rem;
+    text-align: center;
+  }
+
+  .auth-title {
+    font-size: 1.875rem;
+    font-weight: 700;
+    color: #111827;
+    margin: 0;
+  }
+
+  .auth-description {
+    margin-top: 0.5rem;
+    color: #6b7280;
+    font-size: 0.875rem;
+  }
+
+  .auth-content {
+    padding: 0 2rem 2rem;
+  }
+
+  .auth-footer {
+    padding: 1.5rem 2rem;
+    background: #f9fafb;
+    border-top: 1px solid #e5e7eb;
+  }
+
+  .auth-links {
+    margin-top: 1.5rem;
+    text-align: center;
+  }
+
+  /* Responsive */
+  @media (max-width: 640px) {
+    .auth-layout {
+      padding: 1rem;
+    }
+
+    .auth-header {
+      padding: 1.5rem 1.5rem 0.75rem;
+    }
+
+    .auth-content {
+      padding: 0 1.5rem 1.5rem;
+    }
+
+    .auth-footer {
+      padding: 1rem 1.5rem;
+    }
+
+    .auth-title {
+      font-size: 1.5rem;
+    }
+  }
+</style>