Merge pull request #19 from ansidev/feature/component-post-item

Feature: Component PostItem

Author: ansidev

src/components/AppFooter.astro

@@ -17,7 +17,7 @@ const socialNetworks: Record<string, string> = {
 }
 ---
 
-<footer class="my-9 text-primary">
+<footer class="my-9 text-style-primary">
  <div class="flex justify-center items-center mb-3">
  <a href={`mailto:${email}`} class="footer-icon">
  <Icon name={'bi:envelope-fill'} size={32} />
@@ -59,6 +59,6 @@ const socialNetworks: Record<string, string> = {
 
 <style>
  a.footer-icon {
- @apply text-primary hover:text-secondary mx-1;
+ @apply text-style-primary hover:text-style-secondary mx-1;
  }
 </style>

src/components/Card.astro

@@ -0,0 +1,27 @@
+---
+import Icon from '@/components/Icon.astro'
+
+export interface Props {
+ title: string
+ href: string
+}
+
+const { title, href } = Astro.props
+---
+
+<a href={href}>
+ <div class="post-item flex items-center justify-between">
+ <div>
+ <h2>{title}</h2>
+ </div>
+ <span class="px-2"><Icon name="bi:arrow-right" /></span>
+ </div>
+</a>
+
+<style lang="scss">
+ .post-item {
+ @apply mx-3 my-2 p-3;
+ @apply border-2 border-solid border-style-primary;
+ @apply hover:bg-style-primary text-style-secondary hover:text-style-primary-inverted;
+ }
+</style>

src/components/post/PostItem.astro

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "3. Longest Substring Without Repeating Characters"
 slug: "0003-longest-substring-without-repeating-characters"
 keywords:

src/content/leetcode-solutions/0003-longest-substring-without-repeating-characters.md

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "8. String to Integer (atoi)"
 slug: "0008-string-to-integer-atoi"
 keywords:

src/content/leetcode-solutions/0008-string-to-integer-atoi.md

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "53. Maximum Subarray"
 slug: "0053-maximum-subarray"
 keywords:

src/content/leetcode-solutions/0053-maximum-subarray.md

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "231. Power of Two"
 slug: "0231-power-of-two"
 keywords:

src/content/leetcode-solutions/0231-power-of-two.md

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "628. Maximum Product of Three Numbers"
 slug: "0628-maximum-product-of-three-numbers"
 keywords:

src/content/leetcode-solutions/0628-maximum-product-of-three-numbers.md

@@ -1,5 +1,4 @@
 ---
-layout: "../layouts/Post.astro"
 title: "2400. Number of Ways to Reach a Position After Exactly k Steps"
 slug: "2400-number-of-ways-to-reach-a-position-after-exactly-k-steps"
 keywords:

src/content/leetcode-solutions/2400-number-of-ways-to-reach-a-position-after-exactly-k-steps.md

@@ -1,9 +1,13 @@
 ---
-import Card from '@/components/Card.astro'
+import { getCollection } from 'astro:content'
+
+import PostItem from '@/components/post/PostItem.astro'
 import siteConfig from '@/configs/site'
 import AppLayout from '@/layouts/AppLayout.astro'
 
 const { title, description, author } = siteConfig
+
+const allPosts = await getCollection('leetcode-solutions')
 ---
 
 <AppLayout
@@ -12,28 +16,13 @@ const { title, description, author } = siteConfig
  author={author.name}
  headerCssClasses="max-w-xl px-8"
 >
- <main class="mx-auto my-4 p-4 max-w-2xl text-site-header-text">
- <ul role="list" class="grid grid-cols-1 md:grid-cols-2 gap-4">
- <Card
- href="https://docs.astro.build/"
- title="Documentation"
- body="Learn how Astro works and explore the official API docs."
- />
- <Card
- href="https://astro.build/integrations/"
- title="Integrations"
- body="Supercharge your project with new frameworks and libraries."
- />
- <Card
- href="https://astro.build/themes/"
- title="Themes"
- body="Explore a galaxy of community-built starter themes."
- />
- <Card
- href="https://astro.build/chat/"
- title="Community"
- body="Come say hi to our amazing Discord community. ❤️"
- />
- </ul>
+ <main class="mx-auto my-4 p-4 max-w-xl text-site-header-text">
+ <div role="list" class="grid grid-cols-1 gap-4">
+ {
+ allPosts.map((p) => (
+ <PostItem href={`/${p.slug}`} title={p.data.title} />
+ ))
+ }
+ </div>
  </main>
 </AppLayout>