~M•29
Published on

Project 07 - Adding new PostGridSimple Layout

Table of Contents

Problems we need to solve:

Create a new allCaseStudies layout in @/components/layout/PostGridLayout.tsx using the PostSimple layout as a guide. Grid is based on Tailwind CSS Grid System and is added into tailwind.config.js to extend the theme.

Establishing requirements for our methodology:

Getting Started

1. See instructions at Create a blog layout at: https://shipixen.com/boilerplate-documentation/creating-a-layout#advanced-usage

Realized very quickly that we needed to create an actual layout component similar to LatestArticles. So this was a no-go.

2. Create a Grid template using the Tailwind Grid Generator

This was exactly the solution! After generating the grid, we create a new PostGridLayout component with just JSX then imported the code into the Case Studies page as a component.

Tailwind Grid Generator Image one
Tailwind-Generator-Code
<div className="grid grid-cols-3 grid-rows-3 gap-4">
    <div >1</div>
    <div className="col-start-1 row-start-2">2</div>
    <div className="col-start-1 row-start-3">3</div>
    <div className="col-start-2 row-start-3">4</div>
    <div className="col-start-2 row-start-2">5</div>
    <div className="col-start-2 row-start-1">6</div>
    <div className="col-start-3 row-start-1">7</div>
    <div className="col-start-3 row-start-2">8</div>
    <div >9</div>
</div>

Simple JSX Tailwind Grid hard-coded with Tailwind Theme Colors

Image one
JSX-Updated-Code
  /** Exploring possibilities **/

export default function PostGridLayout() {

  return (
    <>
      <h1 className="text-2xl font-semibold leading-tight md:leading-tight mb-8">My Working Grid Sample</h1>
      <div className="bg-slate-200 ... mb-12">
      <div className="relative rounded-xl overflow-auto p-8">
        <div
          className="grid grid-cols-3 gap-3 font-mono text-slate-700 text-sm text-center font-bold leading-6 bg-stripes-slate-300 rounded-lg ">
          <div className="p-4 rounded-lg shadow-lg bg-slate-100 ">1</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">2</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">3</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">4</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">5</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">6</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">7</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">8</div>
          <div className="p-4 rounded-lg shadow-lg bg-slate-100">9</div>
        </div>
      </div>
      </div>
    </>
  );

}
NOTE
Because we have not yet configured tailwind.config.js to handle our grid, classNames have been hard-coded in.

3. Adding the Layout Props and Mapped Arrays

We used several different component and page layout examples when we began building this new feature.

  • Card Component
  • ListLayoutWithTags
  • LatestArticles

While the UI is basically done, we need to add for theme switch colors and add TailwindCSS Grid System

JSX

// Imports
import Link from '@/components/shared/Link';
import { siteConfig } from '@/data/config/site.settings';
import NewsletterForm from '@shipixen/pliny/ui/NewsletterForm';
import { sortPosts, allCoreContent } from '@shipixen/pliny/utils/contentlayer';
import { allBlogs } from 'shipixen-contentlayer/generated';
import Image from 'next/image';
import Tag from '@/components/shared/Tag';

// Limit # of Posts
const MAX_DISPLAY = 6

// Component
export default function PostGridLayout({
                                         numberOfPosts = MAX_DISPLAY,
                                         showImage = true,
                                       }: {
  numberOfPosts?: number;
  showImage?: boolean;
}) {
  const sortedPosts = sortPosts(allBlogs);
  const posts = allCoreContent(sortedPosts);

  return (
    <>
      <div className="flex flex-col gap-2 mt-6">
        <div>
          <div className="relative rounded-xl overflow-auto p-8 ">
            <div className="flex flex-col gap-3 ">
              {!posts.length && 'No articles found.'}
              {posts.slice(0, MAX_DISPLAY).map((post) => {
                const { path, slug, date, title, summary, tags, images } = post;
                const imgSrc = images?.[0];

                // Begin return content:  To convert this replace layout with TailwindCSS Grid

                return (
                    <div  key={slug} className="md:bg-white max-w-[544px] p-2 md:w-1/2 dark:md:bg-black rounded-md overflow-hidden relative md:shadow-sm md:hover:shadow-xl dark:md:hover:bg-slate-800 transition-all">
                      <div
                        className={`${
                          imgSrc && 'h-full'
                        }  overflow-hidden rounded-md border-1 border-gray-200 border-opacity-60 dark:border-gray-700 bg-white`}
                      >
                        {imgSrc &&
                          (path ? (
                            <Link
                              href={`/${path}`}
                              aria-label={`Link to ${title}`}
                            >
                              <Image
                                alt={title}
                                src={imgSrc}
                                className="object-cover object-center md:h-36 lg:h-48"
                                width={544}
                                height={306}
                              />
                            </Link>
                          ) : (
                            <Image
                              alt={title}
                              src={imgSrc}
                              className="object-cover object-center md:h-36 lg:h-48"
                              width={544}
                              height={306}
                            />
                          ))}

                          <div className="p-6">
                            <h2 className="mb-3 text-2xl font-bold leading-8 tracking-tight">
                              {path ? (
                                <Link href={path}
                                      aria-label={`Link to ${title}`}

                                >
                                  {title}
                                </Link>
                              ) : (
                                title
                              )}
                            </h2>
                            <div className="flex flex-wrap relative mb-1">
                              {tags?.map((tag) => <Tag key={tag} text={tag} />)}
                            </div>
                            <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">
                              {summary}
                            </p>

                            {path && (
                              <Link
                                href={`/${path}`}
                                className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
                                aria-label={`Link to ${title}`}
                              >
                                Learn more &rarr;
                              </Link>
                            )}
                          </div>


                      </div>
                    </div>
                );

              // End return content:
             })}   // End Array
            </div>
          </div>
        </div>
      </div>

      {posts.length > MAX_DISPLAY && (
        <div className="mt-12 flex text-base font-medium leading-6">
          <Link
            href={siteConfig.allArticlesPath}
            className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
            aria-label="See all articles"
          >
            See all projects &rarr;
          </Link>
        </div>
      )}

      {siteConfig.newsletter?.provider && (
        <div className="flex items-center justify-center pt-4">
          <NewsletterForm />
        </div>
      )}

    </>
  );
}

Grid Layout First Pass

Image one

REF(s):

Internal Pages

Project 08 - Making the Grid Preview Component Project 04 - Thinking About Case Studies

External Site Reference & Functional Concepts

TailwindCSS : Grid Template Columns | https://tailwindcss.com/docs/grid-template-columns

TailwindCSS: Background Colors | https://tailwindcss.com/docs/background-colors