Blog & UI

mdx-components.tsx

@@ -33,8 +33,8 @@ const BlogWrapper: React.FC<Props> = ({ children }) => {
               "prose prose-neutral prose-invert prose-lg",
               "prose-ul:opacity-80 prose-ol:opacity-80",
               "prose-pre:py-0 prose-pre:px-3 prose-code:text-sm prose-pre:bg-[#121212]",
-              "prose-headings:font-semibold prose-headings:tracking-tight prose-headings:opacity-85",
-              "prose-h1:font-bold prose-h1:tracking-tighter"
+              "prose-headings:font-bold prose-headings:tracking-tight prose-headings:opacity-85",
+              "prose-h1:font-extrabold prose-h1:tracking-tighter"
             )}
           >
             {children}

package.json

@@ -12,11 +12,11 @@
     "db-create": "npx prisma db push --schema=./prisma/schema.prisma"
   },
   "dependencies": {
-    "@clerk/nextjs": "^6.12.0",
+    "@clerk/nextjs": "^6.12.1",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@neondatabase/serverless": "^0.10.4",
-    "@next/mdx": "^15.1.7",
+    "@next/mdx": "^15.2.0",
     "@prisma/client": "^5.22.0",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
@@ -28,14 +28,14 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/speed-insights": "^1.2.0",
     "algoliasearch": "4.24",
-    "axios": "^1.7.9",
+    "axios": "^1.8.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
     "mermaid": "^11.4.1",
     "motion": "^12.4.7",
     "nanoid": "^5.1.2",
-    "next": "^15.1.7",
+    "next": "^15.2.0",
     "next-view-transitions": "^0.3.4",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -47,21 +47,21 @@
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.13.8",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-next": "^15.1.7",
-    "eslint-config-prettier": "^10.0.1",
+    "eslint-config-next": "^15.2.0",
+    "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-tailwindcss": "^3.18.0",
     "postcss": "^8.5.3",
     "prettier": "^3.5.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "shiki": "^3.0.0",
+    "shiki": "^3.1.0",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.7.3"
+    "typescript": "^5.8.2"
   }
 }

src/app/blog/enhancing-web-experiences-with-the-view-transitions-api/page.mdx

