doppia.os

doppia.os è un'interfaccia web dinamica ispirata a un piccolo sistema operativo, sviluppata con SvelteKit e Cloudflare Workers. Offre finestre interattive per le sezioni Work In Progress, About, Projects e Contact, con metriche in tempo reale e un'esperienza utente curata.

Caratteristiche principali

• Schermata di caricamento con transizioni fade-out
• Barra di navigazione responsive
• Finestre dinamiche configurate via Svelte store
• Componente Stats per visualizzare dimensioni e coordinate di ogni finestra
• Banner “Fork me” visibile solo in ambiente di produzione
• Hosting e funzioni serverless con Cloudflare Workers e Pages
• Controlli di qualità con Prettier ed ESLint

Tecnologie e dipendenze

• Svelte 5 e SvelteKit
• TypeScript
• Vite come bundler
• Cloudflare Workers (adapter @sveltejs/adapter-cloudflare)
• Wrangler per il deploy
• Prettier e ESLint per formattazione e linting

Requisiti

• Node.js >= 22.14.0 (specificato in wrangler.jsonc)
• npm o pnpm
• Account Cloudflare con CLI Wrangler configurato

Installazione

# Clona il repository
git clone https://github.com/tuo-username/doppiaos.git
cd doppiaos

# Installa le dipendenze (npm o pnpm)
npm install
# oppure
pnpm install

Comandi disponibili

• npm run dev / pnpm dev
  Avvia il server di sviluppo (Hot Module Replacement)
• npm run build / pnpm build
  Compila l'applicazione in build per la produzione
• npm run preview / pnpm preview
  Preview locale della build di produzione
• npm run check
  Sincronizza tipi SvelteKit e lancia svelte-check
• npm run check:watch
  Watch mode per svelte-check
• npm run lint
  Controlla formattazione e lint con Prettier ed ESLint
• npm run format
  Format del codice con Prettier

Configurazione

• wrangler.jsonc: definisce la directory di output (.svelte-kit/cloudflare), la compatibility date e la variabile NODE_VERSION.
• Variabili sensibili: utilizzare wrangler secret put <NOME> per aggiungere secret nel progetto.
• Ambiente di produzione: la costante PUBLIC_NODE_ENV controlla la visibilità del banner “Fork me”.

Struttura del progetto

/
├─ README.md                 # Questo file
├─ wrangler.jsonc            # Configurazione Cloudflare Wrangler
├─ svelte.config.js          # Configurazione SvelteKit (adapter-cloudflare)
├─ vite.config.ts            # Configurazione Vite
├─ package.json              # Script e dipendenze
├─ tsconfig.json             # Configurazione TypeScript
├─ src/
│  ├─ app.html               # Template HTML principale
│  ├─ app.css                # Stili globali
│  ├─ lib/
│  │  ├─ components/
│  │  │  ├─ forkme.svelte    # Banner “Fork me” (prod)
│  │  │  ├─ navbar.svelte    # Barra di navigazione
│  │  │  ├─ stats.svelte     # Componente metriche finestre
│  │  │  ├─ window.svelte    # Componente finestra generica
│  │  │  └─ windows/         # Contenuti delle finestre:
│  │  │     ├─ wip.svelte
│  │  │     ├─ about.svelte
│  │  │     ├─ projects.svelte
│  │  │     └─ contact.svelte
│  │  └─ stores/
│  │     └─ windows.ts       # Store Svelte per gestione finestre
│  └─ routes/
│     └─ +page.svelte        # Pagina principale (loading + windows)
└─ static/
   └─ favicon.png

Componenti principali

1. Loading Screen (+page.svelte): gestito tramite onMount e transizioni fade di Svelte.
2. Navbar (navbar.svelte): navigazione superiore.
3. Window Manager:
   • Store windowsStore definito in src/lib/stores/windows.ts.
   • Componente Window genera finestre basate su dati e proprietà.
4. Stats (stats.svelte): selezione della finestra attiva e visualizzazione di larghezza, altezza e coordinate.
5. Forkme (forkme.svelte): link al repository (solo produzione).

Deployment

1. Effettua il login a Cloudflare:

   wrangler login

2. (Opzionale) Aggiungi secret di ambiente:

   wrangler secret put <NOME_SECRET>

3. Deploy su Cloudflare Pages:

   wrangler pages publish .svelte-kit/cloudflare --project-name <nome_progetto>

4. Oppure deploy come Worker:

   wrangler publish

Contribuire

Le pull request sono benvenute! Apri una issue per segnalare bug o proporre nuove features.

Licenza

Questo progetto è rilasciato sotto licenza MIT.