Add LCD Blog Post Teaser (#28)

timoclsn · Oct 21, 2023 · 1050c78 · 1050c78 · vercel · Oct 21, 2023
1 parent 25a06a1
commit 1050c78
Show file tree

Hide file tree

Showing 11 changed files with 228 additions and 338 deletions.
diff --git a/apps/website/src/app/(home)/NewBlogPosts/NewBlogPosts.tsx b/apps/website/src/app/(home)/NewBlogPosts/NewBlogPosts.tsx
@@ -0,0 +1,13 @@
+import { BlogTeaser } from "../../../components/BlogTeaser/BlogTeaser";
+import { getBlogPosts } from "../../../lib/queries";
+
+export const NewBlogPosts = async () => {
+  const blogPosts = await getBlogPosts();
+  return (
+    <BlogTeaser
+      title="Blog"
+      description="Irregular writing on UX Design, Life-centered Design, and more..."
+      blogPosts={blogPosts}
+    />
+  );
+};
diff --git a/apps/website/src/app/(home)/page.tsx b/apps/website/src/app/(home)/page.tsx
@@ -1,9 +1,9 @@
 import { MyClients } from "../../components/MyClients/MyClients";
 import { createGenerateMetadata } from "../../lib/metadata";
-import { BlogTeaser } from "./BlogTeaser/BlogTeaser";
 import { Header } from "./Header/Header";
 import { HomeAccordion } from "./HomeAccordion/HomeAccordion";
 import { LcdTeaser } from "./LcdTeaser/LcdTeaser";
+import { NewBlogPosts } from "./NewBlogPosts/NewBlogPosts";
 
 export const generateMetadata = createGenerateMetadata(async () => ({
   other: {
@@ -17,7 +17,7 @@ const Home = async () => {
       <Header />
       <HomeAccordion />
       <LcdTeaser />
-      <BlogTeaser />
+      <NewBlogPosts />
       <MyClients />
     </div>
   );

diff --git a/apps/website/src/app/blog/[slug]/page.tsx b/apps/website/src/app/blog/[slug]/page.tsx
@@ -1,37 +1,16 @@
 import { format } from "date-fns";
 import { CalendarDays, Clock, Feather, User } from "lucide-react";
-import { groq } from "next-sanity";
 import readingTime from "reading-time";
-import { z } from "zod";
 import { ArticleHeader } from "../../../components/ArticleHeader/ArticleHeader";
 import { MDXContent } from "../../../components/MDXContent/MDXContent";
 import { StructuredData } from "../../../components/StructuredData/StructuredData";
 import { Container } from "../../../design-system/Container/Container";
 import { createGenerateMetadata, ogImage } from "../../../lib/metadata";
-import { queryContent } from "../../../lib/sanity";
+import { getBlogPost, getBlogPosts } from "../../../lib/queries";
 
 export const generateMetadata = createGenerateMetadata(async ({ params }) => {
   const { slug } = params;
-  const { title, summary, date, image, content } = await queryContent(
-    groq`
-      *[_type == 'blogPost' && slug.current == '${slug}'][0]
-      {
-        title,
-        date,
-        summary,
-        'image': image.asset->url,
-        content,
-      }
-    `,
-    z.object({
-      title: z.string(),
-      date: z.string(),
-      summary: z.string().nullable(),
-      image: z.string(),
-      content: z.string(),
-    }),
-  );
-
+  const { title, summary, date, image, content } = await getBlogPost(slug);
   const stats = readingTime(content);
 
   return {
@@ -50,7 +29,7 @@ export const generateMetadata = createGenerateMetadata(async ({ params }) => {
         url: ogImage({
           overline: "Blog • Katharina Clasen",
           headline: title,
-          image,
+          image: image.url,
           readingTime: `${Math.ceil(stats.minutes)} min`,
           date: format(new Date(date), "LLLL dd, yyyy"),
         }),
@@ -70,20 +49,7 @@ export const generateMetadata = createGenerateMetadata(async ({ params }) => {
 });
 
 export const generateStaticParams = async () => {
-  const blogPosts = await queryContent(
-    groq`
-      *[_type == 'blogPost']
-      {
-        'slug': slug.current
-      }
-    `,
-    z.array(
-      z.object({
-        slug: z.string(),
-      }),
-    ),
-  );
-
+  const blogPosts = await getBlogPosts();
   return blogPosts.map((blogPost) => ({
     slug: blogPost.slug,
   }));
@@ -97,52 +63,7 @@ interface Props {
 
 const BlogPostPage = async ({ params }: Props) => {
   const { slug } = params;
-  const blogPost = await queryContent(
-    groq`
-      *[_type == 'blogPost' && slug.current == '${slug}'][0]
-      {
-        _id,
-        'slug': slug.current,
-        title,
-        summary,
-        image{'url': asset->url, alt, border},
-        author,
-        date,
-        services[]->{title},
-        topics[]->{title},
-        content
-      }
-    `,
-    z.object({
-      _id: z.string(),
-      slug: z.string(),
-      title: z.string(),
-      summary: z.string().nullable(),
-      image: z.object({
-        url: z.string(),
-        alt: z.string(),
-        border: z.boolean().nullable(),
-      }),
-      author: z.string(),
-      date: z.string(),
-      services: z
-        .array(
-          z.object({
-            title: z.string(),
-          }),
-        )
-        .nullable(),
-      topics: z
-        .array(
-          z.object({
-            title: z.string(),
-          }),
-        )
-        .nullable(),
-      content: z.string(),
-    }),
-  );
-
+  const blogPost = await getBlogPost(slug);
   const stats = readingTime(blogPost.content);
   return (
     <>

diff --git a/apps/website/src/app/blog/page.tsx b/apps/website/src/app/blog/page.tsx
@@ -1,14 +1,11 @@
 import { format } from "date-fns";
 import { CalendarDays, Clock, Feather, User } from "lucide-react";
-import { groq } from "next-sanity";
 import Link from "next/link";
 import readingTime from "reading-time";
-import { z } from "zod";
 import { ArticlePreview } from "../../components/ArticlePreview/ArticlePreview";
 import { Container } from "../../design-system/Container/Container";
 import { createGenerateMetadata, ogImage } from "../../lib/metadata";
-import { getMetadata } from "../../lib/queries";
-import { queryContent } from "../../lib/sanity";
+import { getBlogPosts, getMetadata } from "../../lib/queries";
 
 export const generateMetadata = createGenerateMetadata(async () => {
   const {
@@ -43,51 +40,7 @@ export const generateMetadata = createGenerateMetadata(async () => {
 });
 
 const BlogPage = async () => {
-  const blogPosts = await queryContent(
-    groq`
-      *[_type == 'blogPost']
-      {
-        _id,
-        title,
-        'slug': slug.current,
-        image{'url': asset->url, alt, border},
-        author,
-        date,
-        services[]->{title},
-        topics[]->{title},
-        content
-      } | order(date desc)
-    `,
-    z.array(
-      z.object({
-        _id: z.string(),
-        title: z.string(),
-        slug: z.string(),
-        image: z.object({
-          url: z.string(),
-          alt: z.string(),
-          border: z.boolean().nullable(),
-        }),
-        author: z.string(),
-        date: z.string(),
-        services: z
-          .array(
-            z.object({
-              title: z.string(),
-            }),
-          )
-          .nullable(),
-        topics: z
-          .array(
-            z.object({
-              title: z.string(),
-            }),
-          )
-          .nullable(),
-        content: z.string(),
-      }),
-    ),
-  );
+  const blogPosts = await getBlogPosts();
   return (
     <div className="py-20 sm:py-32">
       <Container inset>

diff --git a/apps/website/src/app/lifecentereddesign/LcdBlogPosts/LcdBlogPosts.tsx b/apps/website/src/app/lifecentereddesign/LcdBlogPosts/LcdBlogPosts.tsx
@@ -0,0 +1,18 @@
+import { BlogTeaser } from "../../../components/BlogTeaser/BlogTeaser";
+import { getBlogPosts } from "../../../lib/queries";
+
+export const LcdBlogPosts = async () => {
+  const blogPosts = await getBlogPosts();
+  const lcdBlogPosts = blogPosts.filter(
+    (blogPost) =>
+      blogPost.topics?.some((topic) => topic.title === "Life-centered Design"),
+  );
+
+  return (
+    <BlogTeaser
+      title="Blog"
+      description="Blog Posts about Life-centered Design"
+      blogPosts={lcdBlogPosts}
+    />
+  );
+};
diff --git a/apps/website/src/app/lifecentereddesign/page.tsx b/apps/website/src/app/lifecentereddesign/page.tsx
@@ -2,6 +2,7 @@ import { createGenerateMetadata, ogImage } from "../../lib/metadata";
 import { getMetadata } from "../../lib/queries";
 import { Header } from "./Header/Header";
 import { LcdAccordion } from "./LcdAccordion/LcdAccordion";
+import { LcdBlogPosts } from "./LcdBlogPosts/LcdBlogPosts";
 import { LcdJourney } from "./LcdJourney/LcdJourney";
 import { LcdPrinciples } from "./LcdPrinciples/LcdPrinciples";
 import { LcdThinking } from "./LcdThinking/LcdThinking";
@@ -50,6 +51,7 @@ const LcdPage = () => {
       <WhatIsLcd />
       <MyLCDProjects />
       <LcdPrinciples />
+      <LcdBlogPosts />
       <LcdJourney />
       <LcdAccordion />
       <LcdThinking />

diff --git a/apps/website/src/app/projects/ProjectList/ProjectList.tsx b/apps/website/src/app/projects/ProjectList/ProjectList.tsx
@@ -4,10 +4,11 @@ import { ArticlePreview } from "../../../components/ArticlePreview/ArticlePrevie
 import { AutoAnimate } from "../../../components/AutoAnimate/AutoAnimate";
 import { Heading } from "../../../design-system/Heading/Heading";
 import { context } from "../../../lib/projects";
-import { Filter, Projects, Sort } from "../page";
+import { Project } from "../../../lib/queries";
+import { Filter, Sort } from "../page";
 
 interface Props {
-  projects: Projects;
+  projects: Array<Project>;
   filter?: Filter;
   sort?: Sort;
 }