Add Option to Highlight Project

apps/content/schemas/project.ts

@@ -26,6 +26,12 @@ export const project = defineType({
       type: "boolean",
       initialValue: false,
     }),
+    defineField({
+      name: "highlight",
+      title: "Highlight",
+      type: "boolean",
+      initialValue: false,
+    }),
     defineField({
       name: "image",
       title: "Titelbild",

apps/website/src/app/projects/HighlightedProjects/HighlightedProjects.tsx

@@ -0,0 +1,11 @@
+import { ProjectsTeaser } from "../../../components/ProjectsTeaser/ProjectsTeaser";
+import { getProjects } from "../../../lib/queries";
+
+export const HighlightedProjects = async () => {
+  const projects = await getProjects();
+  const filteredProjects = projects.filter((project) => project.highlight);
+  if (filteredProjects.length === 0) return null;
+  return (
+    <ProjectsTeaser title="My Project Highlights" projects={filteredProjects} />
+  );
+};

apps/website/src/app/projects/page.tsx

@@ -9,6 +9,7 @@ import { getMetadata, getProjects } from "../../lib/queries";
 import { queryContent } from "../../lib/sanity";
 import { ProjectFilter } from "./ProjectFilter/ProjectFilter";
 import { ProjectList } from "./ProjectList/ProjectList";
+import { HighlightedProjects } from "./HighlightedProjects/HighlightedProjects";
 
 export const runtime = "edge";
 
@@ -94,6 +95,7 @@ const ProjectsPage = async ({ searchParams = {} }: Props) => {
 
   return (
     <div className="py-20 sm:py-32">
+      <HighlightedProjects />
       <Container inset>
         <div className="mb-20">
           <Heading className="mb-6 max-w-2xl">

apps/website/src/components/BlogTeaser/BlogTeaser.tsx

@@ -18,7 +18,7 @@ interface Props {
 export const BlogTeaser = async ({ title, description, blogPosts }: Props) => {
   const blogPostsToDisplay = blogPosts.slice(0, 2);
   return (
-    <Section id="blog" color="primary">
+    <Section id="blog-teaser" color="primary">
       <Heading as="h2" level="1" className="mb-6">
         {title}
       </Heading>

apps/website/src/components/ProjectsTeaser/ProjectsTeaser.tsx

@@ -0,0 +1,79 @@
+import { CalendarDays, Contact, Feather } from "lucide-react";
+import Link from "next/link";
+import { Heading } from "../../design-system/Heading/Heading";
+import { context } from "../../lib/projects";
+import { Project } from "../../lib/queries";
+import { ArticlePreview } from "../ArticlePreview/ArticlePreview";
+import { Section } from "../Section/Section";
+
+interface Props {
+  title: string;
+  projects: Array<Project>;
+}
+
+export const ProjectsTeaser = ({ title, projects }: Props) => {
+  return (
+    <Section id="projects-teaser" color="primary">
+      <Heading as="h2" level="1" className="mb-16">
+        {title}
+      </Heading>
+      <ul className="grid grid-cols-1 gap-x-14 gap-y-28 md:grid-cols-2">
+        {projects.map((project) => {
+          return (
+            <li key={project._id}>
+              <Link
+                href={`/projects/${project.slug}`}
+                className="transition-opacity hover:opacity-80"
+              >
+                <ArticlePreview
+                  title={project.title}
+                  titleImage={project.image}
+                  metaData={[
+                    ...(project._id.startsWith("drafts.")
+                      ? [
+                          {
+                            icon: Feather,
+                            text: "DRAFT",
+                          },
+                        ]
+                      : []),
+                    {
+                      icon: Contact,
+                      text: context(project.context, project.client || ""),
+                    },
+                    {
+                      icon: CalendarDays,
+                      text: project.period
+                        ? project.period
+                        : new Date(project.date).getFullYear().toString(),
+                    },
+                  ]}
+                  tags={[
+                    ...(project.services
+                      ? project.services.map(
+                          (service) =>
+                            ({
+                              outline: "solid",
+                              text: service.title,
+                            }) as const,
+                        )
+                      : []),
+                    ...(project.topics
+                      ? project.topics.map(
+                          (topic) =>
+                            ({
+                              outline: "dash",
+                              text: topic.title,
+                            }) as const,
+                        )
+                      : []),
+                  ]}
+                />
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </Section>
+  );
+};

apps/website/src/lib/queries.ts

@@ -309,6 +309,7 @@ const projectSchema = z.object({
   slug: z.string(),
   title: z.string(),
   hidden: z.boolean().nullable(),
+  highlight: z.boolean().nullable(),
   summary: z.string().nullable(),
   image: z.object({
     url: z.string(),
@@ -351,6 +352,7 @@ export const getProjects = async () => {
           'slug': slug.current,
           title,
           hidden,
+          highlight,
           summary,
           image{'url': asset->url, alt, border},
           context,
@@ -376,6 +378,7 @@ export const getProject = async (slug: string) => {
         'slug': slug.current,
         title,
         hidden,
+        highlight,
         summary,
         image{'url': asset->url, alt, border},
         context,