Bundle dashboard with worker assets (#73)

* Bundle dashboard with worker assets * Show server configs in info side menu
G4brym · Dec 15, 2024 · 15553eb · 15553eb
1 parent 5d12c10
commit 15553eb
Show file tree

Hide file tree

Showing 23 changed files with 200 additions and 474 deletions.
diff --git a/.github/workflows/test.yml → .github/workflows/build.yml b/.github/workflows/test.yml → .github/workflows/build.yml
@@ -1,4 +1,4 @@
-name: Test Build
+name: Build
 
 on:
   push:
@@ -17,18 +17,14 @@ on:
       - '.editorconfig'
 
 jobs:
-  test:
+  build:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
           node-version: '20.x'
-      - name: Set RELEASE_VERSION
-        run: echo "RELEASE_VERSION=0.0.1" >> $GITHUB_ENV
-      - name: Apply new version
-        run: node packages/worker/config/preparePublish.js
       - name: Install pnpm
         run: npm install -g pnpm
       - name: Install dependencies
@@ -37,3 +33,10 @@ jobs:
         run: pnpm lint
       - name: Build everything
         run: pnpm build
+      - name: Package artifact
+        run: pnpm package
+      - name: Archive package
+        uses: actions/upload-artifact@v4
+        with:
+          name: r2-explorer-npm-package
+          path: packages/worker/r2-explorer-*
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -15,17 +15,17 @@ jobs:
         with:
           node-version: '20.x'
           registry-url: 'https://registry.npmjs.org'
-      - name: Set RELEASE_VERSION
-        run: echo "RELEASE_VERSION=${GITHUB_REF#refs/*/}" >> $GITHUB_ENV
-      - name: Apply new version
-        run: node packages/worker/config/preparePublish.js
       - name: Install pnpm
         run: npm install -g pnpm
       - name: Install dependencies
         run: pnpm install
+      - name: Check Lint
+        run: pnpm lint
       - name: Build everything
         run: pnpm build
+      - name: Package artifact
+        run: pnpm package
       - name: Publish to npm
-        run: pnpm publish-npm
+        run: pnpm publish
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_PUBLISH_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -29,6 +29,9 @@ my-r2-explorer
 packages/worker/bin
 packages/worker/README.md
 packages/worker/LICENSE
+packages/worker/dist
+packages/worker/dashboard
+packages/worker/r2-explorer-*
 
 packages/worker/dev/.wrangler
 

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,4 +1 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 pnpm run lint
diff --git a/package.json b/package.json
@@ -12,7 +12,8 @@
 		"deploy-dashboard": "pnpm run --filter r2-explorer-dashboard deploy",
 		"deploy-dashboard-dev": "pnpm run --filter r2-explorer-dashboard deploy-dev",
 		"deploy-dev-worker": "pnpm run --filter r2-explorer-dev-worker deploy",
-		"publish-npm": "pnpm run --filter worker publish"
+		"package": "pnpm run --filter r2-explorer package",
+		"publish": "pnpm run --filter r2-explorer publish"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.9.4",

diff --git a/packages/dashboard/src/components/main/LeftSidebar.vue b/packages/dashboard/src/components/main/LeftSidebar.vue
@@ -45,62 +45,35 @@
       <q-btn class="q-mb-sm" @click="gotoFiles" color="blue" icon="folder_copy" label="Files" stack />
       <q-btn class="q-mb-sm" @click="gotoEmail" color="blue" icon="email" label="Email" stack />
 
-<!--      <q-btn class="q-mb-sm q-mt-auto q-mb-0" @click="settingsPopup=true" color="secondary" icon="settings" label="Server"-->
-<!--             stack />-->
-      <q-btn class="q-mb-sm q-mt-auto q-mb-0" @click="upgradePopup=true" color="secondary" icon="question_mark" label="Info"
+      <q-btn class="q-mb-sm q-mt-auto q-mb-0" @click="infoPopup=true" color="secondary" icon="question_mark"
+             label="Info"
              stack />
     </div>
   </div>
 
-  <q-dialog v-model="upgradePopup" persistent no-esc-dismiss no-route-dismiss no-backdrop-dismiss>
+  <q-dialog v-model="infoPopup" persistent no-route-dismiss>
     <q-card>
       <q-card-section>
-        <div class="text-h6">🎉 Welcome to the new Dashboard v2! 🚀</div>
+        <div class="text-h6">🎉 Thank you for using R2-Explorer! 🚀</div>
       </q-card-section>
 
       <q-card-section class="q-pt-none">
-        We're thrilled to introduce our revamped interface, designed to enhance your experience and productivity. As you
-        explore the new features and improvements, feel free to provide feedback or report any issues you encounter.
-        Your input helps us fine-tune the dashboard to meet your needs better.<br>
+        You are running version <b>{{ mainStore.version }}</b><br>
+        <template v-if="updateAvailable">
+          Latest version is <b>{{latestVersion}}</b>, learn how to <a href="https://r2explorer.dev/getting-started/updating-your-project/" target="_blank">update your instance here</a>.<br>
+        </template>
         <br>
-        To revisit this message in the future, simply click on the question mark icon located in the left corner. Your
-        feedback is invaluable to us, so don't hesitate to reach out with any thoughts or concerns.<br>
-        <br>
-        Please report issues here: <a href="https://github.com/G4brym/R2-Explorer/issues" target="_blank">https://github.com/G4brym/R2-Explorer/issues</a><br>
-        <br>
-        If you would like to continue using the old Dashboard, please follow this <a
-        href="https://r2explorer.dev/guides/continue-using-legacy-dashboard/" target="_blank">guide from the
-        documentation</a><br>
-        <br>
-        Thank you for being a part of our journey towards excellence! 🌟<br>
-        <br>
-        Best regards<br>
-      </q-card-section>
-
-      <q-card-actions align="right">
-        <q-btn flat label="OK" color="primary" v-close-popup />
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
-  <q-dialog v-model="settingsPopup">
-    <q-card>
-      <q-card-section>
-        <div class="text-h6">Your server configurations</div>
-      </q-card-section>
-
-      <q-card-section class="q-pt-none">
-        <q-input
-          filled
-          disable
-          v-if="mainStore.username"
-          v-model="mainStore.username"
-        />
-        <q-input
-          filled
-          disable
-          :model-value="mainStore.version"
-        />
+        <template v-if="mainStore.auth">
+          <b>Authentication</b><br>
+          Method: {{ mainStore.auth.type }}<br>
+          Username: {{ mainStore.auth.username }}
+        </template>
+        <template v-else>
+          Not authenticated
+        </template>
+        <br><br>
+        <b>Server Configuration</b><br>
+        {{ JSON.stringify(mainStore.config, null, 2) }}
       </q-card-section>
 
       <q-card-actions align="right">
@@ -122,8 +95,9 @@ import { defineComponent } from "vue";
 export default defineComponent({
 	name: "LeftSidebar",
 	data: () => ({
-		upgradePopup: false,
-		settingsPopup: false,
+		infoPopup: false,
+		updateAvailable: false,
+		latestVersion: "",
 	}),
 	components: { CreateFolder, CreateFile },
 	methods: {
@@ -139,6 +113,24 @@ export default defineComponent({
 				params: { bucket: this.selectedBucket },
 			});
 		},
+		isUpdateAvailable: (currentVersion, latestVersion) => {
+			// Split versions into parts and convert to numbers
+			const current = currentVersion.split(".").map(Number);
+			const latest = latestVersion.split(".").map(Number);
+
+			// Compare major version
+			if (latest[0] > current[0]) return true;
+			if (latest[0] < current[0]) return false;
+
+			// Compare minor version
+			if (latest[1] > current[1]) return true;
+			if (latest[1] < current[1]) return false;
+
+			// Compare patch version
+			if (latest[2] > current[2]) return true;
+
+			return false;
+		},
 	},
 	computed: {
 		selectedBucket: function () {
@@ -148,12 +140,15 @@ export default defineComponent({
 			return this.$route.name.split("-")[0];
 		},
 	},
-	mounted: function () {
-		const alertSeen = localStorage.getItem("DASH_V2_ALERT");
-
-		if (!alertSeen) {
-			this.upgradePopup = true;
-			localStorage.setItem("DASH_V2_ALERT", true);
+	async mounted() {
+		const resp = await fetch(
+			"https://api.github.com/repos/G4brym/R2-Explorer/releases/latest",
+		);
+		const parsed = await resp.json();
+		const latestVersion = parsed.tag_name.replace("v", "");
+		if (this.isUpdateAvailable(this.mainStore.version, latestVersion)) {
+			this.latestVersion = latestVersion;
+			this.updateAvailable = true;
 		}
 	},
 	setup() {

diff --git a/packages/dashboard/src/stores/main-store.js b/packages/dashboard/src/stores/main-store.js
@@ -5,9 +5,9 @@ export const useMainStore = defineStore("main", {
 	state: () => ({
 		// Config
 		apiReadonly: true,
-		username: "",
+		auth: {},
+		config: {},
 		version: "",
-		dashboardUrl: "",
 		showHiddenFiles: false,
 
 		// Frontend data
@@ -37,9 +37,9 @@ export const useMainStore = defineStore("main", {
 				});
 
 				this.apiReadonly = response.data.config.readonly;
-				this.username = response.data.config.user?.username;
-				this.version = response.data.config.version;
-				this.dashboardUrl = response.data.config.dashboardUrl;
+				this.config = response.data.config;
+				this.auth = response.data.auth;
+				this.version = response.data.version;
 				this.showHiddenFiles = response.data.config.showHiddenFiles;
 			} catch (error) {
 				console.log(error);

diff --git a/packages/worker/config/preparePublish.js b/packages/worker/config/preparePublish.js
diff --git a/packages/worker/dev/index.ts b/packages/worker/dev/index.ts
@@ -3,9 +3,7 @@ import { R2Explorer } from "../src";
 const baseConfig = {
 	readonly: false,
 	cors: true,
-	showHiddenFiles: true,
-	dashboardUrl: "https://dev.r2-explorer-dashboard.pages.dev/",
-	cacheAssets: false,
+	showHiddenFiles: true
 };
 
 export default {

diff --git a/packages/worker/dev/wrangler.toml b/packages/worker/dev/wrangler.toml
@@ -1,19 +1,11 @@
 name = "my-r2-explorer"
-compatibility_date = "2023-05-12"
+compatibility_date = "2024-11-06"
 main = "index.ts"
 workers_dev = true
+assets = { directory = "../../dashboard/dist/spa", binding = "ASSETS", html_handling = "auto-trailing-slash", not_found_handling = "single-page-application" }
 
 [[r2_buckets]]
 binding = 'teste'
 bucket_name = 'teste'
 preview_bucket_name = 'teste'
 
-[[r2_buckets]]
-binding = 'storage'
-bucket_name = 'storage'
-preview_bucket_name = 'storage'
-
-[[r2_buckets]]
-binding = 'drive'
-bucket_name = 'drive'
-preview_bucket_name = 'drive'
diff --git a/packages/worker/package.json b/packages/worker/package.json
@@ -1,17 +1,22 @@
 {
 	"name": "r2-explorer",
-	"version": "0.0.1",
+	"version": "1.1.0",
 	"description": "A Google Drive Interface for your Cloudflare R2 Buckets",
 	"main": "./dist/index.js",
 	"module": "./dist/index.mjs",
 	"types": "./dist/index.d.ts",
-	"files": ["dist", "LICENSE", "README.md"],
+	"files": [
+		"dashboard",
+		"dist",
+		"LICENSE",
+		"README.md"
+	],
 	"scripts": {
-		"build": "tsup src/index.ts --format cjs,esm --dts",
+		"build": "tsup src/index.ts --format cjs,esm --dts && cp -R ../dashboard/dist/spa/ dashboard/ && cp ../../README.md . && cp ../../LICENSE .",
 		"lint": "npx @biomejs/biome check src/ tests/ || (npx @biomejs/biome check --write src/ tests/; exit 1)",
 		"test": "vitest run --root tests",
-		"prepare": "husky",
-		"package": "npm run build && npm pack"
+		"package": "npm run build && npm pack",
+    "publish": "npm publish"
 	},
 	"publishConfig": {
 		"access": "public"
@@ -54,9 +59,10 @@
 		"wrangler": "^3.91.0"
 	},
 	"dependencies": {
-		"chanfana": "^2.4.2",
-		"hono": "^4.6.12",
+		"@hono/cloudflare-access": "^0.1.0",
+		"chanfana": "^2.5.1",
+		"hono": "^4.6.14",
 		"postal-mime": "^2.3.2",
-		"zod": "^3.23.8"
+		"zod": "^3.24.1"
 	}
 }