Extract the ACL editor surface (was 759 lines of mixed Astro/Alpine/HTML
in src/pages/acls.astro) into a focused React component tree under
src/components/acls/:
- ACLEditor.tsx — top-level state + layout
- RuleEditor.tsx — per-rule fields and reordering
- SourceSelector.tsx — source-side identity picker
- DestinationSelector.tsx — destination + port picker
- types.ts — shared TS shapes
- validation.ts — pre-submit validation helpers
acls.astro becomes a thin SSR wrapper that mounts <ACLEditor />.
- astro.config.mjs: add @astrojs/react integration
- package.json: pull in @astrojs/react, react@18, react-dom@18, types,
ip-address + is-cidr (CIDR/IP validation in source/dest editors),
lucide-react (icons)
- description string: replace escaped 🤠 sequence with the literal char
53 lines
1.4 KiB
JavaScript
53 lines
1.4 KiB
JavaScript
import node from '@astrojs/node';
|
|
import react from '@astrojs/react';
|
|
import tailwind from '@astrojs/tailwind';
|
|
import { defineConfig } from 'astro/config';
|
|
|
|
// Heady - Awesome VPN Management with Alpine.js/Astro 🤠
|
|
export default defineConfig({
|
|
output: 'hybrid', // Static pages with SSR endpoints
|
|
adapter: node({
|
|
mode: 'standalone',
|
|
}),
|
|
|
|
integrations: [
|
|
tailwind({
|
|
// Tailwind configuration
|
|
applyBaseStyles: false, // We'll handle base styles ourselves
|
|
}),
|
|
// React islands — used by the ACL editor under /acls.
|
|
react(),
|
|
],
|
|
|
|
// Content collections for live VPN data are enabled by default in Astro 4.x
|
|
|
|
vite: {
|
|
define: {
|
|
global: 'globalThis',
|
|
},
|
|
optimizeDeps: {
|
|
include: ['alpinejs', 'guacamole-lite', 'chart.js'],
|
|
},
|
|
server: {
|
|
// No proxy rules: Vite proxy `key` strings are treated as prefix
|
|
// matches (not regex) by default, so a pattern like
|
|
// `/api/(?!auth).*` was matching `/api/auth/login` literally and
|
|
// 404-proxying it to a non-existent backend. The Astro/Astro-only
|
|
// auth endpoints under /api/auth/* must reach Astro's SSR handler
|
|
// directly. Add proxies back per-route (using `^` prefix for
|
|
// regex) once a real backend exists.
|
|
},
|
|
},
|
|
|
|
// Server configuration for production
|
|
server: {
|
|
port: 3001, // Different from Go backend
|
|
host: true,
|
|
},
|
|
|
|
// Build optimizations
|
|
build: {
|
|
assets: 'assets',
|
|
},
|
|
});
|