feat: add cover images to posts

docs/posts/contribute-mozilla.md

@@ -1,6 +1,7 @@
 ---
 title: "How to contribute to Mozilla"
-date: "2021-02-20"
+date: "2024-12-25"
+cover: "/covers/mozilla-hero.avif"
 ---
 
 As a [Mozilla Rep][1], I get this question often, specially from students.

docs/posts/kubectl.md

@@ -0,0 +1,17 @@
+```sh
+getpods() {
+	OUTPUT+="$(kubectl get pods -n dashboard | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n frontend-graphql | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n sme-dashboard | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n api | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n ufh | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n pgos | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n onboarding | grep ${1:-abhijeet})\n";
+	OUTPUT+="$(kubectl get pods -n asv | grep ${1:-abhijeet})\n";
+	echo ${OUTPUT} | column -t;
+}
+
+watchpods() {
+	watch "zsh -c 'source ~/.zshrc; getpods ${1:-abhijeet}'"
+}
+```

src/Posts/components/PostListItem.tsx

@@ -19,6 +19,8 @@ export function PostListItem({ postData }: PostListItemProps) {
           {frontMatter.title}
         </Typography>
 
+        <img src={frontMatter.cover} alt="cover" />
+
         {/* TODO: This is a use-case where we need the Typography styles 
         but we can't use the Typography component because it needs to render
         as a <time> element which has different props. Ideally the classNames