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

8
frontend/src/lib/api/entities.ts
View file

@ -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 [];

8
frontend/src/routes/+layout.svelte
View file

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

7
frontend/src/routes/+page.svelte
View file

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

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

10
frontend/src/routes/pronouns/[...pronouns]/+page.svelte
View file

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