やかんです。ブログサイトリニューアルの過程を記録します。

  • 今こんな感じです。
  • コーディング周り。
  • デザイン周り。

今こんな感じです。

こんな感じ↓

動画の縦幅がめっちゃ大きくなってしまってるんですが、スマホで見るor動画を全画面にすることで、ちょうど良くなるかと。

コーディング周り。

使用しているものは以下。

まだコードは殴り書きでこれから整理しますが、例えばトップページは以下のコードで動いてます。

東大生やかんのブログ
やかん

なんかそれっぽいですけど、基本的なことのみです。

import * as React from "react"
import { FC } from "react"
import {
  Link as GatsbyLink,
  graphql,
  StaticQueryDocument,
  PageProps,
} from "gatsby"
import { Box, Text, Link, SimpleGrid, Center } from "@chakra-ui/react"
import styled from "styled-components"
import Layout from "../components/layout"
// import Seo from "../components/seo"
import BlogListItem from "../components/BlogListItem"
import CategoryBlock from "../components/CategoryBlock"
import TagCard from "../components/TagCard"
import { BsChevronDoubleDown } from "@react-icons/all-files/bs/BsChevronDoubleDown"
import "../assets/css/index.css"
import {
  IndexPageDataProps,
  WpPostType,
  WpCategoryType,
  WpTagType,
} from "../utils/type"

const IndexPage: FC<PageProps<IndexPageDataProps>> = ({ data }) => {
  return (
    <Layout>
      {/* <Seo title="home" /> */}
      <Box w="90%" mx="auto">
        <StyledChakraWrapper>
          {/* 新着記事の文字列が視覚的に左によって見えるから、ml={2} */}
          <Text
            fontSize={28}
            fontWeight="medium"
            ml={2}
            lineHeight={2}
            className="component-title"
          >
            新着記事
          </Text>
          <Box borderBottom="solid 1px #000" w="80%" />
          {data.allWpPost.nodes.map((node: WpPostType, index: number) => {
            return (
              <BlogListItem
                key={index}
                slug={node.slug}
                image={
                  node.featuredImage.node.localFile.childImageSharp
                    .gatsbyImageData
                }
                title={node.title}
                date={node.date}
                category={node.categories.nodes[0].name}
              />
            )
          })}
          <Link
            as={GatsbyLink}
            to="/articles"
            _focus={{
              textDecoration: "none",
            }}
            display="block"
            textAlign="center"
            fontSize={18}
            mt={8}
          >
            全ての記事を見る
            <Center mt={2}>
              <BsChevronDoubleDown />
            </Center>
          </Link>
        </StyledChakraWrapper>
        <StyledChakraWrapper>
          <Text
            fontSize={28}
            fontWeight="medium"
            ml={2}
            lineHeight={2}
            className="component-title"
          >
            カテゴリー
          </Text>
          <Box borderBottom="solid 1px #000" w="80%" />
          <SimpleGrid columns={3} spacingX={2} spacingY={8} mt={8}>
            {data.allWpCategory.nodes.map((node: WpCategoryType) => {
              return (
                <CategoryBlock
                  key={node.name}
                  name={node.name}
                  path={node.slug}
                />
              )
            })}
          </SimpleGrid>
        </StyledChakraWrapper>
        <StyledChakraWrapper>
          <Text
            fontSize={28}
            fontWeight="medium"
            ml={2}
            lineHeight={2}
            className="component-title"
          >
            タグ
          </Text>
          <Box borderBottom="solid 1px #000" w="80%" />
          {/* TODO: return の文字列省略 */}
          {data.allWpTag.nodes.map((node: WpTagType) => {
            return (
              <TagCard
                key={node.name}
                name={node.name}
                path={node.slug}
                count={node.count}
              />
            )
          })}
        </StyledChakraWrapper>
      </Box>
    </Layout>
  )
}

const StyledChakraWrapper = styled(Box)`
  padding-top: 24px;
`

export const query: StaticQueryDocument = graphql`
  {
    allWpPost(limit: 4) {
      nodes {
        date(formatString: "YYYY-MM-DD")
        featuredImage {
          node {
            localFile {
              childImageSharp {
                gatsbyImageData(layout: CONSTRAINED, placeholder: TRACED_SVG)
              }
            }
          }
        }
        categories {
          nodes {
            name
          }
        }
        slug
        title
      }
    }
    allWpCategory {
      nodes {
        slug
        count
        name
      }
    }
    allWpTag {
      nodes {
        name
        slug
        count
      }
    }
  }
`

export default IndexPage

デザイン周り。

まだモバイル画面（スマホとか）しか着手してませんが、結構詰まってます。

東大生やかんのブログ
やかん

難しいです。。

もちろん楽しいですけどね。ただ、一生懸命考えても結局全部「妥協」みたいになってしまって、「これだ！これにしよう！」という感覚がありません。何が正解なんでしょうか。

前身はしてますが、道のりは長いですね。。

東大生やかんのブログ
やかん

楽しいからよしってことで。

まだまだTODOは死ぬほどありますが、のんびり取り組みます。

ということで、この記事は以上です。最後までお読みいただき、ありがとうございます！