feat: add short IDs + link shortener

This commit is contained in:
Sam 2023-06-03 03:06:26 +02:00
parent 7c94c088e0
commit 10dc59d3d4
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
18 changed files with 510 additions and 31 deletions

View file

@ -30,6 +30,7 @@
type Pronoun,
} from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public";
import { env } from "$env/dynamic/public";
import { apiFetchClient } from "$lib/api/fetch";
import ErrorAlert from "$lib/components/ErrorAlert.svelte";
import { goto } from "$app/navigation";
@ -41,6 +42,7 @@
import defaultPreferences from "$lib/api/default_preferences";
import { addToast } from "$lib/toast";
import ProfileFlag from "./ProfileFlag.svelte";
import IconButton from "$lib/components/IconButton.svelte";
export let data: PageData;
@ -117,6 +119,12 @@
addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
};
const copyShortURL = async () => {
const url = `${env.PUBLIC_SHORT_BASE}/${data.sid}`;
await navigator.clipboard.writeText(url);
addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
};
onMount(async () => {
if ($userStore && $userStore.id === data.id) {
console.log("User is current user, fetching members");
@ -231,6 +239,15 @@
<Button color="secondary" outline on:click={copyURL}>
<Icon name="clipboard" /> Copy link
</Button>
{#if env.PUBLIC_SHORT_BASE}
<IconButton
outline
icon="link-45deg"
tooltip="Copy short link"
color="secondary"
click={copyShortURL}
/>
{/if}
{#if $userStore && $userStore.id !== data.id}
<ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
{/if}

View file

@ -13,6 +13,7 @@
type Pronoun,
} from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public";
import { env } from "$env/dynamic/public";
import { userStore } from "$lib/store";
import { renderMarkdown } from "$lib/utils";
import ReportButton from "../ReportButton.svelte";
@ -21,6 +22,7 @@
import defaultPreferences from "$lib/api/default_preferences";
import { addToast } from "$lib/toast";
import ProfileFlag from "../ProfileFlag.svelte";
import IconButton from "$lib/components/IconButton.svelte";
export let data: PageData;
@ -51,6 +53,12 @@
await navigator.clipboard.writeText(url);
addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
};
const copyShortURL = async () => {
const url = `${env.PUBLIC_SHORT_BASE}/${data.sid}`;
await navigator.clipboard.writeText(url);
addToast({ body: "Copied the short link to your clipboard!", duration: 2000 });
};
</script>
<div class="container">
@ -153,6 +161,15 @@
<Button color="secondary" outline on:click={copyURL}>
<Icon name="clipboard" /> Copy link
</Button>
{#if env.PUBLIC_SHORT_BASE}
<IconButton
outline
icon="link-45deg"
tooltip="Copy short link"
color="secondary"
click={copyShortURL}
/>
{/if}
{#if $userStore && $userStore.id !== data.user.id}
<ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
{/if}