distro-picker Svelte Themes

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#svelte#bun#seo-optimization#supabase#lazy-loading#seo#adaptative-ui
Demo Download

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/
β”œβ”€β”€ docs/
β”‚   β”œβ”€β”€ SEO.png
β”‚   └── SEO_mobile.png
β”œβ”€β”€ src/
β”‚   β”œβ”€β”€ app.css
β”‚   β”œβ”€β”€ app.html
β”‚   β”œβ”€β”€ lib/
β”‚   β”‚   β”œβ”€β”€ components/
β”‚   β”‚   β”‚   β”œβ”€β”€ DistroGrid.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ DistroGridSkeleton.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ DistroModal.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ ErrorDisplay.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ GalleryModal.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ InfoModal.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ LanguageToggle.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ LoadingSpinner.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ OptimizedImage.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ QuickTestModal.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ TagFilter.svelte
β”‚   β”‚   β”‚   β”œβ”€β”€ TagSkeleton.svelte
β”‚   β”‚   β”‚   └── ThemeToggle.svelte
β”‚   β”‚   β”œβ”€β”€ i18n/
β”‚   β”‚   β”‚   β”œβ”€β”€ locale.ts
β”‚   β”‚   β”‚   └── translations.ts
β”‚   β”‚   β”œβ”€β”€ locales/
β”‚   β”‚   β”‚   β”œβ”€β”€ types.ts      # Type definitions
β”‚   β”‚   β”‚   β”œβ”€β”€ en.json       # English (bundled, used for SSR)
β”‚   β”‚   β”‚   └── en_old.json
β”‚   β”‚   β”œβ”€β”€ stores/
β”‚   β”‚   β”‚   β”œβ”€β”€ index.ts
β”‚   β”‚   β”‚   └── theme.ts
β”‚   β”‚   β”œβ”€β”€ types/
β”‚   β”‚   β”‚   └── quiz.ts
β”‚   β”‚   β”œβ”€β”€ utils/
β”‚   β”‚   β”‚   β”œβ”€β”€ body.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ data.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ imageObserver.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ index.ts
β”‚   β”‚   β”‚   β”œβ”€β”€ storage.ts
β”‚   β”‚   β”‚   └── validation.ts
β”‚   β”‚   β”œβ”€β”€ distros.json
β”‚   β”‚   β”œβ”€β”€ supabase.ts
β”‚   β”‚   β”œβ”€β”€ tags.json
β”‚   β”‚   └── types.ts
β”‚   └── routes/
β”‚       β”œβ”€β”€ +layout.server.js
β”‚       β”œβ”€β”€ +layout.svelte
β”‚       β”œβ”€β”€ +page.server.ts
β”‚       └── +page.svelte
β”œβ”€β”€ static/
β”‚   β”œβ”€β”€ locales/              # Translation files loaded via fetch
β”‚   β”œβ”€β”€ screenshots/          # Distro screenshots
β”‚   β”œβ”€β”€ _headers
β”‚   β”œβ”€β”€ .nojekyll
β”‚   β”œβ”€β”€ robots.txt
β”‚   β”œβ”€β”€ sitemap.xml
β”‚   └── *.webp/*.svg          # Distro logo images
β”œβ”€β”€ 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

Row Level Security (RLS) is enabled with public SELECT and UPDATE policies for the anon role.

🌐 Supported Languages

The app supports language detection based on browser language and timezone:

Language Code Native Name Auto-Detect Method
English en English Browser default (bundled)
Belarusian be БСларуская Browser (be, be-BY, bel, be-tarask) + Timezone (Europe/Minsk)

Language Detection

Language is automatically detected based on:

  1. Browser language - Uses navigator.language with fallback
  2. 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)

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! 🐧

Top categories

tailwinddaisyuiadmin templatepopupmdsvexportfolioblogformecommerceuicarouselauthdarkseoimagerouting
Loading Svelte Themes