Initial commit: Nexus NIIX website with Svelte + Alpine.JS + picoCSS

🚀 Website Stack:
- SvelteKit for static site generation
- Alpine.JS for interactivity
- PicoCSS for lightweight styling

📁 Features:
- Home page with hero and feature cards
- Documentation system with markdown support
- Responsive navigation
- Dark mode by default

🔧 Configuration:
- Cloudflare Pages deployment workflow
- Wrangler.toml for Pages config
- GitHub Actions for CI/CD

📝 Content:
- Placeholder documentation in static/docs/
- Ready for content migration from nexus-forge

📦 Tech Stack:
- Node.js >= 18.0.0
- Vite for building
- Zero external runtime dependencies
This commit is contained in:
Markus Maiwald 2026-02-16 10:38:33 +01:00
commit f30be085ff
Signed by: markus
GPG Key ID: 07DDBEA3CBDC090A
14 changed files with 941 additions and 0 deletions

46
.github/workflows/deploy.yml vendored Normal file
View File

@ -0,0 +1,46 @@
name: Deploy to Cloudflare Pages
on:
push:
branches: [main]
workflow_dispatch:
permissions:
contents: read
pages: write
id-token: write
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '20'
cache: 'npm'
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build
- name: Upload artifact
uses: actions/upload-pages-artifact@v3
with:
path: '.svelte-kit/output/client'
deploy:
needs: build
runs-on: ubuntu-latest
environment:
name: github-pages
url: ${{ steps.deployment.outputs.page_url }}
steps:
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4

10
.gitignore vendored Normal file
View File

@ -0,0 +1,10 @@
node_modules
.svelte-kit
build
.output
.env
.env.*
!.env.example
dist
.DS_Store
*.log

105
README.md Normal file
View File

@ -0,0 +1,105 @@
# Nexus NIIX Website
Official website for Nexus NIIX - Sovereign Technology for the Future.
## Stack
- **SvelteKit** - Static site generation
- **Alpine.JS** - Client-side interactivity
- **PicoCSS** - Lightweight CSS framework
## Development
### Prerequisites
- Node.js >= 18.0.0
- npm or pnpm
### Installation
```bash
git clone https://git.sovereign-society.org/nexus/nexus-niix-website.git
cd nexus-niix-website
npm install
```
### Development Server
```bash
npm run dev
```
Open http://localhost:5173 in your browser.
### Build
```bash
npm run build
```
### Preview
```bash
npm run preview
```
## Project Structure
```
nexus-niix-website/
├── src/
│ ├── routes/ # SvelteKit routes
│ │ ├── +layout.svelte
│ │ ├── +page.svelte
│ │ └── docs/
│ ├── lib/ # Shared components
│ └── app.html # HTML template
├── static/
│ ├── docs/ # Documentation markdown files
│ ├── pico.css # PicoCSS styles
│ └── alpine.js # Alpine.js library
├── package.json
├── svelte.config.js
├── vite.config.js
└── wrangler.toml # Cloudflare Pages config
```
## Documentation
Documentation is written in Markdown and located in `static/docs/`.
To add a new doc:
1. Create a `.md` file in `static/docs/`
2. Add it to the navigation in `src/routes/docs/+page.svelte`
3. The page will be automatically available at `/docs/your-file-name`
## Deployment
### Cloudflare Pages (Automatic)
Push to `main` branch triggers automatic deployment to Cloudflare Pages.
Manual deployment:
```bash
npm run build
npx wrangler pages deploy .svelte-kit/output/client
```
### Manual Build
```bash
npm run build
# Output is in .svelte-kit/output/client
```
## License
This project is part of the Nexus Organization and is licensed under the **LSL-1.0** (Libertaria Source License 1.0).
See [LICENSE](https://git.sovereign-society.org/nexus/nexus/-/raw/main/LICENSE) for details.
## Links
- **Repository**: https://git.sovereign-society.org/nexus/nexus-niix-website
- **Issues**: https://git.sovereign-society.org/nexus/nexus-niix-website/-/issues
- **Organization**: https://git.sovereign-society.org/nexus

27
package.json Normal file
View File

@ -0,0 +1,27 @@
{
"name": "nexus-niix-website",
"version": "0.1.0",
"description": "Nexus NIIX Official Website - Svelte + Alpine.JS + picoCSS",
"type": "module",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"alpinejs": "^3.13.3",
"marked": "^11.1.1"
},
"devDependencies": {
"@sveltejs/adapter-auto": "^3.1.1",
"@sveltejs/kit": "^2.4.3",
"@sveltejs/vite-plugin-svelte": "^3.0.1",
"picocolors": "^1.0.0",
"picocss": "^1.0.1",
"svelte": "^4.2.8",
"vite": "^5.0.12"
},
"engines": {
"node": ">=18.0.0"
}
}

