✨ added embeds for posts :3

2024-04-24 01:32:35 -04:00 · 2024-04-24 01:32:35 -04:00 · 12f5b1eb68
commit 12f5b1eb68
parent 114c9f93d4
16 changed files with 523 additions and 6 deletions
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@ -0,0 +1,27 @@
+import { html } from "hono/html";
+
+export interface LayoutProps {
+  url: string;
+  children: any;
+}
+
+export const Layout = ({ url, children }: LayoutProps) => {
+  const removeLeadingSlash = url.substring(1);
+  const redirectUrl = removeLeadingSlash.startsWith("https://")
+    ? removeLeadingSlash
+    : `https://bsky.app/${removeLeadingSlash}`;
+  return html`
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <link rel="canonical" href="${url.substring(1)}" />
+        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
+        <meta content="#0085ff" name="theme-color" />
+        <meta property="og:site_name" content="FixBluesky" />
+
+        ${children}
+        <meta http-equiv="refresh" content="0;url=${redirectUrl}" />
+      </head>
+    </html>
+  `;
+};
--- a/src/components/Post.tsx
+++ b/src/components/Post.tsx
@ -0,0 +1,52 @@
+import type { AppBskyFeedDefs } from "@atproto/api";
+
+import { parseEmbedDescription } from "../lib/parseEmbedDescription.ts";
+import { parseEmbedImage } from "../lib/parseEmbedImage.ts";
+import { OEmbedTypes } from "../routes/getOEmbed.ts";
+import { Layout } from "./Layout.tsx";
+
+interface PostProps {
+  post: AppBskyFeedDefs.PostView;
+  url: string;
+  appDomain: string;
+}
+
+export const Post = ({ post, url, appDomain }: PostProps) => {
+  const image = parseEmbedImage(post);
+  return (
+    <Layout url={url}>
+      <meta name="twitter:creator" content={`@${post.author.handle}`} />
+      <meta
+        property="og:description"
+        content={parseEmbedDescription(post)}
+      />
+      <meta
+        property="og:title"
+        content={`${post.author.displayName} (@${post.author.handle})`}
+      />
+
+      {!(image === post.author.avatar) && (
+        <meta name="twitter:card" content="summary_large_image" />
+      )}
+
+      {Array.isArray(image) ? (
+        image.map((i) => (
+          <meta property="og:image" content={i} key={i} />
+        ))
+      ) : (
+        <meta property="og:image" content={image} />
+      )}
+
+      <link
+        type="application/json+oembed"
+        href={`https:/${appDomain}/oembed?type=${
+          OEmbedTypes.Post
+        }&replies=${post.replyCount}&reposts=${
+          post.repostCount
+        }&likes=${post.likeCount}&avatar=${encodeURIComponent(
+          post.author.avatar ?? "",
+        )}`}
+      />
+    </Layout>
+  );
+};