feat: add logo components and improve header with logo; update metadata for Open Graph

Author: pheralb

apps/website/src/app/docs/[folder]/[...slug]/page.tsx

@@ -3,15 +3,16 @@ import type { Metadata } from "next";
 import { globals } from "@/globals";
 import { notFound } from "next/navigation";
 
-import MDX from "@/components/mdx";
 import { cn } from "@/utils/cn";
 import { getDocument } from "@/utils/docs";
 
-import Article from "@/components/docs/doc-article";
+import MDX from "@/components/mdx";
 import Container from "@/components/container";
+import Article from "@/components/docs/doc-article";
+
+import DocOptions from "@/components/docs/doc-options";
 import TableOfContents from "@/components/docs/toc-menu";
 import ShowCategories from "@/components/docs/show-categories";
-import DocOptions from "@/components/docs/doc-options";
 
 interface DocsPageProps {
   params: Promise<{ folder: string; slug: string[] }>;
@@ -22,13 +23,29 @@ export async function generateMetadata({
 }: DocsPageProps): Promise<Metadata> {
   const { folder, slug } = await params;
   const document = slug.join("/");
+  const websiteUrl = "https://code-blocks.pheralb.dev";
   const data = getDocument({
     folder,
     document,
   });
   return {
     title: `${data?.title} - ${globals.title}`,
     description: data?.description,
+    openGraph: {
+      type: "website",
+      url: new URL(`/${slug}`, websiteUrl),
+      title: `${data?.title} - ${globals.title}`,
+      description: data?.description,
+      siteName: websiteUrl,
+      images: [
+        {
+          url: new URL(
+            `/api/docs/og?document=${document}&folder=${folder}`,
+            websiteUrl,
+          ),
+        },
+      ],
+    },
   };
 }
 

apps/website/src/app/page.tsx

@@ -18,7 +18,7 @@ const Home = () => {
     <>
     <Container>
       <Header layout="app" />
-      <Article className="pb-12">
+      <Article className="pb-14">
         <MDX code={document.mdx} />
       </Article>
     </Container>

apps/website/src/components/header.tsx

@@ -5,6 +5,7 @@ import GithubLink from "@/components/github-link";
 import SponsorLink from "@/components/sponsor-link";
 import ThemeToggle from "@/components/theme-toggle";
 import SearchDocs from "@/components/docs/search-docs";
+import { LogoWithoutBg } from "./logo";
 
 interface HeaderProps {
   layout: "docs" | "app";
@@ -26,11 +27,13 @@ const Header = ({ layout }: HeaderProps) => {
         <Link
           href="/"
           className={cn(
+            "flex items-center space-x-2.5",
             "text-xl font-semibold tracking-tight transition-colors",
             "hover:text-neutral-700 dark:hover:text-neutral-300",
           )}
         >
-          Code Blocks
+          <LogoWithoutBg width={20} height={20} className="shrink-0" />
+          <span>Code Blocks</span>
         </Link>
         <div className="flex items-center gap-4">
           <SearchDocs />

apps/website/src/components/hero.tsx

@@ -14,6 +14,7 @@ const Hero = () => {
       className={cn(
         "not-prose",
         "flex flex-col space-y-4 pt-10 pb-6 md:pt-12 md:pb-10",
+        "animate-in fill-mode-backwards fade-in slide-in-from-bottom-4 duration-500",
       )}
     >
       <div className="flex flex-col items-center justify-center space-y-2">
@@ -27,6 +28,7 @@ const Hero = () => {
       <div
         className={cn(
           "flex flex-col items-center justify-center space-y-2 md:flex-row md:space-y-0 md:space-x-2",
+          "animate-in fill-mode-backwards fade-in slide-in-from-bottom-4 duration-500 delay-100",
         )}
       >
         <Link

apps/website/src/components/logo.tsx

@@ -0,0 +1,59 @@
+import type { SVGProps } from "react";
+
+const LogoWithBg = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 512 512"
+      {...props}
+    >
+      <rect
+        width="512"
+        height="512"
+        x="0"
+        y="0"
+        fill="url(#logo-gradient)"
+        stroke="#FFF"
+        strokeOpacity="100%"
+        strokeWidth="0"
+        paintOrder="stroke"
+        rx="128"
+      />
+      <defs>
+        <radialGradient
+          id="logo-gradient"
+          cx="50%"
+          cy="50%"
+          r="100%"
+          fx="50%"
+          fy="0%"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop stopColor="#171717" />
+          <stop offset="1" />
+        </radialGradient>
+      </defs>
+      <g transform="translate(80, 80)">
+        <path
+          fill="#E6E6E6"
+          transform="scale(1.375)"
+          d="m96 73-61.94 55L96 183a12 12 0 1 1-16 18L8 137a12 12 0 0 1 0-18l72-64a12 12 0 0 1 16 18m152 46-72-64a12 12 0 1 0-16 18l61.91 55L160 183a12 12 0 1 0 16 18l72-64a12 12 0 0 0 0-18"
+        />
+      </g>
+    </svg>
+  );
+};
+
+const LogoWithoutBg = (props: SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" {...props}>
+      <path
+        fill="currentColor"
+        d="m96 73-61.94 55L96 183a12 12 0 1 1-16 18L8 137a12 12 0 0 1 0-18l72-64a12 12 0 0 1 16 18m152 46-72-64a12 12 0 1 0-16 18l61.91 55L160 183a12 12 0 1 0 16 18l72-64a12 12 0 0 0 0-18"
+      ></path>
+    </svg>
+  );
+};
+
+export { LogoWithBg, LogoWithoutBg };