185
src/app.html Normal file
View File

@ -0,0 +1,185 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%sveltekit.assets%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Nexus NIIX - Sovereign Technology for the Future" />
<title>Nexus NIIX</title>
<!-- PicoCSS for styling -->
<link rel="stylesheet" href="%sveltekit.assets%/pico.css" />
<!-- Alpine.JS for interactivity -->
<script defer src="%sveltekit.assets%/alpine.js" ></script>
<!-- Custom styles -->
<style>
:root {
--primary: #6366f1;
--primary-hover: #4f46e5;
--background: #0f172a;
--background-alt: #1e293b;
--text: #e2e8f0;
--text-muted: #94a3b8;
--border: #334155;
}
body {
background: var(--background);
color: var(--text);
font-family: system-ui, -apple-system, sans-serif;
}
.hero {
background: linear-gradient(135deg, var(--background-alt) 0%, var(--background) 100%);
padding: 4rem 1rem;
text-align: center;
}
.hero h1 {
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 1.25rem;
color: var(--text-muted);
max-width: 600px;
margin: 0 auto 2rem;
}
.nav-bar {
background: var(--background-alt);
border-bottom: 1px solid var(--border);
padding: 1rem;
position: sticky;
top: 0;
z-index: 100;
}
.nav-bar nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-bar a {
color: var(--text);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 0.5rem;
transition: background 0.2s;
}
.nav-bar a:hover {
background: var(--border);
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.card {
background: var(--background-alt);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 1.5rem;
transition: transform 0.2s, border-color 0.2s;
}
.card:hover {
transform: translateY(-2px);
border-color: var(--primary);
}
.card h3 {
margin-bottom: 0.5rem;
color: var(--primary);
}
.card p {
color: var(--text-muted);
font-size: 0.875rem;
}
footer {
background: var(--background-alt);
border-top: 1px solid var(--border);
padding: 2rem 1rem;
text-align: center;
color: var(--text-muted);
}
article {
background: var(--background-alt);
border: 1px solid var(--border);
border-radius: 1rem;
padding: 2rem;
margin: 2rem 0;
}
article h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
article code {
background: var(--background);
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
font-size: 0.875em;
}
article pre {
background: var(--background);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
}
.btn {
display: inline-block;
background: var(--primary);
color: white;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
text-decoration: none;
font-weight: 600;
transition: background 0.2s;
}
.btn:hover {
background: var(--primary-hover);
}
.btn-outline {
background: transparent;
border: 2px solid var(--primary);
color: var(--primary);
}
.btn-outline:hover {
background: var(--primary);
color: white;
}
</style>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html>

49
src/routes/+layout.svelte Normal file
View File

@ -0,0 +1,49 @@
<script>
import { page } from '$app/stores';
const navItems = [
{ href: '/', label: 'Home' },
{ href: '/docs', label: 'Docs' },
{ href: '/download', label: 'Download' },
{ href: '/community', label: 'Community' }
];
</script>
<div class="nav-bar">
<nav>
<a href="/" style="font-weight: bold; font-size: 1.25rem;">
⚡ Nexus NIIX
</a>
<div>
{#each navItems as item}
<a
href={item.href}
class:aria-current={$page.url.pathname === item.href}
>
{item.label}
</a>
{/each}
</div>
</nav>
</div>
<slot />
<footer>
<p>
© 2026 Nexus Organization.
<a href="https://git.sovereign-society.org/nexus" style="color: var(--primary);">
Open Source
</a>
<a href="/docs/legal" style="color: var(--text-muted);">
License
</a>
</p>
</footer>
<style>
a[aria-current="page"] {
background: var(--border);
}
</style>

101
src/routes/+page.svelte Normal file
View File

@ -0,0 +1,101 @@
<script>
const features = [
{
icon: '🔐',
title: 'Sovereign by Design',
description: 'No external dependencies, no vendor lock-in. Your data, your rules, your keys.'
},
{
icon: '🌐',
title: 'Mesh Networking',
description: 'Decentralized peer-to-peer communication without central points of failure.'
},
{
icon: '📦',
title: 'Content Addressed',
description: 'Every piece of data has a cryptographic identity. Verify, deduplicate, trust.'
},
{
icon: '⚡',
title: 'High Performance',
description: 'Native Zig implementation optimized for speed and minimal footprint.'
},
{
icon: '🔧',
title: 'Modular Baukasten',
description: 'Compile only what you need. From IoT sensors to home servers to cloud nodes.'
},
{
icon: '🌱',
title: 'Sustainable',
description: 'Kinetic Credits economics reward contribution. No charity, engineered reciprocity.'
}
];
</script>
<svelte:head>
<title>Nexus NIIX - Sovereign Technology for the Future</title>
</svelte:head>
<div class="hero">
<h1>Nexus NIIX</h1>
<p>
Sovereign technology for the future.
Decentralized, content-addressed, community-powered.
</p>
<div>
<a href="/download" class="btn">Get Started</a>
<a href="/docs" class="btn btn-outline" style="margin-left: 1rem;">Read Docs</a>
</div>
</div>
<div class="container">
<section>
<h2 style="text-align: center; margin-bottom: 2rem;">Why Nexus NIIX?</h2>
<div class="grid">
{#each features as feature}
<article class="card">
<h3>{feature.icon} {feature.title}</h3>
<p>{feature.description}</p>
</article>
{/each}
</div>
</section>
<section style="margin-top: 4rem;">
<h2 style="text-align: center; margin-bottom: 2rem;">The Ecosystem</h2>
<div class="grid">
<article class="card">
<h3>📦 NexFS</h3>
<p>Native Zig flash filesystem. From IoT sensors to Chapter nodes.</p>
<a href="/docs/nexfs" style="color: var(--primary);">Learn more →</a>
</article>
<article class="card">
<h3>🔧 Rumpk</h3>
<p>Runtime package manager. Secure, signed, content-addressed packages.</p>
<a href="/docs/rumpk" style="color: var(--primary);">Learn more →</a>
</article>
<article class="card">
<h3>📦 Nip</h3>
<p>Package format with dependency resolution and cryptographic verification.</p>
<a href="/docs/nip" style="color: var(--primary);">Learn more →</a>
</article>
<article class="card">
<h3>🌐 Nexus</h3>
<p>Core utilities and orchestration for sovereign systems.</p>
<a href="/docs/nexus" style="color: var(--primary);">Learn more →</a>
</article>
</div>
</section>
<section style="margin-top: 4rem; text-align: center;">
<h2>Ready to go sovereign?</h2>
<p style="color: var(--text-muted); margin-bottom: 2rem;">
Join thousands of developers building the decentralized future.
</p>
<a href="/download" class="btn">Download NexusOS</a>
</section>
</div>

View File

@ -0,0 +1,230 @@
<script>
import { onMount } from 'svelte';
let content = '';
let loading = true;
let error = null;
// Alpine.JS component for doc navigation
const docNavigation = {
sidebarOpen: false,
activeSection: 'getting-started',
sections: [
{ id: 'getting-started', label: 'Getting Started' },
{ id: 'installation', label: 'Installation' },
{ id: 'configuration', label: 'Configuration' },
{ id: 'usage', label: 'Usage' },
{ id: 'architecture', label: 'Architecture' },
{ id: 'api', label: 'API Reference' }
],
toggleSidebar() {
this.sidebarOpen = !this.sidebarOpen;
},
scrollToSection(id) {
const element = document.getElementById(`section-${id}`);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
this.sidebarOpen = false;
}
}
};
async function loadDoc() {
loading = true;
try {
const response = await fetch('/docs/index.md');
if (response.ok) {
content = await response.text();
} else {
content = '# Documentation\n\nWelcome to Nexus NIIX documentation.\n\nSelect a topic from the sidebar to get started.';
}
} catch (e) {
error = e.message;
content = '# Error\n\nFailed to load documentation.';
} finally {
loading = false;
}
}
onMount(() => {
loadDoc();
});
</script>
<svelte:head>
<title>Documentation - Nexus NIIX</title>
</svelte:head>
<div
class="docs-container"
x-data={JSON.stringify(docNavigation)}
>
<!-- Mobile sidebar toggle -->
<button
class="sidebar-toggle"
@click="toggleSidebar()"
aria-label="Toggle sidebar"
>
</button>
<!-- Sidebar -->
<aside class="sidebar" :class="{ open: sidebarOpen }">
<h3>Documentation</h3>
<nav>
{#each docNavigation.sections as section}
<button
@click="scrollToSection('{section.id}')"
:class="{ active: activeSection === '{section.id}' }"
>
{section.label}
</button>
{/each}
</nav>
<div class="sidebar-footer">
<a href="https://git.sovereign-society.org/nexus" target="_blank">
Git Repository
</a>
<a href="https://git.sovereign-society.org/nexus/nexus/-/issues" target="_blank">
Report Issue
</a>
</div>
</aside>
<!-- Main content -->
<main class="docs-content">
{#if loading}
<div class="loading">
<p>Loading documentation...</p>
</div>
{:else if error}
<div class="error">
<p>Error: {error}</p>
</div>
{:else}
<article>
{@html content}
</article>
{/if}
</main>
</div>
<style>
.docs-container {
display: flex;
min-height: calc(100vh - 60px);
}
.sidebar-toggle {
display: none;
position: fixed;
top: 70px;
left: 1rem;
z-index: 1000;
background: var(--primary);
color: white;
border: none;
padding: 0.5rem 0.75rem;
border-radius: 0.5rem;
cursor: pointer;
}
.sidebar {
width: 280px;
background: var(--background-alt);
border-right: 1px solid var(--border);
padding: 1.5rem;
position: sticky;
top: 60px;
height: calc(100vh - 60px);
overflow-y: auto;
flex-shrink: 0;
}
.sidebar h3 {
margin-bottom: 1rem;
color: var(--primary);
}
.sidebar nav {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.sidebar button {
background: transparent;
border: none;
color: var(--text);
text-align: left;
padding: 0.5rem 0.75rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background 0.2s;
}
.sidebar button:hover {
background: var(--border);
}
.sidebar button.active {
background: var(--primary);
color: white;
}
.sidebar-footer {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.sidebar-footer a {
color: var(--text-muted);
font-size: 0.875rem;
text-decoration: none;
}
.sidebar-footer a:hover {
color: var(--primary);
}
.docs-content {
flex: 1;
padding: 2rem;
max-width: 800px;
}
.loading, .error {
text-align: center;
padding: 4rem;
color: var(--text-muted);
}
@media (max-width: 768px) {
.sidebar-toggle {
display: block;
}
.sidebar {
position: fixed;
left: -280px;
z-index: 1001;
transition: left 0.3s;
}
.sidebar.open {
left: 0;
}
.docs-content {
padding: 1rem;
}
}
</style>

5
static/alpine.js Normal file

File diff suppressed because one or more lines are too long

148
static/docs/index.md Normal file
View File

@ -0,0 +1,148 @@
# Nexus NIIX Documentation
Welcome to the Nexus NIIX documentation. Here you'll find everything you need to understand and use our sovereign technology stack.
## Quick Start
### Installation
```bash
# Install NexusOS
git clone https://git.sovereign-society.org/nexus/nexus.git
cd nexus
./bootstrap.sh
```
### Your First Project
```bash
# Create a new sovereign project
nexus new my-app
cd my-app
nexus run
```
## Core Concepts
### Sovereign by Design
Nexus NIIX is built around the principle of **user sovereignty**:
- No external dependencies
- No vendor lock-in
- Full cryptographic verification
- Your keys, your data
### Content-Addressed Storage
Every piece of data in Nexus NIIX has a cryptographic identity:
- **Integrity**: Verify data hasn't been tampered with
- **Deduplication**: Automatically detect identical content
- **Referencing**: Use content hashes as permanent URLs
### Mesh Networking
Decentralized peer-to-peer communication without central points of failure.
## Ecosystem
### NexFS
Native Zig flash filesystem optimized for:
- IoT sensors (nexfs-core: ~40KB)
- Personal devices (nexfs-sovereign: ~120KB)
- Home servers (nexfs-mesh: ~200KB)
### Rumpk
Runtime package manager with:
- Cryptographic signing
- Content-addressed storage
- Dependency resolution
- Secure execution
### Nip
Package format specification:
- Dependency declarations
- Version constraints
- Cryptographic manifests
- Distribution-agnostic
## Architecture
```
┌─────────────────────────────────────────┐
│ Nexus NIIX Stack │
├─────────────────────────────────────────┤
│ Application Layer (Your Code) │
├─────────────────────────────────────────┤
│ Rumpk (Package Manager) │
├─────────────────────────────────────────┤
│ Nip (Package Format) │
├─────────────────────────────────────────┤
│ NexFS (Filesystem) │
├─────────────────────────────────────────┤
│ Hardware (Flash, Memory, CPU) │
└─────────────────────────────────────────┘
```
## Configuration
### System Requirements
- **Minimum**: 1GB RAM, 10GB storage
- **Recommended**: 2GB RAM, 50GB storage
- **Supported**: x86_64, ARM64, RISC-V
### Environment Variables
```bash
NEXUS_HOME=~/.nexus
NEXUS_DATA=/data/nexus
NEXUS_LOG_LEVEL=info
```
## API Reference
### Core CLI Commands
| Command | Description |
|---------|-------------|
| `nexus init` | Initialize new project |
| `nexus build` | Build project |
| `nexus run` | Run development server |
| `nexus deploy` | Deploy to production |
| `nexus update` | Update Nexus NIIX |
| `nexus doctor` | System diagnostics |
### Programmatic API
```javascript
import { Nexus } from '@nexus/core';
const nexus = new Nexus({
home: '~/.nexus',
data: '/data/nexus'
});
// Create a new project
await nexus.create('my-app');
// Install a package
await nexus.install('rumpk');
// Run a command
await nexus.run('echo "Hello, Sovereign!"');
```
## Support
- **Git Repository**: https://git.sovereign-society.org/nexus
- **Issue Tracker**: https://git.sovereign-society.org/nexus/nexus/-/issues
- **Community**: https://git.sovereign-society.org/nexus/community
## License
Nexus NIIX is licensed under the **LSL-1.0** (Libertaria Source License 1.0).
See [LICENSE](https://git.sovereign-society.org/nexus/nexus/-/raw/main/LICENSE) for details.

5
static/pico.css Normal file

File diff suppressed because one or more lines are too long

13
svelte.config.js Normal file
View File

@ -0,0 +1,13 @@
import adapter from '@sveltejs/adapter-auto';
/** @type {import('@sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
entries: ['*']
}
}
};
export default config;

12
vite.config.js Normal file
View File

@ -0,0 +1,12 @@
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';
export default defineConfig({
plugins: [sveltekit()],
build: {
target: 'esnext'
},
optimizeDeps: {
include: ['alpinejs', 'marked']
}
});

5
wrangler.toml Normal file
View File

@ -0,0 +1,5 @@
name = "nexus-niix-website"
compatibility_date = "2024-01-01"
[site]
bucket = ".svelte-kit/output/client"