【自作ブログ #13】一覧ページの改善(2)

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

• TypeScript
• React
• Next.js
• Styled Components
• GitHub Pages

今回は記事一覧ページをいい感じにします。
今回は後半です。

画面表示

分解してそれぞれにCSS適用します。

タイトルは大きく強調します。

import styled from 'styled-components'


const Title = styled.span`
  margin-bottom: 7px;
  font-size: 1.5rem;
`

日付は小さく、色も薄くします。

const Date = styled.small`
  margin-bottom: 2px;
  font-size: 0.6rem;
  color: #777;
`

肝となる、本文を一部表示する箇所です。
下部には擬似要素で、グラデーションのぼかしを入れています。

const ContentBeginning = styled.div`
  position: relative;
  max-height: 9.3rem;
  overflow: hidden;
  /** 下部のblur */
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(
      rgba(255, 255, 255, 0.3),
      rgba(255, 255, 255, 0.9)
    );
  }
`

wrapper要素として、margin, flexbox, text-decorationのresetなどを組み込みます。

const Li = styled.li`
  margin-bottom: 3rem;
`

const StyledArticleLink = styled.a`
  display: flex;
  flex-direction: column;
  text-decoration: none;
`

最後にまとめて一つのコンポーネントにします。

import { convertToPlain } from '@/utils/markdown-utils'

type Props = {
  slug: string
  title: string
  date: string
  content: string
}

const ArticleListItem = ({ slug, title, date, content }: Props) => {
  const contentText = convertToPlain(content)

  return (
    <Li key={slug}>
      <StyledArticleLink href={'/posts/' + slug}>
        <Date>{date}</Date>
        <Title>{title}</Title>
        <ContentBeginning>{contentText}</ContentBeginning>
      </StyledArticleLink>
    </Li>
  )
}

export default ArticleListItem

一覧表示

最後に一覧表示します。

type Props = {
  posts: {
    content: string
    matter: PostMatter
  }[]
}

const Index = ({ posts }: Props) => {
  const matters = posts.map(({ matter }) => matter)
  const links = (
    <ArticleList>
      {posts.map(({ content, matter }) => (
        <ArticleListItem
          key={matter.slug}
          slug={matter.slug}
          title={matter.title}
          date={matter.date}
          content={content}
        />
      ))}
    </ArticleList>
  )

  return (
    <MainContainer matters={matters}>
      <section>{links}</section>
    </MainContainer>
  )
}

export default Index

Pull Request

https://github.com/nek0meshi/blog/pull/15

あとがき

今年のM1おもしろかったな〜！！

弊社のCMが流れてました。