Merge pull request #396 from basementstudio/canary

Website polish & content

Author: valebearzotti

apps/website/.gitignore

@@ -41,4 +41,7 @@ yarn-error.log*
 next-env.d.ts
 .env*.local
 xmcp-adapter
-/.source/
+/.source/
+# xmcp
+.xmcp
+xmcp-env.d.ts

apps/website/app/api/og/[...path]/route.tsx

@@ -269,7 +269,7 @@ export async function GET(
         <div
           style={{
             position: "absolute",
-            bottom: "64px",
+            bottom: "108px",
             left: "64px",
             right: "64px",
             display: "flex",

apps/website/app/blog/[...slug]/page.tsx

@@ -1,25 +1,48 @@
-import { blogSource } from "../../../lib/source";
+import { blogSource } from "@/lib/source";
 import { DocsBody, DocsTitle } from "@/components/layout/page";
 import { notFound } from "next/navigation";
 import { getMDXComponents } from "@/components/mdx-components";
 import type { Metadata } from "next";
 import { createRelativeLink } from "fumadocs-ui/mdx";
 import { CodeBlock } from "@/components/codeblock";
 import { BlogPage } from "@/components/layout/blog";
-import { getBlogMetadata } from "@/utils/blog";
+import { getBlogMetadata, resolveAuthors } from "@/utils/blog";
+import { PostAuthors } from "@/components/blog/post-authors";
 import { getBaseUrl } from "@/lib/base-url";
 
 export default async function Page(props: PageProps<"/blog/[...slug]">) {
   const params = await props.params;
   const page = blogSource.getPage(params.slug);
   if (!page) notFound();
 
+  const slug = Array.isArray(params.slug) ? params.slug.join("/") : params.slug;
   const MDX = page.data.body;
+  const authors = resolveAuthors(page.data.authors);
 
   return (
-    <BlogPage toc={page.data.toc}>
-      <DocsTitle>{page.data.title}</DocsTitle>
-      <DocsBody className="w-full">
+    <BlogPage toc={page.data.toc} slug={slug}>
+      <div className="flex flex-col gap-4">
+        {page.data.date && (
+          <time
+            dateTime={page.data.date}
+            className="text-xs uppercase tracking-wide text-brand-neutral-50"
+          >
+            {new Date(page.data.date).toLocaleDateString("en-US", {
+              month: "short",
+              day: "numeric",
+              year: "numeric",
+            })}
+          </time>
+        )}
+        <DocsTitle>{page.data.title}</DocsTitle>
+        {page.data.description && (
+          <p className="text-base text-brand-neutral-50 max-w-3xl pb-1">
+            {page.data.description}
+          </p>
+        )}
+        <PostAuthors authors={authors} />
+      </div>
+      <DocsBody className="w-full border-t border-white/20 pt-4">
         <MDX
           components={getMDXComponents({
             // this allows you to link to other pages with relative file paths

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

@@ -20,13 +20,15 @@ export default async function Page(props: PageProps<"/docs/[[...slug]]">) {
   if (!page) notFound();
 
   const MDX = page.data.body;
+  const displayTitle =
+    (page.data as { displayTitle?: string })?.displayTitle || page.data.title;
 
   return (
     <DocsPage
       toc={page.data.toc}
       pageActions={<PageActions markdownUrl={`${page.url}.mdx`} />}
     >
-      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsTitle>{displayTitle}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody className="border-t border-white/20 pt-4">
         <MDX

apps/website/app/mcp/route.ts

@@ -0,0 +1,3 @@
+import { xmcpHandler } from '@xmcp/adapter';
+
+export { xmcpHandler as GET, xmcpHandler as POST };

apps/website/components/blog/copy-url.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useCopyButton } from "fumadocs-ui/utils/use-copy-button";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+
+interface CopyUrlButtonProps {
+  url: string;
+  className?: string;
+}
+
+export function CopyUrlButton({ url, className }: CopyUrlButtonProps) {
+  const [isCopying, setIsCopying] = useState(false);
+  const [copied, triggerCopy] = useCopyButton(async () => {
+    setIsCopying(true);
+    try {
+      await navigator.clipboard.writeText(url);
+    } finally {
+      setIsCopying(false);
+    }
+  });
+
+  return (
+    <button
+      type="button"
+      onClick={triggerCopy}
+      disabled={isCopying}
+      className={cn(
+        "relative inline-flex items-center text-sm font-medium text-brand-neutral-100 disabled:opacity-60 cursor-pointer",
+        "min-w-[76px] justify-start",
+        className
+      )}
+      aria-live="polite"
+    >
+      <span
+        className={cn(
+          "block transition-all duration-300 ease-out",
+          copied ? "opacity-0 -translate-y-1" : "opacity-100 translate-y-0"
+        )}
+        aria-hidden={copied}
+      >
+        Copy URL
+      </span>
+      <span
+        className={cn(
+          "absolute left-0 block transition-all duration-300 ease-out pointer-events-none",
+          copied ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1"
+        )}
+        aria-hidden={!copied}
+      >
+        Copied
+      </span>
+    </button>
+  );
+}

apps/website/components/blog/hero.tsx

@@ -13,19 +13,18 @@ export function BlogHero({ featuredPost }: BlogHeroProps) {
   return (
     <Link href={`/blog/${featuredPost.slug}`} className="block col-span-12">
       <section className="relative group overflow-visible mb-2">
-        <div className="relative border border-brand-neutral-500 group-hover:border-brand-neutral-300 w-full flex flex-col md:flex-row">
-          <div className="w-full md:w-1/2 md:border-r border-brand-neutral-500 overflow-hidden mb-4 md:mb-0 group-hover:border-brand-neutral-300">
+        <div className="relative border border-brand-neutral-500 group-hover:border-brand-neutral-300 transition-colors duration-200 w-full flex flex-col md:flex-row">
+          <div className="w-full md:w-1/2 md:border-r border-brand-neutral-500 overflow-hidden mb-4 md:mb-0 group-hover:border-brand-neutral-300 transition-colors duration-200 relative aspect-video">
             {image ? (
               <Image
                 src={image}
                 alt={featuredPost.title}
-                width={0}
-                height={0}
+                fill
                 sizes="(max-width: 768px) 100vw, 50vw"
-                className="w-full h-auto"
+                className="object-cover"
               />
             ) : (
-              <div className="w-full aspect-video flex items-center justify-center text-brand-neutral-200 text-sm">
+              <div className="w-full h-full flex items-center justify-center text-brand-neutral-200 text-sm">
                 No preview image
               </div>
             )}

apps/website/components/blog/post-authors.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import { type BlogAuthor } from "@/utils/blog";
+import Link from "next/link";
+import { Icons } from "../icons";
+
+interface PostAuthorsProps {
+  authors: BlogAuthor[];
+}
+
+export function PostAuthors({ authors }: PostAuthorsProps) {
+  if (authors.length === 0) return null;
+
+  return (
+    <div className="flex flex-wrap items-center gap-4 text-sm text-brand-neutral-100">
+      {authors.map((author) => (
+        <Link
+          key={author.id}
+          href={author.xUrl}
+          target="_blank"
+          rel="noreferrer"
+          className="group flex items-center gap-3 hover:text-brand-white transition-colors"
+        >
+          <Image
+            src={author.profilePicture}
+            alt={`${author.name} avatar`}
+            width={40}
+            height={40}
+            className="h-10 w-10 rounded-full border border-brand-neutral-500 bg-brand-neutral-800 object-cover"
+            loading="lazy"
+          />
+          <div className="flex flex-col leading-5">
+            <span className="text-brand-white font-medium">{author.name}</span>
+            <span className="relative inline-flex h-5 items-center text-brand-neutral-200">
+              <span className="transition-all duration-300 ease-out opacity-100 translate-y-0 group-hover:opacity-0 group-hover:-translate-y-1">
+                {author.role ?? "Author"}
+              </span>
+              <span className="absolute left-0 transition-all duration-300 ease-out opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 inline-flex items-center gap-1">
+                <Icons.x className="size-2.5 text-brand-neutral-200" />
+                <span className="text-brand-neutral-200">{author.xHandle}</span>
+              </span>
+            </span>
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}

apps/website/components/home/blog/index.tsx

@@ -44,7 +44,10 @@ export const BlogCard = ({ post }: { post: BlogPost }) => {
     post.textureImage ||
     TEXTURE_IMAGES[
       Math.abs(
-        Array.from(post.slug).reduce((hash, char) => hash + char.charCodeAt(0), 0)
+        Array.from(post.slug).reduce(
+          (hash, char) => hash + char.charCodeAt(0),
+          0
+        )
       ) % TEXTURE_IMAGES.length
     ];