Improve handling of app base

To differenciate between which base assets should take, we need a `base`
const in `router/index` that any function or component can consult so we
don't get issues between relative and absolute paths.

Signed-off-by: Sebastian Martinez <me@sebastinez.dev>

src/Markdown.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { onMount } from "svelte";
-  import { marked } from "marked";
-  import matter from "@radicle/gray-matter";
   import type * as proj from "@app/project";
+
+  import dompurify from "dompurify";
+  import matter from "@radicle/gray-matter";
+  import { base } from "@app/router";
   import {
     markdownExtensions as extensions,
     renderer,
@@ -11,12 +12,13 @@
     twemoji,
     scrollIntoView,
   } from "@app/utils";
-  import dompurify from "dompurify";
+  import { marked } from "marked";
+  import { onMount } from "svelte";
 
   export let content: string;
+  export let doc = matter(content);
   export let getImage: (path: string) => Promise<proj.Blob>;
   export let hash: string | null = null;
-  export let doc = matter(content);
 
   const frontMatter = Object.entries(doc.data);
   marked.use({ extensions, renderer });
@@ -46,7 +48,7 @@
       const path = i.getAttribute("src");
 
       // Make sure the source isn't a URL before trying to fetch it from the repo
-      if (path && !isUrl(path) && !path.startsWith("/twemoji")) {
+      if (path && !isUrl(path) && !path.startsWith(`${base}twemoji`)) {
         getImage(path).then(blob => {
           if (blob.content) {
             const mime = getImageMime(path);

src/router/index.ts

@@ -16,6 +16,8 @@ export const activeRouteStore: Readable<Route> = derived(
   },
 );
 
+export const base = process.env.hashRouting ? "./" : "/";
+
 // Gets triggered when clicking on an anchor hash tag e.g. <a href="#header"/>
 // Allows the jump to a anchor hash
 window.addEventListener("hashchange", e => {

src/utils.ts

@@ -1,23 +1,25 @@
-import { ethers } from "ethers";
-import twemojiModule from "twemoji";
-import md5 from "md5";
-import { BigNumber } from "ethers";
-import katex from "katex";
-import type { Wallet } from "@app/wallet";
-import { assert } from "@app/error";
 import type { EnsProfile } from "@app/base/registrations/registrar";
+import type { Wallet } from "@app/wallet";
+import type { marked } from "marked";
+
+import * as cache from "@app/cache";
+import config from "@app/config.json";
+import emojis from "@app/emojis";
+import katex from "katex";
+import md5 from "md5";
+import twemojiModule from "twemoji";
+import { BigNumber } from "ethers";
+import { ProfileType } from "@app/profile";
+import { assert } from "@app/error";
+import { base } from "@app/router";
+import { ethers } from "ethers";
 import { getAddress, getResolver } from "@app/base/registrations/registrar";
 import {
   getAvatar,
   getSeed,
   getRegistration,
 } from "@app/base/registrations/registrar";
-import { ProfileType } from "@app/profile";
 import { parseUnits } from "@ethersproject/units";
-import * as cache from "@app/cache";
-import type { marked } from "marked";
-import emojis from "@app/emojis";
-import config from "@app/config.json";
 
 export enum AddressType {
   Contract,
@@ -559,7 +561,7 @@ export const renderer = {
 
 export function twemoji(node: HTMLElement) {
   twemojiModule.parse(node, {
-    base: process.env.hashRouting ? "./" : "/",
+    base,
     folder: "twemoji",
     ext: ".svg",
     className: `txt-emoji`,