FIX: Footnote reference and content should be jumpable back and forth.

Author: benel

frontend/src/App.jsx

@@ -37,7 +37,7 @@ function App() {
           <Routes>
             <Route path="/" element={<Bookshelf {...{backend, user}} />} />
             <Route path="/registration" element={<Registration {...{backend}}/>} />
-            <Route path="/:id" element={<Lectern {...{backend, user}} />} />
+            <Route path="/:id/:margin?" element={<Lectern {...{backend, user}} />} />
           </Routes>
         </TypesContext.Provider>
       </BrowserRouter>

frontend/src/components/BrowseTools.jsx

@@ -10,7 +10,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-edit">Edit this document</Tooltip>}
         >
-          <Link to={`../${id}#${id}`} className="icon edit">
+          <Link to={id} className="icon edit">
             <PencilSquare />
           </Link>
         </OverlayTrigger>
@@ -21,7 +21,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-close">Close this document</Tooltip>}
         >
-          <Link to="#" className="icon close">
+          <Link to=".." relative="path" className="icon close">
             <ChevronBarDown />
           </Link>
         </OverlayTrigger>
@@ -32,7 +32,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-open">Open this document</Tooltip>}
         >
-          <Link to={`#${id}`} className="icon open">
+          <Link to={id} className="icon open">
             <ChevronExpand />
           </Link>
         </OverlayTrigger>
@@ -43,7 +43,7 @@ function BrowseTools({id, closable, openable, editable, focusable = true}) {
           placement="top"
           overlay={<Tooltip id="tooltip-focus">Focus on this document</Tooltip>}
         >
-          <Link to={`../${id}`} className="icon focus">
+          <Link to={`/${id}`} className="icon focus">
             <Bookmark />
           </Link>
         </OverlayTrigger>

frontend/src/components/ExistingDocument.jsx

@@ -29,7 +29,7 @@ function ExistingDocument({ document, relatedTo, verb, setLastUpdate, backend })
       .then(x => Promise.all(x))
       .then(() => {
         setLastUpdate(document._id);
-        navigate('#' + document._id);
+        navigate(document._id);
       })
       .catch(console.error);
   };

frontend/src/components/FutureDocument.jsx

@@ -66,7 +66,7 @@ const FutureDocument = ({ relatedTo, setLastUpdate, backend, user }) => {
           : relatedTo.map((object) => ({ verb, object }))
       });
       setLastUpdate(_id);
-      navigate((relatedTo.length ? '#' : `/${_id}#`) + _id);
+      navigate((relatedTo.length ? '' : `/${_id}/`) + _id);
     } catch (error) {
       console.error('Error creating document:', error);
     }

frontend/src/menu-items/DeleteDocumentAction.jsx

@@ -10,7 +10,7 @@ function DeleteDocumentAction({metadata, isFromScratch, backend, setLastUpdate})
   const handleClick = () => {
     backend.deleteDocument(metadata)
       .then(x => setLastUpdate(x.rev))
-      .then(() => navigate(isFromScratch ? '/' : '#'));
+      .then(() => navigate(isFromScratch ? '/' : '..', {relative: 'path'}));
   };
 
   return (

frontend/src/menu-items/DeleteReferenceToDocumentAction.jsx

@@ -11,7 +11,7 @@ function DeleteReferenceToDocumentAction({id, margin, backend, metadata, content
     metadata.links = metadata.links.filter(link => ![id, ...new Set([...content.filter((row) => row.value.isPartOf === id).map(({id, value}) => value._id || id)])].includes(link.object));
     backend.putDocument({...metadata})
       .then(x => setLastUpdate(x.rev))
-      .then(() => navigate('/' + margin + '#' + margin))
+      .then(() => navigate('/' + margin + '/' + margin))
       .catch(console.error);
   };
 

frontend/src/routes/Lectern.jsx

@@ -5,7 +5,7 @@ import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
 import { useState, useEffect } from 'react';
-import { useParams, useLocation } from 'react-router';
+import { useParams } from 'react-router';
 import Context from '../context';
 import ParallelDocuments from '../parallelDocuments';
 import OpenedDocuments from '../components/OpenedDocuments';
@@ -19,8 +19,7 @@ function Lectern({backend, user}) {
   const [lastUpdate, setLastUpdate] = useState();
   const [rawEditMode, setRawEditMode] = useState(false);
   const [loading, setLoading] = useState(true);
-  let {id} = useParams();
-  let margin = useLocation().hash.slice(1);
+  let {id, margin} = useParams();
   const getCaption = ({dc_title, dc_spatial}) => [dc_title, dc_spatial].filter(Boolean).join(', ');
 
   if (metadata) {

requirements/impact_of_parallel_texts.js

@@ -4,7 +4,7 @@
 
 module.exports = async (page) => {
 
-  await page.goto("37b4b9ba5cdb11ed887beb5c373fa643#09c906c6732b11ed89466ba197585f87", {
+  await page.goto("37b4b9ba5cdb11ed887beb5c373fa643/09c906c6732b11ed89466ba197585f87", {
     waitUntil: 'networkidle0'
   });
   await page.waitForTimeout(10000);