feat: add opengraph tags

frontend/src/lib/api/entities.ts

@@ -111,6 +111,14 @@ export enum ErrorCode {
   RequestTooBig = 4001,
 }
 
+export const pronounDisplay = (entry: Pronoun) => {
+  if (entry.display_text) return entry.display_text;
+
+  const split = entry.pronouns.split("/");
+  if (split.length < 2) return split.join("/");
+  else return split.slice(0, 2).join("/");
+};
+
 export const userAvatars = (user: User | MeUser | MemberPartialUser) => {
   if (!user.avatar) return [];
 

frontend/src/routes/+layout.svelte

@@ -5,12 +5,20 @@
   import Navigation from "./nav/Navigation.svelte";
   import type { LayoutData } from "./$types";
   import { version } from "$app/environment";
+  import { PUBLIC_BASE_URL } from "$env/static/public";
 
   export let data: LayoutData;
 
   const versionMismatch = data.git_commit !== version && data.git_commit !== "[unknown]";
 </script>
 
+<svelte:head>
+  <title>pronouns.cc</title>
+  <meta property="og:type" content="website" />
+  <meta name="theme-color" content="#aa8ed6" />
+  <meta property="og:site_name" content="pronouns.cc" />
+</svelte:head>
+
 <Navigation />
 <div class="container">
   <slot />

frontend/src/routes/+page.svelte

@@ -1,5 +1,12 @@
+<script lang="ts">
+  import { PUBLIC_BASE_URL } from "$env/static/public";
+</script>
+
 <svelte:head>
   <title>pronouns.cc</title>
+  <meta property="og:title" content="pronouns.cc" />
+  <meta property="og:description" content="Name and pronoun cards!" />
+  <meta property="og:url" content={PUBLIC_BASE_URL} />
 </svelte:head>
 
 <h1>pronouns.cc</h1>

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

@@ -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">

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

@@ -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">

frontend/src/routes/pronouns/[...pronouns]/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { PUBLIC_BASE_URL } from "$env/static/public";
   import type { PageData } from "../../$types";
 
   export let data: PageData;
@@ -8,6 +9,15 @@
   const displayText = data.displayText || `${subjective}/${objective}`;
 </script>
 
+<svelte:head>
+  <meta property="og:title" content={displayText} />
+  <meta property="og:description" content="How to use {displayText} pronouns" />
+  <meta
+    property="og:url"
+    content="{PUBLIC_BASE_URL}/pronouns/{subjective}/{objective}/{possessiveDeterminer}/{possessivePronoun}/{reflexive}"
+  />
+</svelte:head>
+
 <h1>{displayText}</h1>
 
 <p>Here are some example sentences using <b>{displayText}</b> pronouns!</p>