Merge branch 'main' into project-status

app/projects/[id]/page.tsx

@@ -13,6 +13,7 @@ import { Markdown } from "@/components/ui/markdown"
 import { Icons } from "@/components/icons"
 import ProjectCard from "@/components/project/project-card"
 import { ProjectTags } from "@/components/project/project-detail-tags"
+import ProjectExtraLinks from "@/components/project/project-extra-links"
 
 type PageProps = {
   params: { id: string }
@@ -158,9 +159,12 @@ export default function ProjectDetailPage({ params }: PageProps) {
           <div className="mt-8">
             <ProjectTags project={currProject} />
           </div>
-          <div className="flex flex-col w-full gap-5 py-10 text-base font-normal leading-relaxed">
+          <div className="flex flex-col w-full gap-5 pt-10 text-base font-normal leading-relaxed">
             <Markdown>{currProject.description}</Markdown>
           </div>
+          <div className="py-16">
+            <ProjectExtraLinks project={currProject} />
+          </div>
         </div>
       </div>
       <DiscoverMoreProjects project={currProject} />

components/icons.tsx

@@ -112,6 +112,22 @@ export const Icons = {
       />
     </svg>
   ),
+  externalUrl: (props: LucideProps) => (
+    <svg
+      width="24"
+      height="25"
+      viewBox="0 0 24 25"
+      fill="currentColor"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        id="Vector"
+        d="M16.0034 9.5141L7.39642 18.1211L5.98242 16.7071L14.5884 8.1001H7.00342V6.1001H18.0034V17.1001H16.0034V9.5141Z"
+        fill="currentColor"
+      />
+    </svg>
+  ),
   arrowLeft: (props: LucideProps) => (
     <svg
       width="20"

components/project/project-extra-links.tsx

@@ -0,0 +1,96 @@
+import React from "react"
+import Link from "next/link"
+
+import {
+  ActionLinkTypeLink,
+  ProjectExtraLinkType,
+  ProjectInterface,
+} from "@/lib/types"
+
+import { Icons } from "../icons"
+
+const ExtraLinkLabelMapping: Record<
+  ProjectExtraLinkType,
+  {
+    label: string
+    icon?: any
+  }
+> = {
+  buildWith: {
+    label: "Build with this tool",
+    icon: <Icons.hammer />,
+  },
+  play: {
+    label: "Try it out!",
+    icon: <Icons.hand />,
+  },
+  research: {
+    label: "Dive deeper into the research",
+    icon: <Icons.readme />,
+  },
+  learn: {
+    label: "Learn more",
+  },
+}
+
+interface ProjectExtraLinksProps {
+  project: ProjectInterface
+}
+
+interface ExtraLinkItemsProps {
+  id: ProjectExtraLinkType
+  links: ActionLinkTypeLink[]
+}
+
+const ExtraLinkItems = ({ id, links = [] }: ExtraLinkItemsProps) => {
+  const { label, icon } = ExtraLinkLabelMapping[id]
+
+  if (!links.length) return null // no links hide the section
+
+  return (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center gap-2">
+        {icon && <span className="text-anakiwa-500">{icon}</span>}
+        <p className="font-sans text-xl font-medium text-tuatara-700">
+          {label}
+        </p>
+      </div>
+      <div className="flex flex-col items-start gap-2">
+        {links.map(({ label, url }: ActionLinkTypeLink) => {
+          return (
+            <Link
+              href={url}
+              target="_blank"
+              className="flex items-center gap-1 overflow-hidden font-sans font-normal duration-200 ease-in-out border-b-2 border-transparent cursor-pointer text-tuatara-950 hover:border-orange"
+            >
+              {label}
+              <Icons.externalUrl />
+            </Link>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default function ProjectExtraLinks({ project }: ProjectExtraLinksProps) {
+  const { extraLinks = {} } = project
+  const hasExtraLinks = Object.keys(extraLinks).length > 0
+
+  if (!hasExtraLinks) return null
+
+  return (
+    <div className="flex flex-col gap-12 md:gap-16">
+      {Object.entries(ExtraLinkLabelMapping).map(([key]) => {
+        const links = extraLinks[key as ProjectExtraLinkType] ?? []
+        return (
+          <ExtraLinkItems
+            key={key}
+            id={key as ProjectExtraLinkType}
+            links={links}
+          />
+        )
+      })}
+    </div>
+  )
+}

components/project/project-list.tsx

@@ -17,7 +17,8 @@ const NoResults = () => {
         No results found.
       </span>
       <span className="text-lg font-normal text-tuatara-950">
-        {`Sorry, we couldn't find any results for your search. Please try again with different keywords.`}
+        {`Sorry, we couldn't find any results for your search. Please try again
+        with different keywords.`}
       </span>
     </div>
   )

data/projects/README.md

@@ -0,0 +1,73 @@
+## Add new project to projects list
+
+1. Add new file inside `[...]/data/projects.ts` folder
+2. Add project details inside the file already created, to easily include all the required parameters make sure to use the `ProjectInterface`
+
+```js
+export const example: ProjectInterface = {
+  id: "example",
+  image: "",
+  name: "This is an example of the project",
+  tags: {
+    keywords: [],
+    themes: [],
+    types: [],
+    builtWith: [],
+  },
+}
+```
+
+3. Include the exported constant of the project in `projects.ts`
+
+## Show badges in the project card
+
+Badges can be set by setting the `themes` params, by looking at this example
+
+```js
+export const example: ProjectInterface = {
+  id: "example",
+  image: "",
+  name: "This is an example of the project",
+  tags: {
+    themes: ["play", "build"],
+  },
+}
+```
+
+This is the result
+
+![Project card badge](/public/project/example-project-badge.png)
+
+## Show links in project page detail
+
+To add extra link to projects we need to add `extraLinks` for the projects we are going to add links for.
+Make sure that for every "themes" value there is a specific "extraLinks" object will all the links.
+
+```js
+export const example: ProjectInterface = {
+  id: "example",
+  image: "",
+  name: "This is an example of the project",
+  tags: {
+    themes: ["play", "buildWith"],
+  },
+  extraLinks: {
+    buildWith: [
+      {
+        label: "Link to get started",
+        url: 'https://google.it"',
+      },
+    ],
+    play: [
+      {
+        label: "Link to get started",
+        url: 'https://google.it"',
+      },
+    ],
+  },
+}
+```
+
+This is the result
+
+![Project links](/public/project/example-project-extra-link.png)

lib/types.ts

@@ -1,3 +1,5 @@
+import { type } from "os"
+
 export interface NewsInterface {
   type: string
   title: string
@@ -17,15 +19,12 @@ export type ProjectLinkWebsite =
 
 export type ProjectLinkType = Partial<Record<ProjectLinkWebsite, string>>
 export type ProjectExtraLinkType = "buildWith" | "play" | "research" | "learn"
-
+export type ActionLinkTypeLink = {
+  label: string
+  url: string
+}
 export type ActionLinkType = Partial<
-  Record<
-    ProjectExtraLinkType,
-    Array<{
-      label: string
-      url: string
-    }>
-  >
+  Record<ProjectExtraLinkType, Array<ActionLinkTypeLink>>
 >
 
 export type ProjectStatusType = "active" | "inactive" | "archived"