fix: resolve blank screen caused by redux-persist refactor

fix: set Vercel output directory to dist
Vercel defaults to "build" but Vite outputs to "dist".
2026-06-09 17:45:06 +08:00 · 2026-06-08 17:00:01 +08:00 · 2026-06-08 16:54:35 +08:00 · 2026-06-08 16:50:14 +08:00 · 2026-06-08 16:47:43 +08:00 · 2026-06-08 16:43:43 +08:00
21 changed files with 815 additions and 1343 deletions
@@ -0,0 +1,2 @@
+# SEO Site URL
+VITE_SEO_SITE_URL=http://localhost:5173
@@ -0,0 +1,37 @@
+name: Deploy to Vercel
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '24'
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: latest
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build
+        run: pnpm build
+
+      - name: Deploy to Vercel
+        uses: amondnet/vercel-action@v42.3.0
+        with:
+          vercel-token: ${{ secrets.VERCEL_TOKEN }}
+          vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
+          vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
+          vercel-args: '--prod'
+          working-directory: ./
@@ -1,27 +0,0 @@
-# To get started with Dependabot version updates, you'll need to specify which
-# package ecosystems to update and where the package manifests are located.
-# Please see the documentation for all configuration options:
-# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
-
-version: 2
-updates:
-  - package-ecosystem: "npm"
-    directory: "/"
-    schedule:
-      interval: "weekly"
-    commit-message:
-      prefix: "chore: "
-
-    groups:
-      dependency-updates:
-        patterns: ["*"]
-        update-types: ["minor", "patch"]
-
-    ignore:
-      - dependency-name: "@types/node"
-        update-types: ["version-update:semver-major"]
-
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-      interval: "daily"
@@ -0,0 +1,34 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+The format is based on [Keep a Changelog](https://keepachangelog.com/),
+and this project adheres to [Semantic Versioning](https://semver.org/).
+
+## [1.1.2] - 2026-03-02
+
+### Changed
+- Refined sample datasets to better demonstrate JSON tree navigation and edge cases.
+
+### Removed
+- Removed the integrated Changelog page from the system UI.
+
+## [1.1.1] - 2026-02-24
+
+### Added
+- Added syntax highlighting for JSONPath expressions to improve visual readability.
+
+## [1.1.0] - 2026-02-24
+
+### Added
+- Implemented sortable table views for JSON arrays with CSV export functionality.
+- Introduced a dedicated tool layout featuring a categorised sidebar menu for efficient switching.
+- Added one-click functionality to copy JSONPath-selected data as raw JSON.
+- Categorised tools into "JSON Processing" (Viewer, Grid) and "Daily Tools" (BMI Calculator).
+
+## [1.0.0] - 2026-01-19
+
+### Added
+- Initial release.
+- Full-featured JSON viewer with JSONPath query support and CSV export.
+- BMI calculator with category guidance and health advice.
+- Internationalisation support for British English and Simplified Chinese.
@@ -12,41 +12,33 @@
    "predeploy": "pnpm build"
  },
  "dependencies": {
-    "@reduxjs/toolkit": "^2.11.2",
-    "@tailwindcss/vite": "^4.1.18",
-    "axios": "^1.13.2",
-    "dayjs": "^1.11.19",
-    "i18next": "^25.7.4",
-    "i18next-browser-languagedetector": "^8.2.0",
-    "jsonpath": "^1.1.1",
-    "lodash": "^4.17.21",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
-    "react-i18next": "^16.5.3",
-    "react-redux": "^9.2.0",
-    "react-router": "^7.12.0",
-    "react-router-dom": "^7.12.0",
+    "@reduxjs/toolkit": "^2.12.0",
+    "@tailwindcss/vite": "^4.3.0",
+    "axios": "^1.17.0",
+    "dayjs": "^1.11.21",
+    "i18next": "^26.3.1",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "jsonpath": "^1.3.0",
+    "lodash": "^4.18.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-i18next": "^17.0.8",
+    "react-redux": "^9.3.0",
+    "react-router": "^7.17.0",
+    "react-router-dom": "^7.17.0",
    "redux-persist": "^6.0.0",
-    "tailwindcss": "^4.1.18"
+    "tailwindcss": "^4.3.0"
  },
  "devDependencies": {
    "@types/jsonpath": "^0.2.4",
-    "@types/lodash": "^4.17.23",
-    "@types/node": "^22.19.7",
-    "@types/react": "^19.2.8",
+    "@types/lodash": "^4.17.24",
+    "@types/node": "^24.13.1",
+    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "globals": "^16.5.0",
-    "prettier": "^3.8.0",
-    "typescript": "~5.9.3",
-    "vite": "^7.3.1"
-  },
-  "pnpm": {
-    "ignoredBuiltDependencies": [
-      "esbuild"
-    ],
-    "onlyBuiltDependencies": [
-      "@tailwindcss/oxide"
-    ]
+    "@vitejs/plugin-react": "^6.0.2",
+    "globals": "^17.6.0",
+    "prettier": "^3.8.3",
+    "typescript": "~6.0.3",
+    "vite": "^8.0.16"
  }
 }
