2023-04-20 22:47:29 +00:00
# Starbase 80
2023-07-16 17:41:04 +00:00
> DR T'ANA: (to Mariner) "You wanna goof around, go work on Starbase 80!"<br />
> JET: "Damn, Starbase 80?!"
2023-04-20 22:54:43 +00:00
# About
2023-04-20 22:59:51 +00:00
A nice looking homepage for Docker containers or any services and links.
2023-04-21 22:50:54 +00:00
No actual integration with Docker. Loads instantly. Dark mode follows your OS.
2023-04-20 22:47:29 +00:00
If you make a change to the config JSON, restart this container and refresh.
2023-12-13 00:27:23 +00:00
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/ ).
2023-04-21 20:34:14 +00:00
2023-04-22 21:59:16 +00:00
# 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 )
2023-12-13 00:27:23 +00:00
# Live demo
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
- [Starbase 80 ](https://www.starbase80.dev/ )
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
# Preview
2023-04-21 22:02:15 +00:00
2023-12-13 00:27:23 +00:00
< img src = "./preview.jpg" alt = "Light mode" / >
2023-04-20 22:47:29 +00:00
2023-12-13 00:27:23 +00:00
< br / >
2023-04-21 23:23:30 +00:00
2023-12-13 00:27:23 +00:00
< img src = "./preview-dark.jpg" alt = "Dark mode" / >
2023-04-21 23:23:30 +00:00
2023-12-13 00:27:23 +00:00
# Docker
2023-04-21 23:23:30 +00:00
2023-12-13 00:27:23 +00:00
## Sample Docker compose
2023-04-20 22:47:29 +00:00
```yaml
services:
2023-12-13 00:27:23 +00:00
starbase80:
2023-04-20 22:47:29 +00:00
image: jordanroher/starbase-80
ports:
2023-12-13 00:27:23 +00:00
- 80:4173
2023-04-20 23:42:30 +00:00
environment:
2023-12-13 00:27:23 +00:00
- TITLE=Starbase 80
- LOGO=/starbase80.jpg
2023-04-20 22:47:29 +00:00
volumes:
2023-12-13 00:27:23 +00:00
- ./config.json:/app/src/config.json
- ./public/favicon.ico:/app/public/favicon.ico
- ./public/logo.png:/app/public/logo.png
- ./public/icons:/app/public/icons
2023-04-20 22:47:29 +00:00
```
2023-12-13 00:27:23 +00:00
## Environment variables
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
| 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 |
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
## Volumes (bind mounts)
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
| Path | Required | Notes |
| ----------------------- | -------- | ----------------------------------------------------------------------------- |
| /app/src/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 |
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
# Configuration
2023-04-21 20:34:14 +00:00
2023-12-13 00:27:23 +00:00
## Sample config.json
2023-04-21 20:34:14 +00:00
2023-04-20 22:47:29 +00:00
```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",
2023-04-21 22:26:03 +00:00
"bubble": true,
2023-04-20 22:47:29 +00:00
"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",
2023-04-21 23:23:30 +00:00
"icon": "home-assistant",
"iconBubble": false
2023-04-20 22:47:29 +00:00
},
{
"name": "Synology",
"uri": "http://synology:5000",
"description": "Network storage",
"icon": "/icons/synology.png"
}
]
}
]
```
2023-12-13 00:27:23 +00:00
## 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"
```
