Merge pull request #16 from notclickable-jordan/snapshot

Switched to an all static page

.gitignore

@@ -1,5 +1,4 @@
 node_modules
 .DS_Store
 dist
-dist-ssr
+dist-ssr
-public

config.json.sample

@@ -1,48 +0,0 @@
-[
-	{
-		"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",
-		"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": "/icons/home-assistant.svg"
-			},
-			{
-				"name": "Synology",
-				"uri": "http://synology:5000",
-				"description": "Network storage",
-				"icon": "/icons/synology.png"
-			}
-		]
-	}
-]

docker-entrypoint.sh

@@ -1,7 +1,7 @@
 #!/bin/sh
 
 # Escape slashes
-LOGO=${LOGO//\//\\/}
+LOGO=$(echo "${LOGO}" | sed 's/\//\\\//g')
 
 # HTML replacement
 sed -i -e 's/My Website/'"${TITLE}"'/g' /app/index.html

dockerfile

@@ -1,4 +1,23 @@
-FROM node:18-alpine
+# Build site using Node JS
+FROM node:21-slim
+
+# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
+# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
+# installs, work.
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y chromium fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+ENV PUPPETEER_SKIP_DOWNLOAD true
+
+# Install puppeteer so it's available in the container.
+RUN npm init -y &&  \
+    npm i -g puppeteer
 
 ARG BUILD_DATE
 
@@ -29,7 +48,6 @@ ENV BGCOLORDARK "theme(colors.gray.950)"
 ENV NEWWINDOW "true"
 
 COPY version /
-
 EXPOSE 4173
 
 RUN chmod +x /app/docker-entrypoint.sh

package.json

@@ -1,32 +1,39 @@
 {
 	"name": "starbase-80",
 	"displayName": "Starbase 80",
-	"homepage": "https://github.com/notclickable-jordan/starbase-80",
+	"homepage": "https://www.starbase80.dev/",
 	"repository": {
-		"url": "https://github.com/notclickable-jordan/starbase-80"
+		"url": "https://github.com/notclickable-jordan/starbase-80/"
 	},
-	"version": "1.1.5",
+	"version": "1.3.0",
 	"type": "module",
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build",
-		"start": "npm run build && vite preview"
+		"serve": "vite preview",
+		"start": "node start.js",
+		"html": "html-minifier --remove-comments --collapse-whitespace --input-dir ./dist --output-dir ./dist --file-ext html",
+		"replace": "npm run replace:script",
+		"replace:script": "replace-in-file --configFile replace-script.cjs"
 	},
 	"dependencies": {
-		"@types/react-dom": "^18.2.7",
+		"@types/react": "^18.2.45",
-		"@types/react-helmet": "^6.1.6",
+		"@types/react-dom": "^18.2.17",
-		"@types/react": "^18.2.15",
+		"@types/react-helmet": "^6.1.11",
-		"@vitejs/plugin-react": "^4.0.3",
+		"@vitejs/plugin-react": "^4.2.1",
-		"autoprefixer": "^10.4.14",
+		"autoprefixer": "^10.4.16",
+		"html-minifier": "^4.0.0",
 		"js-yaml": "^4.1.0",
-		"postcss": "^8.4.26",
+		"postcss": "^8.4.32",
-		"prettier": "^3.0.0",
+		"prettier": "^3.1.1",
+		"puppeteer": "^21.6.1",
+		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-helmet": "^6.1.0",
-		"react": "^18.2.0",
+		"replace-in-file": "^7.0.2",
-		"tailwindcss": "^3.3.3",
+		"tailwindcss": "^3.3.6",
-		"typescript": "^5.1.6",
+		"typescript": "^5.3.3",
-		"vite": "^4.4.4"
+		"vite": "^5.0.8"
 	},
 	"prettier": {
 		"arrowParens": "avoid",

readme.md

@@ -32,6 +32,10 @@ Inspired by [Ben Phelps' Homepage](https://gethomepage.dev/) and [Umbrel](https:
 
 # Change history
 
+## 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.

replace-script.cjs

@@ -0,0 +1,5 @@
+module.exports = {
+	files: "./dist/index.html",
+	from: /<script[^>]+><\/script>/gi,
+	to: "",
+};

src/config/config.json

@@ -11,7 +11,7 @@
 			{
 				"name": "Bind mount",
 				"uri": "https://github.com/notclickable-jordan/docker-symphony",
-				"description": "to /app/src/config/config.json",
+				"description": "/app/src/config/config.json",
 				"icon": "docker"
 			},
 			{

start.js

@@ -0,0 +1,61 @@
+import { exec } from "child_process";
+import fs from "fs/promises";
+import puppeteer from "puppeteer";
+
+function runNpmCommand(command) {
+	return new Promise((resolve, reject) => {
+		exec(`npm ${command}`, (error, stdout, stderr) => {
+			if (error) {
+				console.error(`Error executing command: ${error}`);
+				reject(error);
+			} else {
+				console.log(`Command output: ${stdout}`);
+				resolve(stdout);
+			}
+		});
+	});
+}
+
+async function renderHomePage() {
+	const browser = await puppeteer.launch({
+		headless: true,
+		args: ["--no-sandbox", "--disable-setuid-sandbox"],
+		executablePath: "chromium", // Remove this when running locally
+	});
+	const page = await browser.newPage();
+
+	await page.goto("http://localhost:4173", { waitUntil: "networkidle0" });
+
+	// Wait for any additional content to load
+	await page.waitForNetworkIdle();
+
+	// Get the rendered HTML content
+	const renderedHTML = await page.content();
+
+	// Save the rendered HTML to a file
+	fs.writeFile("./dist/index.html", renderedHTML);
+
+	await browser.close();
+}
+
+async function runCommands() {
+	try {
+		console.log("Building React site");
+		await runNpmCommand("run build");
+
+		setTimeout(async () => {
+			console.log("Taking snapshot");
+			await renderHomePage();
+			await runNpmCommand("run html");
+			await runNpmCommand("run replace");
+		}, 2000);
+
+		console.log("Starting web server");
+		await runNpmCommand("run serve");
+	} catch (err) {
+		// Handle errors
+		console.error("An error occurred:", err);
+	}
+}
+
+runCommands();

version

@@ -1 +1 @@
-1.2.0
+1.3.0