🌱SENZAI StartPage

Live Demo

🔍 Overview

A simple, customizable startpage with todo list support. Featuring the senzai theme. Designed for functionality and aesthetics with seamless hosting on GitHub Pages, based on dawn.

💭 Goals

• Senzai theme & style
• Simplicity
• 1080x960 compatible
• Todo list
• Adjustable banner images
• Currency conversion rates
• Usage tips
• Dark & light mode

🚀 Usage

1. Fork the repo and host via GitHub pages deployment, or clone and run locally.
2. Navigate to the page and press c to bring up the builtin editor to change it to your preferences, such as:
   • Disable components you don't want to use
   • Set the desired tab number font/language
   • Set your location for the weather widget
   • Change the clock format and icon color
   • Change the currency conversion display
   • Change the calendar link
   • Change the available search engines
   • Change keybindings
   • Enable last visited category tab on load
   • Update the number of category tabs and their names
   • Change category tab banners and their image position and scale
   • Update the bookmarks and links for the one you want to use
   • Change the icons, names and colors of those bookmarks

Alternatively, you can manually update userconfig.js to match your preferences

Tip

Clicking the blue information icon before the tab numbers provides a popup with usage tips.

The bookmarks / links can be chosen from those available at tabler-icons.

Supports a maximum of 6 category tabs.

Additional banner images can be added by placing image files into banners locally and adding them to background_url for that tab.

Some software supports launching via URI and can be added as links (such as Discord and Steam via discord://open/ and steam://open/ respectively).

The currency conversion API is rate limited to once a day (by the codebase, not the provider).

The page can be toggled between dark and light via the toggle located at the top left of the page.

Todo and preferences in page are stored locally, in browser. Using a different browser or device is an independant session.

⌨️ Keybinds

• c Open config editor
• alt + Numbers row (1-6) Switch tabs
• t Open the create task panel
• Enter Create a task
• Tab Go to next field
• Esc Close the edit/create task panel (when field is focused)
• s Open the search dialog
  • Type !g before your search query for Google
  • Type !d before your search query for DuckDuckGo
  • Type !y before your search query for YouTube
  • Type !w before your search query for Wikipedia

🏠 As Homepage

• Click your browsers menu button and select Settings/Options/Preferences
• Use the search, or navigate to homepage and new windows selection
• Click the menu next to the homepage and new windows selection and choose a custom URLs
• Enter your GitHub Pages link, or local file link

➕ As New Tab

Unfortunately, you will need to use add-ons/extensions for this for most browsers.

• For Gecko-based browsers (Firefox, Zen, etc.), use an addon such as New Tab Override and point it to your page.
• For Chromium-based browsers (Chrome, Brave, Edge, etc.), use an addon such as Custom New Tab and point it to your page. Alternatively, you can go to the extensions setting and turn on developer mode and load an unpacked extension. Select the root folder of your cloned repo.

👨‍💻 Config Snippet Examples

Fold out for examples of how to change the config code.

🚫 Component Disabling

To disable a component module, put their name into the list of disabled components like so:

const CONFIG = new Config({
    // ...
    disabled: ['todo-list'] // currency-compare, current-time, weather-forecast, etc.
});

The names can be found listed in module.js

➕ Tabs

Create new tabs and categories like so:

const CONFIG = new Config({
    // ...
    tabs: [
        {
            name: 'chill',
            background_url: 'src/res/banners/cc0/space.gif',
            categories: [{
                name: 'video',
                links: [{
                    url: 'https://youtube.com',
                    name: 'youtube',
                    icon: 'brand-youtube',
                    icon_color: '#ff2d5e'
                }]
            }]
        }
    ]
)

🕙 Clock

Change the clock format in the status bar using strftime.org format.

Config example (userconfig.js):

const CONFIG = new Config({
  // ...
  clock: {
    format: 'h:i p',
  }
});

⛅ Weather Info

Change your location and temperature scale (celius, fahrenheit) like so:

const CONFIG = new Config({
  // ...
  temperature: {
    location: 'Canberra, ACT',
    scale: 'C'
  }
});

Alternatively, click on the weather widget on the page to swap between Celius and Fahrenheit.

💱 Currency Exchange

Change your base currency and the two currencies to compare like so:

const CONFIG = new Config({
  // ...
  currencyconv: {
      base: 'AUD',
      baseamount: '1',
      curone: 'USD',
      curoneglyph: '$',
      curtwo: 'JPY',
      curtwoglyph: '¥',
      url: 'https://www.google.com/finance/markets/currencies'
  },
});

🖼️ Tab Banners

The project ships with multiple banners for use.

There is a selection of CC0 images as well as some 'pop culture' gifs pulled from numerous gif sites (Giphy, Tenor, Imgur, etc.) that are obviously not owned by me and are used with the intent of fair and personal use only.

As mentioned in the usage tips, you can add your own custom images by adding them to the banners directory and adding them to the userconfig.js, which allows you to change the relative positioning and absolute image scale.

The shipped CC0 images are:

forest.gif	industrial.gif	mountains.gif

outrun.gif	park.gif	space.gif

splash.gif

The shipped 'pop culture' images are:

beebop_01.gif	beebop_02.gif	eva_01.gif

eva_02.gif	eva_03.gif	eva_04.gif

gits_01.gif	gits_02.gif	gits_03.gif