feat: notes and links

zpuckeridge · Oct 29, 2024 · 8591285 · 8591285
1 parent 98a57ad
commit 8591285
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 61 deletions.
diff --git a/...ng-or-no-thinking-at-all-just-an-acceptance-that-busy-is-where-we-should-be.mdx b/...ng-or-no-thinking-at-all-just-an-acceptance-that-busy-is-where-we-should-be.mdx
@@ -2,10 +2,8 @@
 title: Busyness, paradoxically, is a form of laziness. Lazy thinking, or no
   thinking at all. Just an acceptance that busy is where we should be
 date: 2024-08-27
-tag: Quote
-description: — Carl Phillips
-lastModified: 2024-08-27
-type: Post
+
+type: Note
 ---
 
-> "Busyness, paradoxically, is a form of laziness. Lazy thinking, or no thinking at all. Just an acceptance that busy is where we should be." — Carl Phillips
+"Busyness, paradoxically, is a form of laziness. Lazy thinking, or no thinking at all. Just an acceptance that busy is where we should be." — Carl Phillips
diff --git a/_content/church-is-an-icu-for-sinners.mdx b/_content/church-is-an-icu-for-sinners.mdx
@@ -1,9 +1,7 @@
 ---
 title: Church is an ICU for sinners
 date: 2024-09-06
-tag: Quote
-description: — Douglas Wilson
-type: Post
+type: Note
 ---
 
-> "Church is an ICU for sinners." — Douglas Wilson
+"Church is an ICU for sinners." — Douglas Wilson
diff --git a/_content/either-write-something-worth-reading-or-do-something-worth-writing.mdx b/_content/either-write-something-worth-reading-or-do-something-worth-writing.mdx
@@ -1,10 +1,7 @@
 ---
 title: Either write something worth reading or do something worth writing
 date: 2024-07-30
-tag: Quote
-description: — Benjamin Franklin
-lastModified: 2024-07-30
-type: Post
+type: Note
 ---
 
-> "Either write something worth reading or do something worth writing." — Benjamin Franklin
+"Either write something worth reading or do something worth writing." — Benjamin Franklin
diff --git a/app/timeline/page.tsx b/app/timeline/page.tsx
@@ -1,7 +1,7 @@
 import BlurFade from "@/components/magicui/blur-fade";
 import PostRendering from "@/components/posts";
 import { ArrowLeftIcon } from "@radix-ui/react-icons";
-import { allPosts } from "contentlayer/generated";
+import { allLinks, allNotes, allPosts } from "contentlayer/generated";
 import { compareDesc } from "date-fns";
 import { Metadata } from "next";
 import Link from "next/link";
