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

src/templates/blog-post.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { Link, graphql } from 'gatsby'
+import * as React from 'react'
+import { graphql, PageProps } from 'gatsby'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -8,15 +8,19 @@ import { Section } from '../components/shared'
 import Post from './post'
 import { SideBar } from './sidebar'
 
-const BlogPostTemplate = ({ data, location, pageContext }) => {
+import type { PostNode, PageContext } from '../types'
+
+const BlogPostTemplate: React.FC<
+  PageProps<{ post: PostNode }, PageContext>
+> = ({ data, location, pageContext }) => {
   const { post } = data
   const { previewImg } = post.frontmatter
 
   return (
     <Layout location={location} heroSection={false}>
       <Seo
-        title={post?.frontmatter?.title}
-        description={post?.frontmatter?.description}
+        title={post.frontmatter.title}
+        description={post.frontmatter.description}
         previewImg={
           previewImg?.childImageSharp?.gatsbyImageData?.images?.fallback?.src
         }

src/templates/blog-search.tsx

@@ -1,8 +1,6 @@
-import { Link, graphql, useStaticQuery } from 'gatsby'
-import React from 'react'
-import kebabCase from 'lodash/kebabCase'
+import { Link, graphql, useStaticQuery, PageProps } from 'gatsby'
+import * as React from 'react'
 import { useFlexSearch } from 'react-use-flexsearch'
-import styled from 'styled-components'
 
 import Layout from '../components/layout'
 import Seo from '../components/seo'
@@ -17,7 +15,19 @@ import {
 import Post from './postpreview'
 import { SideBar } from './sidebar'
 
-const BlogSearchTemplate = ({ location, pageContext }) => {
+import type { PageContext, PostNode, SearchPost } from '../types'
+
+interface SearchData {
+  localSearchBlog: {
+    index: string
+    store: Record<string, unknown>
+  }
+}
+
+const BlogSearchTemplate: React.FC<PageProps<SearchData, PageContext>> = ({
+  location,
+  pageContext
+}) => {
   const queryData = useStaticQuery(graphql`
     query {
       localSearchBlog {
@@ -34,12 +44,12 @@ const BlogSearchTemplate = ({ location, pageContext }) => {
     query,
     queryData.localSearchBlog.index,
     queryData.localSearchBlog.store
-  )
-  const postsJSX = []
+  ) as SearchPost[]
+  const postsJSX: React.ReactElement[] = []
 
   if (query) {
     posts.forEach((post, i) => {
-      const _post = {
+      const _post: PostNode = {
         id: post.id,
         html: post.html,
         fields: {
@@ -48,7 +58,7 @@ const BlogSearchTemplate = ({ location, pageContext }) => {
         frontmatter: {
           title: post.title,
           date: post.date,
-          previewImg: post.previewImg
+          previewImg: post.previewImg as PostNode['frontmatter']['previewImg']
         }
       }
 

src/templates/feed-list.tsx

@@ -0,0 +1,131 @@
+import { Link, graphql, PageProps } from 'gatsby'
+import * as React from 'react'
+import kebabCase from 'lodash/kebabCase'
+
+import Layout from '../components/layout'
+import Seo from '../components/seo'
+
+import { Section } from '../components/shared'
+import {
+  SectionHeading,
+  SectionDesc,
+  SolidButton
+} from '../components/shared/styledComponents'
+
+import Post from './postpreview'
+import { SideBar } from './sidebar'
+
+import type { PostNode, PageContext } from '../types'
+
+interface FeedListData {
+  remark: {
+    posts: Array<{ post: PostNode }>
+  }
+}
+
+const FeedListTemplate: React.FC<PageProps<FeedListData, PageContext>> = ({
+  data,
+  location,
+  pageContext
+}) => {
+  const posts = data.remark.posts
+
+  const iniPath: string =
+    pageContext.page === 'index'
+      ? `/feed/`
+      : pageContext.page === 'year'
+        ? `/feed/${pageContext.year}/`
+        : pageContext.page === 'category'
+          ? `/feed/category/${kebabCase(pageContext.tag ?? '')}/`
+          : `/feed/`
+
+  const pageInfo = `Page ${pageContext.currentPage} of ${pageContext.numPages}`
+  const paginationJSX = Array.from(
+    { 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' : ''
+        }`}
+        style={{
+          borderRadius: '50%',
+          padding: '.375rem .75rem',
+          margin: '0.25rem'
+        }}
+      >
+        {pageIndex}
+      </Link>
+    )
+  })
+  return (
+    <Layout
+      location={location}
+      heading="Data Controller’s Feed"
+      desc="Announcements and social media style updates from the Data Controller team."
+    >
+      <Seo title="Feed" />
+      <Section color="black" bgColor="white" bottomArrow={false}>
+        <div className="row">
+          <div className="col-md-7">
+            <div className="row">
+              {posts.map(({ post }, i) => (
+                <Post key={i} post={post} />
+              ))}
+            </div>
+            <span className="float-start">{paginationJSX}</span>
+            <span className="float-end">{pageInfo}</span>
+          </div>
+          <div className="col-md-5">
+            <SideBar
+              pageContext={pageContext}
+              location={location}
+              basePath="/feed"
+            />
+          </div>
+        </div>
+      </Section>
+    </Layout>
+  )
+}
+
+export default FeedListTemplate
+
+export const pageQuery = graphql`
+  query FeedListQuery(
+    $filter: MarkdownRemarkFilterInput!
+    $skip: Int!
+    $limit: Int!
+  ) {
+    remark: allMarkdownRemark(
+      filter: $filter
+      limit: $limit
+      skip: $skip
+      sort: { frontmatter: { date: DESC } }
+    ) {
+      posts: edges {
+        post: node {
+          html
+          fields {
+            slug
+          }
+          frontmatter {
+            title
+            date(formatString: "MMMM DD, YYYY")
+            author
+            authorLink
+            previewImg {
+              childImageSharp {
+                gatsbyImageData(layout: CONSTRAINED)
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+`

src/templates/feed-post.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react'
+import { graphql, PageProps } from 'gatsby'
+
+import Layout from '../components/layout'
+import Seo from '../components/seo'
+
+import { Section } from '../components/shared'
+import Post from './post'
+import { SideBar } from './sidebar'
+
+import type { PostNode, PageContext } from '../types'
+
+const FeedPostTemplate: React.FC<
+  PageProps<{ post: PostNode }, PageContext>
+> = ({ data, location, pageContext }) => {
+  const { post } = data
+  const { previewImg } = post.frontmatter
+
+  return (
+    <Layout location={location} heroSection={false}>
+      <Seo
+        title={post.frontmatter.title}
+        description={post.frontmatter.description}
+        previewImg={
+          previewImg?.childImageSharp?.gatsbyImageData?.images?.fallback?.src
+        }
+      />
+      <Section color="black" bgColor="white" bottomArrow={false}>
+        <div className="row">
+          <div className="col-md-7">
+            <Post post={post} location={location} />
+          </div>
+          <div className="col-md-5">
+            <SideBar
+              pageContext={pageContext}
+              location={location}
+              basePath="/feed"
+            />
+          </div>
+        </div>
+      </Section>
+    </Layout>
+  )
+}
+
+export default FeedPostTemplate
+
+export const pageQuery = graphql`
+  query FeedPostByPath($id: String!) {
+    post: markdownRemark(id: { eq: $id }) {
+      id
+      html
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+        description
+        date(formatString: "MMMM DD, YYYY")
+        author
+        authorLink
+        previewImg {
+          childImageSharp {
+            gatsbyImageData(layout: CONSTRAINED)
+          }
+        }
+        tags
+      }
+    }
+  }
+`

src/templates/post/index.tsx

@@ -1,12 +1,14 @@
-import React from 'react'
+import * as React from 'react'
 import { Link } from 'gatsby'
 import kebabCase from 'lodash/kebabCase'
 
-import { GatsbyImage } from 'gatsby-plugin-image'
+import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 
 import styled from 'styled-components'
 
-export const StyledLink = styled((props) => <Link {...props} />)`
+import type { PostNode } from '../../types'
+
+export const StyledLink = styled(Link)`
   text-decoration: none;
   color: black;
   &:hover {
@@ -16,7 +18,8 @@ export const StyledLink = styled((props) => <Link {...props} />)`
 `
 
 const StyledTitle = styled.h5`
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   margin-bottom: 0;
 `
@@ -45,7 +48,8 @@ const StyledContent = styled.div`
   padding: 15px 0;
   color: #666666;
 
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   a {
     color: black;
@@ -116,7 +120,12 @@ const StyledContent = styled.div`
   }
 `
 
-const Post = ({ post, location }) => {
+interface PostProps {
+  post: PostNode
+  location?: Location
+}
+
+const Post: React.FC<PostProps> = ({ post }) => {
   const tagsJSX = (post.frontmatter?.tags || []).map((tag, index) => (
     <span key={index}>
       {index > 0 && ', '}
@@ -134,14 +143,18 @@ const Post = ({ post, location }) => {
   ) : (
     <span>{post.frontmatter.author}</span>
   )
+  const previewImgData = post.frontmatter.previewImg?.childImageSharp
+    ?.gatsbyImageData as IGatsbyImageData | undefined
   return (
     <div>
-      <GatsbyImage
-        image={post.frontmatter.previewImg.childImageSharp.gatsbyImageData}
-        style={{ width: '100%', marginBottom: '1rem' }}
-        imgStyle={{ objectFit: 'contain' }}
-        alt={post.frontmatter.title}
-      />
+      {previewImgData && (
+        <GatsbyImage
+          image={previewImgData}
+          style={{ width: '100%', marginBottom: '1rem' }}
+          imgStyle={{ objectFit: 'contain' }}
+          alt={post.frontmatter.title}
+        />
+      )}
 
       <StyledTitle>{post.frontmatter.title}</StyledTitle>
       <StyledDate>

src/templates/postpreview/index.tsx

@@ -1,13 +1,15 @@
-import React from 'react'
+import * as React from 'react'
 import { Link } from 'gatsby'
 
-import { GatsbyImage } from 'gatsby-plugin-image'
+import { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'
 
 import styled from 'styled-components'
 
 import getDescription from '../shared/getDescription'
 
-export const StyledLink = styled((props) => <Link {...props} />)`
+import type { PostNode } from '../../types'
+
+export const StyledLink = styled(Link)`
   text-decoration: none;
   color: black;
   &:hover {
@@ -17,7 +19,8 @@ export const StyledLink = styled((props) => <Link {...props} />)`
 `
 
 const StyledTitle = styled.h5`
-  font-family: 'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
+  font-family:
+    'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
     sans-serif;
   font-size: 1rem;
   margin-bottom: 0;
@@ -34,21 +37,31 @@ const StyledDesc = styled.p`
   margin-bottom: 100px;
 `
 
-const Post = ({ post }) => (
-  <div className="col-md-6">
-    <StyledLink to={post.fields.slug}>
-      <GatsbyImage
-        image={post.frontmatter.previewImg.childImageSharp.gatsbyImageData}
-        style={{ minHeight: '150px', maxHeight: '200px' }}
-        imgStyle={{ objectFit: 'contain' }}
-        alt={post.frontmatter.title}
-      />
+interface PostPreviewProps {
+  post: PostNode
+}
 
-      <StyledTitle>{post.frontmatter.title}</StyledTitle>
-      <StyledDate>{post.frontmatter.date}</StyledDate>
-      <StyledDesc>{getDescription(post.html)}</StyledDesc>
-    </StyledLink>
-  </div>
-)
+const PostPreview: React.FC<PostPreviewProps> = ({ post }) => {
+  const previewImgData = post.frontmatter.previewImg?.childImageSharp
+    ?.gatsbyImageData as IGatsbyImageData | undefined
+  return (
+    <div className="col-md-6">
+      <StyledLink to={post.fields.slug}>
+        {previewImgData && (
+          <GatsbyImage
+            image={previewImgData}
+            style={{ minHeight: '150px', maxHeight: '200px' }}
+            imgStyle={{ objectFit: 'contain' }}
+            alt={post.frontmatter.title}
+          />
+        )}
 
-export default Post
+        <StyledTitle>{post.frontmatter.title}</StyledTitle>
+        <StyledDate>{post.frontmatter.date}</StyledDate>
+        <StyledDesc>{getDescription(post.html)}</StyledDesc>
+      </StyledLink>
+    </div>
+  )
+}
+
+export default PostPreview

src/templates/shared/getDescription.ts

@@ -7,7 +7,7 @@ const extractContent = (s: string): string => {
   return s
 }
 const getDescription = (content: string): string => {
-  return extractContent(content).substr(0, 100) + '...'
+  return extractContent(content).slice(0, 100) + '...'
 }
 
 export default getDescription

src/templates/sidebar.tsx

@@ -1,12 +1,17 @@
-import React, { useState, useEffect } from 'react'
+import * as React from 'react'
 import { Link, navigate } from 'gatsby'
 import kebabCase from 'lodash/kebabCase'
 import styled, { css } from 'styled-components'
-import { pathPrefix } from '../../gatsby-config.js'
+import { FaRss } from 'react-icons/fa'
+import { pathPrefix, siteMetadata } from '../../gatsby-config'
 
 import { StyledHeading } from '../styledComponents/blog'
 import { SolidButton } from '../components/shared/styledComponents'
 
+import type { PageContext, RecentPost, TagCount } from '../types'
+
+const rssFeedUrl = `${siteMetadata.siteUrl}rss.xml`
+
 const styles = css`
   color: #314351;
   opacity: 0.8;
@@ -29,10 +34,16 @@ const linkStyles = css`
     text-decoration: underline;
   }
 `
-const ArchiveLink = styled((props) => <Link {...props} />)`
+const ArchiveLink = styled(Link)`
   ${linkStyles}
 `
-const RecentPostLink = styled((props) => <Link {...props} />)`
+const RssAnchor = styled.a`
+  ${linkStyles}
+  display: flex;
+  align-items: center;
+  gap: 6px;
+`
+const RecentPostLink = styled(Link)`
   ${linkStyles}
   padding: 3px;
   border-bottom: 3px solid #e1e1e1;
@@ -59,30 +70,44 @@ const StyledPara = styled.p`
   ${styles}
 `
 
-const Archives = ({ archives }) => (
+interface ArchivesProps {
+  archives: Record<string, number>
+  basePath?: string
+}
+
+const Archives: React.FC<ArchivesProps> = ({ archives, basePath = '' }) => (
   <>
     {Object.keys(archives)
       .sort()
       .reverse()
-      .map((year, index) => (
-        <ArchiveLink key={year} to={`/${year}/`}>
+      .map((year) => (
+        <ArchiveLink key={year} to={`${basePath}/${year}/`}>
           {year} ({archives[year]})
         </ArchiveLink>
       ))}
   </>
 )
 
-const Categories = ({ tags }) => (
+interface CategoriesProps {
+  tags: TagCount[]
+  basePath?: string
+}
+
+const Categories: React.FC<CategoriesProps> = ({ tags, basePath = '' }) => (
   <>
     {tags.map((tag, i) => (
-      <ArchiveLink key={i} to={`/category/${kebabCase(tag.name)}/`}>
+      <ArchiveLink key={i} to={`${basePath}/category/${kebabCase(tag.name)}/`}>
         {tag.name} ({tag.totalCount})
       </ArchiveLink>
     ))}
   </>
 )
 
-const RecentPosts = ({ posts }) => (
+interface RecentPostsProps {
+  posts: RecentPost[]
+}
+
+const RecentPosts: React.FC<RecentPostsProps> = ({ posts }) => (
   <>
     {posts.map((post) => (
       <RecentPostLink key={post.slug} to={post.slug}>
@@ -92,22 +117,34 @@ const RecentPosts = ({ posts }) => (
   </>
 )
 
-export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
+interface SideBarProps {
+  pageContext: PageContext
+  location: Location
+  notFoundPage?: boolean
+  basePath?: string
+}
+
+export const SideBar: React.FC<SideBarProps> = ({
+  pageContext,
+  location,
+  notFoundPage = false,
+  basePath = ''
+}) => {
   const params = new URLSearchParams(location.search.substring(1))
   const queryUrl = params?.get('s') || ''
-  const [query, setQuery] = useState(queryUrl)
-  useEffect(() => {
+  const [query, setQuery] = React.useState(queryUrl)
+  React.useEffect(() => {
     setQuery(queryUrl)
   }, [queryUrl])
 
-  const handleSubmit = (event) => {
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault()
     navigate('/search?s=' + query)
   }
 
-  const _handleKeyDown = (event) => {
+  const _handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
-      handleSubmit(event)
+      navigate('/search?s=' + query)
     }
   }
 
@@ -130,13 +167,16 @@ export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
             type="text"
             value={query}
             onChange={(e) => setQuery(e.target.value)}
-            onKeyDown={(e) => _handleKeyDown(e)}
+            onKeyDown={_handleKeyDown}
             className="form-control"
             placeholder="Search"
             aria-label="Search"
             aria-describedby="button-addon2"
           />
-          <SolidButton theme="dark" onClick={handleSubmit}>
+          <SolidButton
+            theme="dark"
+            onClick={() => navigate('/search?s=' + query)}
+          >
             Search
           </SolidButton>
           <form onSubmit={handleSubmit}></form>
@@ -168,11 +208,17 @@ export const SideBar = ({ pageContext, location, notFoundPage = false }) => {
         <>
           <SideBarSection>
             <StyledHeading>Archives</StyledHeading>
-            <Archives archives={pageContext.archives} />
+            <Archives archives={pageContext.archives} basePath={basePath} />
           </SideBarSection>
           <SideBarSection>
             <StyledHeading>Categories</StyledHeading>
-            <Categories tags={pageContext.tags} />
+            <Categories tags={pageContext.tags} basePath={basePath} />
+          </SideBarSection>
+          <SideBarSection>
+            <StyledHeading>Subscribe</StyledHeading>
+            <RssAnchor href={rssFeedUrl} target="_blank" rel="noopener">
+              <FaRss /> RSS Feed
+            </RssAnchor>
           </SideBarSection>
         </>
       )}