Git Product home page Git Product logo

starbase-80's Introduction

Starbase 80

DR T'ANA: (to Mariner) "You wanna goof around, go work on Starbase 80!"
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 and Umbrel. Dedicated to Star Trek: Lower Decks.

Docker and source code

Live demo

Preview

Light mode


Dark mode

Change history

1.4.2

  • Added apple-touch-icon-precomposed link

1.4.0

  • Rewrote the entire application to not use React. Now it's just a Node application that emits static HTML.
  • Removed lots of packages

1.3.0

  • Removed all JavaScript as part of the build step. The image will be slightly larger and take longer to start up and shut down, but the page will be even lighter.

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

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

[
	{
		"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) or mdi-service name (Material Design icon)
iconBG false Background color for icons. Hex code or Tailwind color (do not prefix with bg-).
iconColor false Only used as the fill color for Material Design icons. Hex code or Tailwind 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.

# 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 by specifying a name without any prefix.

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

Material design

Use any Material Design icon by prefixing the name with mdi-.

Fill the icon by providing an "iconColor."

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

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

starbase-80's People

Contributors

3timeslazy avatar haroldvb avatar notclickable-jordan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

starbase-80's Issues

mdi-icons not loading

Howdy! First off, thanks for building this -- it's been awesome!

Summary

When I set this up a few months back, I used some mdi-icons. Recently though, I noticed that they're not loading:
image

The Dashboard icons that I use work fine, so it seems to be specific to mdi-icons.

Details

If I inspect the generated HTML, I think the problem might be with the style on the outer div not being created properly and instead being [object Object] -- but I'm not much of a web dev, so that could be a red herring :)

<div class="block overflow-hidden bg-contain w-16 h-16 rounded-2xl border border-black/5 shadow-sm bg-slate-200 dark:bg-gray-900" style="[object Object]">
  <a href="https://spoolman.example.com" target="_blank" rel="noreffer" title="Spoolman" class="self-center">
    <div classname="block" w-16="" h-16="" bg-black="" dark:bg-white="" overflow-hidden="" style="mask: url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/library-shelves.svg) no-repeat center / contain;webkit-mask: url(https://cdn.jsdelivr.net/npm/@mdi/svg@latest/svg/library-shelves.svg) no-repeat center / contain">
    </div>
  </a>
<!--snip-->
</div>

Here's a reproducible example of my (sanitized) config:

[
  {
    "category": "Printers",
    "services": [
      {
        "name": "Spoolman",
        "uri": "https://spoolman.example.com",
        "icon": "mdi-library-shelves",
        "description": "Filament manager"
      },
      {
        "name": "Trident",
        "uri": "https://trident.example.com",
        "icon": "mdi-triforce",
        "description": "VT350"
      },
      {
        "name": "Prusa Mini",
        "uri": "https://prusamini.example.com",
        "icon": "fluidd"
      },
      {
        "name": "Ender Tres",
        "uri": "https://endertres.example.com",
        "icon": "mdi-blender",
        "description": "Ender 3"
      },
      {
        "name": "Veronica",
        "uri": "http://veronica.example.com",
        "icon": "voron",
        "description": "V0.2",
        "iconBubble": false
      },
      {
        "name": "Voron V2",
        "uri": "http://voronv2.example.com",
        "icon": "voron",
        "description": "V2.4",
        "iconBubble": false
      },
      {
        "name": "Replicator",
        "uri": "http://replicator.example.com:8000",
        "icon": "mdi-bolt",
        "description": "CNC machine"
      }
    ]
  }
]

Path to config.json in docker

Hi there, i'm trying to install starbase on my unraid system using the ibracorp-template and running into some issues. As per the documentation Starbase expects a direct path allocation to the config.json, which is afaik not possible, because you can't directly point to a file, only a path. Setting the Config-Path to the folder containing the config.json unfortunately doesn't work either. Am i missing something? Some help would be greatly appreciated, since starbase looks quite awesome.

NGINX Subfolder

I'm trying to configure Starbase to run in a subfolder using LinuxServer's SWAG container. I've was able to get all links and icons to load using the following NGINX block, but the favicon is not loading. Does anyone know what needs to be rewritten or filtered to get favicon to load?

location ^~ /starbase {
    include /config/nginx/proxy.conf;
    include /config/nginx/resolver.conf;

    set $upstream_app starbase;
    set $upstream_port 4173;
    set $upstream_proto http;

    proxy_pass $upstream_proto://$upstream_app:$upstream_port;
    proxy_set_header Accept-Encoding "";

    proxy_redirect ~^/(.*)$ /starbase/$1;
    rewrite ^/starbase/?(.*)$ /$1 break;

    sub_filter_once off;
    sub_filter_types *;

    sub_filter '/assets' '/starbase/assets';
    sub_filter '/icons'  '/starbase/icons';

    sub_filter '/favicon.ico' '/starbase/favicon.ico';
    sub_filter '/logo.png'    '/starbase/logo.png';
}

Error

docker compose up -d

[+] Running 11/11
✔ homepage 10 layers [⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿] 0B/0B Pulled 13.4s
✔ 31e352740f53 Pull complete 1.3s
✔ 2629b68d4311 Pull complete 6.0s
✔ ddb7cc70f260 Pull complete 6.1s
✔ 18afe6373474 Pull complete 6.1s
✔ 61d586bb1bc3 Pull complete 6.1s
✔ 1d6215c46d68 Pull complete 6.1s
✔ e1526a9d9bb6 Pull complete 10.5s
✔ 2edf2f6a091d Pull complete 10.5s
✔ fdd973c642f4 Pull complete 10.6s
✔ e834147b55da Pull complete 10.6s
[+] Running 1/2
✔ Network homepage_default Created 0.1s
⠿ Container homepage-homepage-1 Starting 0.5s

Error response from daemon: failed to create task for container: failed to create shim task: OCI runtime create failed: runc create failed: unable to start container process: error during container init: error mounting "/root/pipu/homepage/config.json" to rootfs at "/app/src/config.json": mount /root/pipu/homepage/config.json:/app/src/config.json (via /proc/self/fd/6), flags: 0x5000: not a directory: unknown: Are you trying to mount a directory onto a file (or vice-versa)? Check if the specified host path exists and is the expected type

Add Docker & Ping Status support

Hi!
It would be wonderful if you would add support for Docker and Ping Status 🙏.
The design and functionality are perfect; congratulations on your work 👏.

Thanks!!

Provide pre-built Docker images for arm64 platform

Hi there,

I've been using the startbase-80 Docker image on my amd64 machine, and it's been working great! However, I've recently started using an arm64 machine, and I'm unable to use the existing Docker image since it's built only for the amd64 architecture.

I'm wondering if it would be possible to provide pre-built Docker images for the arm64 platform as well. I believe this would be greatly beneficial for users like myself who are using arm64-based devices such as Raspberry Pi.

Thanks for your attention, and please let me know if you need any more information from my end.

Best regards

Icon image aspect ratio

Firstly, thanks for developing this tool. I love it's simplicity - for when one wants simply a start page with no frills.

The integration with MDI & Dashboard icons is just the right amount of complexity to allow quick and easy setup of the "dashboard" without having to save icons - thanks :-)

I've been creating categories and services, and noticed that many icons don't respect the aspect ratio of the image used, as the placeholder for all icons appears to be square. I'd suggest testing with the "costco" or "startpage" dashboard icons.

Is there a way to tweak this behaviour. I recognize that this will cause the icons to be much smaller, but this might be a preference for some like me.

I'm wondering if it is worth looking into.

New window behaviour by exeption

Hi, the simplicity of Starbase 80 continues to impress me. However, contrary to my need for simplicity, I was wondering if a minor complexity was possible.

I have a need for all links to be opened in a new window; and I use the container environment variable NEWWINDOW = true.

However I also have a logout link for my SSO, as one of the tiles/icons/entries, which I want to open in the same window.

Is it possible to have any links behave different from the global setting by exception?

Thanks for you hard work.

Config is not automatically created

Right now whenever you start the Docker container but haven't created a config, yet it will just crash.
image

It would be very nice to have it automatically generate a template config file for you. Or at least have some actual error catching. Maybe display an error message on the webpage instead of just stopping the entire container.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.