Improved readme

Updated variable replacement

.gitignore

@@ -3,3 +3,4 @@ node_modules
 dist
 dist-ssr
 src/config.json
+public

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 "$@"

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",

readme.md

@@ -6,15 +6,53 @@
 
 # About
 
-<img src="./preview.jpg" alt="" />
-
 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/).
+
+<img src="./preview.jpg" alt="" />
+
+# 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
 [
 	{

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(
 	<React.StrictMode>
-		<IndexPage title="HTMLTITLE" icon="LOGO" />
+		<IndexPage title={PAGETITLE} icon={PAGEICON} />
 	</React.StrictMode>
 );

src/variables.ts

@@ -0,0 +1,2 @@
+export const PAGETITLE = "My Website";
+export const PAGEICON = "/logo.png";