@htlkg/astro 0.0.1 → 0.0.3

package/src/htlkg/index.ts

@@ -1,12 +1,7 @@
 /**
  * htlkg Astro Integration
  * 
- * Provides zero-config setup for Hotelinking applications with:
- * - Tailwind CSS integration
- * - Vue 3 integration with Amplify setup
- * - Authentication middleware
- * - Route guards
- * - Login page generation
+ * Supports static, hybrid, and full SSR output modes.
  */
 
 import tailwind from '@astrojs/tailwind';
@@ -14,47 +9,13 @@ import vue from '@astrojs/vue';
 import type { AstroIntegration } from 'astro';
 import type { HtlkgIntegrationOptions } from './config.js';
 import { createVirtualModulePlugin, virtualModuleTypes } from './virtual-modules.js';
+import vueDevTools from 'vite-plugin-vue-devtools';
 
-/**
- * Default environment variables required for AWS Amplify authentication
- */
 const DEFAULT_ENV_VARS = [
 	'PUBLIC_COGNITO_USER_POOL_ID',
 	'PUBLIC_COGNITO_USER_POOL_CLIENT_ID'
 ];
 
-/**
- * htlkg Astro integration that provides zero-config authentication setup.
- *
- * This integration automatically:
- * - Includes Tailwind CSS integration (can be disabled)
- * - Includes Vue 3 integration with Amplify and Nanostores setup
- * - Injects authentication middleware for AWS Amplify
- * - Configures route guards based on declarative configuration
- * - Validates required environment variables (optional)
- * - Injects TypeScript types for Astro.locals.user
- * - Provides a default login page (optional)
- *
- * @param options - Configuration options for the integration
- * @returns Astro integration object or array of integrations
- *
- * @example
- * // astro.config.mjs
- * import { htlkg } from '@htlkg/astro';
- *
- * export default defineConfig({
- *   integrations: [
- *     htlkg({
- *       tailwind: { configFile: './tailwind.config.mjs' },
- *       auth: {
- *         publicRoutes: ['/login', '/'],
- *         adminRoutes: [/^\/admin/],
- *         loginUrl: '/login'
- *       }
- *     })
- *   ]
- * });
- */
 export function htlkg(
 	options: HtlkgIntegrationOptions = {},
 ): AstroIntegration | AstroIntegration[] {
@@ -65,6 +26,7 @@ export function htlkg(
 		requiredEnvVars = DEFAULT_ENV_VARS,
 		tailwind: tailwindOptions,
 		amplify,
+		vueAppSetup = 'auto',
 	} = options;
 
 	const integrations: AstroIntegration[] = [];
@@ -78,146 +40,77 @@ export function htlkg(
 		);
 	}
 
