feat(web): adopt browser history mode

Author: stevapple

Dockerfile

@@ -1,5 +1,5 @@
 # building frontend
-FROM node:22-slim as frontend
+FROM node:22-slim AS frontend
 WORKDIR /app/frontend
 
 COPY web/package.json web/yarn.lock ./
@@ -40,8 +40,8 @@ FROM python:3.12-slim
 ENV MAX_UPLOAD_SIZE=100M
 
 # set up the system
-RUN apt update && \
-    apt install --yes nginx dumb-init libmagic1 gettext && \
+RUN apt-get update && \
+    apt-get install --yes nginx dumb-init libmagic1 gettext && \
     rm -rf /var/lib/apt/lists/*
 
 RUN mkdir -p /var/docat/doc

docat/docat/nginx/default

@@ -23,6 +23,6 @@ server {
     }
 
     location / {
-        try_files $uri $uri/ =404;
+        try_files $uri $uri/ /index.html =404;
     }
 }

web/src/App.tsx

@@ -1,4 +1,4 @@
-import { createHashRouter, RouterProvider } from 'react-router-dom'
+import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import { ConfigDataProvider } from './data-providers/ConfigDataProvider'
 import { MessageBannerProvider } from './data-providers/MessageBannerProvider'
 import { ProjectDataProvider } from './data-providers/ProjectDataProvider'
@@ -14,7 +14,7 @@ import NotFound from './pages/NotFound'
 import Upload from './pages/Upload'
 
 function App(): JSX.Element {
-  const router = createHashRouter([
+  const router = createBrowserRouter([
     {
       path: '/',
       errorElement: <NotFound />,

web/src/pages/Docs.tsx

@@ -103,7 +103,7 @@ export default function Docs(): JSX.Element {
     hash: string,
     hideUi: boolean
   ): string => {
-    return `#/${project}/${version}/${encodeURIComponent(page)}${hash}${hideUi ? '?hide-ui=true' : ''}`
+    return `/${project}/${version}/${encodeURIComponent(page)}${hash}${hideUi ? '?hide-ui=true' : ''}`
   }
 
   const updateUrl = (newVersion: string, hideUi: boolean): void => {

web/src/pages/Home.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 
 import { Delete, ErrorOutline, FileUpload, KeyboardArrowDown, Lock } from '@mui/icons-material';
-import { useLocation } from 'react-router';
 import { useProjects } from '../data-providers/ProjectDataProvider';
 import { useSearch } from '../data-providers/SearchProvider';
 import { type Project } from '../models/ProjectsResponse';
@@ -22,25 +21,12 @@ import styles from './../style/pages/Home.module.css';
 export default function Home(): JSX.Element {
   const { loadingFailed } = useProjects()
   const { stats, loadingFailed: statsLoadingFailed } = useStats()
-  const { filteredProjects: projects, query, setQuery } = useSearch()
+  const { filteredProjects: projects, query } = useSearch()
   const [showAll, setShowAll] = useState(false);
   const [favoriteProjects, setFavoriteProjects] = useState<Project[]>([])
 
-  const location = useLocation()
-
   document.title = 'Home | docat'
 
-  // insert # into the url if it's missing
-  useEffect(() => {
-    const nonHostPart = window.location.href.replace(window.location.origin, '')
-
-    if (nonHostPart.startsWith('#') || nonHostPart.startsWith('/#')) {
-      return
-    }
-
-    window.location.replace(`/#${nonHostPart}`)
-  }, [location, setQuery, projects])
-
   const updateFavorites = (): void => {
     if (projects == null) return