Skip to content

fix(og): decode xml tags in og images #1923

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
WarningImHack3r wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(og): decode xml tags in og images #1923

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions apps/svelte.dev/src/lib/utils/escape.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,28 @@
const chars = {
'&': '&',
'<': '&lt;',
'>': '&gt;'
'>': '&gt;',
'"': '&quot;',
"'": '&apos;'
};

const encoded_chars = Object.fromEntries(Object.entries(chars).map(([key, value]) => [value, key]));

const symbols_regex = new RegExp(`[${Object.keys(chars).join('')}]`, 'g');

const encoded_symbols_regex = new RegExp(
`&(?:${Object.values(chars)
.map((entity) => entity.slice(1, entity.length - 1))
.join('|')});`,
'g'
);

/** @param {string} html */
export function escape_html(html) {
return html.replace(/[&<>]/g, (c) => chars[c]);
return html.replace(symbols_regex, (c) => chars[c] ?? c);
}

/** @param {string} html */
export function decode_html(html) {
return html.replace(encoded_symbols_regex, (c) => encoded_chars[c] ?? c);
}
31 changes: 30 additions & 1 deletion apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Card from './Card.svelte';
import DMSerifDisplay from '$lib/fonts/DMSerifDisplay-Regular.ttf?url';
import FiraSans from '$lib/fonts/FiraSans-Regular.ttf?url';
import { blog_posts } from '$lib/server/content';
import { decode_html } from '$lib/utils/escape';
import type { ServerlessConfig } from '@sveltejs/adapter-vercel';

export const config: ServerlessConfig = {
Expand All @@ -22,6 +23,34 @@ export function entries() {
}));
}

type VNode = ReturnType<typeof toReactNode>;

/**
* Decodes the XML-ified parts of string subnodes
* to revert to the original content
*
* @param node the original node
* @returns the node with replaced leaves
*/
function decode_vnode(node: VNode): VNode {
const children = node.props.children;
if (!children) return node;

const decodedChildren =
typeof children === 'string'
? decode_html(children)
: Array.isArray(children)
? children.map(decode_vnode)
: decode_vnode(children);

if (decodedChildren === children) return node;

return {
...node,
props: { ...node.props, children: decodedChildren }
};
}

const height = 630;
const width = 1200;
const dm_serif_display = await read(DMSerifDisplay).arrayBuffer();
Expand All @@ -35,7 +64,7 @@ export async function GET({ params }) {
const result = render(Card, { props: { title: post.metadata.title, date: post.date_formatted } });
const element = toReactNode(`<head>${result.head}</head>${result.body}`);

const svg = await satori(element, {
const svg = await satori(decode_vnode(element), {
fonts: [
{
name: 'DMSerif Display',
Expand Down
31 changes: 30 additions & 1 deletion apps/svelte.dev/src/routes/docs/[topic]/[...path]/card.png/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import Card from './Card.svelte';
import DMSerifDisplay from '$lib/fonts/DMSerifDisplay-Regular.ttf?url';
import FiraSans from '$lib/fonts/FiraSans-Regular.ttf?url';
import { docs } from '$lib/server/content';
import { decode_html } from '$lib/utils/escape';
import type { ServerlessConfig } from '@sveltejs/adapter-vercel';

export const config: ServerlessConfig = {
Expand All @@ -27,6 +28,34 @@ export function entries() {
});
}

type VNode = ReturnType<typeof toReactNode>;

/**
* Decodes the XML-ified parts of string subnodes
* to revert to the original content
*
* @param node the original node
* @returns the node with replaced leaves
*/
function decode_vnode(node: VNode): VNode {
const children = node.props.children;
if (!children) return node;

const decodedChildren =
typeof children === 'string'
? decode_html(children)
: Array.isArray(children)
? children.map(decode_vnode)
: decode_vnode(children);

if (decodedChildren === children) return node;

return {
...node,
props: { ...node.props, children: decodedChildren }
};
}

const height = 630;
const width = 1200;
const dm_serif_display = await read(DMSerifDisplay).arrayBuffer();
Expand All @@ -42,7 +71,7 @@ export async function GET({ params }) {
});
const element = toReactNode(`<head>${result.head}</head>${result.body}`);

const svg = await satori(element, {
const svg = await satori(decode_vnode(element), {
fonts: [
{
name: 'DMSerif Display',
Expand Down
Loading