sam/pronounscc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add opengraph tags

Browse source
This commit is contained in:
Sam 2023-03-14 03:01:26 +01:00
parent 8cab186ee4
commit 97cce1d8fc
Signed by: sam
GPG key ID: B4EF20DDE721CAA1
6 changed files with 117 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

42
frontend/src/routes/@[username]/+page.svelte
View file

@ -11,16 +11,56 @@
import PartialMemberCard from "$lib/components/PartialMemberCard.svelte";
import FallbackImage from "$lib/components/FallbackImage.svelte";
import { userStore } from "$lib/store";
import { userAvatars } from "$lib/api/entities";
import { pronounDisplay, userAvatars, WordStatus } from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public";
export let data: PageData;
let bio: string | null;
$: bio = data.bio ? sanitizeHtml(marked.parse(data.bio)) : null;
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
</script>
<svelte:head>
<title>@{data.name} - pronouns.cc</title>
<meta
property="og:title"
content={data.display_name ? `${data.display_name} (@${data.name})` : `@${data.name}`}
/>
<meta property="og:url" content="{PUBLIC_BASE_URL}/@{data.name}" />
{#if data.avatar}
<meta property="og:image" content={userAvatars(data)[0]} />
{/if}
{#if favNames.length !== 0 && favPronouns.length !== 0}
<meta
property="og:description"
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')} and uses {favPronouns
.map((x) => pronounDisplay(x))
.join(', ')} pronouns."
/>
{:else if favNames.length !== 0}
<meta
property="og:description"
content="@{data.name} goes by {favNames.map((x) => x.value).join(', ')}."
/>
{:else if favPronouns.length !== 0}
<meta
property="og:description"
content="@{data.name} uses {favPronouns.map((x) => pronounDisplay(x)).join(', ')} pronouns."
/>
{:else if data.bio && data.bio !== ""}
<meta
property="og:description"
content="{data.bio.slice(0, 500)}${data.bio.length > 500 ? '…' : ''}"
/>
{:else}
<meta property="og:description" content="@{data.name} on pronouns.cc" />
{/if}
</svelte:head>
<div class="container">

44
frontend/src/routes/@[username]/[memberName]/+page.svelte
View file

@ -9,16 +9,58 @@
import PronounLink from "$lib/components/PronounLink.svelte";
import FallbackImage from "$lib/components/FallbackImage.svelte";
import { Button, Icon } from "sveltestrap";
import { memberAvatars } from "$lib/api/entities";
import { memberAvatars, pronounDisplay, WordStatus } from "$lib/api/entities";
import { PUBLIC_BASE_URL } from "$env/static/public";
export let data: PageData;
let bio: string | null;
$: bio = data.bio ? sanitizeHtml(marked.parse(data.bio)) : null;
const favNames = data.names.filter((entry) => entry.status === WordStatus.Favourite);
const favPronouns = data.pronouns.filter((entry) => entry.status === WordStatus.Favourite);
</script>
<svelte:head>
<title>{data.display_name ?? data.name} - @{data.user.name} - pronouns.cc</title>
<meta
property="og:title"
content={data.display_name
? `${data.display_name} (${data.name})`
: `${data.name} (@${data.user.name})`}
/>
<meta property="og:url" content="{PUBLIC_BASE_URL}/@{data.user.name}/{data.name}" />
{#if data.avatar}
<meta property="og:image" content={memberAvatars(data)[0]} />
{/if}
{#if favNames.length !== 0 && favPronouns.length !== 0}
<meta
property="og:description"
content="{data.name} goes by {favNames.map((x) => x.value).join(', ')} and uses {favPronouns
.map((x) => pronounDisplay(x))
.join(', ')} pronouns."
/>
{:else if favNames.length !== 0}
<meta
property="og:description"
content="{data.name} goes by {favNames.map((x) => x.value).join(', ')}."
/>
{:else if favPronouns.length !== 0}
<meta
property="og:description"
content="{data.name} uses {favPronouns.map((x) => pronounDisplay(x)).join(', ')} pronouns."
/>
{:else if data.bio && data.bio !== ""}
<meta
property="og:description"
content="{data.bio.slice(0, 500)}${data.bio.length > 500 ? '…' : ''}"
/>
{:else}
<meta property="og:description" content="{data.name} (@{data.user.name}) on pronouns.cc" />
{/if}
</svelte:head>
<div class="container">