🇺🇸

Styling the Blog Homepage - Modern Next.js Blog Series #12

Published on

This is the twelfth article in the "Modern Blog 30 Days" series. In the previous article, we beautified the navbar, footer, and other global styles using Tailwind CSS. This article will continue to beautify the homepage style!

Screenshot results are as follows:

Home page

Home page in dark mode

The code changes for this article are as follows:

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day11-basic-site-ui...day12-basic-index-page-ui

​
Homepage Style

The styles here are mainly modified based on the timlrx/tailwind-nextjs-starter-blog project.

Add /src/lib/formatDate.ts:

const formatDate = (date: string, locale = "zh-TW") => {
  const now = new Date(date).toLocaleDateString(locale, {
    year: "numeric",
    month: "long",
    day: "numeric",
  });

  return now;
};

export default formatDate;

Add /src/components/PostList.tsx:

import { useRouter } from "next/router";

import CustomLink from "@/components/CustomLink";
import formatDate from "@/lib/formatDate";

export interface PostForPostList {
  slug: string;
  date: string;
  title: string;
  description: string;
  path: string;
}

type Props = {
  posts: PostForPostList[];
};

export default function PostList({ posts = [] }: Props) {
  const { locale } = useRouter();

  return (
    <ul className="divide-y divide-gray-200 transition-colors dark:divide-gray-700">
      {!posts.length && "No posts found."}
      {posts.map((post) => {
        const { slug, date, title, description, path } = post;
        return (
          <li key={slug} className="group transition-colors">
            <CustomLink href={path}>
              <article className="space-y-2 rounded-xl p-4 transition-colors group-hover:bg-gray-100 dark:group-hover:bg-gray-800 xl:grid xl:grid-cols-4  xl:items-baseline xl:space-y-0">
                <dl>
                  <dt className="sr-only">Published on</dt>
                  <dd className="text-sm font-medium leading-6 text-gray-500 transition-colors dark:text-gray-400 md:text-base">
                    <time dateTime={date}>{formatDate(date, locale)}</time>
                  </dd>
                </dl>
                <div className="space-y-3 xl:col-span-3">
                  <div>
                    <h3 className="text-lg font-bold tracking-tight text-gray-900 transition-colors dark:text-gray-100 sm:text-xl md:text-2xl">
                      {title}
                    </h3>
                  </div>
                  <div className="prose prose-sm md:prose-base max-w-none text-gray-500 transition-colors dark:text-gray-400">
                    {description}
                  </div>
                </div>
              </article>
            </CustomLink>
          </li>
        );
      })}
    </ul>
  );
}

Modify /src/pages/index.tsx:

import type { NextPage } from "next";
import { GetStaticProps } from "next";
import Head from "next/head";

import PostList, { PostForPostList } from "@/components/PostList";
import { allPostsNewToOld } from "@/lib/contentLayerAdapter";

type PostForIndexPage = PostForPostList;

type Props = {
  posts: PostForIndexPage[];
};

export const getStaticProps: GetStaticProps<Props> = () => {
  const posts = allPostsNewToOld.map((post) => ({
    slug: post.slug,
    date: post.date,
    title: post.title,
    description: post.description,
    path: post.path,
  })) as PostForIndexPage[];
  return { props: { posts } };
};

const Home: NextPage<Props> = ({ posts }) => {
  return (
    <div>
      <Head>
        <title>Next.js Tailwind Contentlayer Blog Starter</title>
        <meta name="description" content="Welcome to my blog" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <div className="prose dark:prose-dark md:prose-lg my-12 space-y-2 transition-colors md:space-y-5">
        <h1 className="text-center sm:text-left">Hey, I am Iron Man ?</h1>
        <p>I am Tony Stark, not Stank!</p>
        <p>I 'm very rich, and I've saved the world many times.</p>
        <p>I hate aliens, the color purple, and purple aliens.</p>
      </div>

      <div className="my-4 divide-y divide-gray-200 transition-colors dark:divide-gray-700">
        <div className="prose prose-lg dark:prose-dark my-8">
          <h2>Latest Articles</h2>
        </div>

        <PostList posts={posts} />
      </div>
    </div>
  );
};

export default Home;

​
Results

Done! Use pnpm dev and visit the homepage to see the beautified homepage style!

Screenshot results are as follows:

Home page

Home page in dark mode

The code changes for this article are as follows:

https://github.com/Kamigami55/nextjs-tailwind-contentlayer-blog-starter/compare/day11-basic-site-ui...day12-basic-index-page-ui

​
References

​
Next Article

Congratulations! We've successfully used Tailwind CSS to style the homepage in Next.js!

In the next article, we will continue to style the article detail page!