adding blog posts

harrisoncramer · Apr 30, 2024 · b0bb38b · b0bb38b
1 parent 75665f6
commit b0bb38b
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 10 deletions.
diff --git a/src/components/Blog.astro b/src/components/Blog.astro
@@ -0,0 +1,47 @@
+---
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import type { Document } from "@contentful/rich-text-types";
+import type { Asset } from "contentful";
+import Tags from "./Tags.astro";
+dayjs.extend(localizedFormat);
+
+interface Props {
+  title: string;
+  content: Document;
+  summary: string;
+  mainImage: Asset;
+  date: Date;
+  categories: Array<string>;
+  slug: string;
+}
+
+const {
+  title,
+  content,
+  summary,
+  mainImage,
+  date,
+  categories,
+  slug
+} = Astro.props;
+---
+
+<body>
+  <section
+    class="recipeInfo max-w-5xl m-auto flex flex-col items-center w-full my-6 lg:my-12 text-center mt-8 lg:mt- px-4"
+  >
+    <h1 class="font-display text-app-theme text-4xl lg:text-5xl mb-4">
+      {title}
+    </h1>
+    <time class="font-sans block mb-2">
+      <small>{date}</small>
+    </time>
+    <Tags tags={categories} />
+    <div class="my-4 md:flex gap-4 m-auto">
+      <img src={mainImage.fields.file?.url} />
+    </div>
+    <div set:html={summary} class="mb-6 md:mb-12 text-lg text-left" />
+    <article set:html={content} class="flex flex-col gap-4 text-left text-lg" />
+  </section>
+</body>
diff --git a/src/components/Toggle.astro b/src/components/Toggle.astro
@@ -13,16 +13,12 @@
         let visible = false;
         self?.addEventListener("click", () => {
           visible = !visible;
-          const node = document.querySelector(
-            ".toggle-content"
-          ) as HTMLElement;
+          const node = document.querySelector(".toggle-content") as HTMLElement;
           if (node) node.style.display = visible ? "block" : "none";
         });
 
         window.addEventListener("resize", () => {
-          const node = document.querySelector(
-            ".toggle-content"
-          ) as HTMLElement;
+          const node = document.querySelector(".toggle-content") as HTMLElement;
           const width = window.innerWidth;
           if (width >= 768) {
             if (node) node.style.display = "flex";

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
@@ -1,7 +1,73 @@
 ---
+import { Image } from "@astrojs/image/components";
+import { contentfulClient } from "../lib/contentful";
+import type { Document } from "@contentful/rich-text-types";
+import type { Asset } from "contentful";
+import dayjs from "dayjs";
+import localizedFormat from "dayjs/plugin/localizedFormat";
+import RecipeTitle from "../components/RecipeTitle.astro";
 import Layout from "../layouts/Layout.astro";
+
+interface Blog {
+  title: string;
+  mainImage: Asset;
+  date: Date;
+  summary: string;
+  content: Document;
+  slug: string;
+  categories: Array<string>;
+}
+
+dayjs.extend(localizedFormat);
+const entries = await contentfulClient.getEntries<Blog>({
+  content_type: "blog",
+});
+
+console.log(entries.items)
+
+const items = entries.items.map(({ fields }) => {
+  return {
+    ...fields,
+    date: dayjs(fields.date).format("LL"),
+  };
+});
 ---
 
 <Layout title="blog">
-  <div>There are no blog posts...yet</div>
+    <div class="blog-wrapper">
+      <h2 class="mt-8 px-2 text-app-theme">Blog Posts</h2>
+      <div class="grid pt-6 gap-6 gap-y-8 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 max-w-max m-auto">
+        {
+          items.map(({ title, description, mainImage, slug, date, summary }) => {
+            return (
+              <div class="flex flex-col">
+                <RecipeTitle title={title} />
+                <a href={`/blog/${slug}`}>
+                  <div class="relative group flex-1">
+                    {mainImage.fields.file?.url && (
+                      <Image
+                        height={420}
+                        aspectRatio={1}
+                        alt={title}
+                        src={mainImage.fields.file?.url}
+                        class="md:hover:cursor-pointer transition md:group-hover:opacity-20 duration-300 w-full object-cover h-full"
+                      />
+                    )}
+                  </div>
+                  <time class="font-sans block mb-2">
+                    <small>{date}</small>
+                    <p class="mt-2">{summary}</p>
+                  </time>
+                </a>
+              </div>
+            );
+          })
+        }
+      </div>
+    </div>
 </Layout>
+<style>
+.blog-wrapper {
+  max-width: 80em;
+}
+</style>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
@@ -0,0 +1,64 @@
+---
+import { richTextParser } from "../../utils";
+import type { Document } from "@contentful/rich-text-types";
+import dayjs from "dayjs";
+import type { Asset } from "contentful";
+import { contentfulClient } from "../../lib/contentful";
+import Blog from "../../components/Blog.astro";
+import Layout from "../../layouts/Layout.astro";
+
+interface Blog {
+  title: string;
+  mainImage: Asset;
+  date: Date;
+  summary: string;
+  content: Document;
+  slug: string;
+  categories: Array<string>;
+}
+
+export async function getStaticPaths() {
+  const entries = await contentfulClient.getEntries<Blog>({
+    content_type: "blog",
+  });
+  return entries.items.map(({ fields }) => {
+    return {
+      params: {
+        slug: fields.slug,
+      },
+      props: {
+        ...fields,
+        content: richTextParser(fields.content),
+        summary: richTextParser(fields.summary),
+        date: dayjs(fields.date).format("LL"),
+      },
+    };
+  });
+}
+
+const {
+  title,
+  content,
+  mainImage,
+  summary,
+  date,
+  categories,
+  ingredients,
+  optionalIngredients,
+  slug,
+} = Astro.props;
+---
+
+<Layout title={title}>
+  <Blog
+    title={title}
+    content={content}
+    mainImage={mainImage}
+    summary={summary}
+    date={date}
+    categories={categories}
+    ingredients={ingredients}
+    optionalIngredients={optionalIngredients}
+    slug={slug}
+  />
+</Layout>
diff --git a/src/pages/recipes.astro b/src/pages/recipes.astro
@@ -35,9 +35,7 @@ const items = entries.items.map(({ fields }) => {
 <Layout title="recipes">
   <div class="recipes-wrapper">
     <h2 class="mt-8 px-2 text-app-theme">Recipes</h2>
-    <div
-      class="grid pt-6 gap-6 gap-y-8 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 max-w-max m-auto"
-    >
+    <div class="grid pt-6 gap-6 gap-y-8 lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 max-w-max m-auto">
       {
         items.map(({ title, mainImage, slug }) => {
           return (