From b919f0de9f979e1646a53ff459043aea0599f0cd Mon Sep 17 00:00:00 2001
From: neil molina <get.neilmolina@gmail.com>
Date: Fri, 18 Aug 2023 08:41:17 +0800
Subject: [PATCH 1/5] render html scrapped

---
 .../src/components/markdown/markdown.svelte   | 24 +++++++++++----
 svelte/src/libs/github.ts                     | 30 +++++++++++++------
 svelte/src/libs/stores/pkgs.ts                |  2 +-
 svelte/src/libs/types.ts                      |  2 +-
 4 files changed, 42 insertions(+), 16 deletions(-)

diff --git a/svelte/src/components/markdown/markdown.svelte b/svelte/src/components/markdown/markdown.svelte
index 3f5356464..6bb2433b3 100644
--- a/svelte/src/components/markdown/markdown.svelte
+++ b/svelte/src/components/markdown/markdown.svelte
@@ -6,13 +6,13 @@
   import { onMount } from "svelte";
   import { tokenizeMarkdown } from "./md";
   import Preloader from "$components/preloader/preloader.svelte";
+  import { shellOpenExternal } from "@native";
 
-  export let source: { data: string; type: "md" | "rst" };
+  export let source: { data: string; type: "md" | "rst" | "html" };
 
   let markDownRoot: HTMLElement;
 
   export let hook = (node: HTMLElement): { destroy: () => void } => {
-    console.log("hook", node);
     return {
       destroy() {
         console.log("destroy");
@@ -24,7 +24,7 @@
     link: Link
   };
 
-  $: html = source.type === "rst" ? rst2html(source.data) : "";
+  $: html = source.type === "rst" ? rst2html(source.data) : source.data;
 
   onMount(() => {
     // Need to override the height/width STYLE with the old-school height/width ATTRIBUTE to make it work with the markdown
@@ -42,6 +42,18 @@
         }
       });
     }
+
+    if (source.type === "html" && html) {
+      document.querySelectorAll(".html-content a").forEach((element: Element) => {
+        const href = element.getAttribute("href");
+        if (!href?.startsWith("#") && href) {
+          element.addEventListener("click", (e) => {
+            e.preventDefault();
+            shellOpenExternal(href!);
+          });
+        }
+      });
+    }
   });
 </script>
 
@@ -50,8 +62,10 @@
     <div class="w-full" bind:this={markDownRoot}>
       <SvelteMarkdown source={tokenizeMarkdown(source.data)} {renderers} />
     </div>
-  {:else if source.type === "rst" && html}
-    {@html html}
+  {:else if ["html", "rst"].includes(source.type) && html}
+    <div class="html-content w-full">
+      {@html html}
+    </div>
   {:else}
     <Preloader />
   {/if}
diff --git a/svelte/src/libs/github.ts b/svelte/src/libs/github.ts
index bac1f0ce1..cd0915453 100644
--- a/svelte/src/libs/github.ts
+++ b/svelte/src/libs/github.ts
@@ -11,17 +11,29 @@ export async function getPackageYaml(pkgYamlUrl: string) {
   return data;
 }
 
