-

Author: Ehesp

website-v3/api/OgComponent.tsx

@@ -0,0 +1,20 @@
+type Props = {
+  owner: string;
+  repository: string;
+};
+
+export const OgComponent = (props: Props) => {
+  return (
+    <div
+      style={{
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <h1>Open Graph Component</h1>
+    </div>
+  );
+};

website-v3/api/og.tsx renamed to website-v3/api/og.ts

@@ -1,4 +1,5 @@
 import { ImageResponse } from '@vercel/og';
+import { OgComponent } from './OgComponent';
 
 // Note; this API route is deployed to Vercel separatly from Astro since it
 // needs to run on the edge.
@@ -20,11 +21,8 @@ export default function handler(req: Request) {
   const domain = params.get('domain');
   const logo = params.get('logo');
 
-  return new ImageResponse(
-    <div tw="w-full h-full flex flex-col items-center justify-center bg-white">Hello world!</div>,
-    {
-      width: 1200,
-      height: 600,
-    },
-  );
+  return new ImageResponse(OgComponent({ owner, repository }), {
+    width: 1200,
+    height: 600,
+  });
 }

website-v3/astro.config.mjs

@@ -3,6 +3,7 @@ import tailwind from '@astrojs/tailwind';
 import node from '@astrojs/node';
 import vercel from '@astrojs/vercel/serverless';
 import react from '@astrojs/react';
+import prefetch from '@astrojs/prefetch';
 
 // https://astro.build/config
 
@@ -12,5 +13,5 @@ import react from '@astrojs/react';
 export default defineConfig({
   output: 'server',
   adapter: process.env.VERCEL ? vercel() : node({ mode: 'standalone' }),
-  integrations: [tailwind(), react()],
+  integrations: [tailwind(), react(), prefetch()],
 });

website-v3/src/layouts/Sidebar.astro

@@ -1,6 +1,7 @@
 ---
 import Link from '@components/Link';
 import context from 'src/context';
+import { isExternalLink } from 'src/utils';
 
 const sidebar = context.get().config.sidebar || [];
 ---
@@ -16,6 +17,7 @@ const sidebar = context.get().config.sidebar || [];
                 href={urlOrChildren}
                 className="mb-3 block font-medium tracking-wide opacity-75 transition hover:opacity-100"
                 activeClassName="text-docs-theme opacity-100"
+                rel={isExternalLink(urlOrChildren) ? 'noopener noreferrer' : 'prefetch'}
               >
                 {title}
               </Link>
@@ -33,6 +35,7 @@ const sidebar = context.get().config.sidebar || [];
                     href={url}
                     className="hover:border-docs-theme relative -left-px block border-l border-transparent pl-4 opacity-75 transition hover:opacity-100"
                     activeClassName="border-docs-theme opacity-100 font-semibold tracking-wide text-docs-theme"
+                    rel={isExternalLink(url) ? 'noopener noreferrer' : 'prefetch'}
                   >
                     {title}
                   </Link>