Luma Frontend

A modern, responsive frontend for the Luma document management and chat system built with SvelteKit

Getting Started • Documentation • Features • Contributing • License

Features

• Modern Authentication System

  • Secure JWT-based authentication
  • Role-based access control
  • Automatic token refresh
  • Protected routes

• Responsive Dashboard

  • Desktop and mobile layouts
  • Dark/Light mode support
  • Multiple built-in themes
  • Customizable interface

• Advanced UI Components

  • Chat interface
  • File management
  • Namespace organization
  • User management
  • Settings configuration

• Performance Optimized

  • Server-side rendering
  • Client-side navigation
  • Optimized asset loading
  • TypeScript support

Getting Started

Prerequisites

• Node.js (v23.9.0 or higher)
• npm or yarn
• Docker (optional)

Quick Start

1. Clone the repository

   git clone https://github.com/your-org/luma-frontend-svelte.git
   cd luma-frontend-svelte
   

2. Set up environment variables

   cp .env.example .env
   # Edit .env with your configuration
   

3. Install and run ```bash

   Install dependencies

   npm install

Start development server

npm run dev

Build for production

npm run build

### Docker Setup

```bash
# Build and run with Docker
docker build -t luma-frontend .
docker run -p 5173:5173 --env-file .env luma-frontend

# Or using Docker Compose
docker-compose up

Documentation

Detailed documentation is available in the docs directory:

• User Guide
• Component Library
• Development Guide
• Deployment Guide

Basic Configuration

Create a .env file with the following:

# Docker Network
DOCKER_NETWORK_NAME=

# Frontend Configuration
FRONTEND_PORT=
FRONTEND_URL=
VITE_API_URL=
FRONTEND_API_URL=

Development

Project Structure

luma-frontend-svelte/
├── src/
│   ├── lib/                     # Shared library code
│   │   ├── components/             # Reusable UI components
│   │   ├── services/               # API and service integrations
│   │   ├── stores/                 # Svelte stores (state management)
│   │   ├── types/                  # TypeScript type definitions
│   │   ├── utils/                  # Utility functions
│   │   ├── config/                 # App configuration
│   │   ├── assets/                 # Static assets
│   │   └── index.ts                # Library exports
│   └── routes/                  # SvelteKit routes
│       ├── +layout.svelte          # Root layout
│       ├── +page.svelte            # Home page
│       ├── +error.svelte           # Error page
│       ├── login/                  # Authentication routes
│       ├── register/               # User registration
│       ├── dashboard/              # Main application
            ├── chats/                  # Chat interface
            ├── namespaces/             # Space management
            └── settings/               # Application settings
│       ├── admin-setup/          # Admin configuration
│       └── backend-down/         # Error handling
├── package.json             # NPM dependencies
├── Dockerfile               # Docker build configuration
└── docker-compose.yaml      # Docker services configuration

Available Scripts

# Development
npm run dev         # Start development server
npm run build       # Build for production

Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Component Examples

Authentication Form

<script lang="ts">
  import { auth } from '$lib/stores/auth';
  
  let username = '';
  let password = '';
  
  async function handleLogin() {
    await auth.login({ username, password });
  }
</script>

<form on:submit|preventDefault={handleLogin}>
  <input bind:value={username} type="text" placeholder="Username" />
  <input bind:value={password} type="password" placeholder="Password" />
  <button type="submit">Login</button>
</form>

Configuration Options

Variable	Description	Required	Default
FRONTEND_PORT	Server port	No	5173
VITE_API_URL	Backend API URL	Yes	-
DEFAULT_THEME	UI theme	No	skeleton
ENABLE_DARK_MODE	Dark mode support	No	true

License

This project is licensed under the GNU Affero General Public License v3.0 (AGPL-3.0). This means:

What you can do:

• Use the software for any purpose
• Study how the software works and modify it
• Redistribute the software
• Make commercial use of the software
• Distribute modified versions of the software

What you must do:

• Make source code available when you distribute the software
• Include a copy of the AGPL-3.0 license with the code
• Indicate significant changes made to the software
• Disclose source code when running a modified version on a server

Important Notes:

• If you modify and use this software on a network server, you MUST make the complete source code available to users who interact with the server
• All derivative works must also be licensed under AGPL-3.0
• Including this software in a larger program may require the entire program to be licensed under AGPL-3.0

For the full license text, see the LICENSE file or visit GNU AGPL-3.0.