diff --git a/.gitignore b/.gitignore
index 2a199e2..2c1f63f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,4 +2,5 @@ node_modules
.DS_Store
dist
dist-ssr
-src/config.json
\ No newline at end of file
+src/config.json
+public
\ No newline at end of file
diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
index ac0ced2..ccdf44e 100644
--- a/docker-entrypoint.sh
+++ b/docker-entrypoint.sh
@@ -1,15 +1,10 @@
#!/bin/sh
-echo "Replacing HTMLTITLE with ${title} in /app/index.html"
-sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/index.html
-
-echo "Replacing HTMLTITLE with ${title} in /app/src/main.tsx"
-sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/src/main.tsx
-
-# Escape slashes... apparently
+# Escape slashes
LOGO=${LOGO//\//\\/}
-echo "Replacing LOGO with ${LOGO} in /app/src/main.tsx"
-sed -i -e 's/LOGO/'"${LOGO}"'/g' /app/src/main.tsx
+sed -i -e 's/PAGETITLE = "My Website"/'"${TITLE}"'/g' /app/index.html
+sed -i -e 's/HTMLTITLE/'"${TITLE}"'/g' /app/src/variables.ts
+sed -i -e 's/PAGEICON = "\/logo\.png"/'"${LOGO}"'/g' /app/src/variables.ts
exec "$@"
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 08b9970..1c18e7a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
- "name": "sb80",
- "version": "1.0.0",
+ "name": "starbase-80",
+ "version": "1.0.1",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
- "name": "sb80",
- "version": "1.0.0",
+ "name": "starbase-80",
+ "version": "1.0.1",
"dependencies": {
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
diff --git a/readme.md b/readme.md
index 6f53718..00223bc 100644
--- a/readme.md
+++ b/readme.md
@@ -6,15 +6,53 @@
# About
-
-
A nice looking homepage for Docker containers or any services and links.
No actual integration with Docker. Loads instantly. No dark theme.
If you make a change to the config JSON, restart this container and refresh.
-Provide your own icons.
+Inspired by [Ben Phelps' Homepage](https://gethomepage.dev/) and [Umbrel](https://umbrel.com/).
+
+
+
+# Icons
+
+## Use your own
+
+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
+
+# Bind mount
+./icons:/app/public/icons
+
+# Specify an 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
+# Specify an 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-`.
+
+```bash
+# Specify an icon in config.json
+"icon": "mdi-cloud"
+```
# Docker compose
@@ -25,8 +63,8 @@ services:
ports:
- 4173:4173
environment:
- - TITLE=My Homepage
- - LOGO=/logo.png
+ - TITLE=Starbase 80 # defaults to "My Website"
+ - LOGO=/starbase80.jpg # defaults to /logo.png
volumes:
- ./config.json:/app/src/config.json # required
- ./public/favicon.ico:/app/public/favicon.ico # optional
@@ -36,6 +74,40 @@ services:
# config.json format
+## Categories
+
+Can have as many categories as you like.
+
+- **category**: Title, optional, displays above services
+- **services**: Array of services
+
+## Service
+
+- **name**: Name, required
+- **uri**: Hyperlink, required
+- **description**: 2-3 words, optional
+- **icon**: 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/))
+
+## Template
+
+```json
+[
+ {
+ "category": "Category name",
+ "services": [
+ {
+ "name": "My App",
+ "uri": "https://website.com",
+ "description": "Fun site",
+ "icon": "/icons/myapp.png"
+ }
+ ]
+ }
+]
+```
+
+## Example
+
```json
[
{
diff --git a/src/main.tsx b/src/main.tsx
index 16e5007..1179b26 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -2,9 +2,10 @@ import React from "react";
import ReactDOM from "react-dom/client";
import { IndexPage } from "./pages";
import "./tailwind.css";
+import { PAGEICON, PAGETITLE } from "./variables";
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
+
);
diff --git a/src/variables.ts b/src/variables.ts
new file mode 100644
index 0000000..0745a8f
--- /dev/null
+++ b/src/variables.ts
@@ -0,0 +1,2 @@
+export const PAGETITLE = "My Website";
+export const PAGEICON = "/logo.png";