Merge pull request #449 from 1chooo/feat/portfolio

Author: 1chooo

apps/web/src/app/mock/page.tsx

@@ -37,7 +37,7 @@ export async function generateMetadata({
       description,
       type: 'article',
       publishedTime,
-      url: `https://1chooo.com/mock/${post.slug}`,
+      url: `https://1chooo.com/portfolio/${post.slug}`,
       locale: 'en_US',
       images: [
         {

apps/web/src/app/mock/[slug]/page.tsx apps/web/src/app/portfolio/[slug]/page.tsx

@@ -1,13 +1,13 @@
-'use client';
-
-import React, { useEffect } from 'react';
-import { usePathname } from 'next/navigation';
-import PageContent from '@/components/page-content';
-import Projects from '@/components/portfolio/projects';
-import { initializeCustomSelect, filterItemsByCategory } from '@/lib/utils/dom-utils';
-import config from '@/config';
-
-const { title } = config;
+import Link from "next/link";
+import Image from "next/image";
+import PageHeader from "@/components/page-header";
+import FilterSelectBox from "@/components/portfolio/v2/filter-select-box";
+import FilterList from "@/components/portfolio/v2/filter-list";
+import MarkdownRenderer from "@/components/markdown/markdown-renderer";
+import { getPortfolioPosts } from "@/lib/db/portfolio";
+import config from "@/config";
+import { LuEye } from "react-icons/lu";
+import "react-loading-skeleton/dist/skeleton.css";
 
 /**
  * TODO: #257
@@ -17,28 +17,104 @@ const { title } = config;
  * };
  */
 
-const Portfolio = () => {
-  const pathname = usePathname();
+const { title } = config;
+const POSTS_PER_PAGE = 9;
+
+export const metadata = {
+  title: `Portfolio | ${title}`,
+  description: "Read my thoughts on software development, design, and more.",
+};
+
+export default function Portfolio({
+  searchParams,
+}: {
+  searchParams: { tag?: string; page?: string };
+}) {
+  let allBlogs = getPortfolioPosts();
+  const blogTags = [
+    "All",
+    ...Array.from(
+      new Set(allBlogs.map((post) => post.metadata.category ?? ""))
+    ),
+  ];
+  const selectedTag = searchParams.tag || "All";
+  const currentPage = parseInt(searchParams.page || "1", 10);
 
-  useEffect(() => {
-    initializeCustomSelect(filterItemsByCategory);
-  }, []);
+  // Filter blogs based on the selected tag
+  const filteredBlogs =
+    selectedTag === "All"
+      ? allBlogs
+      : allBlogs.filter((post) => post.metadata.category === selectedTag);
+
+  // Sort blogs by date
+  const sortedBlogs = filteredBlogs.sort((a, b) => {
+    if (new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)) {
+      return -1;
+    }
+    return 1;
+  });
+
+  // Calculate total pages
+  const totalPages = Math.ceil(sortedBlogs.length / POSTS_PER_PAGE);
+
+  // Get blogs for current page
+  const paginatedBlogs = sortedBlogs.slice(
+    (currentPage - 1) * POSTS_PER_PAGE,
+    currentPage * POSTS_PER_PAGE
+  );
 
   return (
-    /**
-     * TODO: #257
-     * update the document title see (#341)
-     */
-    <PageContent
-      documentTitle='Portfolio'
-      title={title}
-      header="Hugo's Portfolio"
-      page="portfolio"
-      pathName={pathname}
-    >
-      <Projects />
-    </PageContent>
+    <article>
+      <PageHeader header="Hugo's Portfolio" />
+      <section className="projects">
+        <FilterList selectedTag={selectedTag} blogTags={blogTags} />
+        <FilterSelectBox selectedTag={selectedTag} blogTags={blogTags} />
+        <ul className="project-list">
+          {paginatedBlogs.map((post, index) => (
+            <li
+              key={index}
+              className="project-item active"
+              data-category={post.metadata.category}
+            >
+              <Link href={`/portfolio/${post.slug}`} rel="noopener noreferrer">
+                <figure className="project-img">
+                  <div className="project-item-icon-box">
+                    <LuEye />
+                  </div>
+                  <Image
+                    src={post.metadata.banner}
+                    alt={post.metadata.alt || "Portfolio post image"}
+                    width={1600}
+                    height={900}
+                    priority={true}
+                    placeholder="empty"
+                    loading="eager"
+                  />
+                </figure>
+                <h3 className="project-title"><MarkdownRenderer content={post.metadata.title} /></h3>
+                <p className="project-category">{post.metadata.category}</p>
+              </Link>
+            </li>
+          ))}
+        </ul>
+        <div className="pagination">
+          {Array.from({ length: totalPages }, (_, i) => i + 1).map(
+            (pageNum) => (
+              <Link
+                key={pageNum}
+                href={{
+                  pathname: "/portfolio",
+                  query: { ...searchParams, page: pageNum.toString() },
+                }}
+                className={`pagination-btn ${pageNum === currentPage ? "active" : ""
+                  }`}
+              >
+                {pageNum}
+              </Link>
+            )
+          )}
+        </div>
+      </section>
+    </article>
   );
 }
-
-export default Portfolio;

apps/web/src/app/portfolio/page.tsx

@@ -1,19 +1,26 @@
-/*
- * Go to https://github.com/leerob/site/blob/1129b6d81937cef493edb060f87e6f2ac9f335ed/app/sitemap.ts to see details
- */
-
 import { getBlogPosts } from '@/lib/db/blog';
+import { getPortfolioPosts } from '@/lib/db/portfolio';
 
+/**
+ * This function returns an array of objects with the URL and last modified date
+ * @see https://github.com/leerob/site/blob/1129b6d81937cef493edb060f87e6f2ac9f335ed/app/sitemap.ts
+ * @returns [{ url: string, lastModified: string }]
+ */
 export default async function sitemap() {
   let blogs = getBlogPosts().map((post) => ({
     url: `https://1chooo.com/blog/${post.slug}`,
     lastModified: post.metadata.publishedAt,
   }));
 
+  let portfolios = getPortfolioPosts().map((post) => ({
+    url: `https://1chooo.com/portfolio/${post.slug}`,
+    lastModified: post.metadata.publishedAt,
+  }));
+
   let routes = ['', '/resume', '/portfolio', '/blog', '/contact'].map((route) => ({
     url: `https://1chooo.com${route}`,
     lastModified: new Date().toISOString().split('T')[0],
   }));
 
-  return [...routes, ...blogs];
+  return [...routes, ...blogs, ...portfolios];
 }