starbase-81/readme.md

# Starbase 80

> DR T'ANA: (to Mariner) "You wanna goof around, go work on Starbase 80!"<br />
> JET: "Damn, Starbase 80?!"

# About

A nice looking homepage for Docker containers or any services and links.

No actual integration with Docker. Loads instantly. Dark mode follows your OS.

If you make a change to the config JSON, restart this container and refresh.

Inspired by [Ben Phelps' Homepage](https://gethomepage.dev/) and [Umbrel](https://umbrel.com/). Dedicated to [Star Trek: Lower Decks](https://www.paramountplus.com/shows/star-trek-lower-decks/).

# Docker and source code

-   [Docker image](https://hub.docker.com/r/jordanroher/starbase-80)
-   [Source code on GitHub](https://github.com/notclickable-jordan/starbase-80)

# Live demo

-   [Starbase 80](https://www.starbase80.dev/)

# Preview

<img src="./preview.jpg" alt="Light mode" />

<br />

<img src="./preview-dark.jpg" alt="Dark mode" />

# Change history

## 1.2.0

-   Moved `config.json` bind mount destination to `/app/src/config/config.json` for improved Portainer and volume support. The previous bind mount location will continue to work, but we recommend updating your bind mounts.

# Docker

## Sample Docker compose

```yaml
services:
    starbase80:
        image: jordanroher/starbase-80
        ports:
            - 80:4173
        environment:
            - TITLE=Starbase 80
            - LOGO=/starbase80.jpg
        volumes:
            - ./config.json:/app/src/config/config.json
            - ./public/favicon.ico:/app/public/favicon.ico
            - ./public/logo.png:/app/public/logo.png
            - ./public/icons:/app/public/icons
```

## Environment variables

| Variable    | Default                | Notes                                                                                           |
| ----------- | ---------------------- | ----------------------------------------------------------------------------------------------- |
| TITLE       | My Website             | Set to TITLE= to hide the title                                                                 |
| LOGO        | /logo.png              | Set to LOGO= to hide the logo                                                                   |
| HEADER      | true                   | Set to false to hide the title and logo                                                         |
| HEADERLINE  | true                   | Set to false to turn off the header border line                                                 |
| CATEGORIES  | normal                 | Set to "small" for smaller, uppercase category labels                                           |
| BGCOLOR     | theme(colors.slate.50) | Background color for light mode. Set to any hex color or Tailwind color using the theme syntax. |
| BGCOLORDARK | theme(colors.gray.950) | Background color for dark mode. Set to any hex color or Tailwind color using the theme syntax.  |
| NEWWINDOW   | true                   | Set to false to not have links open in a new window                                             |

## Volumes (bind mounts)

| Path                        | Required | Notes                                                                         |
| --------------------------- | -------- | ----------------------------------------------------------------------------- |
| /app/src/config/config.json | true     | Configuration with list of sites and links                                    |
| /app/public/favicon.ico     | false    | Website favicon                                                               |
| /app/public/logo.png        | false    | Logo in the header                                                            |
| /app/public/icons           | false    | Or wherever you want to put them, JSON icon paths are relative to /app/public |

# Configuration

## Sample config.json

```json
[
	{
		"category": "Services",
		"services": [
			{
				"name": "Archivebox",
				"uri": "https://archivebox.mywebsite.com",
				"description": "Backup webpages",
				"icon": "/icons/archivebox.jpg"
			},
			{
				"name": "Authelia",
				"uri": "https://auth.mywebsite.com",
				"description": "Authentication",
				"icon": "/icons/authelia.png"
			},
			{
				"name": "Calibre",
				"uri": "https://calibre.mywebsite.com",
				"description": "eBook library",
				"icon": "/icons/calibre.png"
			}
		]
	},
	{
		"category": "Devices",
		"bubble": true,
		"services": [
			{
				"name": "Router",
				"uri": "http://192.168.1.1/",
				"description": "Netgear Orbi",
				"icon": "/icons/router.png"
			},
			{
				"name": "Home Assistant",
				"uri": "http://homeassistant.local:8123/",
				"description": "Home automation",
				"icon": "home-assistant",
				"iconBubble": false
			},
			{
				"name": "Synology",
				"uri": "http://synology:5000",
				"description": "Network storage",
				"icon": "/icons/synology.png"
			}
		]
	}
]
```

## Category variables

| Name     | Default | Required | Notes                               |
| -------- | ------- | -------- | ----------------------------------- |
| category |         | false    | Displays above the list of services |
| bubble   | false   | false    | Shows a bubble around category      |
| services |         | true     | Array of services                   |

## Service variables

| Name        | Default | Required | Notes                                                                                                                                                                                           |
| ----------- | ------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| name        |         | true     | Title of service                                                                                                                                                                                |
| uri         |         | true     | Hyperlink to resource                                                                                                                                                                           |
| description |         | false    | 2-3 words which appear below the title                                                                                                                                                          |
| icon        |         | false    | Relative URI, absolute URI, service name ([Dashboard icon](https://github.com/walkxcode/dashboard-icons)) or `mdi-`service name ([Material Design icon](https://icon-sets.iconify.design/mdi/)) |
| iconBG      |         | false    | Background color for icons. Hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`).                                                             |
| iconColor   |         | false    | Only used as the fill color for Material Design icons. Hex code or [Tailwind color](https://tailwindcss.com/docs/background-color) (do not prefix with `bg-`).                                  |
| iconBubble  | true    | false    | If `false` the bubble and shadow are removed from the icon                                                                                                                                      |
| iconAspect  | square  | false    | Set to `"width"` or `"height"` to constrain the icon to the width or height of the icon, respectively                                                                                           |
| newWindow   |         | false    | Set to `true` or `false` to override the environment variable `NEWWINDOW` for this service                                                                                                      |

# Icons

## Volume / bind mount

Create a volume or bind mount to a subfolder of `/app/public` and specify a relative path.

```bash
# Your folder
compose.yml
- icons
  - jellyfin.jpg
  - ghost.jpg
  - etc

# Bind mount
./icons:/app/public/icons

# Icon in config.json
"icon": "/icons/jellyfin.jpg"
```

## Dashboard icons

Use [Dashboard icons](https://github.com/walkxcode/dashboard-icons) by specifying a name without any prefix.

```bash
# Icon in config.json
"icon": "jellyfin"
```

## Material design

Use any [Material Design icon](https://icon-sets.iconify.design/mdi/) by prefixing the name with `mdi-`.

Fill the icon by providing an "iconColor."

Use "black" or "white" for those colors.

```bash
# Icon in config.json
"icon": "mdi-cloud",
"iconColor": "black"
```