~M•29
A New Post Grid Layout

A New Post Grid Layout

Table of Contents

Problems we need to solve:

Creating a new grid layout.

Building on Shipixen: Creating a blog layout, we want to create a new CSGridPreview to present a different look for Case Study Blogs. We want to simulate a Grid List of allCaseStudies.

Additionally, it would be nice to select a case study from the grid using hover class that would then redirect to the appropriate detailed CaseStudy page.

A wish list includes a method of associating Studies with Projects using a one-to-many layout view, which contains a Case Study with anlist of associated projects.

Establishing requirements for our methodology:

Review methods for configuring tailwind.config.js to:

  • Generate classes grid-cols-{n} classes starting from n 0 to x.
  • Set a maximum number of columns in the grid.
  • Consider adding gridColumnStart and gridColumnEnd

Task requirements

  • Project - 07: Create a new allCaseStudies layout in @/layouts/PostGridSimple using the PostSimple layout as a guide.
  • Project - 08: Create a new React component with the appropriate LayoutProps and TSX UI. See TypeScript and TSX: Electric UI
  • Project - 09: Register the layout in either `./app/[...slug]/page.tsx
  • Project - 10: Add the layout to the markdown files front-matter
  • Project - 11: Review @/layouts/ListLayoutWithTags.tsx to determine method of displaying multiple posts.

Code Examples:

Display a list of posts *.tsx

Expands on the Advanced Usage section (https://shipixen.com/boilerplate-documentation/creating-a-layout#advanced-usage)

const displayPosts =
  initialDisplayPosts.length > 0 ? initialDisplayPosts : posts;

if (displayPosts.length === 0) {
  return (
    <div className="flex flex-col gap-1 p-6 mb-10">
      <h2 className="text-4xl">No posts found</h2>
      <p>Please check back later!</p>
    </div>
  );
}

Challenges:

  • Customizing the TailwindCSS Theme
  • Adding/testing the grid layout with display posts values

Solution?

<div className="flex flex-col mt-6">
        <div className="w-full flex flex-col items-center gap-4 md:gap-4">
          <div className="relative rounded-xl overflow-auto ">
            <div className="grid gap-3 sm:grid-cols-1 md:grid-col-2 lg:grid-cols-3 xl:grid-cols-3">
              {!posts.length && 'No articles found.'}
              {posts
                .filter((post) => post.tags.includes('case-study')) //Filter by tag name
                .slice(0, numberOfPosts)
                .map((post) => {
                  const { path, slug, date, title, summary, tags, images, workflow } = post;
                  const imgSrc = images?.[0];

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

                        <article className="flex flex-col gap-4 py-5 md:p-3">
                          <Link
                            href={`/${path}`}
                            aria-label={`Link to ${title}`}
                            className="text-gray-900 dark:text-gray-100 absolute left-0 top-0 min-w-fit min-h-full"
                          >
                          <span className="sr-only">
                            Read more about {title}
                          </span>
                          </Link>

                          <h2 className="text-2xl capitalize leading-8 tracking-tight">
                            {title}
                          </h2>

                          <div className="flex space-x-2 uppercase">
                            <Badge>{tags?.map((tag) => <Tag key={tag} text={tag} />)}</Badge>
                            <Badge variant="secondary"> {workflow}</Badge>

                          </div>



                          <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">
                            {summary}
                          </p>

                          <div className='absolute bottom-6 right-10'>
                            {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}`}
                              >
                                <div>Learn more &rarr;</div>
                              </Link>
                            )}
                          </div>
                        </article>
                      </div>
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      </div>

REF(s):

Internal Pages

Project 03: Established UAT

Project 04 - Thinking About Case Studies

Project 05 - Generating Categories

External Site Reference & Functional Concepts

Shipixen: Creating a blog layout | https://shipixen.com/boilerplate-documentation/creating-a-layout

Refine Dev: Tailwind CSS Grid System | https://refine.dev/blog/tailwind-grid/#customizing-tailwindcss-theme

Tailwind CSS Dynamic Grid Examples