basic styling redesign

Author: cvan

src/app/(home)/_components/pagination.tsx

@@ -18,7 +18,7 @@ const Card = ({
 }) => {
   if (disable) {
     return (
-      <div className="rounded-full border bg-card p-2 text-muted-foreground">
+      <div className="rounded-full border bg-card p-2 text-muted-foreground opacity-30">
         {children}
       </div>
     );
@@ -42,29 +42,21 @@ export const Pagination = ({
   path: string;
 }) => {
   return (
-    <div className="flex justify-center gap-2">
+    <div className="flex justify-center gap-4">
       <Card num={1} disable={current === 1}>
-        <h2 className="text-xl font-medium">
-          <ChevronsLeft />
-        </h2>
+        <ChevronsLeft />
       </Card>
       <Card num={current - 1} disable={current === 1}>
-        <h2 className="text-xl font-medium">
-          <ChevronLeft />
-        </h2>
+        <ChevronLeft />
       </Card>
-      <div className="my-auto text-xl mx-2">
-        {current} / {end}
+      <div className="my-auto mx-4 font-normal text-md text-fd-muted-foreground">
+        Page {current} of {end}
       </div>
       <Card num={current + 1} disable={current === end}>
-        <h2 className="text-xl font-medium">
-          <ChevronRight />
-        </h2>
+        <ChevronRight />
       </Card>
       <Card num={end} disable={current === end}>
-        <h2 className="text-xl font-medium">
-          <ChevronsRight />
-        </h2>
+        <ChevronsRight />
       </Card>
     </div>
   );

src/app/(home)/_components/post-card.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 import Image from "next/image";
-import { formatDistance } from "date-fns";
+import { cn } from "@/utils";
+import { AbsoluteDate } from "@/app/_components/date-time";
+import { Subtitle } from "@/app/_components/typography";
 
 export const PostCard = ({
   title,
@@ -20,25 +22,40 @@ export const PostCard = ({
   return (
     <Link
       href={url}
-      className="rounded-lg border bg-card p-4 text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground w-full"
+      className={cn(
+        "block w-full relative p-px bg-fd-background text-zinc-600 dark:text-zinc-300",
+        "border border-solid border-zinc-400 dark:border-zinc-500",
+        "hover:border-zinc-900 hover:dark:border-zinc-100",
+        "shadow-[1.5px_1.5px_theme('colors.zinc.300')] hover:shadow-[3px_3px_theme('colors.zinc.300')]",
+        "dark:shadow-[1.5px_1.5px_theme('colors.zinc.600')] dark:hover:shadow-[3px_3px_theme('colors.zinc.600')]",
+        "hover:-translate-x-px hover:-translate-y-px",
+        "active:translate-x-px active:translate-y-px active:opacity-70",
+        "transition-all duration-150 ease-out",
+        "overflow-clip grid md:grid-cols-4"
+      )}
     >
-      <div className="space-x-4 justify-between p-2">
-        <div className="flex flex-col space-y-4">
-          <h2 className="mt-2 text-xl font-medium">{title}</h2>
-          <p className="overflow-hidden overflow-ellipsis whitespace-nowrap text-medium text-muted-foreground text-wrap">
-            {description}
-          </p>
-          <h3 className="text-left font-medium pt-2">{`${formatDistance(new Date(), date)} ago`}</h3>
-        </div>
-        {/* <div className="hidden lg:block">
-          <Image
-            src={image}
-            alt={alt}
-            height={400}
-            width={400}
-            className="mx-auto"
-          ></Image>
-        </div> */}
+      <div
+        className={cn(
+          "md:col-span-2 place-items-center",
+          "border-solid border-r-fd-background border-r"
+        )}
+      >
+        <Image
+          draggable={false}
+          src={image}
+          alt={alt}
+          height={400}
+          width={400}
+          className="object-cover object-center md:object-fit w-full h-auto"
+        />
+      </div>
+      <div className={cn("md:col-span-2 space-y-3", "px-6 py-8 md:px-8 md:py-6")}>
+        <Subtitle style="!text-2xl !leading-[1.15]">{title}</Subtitle>
+        <p className="text-medium leading-tight line-clamp-4">{description}</p>
+        <AbsoluteDate
+          date={date}
+          className="block text-fd-muted-foreground font-medium"
+        />
       </div>
     </Link>
   );

src/app/(home)/layout.tsx

@@ -1,28 +1,43 @@
 import { HomeLayout as HL } from "fumadocs-ui/home-layout";
 import type { ReactNode } from "react";
 import FullLogo from "./_components/full-logo";
+import { Footer } from "../_components/footer";
 
 const HomeLayout = ({ children }: { children: ReactNode }) => {
   return (
     <HL
       nav={{
         title: (
-          <div className="invert-0 group-hover:invert py-2 rounded backdrop-blur px-2 group space-x-2 flex items-center">
-            <FullLogo height={28} />
+          <div className="py-4 text-fd-primary">
+            <FullLogo height={22} />
           </div>
         ),
-        url: "https://substrate.run/",
+        url:
+          process.env.VERCEL_ENV === "production" ||
+          process.env.VERCEL_ENV === "preview"
+            ? "https://www.substrate.run/"
+            : "/",
       }}
-      githubUrl="https://github.com/SubstrateLabs/blog"
+      // Previously, this added a prominent GitHub link to the header nav.
+      // It was confusing because that link points to the blog repo,
+      // an open-source repo for the Substrate codebase, as one may expect.
+      // The blog repo is less useful to link to, now that there are links
+      // to GitHub from the "Edit this page" links at the bottom of each
+      // blog post page.
+      // githubUrl="https://github.com/SubstrateLabs/blog"
       links={[
         { text: "Docs", url: "https://docs.substrate.run" },
         { text: "Nodes", url: "https://substrate.run/nodes" },
         { text: "Pricing", url: "https://substrate.run/pricing" },
         { text: "Company", url: "https://substrate.run/company" },
-        { text: "Blog", url: "https://substrate.run/blog" },
+        // Highlight the "Blog" nav link when the URL is `/blog` or a child route.
+        { text: "Blog", url: "/", active: "nested-url" },
       ]}
     >
       {children}
+      <div className="px-4 pt-10 md:px-6 md:pt-12">
+        <Footer />
+      </div>
     </HL>
   );
 };

src/app/(home)/page.tsx

@@ -1,4 +1,6 @@
 import { getPages } from "@/app/source";
+import { cn } from "@/utils";
+import { H1 } from "../_components/typography";
 import { PostCard } from "./_components/post-card";
 import { Pagination } from "./_components/pagination";
 import { notFound } from "next/navigation";
@@ -14,7 +16,10 @@ const HomePage = ({
   params: { slug: string };
   searchParams?: { [key: string]: string | string[] | undefined };
 }) => {
-  const pageIndex = searchParams && typeof searchParams["page"] == "string" ? Number.parseInt(searchParams["page"]) : 0;
+  const pageIndex =
+    searchParams && typeof searchParams["page"] == "string"
+      ? Number.parseInt(searchParams["page"])
+      : 0;
 
   if (pageIndex < 0 || pageIndex >= pageCount) notFound();
 
@@ -25,12 +30,21 @@ const HomePage = ({
     .slice(startIndex, endIndex);
 
   return (
-    <main>
-      <div className="mx-4 my-6 lg:mx-auto lg:w-[992px]">
-        <div className="my-6 text-3xl">
-          <p>Blog</p>
-        </div>
-        <div className="flex flex-col gap-4 text-left">
+    <main
+      className={cn(
+        "max-w-[60rem] mx-auto my-14",
+        "px-4 pt-10 md:px-6 md:pt-12"
+      )}
+    >
+      <H1>Substrate Blog</H1>
+      <div
+        className={cn(
+          "mt-12 mb-8 p-4 -mx-4 relative",
+          "transform-gpu" // Fixes a Safari rendering quirk with PostCard's :hover/:active transforms
+        )}
+      >
+        <div className="absolute inset-0 bg-[radial-gradient(theme('colors.zinc.400')_0.5px,transparent_0.5px)] dark:bg-[radial-gradient(theme('colors.zinc.600')_0.5px,transparent_0.5px)] bg-[length:3.75px_3.75px]" />
+        <div className="space-y-5">
           {posts.map((post) => {
             const date = new Date(post.data.date).toLocaleDateString();
             return (
@@ -46,10 +60,8 @@ const HomePage = ({
             );
           })}
         </div>
-        <div className="my-6">
-          <Pagination current={pageIndex + 1} end={pageCount} path="" />
-        </div>
       </div>
+      <Pagination current={pageIndex + 1} end={pageCount} path="" />
     </main>
   );
 };

src/app/_components/date-time.tsx

@@ -0,0 +1,53 @@
+import { formatDistance } from "date-fns";
+
+// Format the date in format of "Jul 1, 2024" -
+// using the default locale of the visitor (or system on the server).
+const formatDate = (date: string) =>
+  new Date(date).toLocaleDateString([], {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+
+// Format the date in format of "Jul 1, 2024 1:00 PM".
+const formatDateTime = (date: string) =>
+  new Date(date).toLocaleDateString([], {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    hour12: true,
+    minute: "numeric",
+  });
+
+export const RelativeDate = ({
+  date,
+  className,
+  ...props
+}: {
+  date: string;
+  className?: string;
+  props?: React.ComponentProps<"time">;
+}) => {
+  return (
+    <time {...props} title={formatDateTime(date)} className={className}>
+      {formatDistance(new Date(), date)} ago
+    </time>
+  );
+};
+
+export const AbsoluteDate = ({
+  date,
+  className,
+  ...props
+}: {
+  date: string;
+  className?: string;
+  props?: React.ComponentProps<"time">;
+}) => {
+  return (
+    <time {...props} title={formatDateTime(date)} className={className}>
+      {formatDate(date)}
+    </time>
+  );
+};

src/app/_components/edit-on-github.tsx

@@ -0,0 +1,47 @@
+import { type AnchorHTMLAttributes, forwardRef } from "react";
+import { Edit } from "lucide-react";
+import { cn } from "@/utils";
+
+// Adapted from fumadocs source:
+// https://github.com/fuma-nama/fumadocs/blob/main/packages/ui/src/components/layout/edit-on-github.tsx
+interface EditOnGitHubOptions
+  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "children"> {
+  owner: string;
+  repo: string;
+
+  /**
+   * SHA or ref (branch or tag) name.
+   *
+   * @defaultValue main
+   */
+  sha?: string;
+
+  /**
+   * File path in the repo
+   */
+  path: string;
+}
+
+export const EditOnGitHub = forwardRef<HTMLAnchorElement, EditOnGitHubOptions>(
+  ({ owner, repo, sha = "main", path, ...props }, ref) => {
+    return (
+      <a
+        ref={ref}
+        href={`https://github.com/${owner}/${repo}/blob/${sha}/${
+          path.startsWith("/") ? path.slice(1) : path
+        }`}
+        target="_blank"
+        rel="noreferrer noopener"
+        {...props}
+        className={cn(
+          "items-center inline-flex w-auto gap-2 rounded border bg-fd-background py-1.5 px-3 text-xs text-fd-muted-foreground transition-colors hover:bg-fd-muted/80 hover:text-fd-accent-foreground",
+          "transform-gpu no-underline",
+          props.className
+        )}
+      >
+        <Edit className="size-3.5" />
+        Edit on GitHub
+      </a>
+    );
+  }
+);