initial commit
This commit is contained in:
Joakim Repomaa
26
.gitignore
vendored
Normal file
26
.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
node_modules
|
||||||
|
|
||||||
|
# Output
|
||||||
|
.output
|
||||||
|
.vercel
|
||||||
|
.netlify
|
||||||
|
.wrangler
|
||||||
|
/.svelte-kit
|
||||||
|
/build
|
||||||
|
|
||||||
|
# OS
|
||||||
|
.DS_Store
|
||||||
|
Thumbs.db
|
||||||
|
|
||||||
|
# Env
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
!.env.test
|
||||||
|
|
||||||
|
# Vite
|
||||||
|
vite.config.js.timestamp-*
|
||||||
|
vite.config.ts.timestamp-*
|
||||||
|
|
||||||
|
# Devbox
|
||||||
|
.devbox/
|
||||||
9
.prettierignore
Normal file
9
.prettierignore
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
# Package Managers
|
||||||
|
package-lock.json
|
||||||
|
pnpm-lock.yaml
|
||||||
|
yarn.lock
|
||||||
|
bun.lock
|
||||||
|
bun.lockb
|
||||||
|
|
||||||
|
# Miscellaneous
|
||||||
|
/static/
|
||||||
17
.prettierrc
Normal file
17
.prettierrc
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"useTabs": false,
|
||||||
|
"singleQuote": true,
|
||||||
|
"trailingComma": "all",
|
||||||
|
"printWidth": 100,
|
||||||
|
"semi": false,
|
||||||
|
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
|
||||||
|
"overrides": [
|
||||||
|
{
|
||||||
|
"files": "*.svelte",
|
||||||
|
"options": {
|
||||||
|
"parser": "svelte"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"tailwindStylesheet": "./src/routes/layout.css"
|
||||||
|
}
|
||||||
122
AGENTS.md
Normal file
122
AGENTS.md
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
# Agent Instructions
|
||||||
|
|
||||||
|
This is a SvelteKit 5 project with TypeScript and Tailwind CSS for a router dashboard interface.
|
||||||
|
|
||||||
|
## Build Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Development server
|
||||||
|
deno run dev
|
||||||
|
|
||||||
|
# Build for production
|
||||||
|
deno run build
|
||||||
|
|
||||||
|
# Preview production build
|
||||||
|
deno run preview
|
||||||
|
|
||||||
|
# Type checking
|
||||||
|
deno run check
|
||||||
|
deno run check:watch
|
||||||
|
|
||||||
|
# Linting and formatting
|
||||||
|
deno run lint
|
||||||
|
deno run format
|
||||||
|
```
|
||||||
|
|
||||||
|
## Code Style Guidelines
|
||||||
|
|
||||||
|
### TypeScript
|
||||||
|
|
||||||
|
- Use strict TypeScript mode
|
||||||
|
- Use `import type` for type-only imports
|
||||||
|
- Prefer interfaces over type aliases for object shapes
|
||||||
|
- Use PascalCase for types, interfaces, enums, and components
|
||||||
|
- Use camelCase for functions, variables, and properties
|
||||||
|
- Enum values use PascalCase (e.g., `IPv4`, `Static`)
|
||||||
|
- Use explicit return types on exported functions
|
||||||
|
|
||||||
|
### Svelte 5 Runes
|
||||||
|
|
||||||
|
- Use `$props()` for component props with typed interfaces
|
||||||
|
- Use `$derived()` for computed values
|
||||||
|
- Always define Props interface for component props
|
||||||
|
- Example:
|
||||||
|
```svelte
|
||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
iface: NetworkInterface
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
let { iface, class: className = '' }: Props = $props()
|
||||||
|
const ipv4Addresses = $derived(iface.Addresses?.filter((addr) => addr.Family === 2) ?? [])
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Formatting
|
||||||
|
|
||||||
|
- Use 2 spaces for indentation
|
||||||
|
- Single quotes for strings
|
||||||
|
- Trailing commas enabled
|
||||||
|
- No semicolons
|
||||||
|
- Print width: 100
|
||||||
|
- Tailwind CSS class sorting enabled
|
||||||
|
|
||||||
|
### Imports
|
||||||
|
|
||||||
|
- Use `$lib/` alias for imports from src/lib
|
||||||
|
- Group imports: external libraries, then $lib imports, then relative imports
|
||||||
|
- Use type imports: `import type { NetworkInterface } from '$lib/types'`
|
||||||
|
|
||||||
|
### Error Handling
|
||||||
|
|
||||||
|
- Use optional chaining (`?.`) and nullish coalescing (`??`) for safe property access
|
||||||
|
- Provide default values for optional props
|
||||||
|
- Use proper TypeScript narrowing with type guards when needed
|
||||||
|
|
||||||
|
### Component Structure
|
||||||
|
|
||||||
|
- One component per file
|
||||||
|
- Use `.svelte` extension for components
|
||||||
|
- Place reusable UI components in `$lib/components/ui/`
|
||||||
|
- Place feature-specific components in `$lib/components/<feature>/`
|
||||||
|
- Use `Snippet` type from svelte for children props
|
||||||
|
|
||||||
|
### Styling
|
||||||
|
|
||||||
|
- Use Tailwind CSS classes
|
||||||
|
- Prefer utility classes over custom CSS
|
||||||
|
- Use color utilities from the project's palette (green-600, yellow-600, red-600, etc.)
|
||||||
|
|
||||||
|
## MCP Tools
|
||||||
|
|
||||||
|
You have access to Svelte 5 and SvelteKit documentation via MCP:
|
||||||
|
|
||||||
|
### 1. list-sections
|
||||||
|
|
||||||
|
Use FIRST to discover available documentation sections.
|
||||||
|
|
||||||
|
### 2. get-documentation
|
||||||
|
|
||||||
|
Fetch documentation for specific sections after listing.
|
||||||
|
|
||||||
|
### 3. svelte-autofixer
|
||||||
|
|
||||||
|
MUST use this tool whenever writing Svelte code before sending to the user. Keep calling until no issues remain.
|
||||||
|
|
||||||
|
### 4. playground-link
|
||||||
|
|
||||||
|
Generate Svelte Playground links after user confirmation. Never use if code was written to project files.
|
||||||
|
|
||||||
|
## Project Structure
|
||||||
|
|
||||||
|
```
|
||||||
|
src/
|
||||||
|
routes/ # SvelteKit routes
|
||||||
|
lib/
|
||||||
|
components/ # Svelte components
|
||||||
|
ui/ # Reusable UI primitives
|
||||||
|
network/ # Network-specific components
|
||||||
|
types.ts # TypeScript type definitions
|
||||||
|
utils/ # Utility functions
|
||||||
|
static/ # Static assets
|
||||||
|
```
|
||||||
42
README.md
Normal file
42
README.md
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
# sv
|
||||||
|
|
||||||
|
Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
|
||||||
|
|
||||||
|
## Creating a project
|
||||||
|
|
||||||
|
If you're seeing this, you've probably already done this step. Congrats!
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# create a new project
|
||||||
|
npx sv create my-app
|
||||||
|
```
|
||||||
|
|
||||||
|
To recreate this project with the same configuration:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
# recreate this project
|
||||||
|
deno run npm:sv create --template minimal --types ts --add prettier eslint tailwindcss="plugins:none" sveltekit-adapter="adapter:static" devtools-json mcp="ide:opencode+setup:local" --install deno router-dash
|
||||||
|
```
|
||||||
|
|
||||||
|
## Developing
|
||||||
|
|
||||||
|
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run dev
|
||||||
|
|
||||||
|
# or start the server and open the app in a new browser tab
|
||||||
|
npm run dev -- --open
|
||||||
|
```
|
||||||
|
|
||||||
|
## Building
|
||||||
|
|
||||||
|
To create a production version of your app:
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
You can preview the production build with `npm run preview`.
|
||||||
|
|
||||||
|
> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
|
||||||
13
devbox.json
Normal file
13
devbox.json
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
{
|
||||||
|
"packages": ["deno@latest"],
|
||||||
|
"shell": {
|
||||||
|
"init_hook": ["echo 'Welcome to router-dash dev environment!'"],
|
||||||
|
"scripts": {
|
||||||
|
"dev": "deno task dev",
|
||||||
|
"build": "deno task build",
|
||||||
|
"check": "deno task check",
|
||||||
|
"lint": "deno task lint",
|
||||||
|
"format": "deno task format"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
57
devbox.lock
Normal file
57
devbox.lock
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
{
|
||||||
|
"lockfile_version": "1",
|
||||||
|
"packages": {
|
||||||
|
"deno@latest": {
|
||||||
|
"last_modified": "2026-02-15T09:18:18Z",
|
||||||
|
"resolved": "github:NixOS/nixpkgs/e3cb16bccd9facebae3ba29c6a76a4cc1b73462a#deno",
|
||||||
|
"source": "devbox-search",
|
||||||
|
"version": "2.6.8",
|
||||||
|
"systems": {
|
||||||
|
"aarch64-darwin": {
|
||||||
|
"outputs": [
|
||||||
|
{
|
||||||
|
"name": "out",
|
||||||
|
"path": "/nix/store/g1ppl8rayksihnhnzi97xyhzyzdfc8qc-deno-2.6.8",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"store_path": "/nix/store/g1ppl8rayksihnhnzi97xyhzyzdfc8qc-deno-2.6.8"
|
||||||
|
},
|
||||||
|
"aarch64-linux": {
|
||||||
|
"outputs": [
|
||||||
|
{
|
||||||
|
"name": "out",
|
||||||
|
"path": "/nix/store/rj9fgwv2frhqmg0v2g64kmanlfayib03-deno-2.6.8",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"store_path": "/nix/store/rj9fgwv2frhqmg0v2g64kmanlfayib03-deno-2.6.8"
|
||||||
|
},
|
||||||
|
"x86_64-darwin": {
|
||||||
|
"outputs": [
|
||||||
|
{
|
||||||
|
"name": "out",
|
||||||
|
"path": "/nix/store/hs3cj286jdbn8ahrqa3h8jvc3wj3a0c0-deno-2.6.8",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"store_path": "/nix/store/hs3cj286jdbn8ahrqa3h8jvc3wj3a0c0-deno-2.6.8"
|
||||||
|
},
|
||||||
|
"x86_64-linux": {
|
||||||
|
"outputs": [
|
||||||
|
{
|
||||||
|
"name": "out",
|
||||||
|
"path": "/nix/store/61qqy6wi21p9a9a1glwiy80crd0kbr9f-deno-2.6.8",
|
||||||
|
"default": true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"store_path": "/nix/store/61qqy6wi21p9a9a1glwiy80crd0kbr9f-deno-2.6.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"github:NixOS/nixpkgs/nixpkgs-unstable": {
|
||||||
|
"last_modified": "2026-02-11T21:01:36Z",
|
||||||
|
"resolved": "github:NixOS/nixpkgs/2343bbb58f99267223bc2aac4fc9ea301a155a16?lastModified=1770843696&narHash=sha256-LovWTGDwXhkfCOmbgLVA10bvsi%2FP8eDDpRudgk68HA8%3D"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
39
eslint.config.js
Normal file
39
eslint.config.js
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import prettier from 'eslint-config-prettier'
|
||||||
|
import path from 'node:path'
|
||||||
|
import { includeIgnoreFile } from '@eslint/compat'
|
||||||
|
import js from '@eslint/js'
|
||||||
|
import svelte from 'eslint-plugin-svelte'
|
||||||
|
import { defineConfig } from 'eslint/config'
|
||||||
|
import globals from 'globals'
|
||||||
|
import ts from 'typescript-eslint'
|
||||||
|
import svelteConfig from './svelte.config.js'
|
||||||
|
|
||||||
|
const gitignorePath = path.resolve(import.meta.dirname, '.gitignore')
|
||||||
|
|
||||||
|
export default defineConfig(
|
||||||
|
includeIgnoreFile(gitignorePath),
|
||||||
|
js.configs.recommended,
|
||||||
|
...ts.configs.recommended,
|
||||||
|
...svelte.configs.recommended,
|
||||||
|
prettier,
|
||||||
|
...svelte.configs.prettier,
|
||||||
|
{
|
||||||
|
languageOptions: { globals: { ...globals.browser, ...globals.node } },
|
||||||
|
rules: {
|
||||||
|
// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
|
||||||
|
// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
|
||||||
|
'no-undef': 'off',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
|
||||||
|
languageOptions: {
|
||||||
|
parserOptions: {
|
||||||
|
projectService: true,
|
||||||
|
extraFileExtensions: ['.svelte'],
|
||||||
|
parser: ts.parser,
|
||||||
|
svelteConfig,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
)
|
||||||
9
opencode.json
Normal file
9
opencode.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"$schema": "https://opencode.ai/config.json",
|
||||||
|
"mcp": {
|
||||||
|
"svelte": {
|
||||||
|
"type": "local",
|
||||||
|
"command": ["npx", "-y", "@sveltejs/mcp"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
42
package.json
Normal file
42
package.json
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
{
|
||||||
|
"name": "router-dash",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.1",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite dev",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"prepare": "svelte-kit sync || echo ''",
|
||||||
|
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||||
|
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||||
|
"lint": "prettier --check . && eslint .",
|
||||||
|
"format": "prettier --write ."
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"lucide-svelte": "^0.575.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/compat": "^2.0.2",
|
||||||
|
"@eslint/js": "^9.39.2",
|
||||||
|
"@sveltejs/adapter-static": "^3.0.10",
|
||||||
|
"@sveltejs/kit": "^2.50.2",
|
||||||
|
"@sveltejs/vite-plugin-svelte": "^6.2.4",
|
||||||
|
"@tailwindcss/vite": "^4.1.18",
|
||||||
|
"@types/node": "^24",
|
||||||
|
"eslint": "^9.39.2",
|
||||||
|
"eslint-config-prettier": "^10.1.8",
|
||||||
|
"eslint-plugin-svelte": "^3.14.0",
|
||||||
|
"globals": "^17.3.0",
|
||||||
|
"prettier": "^3.8.1",
|
||||||
|
"prettier-plugin-svelte": "^3.4.1",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.7.2",
|
||||||
|
"svelte": "^5.51.0",
|
||||||
|
"svelte-check": "^4.3.6",
|
||||||
|
"tailwindcss": "^4.1.18",
|
||||||
|
"typescript": "^5.9.3",
|
||||||
|
"typescript-eslint": "^8.54.0",
|
||||||
|
"vite": "^7.3.1",
|
||||||
|
"vite-plugin-devtools-json": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
13
src/app.d.ts
vendored
Normal file
13
src/app.d.ts
vendored
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||||
|
// for information about these interfaces
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
// interface Error {}
|
||||||
|
// interface Locals {}
|
||||||
|
// interface PageData {}
|
||||||
|
// interface PageState {}
|
||||||
|
// interface Platform {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {}
|
||||||
11
src/app.html
Normal file
11
src/app.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
|
%sveltekit.head%
|
||||||
|
</head>
|
||||||
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
<div style="display: contents">%sveltekit.body%</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
src/lib/assets/favicon.svg
Normal file
1
src/lib/assets/favicon.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
72
src/lib/components/DHCPLeases.svelte
Normal file
72
src/lib/components/DHCPLeases.svelte
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { NetworkInterface, LeaseWithInterface } from '$lib/types'
|
||||||
|
import { formatIP } from '$lib/utils/network'
|
||||||
|
import Card from '$lib/components/ui/Card.svelte'
|
||||||
|
import LeaseTable from '$lib/components/dhcp/LeaseTable.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
interfaces: NetworkInterface[]
|
||||||
|
}
|
||||||
|
|
||||||
|
let { interfaces }: Props = $props()
|
||||||
|
|
||||||
|
function calculateTimeRemaining(remainingMs: number): string {
|
||||||
|
if (remainingMs < 3600000) {
|
||||||
|
const mins = Math.floor(remainingMs / 60000)
|
||||||
|
return `${mins}m`
|
||||||
|
} else if (remainingMs < 86400000) {
|
||||||
|
const hours = Math.floor(remainingMs / 3600000)
|
||||||
|
return `${hours}h`
|
||||||
|
} else {
|
||||||
|
const days = Math.floor(remainingMs / 86400000)
|
||||||
|
return `${days}d`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const leases = $derived.by(() => {
|
||||||
|
const allLeases: LeaseWithInterface[] = []
|
||||||
|
const now = Date.now() * 1000
|
||||||
|
|
||||||
|
for (const iface of interfaces) {
|
||||||
|
if (iface.DHCPServer?.Leases) {
|
||||||
|
for (const lease of iface.DHCPServer.Leases) {
|
||||||
|
const expirationTime = lease.ExpirationRealtimeUSec || lease.ExpirationUSec
|
||||||
|
const isExpired = expirationTime < now
|
||||||
|
const remainingMs = (expirationTime - now) / 1000
|
||||||
|
|
||||||
|
allLeases.push({
|
||||||
|
...lease,
|
||||||
|
interfaceName: iface.Name,
|
||||||
|
isExpired,
|
||||||
|
timeRemaining: isExpired ? 'Expired' : calculateTimeRemaining(remainingMs),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return allLeases.sort((a, b) => {
|
||||||
|
const hostA = a.Hostname || ''
|
||||||
|
const hostB = b.Hostname || ''
|
||||||
|
if (hostA !== hostB) return hostA.localeCompare(hostB)
|
||||||
|
return formatIP(a.Address, 2).localeCompare(formatIP(b.Address, 2))
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const totalLeases = $derived(leases.length)
|
||||||
|
const activeLeases = $derived(leases.filter((l) => !l.isExpired).length)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-lg font-semibold text-gray-800">DHCP Leases</h2>
|
||||||
|
<p class="text-sm text-gray-500">{activeLeases} active of {totalLeases} total</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if totalLeases > 0}
|
||||||
|
<LeaseTable {leases} />
|
||||||
|
{:else}
|
||||||
|
<p class="py-4 text-center text-gray-500">No DHCP leases found</p>
|
||||||
|
{/if}
|
||||||
|
</Card>
|
||||||
11
src/lib/components/EmptyState.svelte
Normal file
11
src/lib/components/EmptyState.svelte
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
message: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { message }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="py-12 text-center">
|
||||||
|
<p class="text-gray-500">{message}</p>
|
||||||
|
</div>
|
||||||
64
src/lib/components/NetworkInterfaceCard.svelte
Normal file
64
src/lib/components/NetworkInterfaceCard.svelte
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { AddressFamily, type NetworkInterface } from '$lib/types'
|
||||||
|
import { formatMAC } from '$lib/utils/network'
|
||||||
|
import Card from '$lib/components/ui/Card.svelte'
|
||||||
|
import Code from '$lib/components/ui/Code.svelte'
|
||||||
|
import InterfaceHeader from '$lib/components/network/InterfaceHeader.svelte'
|
||||||
|
import AddressList from '$lib/components/network/AddressList.svelte'
|
||||||
|
import DNSList from '$lib/components/network/DNSList.svelte'
|
||||||
|
import InfoRow from '$lib/components/network/InfoRow.svelte'
|
||||||
|
import StatusBadge from '$lib/components/network/StatusBadge.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
iface: NetworkInterface
|
||||||
|
}
|
||||||
|
|
||||||
|
let { iface }: Props = $props()
|
||||||
|
|
||||||
|
const ipv4Addresses = $derived.by(
|
||||||
|
() => iface.Addresses?.filter((addr) => addr.Family === AddressFamily.IPv4) ?? [],
|
||||||
|
)
|
||||||
|
const ipv6Addresses = $derived.by(
|
||||||
|
() => iface.Addresses?.filter((addr) => addr.Family === AddressFamily.IPv6) ?? [],
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<InterfaceHeader {iface} />
|
||||||
|
|
||||||
|
<div class="space-y-3">
|
||||||
|
{#if iface.HardwareAddress}
|
||||||
|
<InfoRow label="MAC">
|
||||||
|
<Code value={formatMAC(iface.HardwareAddress)} />
|
||||||
|
</InfoRow>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if ipv4Addresses.length > 0}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-16 text-xs font-medium text-gray-500">IPv4:</span>
|
||||||
|
<AddressList addresses={ipv4Addresses} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if ipv6Addresses.length > 0}
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<span class="w-16 text-xs font-medium text-gray-500">IPv6:</span>
|
||||||
|
<AddressList addresses={ipv6Addresses} />
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<InfoRow label="MTU">
|
||||||
|
<span class="text-sm text-gray-700">{iface.MTU}</span>
|
||||||
|
</InfoRow>
|
||||||
|
|
||||||
|
{#if iface.OnlineState}
|
||||||
|
<InfoRow label="Online">
|
||||||
|
<StatusBadge state={iface.OnlineState} />
|
||||||
|
</InfoRow>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if iface.DNS && iface.DNS.length > 0}
|
||||||
|
<DNSList dnsServers={iface.DNS} />
|
||||||
|
{/if}
|
||||||
|
</Card>
|
||||||
15
src/lib/components/PageHeader.svelte
Normal file
15
src/lib/components/PageHeader.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
title: string
|
||||||
|
subtitle: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { title, subtitle }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<header class="border-b border-gray-200 bg-white shadow-sm">
|
||||||
|
<div class="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
|
||||||
|
<h1 class="text-2xl font-bold text-gray-900">{title}</h1>
|
||||||
|
<p class="mt-1 text-sm text-gray-500">{subtitle}</p>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
13
src/lib/components/PageLayout.svelte
Normal file
13
src/lib/components/PageLayout.svelte
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="min-h-screen bg-gray-50">
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
20
src/lib/components/dhcp/LeaseBadge.svelte
Normal file
20
src/lib/components/dhcp/LeaseBadge.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import Badge from '$lib/components/ui/Badge.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isExpired: boolean
|
||||||
|
timeRemaining: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { isExpired, timeRemaining }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if isExpired}
|
||||||
|
<Badge variant="red">
|
||||||
|
<span class="mr-1">●</span> Expired
|
||||||
|
</Badge>
|
||||||
|
{:else}
|
||||||
|
<Badge variant="green">
|
||||||
|
<span class="mr-1">●</span> Active ({timeRemaining})
|
||||||
|
</Badge>
|
||||||
|
{/if}
|
||||||
53
src/lib/components/dhcp/LeaseTable.svelte
Normal file
53
src/lib/components/dhcp/LeaseTable.svelte
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { LeaseWithInterface } from '$lib/types'
|
||||||
|
import { formatIP, formatMAC } from '$lib/utils/network'
|
||||||
|
import Table from '$lib/components/ui/Table.svelte'
|
||||||
|
import TableHead from '$lib/components/ui/TableHead.svelte'
|
||||||
|
import TableBody from '$lib/components/ui/TableBody.svelte'
|
||||||
|
import TableHeader from '$lib/components/ui/TableHeader.svelte'
|
||||||
|
import TableRow from '$lib/components/ui/TableRow.svelte'
|
||||||
|
import TableCell from '$lib/components/ui/TableCell.svelte'
|
||||||
|
import Code from '$lib/components/ui/Code.svelte'
|
||||||
|
import LeaseBadge from './LeaseBadge.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
leases: LeaseWithInterface[]
|
||||||
|
}
|
||||||
|
|
||||||
|
let { leases }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableHeader label="Hostname" />
|
||||||
|
<TableHeader label="IP Address" />
|
||||||
|
<TableHeader label="MAC Address" />
|
||||||
|
<TableHeader label="Interface" />
|
||||||
|
<TableHeader label="Status" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{#each leases as lease (formatIP(lease.Address, 2))}
|
||||||
|
<TableRow class={lease.isExpired ? 'opacity-50' : ''}>
|
||||||
|
<TableCell class="font-medium text-gray-900">
|
||||||
|
{lease.Hostname || 'Unknown'}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell mono class="text-gray-700">{formatIP(lease.Address, 2)}</TableCell>
|
||||||
|
<TableCell mono class="text-gray-500">
|
||||||
|
{#if lease.HardwareAddress && lease.HardwareAddressLength > 0}
|
||||||
|
{formatMAC(lease.HardwareAddress)}
|
||||||
|
{:else}
|
||||||
|
<span class="text-gray-400">-</span>
|
||||||
|
{/if}
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<Code value={lease.interfaceName} />
|
||||||
|
</TableCell>
|
||||||
|
<TableCell>
|
||||||
|
<LeaseBadge isExpired={lease.isExpired} timeRemaining={lease.timeRemaining} />
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
{/each}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
17
src/lib/components/network/AddressList.svelte
Normal file
17
src/lib/components/network/AddressList.svelte
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { InterfaceAddress } from '$lib/types'
|
||||||
|
import { formatIP } from '$lib/utils/network'
|
||||||
|
import Code from '$lib/components/ui/Code.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
addresses: InterfaceAddress[]
|
||||||
|
}
|
||||||
|
|
||||||
|
let { addresses }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex flex-col gap-1">
|
||||||
|
{#each addresses as addr (formatIP(addr.Address, addr.Family))}
|
||||||
|
<Code value="{formatIP(addr.Address, addr.Family)}/{addr.PrefixLength}" />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
20
src/lib/components/network/DNSList.svelte
Normal file
20
src/lib/components/network/DNSList.svelte
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { DNS } from '$lib/types'
|
||||||
|
import { formatIP } from '$lib/utils/network'
|
||||||
|
import Code from '$lib/components/ui/Code.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
dnsServers: DNS[]
|
||||||
|
}
|
||||||
|
|
||||||
|
let { dnsServers }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mt-4 border-t border-gray-100 pt-4">
|
||||||
|
<div class="mb-2 text-xs font-medium text-gray-500">DNS Servers:</div>
|
||||||
|
<div class="flex flex-wrap gap-2">
|
||||||
|
{#each dnsServers as dns (formatIP(dns.Address, dns.Family))}
|
||||||
|
<Code variant="blue" value={formatIP(dns.Address, dns.Family)} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
16
src/lib/components/network/InfoRow.svelte
Normal file
16
src/lib/components/network/InfoRow.svelte
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label: string
|
||||||
|
children: Snippet
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { label, children, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="flex items-center gap-2 {className}">
|
||||||
|
<span class="w-16 text-xs font-medium text-gray-500">{label}:</span>
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
27
src/lib/components/network/InterfaceHeader.svelte
Normal file
27
src/lib/components/network/InterfaceHeader.svelte
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { NetworkInterface } from '$lib/types'
|
||||||
|
import InterfaceIcon from './InterfaceIcon.svelte'
|
||||||
|
import StatusBadge from './StatusBadge.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
iface: NetworkInterface
|
||||||
|
}
|
||||||
|
|
||||||
|
let { iface }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="mb-4 flex items-center justify-between">
|
||||||
|
<div class="flex items-center gap-3">
|
||||||
|
<InterfaceIcon kind={iface.Kind ?? iface.Type} />
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-gray-800">{iface.Name}</h3>
|
||||||
|
{#if iface.Kind}
|
||||||
|
<span class="text-sm text-gray-500">{iface.Kind}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-right">
|
||||||
|
<StatusBadge state={iface.OperationalState} />
|
||||||
|
<div class="text-xs text-gray-500">{iface.CarrierState}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
22
src/lib/components/network/InterfaceIcon.svelte
Normal file
22
src/lib/components/network/InterfaceIcon.svelte
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { RefreshCcw, EthernetPort, Network, Tag, Shield, Wifi } from 'lucide-svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
kind: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { kind }: Props = $props()
|
||||||
|
|
||||||
|
const iconMap: Record<string, typeof RefreshCcw> = {
|
||||||
|
loopback: RefreshCcw,
|
||||||
|
ether: EthernetPort,
|
||||||
|
bridge: Network,
|
||||||
|
tun: Shield,
|
||||||
|
vlan: Tag,
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => console.log(kind))
|
||||||
|
const IconComponent = $derived(iconMap[kind] ?? Wifi)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<IconComponent class="h-6 w-6" />
|
||||||
67
src/lib/components/network/RoutesTable.svelte
Normal file
67
src/lib/components/network/RoutesTable.svelte
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { InterfaceRoute } from '$lib/types'
|
||||||
|
import { formatIP } from '$lib/utils/network'
|
||||||
|
import Card from '$lib/components/ui/Card.svelte'
|
||||||
|
import Table from '$lib/components/ui/Table.svelte'
|
||||||
|
import TableHead from '$lib/components/ui/TableHead.svelte'
|
||||||
|
import TableBody from '$lib/components/ui/TableBody.svelte'
|
||||||
|
import TableHeader from '$lib/components/ui/TableHeader.svelte'
|
||||||
|
import TableRow from '$lib/components/ui/TableRow.svelte'
|
||||||
|
import TableCell from '$lib/components/ui/TableCell.svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
routes: InterfaceRoute[]
|
||||||
|
}
|
||||||
|
|
||||||
|
let { routes }: Props = $props()
|
||||||
|
|
||||||
|
let expanded = $state(false)
|
||||||
|
|
||||||
|
const displayRoutes = $derived(expanded ? routes : routes.slice(0, 10))
|
||||||
|
const remainingCount = $derived(routes.length - 10)
|
||||||
|
|
||||||
|
function formatRouteDestination(route: InterfaceRoute): string {
|
||||||
|
return `${formatIP(route.Destination, route.Family)}/${route.DestinationPrefixLength}`
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatGateway(route: InterfaceRoute): string {
|
||||||
|
if (!route.Gateway) return '-'
|
||||||
|
return formatIP(route.Gateway, route.Family)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card class="mt-8">
|
||||||
|
<h2 class="mb-4 text-lg font-semibold text-gray-800">Routes</h2>
|
||||||
|
<Table>
|
||||||
|
<TableHead>
|
||||||
|
<TableRow>
|
||||||
|
<TableHeader label="Destination" />
|
||||||
|
<TableHeader label="Gateway" />
|
||||||
|
<TableHeader label="Table" />
|
||||||
|
<TableHeader label="Priority" />
|
||||||
|
</TableRow>
|
||||||
|
</TableHead>
|
||||||
|
<TableBody>
|
||||||
|
{#each displayRoutes as route (`${route.Family}-${route.Destination.join('.')}-${route.Gateway?.join('.') || 'nogw'}-${route.Priority}-${route.Table}`)}
|
||||||
|
<TableRow>
|
||||||
|
<TableCell mono>{formatRouteDestination(route)}</TableCell>
|
||||||
|
<TableCell mono>{formatGateway(route)}</TableCell>
|
||||||
|
<TableCell>{route.TableString}</TableCell>
|
||||||
|
<TableCell>{route.Priority}</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
{/each}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
{#if routes.length > 10}
|
||||||
|
<button
|
||||||
|
onclick={() => (expanded = !expanded)}
|
||||||
|
class="mt-2 ml-4 cursor-pointer text-sm text-blue-600 hover:text-blue-800 hover:underline"
|
||||||
|
>
|
||||||
|
{#if expanded}
|
||||||
|
Show less
|
||||||
|
{:else}
|
||||||
|
Show {remainingCount} more routes
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</Card>
|
||||||
12
src/lib/components/network/StatusBadge.svelte
Normal file
12
src/lib/components/network/StatusBadge.svelte
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { getStatusColor } from '$lib/utils/network'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
state: string
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { state, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span class="text-sm font-medium {getStatusColor(state)} {className}">{state}</span>
|
||||||
27
src/lib/components/ui/Badge.svelte
Normal file
27
src/lib/components/ui/Badge.svelte
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
variant?: 'default' | 'green' | 'red' | 'blue' | 'yellow'
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, variant = 'default', class: className = '' }: Props = $props()
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
default: 'bg-gray-100 text-gray-800',
|
||||||
|
green: 'bg-green-100 text-green-800',
|
||||||
|
red: 'bg-red-100 text-red-800',
|
||||||
|
blue: 'bg-blue-50 text-blue-700',
|
||||||
|
yellow: 'bg-yellow-100 text-yellow-800',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="inline-flex items-center rounded-full px-2 py-1 text-xs font-medium {variantClasses[
|
||||||
|
variant
|
||||||
|
]} {className}"
|
||||||
|
>
|
||||||
|
{@render children()}
|
||||||
|
</span>
|
||||||
14
src/lib/components/ui/Card.svelte
Normal file
14
src/lib/components/ui/Card.svelte
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="rounded-lg border border-gray-200 bg-white p-6 shadow-md {className}">
|
||||||
|
{@render children()}
|
||||||
|
</div>
|
||||||
15
src/lib/components/ui/Code.svelte
Normal file
15
src/lib/components/ui/Code.svelte
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
value: string
|
||||||
|
variant?: 'default' | 'blue'
|
||||||
|
}
|
||||||
|
|
||||||
|
let { value, variant = 'default' }: Props = $props()
|
||||||
|
|
||||||
|
const variantClasses = {
|
||||||
|
default: 'bg-gray-100',
|
||||||
|
blue: 'bg-blue-50 text-blue-700',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<code class="rounded px-2 py-1 font-mono text-xs {variantClasses[variant]}">{value}</code>
|
||||||
16
src/lib/components/ui/Table.svelte
Normal file
16
src/lib/components/ui/Table.svelte
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="overflow-x-auto {className}">
|
||||||
|
<table class="min-w-full divide-y divide-gray-200">
|
||||||
|
{@render children()}
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
13
src/lib/components/ui/TableBody.svelte
Normal file
13
src/lib/components/ui/TableBody.svelte
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tbody class="divide-y divide-gray-200">
|
||||||
|
{@render children()}
|
||||||
|
</tbody>
|
||||||
17
src/lib/components/ui/TableCell.svelte
Normal file
17
src/lib/components/ui/TableCell.svelte
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
class?: string
|
||||||
|
mono?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, class: className = '', mono = false }: Props = $props()
|
||||||
|
|
||||||
|
const fontClass = $derived(mono ? 'font-mono' : '')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<td class="px-4 py-2 text-sm {fontClass} {className}">
|
||||||
|
{@render children()}
|
||||||
|
</td>
|
||||||
13
src/lib/components/ui/TableHead.svelte
Normal file
13
src/lib/components/ui/TableHead.svelte
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<thead>
|
||||||
|
{@render children()}
|
||||||
|
</thead>
|
||||||
12
src/lib/components/ui/TableHeader.svelte
Normal file
12
src/lib/components/ui/TableHeader.svelte
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
label: string
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { label, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase {className}">
|
||||||
|
{label}
|
||||||
|
</th>
|
||||||
14
src/lib/components/ui/TableRow.svelte
Normal file
14
src/lib/components/ui/TableRow.svelte
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import type { Snippet } from 'svelte'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: Snippet
|
||||||
|
class?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
let { children, class: className = '' }: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<tr class={className}>
|
||||||
|
{@render children()}
|
||||||
|
</tr>
|
||||||
1
src/lib/index.ts
Normal file
1
src/lib/index.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
// place files you want to import through the `$lib` alias in this folder.
|
||||||
301
src/lib/types.ts
Normal file
301
src/lib/types.ts
Normal file
@@ -0,0 +1,301 @@
|
|||||||
|
export enum AddressFamily {
|
||||||
|
IPv4 = 2,
|
||||||
|
IPv6 = 10,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type IPAddress = number[] // Array of byte values
|
||||||
|
|
||||||
|
export enum ConfigSource {
|
||||||
|
Static = 'static',
|
||||||
|
Foreign = 'foreign',
|
||||||
|
DHCPv4 = 'DHCPv4',
|
||||||
|
DHCPv6 = 'DHCPv6',
|
||||||
|
DHCPPD = 'DHCP-PD',
|
||||||
|
NDisc = 'NDisc',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ConfigState {
|
||||||
|
Configured = 'configured',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ScopeString {
|
||||||
|
Host = 'host',
|
||||||
|
Link = 'link',
|
||||||
|
Global = 'global',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ProtocolString {
|
||||||
|
Kernel = 'kernel',
|
||||||
|
Boot = 'boot',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TypeString {
|
||||||
|
Local = 'local',
|
||||||
|
Broadcast = 'broadcast',
|
||||||
|
Unicast = 'unicast',
|
||||||
|
Anycast = 'anycast',
|
||||||
|
Multicast = 'multicast',
|
||||||
|
Unreachable = 'unreachable',
|
||||||
|
Table = 'table',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TableString {
|
||||||
|
Local = 'local',
|
||||||
|
Main = 'main',
|
||||||
|
Default = 'default',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TableStringType = TableString | string
|
||||||
|
|
||||||
|
export enum AdministrativeState {
|
||||||
|
Unmanaged = 'unmanaged',
|
||||||
|
Configured = 'configured',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum OperationalState {
|
||||||
|
Carrier = 'carrier',
|
||||||
|
Routable = 'routable',
|
||||||
|
Enslaved = 'enslaved',
|
||||||
|
NoCarrier = 'no-carrier',
|
||||||
|
Degraded = 'degraded',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum CarrierState {
|
||||||
|
Carrier = 'carrier',
|
||||||
|
Enslaved = 'enslaved',
|
||||||
|
NoCarrier = 'no-carrier',
|
||||||
|
DegradedCarrier = 'degraded-carrier',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum AddressState {
|
||||||
|
Off = 'off',
|
||||||
|
Routable = 'routable',
|
||||||
|
Degraded = 'degraded',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum OnlineState {
|
||||||
|
Online = 'online',
|
||||||
|
Offline = 'offline',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ActivationPolicy {
|
||||||
|
Up = 'up',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum DNSEnabled {
|
||||||
|
Yes = 'yes',
|
||||||
|
No = 'no',
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum InterfaceType {
|
||||||
|
Loopback = 'loopback',
|
||||||
|
Ether = 'ether',
|
||||||
|
Bridge = 'bridge',
|
||||||
|
Vlan = 'vlan',
|
||||||
|
None = 'none',
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DNS {
|
||||||
|
Family: AddressFamily
|
||||||
|
Address: IPAddress
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
ConfigProvider?: IPAddress
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DNSSetting {
|
||||||
|
LLMNR?: DNSEnabled
|
||||||
|
MDNS?: DNSEnabled
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InterfaceAddress {
|
||||||
|
Family: AddressFamily
|
||||||
|
Address: IPAddress
|
||||||
|
PrefixLength: number
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
ConfigProvider?: IPAddress
|
||||||
|
Scope?: number
|
||||||
|
ScopeString?: ScopeString
|
||||||
|
Flags: number
|
||||||
|
FlagsString: string | null
|
||||||
|
Broadcast?: IPAddress
|
||||||
|
PreferredLifetimeUSec?: number
|
||||||
|
PreferredLifetimeUsec?: number // Note: both variants exist
|
||||||
|
ValidLifetimeUSec?: number
|
||||||
|
ValidLifetimeUsec?: number // Note: both variants exist
|
||||||
|
ConfigState?: ConfigState
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface InterfaceRoute {
|
||||||
|
Family: AddressFamily
|
||||||
|
Destination: IPAddress
|
||||||
|
DestinationPrefixLength: number
|
||||||
|
Gateway?: IPAddress
|
||||||
|
PreferredSource?: IPAddress
|
||||||
|
TOS: number
|
||||||
|
Scope: number
|
||||||
|
Protocol: number
|
||||||
|
Type: number
|
||||||
|
Priority: number
|
||||||
|
Table: number
|
||||||
|
Flags: number
|
||||||
|
NextHopID?: number
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
ConfigProvider?: IPAddress
|
||||||
|
ScopeString: ScopeString
|
||||||
|
ProtocolString: ProtocolString | string
|
||||||
|
TypeString: TypeString | string
|
||||||
|
TableString: TableStringType
|
||||||
|
Preference: number
|
||||||
|
FlagsString: string
|
||||||
|
ConfigState?: ConfigState
|
||||||
|
LifetimeUSec?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NextHop {
|
||||||
|
ID: number
|
||||||
|
Family: AddressFamily
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
ConfigProvider: IPAddress
|
||||||
|
Gateway: IPAddress
|
||||||
|
Flags: number
|
||||||
|
FlagsString: string
|
||||||
|
Protocol: number
|
||||||
|
ProtocolString: string
|
||||||
|
Blackhole: boolean
|
||||||
|
ConfigState?: ConfigState
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPv4Lease {
|
||||||
|
LeaseTimestampUSec: number
|
||||||
|
Timeout1USec: number
|
||||||
|
Timeout2USec: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPv4Client {
|
||||||
|
Lease: DHCPv4Lease
|
||||||
|
ClientIdentifier: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPv6Prefix {
|
||||||
|
Prefix: IPAddress
|
||||||
|
PrefixLength: number
|
||||||
|
PreferredLifetimeUSec: number
|
||||||
|
ValidLifetimeUSec: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPv6Lease {
|
||||||
|
Timeout1USec: number
|
||||||
|
Timeout2USec: number
|
||||||
|
LeaseTimestampUSec: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPv6Client {
|
||||||
|
Lease: DHCPv6Lease
|
||||||
|
Prefixes: DHCPv6Prefix[]
|
||||||
|
DUID: number[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPLease {
|
||||||
|
ClientId: number[]
|
||||||
|
Address: IPAddress
|
||||||
|
Hostname?: string
|
||||||
|
HardwareAddressType: number
|
||||||
|
HardwareAddressLength: number
|
||||||
|
HardwareAddress: IPAddress
|
||||||
|
ExpirationUSec: number
|
||||||
|
ExpirationRealtimeUSec: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface StaticLease {
|
||||||
|
ClientId: number[]
|
||||||
|
Address: IPAddress
|
||||||
|
HardwareAddressType: number
|
||||||
|
HardwareAddressLength: number
|
||||||
|
HardwareAddress: IPAddress
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DHCPServer {
|
||||||
|
PoolOffset: number
|
||||||
|
PoolSize: number
|
||||||
|
Leases?: DHCPLease[]
|
||||||
|
StaticLeases?: StaticLease[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NetworkInterface {
|
||||||
|
Index: number
|
||||||
|
Name: string
|
||||||
|
Kind?: string
|
||||||
|
Type: InterfaceType
|
||||||
|
Driver?: string
|
||||||
|
Flags: number
|
||||||
|
FlagsString: string
|
||||||
|
KernelOperationalState: number
|
||||||
|
KernelOperationalStateString: string
|
||||||
|
MTU: number
|
||||||
|
MinimumMTU: number
|
||||||
|
MaximumMTU: number
|
||||||
|
HardwareAddress?: IPAddress
|
||||||
|
PermanentHardwareAddress?: IPAddress
|
||||||
|
BroadcastAddress?: IPAddress
|
||||||
|
IPv6LinkLocalAddress?: IPAddress
|
||||||
|
MasterInterfaceIndex?: number
|
||||||
|
AdministrativeState: AdministrativeState
|
||||||
|
OperationalState: OperationalState
|
||||||
|
CarrierState: CarrierState
|
||||||
|
AddressState: AddressState
|
||||||
|
IPv4AddressState: AddressState
|
||||||
|
IPv6AddressState: AddressState
|
||||||
|
OnlineState?: OnlineState
|
||||||
|
NetworkFile?: string
|
||||||
|
NetworkFileDropins?: string[]
|
||||||
|
RequiredForOnline?: boolean
|
||||||
|
RequiredFamilyForOnline?: 'any'
|
||||||
|
ActivationPolicy?: ActivationPolicy
|
||||||
|
LinkFile?: string
|
||||||
|
NetDevFile?: string
|
||||||
|
NetDevFileDropins?: string[]
|
||||||
|
Path?: string
|
||||||
|
Vendor?: string
|
||||||
|
Model?: string
|
||||||
|
DNS?: DNS[]
|
||||||
|
DNSSettings?: DNSSetting[]
|
||||||
|
Addresses?: InterfaceAddress[]
|
||||||
|
Routes?: InterfaceRoute[]
|
||||||
|
NextHops?: NextHop[]
|
||||||
|
DHCPv4Client?: DHCPv4Client
|
||||||
|
DHCPv6Client?: DHCPv6Client
|
||||||
|
DHCPServer?: DHCPServer
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface RoutingPolicyRule {
|
||||||
|
Family: AddressFamily
|
||||||
|
Protocol: number
|
||||||
|
ProtocolString: ProtocolString | string
|
||||||
|
TOS: number
|
||||||
|
Type: number
|
||||||
|
TypeString: TypeString | string
|
||||||
|
IPProtocol: number
|
||||||
|
IPProtocolString: ProtocolString | string
|
||||||
|
Priority: number
|
||||||
|
FirewallMark: number
|
||||||
|
FirewallMask: number
|
||||||
|
Table?: number
|
||||||
|
TableString: TableStringType
|
||||||
|
Invert: boolean
|
||||||
|
ConfigSource: ConfigSource
|
||||||
|
ConfigState?: ConfigState
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface NetworkStatus {
|
||||||
|
Interfaces: NetworkInterface[]
|
||||||
|
Routes: InterfaceRoute[]
|
||||||
|
RoutingPolicyRules: RoutingPolicyRule[]
|
||||||
|
}
|
||||||
|
|
||||||
|
// DHCP Lease with interface context
|
||||||
|
export interface LeaseWithInterface extends DHCPLease {
|
||||||
|
interfaceName: string
|
||||||
|
isExpired: boolean
|
||||||
|
timeRemaining: string
|
||||||
|
}
|
||||||
54
src/lib/utils/network.ts
Normal file
54
src/lib/utils/network.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import type { IPAddress, AddressFamily } from '$lib/types'
|
||||||
|
|
||||||
|
export function formatIP(address: IPAddress, family: AddressFamily): string {
|
||||||
|
if (family === 2) {
|
||||||
|
// IPv4
|
||||||
|
return address.slice(0, 4).join('.')
|
||||||
|
} else if (family === 10) {
|
||||||
|
// IPv6
|
||||||
|
const hexParts: string[] = []
|
||||||
|
for (let i = 0; i < 16; i += 2) {
|
||||||
|
const hex = ((address[i] << 8) | address[i + 1]).toString(16)
|
||||||
|
hexParts.push(hex)
|
||||||
|
}
|
||||||
|
// Compress zeros
|
||||||
|
let ipv6 = hexParts.join(':')
|
||||||
|
// Simple compression of leading zeros in each group
|
||||||
|
ipv6 = ipv6.replace(/:0+/g, ':')
|
||||||
|
// Compress longest run of zeros
|
||||||
|
const zeroRuns = ipv6.match(/:(?::0*)+/g)
|
||||||
|
if (zeroRuns) {
|
||||||
|
const longest = zeroRuns.reduce((a, b) => (a.length > b.length ? a : b))
|
||||||
|
ipv6 = ipv6.replace(longest, '::')
|
||||||
|
}
|
||||||
|
return ipv6
|
||||||
|
}
|
||||||
|
return address.join('.')
|
||||||
|
}
|
||||||
|
|
||||||
|
export function formatMAC(address: IPAddress): string {
|
||||||
|
return address
|
||||||
|
.slice(0, 6)
|
||||||
|
.map((b) => b.toString(16).padStart(2, '0'))
|
||||||
|
.join(':')
|
||||||
|
.toUpperCase()
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStatusColor(state: string): string {
|
||||||
|
switch (state) {
|
||||||
|
case 'routable':
|
||||||
|
case 'online':
|
||||||
|
case 'carrier':
|
||||||
|
return 'text-green-600'
|
||||||
|
case 'degraded':
|
||||||
|
return 'text-yellow-600'
|
||||||
|
case 'no-carrier':
|
||||||
|
case 'offline':
|
||||||
|
case 'off':
|
||||||
|
return 'text-red-600'
|
||||||
|
case 'enslaved':
|
||||||
|
return 'text-blue-600'
|
||||||
|
default:
|
||||||
|
return 'text-gray-600'
|
||||||
|
}
|
||||||
|
}
|
||||||
9
src/routes/+layout.svelte
Normal file
9
src/routes/+layout.svelte
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import './layout.css'
|
||||||
|
import favicon from '$lib/assets/favicon.svg'
|
||||||
|
|
||||||
|
let { children } = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head><link rel="icon" href={favicon} /></svelte:head>
|
||||||
|
{@render children()}
|
||||||
51
src/routes/+page.svelte
Normal file
51
src/routes/+page.svelte
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { type NetworkInterface, InterfaceType } from '$lib/types'
|
||||||
|
import NetworkInterfaceCard from '$lib/components/NetworkInterfaceCard.svelte'
|
||||||
|
import DHCPLeases from '$lib/components/DHCPLeases.svelte'
|
||||||
|
import PageLayout from '$lib/components/PageLayout.svelte'
|
||||||
|
import PageHeader from '$lib/components/PageHeader.svelte'
|
||||||
|
import RoutesTable from '$lib/components/network/RoutesTable.svelte'
|
||||||
|
import EmptyState from '$lib/components/EmptyState.svelte'
|
||||||
|
|
||||||
|
const { data } = $props()
|
||||||
|
|
||||||
|
const allRoutes = $derived(
|
||||||
|
data.networkStatus.Interfaces.flatMap((iface: NetworkInterface) => iface.Routes || []).concat(
|
||||||
|
data.networkStatus.Routes,
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const displayedInterfaces = $derived(
|
||||||
|
data.networkStatus.Interfaces.filter(
|
||||||
|
({ Type: type }) => ![InterfaceType.Loopback, InterfaceType.Bridge].includes(type),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>Router Dash</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<PageLayout>
|
||||||
|
<PageHeader title="Router Dash" subtitle="Router network status" />
|
||||||
|
|
||||||
|
<main class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
|
||||||
|
{#if data.networkStatus}
|
||||||
|
<div class="grid grid-cols-1 gap-6 md:grid-cols-2">
|
||||||
|
{#each displayedInterfaces as iface (iface.Name)}
|
||||||
|
<NetworkInterfaceCard {iface} />
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if allRoutes.length > 0}
|
||||||
|
<RoutesTable routes={allRoutes} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<div class="mt-8">
|
||||||
|
<DHCPLeases interfaces={data.networkStatus.Interfaces} />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<EmptyState message="No network data available" />
|
||||||
|
{/if}
|
||||||
|
</main>
|
||||||
|
</PageLayout>
|
||||||
9
src/routes/+page.ts
Normal file
9
src/routes/+page.ts
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
import type { NetworkStatus } from '$lib/types'
|
||||||
|
import networkData from '$lib/network-status.json'
|
||||||
|
import type { PageLoad } from './$types'
|
||||||
|
|
||||||
|
export const load: PageLoad = async () => {
|
||||||
|
return {
|
||||||
|
networkStatus: networkData as NetworkStatus,
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/routes/layout.css
Normal file
1
src/routes/layout.css
Normal file
@@ -0,0 +1 @@
|
|||||||
|
@import 'tailwindcss';
|
||||||
3
static/robots.txt
Normal file
3
static/robots.txt
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
# allow crawling everything by default
|
||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
6
svelte.config.js
Normal file
6
svelte.config.js
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import adapter from '@sveltejs/adapter-static'
|
||||||
|
|
||||||
|
/** @type {import('@sveltejs/kit').Config} */
|
||||||
|
const config = { kit: { adapter: adapter() } }
|
||||||
|
|
||||||
|
export default config
|
||||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"extends": "./.svelte-kit/tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"rewriteRelativeImportExtensions": true,
|
||||||
|
"allowJs": true,
|
||||||
|
"checkJs": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"forceConsistentCasingInFileNames": true,
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"strict": true,
|
||||||
|
"moduleResolution": "bundler"
|
||||||
|
}
|
||||||
|
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||||
|
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||||
|
//
|
||||||
|
// To make changes to top-level options such as include and exclude, we recommend extending
|
||||||
|
// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
|
||||||
|
}
|
||||||
6
vite.config.ts
Normal file
6
vite.config.ts
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
import devtoolsJson from 'vite-plugin-devtools-json'
|
||||||
|
import tailwindcss from '@tailwindcss/vite'
|
||||||
|
import { sveltekit } from '@sveltejs/kit/vite'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
|
export default defineConfig({ plugins: [tailwindcss(), sveltekit(), devtoolsJson()] })
|
||||||
Reference in New Issue
Block a user