feat: feed feature, typescript, remove google, fix errs & warns

src/templates/blog-list.tsx

@@ -1,5 +1,5 @@
-import { Link, graphql } from 'gatsby'
-import React from 'react'
+import { Link, graphql, PageProps } from 'gatsby'
+import * as React from 'react'
 import kebabCase from 'lodash/kebabCase'
 import styled from 'styled-components'
 
@@ -16,27 +16,39 @@ import {
 import Post from './postpreview'
 import { SideBar } from './sidebar'
 
-const BlogListTemplate = ({ data, location, pageContext }) => {
+import type { PostNode, PageContext } from '../types'
+
+interface BlogListData {
+  remark: {
+    posts: Array<{ post: PostNode }>
+  }
+}
+
+const BlogListTemplate: React.FC<PageProps<BlogListData, PageContext>> = ({
+  data,
+  location,
+  pageContext
+}) => {
   const posts = data.remark.posts
 
-  const iniPath =
-    pageContext.page == 'index'
+  const iniPath: string =
+    pageContext.page === 'index'
       ? `/blog/`
-      : pageContext.page == 'year'
-      ? `/${pageContext.year}/`
-      : pageContext.page == 'category'
-      ? `/category/${kebabCase(pageContext.tag)}/`
-      : null
+      : pageContext.page === 'year'
+        ? `/${pageContext.year}/`
+        : pageContext.page === 'category'
+          ? `/category/${kebabCase(pageContext.tag ?? '')}/`
+          : `/blog/`
 
   const pageInfo = `Page ${pageContext.currentPage} of ${pageContext.numPages}`
-  Array.from({ length: 5 }, (v, k) => k + 1)
   const paginationJSX = Array.from(
-    { length: pageContext.numPages },
+    { length: pageContext.numPages ?? 0 },
     (_, i) => i + 1
   ).map((pageIndex) => {
     const link = pageIndex === 1 ? iniPath : `${iniPath}page/${pageIndex}`
     return (
       <Link
+        key={pageIndex}
         to={link}
         className={`btn btn-outline-dark btn-sm ${
           pageIndex === pageContext.currentPage ? 'disabled' : ''
@@ -62,8 +74,8 @@ const BlogListTemplate = ({ data, location, pageContext }) => {
         <div className="row">
           <div className="col-md-7">
             <div className="row">
-              {posts.map((data, i) => (
-                <Post key={i} post={data.post} />
+              {posts.map(({ post }, i) => (
+                <Post key={i} post={post} />
               ))}
             </div>
             <span className="float-start">{paginationJSX}</span>
@@ -114,5 +126,3 @@ export const pageQuery = graphql`
     }
   }
 `
-
-// tags