Style the single article page

In this guide, you’ll style the single article page in Epic News.

Style the single article page

As with the other tutorials in this section, there is nothing new here that you haven’t learned before.

This will be down to you to display and style the rest of the article content on the page.

Challenge

Challenge requirements

Using your knowledge of Tailwind CSS and JSX components, style the single article to make it look clean, professional and appealing.

You should display the following information:

• Article title
• Author name
• The first image from the article (you can display more if you like)
• If there is no main image from the article, display a fallback image of your choice (perhaps the site logo?)
• Article content

Tips

• Look at how other news sites display their single article pages for design inspiration, e.g. BBC News; The Guardian; IGN
• Use Tailwind CSS classes to style the page elements.
• Think carefully how we displayed the article images on the news index page

When you are ready, check out one possible solution below and compare it with your own.

Solution

1. SingleArticle component

Because an article might not be found, I’ve extracted the actual article display into a new component called SingleArticle.

This will make it easier to work with the ternary statement in our ArticlePage component.

I’ve saved this component in a new file at app/components/organisms/SingleArticle.tsx

Eventually (in the next solution step), I will use this component in the single article page.

This component will be responsible for displaying the article title, content, author name, category and images.

app/components/organisms/SingleArticle.tsx

import { type JSX } from 'react'
import { FiArrowLeft } from 'react-icons/fi'
import {
  MdOutlineBusinessCenter,
  MdOutlineTheaters,
  MdOutlineDesktopMac,
  MdOutlineNewspaper,
} from 'react-icons/md'
import { Link } from 'react-router'
import { toTitleCase } from '#app/utils/stringUtils.js'
import siteLogo from '~/assets/png/epic-news-logo.png'
import { getArticleImgSrc } from '~/utils/misc.js'

interface SingleArticleProps {
  article: {
    id: string
    title: string
    content: string
    owner: {
      name: string | null
    }
    category: {
      name: string
    } | null
    images: {
      objectKey: string
    }[]
  }
}
export default function SingleArticle({ article }: SingleArticleProps) {
  const mainImage = article.images[0]

  const imageSrc = mainImage ? getArticleImgSrc(mainImage.objectKey) : siteLogo
  const categoryTitle = toTitleCase(article.category?.name || '')

  const categoryIcons: { [key: string]: JSX.Element } = {
    Business: <MdOutlineBusinessCenter size={20} className="text-violet-300" />,
    Entertainment: <MdOutlineTheaters size={20} className="text-violet-300" />,
    Technology: <MdOutlineDesktopMac size={20} className="text-violet-300" />,
    'General news': (
      <MdOutlineNewspaper size={20} className="text-violet-300" />
    ),
  }

  return (
    <div className="container py-16">
      <div className="lg:w-2/3">
        <Link
          to="/news"
          className="group text-muted-foreground hover:text-foreground flex items-center gap-2 pb-4 transition"
        >
          <FiArrowLeft className="transition group-hover:-translate-x-1" /> Back
          to News
        </Link>
        <h2 className="text-h2 pb-8">{article.title}</h2>

        <div
          className={`relative h-[18rem] object-cover md:h-[23rem] lg:h-[28rem]`}
        >
          <div className="absolute inset-0">
            <img
              className="h-full w-full rounded-t-lg object-cover"
              src={imageSrc}
              alt={article.title}
            />
          </div>
        </div>
        <div className="flex justify-between gap-4 pt-4">
          <div className="flex items-center gap-2">
            {categoryIcons[categoryTitle]}
            <p className="text-sm text-violet-300">{categoryTitle}</p>
          </div>
          <span className="text-muted-foreground text-sm">
            By: {article.owner.name}
          </span>
        </div>
        <div className="pt-16 text-lg leading-loose whitespace-break-spaces">
          {article.content}
        </div>
      </div>
    </div>
  )
}

This is a lot of code! But don’t worry, it’s just JSX like we have written before. The logic is simple: we’re displaying the article title, content, author name, category and images.

Take the time to understand how the component works, and how it uses the getArticleImgSrc utility function to get the image source.

1. SingleArticle component

2. Modify single article page

With this in place, I can make two simple changes to the single article page.

1. Open the app/routes/article.$articleId.tsx file

2. Remove the code highlighted in red, and add the changes highlighted in green below:

app/routes/article.$articleId.tsx

import { invariant } from '@epic-web/invariant'
import { type LoaderFunctionArgs, data, useLoaderData } from 'react-router'
import SingleArticle from '#app/components/organisms/SingleArticle.tsx'
import { prisma } from '~/utils/db.server.ts'

export async function loader({ params }: LoaderFunctionArgs) {
  const { articleId } = params

  invariant(typeof articleId === 'string', 'No article ID provided')

  // Fetch the article by ID
  const article = await prisma.article.findUnique({
    where: { id: articleId },
    select: {
      id: true,
      title: true,
      content: true,
      category: { select: { name: true } },
      owner: { select: { name: true } },
      images: { select: { objectKey: true } },
    },
  })

  return data({ article })
}

const ArticleNotFound = () => {
  return (
    <div className="container flex h-full flex-1 flex-col items-center justify-center">
      <h2 className="pb-8 text-center text-h2">No article found 🤔</h2>
      <p className="text-center text-xl">
        Please check the article ID in your browser and try again.
      </p>
    </div>
  )
}

export default function ArticlePage() {
  const { article } = useLoaderData<typeof loader>()

  return article ? (
    <div className="container py-16">
      <h2 className="text-h2 pb-8">{article.title}</h2>
    </div>
  ) : (
    <ArticleNotFound />
  )
  return article ? <SingleArticle article={article} /> : <ArticleNotFound />
}

With this code in place, my single article page is fully styled:

2. Modify single article page

Summary

In this step, we have:

• Extracted each field relevant to display on the the single article page
• Provided a fallback screen to show if the user tries to access an article that doesn’t exist
• Styled the single article page in Epic News with Tailwind CSS

Next steps

In the next section, we will ensure that admins can edit and publish articles in Epic News, while regular users can only edit the content of their own.