Skip to content

Commit 361ca66

Browse files
baseplate-adminbaseplate-admin
committed
feat: add domains to opengraph
1 parent e21e425 commit 361ca66

17 files changed

Lines changed: 165 additions & 31 deletions

File tree

‎src/frontend/src/routes/og/OGLayout.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,24 @@
44
import logo from '$lib/assets/logo.svg?raw';
55
66
let {
7+
domain,
78
label,
89
title,
910
subtitle,
1011
footerTags = ['End-to-end encryption', 'Auto-expiring links', 'Zero-knowledge']
1112
} = $props<{
13+
domain?: string | null;
1214
label: string;
1315
title: string;
1416
subtitle: string;
1517
footerTags?: string[];
1618
}>();
19+
20+
const RTL_CHARACTERS = /[\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC]/;
21+
const displayDomain = $derived(domain?.trim() || '');
22+
const isRtl = $derived(RTL_CHARACTERS.test(`${label} ${title} ${subtitle}`));
23+
const direction = $derived(isRtl ? 'rtl' : 'ltr');
24+
const domainAlignClass = $derived(isRtl ? 'ml-auto text-right' : 'mr-auto text-left');
1725
</script>
1826

1927
<div
@@ -27,6 +35,17 @@
2735
class="absolute -right-50 -bottom-50 flex h-150 w-150 rounded-full bg-[rgba(214,16,179,0.15)] blur-[120px]"
2836
></div>
2937

