gatsbyカスタム作業メモ

exclude: Table of Contents
tight: false
ordered: false
from-heading: 2
to-heading: 6
class-name: "table-of-contents"

// 表示する分だけsliceして渡すようにしている
const Posts: React.FC<Props> = ({ posts, showPosts }) => {
  return posts.slice(0, showPosts).map(({ node }) => {
    return <Article post={node} />
  })
}

const BlogIndex = ({ data, location }) => {
  const siteTitle = data.site.siteMetadata.title
  const posts = data.allMarkdownRemark.edges

  const pageSize = 10
  const [hasMore, setHasMore] = React.useState(true)
  const [pageNum, setPageNum] = React.useState(1)

  let loadMore = () => {
    if (pageSize * pageNum >= posts.length) {
      setHasMore(false)
      return
    }
    setPageNum(pageNum + 1)
  }

  const loader = <div className="loader">Loading...</div>
  return (
    <Layout location={location} title={siteTitle}>
      <SEO title="All posts" />
      <InfiniteScroll
        pageStart={0}
        loadMore={loadMore}
        hasMore={hasMore}
        loader={loader}
      >
        <Posts posts={posts} showPosts={pageNum * pageSize} />
      </InfiniteScroll>
    </Layout>
  )
}

  <Helmet
    meta={[
    ...
      {
        name: "google-site-verification",
        content: "xxxx",
      },
    ...
    ]}

import React from "react"
import styled from "styled-components"

import { Tooltip, Zoom, useScrollTrigger } from "@mui/material"

type Props = { children: React.ReactNode }

const StyledDiv = styled.div`
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
`

const ScrollTop: React.FC<Props> = props => {
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  })
  const onClick = (event: React.MouseEvent<HTMLDivElement>) => {
    const anchor = (
      (event.target as HTMLDivElement).ownerDocument || document
    ).querySelector("#back-to-top-anchor")
    if (anchor) {
      anchor.scrollIntoView({ behavior: "smooth", block: "center" })
    }
  }

  return (
    <Zoom in={trigger}>
      <Tooltip title="back to top">
        <StyledDiv onClick={onClick}>{props.children}</StyledDiv>
      </Tooltip>
    </Zoom>
  )
}

export default ScrollTop

import Fab from "@mui/material/Fab"
import ScrollTop from "./scroll-top"

    <ScrollTop>
      <Fab color="primary" size="small" aria-label="scroll back to top">
        <KeyboardArrowUpIcon />
      </Fab>
    </ScrollTop>

import React from "react"
import { Link } from "gatsby"
import TocIcon from "@mui/icons-material/Toc"

import { MarkdownHeading } from "../../../graphql-types"

import "./blog-toc.scss"

type TOCProps = {
  links: Array<MarkdownHeading>
}

const TOC: React.FC<TOCProps> = ({ links }) => {
  const texts = links.map(link => {
    return (
      <>
        <li>
          <Link className={`depth-${link.depth} link`} to={`#${link.id}`}>
            {link.value}
          </Link>
        </li>
      </>
    )
  })
  return (
    <div className="blog-toc">
      <TocIcon className="toc-icon" />
      目次
      <ol>{texts}</ol>
    </div>
  )
}

export default TOC

.blog-toc {
  font-family: "ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "sans-serif";
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 0.5rem;
  border-left: solid 0.1rem #d3d3d3;
  font-size: 13px;
  font-weight: 1000;

  .toc-icon {
    vertical-align: middle;
  }

  li {
    margin-bottom: 0.5rem;
  }

  .link {
    box-shadow: none;
    text-decoration: none;
    color: inherit;
  }
}

const TOC: React.FC<TOCProps> = ({ links }) => {
  const [activeId, setActiveId] = React.useState(``)
  React.useEffect(() => {
    const observer = new IntersectionObserver(
      entries => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            setActiveId(entry.target.id)
          }
        })
      },
      {
        rootMargin: `0% 0% -95% 0%`,
      }
    )

    links.forEach(link => {
      observer.observe(document.getElementById(link.id))
    })

    return () => {
      links.forEach(link => {
        observer.unobserve(document.getElementById(link.id))
      })
    }
  }, [links])

  const texts = links.map(link => {
    const active = link.id === activeId ? "active" : ""
    return (
      <>
        <li>
          <Link
            id={`${link.id}`}
            className={`depth-${link.depth} link ${active}`}
            to={`#${link.id}`}
          >
            {link.value}
          </Link>
        </li>
      </>
    )
  })
  return (
    <div className="blog-toc">
      <TocIcon className="toc-icon" />
      目次
      <ol>{texts}</ol>
    </div>
  )
}

import React from "react"

const GoogleAdsense: React.FC = () => {
  React.useEffect(() => {
    if (window) {
      window.adsbygoogle = window.adsbygoogle || []
      window.adsbygoogle.push({})
    }
  }, [])

  return (
    <>
      <ins
        className="adsbygoogle"
        style={{ display: "block" }}
        data-ad-client="ca-pub-xxxxxxx"
        data-Namelot="xxxxxxx"
        data-ad-format="auto"
        data-full-width-responsive="true"
      ></ins>
    </>
  )
}

export default GoogleAdsense

const visit = require("unist-util-visit")

const titleSep = ":"

module.exports = ({ markdownAST }, { className }) => {
  visit(markdownAST, "code", (node, index) => {
    // ```xxx:xxx.txt -> lang, title
    const [lang, title] = (node.lang || "").split(titleSep)
    if (!title) {
      return
    }

    const titleNode = {
      type: "html",
      value: `
        <div class="${className}">
          <span>${title}</span>
        </div>
       `,
    }

    markdownAST.children.splice(index, 0, titleNode)
    node.lang = lang
  })
  return markdownAST
}

.gatsby-code-title {
  position: relative;
  background: #f5f2f0;
  width: 100%;
  top: 0.5rem;
}

.gatsby-code-title span {
  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  color: #fcfcfc;
  background: #a9a9a9;
  padding: 0.25rem;
}

const PayButton: React.FC = () => {
  React.useEffect(() => {
    let script = document.createElement("script")
    script.setAttribute("data-name", "BMC-Widget")
    script.setAttribute("data-id", "xxxx")
    script.setAttribute("data-description", "Support me on Buy me a coffee!")
    script.setAttribute("data-message","☕")
    script.setAttribute("data-color", "#FFDD00")
    script.setAttribute("data-position", "right")
    script.src = "https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js"
    script.async = true

    script.onload = function () {
      var evt = document.createEvent("Event")
      evt.initEvent("DOMContentLoaded", false, false)
      window.dispatchEvent(evt)
    }

    document.head.appendChild(script)
  }, [])

  return null
}