Distro Picker
An app that allows you to pick a Linux distribution based on your needs by providing a comprehensive filtering mechanism. Written with the assistance of the Opencode AI agent. Keywords: distro chooser, distrochooser, choose a distro.
Linux Distribution Picker
A modern Linux distribution picker built with SvelteKit to help users find the perfect Linux distribution for their needs based on gaming, development, user-friendliness, and other criteria.
Install dependencies
bun install
Start development server
bun run dev
Create production build
bun run build
Preview production build
bun run preview
๐ Project Structure
distro-picker/
โโโ src/
โ โโโ app.css
โ โโโ app.html
โ โโโ lib/
โ โ โโโ components/
โ โ โ โโโ DistroGrid.svelte
โ โ โ โโโ DistroGridSkeleton.svelte
โ โ โ โโโ DistroPanel.svelte
โ โ โ โโโ ErrorDisplay.svelte
โ โ โ โโโ GalleryModal.svelte
โ โ โ โโโ InfoModal.svelte
โ โ โ โโโ LanguageToggle.svelte
โ โ โ โโโ LoadingSpinner.svelte
โ โ โ โโโ OptimizedImage.svelte
โ โ โ โโโ QuickTestModal.svelte
โ โ โ โโโ TagFilter.svelte
โ โ โ โโโ TagSkeleton.svelte
โ โ โ โโโ ThemeToggle.svelte
โ โ โโโ data/
โ โ โโโ i18n/
โ โ โ โโโ locale.ts
โ โ โ โโโ translations.ts
โ โ โโโ locales/
โ โ โ โโโ types.ts # Type definitions
โ โ โ โโโ en.json # English (used for SSR)
โ โ โโโ stores/
โ โ โโโ supabase.ts
โ โ โโโ types/
โ โ โโโ utils/
โ โ โโโ distros.json
โ โ โโโ tags.json
โ โโโ routes/
โ โโโ +layout.svelte
โ โโโ +page.svelte
โโโ static/
โ โโโ locales/ # Translation files (edit JSON to add/edit languages, loaded via fetch)
โ โโโ screenshots/
โโโ package.json
โโโ svelte.config.js
โโโ tsconfig.json
โโโ README.md
๐๏ธ Database Structure (Supabase)
'distros' table
| Column | Type | Description |
|---|---|---|
| id | text | Primary key (same as 'id' in distros.json) |
| likes | int2 | Number of likes |
๐ Supported Languages
The app supports 17 languages with automatic detection based on browser language and timezone:
| Language | Code | Native Name | Auto-Detect Method |
|---|---|---|---|
| English | en |
English | Browser default |
| Belarusian | be |
ะะตะปะฐัััะบะฐั | Browser (be, be-BY) + Timezone (Europe/Minsk) |
| Ukrainian | uk |
ะฃะบัะฐัะฝััะบะฐ | Browser (uk, uk-UA) + Timezone (Europe/Kyiv) |
| Polish | pl |
Polski | Browser (pl, pl-PL) + Timezone (Europe/Warsaw) |
| Russian | ru |
ะ ัััะบะธะน | Browser (ru, ru-RU) + Multiple Russian timezones |
| Spanish | es |
Espaรฑol | Browser (es, es-ES, etc.) |
| Portuguese | pt |
Portuguรชs | Browser + Timezone (America/Sao_Paulo, Europe/Lisbon) |
| German | de |
Deutsch | Browser + Timezone (Europe/Berlin, Europe/Vienna) |
| French | fr |
Franรงais | Browser + Timezone (Europe/Paris, America/Montreal) |
| Italian | it |
Italiano | Browser + Timezone (Europe/Rome) |
| Turkish | tr |
Tรผrkรงe | Browser + Timezone (Europe/Istanbul) |
| Vietnamese | vi |
Tiแบฟng Viแปt | Browser + Timezone (Asia/Ho_Chi_Minh) |
| Indonesian | id |
Bahasa Indonesia | Browser + Timezone (Asia/Jakarta) |
| Thai | th |
เนเธเธข | Browser + Timezone (Asia/Bangkok) |
| Chinese | zh |
็ฎไฝไธญๆ | Browser + Timezone (Asia/Shanghai, Asia/Tokyo) |
| Japanese | ja |
ๆฅๆฌ่ช | Browser + Timezone (Asia/Tokyo) |
| Korean | ko |
ํ๊ตญ์ด | Browser + Timezone (Asia/Seoul) |
Language Detection
Language is automatically detected based on:
- Browser language - Uses
navigator.languagewith fallback - System timezone - Some languages are also detected by timezone (e.g., Minsk โ Belarusian)
Users can manually switch languages using the language toggle. The selected language is stored in localStorage.
Lazy Loading
To optimize performance, translations are lazy-loaded:
- English - Bundled with the app (fallback language)
- Other languages - Loaded on-demand as JSON files (
/locales/{lang}.json) - Each language file is ~10-16 KB
- Total non-English translations: ~200 KB (loaded only when needed)
SEO
The app has a great SEO score (a11y is 96 due to tag color contrasts in the light theme).
Find Your Perfect Linux Distribution Today! ๐ง