@@ -13,12 +13,14 @@ export const metadata: Metadata = {
 };
 
 export default function Posts() {
-  const posts = allPosts
+  const allContent = [...allPosts, ...allNotes, ...allLinks];
+
+  const content = allContent
     .sort((a, b) => compareDesc(new Date(a.date), new Date(b.date)))
-    .reduce((acc: Record<number, any[]>, post: any) => {
-      const year = new Date(post.date).getFullYear();
+    .reduce((acc: Record<number, any[]>, item: any) => {
+      const year = new Date(item.date).getFullYear();
       if (!acc[year]) acc[year] = [];
-      acc[year].push(post);
+      acc[year].push(item);
       return acc;
     }, {});
 
@@ -43,7 +45,7 @@ export default function Posts() {
         </BlurFade>
 
         <BlurFade delay={0.3}>
-          <PostRendering postsByYear={posts} />
+          <PostRendering postsByYear={content} />
         </BlurFade>
 
         <Link

diff --git a/components/posts.tsx b/components/posts.tsx
@@ -9,7 +9,9 @@ interface Post {
   url: string;
   title: string;
   date: string;
-  tag: string; // Add tags to Post interface
+  tag: string;
+  type: string;
+  body: { raw: string };
 }
 
 interface PostsProps {
@@ -51,6 +53,28 @@ const PostRendering: React.FC<PostsProps> = ({ postsByYear }) => {
     return acc;
   }, {});
 
+  const Note = ({ post }: { post: Post }) => (
+    <div
+      key={post.url}
+      className={`bg-yellow-100 p-4 w-full rounded-xl space-y-2 selection:bg-yellow-200 selection:text-yellow-600 ${
+        isAnyPostHovered
+          ? "opacity-50 group-hover/item:opacity-100"
+          : "opacity-100"
+      } transition-opacity`}
+    >
+      <div className="text-xs text-muted-foreground text-yellow-600 flex justify-between">
+        <p>Note</p>
+        <p>
+          {new Date(post.date).toLocaleDateString("en-US", {
+            day: "2-digit",
+            month: "short",
+          })}
+        </p>
+      </div>
+      <p className="text-yellow-950">{post.body.raw}</p>
+    </div>
+  );
+
   return (
     <div className="flex flex-col w-full">
       <div className="space-y-2 mb-6">
@@ -95,48 +119,63 @@ const PostRendering: React.FC<PostsProps> = ({ postsByYear }) => {
       {Object.entries(filteredPostsByYear)
         .sort(([yearA], [yearB]) => Number(yearB) - Number(yearA))
         .map(([year, yearPosts]) => (
-          <div key={year} className="border-t border-muted flex w-full">
+          <div key={year} className="border-t border-muted text-sm flex w-full">
             <h2 className="text-muted-foreground w-[100px] py-3">{year}</h2>
             <div className="flex flex-col w-full">
-              {yearPosts.map((post: Post, index: number) => (
-                <Link
-                  key={post.url}
-                  href={`/timeline${post.url}`}
-                  className={`flex justify-between w-full py-3 gap-8 ${
-                    index === yearPosts.length - 1
-                      ? ""
-                      : "border-b border-muted"
-                  } group/item`}
-                  onMouseEnter={() => setIsAnyPostHovered(true)}
-                  onMouseLeave={() => setIsAnyPostHovered(false)}
-                >
-                  <div className="w-full">
-                    <p
-                      className={`${
-                        isAnyPostHovered
-                          ? "opacity-50 group-hover/item:opacity-100"
-                          : "opacity-100"
-                      } transition-opacity`}
-                    >
-                      {post.title}
-                    </p>
-                  </div>
-                  <div className="text-muted-foreground whitespace-nowrap">
-                    <span
-                      className={`${
-                        isAnyPostHovered
-                          ? "opacity-50 group-hover/item:opacity-100"
-                          : "opacity-100"
-                      } transition-opacity`}
-                    >
-                      {new Date(post.date).toLocaleDateString("en-US", {
-                        day: "2-digit",
-                        month: "short",
-                      })}
-                    </span>
+              {yearPosts.map((post: Post, index: number) =>
+                post.type === "Note" ? (
+                  <div
+                    key={post.url}
+                    className={`flex justify-between w-full py-3 gap-8 ${
+                      index === yearPosts.length - 1
+                        ? ""
+                        : "border-b border-muted"
+                    } group/item`}
+                    onMouseEnter={() => setIsAnyPostHovered(true)}
+                    onMouseLeave={() => setIsAnyPostHovered(false)}
+                  >
+                    <Note post={post} />
                   </div>
-                </Link>
-              ))}
+                ) : (
+                  <Link
+                    key={post.url}
+                    href={`/timeline${post.url}`}
+                    className={`flex justify-between w-full py-3 gap-8 ${
+                      index === yearPosts.length - 1
+                        ? ""
+                        : "border-b border-muted"
+                    } group/item`}
+                    onMouseEnter={() => setIsAnyPostHovered(true)}
+                    onMouseLeave={() => setIsAnyPostHovered(false)}
+                  >
+                    <div className="w-full">
+                      <p
+                        className={`${
+                          isAnyPostHovered
+                            ? "opacity-50 group-hover/item:opacity-100"
+                            : "opacity-100"
+                        } transition-opacity`}
+                      >
+                        {post.title}
+                      </p>
+                    </div>
+                    <div className="text-muted-foreground whitespace-nowrap">
+                      <span
+                        className={`${
+                          isAnyPostHovered
+                            ? "opacity-50 group-hover/item:opacity-100"
+                            : "opacity-100"
+                        } transition-opacity`}
+                      >
+                        {new Date(post.date).toLocaleDateString("en-US", {
+                          day: "2-digit",
+                          month: "short",
+                        })}
+                      </span>
+                    </div>
+                  </Link>
+                ),
+              )}
             </div>
           </div>
         ))}

diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -23,6 +23,27 @@ export const Post = defineDocumentType(() => ({
   },
 }));
 
+export const Note = defineDocumentType(() => ({
+  name: "Note",
+  filePathPattern: `notes/**/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: { type: "string", required: true },
+    date: { type: "date", required: true },
+  },
+}));
+
+export const Link = defineDocumentType(() => ({
+  name: "Link",
+  filePathPattern: `links/**/*.mdx`,
+  contentType: "mdx",
+  fields: {
+    title: { type: "string", required: true },
+    date: { type: "date", required: true },
+    url: { type: "string", required: true },
+  },
+}));
+
 export const Video = defineDocumentType(() => ({
   name: "Video",
   filePathPattern: `video/**/*.mdx`,
@@ -45,7 +66,7 @@ export const Video = defineDocumentType(() => ({
 
 export default makeSource({
   contentDirPath: "_content",
-  documentTypes: [Post, Video],
+  documentTypes: [Post, Video, Note, Link],
   mdx: {
     remarkPlugins: [remarkGfm],
   },