@@ -21,31 +21,31 @@ export const metadata = getMetadata({
   publishedAt={"2025-02-24T00:00:00Z"}
 />
 
-## **Introduction**
+## Introduction
 
 In modern web development, users expect interfaces to feel smooth and polished, with transitions that enhance the overall experience. However, achieving seamless animations often requires writing complex CSS, managing JavaScript-based transitions, and handling performance issues, which can be both time-consuming and challenging.
 
 The **View Transitions API** simplifies this process by providing a native browser-based solution for smooth animations during DOM updates. Instead of relying on external libraries or custom animations, this API offers a declarative approach to handling transitions, ensuring better performance and maintainability.
 
-So let’s explore what it is, and how to use it, I also include how to effortlessly implement it in your Next.js Apps.
+So let's explore what it is, and how to use it, I also include how to effortlessly implement it in your Next.js Apps.
 
 <img src={ViewTransitionGif.src} alt="View Transition Example" />
 
 ---
 
-## **What is the View Transitions API?**
+## What is the View Transitions API?
 
 The View Transitions API is a built-in animation engine for your UI updates. Whether you're swapping out content, handling page transitions, or animating a modal, it makes things look fluid **automatically**.
 
-Here’s why it’s different from what you’ve been doing so far:
+Here's why it's different from what you've been doing so far:
 
 - **No manual keyframes** – The browser does the heavy lifting for you.
 - **Native optimization** – Unlike janky JS-based animations, this runs **smoothly** at the browser level.
 - **Simpler syntax** – A single function (`document.startViewTransition()`) wraps your updates and makes them transition seamlessly.
 
 ---
 
-## **Key Features of the View Transitions API**
+## Key Features of the View Transitions API
 
 - **Built-in Animations:** Handles DOM updates and navigation transitions out of the box.
 - **Zero external dependencies:** No need for GSAP, Framer Motion, or custom CSS/JS hacks.
@@ -55,7 +55,7 @@ Here’s why it’s different from what you’ve been doing so far:
 
 ---
 
-### **Where Should You Use It?**
+### Where Should You Use It?
 
 - **SPA Route Changes** – Instead of abrupt page swaps, you get fluid transitions that enhance user experience. Navigating between pages no longer feels jarring but instead flows naturally, making single-page applications feel more polished.
 - **Dynamic Content Updates** – Elements like lists, modals, popovers, and image previews benefit greatly from smooth animations. Instead of content snapping into place, the transitions ensure a visual connection between old and new states.
@@ -64,9 +64,9 @@ Here’s why it’s different from what you’ve been doing so far:
 
 ---
 
-## **How to Use the View Transitions API**
+## How to Use the View Transitions API
 
-### **1. The Basics – One Function to Rule Them All**
+### 1. The Basics – One Function to Rule Them All
 
 The core method is `document.startViewTransition()`. It takes a function that updates the DOM and wraps it in an animation.
 
@@ -80,7 +80,7 @@ if (document.startViewTransition) {
 }
 ```
 
-### **2. Customizing Transitions with CSS**
+### 2. Customizing Transitions with CSS
 
 Wanna tweak the animations? The API exposes pseudo-elements for the old and new states. You can style them like this:
 
@@ -112,7 +112,7 @@ Wanna tweak the animations? The API exposes pseudo-elements for the old and new
 }
 ```
 
-### **3. Animating Page Navigation**
+### 3. Animating Page Navigation
 
 Need smooth page transitions? Wrap your navigation logic inside `startViewTransition()`.
 
@@ -139,7 +139,7 @@ links.forEach((link) => {
 
 ---
 
-## **Why Should You Bother with View Transitions API?**
+## Why Should You Bother with View Transitions API?
 
 - **Saves time** – Writing animations manually is tedious. This makes it effortless.
 - **Better performance** – Browser-optimized animations reduce jank and improve UX.
@@ -150,10 +150,10 @@ links.forEach((link) => {
 ---
 
 <iframe
-  height="300"
+  height="500"
   style={{ width: "100%", border: 0 }}
   title="View Transitions API"
-  src="https://codepen.io/nirnejak/embed/yyLBMWq?default-tab=html%2Cresult"
+  src="https://codepen.io/nirnejak/embed/yyLBMWq?default-tab=result"
   loading="lazy"
 >
   See the Pen{" "}
@@ -164,19 +164,19 @@ links.forEach((link) => {
 
 ---
 
-## **View Transitions API with Next.js**
+## View Transitions API with Next.js
 
-Fortunately there’s a npm package that integrates with Next.js directly and makes using View Transitions API very easy. Here’s the steps to getting it integrated into your existing Next.js App.
+Fortunately there's a npm package that integrates with Next.js directly and makes using View Transitions API very easy. Here's the steps to getting it integrated into your existing Next.js App.
 
-### **1. Installing the Dependency**
+### 1. Installing the Dependency
 
 For Next.js, install `next-view-transitions` through npm:
 
 ```bash
 npm install next-view-transitions
 ```
 
-### **2. Setting Up a Layout Wrapper**
+### 2. Setting Up a Layout Wrapper
 
 To use the package, you need to wrap your Entire Layout with a `<ViewTransitions>` provider that comes with the package.
 
@@ -190,7 +190,7 @@ export default function Layout({ children }) {
 }
 ```
 
-### **3. Replacing `next/link` with View Transitions**
+### 3. Replacing `next/link` with View Transitions
 
 Now to use the page transitions replace your `<Link>` from `next/link` with `<Link>` from `next-view-transitions`
 
@@ -202,13 +202,13 @@ const MyComponent = () => {
 }
 ```
 
-And that’s it, now as you navigate between the pages you should be able to see smooth transition. You can take look at there example [here](https://nirnejak.com/)
+And that's it, now as you navigate between the pages you should be able to see smooth transition. You can take look at there example [here](https://nirnejak.com/)
 
-### **Final Thoughts**
+### Final Thoughts
 
-The View Transitions API is still **new**, but it’s already showing massive potential. That makes it the perfect time to learn and get started with it. If you’re building modern web apps, it’s definitely worth experimenting with.
+The View Transitions API is still **new**, but it's already showing massive potential. That makes it the perfect time to learn and get started with it. If you're building modern web apps, it's definitely worth experimenting with.
 
-### **Resources**
+### Resources
 
 - [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API)
 - Example Sites

src/app/blog/page.tsx

@@ -5,10 +5,13 @@ import { getMetadata } from "@/lib/metadata"
 
 import { allBlogs } from "./data"
 
+import CoverImage from "./cover.png"
+
 export const metadata = getMetadata({
   path: "/blog",
   title: "Blog | DevTools Academy",
   description: "Learn about awesome developer tools with our blogs",
+  image: CoverImage.src,
 })
 
 export default async function BlogPage() {

src/app/contribute/page.tsx

@@ -6,11 +6,14 @@ import { FaGithub } from "react-icons/fa6"
 import { getMetadata } from "@/lib/metadata"
 import { Button } from "@/components/ui/button"
 
+import CoverImage from "./cover.png"
+
 export const metadata = getMetadata({
   path: "/contribute",
   title: "Contribute to Dev Tools Academy",
   description:
     "Learn how to contribute to Dev Tools Academy and help improve this open-source project",
+  image: CoverImage.src,
 })
 
 export default function ContributeRoute() {

src/app/sponsor/page.tsx

@@ -3,10 +3,13 @@ import * as React from "react"
 import { getMetadata } from "@/lib/metadata"
 import SponsorshipTiers from "@/components/SponsorshipTiers"
 
+import CoverImage from "./cover.png"
+
 export const metadata = getMetadata({
   path: "/sponsor",
   title: "Sponsor | DevTools Academy",
   description: "Support the development of DevTools Academy",
+  image: CoverImage.src,
 })
 
 export default function SponsorPage() {

src/app/tools/page.tsx

@@ -8,10 +8,13 @@ import ToolSkeleton from "@/components/tools/ToolSkeleton"
 import AlgoliaSearch from "@/components/tools/AlgoliaSearch"
 import LoadingCategories from "@/components/tools/LoadingCategories"
 
+import CoverImage from "./cover.png"
+
 export const metadata = getMetadata({
   path: "/tools",
   title: "Browse Tools | DevTools Academy",
   description: "Browser and compare tools, curated by DevTools Academy",
+  image: CoverImage.src,
 })
 
 interface SearchParams {

src/components/Hero.tsx

@@ -9,7 +9,7 @@ const Hero: React.FC = () => {
       <hr className="border-dashed border-neutral-100/15" />
 
       <div className="relative mx-auto grid max-w-7xl place-content-center py-36 md:py-48">
-        <div className="grid-background absolute inset-0 -z-10 size-full opacity-5" />
+        <div className="grid-background absolute inset-0 -z-10 opacity-5" />
         <div className="flex flex-col px-4 text-center text-neutral-200 md:px-0">
           <h1 className="mb-3 max-w-5xl text-3xl font-bold tracking-tight text-neutral-200 md:mb-8 md:text-6xl md:leading-[1.1]">
             <span className="bg-gradient-to-b from-neutral-700 to-neutral-200 bg-clip-text text-transparent">

src/components/blog/BlogChatInterface.tsx

@@ -68,7 +68,7 @@ const BlogChatInterface: React.FC<BlogChatInterfaceProps> = ({
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
-      className="fixed inset-0 z-50 flex size-full items-center justify-center overflow-y-auto bg-neutral-600/50 backdrop-blur-md"
+      className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-neutral-600/50 backdrop-blur-md"
     >
       <motion.div
         className="mx-auto w-full max-w-2xl overflow-hidden border border-dashed border-neutral-100/15 bg-neutral-900 shadow-xl"

src/components/blog/CommentSection.tsx

@@ -76,7 +76,9 @@ const CommentSection: React.FC = () => {
   return (
     <div className="">
       <div className="p-8">
-        <h2 className="mb-4 text-2xl font-bold">Developer Chatter Box 💬</h2>
+        <h2 className="mb-4 text-2xl font-bold tracking-tight">
+          Developer Chatter Box 💬
+        </h2>
         <p className="text-neutral-500">
           Join the discussion. Share your thoughts on dev tools, give feedback
           on the post 💪

src/components/blog/TableOfContents.tsx

@@ -52,7 +52,7 @@ const TableOfContents: React.FC = () => {
 
   return (
     <nav className="max-w-xs overflow-y-auto px-4 pb-8">
-      <h2 className="mb-4 text-lg font-semibold tracking-tight text-neutral-300">
+      <h2 className="mb-4 text-lg font-bold tracking-tight text-neutral-300">
         Contents
       </h2>
       <ul className="space-y-2 text-sm">