✨ Add Top Tags section

Sergei Orlow · Sergei Orlow · commit eb14d4f94812 · 2021-03-22T22:55:58.000+10:00
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -7,6 +7,7 @@ import { Layout } from '../layout'
 import { PostPreview } from '../components/post-preview'
 import Seo from '../components/seo'
 import SubscriptionForm from '../components/subscription-form'
+import { Labels } from '../components/labels'
 
 const List = styled.ul`
 	list-style: none;
@@ -17,7 +18,16 @@ const Index = ({ data }) => (
 	<Layout>
 		<Seo />
 		<Centralise>
-			<h1 itemProp='name headline'>Recent Posts</h1>
+			<div>
+				<h2>Top Tags</h2>
+				<Labels
+					from={data.tagsGroup.group
+						.sort((a, b) => b.totalCount - a.totalCount)
+						.slice(0, 5)
+						.map((tag) => tag.fieldValue)}
+				/>
+			</div>
+			<h2 itemProp='name headline'>Recent Posts</h2>
 			<List itemScope itemType='https://schema.org/ItemList'>
 				{data.allMarkdownRemark.edges.map(({ node }, i) => (
 					<li
@@ -56,5 +66,11 @@ export const query = graphql`
 				}
 			}
 		}
+		tagsGroup: allMarkdownRemark {
+			group(field: frontmatter___tags) {
+				fieldValue
+				totalCount
+			}
+		}
 	}
 `
