Catppuccin Startpage

🪴 Overview

A minimalistic and customisable startpage featuring the Catppuccin palettes. Designed for both aesthetics and functionality, with seamless hosting on GitHub Pages. This startpage is based on dawn, which offers additional functionality. I have refined the page to match my dotfiles; feel free to explore them as well.

🧠 Main Principles

• Minimalism in all aspects
• Consistency throughout the user interface and codebase
• Simplicity in design and configuration
• Unified style and reduced visual noise

🎨 Supported Palettes

• Latte
• Frappé
• Macchiato
• Mocha

⭐ Features

• Automatic theme switching based on system settings (light/dark mode)
• Customisable startpage / bookmarks manager
• Search bar with multiple engines
• Weather widget
• Clock widget with 12/24-hour format and multiple time zones support
• Local fonts mode for privacy and offline use (no Google Fonts CDN)

🪵 Usage

1. Fork this repository and clone it
2. Optionally remove the .github directory, as it contains only PR templates, issue labels, etc., that are linked to this repository
3. Create userconfig.js based on the example file: cp userconfig.example.js userconfig.js
   • Set the desired palette: latte, frappe, macchiato, or mocha
   • Set your location for the weather widget
   • Update the number of tabs and their banners
   • Update bookmarks and quick links for those you use most

Tip

You can find icons for your bookmarks using tabler-icons.

To reduce icon loading times, you may install the icon font locally and activate the option "localIcons": true in the configuration to disable remote styles. Similarly, set "localFonts": true to serve all fonts from the repository instead of the Google Fonts CDN.

As Homepage

• Click the menu button and select Options/Preferences
• Click the home panel
• Click the menu next to 'Homepage and new windows', choose to show custom URLs, and add your GitHub Pages link

As New Tab

You can use different add-ons or extensions for this.

• If you use Firefox-based browsers: Custom New Tab Page and make sure to enable "Force links to open in the top frame (experimental)" in the extension's preferences page
• If you use Chromium-based browsers (Brave / Chrome): Custom New Tab URL

🛠️ Development

For local viewing, run python3 -m http.server 8000 from the repository root and open http://localhost:8000. To regenerate the palette CSS, run just build (requires whiskers).

🔎 Search

The search dialogue allows you to display a search bar with various search engines defined in the configuration. To open the search dialogue, simply press s and type your query or URL to jump to it seamlessly.

To select search engine, simply prefix the query with the corresponding !<id>. By default, the defined search engines are:

• !p: PerplexityAI
• !g: Google
• !d: DuckDuckGo

The default search engine can be set in the userconfig.js file (use the engine ID without the ! prefix):

search: {
  default: "d"
}

⏰ Clock

The startpage now features an enhanced clock component with:

• Support for 12-hour and 24-hour time formats
• Multiple clocks for different time zones
• Customisable formatting options
• Locale support for regional time display

The format string uses strftime-like tokens (k, i, p, h, H) — see src/common/strftime.js for the full reference.

You can configure the clock format and add additional time zones in your userconfig.js:

clock: {
  format: "k:i p", // 12-hour format with AM/PM (09:30 PM)
  icon_color: palette.maroon,
},
// Optional: Add multiple clocks for different time zones
additionalClocks: [
  {
    label: "NYC", // Label for the clock
    timezone: "America/New_York", // IANA timezone name (handles DST automatically)
    format: "h:i", // 24-hour format (21:30)
    locale: "en-US", // Locale for date/time formatting
    icon_color: palette.blue // Optional different icon color
  }
],

🖼️ Available Banners

banner_01	banner_02	banner_03	banner_04

banner_05	banner_06	banner_07	banner_11

banner_12	banner_13	banner_14	banner_15

banner_16	banner_17	banner_18