-export async function getReadme(
-  owner: string,
-  repo: string
-): Promise<{ data: string; type: "md" | "rst" }> {
-  let type: "md" | "rst" = "md";
+export async function getReadme({
+  owner,
+  repo,
+  project
+}: {
+  owner: string;
+  repo: string;
+  project: string;
+}): Promise<{ data: string; type: "md" | "rst" | "html" }> {
+  let type: "md" | "rst" | "html" = "md";
   let data = "";
-  const req = await axios.get(`https://github.com/repos/${owner}/${repo}/readme`);
 
-  if (req.data?.download_url) {
-    type = req.data.name.endsWith(".rst") ? "rst" : "md";
-    const reqDl = await axios.get(req.data.download_url);
+  const [reqGithub, reqHTML] = await Promise.all([
+    axios.get(`https://github.com/repos/${owner}/${repo}/readme`),
+    axios.get(`https://gui.tea.xyz/dev/${project}/readme.html`)
+  ]);
+
+  if (reqHTML.status === 200) {
+    type = "html";
+    data = reqHTML.data;
+  } else if (reqGithub.data?.download_url) {
+    type = reqGithub.data.name.endsWith(".rst") ? "rst" : "md";
+    const reqDl = await axios.get(reqGithub.data.download_url);
     data = reqDl.data;
   }
   return { data, type };
diff --git a/svelte/src/libs/stores/pkgs.ts b/svelte/src/libs/stores/pkgs.ts
index fafcc95b8..e27a7bd23 100644
--- a/svelte/src/libs/stores/pkgs.ts
+++ b/svelte/src/libs/stores/pkgs.ts
@@ -145,7 +145,7 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
   if (updatedPackage.github_url) {
     const [owner, repo] = updatedPackage.github_url.split("/");
     const [readme, contributors, repoData] = await Promise.all([
-      getReadme(owner, repo),
+      getReadme({ owner, repo, project: guiPkg.full_name! }),
       getContributors(owner, repo),
       getRepoAsPackage(owner, repo)
     ]);
diff --git a/svelte/src/libs/types.ts b/svelte/src/libs/types.ts
index df07b3740..c1147ba65 100644
--- a/svelte/src/libs/types.ts
+++ b/svelte/src/libs/types.ts
@@ -30,7 +30,7 @@ export interface Package {
   contributors?: Contributor[];
   readme?: {
     data: string;
-    type: "md" | "rst";
+    type: "md" | "rst" | "html";
   };
   manual_sorting: number;
   card_layout: "bottom" | "right" | "left";

From bbe526a7659421c819f2afaba772dbdf3002e5f3 Mon Sep 17 00:00:00 2001
From: neil molina <get.neilmolina@gmail.com>
Date: Fri, 18 Aug 2023 09:05:45 +0800
Subject: [PATCH 2/5] fix default

---
 svelte/src/components/packages/package.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/svelte/src/components/packages/package.svelte b/svelte/src/components/packages/package.svelte
index 35e74d13a..2da932539 100644
--- a/svelte/src/components/packages/package.svelte
+++ b/svelte/src/components/packages/package.svelte
@@ -6,7 +6,7 @@
   import PackageCard from "$components/package-card/package-card.svelte";
   import LocalPackageCard from "$components/package-card/local-package-card.svelte";
 
-  export let tab = "all";
+  export let tab = "discover";
   export let pkg: GUIPackage;
   export let layout: "bottom" | "left" | "right" = "bottom";
 

From f1f30d40444688aa9dc66ef875c1fb916bd63850 Mon Sep 17 00:00:00 2001
From: neil molina <get.neilmolina@gmail.com>
Date: Fri, 18 Aug 2023 13:12:57 +0800
Subject: [PATCH 3/5] support gitlab

---
 .../src/components/markdown/markdown.svelte   |   3 +-
 .../package-metas/package-metas.svelte        |   7 +-
 svelte/src/libs/github.ts                     |  71 ----------
 svelte/src/libs/repo.ts                       | 126 ++++++++++++++++++
 svelte/src/libs/stores/pkgs.ts                |  24 ++--
 .../src/libs/translations/languages/de.json   |   1 +
 .../src/libs/translations/languages/en.json   |   1 +
 .../src/libs/translations/languages/ptbr.json |   1 +
 .../src/libs/translations/languages/ru.json   |   1 +
 .../src/libs/translations/languages/uk.json   |   1 +
 .../src/libs/translations/languages/zh.json   |   1 +
 11 files changed, 148 insertions(+), 89 deletions(-)
 delete mode 100644 svelte/src/libs/github.ts
 create mode 100644 svelte/src/libs/repo.ts

diff --git a/svelte/src/components/markdown/markdown.svelte b/svelte/src/components/markdown/markdown.svelte
index 6bb2433b3..0306f06e4 100644
--- a/svelte/src/components/markdown/markdown.svelte
+++ b/svelte/src/components/markdown/markdown.svelte
@@ -9,7 +9,7 @@
   import { shellOpenExternal } from "@native";
 
   export let source: { data: string; type: "md" | "rst" | "html" };
-
+  console.log("source", source);
   let markDownRoot: HTMLElement;
 
   export let hook = (node: HTMLElement): { destroy: () => void } => {
@@ -44,6 +44,7 @@
     }
 
     if (source.type === "html" && html) {
+      console.log("html", html);
       document.querySelectorAll(".html-content a").forEach((element: Element) => {
         const href = element.getAttribute("href");
         if (!href?.startsWith("#") && href) {
diff --git a/svelte/src/components/package-metas/package-metas.svelte b/svelte/src/components/package-metas/package-metas.svelte
index 485a4247d..9b2bdd3d1 100644
--- a/svelte/src/components/package-metas/package-metas.svelte
+++ b/svelte/src/components/package-metas/package-metas.svelte
@@ -4,6 +4,7 @@
   import dayjs from "dayjs";
   import relativeTime from "dayjs/plugin/relativeTime";
   import { shellOpenExternal } from "@native";
+  import { getRepoLabel } from "$libs/repo";
   dayjs.extend(relativeTime);
 
   export let pkg: Package;
@@ -71,11 +72,11 @@
     </ul>
   {/if}
   {#if pkg.github_url}
-    <h1 class="text-primary">{$t("common.github-repository").toLowerCase()}</h1>
+    <h1 class="text-primary">{$t("common.repository").toLowerCase()}</h1>
     <ul class="mb-10 flex flex-col gap-2">
       <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <li on:click={() => shellOpenExternal(`https://github.com/${pkg.github_url}`)}>
-        <span class="hover:text-primary cursor-pointer">{pkg.github_url}</span>
+      <li on:click={() => shellOpenExternal(pkg.github_url)}>
+        <span class="hover:text-primary cursor-pointer">{getRepoLabel(pkg.github_url)}</span>
       </li>
     </ul>
   {/if}
diff --git a/svelte/src/libs/github.ts b/svelte/src/libs/github.ts
deleted file mode 100644
index cd0915453..000000000
--- a/svelte/src/libs/github.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-import axios from "axios";
-import type { Contributor, Package } from "$libs/types";
-import yaml from "js-yaml";
-export async function getPackageYaml(pkgYamlUrl: string) {
-  const url = pkgYamlUrl.replace("/github.com", "/raw.githubusercontent.com").replace("/blob", "");
-
-  const { data: rawYaml } = await axios.get(url);
-
-  const data = await yaml.load(rawYaml);
-
-  return data;
-}
-
-export async function getReadme({
-  owner,
-  repo,
-  project
-}: {
-  owner: string;
-  repo: string;
-  project: string;
-}): Promise<{ data: string; type: "md" | "rst" | "html" }> {
-  let type: "md" | "rst" | "html" = "md";
-  let data = "";
-
-  const [reqGithub, reqHTML] = await Promise.all([
-    axios.get(`https://github.com/repos/${owner}/${repo}/readme`),
-    axios.get(`https://gui.tea.xyz/dev/${project}/readme.html`)
-  ]);
-
-  if (reqHTML.status === 200) {
-    type = "html";
-    data = reqHTML.data;
-  } else if (reqGithub.data?.download_url) {
-    type = reqGithub.data.name.endsWith(".rst") ? "rst" : "md";
-    const reqDl = await axios.get(reqGithub.data.download_url);
-    data = reqDl.data;
-  }
-  return { data, type };
-}
-
-export async function getContributors(owner: string, repo: string): Promise<Contributor[]> {
-  // maintainer/repo
-  let contributors: Contributor[] = [];
-  const req = await axios.get(`https://github.com/repos/${owner}/${repo}/contributors`);
-  if (req.data) {
-    contributors = req.data.map((c: Contributor & { id: number }) => ({
-      login: c.login,
-      avatar_url: c.avatar_url,
-      name: c.name || "",
-      github_id: c.id,
-      contributions: c.contributions
-    }));
-  }
-  return contributors;
-}
-
-export async function getRepoAsPackage(owner: string, repo: string): Promise<Partial<Package>> {
-  const req = await axios.get(`https://github.com/repos/${owner}/${repo}`);
-  const pkg: Partial<Package> = {};
-  if (req.data) {
-    pkg.license = req.data?.license?.name || "";
-  }
-  return pkg;
-}
-
-export const trimGithubSlug = (slug: string): string => {
-  const gh = slug.replace("https://github.com/", "");
-  const [owner, repo] = gh.split("/");
-  return [owner, repo].join("/");
-};
diff --git a/svelte/src/libs/repo.ts b/svelte/src/libs/repo.ts
new file mode 100644
index 000000000..0994d81af
--- /dev/null
+++ b/svelte/src/libs/repo.ts
@@ -0,0 +1,126 @@
+import axios from "axios";
+import type { Contributor, GUIPackage, Package } from "$libs/types";
+import yaml from "js-yaml";
+import { isDev } from "@native";
+import log from "./logger";
+export async function getPackageYaml(pkgYamlUrl: string) {
+  const url = pkgYamlUrl.replace("/github.com", "/raw.githubusercontent.com").replace("/blob", "");
+
+  const { data: rawYaml } = await axios.get(url);
+
+  const data = await yaml.load(rawYaml);
+
+  return data;
+}
+
+export async function getReadme(
+  pkg: Partial<GUIPackage>
+): Promise<{ data: string; type: "md" | "rst" | "html" }> {
+  let type: "md" | "rst" | "html" = "md";
+  let data = "";
+  try {
+    const stage = (await isDev()) ? "dev" : "prod";
+    const reqHTML = await axios.get(`https://gui.tea.xyz/${stage}/${pkg.full_name!}/readme.html`);
+    if (reqHTML.status === 200 && reqHTML.data) {
+      return {
+        data: reqHTML.data,
+        type: "html"
+      };
+    }
+
+    const isGithub = pkg.github_url?.includes("github");
+    const isGitlab = pkg.github_url?.includes("gitlab");
+    const { namespace, projectName } = getNamespaceProject(pkg.github_url!); // TODO: replace with repo_url
+
+    if (isGithub) {
+      const reqGithub = await axios.get(
+        `https://github.com/repos/${namespace}/${projectName}/readme`
+      );
+      type = reqGithub.data.name.endsWith(".rst") ? "rst" : "md";
+      const reqDl = await axios.get(reqGithub.data.download_url);
+      data = reqDl.data;
+    } else if (isGitlab) {
+      const gitlabApiUrl = `https://gitlab.com/api/v4/projects/${encodeURIComponent(
+        namespace + "/" + projectName
+      )}`;
+      const reqForId = await axios.get(gitlabApiUrl);
+      const projectId = reqForId.data.id;
+      const reqGitlab = await axios.get(
+        `https://gitlab.com/api/v4/projects/${projectId}/repository/files/README.md/raw`
+      );
+      data = reqGitlab.data;
+    }
+  } catch (error) {
+    log.error(error);
+  }
+  return { data, type };
+}
+
+export async function getContributors(pkg: Pick<GUIPackage, "github_url">): Promise<Contributor[]> {
+  // TODO: replace with repo_url
+  // TODO: work with gitlab api GET /projects/:id/repository/contributors or index this in the db too
+  const { namespace, projectName } = getNamespaceProject(pkg.github_url!);
+  // maintainer/repo
+  let contributors: Contributor[] = [];
+  try {
+    const isGithub = pkg.github_url?.includes("github.com");
+    if (isGithub) {
+      const req = await axios.get(
+        `https://github.com/repos/${namespace}/${projectName}/contributors`
+      );
+      if (req.data) {
+        contributors = req.data.map((c: Contributor & { id: number }) => ({
+          login: c.login,
+          avatar_url: c.avatar_url,
+          name: c.name || "",
+          github_id: c.id,
+          contributions: c.contributions
+        }));
+      }
+    }
+  } catch (error) {
+    log.error(error);
+  }
+  return contributors;
+}
+
+export async function getRepoAsPackage(
+  pkg: Pick<GUIPackage, "github_url">
+): Promise<Partial<Package>> {
+  const { namespace, projectName } = getNamespaceProject(pkg.github_url!);
+
+  const newPkg: Partial<Package> = {};
+  try {
+    if (pkg.github_url?.includes("github.com")) {
+      const req = await axios.get(`https://github.com/repos/${namespace}/${projectName}`);
+      if (req.data) {
+        newPkg.license = req.data?.license?.name || "";
+      }
+    }
+  } catch (error) {
+    log.error(error);
+  }
+  return newPkg;
+}
+
+export const trimGithubSlug = (slug: string): string => {
+  const gh = slug.replace("https://github.com/", "");
+  const [owner, repo] = gh.split("/");
+  return [owner, repo].join("/");
+};
+
+export const getNamespaceProject = (repoURL: string) => {
+  const parsedUrl = new URL(repoURL);
+  const pathParts = parsedUrl.pathname.split("/").filter((part) => part);
+  const namespace = pathParts[0];
+  const projectName = pathParts[1];
+  return {
+    namespace,
+    projectName
+  };
+};
+
+export const getRepoLabel = (repoURL: string) => {
+  const { namespace, projectName } = getNamespaceProject(repoURL);
+  return `${namespace}/${projectName}`;
+};
diff --git a/svelte/src/libs/stores/pkgs.ts b/svelte/src/libs/stores/pkgs.ts
index e27a7bd23..74736f6ab 100644
--- a/svelte/src/libs/stores/pkgs.ts
+++ b/svelte/src/libs/stores/pkgs.ts
@@ -21,7 +21,7 @@ import {
   getPantryDetails
 } from "@native";
 
-import { getReadme, getContributors, getRepoAsPackage } from "$libs/github";
+import { getReadme, getContributors, getRepoAsPackage, trimGithubSlug } from "$libs/repo";
 import { trackInstall, trackInstallFailed } from "$libs/analytics";
 import {
   addInstalledVersion,
@@ -30,7 +30,6 @@ import {
   packageWasUpdated
 } from "$libs/packages/pkg-utils";
 import withDebounce from "$libs/utils/debounce";
-import { trimGithubSlug } from "$libs/github";
 import { notificationStore } from "$libs/stores";
 import withRetry from "$libs/utils/retry";
 
@@ -126,7 +125,9 @@ const syncPackageData = async (guiPkg: Partial<GUIPackage> | undefined) => {
 
   const pkg = await getPackage(guiPkg.full_name!); // ATM: pkg only bottles and github:string
   const readmeMd = `# ${guiPkg.full_name} #
-To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
+To read more about this package go to [${guiPkg.homepage || guiPkg.github_url}](${
+    guiPkg.homepage || guiPkg.github_url
+  }).
 		`;
 
   const updatedPackage: Partial<GUIPackage> = {
@@ -135,19 +136,14 @@ To read more about this package go to [${guiPkg.homepage}](${guiPkg.homepage}).
       data: readmeMd,
       type: "md"
     },
-    synced: true,
-    github_url: pkg.github_url
-      ? trimGithubSlug(pkg.github_url)
-      : pkg.full_name?.includes("github.com")
-      ? trimGithubSlug(pkg.full_name.split("github.com/")[1])
-      : ""
+    synced: true
   };
-  if (updatedPackage.github_url) {
-    const [owner, repo] = updatedPackage.github_url.split("/");
+  // TODO: fix this with repo_url
+  if (pkg.github_url) {
     const [readme, contributors, repoData] = await Promise.all([
-      getReadme({ owner, repo, project: guiPkg.full_name! }),
-      getContributors(owner, repo),
-      getRepoAsPackage(owner, repo)
+      getReadme(pkg),
+      getContributors(pkg),
+      getRepoAsPackage(pkg)
     ]);
     if (readme) {
       updatedPackage.readme = readme;
diff --git a/svelte/src/libs/translations/languages/de.json b/svelte/src/libs/translations/languages/de.json
index 50c100ab2..fe96576d1 100644
--- a/svelte/src/libs/translations/languages/de.json
+++ b/svelte/src/libs/translations/languages/de.json
@@ -51,6 +51,7 @@
       "homepage": "Startseite",
       "documentation": "Dokumentation",
       "github-repository": "Github Repository",
+      "repository": "Repository",
       "contributors": "Mitwirkende",
       "view-on-github": "AUF GITHUB ANSEHEN"
     },
diff --git a/svelte/src/libs/translations/languages/en.json b/svelte/src/libs/translations/languages/en.json
index 75085c198..acb6b0529 100644
--- a/svelte/src/libs/translations/languages/en.json
+++ b/svelte/src/libs/translations/languages/en.json
@@ -51,6 +51,7 @@
       "homepage": "Homepage",
       "documentation": "Documentation",
       "github-repository": "Github Repository",
+      "repository": "Repository",
       "contributors": "Contributors",
       "view-on-github": "VIEW ON GITHUB"
     },
diff --git a/svelte/src/libs/translations/languages/ptbr.json b/svelte/src/libs/translations/languages/ptbr.json
index a81305d29..ba45aef09 100644
--- a/svelte/src/libs/translations/languages/ptbr.json
+++ b/svelte/src/libs/translations/languages/ptbr.json
@@ -51,6 +51,7 @@
       "homepage": "Página inicial",
       "documentation": "Documentação",
       "github-repository": "Repositório Github",
+      "repository": "Repositório",
       "contributors": "Contribuidores",
       "view-on-github": "VER NO GITHUB"
     },
diff --git a/svelte/src/libs/translations/languages/ru.json b/svelte/src/libs/translations/languages/ru.json
index 7d23f02b8..6cf76dc57 100644
--- a/svelte/src/libs/translations/languages/ru.json
+++ b/svelte/src/libs/translations/languages/ru.json
@@ -51,6 +51,7 @@
       "homepage": "Домашняя страница",
       "documentation": "Документация",
       "github-repository": "Репозиторий на Github",
+      "repository": "Репозиторий",
       "contributors": "Участники",
       "view-on-github": "ПОСМОТРЕТЬ НА GITHUB"
     },
diff --git a/svelte/src/libs/translations/languages/uk.json b/svelte/src/libs/translations/languages/uk.json
index 9bcd3676e..1e23c01c7 100644
--- a/svelte/src/libs/translations/languages/uk.json
+++ b/svelte/src/libs/translations/languages/uk.json
@@ -51,6 +51,7 @@
       "homepage": "Головна",
       "documentation": "Документація",
       "github-repository": "Github Репозитарій",
+      "repository": "Репозитарій",
       "contributors": "Учасники",
       "view-on-github": "ДИВИТИСЯ НА GITHUB"
     },
diff --git a/svelte/src/libs/translations/languages/zh.json b/svelte/src/libs/translations/languages/zh.json
index c763472b0..6074c477f 100644
--- a/svelte/src/libs/translations/languages/zh.json
+++ b/svelte/src/libs/translations/languages/zh.json
@@ -51,6 +51,7 @@
       "homepage": "主页",
       "documentation": "文档",
       "github-repository": "Github 仓库",
+      "repository": "仓库",
       "contributors": "贡献者",
       "view-on-github": "在 Github 上查看"
     },

From 2702ff3e94ed46f4af7d93619092d66175f67518 Mon Sep 17 00:00:00 2001
From: neil molina <get.neilmolina@gmail.com>
Date: Fri, 18 Aug 2023 13:30:21 +0800
Subject: [PATCH 4/5] cleanup

---
 .../src/components/markdown/markdown.svelte   |  2 --
 svelte/src/libs/repo.ts                       | 21 ++++++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/svelte/src/components/markdown/markdown.svelte b/svelte/src/components/markdown/markdown.svelte
index 0306f06e4..05302091e 100644
--- a/svelte/src/components/markdown/markdown.svelte
+++ b/svelte/src/components/markdown/markdown.svelte
@@ -9,7 +9,6 @@
   import { shellOpenExternal } from "@native";
 
   export let source: { data: string; type: "md" | "rst" | "html" };
-  console.log("source", source);
   let markDownRoot: HTMLElement;
 
   export let hook = (node: HTMLElement): { destroy: () => void } => {
@@ -44,7 +43,6 @@
     }
 
     if (source.type === "html" && html) {
-      console.log("html", html);
       document.querySelectorAll(".html-content a").forEach((element: Element) => {
         const href = element.getAttribute("href");
         if (!href?.startsWith("#") && href) {
diff --git a/svelte/src/libs/repo.ts b/svelte/src/libs/repo.ts
index 0994d81af..e0ce0747e 100644
--- a/svelte/src/libs/repo.ts
+++ b/svelte/src/libs/repo.ts
@@ -28,18 +28,17 @@ export async function getReadme(
       };
     }
 
-    const isGithub = pkg.github_url?.includes("github");
-    const isGitlab = pkg.github_url?.includes("gitlab");
+    const repo = repoCloudProvider(pkg.github_url!)
     const { namespace, projectName } = getNamespaceProject(pkg.github_url!); // TODO: replace with repo_url
 
-    if (isGithub) {
+    if (repo.isGithub) {
       const reqGithub = await axios.get(
         `https://github.com/repos/${namespace}/${projectName}/readme`
       );
       type = reqGithub.data.name.endsWith(".rst") ? "rst" : "md";
       const reqDl = await axios.get(reqGithub.data.download_url);
       data = reqDl.data;
-    } else if (isGitlab) {
+    } else if (repo.isGitlab) {
       const gitlabApiUrl = `https://gitlab.com/api/v4/projects/${encodeURIComponent(
         namespace + "/" + projectName
       )}`;
@@ -63,8 +62,8 @@ export async function getContributors(pkg: Pick<GUIPackage, "github_url">): Prom
   // maintainer/repo
   let contributors: Contributor[] = [];
   try {
-    const isGithub = pkg.github_url?.includes("github.com");
-    if (isGithub) {
+    const repo = repoCloudProvider(pkg.github_url!);
+    if (repo.isGithub) {
       const req = await axios.get(
         `https://github.com/repos/${namespace}/${projectName}/contributors`
       );
@@ -91,7 +90,8 @@ export async function getRepoAsPackage(
 
   const newPkg: Partial<Package> = {};
   try {
-    if (pkg.github_url?.includes("github.com")) {
+    const repo = repoCloudProvider(pkg.github_url!);
+    if (repo.isGithub) {
       const req = await axios.get(`https://github.com/repos/${namespace}/${projectName}`);
       if (req.data) {
         newPkg.license = req.data?.license?.name || "";
@@ -124,3 +124,10 @@ export const getRepoLabel = (repoURL: string) => {
   const { namespace, projectName } = getNamespaceProject(repoURL);
   return `${namespace}/${projectName}`;
 };
+
+export const repoCloudProvider = (repoURL: string) => {
+  return {
+    isGithub: repoURL.includes("github.com"),
+    isGitlab: repoURL.includes("gitlab"),
+  }
+}
\ No newline at end of file

From 595c62730b5c961736cc67714739d688d202c48a Mon Sep 17 00:00:00 2001
From: neil molina <get.neilmolina@gmail.com>
Date: Fri, 18 Aug 2023 14:01:01 +0800
Subject: [PATCH 5/5] load iamge with relative path

---
 svelte/src/components/markdown/markdown.svelte | 14 ++++++++++++++
 svelte/src/libs/repo.ts                        |  8 ++++----
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/svelte/src/components/markdown/markdown.svelte b/svelte/src/components/markdown/markdown.svelte
index 05302091e..d17b006ca 100644
--- a/svelte/src/components/markdown/markdown.svelte
+++ b/svelte/src/components/markdown/markdown.svelte
@@ -25,6 +25,14 @@
 
   $: html = source.type === "rst" ? rst2html(source.data) : source.data;
 
+  // TODO: support gitlab too
+  const changeSrcIfNeeded = (element: HTMLElement | Element) => {
+    const src = element.getAttribute("src");
+    if (src?.startsWith("/")) {
+      element.setAttribute("src", `https://raw.githubusercontent.com${src}`);
+    }
+  };
+
   onMount(() => {
     // Need to override the height/width STYLE with the old-school height/width ATTRIBUTE to make it work with the markdown
     if (markDownRoot) {
@@ -39,10 +47,12 @@
         if (width) {
           element.style.width = width;
         }
+        changeSrcIfNeeded(element);
       });
     }
 
     if (source.type === "html" && html) {
+      // TODO: fix this hack, seems to be redundant from the hooks above
       document.querySelectorAll(".html-content a").forEach((element: Element) => {
         const href = element.getAttribute("href");
         if (!href?.startsWith("#") && href) {
@@ -52,6 +62,10 @@
           });
         }
       });
+
+      document.querySelectorAll(".html-content img").forEach((element: Element) => {
+        changeSrcIfNeeded(element);
+      });
     }
   });
 </script>
diff --git a/svelte/src/libs/repo.ts b/svelte/src/libs/repo.ts
index e0ce0747e..2e1b5754a 100644
--- a/svelte/src/libs/repo.ts
+++ b/svelte/src/libs/repo.ts
@@ -28,7 +28,7 @@ export async function getReadme(
       };
     }
 
-    const repo = repoCloudProvider(pkg.github_url!)
+    const repo = repoCloudProvider(pkg.github_url!);
     const { namespace, projectName } = getNamespaceProject(pkg.github_url!); // TODO: replace with repo_url
 
     if (repo.isGithub) {
@@ -128,6 +128,6 @@ export const getRepoLabel = (repoURL: string) => {
 export const repoCloudProvider = (repoURL: string) => {
   return {
     isGithub: repoURL.includes("github.com"),
-    isGitlab: repoURL.includes("gitlab"),
-  }
-}
\ No newline at end of file
+    isGitlab: repoURL.includes("gitlab")
+  };
+};