https://github.com/essedev/doppia.os
Experimental web app aiming to recreate a desktop-like experience right in your browser.
https://github.com/essedev/doppia.os
Last synced: about 10 hours ago
JSON representation
Experimental web app aiming to recreate a desktop-like experience right in your browser.
- Host: GitHub
- URL: https://github.com/essedev/doppia.os
- Owner: essedev
- Created: 2022-04-16T20:58:21.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2025-04-30T21:02:52.000Z (about 1 year ago)
- Last Synced: 2026-01-11T12:02:32.473Z (6 months ago)
- Language: Svelte
- Homepage: https://doppiaos.netlify.app/
- Size: 238 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
# 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 ` per aggiungere secret nel progetto.
- Ambiente di produzione: la costante `PUBLIC_NODE_ENV` controlla la visibilità del banner “Fork me”.
## Struttura del progetto
```bash
/
├─ 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:
```bash
wrangler login
```
2. (Opzionale) Aggiungi secret di ambiente:
```bash
wrangler secret put
```
3. Deploy su Cloudflare Pages:
```bash
wrangler pages publish .svelte-kit/cloudflare --project-name
```
4. Oppure deploy come Worker:
```bash
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**.