38+
{#if displayDomain}
39+
<div class="absolute left-24 right-24 top-10 z-10 flex">
40+
<div
41+
class={`flex items-center text-[20px] font-semibold text-[#e5e7eb] ${domainAlignClass}`}
42+
dir={direction}
43+
>
44+
{displayDomain}
45+
</div>
46+
</div>
47+
{/if}
48+
3049
<!-- Main Content Row -->
3150
<div class="relative z-10 flex flex-row items-center">
3251
<!-- Logo Box -->

‎src/frontend/src/routes/og/base/+server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@ import ImageResponse from 'takumi-js/response';
66
import type { RequestEvent } from '../$types';
77
import Component from './Component.svelte';
88

9-
export async function GET({ url }: RequestEvent) {
9+
function getRequestDomain(url: URL, request: Request) {
10+
const forwardedHost = request.headers.get('x-forwarded-host');
11+
const host = forwardedHost?.split(',')[0]?.trim() ?? request.headers.get('host');
12+
if (host) {
13+
return host.replace(/:\d+$/, '');
14+
}
15+
16+
return url.hostname;
17+
}
18+
19+
export async function GET({ url, request }: RequestEvent) {
20+
const domain = getRequestDomain(url, request);
1021
const { body, head } = await render(Component, {
1122
props: {
1223
title: url.searchParams.get('title'),
13-
description: url.searchParams.get('description')
24+
description: url.searchParams.get('description'),
25+
domain
1426
}
1527
});
1628

‎src/frontend/src/routes/og/base/Component.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import OGLayout from '../OGLayout.svelte';
33
4-
let { title, description } = $props<{
4+
let { title, description, domain } = $props<{
55
title?: string | null;
66
description?: string | null;
7+
domain?: string | null;
78
}>();
89
910
const displayTitle = $derived((title?.trim() || 'Chithi').slice(0, 42));
@@ -19,5 +20,6 @@
1920
label="Private by design"
2021
title={displayTitle}
2122
subtitle={displayDescription}
23+
domain={domain}
2224
footerTags={['End-to-end encryption', 'Auto-expiring links', 'Zero-knowledge transfer']}
2325
/>

‎src/frontend/src/routes/og/download/+server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@ import ImageResponse from 'takumi-js/response';
66
import type { RequestEvent } from './$types';
77
import Component from './Component.svelte';
88

9-
export async function GET({ url }: RequestEvent) {
9+
function getRequestDomain(url: URL, request: Request) {
10+
const forwardedHost = request.headers.get('x-forwarded-host');
11+
const host = forwardedHost?.split(',')[0]?.trim() ?? request.headers.get('host');
12+
if (host) {
13+
return host.replace(/:\d+$/, '');
14+
}
15+
16+
return url.hostname;
17+
}
18+
19+
export async function GET({ url, request }: RequestEvent) {
20+
const domain = getRequestDomain(url, request);
1021
const { body, head } = await render(Component, {
1122
props: {
1223
filename: url.searchParams.get('filename'),
13-
size: url.searchParams.get('size')
24+
size: url.searchParams.get('size'),
25+
domain
1426
}
1527
});
1628

‎src/frontend/src/routes/og/download/Component.svelte‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
<script lang="ts">
22
import OGLayout from '../OGLayout.svelte';
33
4-
let { filename, size } = $props<{
4+
let { filename, size, domain } = $props<{
55
filename?: string | null;
66
size?: string | null;
7+
domain?: string | null;
78
}>();
89
910
const displayFilename = $derived((filename?.trim() || 'Encrypted File').slice(0, 42));
1011
const displaySize = $derived(size?.trim() || 'Unknown size');
1112
</script>
1213

13-
<OGLayout label="Ready to download" title={displayFilename} subtitle="Size: {displaySize}" />
14+
<OGLayout
15+
label="Ready to download"
16+
title={displayFilename}
17+
subtitle="Size: {displaySize}"
18+
domain={domain}
19+
/>

‎src/frontend/src/routes/og/info/+server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,24 @@ import ImageResponse from 'takumi-js/response';
66
import type { RequestEvent } from './$types';
77
import Component from './Component.svelte';
88

9-
export async function GET({ url }: RequestEvent) {
9+
function getRequestDomain(url: URL, request: Request) {
10+
const forwardedHost = request.headers.get('x-forwarded-host');
11+
const host = forwardedHost?.split(',')[0]?.trim() ?? request.headers.get('host');
12+
if (host) {
13+
return host.replace(/:\d+$/, '');
14+
}
15+
16+
return url.hostname;
17+
}
18+
19+
export async function GET({ url, request }: RequestEvent) {
20+
const domain = getRequestDomain(url, request);
1021
const { body, head } = await render(Component, {
1122
props: {
1223
label: url.searchParams.get('label'),
1324
title: url.searchParams.get('title'),
14-
description: url.searchParams.get('description')
25+
description: url.searchParams.get('description'),
26+
domain
1527
}
1628
});
1729

‎src/frontend/src/routes/og/info/Component.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
11
<script lang="ts">
22
import OGLayout from '../OGLayout.svelte';
33
4-
let { label, title, description } = $props<{
4+
let { label, title, description, domain } = $props<{
55
label?: string | null;
66
title?: string | null;
77
description?: string | null;
8+
domain?: string | null;
89
}>();
910
1011
const displayLabel = $derived(label?.trim() || 'Information');
@@ -16,4 +17,4 @@
1617
);
1718
</script>
1819

19-
<OGLayout label={displayLabel} title={displayTitle} subtitle={displayDescription} />
20+
<OGLayout label={displayLabel} title={displayTitle} subtitle={displayDescription} domain={domain} />

‎src/frontend/src/routes/og/login/+server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@ import ImageResponse from 'takumi-js/response';
66
import type { RequestEvent } from './$types';
77
import Component from './Component.svelte';
88

9-
export async function GET({ url }: RequestEvent) {
9+
function getRequestDomain(url: URL, request: Request) {
10+
const forwardedHost = request.headers.get('x-forwarded-host');
11+
const host = forwardedHost?.split(',')[0]?.trim() ?? request.headers.get('host');
12+
if (host) {
13+
return host.replace(/:\d+$/, '');
14+
}
15+
16+
return url.hostname;
17+
}
18+
19+
export async function GET({ url, request }: RequestEvent) {
20+
const domain = getRequestDomain(url, request);
1021
const { body, head } = await render(Component, {
1122
props: {
1223
title: url.searchParams.get('title'),
13-
description: url.searchParams.get('description')
24+
description: url.searchParams.get('description'),
25+
domain
1426
}
1527
});
1628

‎src/frontend/src/routes/og/login/Component.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
<script lang="ts">
22
import OGLayout from '../OGLayout.svelte';
33
4-
let { title, description } = $props<{
4+
let { title, description, domain } = $props<{
55
title?: string | null;
66
description?: string | null;
7+
domain?: string | null;
78
}>();
89
910
const displayTitle = $derived((title?.trim() || 'Welcome Back').slice(0, 42));
@@ -14,4 +15,4 @@
1415
);
1516
</script>
1617

17-
<OGLayout label="Authentication" title={displayTitle} subtitle={displayDescription} />
18+
<OGLayout label="Authentication" title={displayTitle} subtitle={displayDescription} domain={domain} />

‎src/frontend/src/routes/og/once/+server.ts‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,23 @@ import ImageResponse from 'takumi-js/response';
66
import type { RequestEvent } from './$types';
77
import Component from './Component.svelte';
88

9-
export async function GET({ url }: RequestEvent) {
9+
function getRequestDomain(url: URL, request: Request) {
10+
const forwardedHost = request.headers.get('x-forwarded-host');
11+
const host = forwardedHost?.split(',')[0]?.trim() ?? request.headers.get('host');
12+
if (host) {
13+
return host.replace(/:\d+$/, '');
14+
}
15+
16+
return url.hostname;
17+
}
18+
19+
export async function GET({ url, request }: RequestEvent) {
20+
const domain = getRequestDomain(url, request);
1021
const { body, head } = await render(Component, {
1122
props: {
1223
title: url.searchParams.get('title'),
13-
description: url.searchParams.get('description')
24+
description: url.searchParams.get('description'),
25+
domain
1426
}
1527
});
1628

0 commit comments

Comments
 (0)