feat: update og image tags

niraj-khatiwada · niraj-khatiwada · commit e1d578fff4aa · 2025-06-20T20:45:32.000+05:45
diff --git a/package.json b/package.json
@@ -15,7 +15,6 @@
     "@resvg/resvg-js": "^2.6.2",
     "@tailwindcss/vite": "^4.1.8",
     "astro": "^5.9.1",
-    "astro-opengraph-images": "^1.13.1",
     "astro-seo": "^0.8.4",
     "sharp": "^0.34.2",
     "tailwindcss": "^4.1.8"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/assets/og.png b/src/assets/og.png
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
@@ -1,7 +1,5 @@
 ---
 import type { ImageMetadata } from "astro";
-// import { SEO } from "astro-seo";
-// import { getImagePath } from "astro-opengraph-images";
 
 import { SITE_TITLE } from "../consts";
 import FallbackImage from "../assets/blog-placeholder.jpg";
@@ -16,8 +14,7 @@ interface Props {
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image = FallbackImage } = Astro.props;
-const { url, site } = Astro;
-// const openGraphImageUrl = getImagePath({ url, site });
+const { url, site, generator } = Astro;
 ---
 
 <!-- Global Metadata -->
@@ -29,9 +26,9 @@ const { url, site } = Astro;
   rel="alternate"
   type="application/rssxml"
   title={SITE_TITLE}
-  href={new URL("rss.xml", Astro.site)}
+  href={new URL("rss.xml", site)}
 />
-<meta name="generator" content={Astro.generator} />
+<meta name="generator" content={generator} />
 
 <!-- Font preloads -->
 <link
@@ -58,29 +55,15 @@ const { url, site } = Astro;
 <meta name="description" content={description} />
 
 <!-- Open Graph / Facebook -->
-<!-- <meta property="og:type" content="website" />
-<meta property="og:url" content={Astro.url} />
+<meta property="og:type" content="website" />
+<meta property="og:url" content={url} />
 <meta property="og:title" content={title} />
 <meta property="og:description" content={description} />
-<meta property="og:image" content={new URL(image.src, Astro.url)} /> -->
+<meta property="og:image" content={new URL(image.src, url)} />
 
 <!-- Twitter -->
-<!-- <meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url} />
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={url} />
 <meta property="twitter:title" content={title} />
 <meta property="twitter:description" content={description} />
-<meta property="twitter:image" content={new URL(image.src, Astro.url)} /> -->
-
-<!-- <SEO
-  openGraph={{
-    basic: {
-      title: title,
-      type: "website",
-      image: openGraphImageUrl,
-      url: url,
-    },
-    optional: {
-      description: description,
-    },
-  }}
-/> -->
+<meta property="twitter:image" content={new URL(image.src, url)} />
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -62,4 +62,9 @@ import SocialLinks from "./SocialLinks.astro";
       padding: 0 1em;
     }
   }
+  @media screen and (min-width: 720px) and (max-width: 1000px) {
+    nav {
+      padding: 2rem;
+    }
+  }
 </style>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -14,10 +14,10 @@ const { title, description, publishedDate, updatedDate, heroImage } =
 
 <html lang="en">
   <head>
-    <BaseHead title={title} description={description} />
+    <BaseHead title={title} description={description} image={heroImage} />
     <style>
       main {
-        width: calc(100% - 2em);
+        width: calc(100% - 0rem);
         max-width: 960px;
         margin: 0 auto;
       }
@@ -32,9 +32,8 @@ const { title, description, publishedDate, updatedDate, heroImage } =
       }
       .prose {
         width: 720px;
-        max-width: calc(100% - 2em);
+        max-width: calc(100% - 0em);
         margin: auto;
-        padding: 1em;
         color: rgb(var(--gray-dark));
       }
       .title {
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -11,6 +11,7 @@ import type { Project } from "../types/project";
 import CompressOImage from "../assets/compresso.png";
 import UltimateNestjsBoilerplateImage from "../assets/ultimate-nestjs-boilerplate.png";
 import ProjectCard from "../components/ProjectCard.astro";
+import OGImage from "../assets/og.png";
 
 const recentBlogPosts = (await getCollection("blogs"))
   .sort(
@@ -54,7 +55,11 @@ const openSourceProjects: Project[] = [
 <!doctype html>
 <html lang="en">
   <head>
-    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
+    <BaseHead
+      title={SITE_TITLE}
+      description={SITE_DESCRIPTION}
+      image={OGImage}
+    />
   </head>
   <body>
     <Header />
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -42,7 +42,7 @@ main {
   width: 960px;
   max-width: calc(100% - 0em);
   margin: auto;
-  padding: 3em 1em;
+  padding: 2rem 0.5rem;
 }
 h1,
 h2,
@@ -125,10 +125,17 @@ hr {
   body {
     font-size: 18px;
   }
+}
+@media (max-width: 720px) {
   main {
     padding: 1em;
   }
 }
+@media screen and (min-width: 720px) and (max-width: 1000px) {
+  main {
+    padding: 2rem;
+  }
+}
 
 .sr-only {
   border: 0;

Original file line number	Diff line number	Diff line change
`@@ -62,4 +62,9 @@ import SocialLinks from "./SocialLinks.astro";`
`62`	`62`	`padding: 0 1em;`
`63`	`63`	`}`
`64`	`64`	`}`
	`65`	`+ @media screen and (min-width: 720px) and (max-width: 1000px) {`
	`66`	`+ nav {`
	`67`	`+ padding: 2rem;`
	`68`	`+ }`
	`69`	`+ }`
`65`	`70`	`</style>`