Next.js Tutorial で作った blog サイトの見た目を自分好みにする計画

why

デザイン変更終えてデプロイした！https://t.co/DfRoG1GX4z pic.twitter.com/qbA7UwklxD

— TaKO8Ki (@TaKOBKi) November 3, 2020

• これを見て私もはてなや Qiita の記事を並べたくなった

現状

• Nextjs-tutorial で作ったそのまま
• 中身も入れてない。

purpose01-見た目-CSS

• カード型で並べられる
• 決まった画像がアイコンとして？並ぶ
• 左上のロゴがある

控えめニューモーフィズム pic.twitter.com/deKSKhA0wd

— さんぽし (@sanpo_shiho) November 9, 2020

• 画像入れなくても綺麗に CSS 当てれば形になるかも

purpose02-便利機能-view

• ページネーションが表示される
• 検索ができる
• 記事の文字数が表示される

CSS 編集

<section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
  <h2 className={utilStyles.headingLg}>Blog</h2>
  <ul className={utilStyles.list}>
    {allPostsData.map(({ id, date, title }) => (
      <li className={utilStyles.listItem} key={id}>
        <Link href={`/posts/${id}`}>
          <a>{title}</a>
        </Link>
        <br />
        <small className={utilStyles.lightText}>
          <Date dateString={date} />
        </small>
      </li>
    ))}
  </ul>
</section>

• index.tsx の 記事データを map して html にしているのはここ

import utilStyles from '../styles/utils.module.css'

• index.tsx が読み込んでるのは util

.heading2Xl {
  font-size: 2.5rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingXl {
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.05rem;
  margin: 1rem 0;
}

.headingLg {
  font-size: 1.5rem;
  line-height: 1.4;
  margin: 1rem 0;
}

.headingMd {
  font-size: 1.2rem;
  line-height: 1.5;
}

.borderCircle {
  border-radius: 9999px;
}

.colorInherit {
  color: inherit;
}

.padding1px {
  padding-top: 1px;
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.listItem {
  margin: 0 0 1.25rem;
}

.lightText {
  color: #999;
}

• パーツごとに スタイルが決まっている
• section 自体に影をつけて浮かせて行こうか...
• そもそも横並びにするために Grid を全体に適用するか...

サンプルデータを実際のデータに

const name = '[Your Name]'
export const siteTitle = 'Next.js Sample Website'

• index.tsx のここを変更
• posts/ に Qiita の 3 記事と Hatena のいくつかの記事をおく
• md の header に updatedAt, tags の配列もおく？