feat(blog): create pinned section on post list

mateusfg7 · Mar 4, 2024 · def488c · def488c
1 parent 9face6e
commit def488c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 4 deletions.
diff --git a/content/collections/posts.ts b/content/collections/posts.ts
@@ -16,6 +16,7 @@ export const posts = defineCollection({
         .transform(data => data.split(',').map(tag => tag.trim())),
       status: s.enum(['published', 'draft', 'planned']).default('draft'),
       test: s.boolean().default(false),
+      pinned: s.boolean().default(false),
       metadata: s.metadata(),
       toc: s.toc(),
       content: s.mdx(),

diff --git a/...º-p---programação-estruturada/exercícios-gti-1º-p---programação-estruturada.mdx b/...º-p---programação-estruturada/exercícios-gti-1º-p---programação-estruturada.mdx
@@ -5,6 +5,7 @@ description: 'Exercícios das aulas de Programação Estruturada, do curso GTI n
 category: 'Notes'
 tags: 'fapam,gti,exercícios,curso,faculdade,university,programming,visualg,portugol'
 status: 'published'
+pinned: true
 ---
 
 Esta é a lista de exercícios da matéria de **Programação Estruturada**, do curso de **Gestão de TI**, feito na [FAPAM - Faculdade de Pará de Minas](https://fapam.edu.br).

diff --git a/src/components/post-list/index.tsx b/src/components/post-list/index.tsx
@@ -3,6 +3,7 @@ import { getSortedPosts } from '~/lib/get-sorted-posts'
 
 import { categorizePostsByYear } from './categorize-posts-by-year'
 import { PostLink } from './post-link'
+import { PushPin } from '@phosphor-icons/react/dist/ssr'
 
 interface Props {
   posts: Post[]
@@ -16,13 +17,32 @@ export function PostList({ posts, separateByYear = false }: Props) {
   const testPosts = posts.filter(post => post.test)
 
   if (separateByYear) {
-    const postsByYear = categorizePostsByYear([
-      ...publishedPosts,
-      ...draftPosts
-    ])
+    const pinnedPosts = [...publishedPosts, ...draftPosts].filter(
+      post => post.pinned
+    )
+
+    const unpinnedPosts = [...publishedPosts, ...draftPosts].filter(
+      post => !post.pinned
+    )
+
+    const postsByYear = categorizePostsByYear(unpinnedPosts)
 
     return (
       <div className="flex flex-col gap-7">
+        {pinnedPosts.length > 0 && (
+          <div>
+            <h1 className="mb-5 flex items-center justify-between rounded-xl bg-neutral-100 p-3 text-2xl dark:bg-neutral-950">
+              <span>Pinned</span>
+              <PushPin size="1em" />
+            </h1>
+            <div className="flex flex-col gap-3">
+              {pinnedPosts.map((post, key) => (
+                <PostLink key={key} post={post} />
+              ))}
+            </div>
+          </div>
+        )}
+
         {postsByYear.map(postsOfYear => (
           <div key={postsOfYear.year}>
             <h1 className="mb-5 rounded-xl bg-neutral-100 p-3 text-center text-2xl font-bold dark:bg-neutral-950 md:text-left">