Fix: Open in new tab not working

I fixed it by just making sure we insert a # between the host and the
location part in the url in the Home Component (that is where 404
requests ultimately land, if they don't have a # in the url).

fixes: #477

docat/docat/nginx/default

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

web/src/components/Project.tsx

@@ -12,12 +12,12 @@ interface Props {
   onFavoriteChanged: () => void
 }
 
-export default function Project(props: Props): JSX.Element {
+export default function Project (props: Props): JSX.Element {
   return (
     <div className={styles['project-card']}>
       <div className={styles['project-card-header']}>
         <Tooltip title={props.project.name} placement="top-start" arrow>
-          <Link to={`/${props.project.name}/latest`}>
+          <Link to={`${props.project.name}/latest`}>
             {props.project.logo
               ? (
                 <>

web/src/pages/Home.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 
 import ProjectRepository from '../repositories/ProjectRepository'
 import { useProjects } from '../data-providers/ProjectDataProvider'
@@ -15,14 +15,28 @@ import LoadingPage from './LoadingPage'
 import styles from './../style/pages/Home.module.css'
 import { ErrorOutline } from '@mui/icons-material'
 import { Project } from '../models/ProjectsResponse'
+import { useLocation } from 'react-router'
 
 export default function Home (): JSX.Element {
   const { projects, loadingFailed } = useProjects()
   const [nonFavoriteProjects, setNonFavoriteProjects] = useState<Project[]>([])
   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])
+
   const updateFavorites = (): void => {
     if (projects == null) return
 

web/src/pages/Search.tsx

@@ -14,7 +14,7 @@ const NO_RESULTS: SearchResult = {
 }
 const debounceMs = 600
 
-export default function Search(): JSX.Element {
+export default function Search (): JSX.Element {
   const queryParam = useSearchParams()[0].get('query') ?? ''
 
   const { projects, loadingFailed } = useProjects()
@@ -47,7 +47,9 @@ export default function Search(): JSX.Element {
 
   useEffect(() => {
     searchDebounced.cancel()
-    window.history.pushState({}, '', `/#/search?query=${searchQuery}`)
+    if (window.location.hash !== `#/search?query=${searchQuery}`) {
+      window.history.pushState({}, '', `/#/search?query=${searchQuery}`)
+    }
     searchDebounced()
   }, [searchQuery, projects, loadingFailed])
 
@@ -69,10 +71,10 @@ export default function Search(): JSX.Element {
       />
       {results === null
         ? (
-        <div className="loading-spinner" />
+          <div className="loading-spinner" />
           )
         : (
-        <SearchResults searchQuery={searchQuery} results={results} />
+          <SearchResults searchQuery={searchQuery} results={results} />
           )}
     </PageLayout>
   )