Merge pull request #1 from htlabs-xyz/project-page

draft commit

app/Main.tsx

@@ -1,5 +1,5 @@
-import Link from '@/components/Link'
-import Tag from '@/components/Tag'
+import Link from '@/components/ui/link'
+import Tag from '@/components/common/Tag'
 import siteMetadata from '@/data/siteMetadata'
 import { formatDate } from 'pliny/utils/formatDate'
 import NewsletterForm from 'pliny/ui/NewsletterForm'

app/members/page.tsx

@@ -1,5 +1,5 @@
 import { genPageMetadata } from 'app/seo'
-import MembersPage from '@/components/app/MembersPage'
+import MembersPage from '@/components/app/members'
 
 export const metadata = genPageMetadata({ title: 'Members' })
 export const dynamic = 'force-dynamic'

app/projects/[...slug]/page.tsx

@@ -46,10 +46,10 @@ export async function generateMetadata({
 
   return {
     title: post.title,
-    description: post.summary,
+    description: post.description,
     openGraph: {
       title: post.title,
-      description: post.summary,
+      description: post.description,
       siteName: siteMetadata.title,
       locale: 'en_US',
       type: 'article',
@@ -62,7 +62,7 @@ export async function generateMetadata({
     twitter: {
       card: 'summary_large_image',
       title: post.title,
-      description: post.summary,
+      description: post.description,
       images: imageList,
     },
   }

app/tag-data.json

@@ -1 +1 @@
-{ "github": 1, "guide": 1 }
+{"github":1,"guide":1}

components/app/MembersPage.tsx → components/app/members/index.tsx

@@ -1,5 +1,5 @@
 import { Member } from 'app/type'
-import MemberLayout from '@/layouts/MemberLayout'
+import MemberCard from '@/components/app/members/member-card'
 import { getGithubMembers } from 'actions/getGithubMember'
 
 export default async function MembersPage() {
@@ -17,7 +17,7 @@ export default async function MembersPage() {
           {allMembers.map((member: Member) => {
             return (
               <div key={member.github} className="p-4">
-                <MemberLayout member={member} />
+                <MemberCard member={member} />
               </div>
             )
           })}

layouts/MemberLayout.tsx → components/app/members/member-card.tsx

@@ -2,11 +2,7 @@ import Image from 'next/image'
 import SocialIcon, { icons } from '@/components/common/social-icons'
 import { Member } from 'app/type'
 
-interface Props {
-  member: Member
-}
-
-export default function MemberLayout({ member }: Props) {
+export default function MemberCard({ member }: { member: Member }) {
   const { name, github, avatar, company, website, location, email, bio, social } = member
   return (
     <div className="flex flex-col items-start space-y-2 xl:grid xl:grid-cols-3 xl:gap-x-8 xl:space-y-0">

components/app/projects/index.tsx

@@ -1,8 +1,7 @@
-import Card from '@/components/common/Card'
-import siteMetadata from '@/data/siteMetadata'
-import { allProjects } from 'contentlayer/generated'
+import { allProjects, Project } from '@/.contentlayer/generated'
+import ProjectCard from './project-card'
 
-export default function ProjectsPage() {
+export default async function ProjectsPage() {
   return (
     <>
       <div className="divide-y divide-gray-200 dark:divide-gray-700">
@@ -14,18 +13,14 @@ export default function ProjectsPage() {
             List of projects made or contributed by HTLabs team.
           </p>
         </div>
-        <div className="container py-12">
-          <div className="-m-4 flex flex-wrap justify-center">
-            {allProjects.map((d) => (
-              <Card
-                key={d.title}
-                title={d.title}
-                description={d.summary}
-                imgSrc={d.images ? d.images[0] : siteMetadata.socialBanner}
-                href={d.link ? d.link : `/projects/${d.slug}`}
-              />
-            ))}
-          </div>
+        <div className="flex flex-col gap-4">
+          {allProjects.map((project: Project) => {
+            return (
+              <div key={project.title} className="p-4">
+                <ProjectCard project={project} />
+              </div>
+            )
+          })}
         </div>
       </div>
     </>

components/app/projects/project-card.tsx

@@ -0,0 +1,70 @@
+import Image from 'next/image'
+import { Project } from '@/.contentlayer/generated'
+import { AspectRatio } from '@/components/ui/aspect-ratio'
+import { Card } from '@/components/ui/card'
+import Link from '@/components/ui/link'
+import { cn } from '@/utils'
+
+export default function ProjectCard({ project }: { project: Project }) {
+  const { title, slug, description, images, link } = project
+  const href = link ? link : `/projects/${slug}`
+  return (
+    <Card
+      className={cn([
+        'flex flex-col gap-6 p-4 md:h-80 md:flex-row md:gap-12 md:py-8',
+        // reversed && 'md:flex-row-reverse',
+      ])}
+    >
+      <div className="flex h-full items-center justify-center border-t-slate-600 p-4 sm:h-80 md:h-auto md:w-1/2">
+        {images && (
+          <AspectRatio ratio={16 / 9} className="bg-muted">
+            <Image
+              src={images[0]}
+              alt={title}
+              fill
+              className="h-full w-full rounded-md object-cover"
+            />
+          </AspectRatio>
+        )}
+      </div>
+      <div className="flex grow flex-col justify-between space-y-6 pb-1 md:w-1/2 md:pb-0">
+        <div className="space-y-4">
+          <h2 className="text-[1.75rem] font-semibold leading-8">
+            {href ? (
+              <Link href={href} aria-label={`Link to ${title}`}>
+                {title}
+              </Link>
+            ) : (
+              title
+            )}
+          </h2>
+          <div className="max-w-none space-y-4">
+            {/* <div className="flex flex-wrap items-center gap-2">
+              {builtWith?.map((tool) => {
+                return (
+                  <Brand
+                    key={tool}
+                    name={tool as keyof typeof BrandsMap}
+                    iconClassName={clsx(
+                      tool === 'Pygame' ? 'h-5 md:h-5.5' : 'h-5 w-5 md:h-5.5 md:w-5.5'
+                    )}
+                  />
+                )
+              })}
+            </div> */}
+            <p className="line-clamp-3 text-gray-600 dark:text-gray-400">{description}</p>
+          </div>
+        </div>
+        {href && (
+          <Link
+            href={href}
+            className="text-base font-medium leading-6 text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+            aria-label={`Link to ${title}`}
+          >
+            Show more &rarr;
+          </Link>
+        )}
+      </div>
+    </Card>
+  )
+}

components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'
+
+const AspectRatio = AspectRatioPrimitive.Root
+
+export { AspectRatio }

components/ui/card.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+
+import { cn } from '@/utils'
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('bg-card text-card-foreground rounded-lg border shadow-sm', className)}
+      {...props}
+    />
+  )
+)
+Card.displayName = 'Card'
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
+  )
+)
+CardHeader.displayName = 'CardHeader'
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+      {...props}
+    >
+      {props.children}
+    </h3>
+  )
+)
+CardTitle.displayName = 'CardTitle'
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+))
+CardDescription.displayName = 'CardDescription'
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
+  )
+)
+CardContent.displayName = 'CardContent'
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
+  )
+)
+CardFooter.displayName = 'CardFooter'
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/link.tsx

@@ -0,0 +1,23 @@
+/* eslint-disable jsx-a11y/anchor-has-content */
+import Link from 'next/link'
+import type { LinkProps } from 'next/link'
+import { AnchorHTMLAttributes } from 'react'
+
+const CustomLink = ({ href, ...rest }: LinkProps & AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const isInternalLink = href && href.startsWith('/')
+  const isAnchorLink = href && href.startsWith('#')
+
+  if (isInternalLink) {
+    return <Link className="break-words" href={href} {...rest} />
+  }
+
+  if (isAnchorLink) {
+    return <a className="break-words" href={href} {...rest} />
+  }
+
+  return (
+    <a className="break-words" target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+  )
+}
+
+export default CustomLink

contentlayer.config.ts

@@ -136,7 +136,7 @@ export const Project = defineDocumentType(() => ({
     link: { type: 'string' },
     lastmod: { type: 'date' },
     draft: { type: 'boolean' },
-    summary: { type: 'string' },
+    description: { type: 'string' },
     images: { type: 'json' },
     authors: { type: 'list', of: { type: 'string' } },
     layout: { type: 'string' },
@@ -152,7 +152,7 @@ export const Project = defineDocumentType(() => ({
         headline: doc.title,
         datePublished: doc.date,
         dateModified: doc.lastmod || doc.date,
-        description: doc.summary,
+        description: doc.description,
         image: doc.images ? doc.images[0] : siteMetadata.socialBanner,
         url: `${siteMetadata.siteUrl}/${doc._raw.flattenedPath}`,
       }),

data/projects/decentralized-metaverse-mall-dm.mdx

@@ -2,11 +2,8 @@
 title: 'Decentralized Metaverse Mall - DMM'
 date: '2024-02-17'
 tags: ['cardano', 'ideascale', 'fun8']
-summary: A functioning connection platform called Decentralized Metaverse Mall ( DMM) utilizing blockchain, metaverse, Web3, and partners' own Web 2.0 as online merchants, payment gateway, auction house to create the first Consume to Earn model ( C2E).
-images:
-  [
-    'https://projectcatalyst.io/api/project-og-image?payload=W1siRGVjZW50cmFsaXplZCBNZXRhdmVyc2UgTWFsbCAtIERNTSIsIiQ3NksiXSxbIkY4OiBEQXBwcyBhbmQgSW50ZWdyYXRpb25zIl1d',
-  ]
+description: A functioning connection platform called Decentralized Metaverse Mall ( DMM) utilizing blockchain, metaverse, Web3, and partners' own Web 2.0 as online merchants, payment gateway, auction house to create the first Consume to Earn model ( C2E).
+images: ['/static/images/projects/dmm.png']
 authors: ['independenceee']
 link: 'https://projectcatalyst.io/funds/8/f8-dapps-and-integrations/decentralized-metaverse-mall-dmm'
 ---