From cb52e9654242d8501f5bd3081ab6799197f6781f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Wed, 5 Jul 2023 14:38:48 +0200
Subject: [PATCH 1/2] Use generic routing Link component everywhere
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This way we can get rid of the project browsing specific ProjectLink
component and simplify the router types.

Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 httpd-client/index.ts                         |  2 +
 src/components/Comment.svelte                 |  5 ++-
 src/components/Markdown.svelte                | 23 +++++++----
 src/components/ProjectLink.svelte             | 31 --------------
 src/components/Thread.svelte                  |  7 ++++
 src/views/projects/Blob.svelte                | 12 +++++-
 src/views/projects/BranchSelector.svelte      | 27 +++++++++++--
 src/views/projects/Browser.svelte             | 19 +++++----
 src/views/projects/Cob/Revision.svelte        |  6 +++
 src/views/projects/Commit.svelte              | 12 ++++--
 src/views/projects/History.svelte             |  6 +--
 src/views/projects/Issue.svelte               |  9 ++++-
 src/views/projects/Issue/New.svelte           |  2 +
 src/views/projects/Patch.svelte               | 14 ++++++-
 src/views/projects/PeerSelector.svelte        | 29 +++++++++-----
 src/views/projects/Readme.svelte              | 10 +++--
 .../projects/SourceBrowser/Changeset.svelte   | 24 ++++++++---
 .../projects/SourceBrowser/FileDiff.svelte    | 22 ++++++----
 .../SourceBrowser/FileLocationChange.svelte   | 23 +++++++----
 .../projects/SourceBrowsingHeader.svelte      | 19 ++++-----
 src/views/projects/Tree.svelte                | 38 +++++++++++++-----
 src/views/projects/Tree/Folder.svelte         | 40 +++++++++++++------
 src/views/projects/View.svelte                | 12 +++---
 src/views/projects/router.ts                  | 37 -----------------
 24 files changed, 257 insertions(+), 172 deletions(-)
 delete mode 100644 src/components/ProjectLink.svelte

diff --git a/httpd-client/index.ts b/httpd-client/index.ts
index 788b33b7c..91ac98b45 100644
--- a/httpd-client/index.ts
+++ b/httpd-client/index.ts
@@ -12,6 +12,7 @@ import type {
   CommitHeader,
   Diff,
   DiffAddedDeletedModifiedChangeset,
+  DiffCopiedMovedChangeset,
   HunkLine,
 } from "./lib/project/commit.js";
 import type { Issue, IssueState } from "./lib/project/issue.js";
