Replace excerpt with handwritten lede (#54)

src/content/posts/mailchimp-api-interests.mdx

@@ -3,6 +3,7 @@ title: 'Using Interest Groups With The Mailchimp V3 API'
 date: 2019-08-22
 category: Tutorials
 tags: Mailchimp, PHP, Tutorial
+lede: 'A client recently asked me to update their Mailchimp integration to add support for sub-group targeting using interest groups. Finding the process more involved than I expected, I wanted to share my experience locating the relevant IDs in the admin interface and examples including them in an API request.'
 theme:
   header: '#1f2230'
 image:
@@ -13,8 +14,6 @@ image:
     link: 'https://unsplash.com/photos/fb7yNPbT0l8'
 ---
 
-A client recently asked me to update their Mailchimp integration to add support for sub-group targeting using interest groups. Finding the process more involved than I expected, I wanted to share my experience locating the relevant IDs in the admin interface and examples including them in an API request.
-
 ## Creating an API Key
 
 In order to create new users using we'll first need to create an API key with access to our account. Sign into Mailchimp then go to the [Account Settings > Extras > API Keys](https://us4.admin.mailchimp.com/account/api/) page then **Create a Key**.

src/pages/index.tsx

@@ -33,13 +33,11 @@ export default function Page({ data }: any) {
         featuredPostImageAlt={featuredPost.frontmatter.image.alt}
         featuredPostTitle={featuredPost.frontmatter.title}
         featuredPostURL={postSlugToRoute(featuredPost.fields.slug)}
-        featuredPostExcerpt={featuredPost.excerpt}
-        recentPosts={[featuredPost, featuredPost, featuredPost].map(
-          recentPost => ({
-            title: recentPost.frontmatter.title,
-            url: postSlugToRoute(recentPost.fields.slug),
-          })
-        )}
+        featuredPostExcerpt={featuredPost.frontmatter.lede}
+        recentPosts={recentPosts.map(recentPost => ({
+          title: recentPost.frontmatter.title,
+          url: postSlugToRoute(recentPost.fields.slug),
+        }))}
       />
       <ContactSection />
     </>

src/queries/blog-post.ts

@@ -9,6 +9,7 @@ export const metaFields = graphql`
       date(formatString: "MMMM D, YYYY")
       title
       tags
+      lede
       category
       theme {
         header

src/templates/post.tsx

@@ -12,21 +12,18 @@ import styles from './post.module.scss'
 export default function Template({ data: { post, avatar } }) {
   const {
     body,
-    excerpt,
     timeToRead,
     tableOfContents,
     fields: { slug },
-    frontmatter: { title, image, date, category, theme },
+    frontmatter: { title, image, date, category, theme, lede },
   } = post
-  const lede =
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in elementum risus, eget egestas nibh. Mauris eget ligula convallis lacus varius tristique. Maecenas lacus nisl, dapibus nec dapibus eu, fermentum in ligula.'
   return (
     <article>
       <SEO
         schema={true}
         image={image.full.childImageSharp.fluid.src}
         title={title}
-        description={excerpt}
+        description={lede}
         blogPost={{
           author: '@xdanmorgan',
           datePublished: date,
@@ -164,42 +161,6 @@ function TableOfContents({
 }: {
   items: { url: string; title: string }[]
 }) {
-  const initial = items.reduce((acc, cur) => ({ ...acc, [cur.url]: false }), {})
-  const [status, setStatus] = useState({ ...initial })
-  // rules:
-  // 1. visible item can be the only one active after halfway
-  // 2. can show multiple on screen
-  // 3. if thre's none above halfway go back to the previous
-  // 4. if there is no previous, none active
-  // recalculate on resize
-  // const waypoints = items
-  //   .map(item => document.querySelector(item.url))
-  //   .filter(Boolean)
-  //   .reduce((acc, cur) => ({ ...acc, [cur.id]: cur.offsetTop }), {})
-  // // refresh when waypoints are recalculated
-  // useEffect(() => {
-  //   function onScroll() {
-  //     const pos = window.scrollY || window.pageYOffset
-  //     const viewport = {
-  //       min: pos,
-  //       mid: pos + window.innerHeight / 2,
-  //       max: pos + window.innerHeight,
-  //     }
-  //     const inView = Object.keys(waypoints).filter(
-  //       k => waypoints[k] <= viewport.max
-  //     )
-  //     const update = inView.reduce(
-  //       (acc, cur) => ({ ...acc, [`#${cur}`]: true }),
-  //       {
-  //         ...initial,
-  //       }
-  //     )
-  //     setStatus(update)
-  //   }
-  //   window.addEventListener('scroll', onScroll)
-  //   return () => window.removeEventListener('scroll', onScroll)
-  // }, [waypoints])
-
   return (
     <div className={cx(styles.toc, 'flx-g-1')}>
       <div className="p-3x md:px-4x md:py-6x">
@@ -209,7 +170,7 @@ function TableOfContents({
             <li key={heading.url}>
               <Link
                 className={cx('stealth caption d-block position-relative', {
-                  'is-active': status[heading.url],
+                  'is-active': false,
                 })}
                 to={heading.url}
               >