Support pinning posts

src/@lekoarts/gatsby-theme-minimal-blog-core/templates/homepage-query.tsx

@@ -4,6 +4,7 @@ import HomepageComponent, { Head } from "@lekoarts/gatsby-theme-minimal-blog-cor
 /**
  * Shadowed component with the following tweaks:
  *   - Remove limit on allPost
+ *   - Support pinning posts
  */
 
 export default HomepageComponent
@@ -24,6 +25,15 @@ export const query = graphql`
           name
           slug
         }
+        ... on MdxPost {
+          parent {
+            ... on Mdx {
+              frontmatter {
+                featured
+              }
+            }
+          }
+        }
       }
     }
   }

src/@lekoarts/gatsby-theme-minimal-blog/components/blog-list-item.tsx

@@ -0,0 +1,48 @@
+/** @jsx jsx */
+import * as React from "react"
+import { Text } from "theme-ui"
+import { jsx, Box } from "theme-ui"
+import { Link } from "gatsby"
+import ItemTags from "./item-tags"
+import { Highlight } from "../utils"
+
+/**
+ * Shadowed component with the following tweaks:
+ *   - Support pinning posts
+ */
+
+type BlogListItemProps = {
+  post: {
+    slug: string
+    title: string
+    date: string
+    excerpt: string
+    description: string
+    timeToRead?: number
+    tags?: {
+      name: string
+      slug: string
+    }[]
+  }
+  featured?: boolean
+  showTags?: boolean
+}
+
+const BlogListItem = ({ featured, post, showTags = true }: BlogListItemProps) => (
+  <Box mb={4}>
+    <Link to={post.slug} sx={(t) => ({ ...t.styles?.a, fontSize: [1, 2, 3], color: `text` })}>
+      { featured ? <Highlight>📌 {post.title}</Highlight> : post.title }
+    </Link>
+    <p sx={{ color: `secondary`, mt: 1, a: { color: `secondary` }, fontSize: [1, 1, 2] }}>
+      <time>{post.date}</time>
+      {post.tags && showTags && (
+        <React.Fragment>
+          {` — `}
+          <ItemTags tags={post.tags} />
+        </React.Fragment>
+      )}
+    </p>
+  </Box>
+)
+
+export default BlogListItem

src/@lekoarts/gatsby-theme-minimal-blog/components/homepage.tsx

@@ -1,15 +1,15 @@
 /** @jsx jsx */
 import { jsx, Text } from "theme-ui";
-import { ReactNode } from "react";
 import { HeadFC, Link } from "gatsby";
 import Layout from "@lekoarts/gatsby-theme-minimal-blog/src/components/layout";
 import Title from "@lekoarts/gatsby-theme-minimal-blog/src/components/title";
-import Listing from "@lekoarts/gatsby-theme-minimal-blog/src/components/listing";
+import Listing from "./listing";
 import useMinimalBlogConfig from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config";
 import useSiteMetadata from "@lekoarts/gatsby-theme-minimal-blog/src/hooks/use-site-metadata";
 import replaceSlashes from "@lekoarts/gatsby-theme-minimal-blog/src/utils/replaceSlashes";
 import { visuallyHidden } from "@lekoarts/gatsby-theme-minimal-blog/src/styles/utils";
 import Seo from "@lekoarts/gatsby-theme-minimal-blog/src/components/seo";
+import { Highlight } from "../utils"
 import Hero from "../texts/hero.mdx";
 
 /**
@@ -20,6 +20,7 @@ import Hero from "../texts/hero.mdx";
  *   - Remove <Bottom /> component (originally for "Projects" section in theme)
  *   - Turn "Read all posts" into "View all tags"
  *   - Hardcode hero section instead of using content from hero.mdx
+ *   - Support pinning posts
  */
 
 export type MBHomepageProps = {
@@ -34,13 +35,14 @@ export type MBHomepageProps = {
       name: string
       slug: string
     }[]
+    parent: {
+      frontmatter: {
+        [key: string]: any
+      }
+    }
   }[]
 }
 
-const Highlight = ({ children }: { children: ReactNode }) => {
-  return <strong style={{ color: "rgb(255, 146, 112)" }}>{children}</strong>;
-};
-
 const Homepage = ({ posts }: MBHomepageProps) => {
   const { basePath, tagsPath } = useMinimalBlogConfig()
   const { siteTitle } = useSiteMetadata()

src/@lekoarts/gatsby-theme-minimal-blog/components/listing.tsx

@@ -1,10 +1,11 @@
 /** @jsx jsx */
 import { jsx } from "theme-ui"
-import BlogListItem from "@lekoarts/gatsby-theme-minimal-blog/src/components/blog-list-item";
+import BlogListItem from "./blog-list-item";
 
 /**
  * Shadowed component with the following tweaks:
  *   - Lower margin-bottom
+ *   - Support pinning posts
  */
 
 type ListingProps = {
@@ -19,6 +20,11 @@ type ListingProps = {
       name: string
       slug: string
     }[]
+    parent: {
+      frontmatter: {
+        [key: string]: any
+      }
+    }
   }[]
   className?: string
   showTags?: boolean
@@ -27,7 +33,12 @@ type ListingProps = {
 const Listing = ({ posts, className = ``, showTags = true }: ListingProps) => (
   <section sx={{ mb: [3, 3, 3] }} className={className}>
     {posts.map((post) => (
-      <BlogListItem key={post.slug} post={post} showTags={showTags} />
+      <BlogListItem
+        key={post.slug}
+        featured={post.parent.frontmatter.featured}
+        post={post}
+        showTags={showTags}
+      />
     ))}
   </section>
 )

src/@lekoarts/gatsby-theme-minimal-blog/utils.tsx

@@ -0,0 +1,7 @@
+/** @jsx jsx */
+import { jsx } from 'theme-ui'
+import { ReactNode } from 'react'
+
+export const Highlight = ({ children }: { children: ReactNode }) => {
+  return <strong style={{ color: 'rgb(255, 146, 112)' }}>{children}</strong>
+}