@@ -39,6 +40,7 @@ export type {
   CommitHeader,
   Diff,
   DiffAddedDeletedModifiedChangeset,
+  DiffCopiedMovedChangeset,
   DiffResponse,
   HunkLine,
   Issue,
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index bbb5c7fde..5073e4eb3 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -1,5 +1,6 @@
 <script lang="ts" strictEvents>
   import type { AuthorAliasColor } from "@app/components/Authorship.svelte";
+  import type { BaseUrl } from "@httpd-client";
 
   import Authorship from "@app/components/Authorship.svelte";
   import Button from "@app/components/Button.svelte";
@@ -8,6 +9,8 @@
   import Textarea from "@app/components/Textarea.svelte";
   import { createEventDispatcher } from "svelte";
 
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
   export let id: string | undefined = undefined;
   export let authorId: string;
   export let authorAlias: string | undefined = undefined;
@@ -82,7 +85,7 @@
     {:else if body.trim() === ""}
       <span class="txt-missing">No description.</span>
     {:else}
-      <Markdown {rawPath} content={body} />
+      <Markdown {projectId} {baseUrl} {rawPath} content={body} />
     {/if}
   </div>
 </div>
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index c7b52cc81..6d7d76e1d 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -1,23 +1,26 @@
 <script lang="ts">
+  import type { BaseUrl } from "@httpd-client";
+
   import dompurify from "dompurify";
   import matter from "@radicle/gray-matter";
-  import { marked } from "marked";
   import { afterUpdate } from "svelte";
+  import { marked } from "marked";
   import { toDom } from "hast-util-to-dom";
 
   import * as utils from "@app/lib/utils";
-  import { base, activeRouteStore } from "@app/lib/router";
+  import * as router from "@app/lib/router";
   import { highlight } from "@app/lib/syntax";
   import { isUrl, twemoji, scrollIntoView, canonicalize } from "@app/lib/utils";
   import {
     markdownExtensions as extensions,
     renderer,
   } from "@app/lib/markdown";
-  import { updateProjectRoute } from "@app/views/projects/router";
 
+  export let baseUrl: BaseUrl;
   export let content: string;
   export let hash: string | undefined = undefined;
   export let path: string = "/";
+  export let projectId: string;
   export let rawPath: string | undefined = undefined;
 
   $: doc = matter(content);
@@ -40,11 +43,15 @@
   function navigateToMarkdownLink(event: any) {
     if (event.target.matches(".file-link")) {
       event.preventDefault();
-      if ($activeRouteStore.resource === "projects") {
-        void updateProjectRoute({
+      void router.push({
+        resource: "projects",
+        params: {
+          id: projectId,
+          baseUrl,
+          view: { resource: "tree" },
           path: utils.canonicalize(event.target.getAttribute("href"), path),
-        });
-      }
+        },
+      });
     }
   }
 
@@ -68,7 +75,7 @@
         if (
           imagePath &&
           !isUrl(imagePath) &&
-          !imagePath.startsWith(`${base}twemoji`)
+          !imagePath.startsWith(`${router.base}twemoji`)
         ) {
           i.setAttribute("src", `${rawPath}/${canonicalize(imagePath, path)}`);
         }
diff --git a/src/components/ProjectLink.svelte b/src/components/ProjectLink.svelte
deleted file mode 100644
index 74ec6cb1a..000000000
--- a/src/components/ProjectLink.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts" strictEvents>
-  import type { ProjectsParams } from "@app/views/projects/router";
-  import { createEventDispatcher } from "svelte";
-
-  import { useDefaultNavigation } from "@app/lib/router";
-  import {
-    projectLinkHref,
-    updateProjectRoute,
-  } from "@app/views/projects/router";
-
-  export let projectParams: Partial<
-    Omit<ProjectsParams, "id" | "route" | "hash">
-  >;
-  export let title: string | undefined = undefined;
-
-  const dispatch = createEventDispatcher<{ click: null }>();
-
-  function navigateToRoute(event: MouseEvent): void {
-    if (useDefaultNavigation(event)) {
-      return;
-    }
-
-    event.preventDefault();
-    void updateProjectRoute(projectParams);
-    dispatch("click");
-  }
-</script>
-
-<a {title} on:click={navigateToRoute} href={projectLinkHref(projectParams)}>
-  <slot />
-</a>
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index 1b093faa1..501baaa56 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,4 +1,5 @@
 <script lang="ts" strictEvents>
+  import type { BaseUrl } from "@httpd-client";
   import type { Comment } from "@httpd-client";
 
   import Button from "@app/components/Button.svelte";
@@ -8,6 +9,8 @@
   import { scrollIntoView } from "@app/lib/utils";
   import { httpdStore } from "@app/lib/httpd";
 
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
   export let thread: { root: Comment; replies: Comment[] };
   export let rawPath: string;
   export let showReplyTextarea = false;
@@ -73,6 +76,8 @@
 <div class="comments">
   <div class="comment">
     <CommentComponent
+      {projectId}
+      {baseUrl}
       {rawPath}
       id={root.id}
       authorId={root.author.id}
@@ -85,6 +90,8 @@
   {#each replies as reply}
     <div class="comment reply">
       <CommentComponent
+        {projectId}
+        {baseUrl}
         {rawPath}
         id={reply.id}
         authorId={reply.author.id}
diff --git a/src/views/projects/Blob.svelte b/src/views/projects/Blob.svelte
index 3b0d27deb..b93e8448b 100644
--- a/src/views/projects/Blob.svelte
+++ b/src/views/projects/Blob.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Blob } from "@httpd-client";
+  import type { BaseUrl, Blob } from "@httpd-client";
 
   import { afterUpdate, onDestroy, onMount } from "svelte";
   import { toHtml } from "hast-util-to-html";
@@ -11,6 +11,8 @@
   import Readme from "@app/views/projects/Readme.svelte";
   import SquareButton from "@app/components/SquareButton.svelte";
 
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
   export let path: string;
   export let hash: string | undefined = undefined;
   export let blob: Blob;
@@ -256,7 +258,13 @@
         <span class="txt-tiny">Binary content</span>
       </div>
     {:else if showMarkdown && blob.content}
-      <Readme content={blob.content} {rawPath} {path} {hash} />
+      <Readme
+        {baseUrl}
+        {projectId}
+        content={blob.content}
+        {rawPath}
+        {path}
+        {hash} />
     {:else if content}
       <table class="code no-scrollbar">
         {@html toHtml(content)}
diff --git a/src/views/projects/BranchSelector.svelte b/src/views/projects/BranchSelector.svelte
index 64a23248a..9bbfe144d 100644
--- a/src/views/projects/BranchSelector.svelte
+++ b/src/views/projects/BranchSelector.svelte
@@ -1,12 +1,20 @@
-<script lang="ts" strictEvents>
+<script lang="ts">
+  import type { BaseUrl } from "@httpd-client";
+  import type { LoadedSourceBrowsingView } from "@app/views/projects/router";
+
   import * as utils from "@app/lib/utils";
+  import { closeFocused } from "@app/components/Floating.svelte";
 
   import Dropdown from "@app/components/Dropdown.svelte";
   import DropdownItem from "@app/components/Dropdown/DropdownItem.svelte";
   import Floating from "@app/components/Floating.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
+  export let baseUrl: BaseUrl;
   export let branches: Record<string, string> | undefined;
+  export let peer: string | undefined;
+  export let projectId: string;
+  export let view: LoadedSourceBrowsingView;
   export let selectedBranch: string | undefined;
   export let selectedCommitId: string;
 
@@ -72,13 +80,24 @@
         <svelte:fragment slot="modal">
           <Dropdown items={branchList}>
             <svelte:fragment slot="item" let:item>
-              <ProjectLink projectParams={{ revision: item.value }} on:click>
+              <Link
+                route={{
+                  resource: "projects",
+                  params: {
+                    id: projectId,
+                    baseUrl,
+                    peer,
+                    revision: item.value,
+                    view,
+                  },
+                }}
+                on:afterNavigate={() => closeFocused()}>
                 <DropdownItem
                   selected={item.value === selectedBranch}
                   size="tiny">
                   {item.value}
                 </DropdownItem>
-              </ProjectLink>
+              </Link>
             </svelte:fragment>
           </Dropdown>
         </svelte:fragment>
diff --git a/src/views/projects/Browser.svelte b/src/views/projects/Browser.svelte
index 5b0154c46..a27fc0f7e 100644
--- a/src/views/projects/Browser.svelte
+++ b/src/views/projects/Browser.svelte
@@ -23,9 +23,9 @@
   export let peer: string | undefined;
   export let peers: Remote[];
   export let project: Project;
-  export let resource: LoadedSourceBrowsingView["resource"];
   export let revision: string | undefined;
   export let tree: Tree;
+  export let view: LoadedSourceBrowsingView;
 
   export let blobResult: BlobResult;
 
@@ -137,8 +137,8 @@
   {contributorCount}
   {peers}
   {peer}
-  {resource}
-  {revision} />
+  {revision}
+  {view} />
 
 <main>
   <!-- Mobile navigation -->
@@ -160,12 +160,15 @@
       <div class="column-left" class:column-left-visible={mobileFileTree}>
         <div class="source-tree sticky">
           <TreeComponent
-            {tree}
-            {path}
-            {fetchTree}
+            projectId={project.id}
             revision={revision ?? project.defaultBranch}
+            {baseUrl}
+            {fetchTree}
+            {path}
+            {peer}
+            {tree}
             on:select={() => {
-              // Close mobile tree if user navigates to other file
+              // Close mobile tree if user navigates to other file.
               mobileFileTree = false;
             }} />
         </div>
@@ -173,6 +176,8 @@
       <div class="column-right">
         {#if blobResult.ok}
           <BlobComponent
+            projectId={project.id}
+            {baseUrl}
             {path}
             {hash}
             blob={blobResult.blob}
diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
index 17a7c00e6..bdfa09a3d 100644
--- a/src/views/projects/Cob/Revision.svelte
+++ b/src/views/projects/Cob/Revision.svelte
@@ -282,6 +282,8 @@
         {#if revisionDescription && !first}
           <div class="revision-description txt-small">
             <Markdown
+              {baseUrl}
+              {projectId}
               rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
               content={revisionDescription} />
           </div>
@@ -345,6 +347,8 @@
         <div style:margin-left="1.5rem">
           {#if element.type === "thread"}
             <Thread
+              {baseUrl}
+              {projectId}
               rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
               thread={element.inner}
               on:reply />
@@ -379,6 +383,8 @@
                 class:positive-review={review.verdict === "accept"}
                 class:negative-review={review.verdict === "reject"}>
                 <CommentComponent
+                  {baseUrl}
+                  {projectId}
                   caption={formatVerdict(review.verdict)}
                   authorId={author}
                   authorAlias={review.author.alias}
diff --git a/src/views/projects/Commit.svelte b/src/views/projects/Commit.svelte
index 29fff9bd0..7f5b17700 100644
--- a/src/views/projects/Commit.svelte
+++ b/src/views/projects/Commit.svelte
@@ -18,8 +18,8 @@
   export let peer: string | undefined = undefined;
   export let peers: Remote[];
   export let project: Project;
-  export let resource: LoadedSourceBrowsingView["resource"];
   export let revision: string | undefined;
+  export let view: LoadedSourceBrowsingView;
 
   const { commit: header } = commit;
 </script>
@@ -68,8 +68,8 @@
   {contributorCount}
   {peers}
   {peer}
-  {resource}
-  {revision} />
+  {revision}
+  {view} />
 
 <div class="commit">
   <div class="header">
@@ -89,5 +89,9 @@
     <pre class="description txt-small">{header.description}</pre>
     <CommitAuthorship {header} />
   </div>
-  <Changeset diff={commit.diff} revision={commit.commit.id} />
+  <Changeset
+    projectId={project.id}
+    {baseUrl}
+    diff={commit.diff}
+    revision={commit.commit.id} />
 </div>
diff --git a/src/views/projects/History.svelte b/src/views/projects/History.svelte
index 6b44a1dc3..ae7e4e66a 100644
--- a/src/views/projects/History.svelte
+++ b/src/views/projects/History.svelte
@@ -20,9 +20,9 @@
   export let peer: string | undefined;
   export let peers: Remote[];
   export let project: Project;
-  export let resource: LoadedSourceBrowsingView["resource"];
   export let revision: string | undefined;
   export let totalCommitCount: number;
+  export let view: LoadedSourceBrowsingView;
 
   const api = new HttpdClient(baseUrl);
 
@@ -92,8 +92,8 @@
   {contributorCount}
   {peers}
   {peer}
-  {resource}
-  {revision} />
+  {revision}
+  {view} />
 
 <div class="history">
   {#each groupCommits(allCommitHeaders) as group (group.time)}
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index 42c9b4945..bace5688c 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -332,6 +332,8 @@
       </svelte:fragment>
       <div slot="description">
         <Markdown
+          {baseUrl}
+          {projectId}
           content={issue.discussion[0].body}
           rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)} />
       </div>
@@ -344,7 +346,12 @@
     </CobHeader>
     {#each threads as thread (thread.root.id)}
       <div class="thread">
-        <ThreadComponent {thread} {rawPath} on:reply={createReply} />
+        <ThreadComponent
+          {baseUrl}
+          {projectId}
+          {thread}
+          {rawPath}
+          on:reply={createReply} />
       </div>
     {/each}
     {#if $httpdStore.state === "authenticated"}
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index edb011e66..204dec728 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -154,6 +154,8 @@
               <p class="txt-missing">No description</p>
             {:else}
               <Markdown
+                {baseUrl}
+                {projectId}
                 content={issueText}
                 rawPath={utils.getRawBasePath(
                   projectId,
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 5e140debd..49636b037 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -303,6 +303,8 @@
       <svelte:fragment slot="description">
         {#if patch.revisions[0].description}
           <Markdown
+            {projectId}
+            {baseUrl}
             content={patch.revisions[0].description}
             rawPath={utils.getRawBasePath(
               projectId,
@@ -429,7 +431,11 @@
       {#if diff}
         {#await api.project.getDiff(projectId, diff.split("..")[0], diff.split("..")[1]) then diff}
           <div style:margin-top="1rem">
-            <Changeset revision={currentRevision.oid} diff={diff.diff} />
+            <Changeset
+              {projectId}
+              {baseUrl}
+              revision={currentRevision.oid}
+              diff={diff.diff} />
           </div>
         {:catch e}
           <ErrorMessage
@@ -473,7 +479,11 @@
     {:else if currentTab === "files"}
       {#await api.project.getDiff(projectId, currentRevision.base, currentRevision.oid) then diff}
         <div style:margin-top="1rem">
-          <Changeset revision={currentRevision.oid} diff={diff.diff} />
+          <Changeset
+            {projectId}
+            {baseUrl}
+            revision={currentRevision.oid}
+            diff={diff.diff} />
         </div>
       {:catch e}
         <ErrorMessage message="Not able to load files diff." stackTrace={e} />
diff --git a/src/views/projects/PeerSelector.svelte b/src/views/projects/PeerSelector.svelte
index 7487f8014..206497cbd 100644
--- a/src/views/projects/PeerSelector.svelte
+++ b/src/views/projects/PeerSelector.svelte
@@ -1,6 +1,8 @@
-<script lang="ts" strictEvents>
-  import type { Remote } from "@httpd-client";
+<script lang="ts">
+  import type { BaseUrl, Remote } from "@httpd-client";
+  import type { LoadedSourceBrowsingView } from "@app/views/projects/router";
 
+  import { closeFocused } from "@app/components/Floating.svelte";
   import { formatNodeId, truncateId } from "@app/lib/utils";
   import { pluralize } from "@app/lib/pluralize";
 
@@ -10,10 +12,13 @@
   import DropdownItem from "@app/components/Dropdown/DropdownItem.svelte";
   import Floating from "@app/components/Floating.svelte";
   import Icon from "@app/components/Icon.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
+  export let baseUrl: BaseUrl;
   export let peer: string | undefined = undefined;
   export let peers: Remote[];
+  export let projectId: string;
+  export let view: LoadedSourceBrowsingView;
 
   $: meta = peers.find(p => p.id === peer);
 
@@ -102,11 +107,17 @@
     <Dropdown items={peers}>
       <svelte:fragment slot="item" let:item>
         <div class="dropdown-item">
-          <ProjectLink
-            on:click
-            projectParams={{
-              peer: item.id,
-              revision: undefined,
+          <Link
+            on:afterNavigate={() => closeFocused()}
+            route={{
+              resource: "projects",
+              params: {
+                id: projectId,
+                baseUrl,
+                peer: item.id,
+                revision: undefined,
+                view,
+              },
             }}>
             <DropdownItem
               selected={item.id === peer}
@@ -133,7 +144,7 @@
                 <Badge variant="primary">delegate</Badge>
               {/if}
             </DropdownItem>
-          </ProjectLink>
+          </Link>
         </div>
       </svelte:fragment>
     </Dropdown>
diff --git a/src/views/projects/Readme.svelte b/src/views/projects/Readme.svelte
index d6a57a1a8..12bfab0d1 100644
--- a/src/views/projects/Readme.svelte
+++ b/src/views/projects/Readme.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
+  import type { BaseUrl } from "@httpd-client";
+
   import Markdown from "@app/components/Markdown.svelte";
 
+  export let baseUrl: BaseUrl;
   export let content: string;
-  export let rawPath: string;
-  export let path: string;
   export let hash: string | undefined = undefined;
+  export let path: string;
+  export let projectId: string;
+  export let rawPath: string;
 </script>
 
 <style>
@@ -18,5 +22,5 @@
 </style>
 
 <article>
-  <Markdown {content} {hash} {rawPath} {path} />
+  <Markdown {baseUrl} {projectId} {content} {hash} {rawPath} {path} />
 </article>
diff --git a/src/views/projects/SourceBrowser/Changeset.svelte b/src/views/projects/SourceBrowser/Changeset.svelte
index 01e043c5a..387d5620b 100644
--- a/src/views/projects/SourceBrowser/Changeset.svelte
+++ b/src/views/projects/SourceBrowser/Changeset.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { Diff } from "@httpd-client";
+  import type { BaseUrl, Diff } from "@httpd-client";
 
   import { pluralize } from "@app/lib/pluralize";
 
@@ -8,6 +8,8 @@
 
   export let diff: Diff;
   export let revision: string;
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
 
   const diffDescription = ({
     modified,
@@ -67,18 +69,28 @@
 </div>
 <div class="diff-listing">
   {#each diff.added as file}
-    <FileDiff {file} {revision} headerBadgeCaption="added" />
+    <FileDiff
+      {projectId}
+      {baseUrl}
+      {file}
+      {revision}
+      headerBadgeCaption="added" />
   {/each}
   {#each diff.deleted as file}
-    <FileDiff {file} {revision} headerBadgeCaption="deleted" />
+    <FileDiff
+      {projectId}
+      {baseUrl}
+      {file}
+      {revision}
+      headerBadgeCaption="deleted" />
   {/each}
   {#each diff.modified as file}
-    <FileDiff {file} {revision} />
+    <FileDiff {projectId} {baseUrl} {file} {revision} />
   {/each}
   {#each diff.moved as file}
-    <FileLocationChange {file} {revision} mode="moved" />
+    <FileLocationChange {projectId} {baseUrl} {file} {revision} mode="moved" />
   {/each}
   {#each diff.copied as file}
-    <FileLocationChange {file} {revision} mode="copied" />
+    <FileLocationChange {projectId} {baseUrl} {file} {revision} mode="copied" />
   {/each}
 </div>
diff --git a/src/views/projects/SourceBrowser/FileDiff.svelte b/src/views/projects/SourceBrowser/FileDiff.svelte
index 955a55cd6..7361eefb5 100644
--- a/src/views/projects/SourceBrowser/FileDiff.svelte
+++ b/src/views/projects/SourceBrowser/FileDiff.svelte
@@ -1,16 +1,19 @@
 <script lang="ts">
   import type {
+    BaseUrl,
     DiffAddedDeletedModifiedChangeset,
     HunkLine,
   } from "@httpd-client";
 
   import Badge from "@app/components/Badge.svelte";
   import Icon from "@app/components/Icon.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
   export let file: DiffAddedDeletedModifiedChangeset;
   export let revision: string;
   export let headerBadgeCaption: "added" | "deleted" | undefined = undefined;
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
 
   let collapsed = false;
 
@@ -170,14 +173,19 @@
       {/if}
     </div>
     <div class="browse" title="View file">
-      <ProjectLink
-        projectParams={{
-          view: { resource: "tree" },
-          path: file.path,
-          revision,
+      <Link
+        route={{
+          resource: "projects",
+          params: {
+            id: projectId,
+            baseUrl,
+            view: { resource: "tree" },
+            path: file.path,
+            revision,
+          },
         }}>
         <Icon name="browse" />
-      </ProjectLink>
+      </Link>
     </div>
   </header>
   {#if !collapsed}
diff --git a/src/views/projects/SourceBrowser/FileLocationChange.svelte b/src/views/projects/SourceBrowser/FileLocationChange.svelte
index c846151a6..a6d444455 100644
--- a/src/views/projects/SourceBrowser/FileLocationChange.svelte
+++ b/src/views/projects/SourceBrowser/FileLocationChange.svelte
@@ -1,13 +1,15 @@
 <script lang="ts">
-  import type { DiffCopiedMovedChangeset } from "@httpd-client/lib/project/commit";
+  import type { BaseUrl, DiffCopiedMovedChangeset } from "@httpd-client";
 
   import Badge from "@app/components/Badge.svelte";
   import Icon from "@app/components/Icon.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
   export let file: DiffCopiedMovedChangeset;
   export let revision: string;
   export let mode: "moved" | "copied";
+  export let baseUrl: BaseUrl;
+  export let projectId: string;
 </script>
 
 <style>
@@ -49,14 +51,19 @@
       {/if}
     </div>
     <div class="browse" title="View file">
-      <ProjectLink
-        projectParams={{
-          view: { resource: "tree" },
-          path: file.newPath,
-          revision,
+      <Link
+        route={{
+          resource: "projects",
+          params: {
+            id: projectId,
+            baseUrl,
+            view: { resource: "tree" },
+            path: file.newPath,
+            revision,
+          },
         }}>
         <Icon name="browse" />
-      </ProjectLink>
+      </Link>
     </div>
   </header>
 </div>
diff --git a/src/views/projects/SourceBrowsingHeader.svelte b/src/views/projects/SourceBrowsingHeader.svelte
index d46944961..1cc386b93 100644
--- a/src/views/projects/SourceBrowsingHeader.svelte
+++ b/src/views/projects/SourceBrowsingHeader.svelte
@@ -2,7 +2,6 @@
   import type { BaseUrl, Remote } from "@httpd-client";
   import type { LoadedSourceBrowsingView } from "@app/views/projects/router";
 
-  import { closeFocused } from "@app/components/Floating.svelte";
   import { pluralize } from "@app/lib/pluralize";
 
   import BranchSelector from "@app/views/projects/BranchSelector.svelte";
@@ -18,7 +17,7 @@
   export let peer: string | undefined;
   export let peers: Remote[];
   export let projectId: string;
-  export let resource: LoadedSourceBrowsingView["resource"];
+  export let view: LoadedSourceBrowsingView;
   export let revision: string | undefined;
   export let commitId: string;
 
@@ -59,14 +58,17 @@
 
 <div class="header">
   {#if peers.length > 0}
-    <PeerSelector {peers} {peer} on:click={() => closeFocused()} />
+    <PeerSelector {baseUrl} {peers} {peer} {projectId} {view} />
   {/if}
 
   <BranchSelector
-    {branches}
     selectedCommitId={commitId}
+    {baseUrl}
+    {branches}
+    {peer}
+    {projectId}
     {selectedBranch}
-    on:click={() => closeFocused()} />
+    {view} />
 
   <Link
     route={{
@@ -74,14 +76,13 @@
       params: {
         id: projectId,
         baseUrl,
-        view: {
-          resource: "history",
-        },
         peer,
         revision,
+        view: { resource: "history" },
       },
     }}>
-    <SquareButton active={resource === "history" || resource === "commits"}>
+    <SquareButton
+      active={view.resource === "history" || view.resource === "commits"}>
       <span class="txt-bold">{commitCount}</span>
       {pluralize("commit", commitCount)}
     </SquareButton>
diff --git a/src/views/projects/Tree.svelte b/src/views/projects/Tree.svelte
index ceb2f00fc..d4ae0651d 100644
--- a/src/views/projects/Tree.svelte
+++ b/src/views/projects/Tree.svelte
@@ -1,16 +1,19 @@
 <script lang="ts" strictEvents>
-  import type { Tree } from "@httpd-client";
+  import type { BaseUrl, Tree } from "@httpd-client";
 
   import { createEventDispatcher } from "svelte";
 
   import File from "./Tree/File.svelte";
   import Folder from "./Tree/Folder.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
+  export let baseUrl: BaseUrl;
   export let fetchTree: (path: string) => Promise<Tree | undefined>;
   export let path: string;
-  export let tree: Tree;
+  export let peer: string | undefined;
+  export let projectId: string;
   export let revision: string;
+  export let tree: Tree;
 
   const dispatch = createEventDispatcher<{ select: string }>();
   const onSelect = ({ detail: path }: { detail: string }): void => {
@@ -21,17 +24,30 @@
 {#each tree.entries as entry (entry.path)}
   {#if entry.kind === "tree"}
     <Folder
-      {fetchTree}
-      {revision}
+      currentPath={path}
       name={entry.name}
+      on:select={onSelect}
       prefix={`${entry.path}/`}
-      currentPath={path}
-      on:select={onSelect} />
+      {baseUrl}
+      {fetchTree}
+      {peer}
+      {projectId}
+      {revision} />
   {:else}
-    <ProjectLink
-      projectParams={{ view: { resource: "tree" }, path: entry.path, revision }}
-      on:click={() => onSelect({ detail: entry.path })}>
+    <Link
+      route={{
+        resource: "projects",
+        params: {
+          id: projectId,
+          baseUrl,
+          path: entry.path,
+          peer,
+          revision,
+          view: { resource: "tree" },
+        },
+      }}
+      on:afterNavigate={() => onSelect({ detail: entry.path })}>
       <File active={entry.path === path} name={entry.name} />
-    </ProjectLink>
+    </Link>
   {/if}
 {/each}
diff --git a/src/views/projects/Tree/Folder.svelte b/src/views/projects/Tree/Folder.svelte
index f4eeb21c0..2e18219f0 100644
--- a/src/views/projects/Tree/Folder.svelte
+++ b/src/views/projects/Tree/Folder.svelte
@@ -1,17 +1,20 @@
 <script lang="ts" strictEvents>
-  import type { Tree } from "@httpd-client";
+  import type { BaseUrl, Tree } from "@httpd-client";
 
   import { createEventDispatcher } from "svelte";
 
   import Loading from "@app/components/Loading.svelte";
-  import ProjectLink from "@app/components/ProjectLink.svelte";
+  import Link from "@app/components/Link.svelte";
 
   import File from "./File.svelte";
 
+  export let baseUrl: BaseUrl;
+  export let currentPath: string;
   export let fetchTree: (path: string) => Promise<Tree | undefined>;
   export let name: string;
+  export let peer: string | undefined;
   export let prefix: string;
-  export let currentPath: string;
+  export let projectId: string;
   export let revision: string;
 
   $: expanded = currentPath.indexOf(prefix) === 0;
@@ -80,23 +83,34 @@
       {#if tree}
         {#each tree.entries as entry (entry.path)}
           {#if entry.kind === "tree"}
+            <!-- svelte:self doesn't check types, make sure to pass in all
+            required props! -->
             <svelte:self
-              {fetchTree}
               name={entry.name}
               on:select={onSelectFile}
               prefix={`${entry.path}/`}
-              {revision}
-              {currentPath} />
+              {baseUrl}
+              {currentPath}
+              {fetchTree}
+              {peer}
+              {projectId}
+              {revision} />
           {:else}
-            <ProjectLink
-              projectParams={{
-                view: { resource: "tree" },
-                path: entry.path,
-                revision,
+            <Link
+              route={{
+                resource: "projects",
+                params: {
+                  id: projectId,
+                  baseUrl,
+                  path: entry.path,
+                  peer,
+                  revision,
+                  view: { resource: "tree" },
+                },
               }}
-              on:click={() => onSelectFile({ detail: entry.path })}>
+              on:afterNavigate={() => onSelectFile({ detail: entry.path })}>
               <File active={entry.path === currentPath} name={entry.name} />
-            </ProjectLink>
+            </Link>
           {/if}
         {/each}
       {/if}
diff --git a/src/views/projects/View.svelte b/src/views/projects/View.svelte
index ae2bda9f0..2a1335e00 100644
--- a/src/views/projects/View.svelte
+++ b/src/views/projects/View.svelte
@@ -67,13 +67,13 @@
       contributorCount={view.params.loadedTree.stats.contributors}
       path={view.path}
       peers={view.params.loadedPeers}
-      resource={view.resource}
       tree={view.params.loadedTree}
       {baseUrl}
       {hash}
       {peer}
       {project}
-      {revision} />
+      {revision}
+      {view} />
   {:else if view.resource === "history"}
     <History
       branches={view.params.loadedBranches}
@@ -81,12 +81,12 @@
       commitHeaders={view.commitHeaders}
       contributorCount={view.params.loadedTree.stats.contributors}
       peers={view.params.loadedPeers}
-      resource={view.resource}
       totalCommitCount={view.totalCommitCount}
       {baseUrl}
       {peer}
       {project}
-      {revision} />
+      {revision}
+      {view} />
   {:else if view.resource === "commits"}
     <Commit
       branches={view.params.loadedBranches}
@@ -94,11 +94,11 @@
       commitCount={view.params.loadedTree.stats.commits}
       contributorCount={view.params.loadedTree.stats.contributors}
       peers={view.params.loadedPeers}
-      resource={view.resource}
       {baseUrl}
       {peer}
       {project}
-      {revision} />
+      {revision}
+      {view} />
   {:else if view.resource === "issues"}
     {#if view.params.view.resource === "new"}
       <NewIssue projectId={id} projectHead={project.head} {baseUrl} />
diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
index 50e166317..54c4f813b 100644
--- a/src/views/projects/router.ts
+++ b/src/views/projects/router.ts
@@ -11,10 +11,7 @@ import type {
   Tree,
 } from "@httpd-client";
 
-import { get } from "svelte/store";
-
 import { HttpdClient } from "@httpd-client";
-import { activeRouteStore, push, replace, routeToPath } from "@app/lib/router";
 import * as Syntax from "@app/lib/syntax";
 import { unreachable } from "@app/lib/utils";
 import { seedPath } from "@app/views/seeds/router";
@@ -477,40 +474,6 @@ function createProjectRoute(
   };
 }
 
-export function projectLinkHref(
-  projectRouteParams: Partial<Omit<ProjectsParams, "id" | "route" | "hash">>,
-): string | undefined {
-  const activeRoute = get(activeRouteStore);
-
-  if (activeRoute.resource === "projects") {
-    return routeToPath(createProjectRoute(activeRoute, projectRouteParams));
-  } else {
-    throw new Error(
-      "Don't use project specific navigation outside of project views",
-    );
-  }
-}
-
-export async function updateProjectRoute(
-  projectRouteParams: Partial<Omit<ProjectsParams, "id" | "route" | "hash">>,
-  opts: { replace: boolean } = { replace: false },
-): Promise<void> {
-  const activeRoute = get(activeRouteStore);
-
-  if (activeRoute.resource === "projects") {
-    const updatedRoute = createProjectRoute(activeRoute, projectRouteParams);
-    if (opts.replace) {
-      await replace(updatedRoute);
-    } else {
-      await push(updatedRoute);
-    }
-  } else {
-    throw new Error(
-      "Don't use project specific navigation outside of project views",
-    );
-  }
-}
-
 export function resolveProjectRoute(
   url: URL,
   baseUrl: BaseUrl,

From 74fa05cf26a9515cf439f887f1a9229c49b16adc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Sun, 9 Jul 2023 15:17:43 +0200
Subject: [PATCH 2/2] Rewrite markdown link navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Thomas Scholtes <geigerzaehler@axiom.fm>
Signed-off-by: Rūdolfs Ošiņš <rudolfs@osins.org>
---
 src/components/Comment.svelte          |  5 +-
 src/components/InlineMarkdown.svelte   |  8 ---
 src/components/Markdown.svelte         | 84 ++++++++++++++------------
 src/components/Thread.svelte           |  7 ---
 src/lib/markdown.ts                    | 62 +++++++++++--------
 src/lib/router.ts                      | 24 ++++++--
 src/views/projects/Blob.svelte         |  4 ++
 src/views/projects/Browser.svelte      |  4 +-
 src/views/projects/Cob/Revision.svelte |  6 --
 src/views/projects/Issue.svelte        |  9 +--
 src/views/projects/Issue/New.svelte    |  2 -
 src/views/projects/Patch.svelte        |  2 -
 src/views/projects/Readme.svelte       | 35 ++++++++++-
 src/views/projects/router.ts           | 14 -----
 14 files changed, 145 insertions(+), 121 deletions(-)

diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index 5073e4eb3..bbb5c7fde 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -1,6 +1,5 @@
 <script lang="ts" strictEvents>
   import type { AuthorAliasColor } from "@app/components/Authorship.svelte";
-  import type { BaseUrl } from "@httpd-client";
 
   import Authorship from "@app/components/Authorship.svelte";
   import Button from "@app/components/Button.svelte";
@@ -9,8 +8,6 @@
   import Textarea from "@app/components/Textarea.svelte";
   import { createEventDispatcher } from "svelte";
 
-  export let baseUrl: BaseUrl;
-  export let projectId: string;
   export let id: string | undefined = undefined;
   export let authorId: string;
   export let authorAlias: string | undefined = undefined;
@@ -85,7 +82,7 @@
     {:else if body.trim() === ""}
       <span class="txt-missing">No description.</span>
     {:else}
-      <Markdown {projectId} {baseUrl} {rawPath} content={body} />
+      <Markdown {rawPath} content={body} />
     {/if}
   </div>
 </div>
diff --git a/src/components/InlineMarkdown.svelte b/src/components/InlineMarkdown.svelte
index b4a662e2e..4302e33ef 100644
--- a/src/components/InlineMarkdown.svelte
+++ b/src/components/InlineMarkdown.svelte
@@ -2,19 +2,11 @@
   import dompurify from "dompurify";
   import { marked } from "marked";
 
-  import { renderer } from "@app/lib/markdown";
   import { twemoji } from "@app/lib/utils";
 
   export let content: string;
   export let fontSize: "tiny" | "small" | "medium" = "small";
 
-  marked.use({
-    renderer,
-    // TODO: Disables deprecated options, remove once removed from marked
-    mangle: false,
-    headerIds: false,
-  });
-
   const render = (content: string): string =>
     dompurify.sanitize(marked.parseInline(content));
 </script>
diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 6d7d76e1d..53533026b 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -1,58 +1,64 @@
 <script lang="ts">
-  import type { BaseUrl } from "@httpd-client";
-
   import dompurify from "dompurify";
   import matter from "@radicle/gray-matter";
   import { afterUpdate } from "svelte";
   import { marked } from "marked";
   import { toDom } from "hast-util-to-dom";
 
-  import * as utils from "@app/lib/utils";
   import * as router from "@app/lib/router";
   import { highlight } from "@app/lib/syntax";
   import { isUrl, twemoji, scrollIntoView, canonicalize } from "@app/lib/utils";
-  import {
-    markdownExtensions as extensions,
-    renderer,
-  } from "@app/lib/markdown";
+  import { Renderer } from "@app/lib/markdown";
 
-  export let baseUrl: BaseUrl;
   export let content: string;
   export let hash: string | undefined = undefined;
+  // If present, resolve all relative links with respect to this URL
+  export let linkBaseUrl: string | undefined = undefined;
   export let path: string = "/";
-  export let projectId: string;
   export let rawPath: string | undefined = undefined;
 
   $: doc = matter(content);
   $: frontMatter = Object.entries(doc.data).filter(
     ([, val]) => typeof val === "string" || typeof val === "number",
   );
-  marked.use({
-    extensions,
-    renderer,
-    // TODO: Disables deprecated options, remove once removed from marked
-    mangle: false,
-    headerIds: false,
-  });
-
   let container: HTMLElement;
 
-  const render = (content: string): string =>
-    dompurify.sanitize(marked.parse(content));
-
-  function navigateToMarkdownLink(event: any) {
-    if (event.target.matches(".file-link")) {
-      event.preventDefault();
-      void router.push({
-        resource: "projects",
-        params: {
-          id: projectId,
-          baseUrl,
-          view: { resource: "tree" },
-          path: utils.canonicalize(event.target.getAttribute("href"), path),
-        },
-      });
+  /**
+   * Do internal navigation on for clicks on anchor elements if possible
+   */
+  function navigateInternalOnAnchor(event: MouseEvent) {
+    if (router.useDefaultNavigation(event)) {
+      return;
+    }
+
+    let url: URL;
+    if (!(event.target instanceof HTMLAnchorElement)) {
+      return;
+    }
+    const href = event.target?.getAttribute("href");
+    if (href === null || href.startsWith("#")) {
+      return;
+    }
+
+    try {
+      url = new URL(href, window.location.href);
+    } catch {
+      return;
     }
+
+    event.preventDefault();
+    void router.navigateToUrl("push", url);
+  }
+
+  function render(content: string): string {
+    return dompurify.sanitize(
+      marked.parse(content, {
+        renderer: new Renderer(linkBaseUrl),
+        // TODO: Disables deprecated options, remove once removed from marked
+        mangle: false,
+        headerIds: false,
+      }),
+    );
   }
 
   afterUpdate(async () => {
@@ -82,11 +88,6 @@
       }
     }
 
-    const fileAnchorTags = document.querySelectorAll(".file-link");
-    fileAnchorTags.forEach(anchorTag => {
-      anchorTag.addEventListener("click", navigateToMarkdownLink);
-    });
-
     // Replaces code blocks in the background with highlighted code.
     const prefix = "language-";
     const nodes = Array.from(document.body.querySelectorAll("pre code"));
@@ -344,6 +345,13 @@
   </div>
 {/if}
 
-<div class="markdown" bind:this={container} use:twemoji={{ exclude: ["21a9"] }}>
+<!-- The click handler only handles bubbling events from anchor tags -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="markdown"
+  bind:this={container}
+  use:twemoji={{ exclude: ["21a9"] }}
+  on:click={navigateInternalOnAnchor}>
   {@html render(doc.content)}
 </div>
diff --git a/src/components/Thread.svelte b/src/components/Thread.svelte
index 501baaa56..1b093faa1 100644
--- a/src/components/Thread.svelte
+++ b/src/components/Thread.svelte
@@ -1,5 +1,4 @@
 <script lang="ts" strictEvents>
-  import type { BaseUrl } from "@httpd-client";
   import type { Comment } from "@httpd-client";
 
   import Button from "@app/components/Button.svelte";
@@ -9,8 +8,6 @@
   import { scrollIntoView } from "@app/lib/utils";
   import { httpdStore } from "@app/lib/httpd";
 
-  export let baseUrl: BaseUrl;
-  export let projectId: string;
   export let thread: { root: Comment; replies: Comment[] };
   export let rawPath: string;
   export let showReplyTextarea = false;
@@ -76,8 +73,6 @@
 <div class="comments">
   <div class="comment">
     <CommentComponent
-      {projectId}
-      {baseUrl}
       {rawPath}
       id={root.id}
       authorId={root.author.id}
@@ -90,8 +85,6 @@
   {#each replies as reply}
     <div class="comment reply">
       <CommentComponent
-        {projectId}
-        {baseUrl}
         {rawPath}
         id={reply.id}
         authorId={reply.author.id}
diff --git a/src/lib/markdown.ts b/src/lib/markdown.ts
index 7900d4fc0..8fb0bfbbc 100644
--- a/src/lib/markdown.ts
+++ b/src/lib/markdown.ts
@@ -1,8 +1,7 @@
 import dompurify from "dompurify";
 import emojis from "@app/lib/emojis";
 import katex from "katex";
-import { marked } from "marked";
-import { isUrl } from "@app/lib/utils";
+import { marked, Renderer as BaseRenderer } from "marked";
 
 dompurify.setConfig({
   // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -11,9 +10,6 @@ dompurify.setConfig({
   FORBID_TAGS: ["textarea", "style"],
 });
 
-// TODO: Disables deprecated options, remove once removed from marked
-marked.use({ mangle: false, headerIds: false });
-
 const emojisMarkedExtension = {
   name: "emoji",
   level: "inline",
@@ -126,7 +122,30 @@ const anchorMarkedExtension = {
   },
 };
 
-export const renderer = {
+// TODO: Disables deprecated options, remove once removed from marked
+marked.use({
+  extensions: [
+    anchorMarkedExtension,
+    emojisMarkedExtension,
+    footnoteMarkedExtension,
+    footnoteReferenceMarkedExtension,
+    katexMarkedExtension,
+  ],
+  mangle: false,
+  headerIds: false,
+});
+
+export class Renderer extends BaseRenderer {
+  #baseUrl: string | undefined;
+
+  /**
+   * If `baseUrl` is provided, all hrefs attributes in anchor tags, except those
+   * starting with `#`, are resolved with respect to `baseUrl`
+   */
+  constructor(baseUrl: string | undefined) {
+    super();
+    this.#baseUrl = baseUrl;
+  }
   // Overwrites the rendering of heading tokens.
   // Since there are possible non ASCII characters in headings,
   // we escape them by replacing them with dashes and,
@@ -139,24 +158,19 @@ export const renderer = {
       .replace(/^-|-$/g, "");
 
     return `<h${level} id="${escapedText}">${text}</h${level}>`;
-  },
-  link(href: string, _title: string, text: string) {
-    // Adding the file-link class to relative file names,
-    // so we're able to navigate to the file in the editor.
-    if (!isUrl(href) && !href.startsWith("#")) {
-      return `<a href="${href}" class="file-link">${text}</a>`;
-    } else if (href.startsWith("#")) {
+  }
+
+  link(href: string, _title: string, text: string): string {
+    if (href.startsWith("#")) {
       // By lowercasing we avoid casing mismatches, between headings and links.
       return `<a href="${href.toLowerCase()}">${text}</a>`;
+    } else {
+      try {
+        href = new URL(href, this.#baseUrl).href;
+      } catch {
+        // Use original href value
+      }
+      return `<a href="${href}">${text}</a>`;
     }
-    return `<a href="${href}">${text}</a>`;
-  },
-};
-
-export const markdownExtensions = [
-  anchorMarkedExtension,
-  emojisMarkedExtension,
-  footnoteMarkedExtension,
-  footnoteReferenceMarkedExtension,
-  katexMarkedExtension,
-];
+  }
+}
diff --git a/src/lib/router.ts b/src/lib/router.ts
index ea9c20b36..e5902c7b1 100644
--- a/src/lib/router.ts
+++ b/src/lib/router.ts
@@ -38,7 +38,18 @@ export function useDefaultNavigation(event: MouseEvent) {
 export const base = import.meta.env.VITE_HASH_ROUTING ? "./" : "/";
 
 export async function loadFromLocation(): Promise<void> {
-  let { pathname, hash } = window.location;
+  await navigateToUrl("replace", new URL(window.location.href));
+}
+
+export async function navigateToUrl(
+  action: "push" | "replace",
+  url: URL,
+): Promise<void> {
+  let { pathname, hash } = url;
+
+  if (url.origin !== window.origin) {
+    throw new Error("Cannot navigate to other origin");
+  }
 
   if (import.meta.env.VITE_HASH_ROUTING) {
     if (pathname === "/" && hash && !hash.startsWith("#/")) {
@@ -52,20 +63,23 @@ export async function loadFromLocation(): Promise<void> {
     if (
       currentUrl &&
       currentUrl.pathname === pathname &&
-      currentUrl.search === window.location.search
+      currentUrl.search === url.search
     ) {
       return;
     }
   }
 
-  const relativeUrl = pathname + window.location.search + (hash || "");
-  const url = new URL(relativeUrl, window.origin);
+  const relativeUrl = pathname + url.search + (hash || "");
+  url = new URL(relativeUrl, window.origin);
   const route = pathToRoute(url);
 
   if (route) {
     await replace(route);
   } else {
-    await replace({ resource: "notFound", params: { url: relativeUrl } });
+    await navigate(action, {
+      resource: "notFound",
+      params: { url: relativeUrl },
+    });
   }
 }
 
diff --git a/src/views/projects/Blob.svelte b/src/views/projects/Blob.svelte
index b93e8448b..2b83212c2 100644
--- a/src/views/projects/Blob.svelte
+++ b/src/views/projects/Blob.svelte
@@ -13,6 +13,8 @@
 
   export let baseUrl: BaseUrl;
   export let projectId: string;
+  export let peer: string | undefined;
+  export let revision: string | undefined;
   export let path: string;
   export let hash: string | undefined = undefined;
   export let blob: Blob;
@@ -261,6 +263,8 @@
       <Readme
         {baseUrl}
         {projectId}
+        {peer}
+        {revision}
         content={blob.content}
         {rawPath}
         {path}
diff --git a/src/views/projects/Browser.svelte b/src/views/projects/Browser.svelte
index a27fc0f7e..3ab85e5b8 100644
--- a/src/views/projects/Browser.svelte
+++ b/src/views/projects/Browser.svelte
@@ -176,8 +176,10 @@
       <div class="column-right">
         {#if blobResult.ok}
           <BlobComponent
-            projectId={project.id}
             {baseUrl}
+            projectId={project.id}
+            {peer}
+            {revision}
             {path}
             {hash}
             blob={blobResult.blob}
diff --git a/src/views/projects/Cob/Revision.svelte b/src/views/projects/Cob/Revision.svelte
index bdfa09a3d..17a7c00e6 100644
--- a/src/views/projects/Cob/Revision.svelte
+++ b/src/views/projects/Cob/Revision.svelte
@@ -282,8 +282,6 @@
         {#if revisionDescription && !first}
           <div class="revision-description txt-small">
             <Markdown
-              {baseUrl}
-              {projectId}
               rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
               content={revisionDescription} />
           </div>
@@ -347,8 +345,6 @@
         <div style:margin-left="1.5rem">
           {#if element.type === "thread"}
             <Thread
-              {baseUrl}
-              {projectId}
               rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)}
               thread={element.inner}
               on:reply />
@@ -383,8 +379,6 @@
                 class:positive-review={review.verdict === "accept"}
                 class:negative-review={review.verdict === "reject"}>
                 <CommentComponent
-                  {baseUrl}
-                  {projectId}
                   caption={formatVerdict(review.verdict)}
                   authorId={author}
                   authorAlias={review.author.alias}
diff --git a/src/views/projects/Issue.svelte b/src/views/projects/Issue.svelte
index bace5688c..42c9b4945 100644
--- a/src/views/projects/Issue.svelte
+++ b/src/views/projects/Issue.svelte
@@ -332,8 +332,6 @@
       </svelte:fragment>
       <div slot="description">
         <Markdown
-          {baseUrl}
-          {projectId}
           content={issue.discussion[0].body}
           rawPath={utils.getRawBasePath(projectId, baseUrl, projectHead)} />
       </div>
@@ -346,12 +344,7 @@
     </CobHeader>
     {#each threads as thread (thread.root.id)}
       <div class="thread">
-        <ThreadComponent
-          {baseUrl}
-          {projectId}
-          {thread}
-          {rawPath}
-          on:reply={createReply} />
+        <ThreadComponent {thread} {rawPath} on:reply={createReply} />
       </div>
     {/each}
     {#if $httpdStore.state === "authenticated"}
diff --git a/src/views/projects/Issue/New.svelte b/src/views/projects/Issue/New.svelte
index 204dec728..edb011e66 100644
--- a/src/views/projects/Issue/New.svelte
+++ b/src/views/projects/Issue/New.svelte
@@ -154,8 +154,6 @@
               <p class="txt-missing">No description</p>
             {:else}
               <Markdown
-                {baseUrl}
-                {projectId}
                 content={issueText}
                 rawPath={utils.getRawBasePath(
                   projectId,
diff --git a/src/views/projects/Patch.svelte b/src/views/projects/Patch.svelte
index 49636b037..1817c68d3 100644
--- a/src/views/projects/Patch.svelte
+++ b/src/views/projects/Patch.svelte
@@ -303,8 +303,6 @@
       <svelte:fragment slot="description">
         {#if patch.revisions[0].description}
           <Markdown
-            {projectId}
-            {baseUrl}
             content={patch.revisions[0].description}
             rawPath={utils.getRawBasePath(
               projectId,
diff --git a/src/views/projects/Readme.svelte b/src/views/projects/Readme.svelte
index 12bfab0d1..968592459 100644
--- a/src/views/projects/Readme.svelte
+++ b/src/views/projects/Readme.svelte
@@ -2,13 +2,44 @@
   import type { BaseUrl } from "@httpd-client";
 
   import Markdown from "@app/components/Markdown.svelte";
+  import { routeToPath } from "@app/lib/router";
 
+  export let projectId: string;
+  export let peer: string | undefined;
   export let baseUrl: BaseUrl;
+  export let revision: string | undefined;
   export let content: string;
   export let hash: string | undefined = undefined;
   export let path: string;
-  export let projectId: string;
   export let rawPath: string;
+
+  let linkBaseUrl: string | undefined;
+
+  $: {
+    if (!path || path === "/") {
+      // For the default root path, the `tree/<revision>` portion is omitted
+      // from the URL. This means that links cannot be resolved with respect
+      // to the current location. To work around this we provide path that
+      // results a fully expanded URL with which we can resolve all links in the
+      // Markdown.
+      linkBaseUrl = new URL(
+        routeToPath({
+          resource: "projects",
+          params: {
+            id: projectId,
+            baseUrl,
+            view: { resource: "tree" },
+            peer,
+            revision,
+            path: "README.md",
+          },
+        }),
+        window.origin,
+      ).href;
+    } else {
+      linkBaseUrl = undefined;
+    }
+  }
 </script>
 
 <style>
@@ -22,5 +53,5 @@
 </style>
 
 <article>
-  <Markdown {baseUrl} {projectId} {content} {hash} {rawPath} {path} />
+  <Markdown {linkBaseUrl} {content} {hash} {rawPath} {path} />
 </article>
diff --git a/src/views/projects/router.ts b/src/views/projects/router.ts
index 54c4f813b..d1970b997 100644
--- a/src/views/projects/router.ts
+++ b/src/views/projects/router.ts
@@ -460,20 +460,6 @@ function sanitizeQueryString(queryString: string): string {
   return queryString.startsWith("?") ? queryString.substring(1) : queryString;
 }
 
-function createProjectRoute(
-  activeRoute: ProjectRoute,
-  projectRouteParams: Partial<ProjectsParams>,
-): ProjectRoute {
-  return {
-    resource: "projects",
-    params: {
-      ...activeRoute.params,
-      hash: undefined,
-      ...projectRouteParams,
-    },
-  };
-}
-
 export function resolveProjectRoute(
   url: URL,
   baseUrl: BaseUrl,