@@ -0,0 +1,2 @@
+allowBuilds:
+  esbuild: true
@@ -0,0 +1,18 @@
+import { useTranslation } from "react-i18next"
+import { useMemo } from "react"
+import dayjs from "dayjs"
+
+export default function Footer() {
+  const { t } = useTranslation()
+  const today = useMemo(() => dayjs(), [])
+
+  return (
+    <footer className="bg-white border-t shrink-0">
+      <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
+        <p className="text-center text-sm text-gray-500">
+          {t("app.copyright", { year: today.year() })}
+        </p>
+      </div>
+    </footer>
+  )
+}
@@ -0,0 +1,39 @@
+import { Link } from "react-router-dom"
+import { useTranslation } from "react-i18next"
+import LanguageSwitcher from "@/components/language-switcher"
+
+export default function Header() {
+  const { t } = useTranslation()
+
+  return (
+    <header className="bg-white shadow-sm border-b">
+      <div className="px-4">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center">
+            <h1 className="text-xl font-semibold text-gray-900">{t("app.title")}</h1>
+          </div>
+          <div className="flex items-center gap-4">
+            <nav className="flex space-x-8">
+              <Link
+                to="/"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.home")}
+              </Link>
+              <Link
+                to="/about"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.about")}
+              </Link>
+              <Link
+                to="/contact"
+                className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
+                {t("navigation.contact")}
+              </Link>
+            </nav>
+            <LanguageSwitcher />
+          </div>
+        </div>
+      </div>
+    </header>
+  )
+}
@@ -1,4 +1,4 @@
-import { useMemo, useRef } from "react"
+import React, { useMemo, useRef } from "react"

 type JsonCodeEditorProps = {
  value: string
@@ -7,7 +7,7 @@ type SeoProps = {
  path: string
 }

-const SITE_URL = "https://dev-lab.onixbyte.dev"
+const SITE_URL = import.meta.env.VITE_SEO_SITE_URL
 const DEFAULT_IMAGE = `${SITE_URL}/onixbyte.svg`

 function setMetaTag(selector: string, attr: string, value: string) {
@@ -21,7 +21,7 @@ void i18n
  .init({
    resources,
    fallbackLng: "en-GB",
-    debug: process.env.NODE_ENV === "development",
+    debug: import.meta.env.DEV,

    interpolation: {
      escapeValue: false, // React already does escaping
@@ -3,6 +3,8 @@ import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import dayjs from "dayjs"
 import LanguageSwitcher from "@/components/language-switcher"
+import Header from "@/components/header"
+import Footer from "@/components/footer"

 /**
 * Main application component that serves as the root layout.
@@ -15,46 +17,7 @@ export default function HeroLayout() {
  return (
    <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
      {/* Navigation Header */}
-      <header className="bg-white shadow-sm border-b">
-        <div className="px-4">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-semibold text-gray-900">
-                {t("app.title")}
-              </h1>
-            </div>
-            <div className="flex items-center gap-4">
-              <nav className="flex space-x-8">
-                <Link
-                  to="/"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.home")}
-                </Link>
-                <Link
-                  to="/about"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.about")}
-                </Link>
-                <Link
-                  to="/contact"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.contact")}
-                </Link>
-                <Link
-                  to="/changelog"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
-                >
-                  {t("navigation.changelog")}
-                </Link>
-              </nav>
-              <LanguageSwitcher />
-            </div>
-          </div>
-        </div>
-      </header>
+      <Header></Header>

      {/* Main Content Area */}
      <main className="flex-1 p-4 overflow-hidden min-h-0">
@@ -62,13 +25,7 @@ export default function HeroLayout() {
      </main>

      {/* Footer */}
-      <footer className="bg-white border-t shrink-0">
-        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-          <p className="text-center text-sm text-gray-500">
-            {t("app.copyright", { year: today.year() })}
-          </p>
-        </div>
-      </footer>
+      <Footer></Footer>
    </div>
  )
 }
@@ -3,6 +3,8 @@ import { Link, NavLink, Outlet } from "react-router-dom"
 import { useTranslation } from "react-i18next"
 import dayjs from "dayjs"
 import LanguageSwitcher from "@/components/language-switcher"
+import Header from "@/components/header"
+import Footer from "@/components/footer"

 export default function ToolsLayout() {
  const today = useMemo(() => dayjs(), [])
@@ -28,40 +30,7 @@ export default function ToolsLayout() {

  return (
    <div className="h-screen bg-gray-50 flex flex-col overflow-hidden">
-      <header className="bg-white shadow-sm border-b">
-        <div className="px-4">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-xl font-semibold text-gray-900">{t("app.title")}</h1>
-            </div>
-            <div className="flex items-center gap-4">
-              <nav className="flex space-x-8">
-                <Link
-                  to="/"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.home")}
-                </Link>
-                <Link
-                  to="/about"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.about")}
-                </Link>
-                <Link
-                  to="/contact"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.contact")}
-                </Link>
-                <Link
-                  to="/changelog"
-                  className="text-gray-500 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium">
-                  {t("navigation.changelog")}
-                </Link>
-              </nav>
-              <LanguageSwitcher />
-            </div>
-          </div>
-        </div>
-      </header>
+      <Header></Header>

      <main className="flex-1 p-4 overflow-hidden min-h-0">
        <div className="h-full flex gap-4 overflow-hidden">
@@ -120,13 +89,7 @@ export default function ToolsLayout() {
        </div>
      </main>

-      <footer className="bg-white border-t shrink-0">
-        <div className="max-w-7xl mx-auto py-4 px-4 sm:px-6 lg:px-8">
-          <p className="text-center text-sm text-gray-500">
-            {t("app.copyright", { year: today.year() })}
-          </p>
-        </div>
-      </footer>
+      <Footer></Footer>
    </div>
  )
 }
@@ -1,153 +0,0 @@
-import { useMemo } from "react"
-import { useTranslation } from "react-i18next"
-import Seo from "@/components/seo"
-
-interface ChangeEntry {
-  type: "feat" | "fix" | "refactor" | "chore"
-  title: string
-  description?: string
-  date?: string
-}
-
-interface ChangelogVersion {
-  version: string
-  date: string
-  entries: ChangeEntry[]
-}
-
-const CHANGELOG_DATA: ChangelogVersion[] = [
-  {
-    version: "1.1.1",
-    date: "2026-02-24",
-    entries: [
-      {
-        type: "feat",
-        title: "JSON Path Highlighting",
-        description: "Add highlighting for JSON Path expression."
-      }
-    ]
-  },
-  {
-    version: "1.1.0",
-    date: "2026-02-24",
-    entries: [
-      {
-        type: "feat",
-        title: "JSON Grid",
-        description: "Convert JSON arrays into sortable table view with CSV export functionality"
-      },
-      {
-        type: "feat",
-        title: "Tools Layout with Collapsible Menu",
-        description: "Added a dedicated tools layout with categorised sidebar menu for quick tool switching",
-      },
-      {
-        type: "feat",
-        title: "Copy Selected JSON Feature",
-        description: "Added ability to copy JSONPath selected data as raw JSON with one-click action",
-      },
-      {
-        type: "feat",
-        title: "Tool Categories",
-        description: "Organised tools into JSON Processing (JSON Viewer, JSON Grid) and Daily Tools (BMI Calculator)",
-      },
-      {
-        type: "fix",
-        title: "Live Application Link",
-        description: "Updated live application link in README",
-      },
-    ],
-  },
-  {
-    version: "1.0.0",
-    date: "2026-01-19",
-    entries: [
-      {
-        type: "feat",
-        title: "JSON Viewer with JSONPath",
-        description: "Full-featured JSON viewer with JSONPath query support and CSV export",
-      },
-      {
-        type: "feat",
-        title: "BMI Calculator",
-        description: "Calculate Body Mass Index with category guidance and health advice",
-      },
-      {
-        type: "feat",
-        title: "Internationalization",
-        description: "Support for English (GB) and Simplified Chinese with language switcher",
-      },
-    ],
-  },
-]
-
-type ChangeTypeKey = "feat" | "fix" | "refactor" | "chore"
-
-export default function Changelog() {
-  const { t } = useTranslation()
-
-  const changeTypeLabels = useMemo(() => {
-    const labels: Record<ChangeTypeKey, { label: string; colour: string }> = {
-      feat: { label: t("changelog.featureType"), colour: "bg-emerald-100 text-emerald-700" },
-      fix: { label: t("changelog.fixType"), colour: "bg-blue-100 text-blue-700" },
-      refactor: { label: t("changelog.refactorType"), colour: "bg-purple-100 text-purple-700" },
-      chore: { label: t("changelog.choreType"), colour: "bg-slate-100 text-slate-700" },
-    }
-    return labels
-  }, [t])
-
-  return (
-    <div className="min-h-screen bg-gray-50">
-      <Seo
-        title={t("seo.changelog.title")}
-        description={t("seo.changelog.description")}
-        path="/changelog"
-      />
-
-      {/* Header */}
-      <div className="bg-white shadow-sm border-b">
-        <div className="max-w-4xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
-          <h1 className="text-4xl font-bold text-gray-900">{t("changelog.title")}</h1>
-          <p className="mt-2 text-lg text-gray-600">{t("changelog.description")}</p>
-        </div>
-      </div>
-
-      {/* Timeline */}
-      <div className="max-w-4xl mx-auto px-4 py-12 sm:px-6 lg:px-8">
-        <div className="space-y-8">
-          {CHANGELOG_DATA.map((changelog) => (
-            <div key={changelog.version} className="relative">
-              {/* Version header */}
-              <div className="flex items-baseline gap-4 mb-6">
-                <h2 className="text-2xl font-bold text-gray-900">v{changelog.version}</h2>
-                <time className="text-sm text-gray-500">{changelog.date}</time>
-              </div>
-
-              {/* Changes list */}
-              <div className="space-y-4">
-                {changelog.entries.map((entry, idx) => {
-                  const typeInfo = changeTypeLabels[entry.type as ChangeTypeKey]
-                  return (
-                    <div key={`${changelog.version}-${idx}`} className="bg-white rounded-lg border border-slate-200 p-4">
-                      <div className="flex items-start gap-3">
-                        <span className={`inline-block px-2.5 py-0.5 rounded text-xs font-semibold ${typeInfo.colour}`}>
-                          {typeInfo.label}
-                        </span>
-                        <div className="flex-1">
-                          <h3 className="text-base font-semibold text-gray-900">{entry.title}</h3>
-                          {entry.description && (
-                            <p className="mt-1 text-sm text-gray-600">{entry.description}</p>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                  )
-                })}
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </div>
-  )
-}
@@ -9,7 +9,6 @@ export default function JsonGrid() {
  const { t } = useTranslation()

  const initialData = [
-    { id: 0, name: "TTY", role: "CEO", active: true },
    { id: 1, name: "Alice", role: "Developer", active: true },
    { id: 2, name: "Bob", role: "Designer", active: false },
    { id: 3, name: "Charlie", role: "Product Manager", active: true },
@@ -52,7 +52,6 @@ export default function JsonViewer() {
    location: "London",
    is_active: true,
    staff_members: [
-      { id: 100, name: "TTY", roles: ["CEO"] },
      { id: 101, name: "Alice", roles: ["Admin", "Manager"] },
      { id: 102, name: "Bob", roles: ["Developer"] },
    ],
@@ -35,11 +35,7 @@ const router = createBrowserRouter(
        {
          path: "contact",
          lazy: lazy(() => import("@/page/contact")),
-        },
-        {
-          path: "changelog",
-          lazy: lazy(() => import("@/page/changelog")),
-        },
+        }
      ],
    },
    {
@@ -10,10 +10,11 @@ import {
  PURGE,
  REGISTER,
 } from "redux-persist"
-import storage from "redux-persist/lib/storage/session" // use session storage
-// import storage from "redux-persist/lib/storage" // use local storage
+import createWebStorage from "redux-persist/es/storage/createWebStorage"
 import authReducer from "./auth-slice"

+const storage = createWebStorage(import.meta.env.VITE_REDUX_STORAGE ?? "local")
+
 const persistConfig = {
  key: "root",
  storage,
@@ -1,6 +1,7 @@
 /// <reference types="vite/client" />
 interface ImportMetaEnv {
-  // todo add env properties here
+  readonly VITE_SEO_SITE_URL: string
+  readonly VITE_REDUX_STORAGE: string
 }

 interface ImportMeta {
@@ -1,4 +1,5 @@
 {
+  "outputDirectory": "dist",
  "rewrites": [
    {
      "source": "/(.*)",
Author	SHA1	Message	Date
siujamo	cde8813c77	fix: resolve blank screen caused by redux-persist refactor Deploy to Vercel / deploy (push) Canceled after 0s Details	2026-06-09 17:45:06 +08:00
siujamo	1f74a55dff	fix: set Vercel output directory to dist Vercel defaults to "build" but Vite outputs to "dist".	2026-06-08 17:00:01 +08:00
siujamo	531dc6e9aa	fix: replace process.env.NODE_ENV with import.meta.env.DEV process.env is not available in the browser tsconfig without @types/node. import.meta.env.DEV is Vite's built-in equivalent.	2026-06-08 16:54:35 +08:00
siujamo	130e988143	chore: bump dependencies	2026-06-08 16:50:14 +08:00
siujamo	45f8d0ff38	ci: bump vercel-action to v42.3.0	2026-06-08 16:47:43 +08:00
siujamo	b7a772dc47	fix: replace .npmrc with pnpm-workspace.yaml for build config pnpm-workspace.yaml is the canonical location for allowBuilds in pnpm v10+, and the package.json trailing comma was cleaned up.	2026-06-08 16:43:43 +08:00
siujamo	66f97ee491	fix: migrate pnpm config from package.json to .npmrc The "pnpm" field in package.json is no longer read by pnpm v10+, causing ERR_PNPM_IGNORED_BUILDS in CI. Moved onlyBuiltDependencies to .npmrc.	2026-06-08 16:41:47 +08:00
siujamo	5db1b5a836	ci: add Gitea Actions workflow for Vercel deployment	2026-06-08 16:39:45 +08:00
Jam'o Siu	624fd61de8	Merge pull request #4 from onixbyte/release/1.1.2 Release 1.1.2	2026-03-02 09:49:14 +08:00
siujamo	e3a33403d0	docs: added changelog	2026-03-02 09:42:44 +08:00
siujamo	25d95df8f7	refactor: extract header and footer components and removed link to changelog page	2026-03-02 09:42:20 +08:00
siujamo	605087f0a8	refactor: remove changelog page	2026-03-02 09:41:42 +08:00
siujamo	c1ec1a000e	Merge remote-tracking branch 'origin/develop' into develop	2026-03-02 09:10:09 +08:00
siujamo	94227f79ae	refactor: change example data	2026-03-02 09:09:55 +08:00
zihluwang	b339995084	Merge branch 'main' into develop	2026-02-26 13:42:07 +08:00
zihluwang	8226b6fdff	refactor: replace inline type definition with ChangeTypeKey for better readability	2026-02-26 13:39:46 +08:00
siujamo	4209e4ad0f	fix: import React in JsonCodeEditor for proper JSX support	2026-02-25 09:14:38 +08:00
siujamo	aed0f63429	feat: add VITE_SEO_SITE_URL to environment configuration and update SEO component	2026-02-25 09:14:18 +08:00