fix og image

kawamataryo · Jan 16, 2025 · 13fed47 · 13fed47
1 parent e899b01
commit 13fed47
Show file tree

Hide file tree

Showing 5 changed files with 114 additions and 137 deletions.
diff --git a/lp/src/index.ts b/lp/src/index.ts
@@ -1,91 +1,23 @@
 import { Hono } from 'hono'
 import { ImageResponse } from "workers-og";
-import type { Context } from 'hono'
-
+import { generateLandingHtml } from './lib/generateLandingHtml';
+import { backgroundImage } from './lib/backgroundImage';
 const app = new Hono()
 
-const generateLandingPage = (c: Context) => {
-  const userCount = c.req.query('q') || '0'
-  const host = c.req.header('host') || ''
-  const protocol = host.includes('localhost') ? 'http' : 'https'
-  const baseUrl = `${protocol}://${host}`
-  const ogImageUrl = `${baseUrl}/og?q=${userCount}`
-
-  // クローラーの判定
-  const userAgent = c.req.header('user-agent')?.toLowerCase() || ''
-  const isCrawler = userAgent.includes('twitterbot') ||
-    userAgent.includes('bsky') ||
-    userAgent.includes('bot') ||
-    userAgent.includes('crawler') ||
-    userAgent.includes('facebook') ||
-    userAgent.includes('linkedin')
-
-  const html = `<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sky Follower Bridge - Detected Users: ${userCount}</title>
-    <meta name="description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
-
-    <!-- Essential OG Meta Tags -->
-    <meta property="og:title" content="Sky Follower Bridge">
-    <meta property="og:site_name" content="Sky Follower Bridge">
-    <meta property="og:description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
-    <meta property="og:image" content="${ogImageUrl}">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
-    <meta property="og:url" content="${baseUrl}/lp?q=${userCount}">
-    <meta property="og:type" content="website">
-
-    <!-- Twitter/Bluesky specific -->
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@RyoKawamata">
-    <meta name="twitter:title" content="Sky Follower Bridge">
-    <meta name="twitter:description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
-    <meta name="twitter:image" content="${ogImageUrl}">
-
-    ${!isCrawler ? `<script>
-      window.location.href = 'https://www.sky-follower-bridge.dev';
-    </script>` : ''}
-  </head>
-  <body>
-    ${!isCrawler ? `
-    <noscript>
-      <meta http-equiv="refresh" content="0; url=https://www.sky-follower-bridge.dev">
-    </noscript>
-    ` : ''}
-    <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif;">
-      <div style="text-align: center;">
-        <h1>Sky Follower Bridge</h1>
-        <p>Detected Users: ${userCount}</p>
-        ${!isCrawler ? '<p>Redirecting to Sky Follower Bridge...</p>' : ''}
-      </div>
-    </div>
-  </body>
-</html>`
-
-  return new Response(html, {
-    headers: {
-      'Content-Type': 'text/html; charset=utf-8',
-      'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate',
-    },
-  })
-}
 
 app.get('/', (c) => {
-  return generateLandingPage(c)
+  return generateLandingHtml(c)
 })
 
 app.get('/og', async (c) => {
   const userCount = c.req.query('q') || '0'
 
   const html = `
     <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; width: 100vw; font-family: 'Noto Sans JP'; background: #160f29">
-      <img src="https://i.gyazo.com/81ad0bb212220eaf14afe3c73066e7d7.png" width="100" height="100" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover;">
-      <div style="display: flex; flex-direction: column; aligin-items: start; color: #ffffff; padding-top: 240px; padding-left: 80px; padding-bottom: 80px; height: 100vh; width: 100vw; gap: 20px; text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);">
-         <p style="font-size: 220px; disply: flex; aligin-items: baseline; gap: 20px;">${Number(userCount).toLocaleString()}</p>
-         <p style="font-size: 60px;">Bluesky users in my network.</p>
+      <img src="${backgroundImage}" width="100" height="100" style="position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover;">
+      <div style="display: flex; flex-direction: column; aligin-items: start; color: #ffffff; padding-top: 220px; padding-left: 65px; padding-bottom: 80px; height: 100vh; width: 100vw; gap: 20px; text-shadow: 5px 5px 6px rgba(0, 0, 0, 0.8);">
+         <p style="font-size: 240px; disply: flex; aligin-items: baseline; gap: 20px;">${Number(userCount).toLocaleString()}</p>
+         <p style="font-size: 60px;">Bluesky<span style="margin-left:20px;" />users<span style="margin-left:20px;" />found<span style="margin-left:20px;" />in<span style="margin-left:20px;" />my<span style="margin-left:20px;" />network.</p>
       </div>
     </div>
    `;
@@ -97,7 +29,7 @@ app.get('/og', async (c) => {
 })
 
 app.get('/lp', (c) => {
-  return generateLandingPage(c)
+  return generateLandingHtml(c)
 })
 
 export default app
diff --git a/lp/src/lib/backgroundImage.ts b/lp/src/lib/backgroundImage.ts
diff --git a/lp/src/lib/font.ts b/lp/src/lib/font.ts
diff --git a/lp/src/lib/generateLandingHtml.ts b/lp/src/lib/generateLandingHtml.ts
@@ -0,0 +1,70 @@
+import type { Context } from 'hono'
+
+export const generateLandingHtml = (c: Context) => {
+  const userCount = c.req.query('q') || '0'
+  const host = c.req.header('host') || ''
+  const protocol = host.includes('localhost') ? 'http' : 'https'
+  const baseUrl = `${protocol}://${host}`
+  const ogImageUrl = `${baseUrl}/og?q=${userCount}`
+
+  // クローラーの判定
+  const userAgent = c.req.header('user-agent')?.toLowerCase() || ''
+  const isCrawler = userAgent.includes('twitterbot') ||
+    userAgent.includes('bsky') ||
+    userAgent.includes('bot') ||
+    userAgent.includes('crawler') ||
+    userAgent.includes('facebook') ||
+    userAgent.includes('linkedin')
+
+  const html = `<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sky Follower Bridge - Detected Users: ${userCount}</title>
+    <meta name="description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
+
+    <!-- Essential OG Meta Tags -->
+    <meta property="og:title" content="Sky Follower Bridge">
+    <meta property="og:site_name" content="Sky Follower Bridge">
+    <meta property="og:description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
+    <meta property="og:image" content="${ogImageUrl}">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:url" content="${baseUrl}/lp?q=${userCount}">
+    <meta property="og:type" content="website">
+
+    <!-- Twitter/Bluesky specific -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:site" content="@RyoKawamata">
+    <meta name="twitter:title" content="Sky Follower Bridge">
+    <meta name="twitter:description" content="Bridge your Twitter/X followers to Bluesky. Detected Users: ${userCount}">
+    <meta name="twitter:image" content="${ogImageUrl}">
+
+    ${!isCrawler ? `<script>
+      window.location.href = 'https://www.sky-follower-bridge.dev';
+    </script>` : ''}
+  </head>
+  <body>
+    ${!isCrawler ? `
+    <noscript>
+      <meta http-equiv="refresh" content="0; url=https://www.sky-follower-bridge.dev">
+    </noscript>
+    ` : ''}
+    <div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif;">
+      <div style="text-align: center;">
+        <h1>Sky Follower Bridge</h1>
+        <p>Detected Users: ${userCount}</p>
+        ${!isCrawler ? '<p>Redirecting to Sky Follower Bridge...</p>' : ''}
+      </div>
+    </div>
+  </body>
+</html>`
+
+  return new Response(html, {
+    headers: {
+      'Content-Type': 'text/html; charset=utf-8',
+      'Cache-Control': 'max-age=0, no-cache, no-store, must-revalidate',
+    },
+  })
+}
diff --git a/src/style.css b/src/style.css
@@ -6,33 +6,49 @@
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.gradient-effect  {
+.gradient-effect {
   transition: opacity 0.2s ease-in-out;
   transition: 1s box-shadow;
   position: relative;
   z-index: 0;
 }
 
 .gradient-effect:before {
-    content: '';
-    background: linear-gradient(45deg, #0000ff, #0040ff, #0080ff, #00bfff, #00ffff, #00bfff, #0080ff, #0040ff, #0000ff);
-    position: absolute;
-    top: -2px;
-    left:-2px;
-    background-size: 400%;
-    z-index: -1;
-    filter: blur(5px);
-    width: calc(100% + 4px);
-    height: calc(100% + 4px);
-    animation: glowing 20s linear infinite;
-    opacity: 1;
-    transition: opacity .3s ease-in-out;
-    border-radius: 10px;
+  content: "";
+  background: linear-gradient(
+    45deg,
+    #0000ff,
+    #0040ff,
+    #0080ff,
+    #00bfff,
+    #00ffff,
+    #00bfff,
+    #0080ff,
+    #0040ff,
+    #0000ff
+  );
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  background-size: 400%;
+  z-index: -1;
+  filter: blur(5px);
+  width: calc(100% + 4px);
+  height: calc(100% + 4px);
+  animation: glowing 20s linear infinite;
+  opacity: 1;
+  transition: opacity .3s ease-in-out;
+  border-radius: 10px;
 }
 
-
 @keyframes glowing {
-    0% { background-position: 0 0; }
-    50% { background-position: 400% 0; }
-    100% { background-position: 0 0; }
+  0% {
+    background-position: 0 0;
+  }
+  50% {
+    background-position: 400% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
 }