feat: shorter github links (#801)

packages/ui/src/lib/components/Markdown/Link.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+  import GithubLink from '$lib/components/GithubLink/GithubLink.svelte';
   import Link from '$lib/components/Link/Link.svelte';
+  import { parseGithubLink } from '$lib/utilities/common.js';
   import type { Snippet } from 'svelte';
 
   type Props = {
@@ -9,6 +11,12 @@
   };
 
   const { href, title, children }: Props = $props();
+
+  const github = $derived(parseGithubLink(href));
 </script>
 
+{#if github}
+  <GithubLink {...github} {title} />
+{:else}
   <Link {href} {title} {children} />
+{/if}

packages/ui/src/lib/utilities/common.spec.ts

@@ -1,4 +1,4 @@
-import { isEnabled, isExternalLink, resolveMetadata, resolveUrl } from '$lib/utilities/common.js';
+import { isEnabled, isExternalLink, parseGithubLink, resolveMetadata, resolveUrl } from '$lib/utilities/common.js';
 import { DateTime } from 'luxon';
 import { beforeAll, describe, expect, it } from 'vitest';
 
@@ -140,3 +140,41 @@ describe(isEnabled.name, () => {
     expect(isEnabled({ $if: () => user && true })).toBe(false);
   });
 });
+
+describe('parseGithubLink', () => {
+  const tests = [
+    {
+      url: 'https://github.com/immich-app/immich/issues/1',
+      result: { org: 'immich-app', repo: 'immich', number: 1, type: 'issue' },
+    },
+    {
+      url: 'https://github.com/immich-app/immich/pull/23',
+      result: { org: 'immich-app', repo: 'immich', number: 23, type: 'pr' },
+    },
+    {
+      url: 'https://github.com/immich-app/immich/discussions/456',
+      result: { org: 'immich-app', repo: 'immich', number: 456, type: 'discussion' },
+    },
+    {
+      url: 'https://github.com/immich-app/immich-charts/pull/7/',
+      result: { org: 'immich-app', repo: 'immich-charts', number: 7, type: 'pr' },
+    },
+    {
+      url: 'https://www.github.com/other/repo.js/issues/9',
+      result: { org: 'other', repo: 'repo.js', number: 9, type: 'issue' },
+    },
+    { url: 'https://github.com/immich-app/immich', result: undefined },
+    { url: 'https://github.com/immich-app/immich/pull', result: undefined },
+    { url: 'https://github.com/immich-app/immich/pull/abc', result: undefined },
+    { url: 'https://github.com/immich-app/immich/releases/tag/v1.0.0', result: undefined },
+    { url: 'https://github.com/immich-app/immich/pull/1#issuecomment-2', result: undefined },
+    { url: 'https://gitlab.com/immich-app/immich/issues/1', result: undefined },
+    { url: 'https://immich.app', result: undefined },
+  ];
+
+  for (const { url, result } of tests) {
+    it(`should map ${url} to ${JSON.stringify(result)}`, () => {
+      expect(parseGithubLink(url)).toEqual(result);
+    });
+  }
+});

packages/ui/src/lib/utilities/common.ts

@@ -61,6 +61,25 @@ export const asGithubLink = (options: number | GithubLinkProps) => {
   return { href: `https://github.com/${org}/${repo}/${urlTypes[type]}/${number}`, text: getText(org, repo, number) };
 };
 
+const getGithubLinkType = (segment: string) =>
+  (Object.entries(urlTypes) as Array<[GithubLinkType, string]>).find(([, value]) => value === segment)?.[0];
+
+const GITHUB_URL_REGEX = new RegExp(
+  String.raw`^https?://(?:www\.)?github\.com/(?<org>[\w.-]+)/(?<repo>[\w.-]+)/(?<segment>${Object.values(urlTypes).join('|')})/(?<number>\d+)/?$`,
+  'i',
+);
+
+export const parseGithubLink = (href: string) => {
+  const groups = GITHUB_URL_REGEX.exec(href)?.groups;
+  if (!groups) {
+    return;
+  }
+
+  const { org, repo, segment, number } = groups;
+
+  return { org, repo, number: Number(number), type: getGithubLinkType(segment.toLowerCase()) };
+};
+
 const getImmichApp = (host: string | undefined) => {
   if (!host || !host.endsWith('immich.app')) {
     return false;