-	// Add Vue integration with Amplify setup entrypoint
-	// Use package import specifier that Vite can resolve
-	integrations.push(
-		vue({
-			appEntrypoint: '@htlkg/astro/vue-app-setup',
-		}),
-	);
+	// Determine Vue setup mode:
+	// - 'full': Use Amplify app entrypoint (requires SSR)
+	// - 'basic': Basic Vue without app entrypoint (works with static)
+	// - 'auto': Default to 'basic' for compatibility with static builds
+	const useFullVueSetup = vueAppSetup === 'full';
+
+	// Add Vue integration
+	if (useFullVueSetup) {
+		integrations.push(vue({ appEntrypoint: '@htlkg/astro/vue-app-setup' }));
+	} else {
+		integrations.push(vue());
+	}
 
 	// Add the main htlkg integration
 	integrations.push({
 		name: '@htlkg/astro',
 		hooks: {
-			'astro:config:setup': ({
-				config,
-				updateConfig,
-				addMiddleware,
-				injectRoute,
-				logger,
-			}) => {
+			'astro:config:setup': ({ updateConfig, addMiddleware, injectRoute, logger }) => {
 				try {
-					// 1. Verify Vue integration is present
-					const hasVue = config.integrations.some(
-						(i) => i.name === '@astrojs/vue',
-					);
-					if (hasVue) {
-						logger.info('Vue integration configured with Amplify app setup');
-					}
+					logger.info(useFullVueSetup 
+						? 'Vue configured with Amplify app setup' 
+						: 'Vue configured (basic mode)');
 
-					// 2. Amplify will be configured by the middleware on first request
 					if (amplify) {
-						logger.info('Amplify configuration provided - will be configured on first request');
-					} else {
-						logger.info('No Amplify configuration provided - will use environment variables');
+						logger.info('Amplify configuration provided');
 					}
 
-					// 3. Validate environment variables (only if not using amplify_outputs.json)
-					if (validateEnv && !amplify) {
-						const missing = requiredEnvVars.filter(
-							(varName) => !process.env[varName],
-						);
-
+					// Validate env vars (only for full setup)
+					if (validateEnv && !amplify && useFullVueSetup) {
+						const missing = requiredEnvVars.filter(v => !process.env[v]);
 						if (missing.length > 0) {
-							logger.warn(
-								`Missing required environment variables: ${missing.join(', ')}\nAuthentication may not work correctly. Please set these in your .env file:\n${missing.map((v) => `  - ${v}`).join('\n')}`,
-							);
-						} else {
-							logger.info('All required environment variables are present');
+							logger.warn(`Missing env vars: ${missing.join(', ')}`);
 						}
 					}
 
-					// 4. Create Vite virtual module plugin to pass configuration to middleware and pages
-					try {
-						const virtualModulePlugin = createVirtualModulePlugin(
-							auth,
-							loginPage,
-							amplify || null
-						);
-
-						updateConfig({
-							vite: {
-								plugins: [virtualModulePlugin],
-							},
-						});
-					} catch (error) {
-						const errorMsg =
-							error instanceof Error ? error.message : 'Unknown error';
-						logger.error(
-							`Failed to create virtual module for route configuration: ${errorMsg}`,
-						);
-						throw error;
+					// Create Vite virtual module plugin
+					const virtualModulePlugin = createVirtualModulePlugin(auth, loginPage, amplify || null);
+					const vitePlugins: any[] = [virtualModulePlugin];
+					
+					if (import.meta.env?.DEV !== false) {
+						vitePlugins.push(vueDevTools());
+						logger.info('Vue DevTools enabled');
 					}
 
-					// 5. Inject middleware
-					try {
-						addMiddleware({
-							entrypoint: '@htlkg/astro/middleware',
-							order: 'pre',
-						});
-						logger.info('Authentication middleware injected successfully');
-					} catch (error) {
-						const errorMsg =
-							error instanceof Error ? error.message : 'Unknown error';
-						logger.error(`Failed to inject middleware: ${errorMsg}`);
-						throw error;
-					}
+					updateConfig({ vite: { plugins: vitePlugins } });
 
-					// 6. Verify Vue app entrypoint is configured
-					const vueIntegrationIndex = config.integrations.findIndex(
-						(i) => i.name === '@astrojs/vue',
-					);
-
-					if (vueIntegrationIndex === -1) {
-						logger.warn(
-							'@astrojs/vue integration not found.\n' +
-								'The htlkg integration should have added it automatically.\n' +
-								'If you see this warning, there may be an integration ordering issue.',
-						);
-					} else {
-						logger.info('Vue app setup with Amplify configuration enabled');
+					// Inject middleware (only for full setup)
+					if (useFullVueSetup) {
+						addMiddleware({ entrypoint: '@htlkg/astro/middleware', order: 'pre' });
+						logger.info('Authentication middleware injected');
 					}
 
-					// 7. Verify Tailwind integration
-					const hasTailwind = config.integrations.some(
-						(i) =>
-							i.name === '@astrojs/tailwind' || i.name === 'astro:tailwind',
-					);
-
-					if (hasTailwind) {
-						logger.info('Tailwind CSS integration configured');
-					}
-
-					// 8. Inject login page route if enabled
-					if (loginPage !== false) {
-						try {
-							const loginPath = loginPage.path || '/login';
-							injectRoute({
-								pattern: loginPath,
-								entrypoint: '@htlkg/astro/auth/LoginPage.astro',
-								prerender: false,
-							});
-							logger.info(`Injected default login page at ${loginPath}`);
-						} catch (error) {
-							const errorMsg =
-								error instanceof Error ? error.message : 'Unknown error';
-							logger.warn(`Failed to inject login page: ${errorMsg}`);
-						}
+					// Inject login page (only for full setup)
+					if (loginPage !== false && useFullVueSetup) {
+						const loginPath = loginPage.path || '/login';
+						injectRoute({
+							pattern: loginPath,
+							entrypoint: '@htlkg/astro/auth/LoginPage.astro',
+							prerender: false,
+						});
+						logger.info(`Login page injected at ${loginPath}`);
 					}
 
-					logger.info('htlkg integration configured successfully');
+					logger.info('htlkg integration configured');
 				} catch (error) {
-					const errorMsg =
-						error instanceof Error ? error.message : 'Unknown error';
-					logger.error(
-						`Failed to configure htlkg integration: ${errorMsg}`,
-					);
+					const msg = error instanceof Error ? error.message : 'Unknown error';
+					logger.error(`htlkg configuration failed: ${msg}`);
 					throw error;
 				}
 			},
 			'astro:config:done': ({ injectTypes }) => {
-				// Inject TypeScript types for Astro.locals and virtual module
 				injectTypes({
 					filename: 'htlkg.d.ts',
 					content: `
@@ -240,6 +133,5 @@ export {};
 		},
 	});
 
-	// Return single integration or array based on what was added
-	return integrations.length === 1 ? integrations[0] : integrations;
+	return integrations;
 }

package/src/index.ts

@@ -32,6 +32,9 @@ export { isAuthenticatedUser } from './htlkg/config.js';
 // Utils
 export * from './utils';
 
+// Page Factories
+export * from './factories';
+
 // 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

@@ -2,13 +2,14 @@
 /**
  * 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.
+ * Admin layout using AdminWrapper component with uiWrapper, sidebar, and topbar.
+ * Simple admin layout without authentication - pages handle their own auth.
+ * Uses nanostores for user data (no props needed for user).
  */
 
+import { AdminWrapper, setUser } from "@htlkg/components";
+import { uiViewHeader as UiViewHeader } from "@hotelinking/ui";
+
 interface User {
   username?: string;
   email?: string;
@@ -18,12 +19,6 @@ interface User {
   };
 }
 
-interface BreadcrumbItem {
-  label: string;
-  routeName: string;
-  current?: boolean;
-}
-
 interface SidebarItem {
   name: string;
   routeName: string;
@@ -42,51 +37,86 @@ interface SelectItem {
   id: string;
 }
 
-interface Props {
+interface BreadcrumbPage {
+  name: string;
+  routeName: string;
+  current?: boolean;
+}
+
+interface HeaderProps {
   title: string;
+  subtitle?: string;
   description?: string;
+  breadcrumbs?: BreadcrumbPage[];
+  button?: {
+    text: string;
+    color?: "primary" | "secondary" | "red" | "yellow" | "green";
+    size?: "small" | "medium" | "big";
+    loading?: boolean;
+    disabled?: boolean;
+  };
+}
+
+interface SidebarProps {
+  logo: string;
+  title: string;
+  items: SidebarItem[];
   currentPage?: string;
-  user?: User;
-  showBreadcrumbs?: boolean;
-  breadcrumbs?: BreadcrumbItem[];
-  sidebarLogo?: string;
-  sidebarTitle?: string;
-  sidebarItems?: SidebarItem[];
-  topbarActions?: TopbarAction[];
+  openByDefault?: boolean;
+}
+
+interface TopbarProps {
+  actions?: TopbarAction[];
   selectItems?: SelectItem[];
   selectedItem?: SelectItem;
-  sidebarOpenByDefault?: boolean;
 }
 
+interface Props {
+  header: HeaderProps;
+  sidebar: SidebarProps;
+  topbar?: TopbarProps;
+  user?: User;
+}
+
+const { header, sidebar, topbar, user } = Astro.props;
+
+// Extract header props
+const { title, subtitle, description, breadcrumbs = [], button } = header;
+
+// Extract sidebar props
 const {
-  title,
-  description,
+  logo: sidebarLogo,
+  title: sidebarTitle,
+  items: sidebarItems,
   currentPage = "dashboard",
-  user,
-  showBreadcrumbs = false,
-  breadcrumbs = [],
-  sidebarLogo = "https://images.hotelinking.com/login/logo.png",
-  sidebarTitle = "Admin",
-  sidebarItems = [],
-  topbarActions = [],
+  openByDefault: sidebarOpenByDefault = true,
+} = sidebar;
+
+// Extract topbar props
+const {
+  actions: 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",
-    };
+} = topbar || {};
+
+// Initialize user nanostore (server-side)
+if (user) {
+  const userData = {
+    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`,
+    isAdmin: user.isAdmin,
+    attributes: user.attributes,
+  };
+  setUser(userData);
+} else {
+  setUser({
+    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 = [
@@ -130,55 +160,36 @@ import { ClientRouter } from "astro:transitions";
   </head>
   <body>
     <div id="app">
-      <!-- TODO: Implement uiWrapper integration -->
-      <!-- This will be implemented in task 7.1 -->
+      <!-- Admin Wrapper with uiWrapper, sidebar, and topbar -->
+      <!-- User data comes from nanostore (no props needed!) -->
+      <AdminWrapper
+        client:load
+        sidebarLogo={sidebarLogo}
+        currentPage={currentPage}
+        sidebarTitle={sidebarTitle}
+        sidebarItems={sidebarItems}
+        topbarActions={topbarActions}
+        selectItems={selectItems}
+        selectedItem={selectedItem}
+        productsSidebar={productsSidebar}
+        sidebarOpenByDefault={sidebarOpenByDefault}
+      >
+        <!-- View Header with breadcrumbs, title, and optional button -->
+        <UiViewHeader
+          client:load
+          pages={breadcrumbs}
+          title={title}
+          subtitle={subtitle}
+          description={description}
+          buttonText={button?.text}
+          buttonColor={button?.color || "primary"}
+          buttonSize={button?.size || "medium"}
+          buttonLoading={button?.loading || false}
+          buttonDisabled={button?.disabled || false}
+        />
 
-      <!-- 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>
+      </AdminWrapper>
     </div>
   </body>
 </html>

package/src/layouts/layouts.md

@@ -0,0 +1,87 @@
+# Layouts Module
+
+Pre-built page layouts for common page types.
+
+## Installation
+
+```typescript
+import { AdminLayout } from '@htlkg/astro/layouts';
+import { BrandLayout } from '@htlkg/astro/layouts';
+import { AuthLayout } from '@htlkg/astro/layouts';
+import { PublicLayout } from '@htlkg/astro/layouts';
+```
+
+## AdminLayout
+
+Admin portal pages with sidebar navigation.
+
+```astro
+---
+import { AdminLayout } from '@htlkg/astro/layouts';
+
+const user = Astro.locals.user;
+---
+
+<AdminLayout user={user} title="Dashboard">
+  <DashboardContent />
+</AdminLayout>
+```
+
+## BrandLayout
+
+Brand-specific pages with brand context.
+
+```astro
+---
+import { BrandLayout } from '@htlkg/astro/layouts';
+
+const { brandId } = Astro.params;
+const brand = await getBrand(brandId);
+---
+
+<BrandLayout brand={brand} title="Brand Settings">
+  <BrandSettings />
+</BrandLayout>
+```
+
+## AuthLayout
+
+Authentication pages (login, signup).
+
+```astro
+---
+import { AuthLayout } from '@htlkg/astro/layouts';
+---
+
+<AuthLayout title="Login">
+  <LoginForm />
+</AuthLayout>
+```
+
+## PublicLayout
+
+Public-facing pages without authentication.
+
+```astro
+---
+import { PublicLayout } from '@htlkg/astro/layouts';
+---
+
+<PublicLayout title="Welcome">
+  <LandingPage />
+</PublicLayout>
+```
+
+## DefaultLayout
+
+Base layout with minimal styling.
+
+```astro
+---
+import { DefaultLayout } from '@htlkg/astro/layouts';
+---
+
+<DefaultLayout title="Page Title">
+  <slot />
+</DefaultLayout>
+```

package/src/middleware/auth.ts

@@ -2,13 +2,52 @@
  * Authentication middleware for htlkg integration
  * 
  * This middleware:
+ * - Configures AWS Amplify for server-side auth
  * - Retrieves the authenticated user from AWS Amplify
  * - Injects the user into Astro.locals for use in pages and API routes
  * - Handles authentication errors gracefully
  */
 
 import type { MiddlewareHandler } from 'astro';
+import { Amplify } from 'aws-amplify';
 import { getUser } from '@htlkg/core/auth';
+import { globalSettings } from '@htlkg/core/amplify-astro-adapter';
+import { amplifyConfig } from 'virtual:htlkg-config';
+
+// Track if Amplify has been configured
+let amplifyConfigured = false;
+
+/**
+ * Configure Amplify on first request
+ */
+function ensureAmplifyConfigured(): void {
+	if (amplifyConfigured) return;
+
+	try {
+		if (!amplifyConfig) {
+			console.warn('[htlkg Auth] No Amplify configuration provided');
+			return;
+		}
+
+		// Configure Amplify with SSR support
+		Amplify.configure(amplifyConfig as any, { ssr: true });
+		
+		// Enable server-side auth in the adapter
+		globalSettings.enableServerSideAuth();
+		
+		// Check if we're on HTTPS (for secure cookies)
+		const isSSL = typeof window !== 'undefined' 
+			? window.location.protocol === 'https:' 
+			: process.env.NODE_ENV === 'production';
+		globalSettings.setIsSSLOrigin(isSSL);
+		
+		amplifyConfigured = true;
+		console.info('[htlkg Auth] Amplify configured for server-side auth');
+	} catch (error) {
+		const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+		console.error(`[htlkg Auth] Failed to configure Amplify: ${errorMsg}`);
+	}
+}
 
 /**
  * Auth middleware - retrieves authenticated user and injects into locals
@@ -27,6 +66,9 @@ import { getUser } from '@htlkg/core/auth';
 export const authMiddleware: MiddlewareHandler = async (context, next) => {
 	const { locals } = context;
 
+	// Ensure Amplify is configured before attempting auth
+	ensureAmplifyConfigured();
+
 	try {
 		const user = await getUser(context);
 		locals.user = user;