Webb Launcher

Webb Launcher is a minimalist starting page/personal dashboard mainly aimed at self-hosters. With its (almost) perfect lighthouse score and its mobile-first responsive design, it will load fast and look great on any of your devices.

Built with Astro, Webb Launcher is an homage to the James Webb space telescope and its Ariane 5 launcher.

Table of content

• Webb Launcher
  • Table of content
  • How to use
  • Lighthouse results
    • Desktop
    • Mobile
  • 3rd party Licenses
    • Favicon

How to use

The recommended approach is with docker-compose and an accompanying .env file for your list of shortcuts:

docker-compose.yml file

version: "3.3"
services:
  dashboard:
    image: ghcr.io/snyssen/webb-launcher
    env_file:
      - ./.env
    ports:
      - 80:8080

.env file

SHORTCUTS="
- name: Development
  icon_classes: las la-laptop-code
  children:
    - name: localhost
      children:
        - name: localhost
          icon_classes: las la-user-secret
          url: http://localhost
        - name: Angular
          icon_classes: lab la-angular
          url: http://localhost:4200
        - name: Astro
          icon_classes: las la-rocket
          url: http://localhost:3000
    - name: Gitea
      url: https://git.snyssen.be
    - name: Drone CI
      url: https://drone.snyssen.be
    - name: GitHub
      url: https://github.com
- name: Social
  icon_classes: las la-user-friends
  children:
    - name: Mastodon
      url: https://joinmastodon.org
    - name: Odysee
      url: https://odysee.com
    - name: Matrix
      url: https://matrix.org
"
# Optionally, you can add a OpenWeather API key so the dashboard can query weather information
# OPENWEATHER_API_KEY="xxxx"

The launcher expects a list of shortcuts in the form of a yaml tree. The tree has a minimum depth of 2 and a maximum depth of 3. Nodes are composed of the following fields:

Field name	Field value	Required
name	The display name for the corresponding element	yes
icon_classes	Classes to apply to an <i/> element in order to display Line Awesome icons	no
url	An url to link to	Only at depth 2 and 3
children	List of children for the current node	Only at depth 1, should not be present at depth 3

Each depth corresponds to a different element in the dashboard:

Depth	Impacted element	Expected fields (bold if required, impact in parenthesis)
1	card	name (title), icon_classes (icon before text), children (body of card)
2	body of card	name (text of the link or accordion), icon_classes (icon before text if link, or after text if accordion), children (body of accordion; if unset, current node will be a link)
3	body of accordion	name (text of the link), icon_classes (icon before text)

The dashboard can also provide weather information based on the OpenWeather API. To make use of this feature, please Create an open weather account and request an API key. Then, inject the API key into the container using the environment variable OPENWEATHER_API_KEY.

Lighthouse results

Desktop

Mobile

3rd party Licenses

Favicon

The favicon was generated using the following graphics from Twitter Twemoji:

• Graphics Title: 1f6f0.svg
• Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
• Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f6f0.svg
• Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)