Add Opengraph tags (probably)

1 year ago · 84e3d0f49f
parent 3199bd04f6
commit 84e3d0f49f
1 changed files with 59 additions and 0 deletions
--- a/templates/Story.tsx
+++ b/templates/Story.tsx
@ -42,6 +42,13 @@ export default (props: PropsWithChildren<StoryProps>) => {
        }))
    );

+    const isChapter = props.currentHref.includes("chapter=");
+    // FIXME: shouldn't be hardcoded
+    const currentURL = new URL(
+        "https://voltpad.ruthenic.com" + props.currentHref
+    );
+    const chapterNum = currentURL.searchParams.get("chapter") ?? 0;
+
    return (
        <html lang="en">
            <head>
@ -80,6 +87,58 @@ export default (props: PropsWithChildren<StoryProps>) => {
                <meta name="msapplication-TileColor" content="#2b5797" />
                <meta name="theme-color" content="#ffffff" />

+                <meta property="og:type" content="article" />
+
+                <meta
+                    property="og:article:author"
+                    content={
+                        props.story.storyJSON.user.fullname === ""
+                            ? props.story.storyJSON.user.name
+                            : props.story.storyJSON.user.fullname
+                    }
+                ></meta>
+
+                <meta property="og:url" content={currentURL.toString()}></meta>
+
+                {isChapter ? (
+                    <meta
+                        property="og:title"
+                        content={props.story.chapters[0].name}
+                    />
+                ) : (
+                    <meta property="og:title" content={props.story.name} />
+                )}
+
+                {isChapter ? (
+                    props.story.chapters[0].partJSON.photoUrl ? (
+                        <meta
+                            property="og:image"
+                            content={props.story.chapters[0].partJSON.photoUrl}
+                        />
+                    ) : undefined
+                ) : undefined}
+
+                {isChapter ? (
+                    props.story.chapters[0].partJSON.videoId ? (
+                        <meta
+                            property="og:video"
+                            content={`https://www.youtube.com/v/${props.story.chapters[0].partJSON.videoId}`}
+                        />
+                    ) : undefined
+                ) : undefined}
+
+                {isChapter ? undefined : (
+                    <meta
+                        property="og:description"
+                        content={
+                            /* FIXME: should prob expose voltpad's wattpad html parser and run it through that */
+                            props.story.storyJSON.description
+                                .replaceAll('"', "'")
+                                .replaceAll("<br>", "\n")
+                        }
+                    />
+                )}
+
                <title>{props.story.name}</title>
                {(() => {
                    if (!props.style) props.style = "";