-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4 from skunichetty/posts
Added extended support for posts
- Loading branch information
Showing
14 changed files
with
895 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { Metadata } from "next"; | ||
|
|
||
| export const metadata: Metadata = { | ||
| title: "Posts", | ||
| description: "All Blog Posts by Sachchit Kunichetty", | ||
| }; | ||
|
|
||
| interface LayoutProps { | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| export default function PostLayout({ children }: LayoutProps) { | ||
| return <div className="lg:mx-96 sm:mx-32 mx-10 block">{children}</div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,106 @@ | ||
| export default function AboutMe() { | ||
| return <div className="px-10">No posts yet - check back later!</div>; | ||
| import { readFile, readdir, lstat } from "fs/promises"; | ||
| import path from "path"; | ||
| import Link from "next/link"; | ||
| import { dateComparator } from "@/app/utils"; | ||
| import { PostMetadata } from "@/components/post"; | ||
| import { parse } from "yaml"; | ||
|
|
||
| interface RawPostMetadata { | ||
| title: string; | ||
| date: string; | ||
| editDate?: string; | ||
| author: string; | ||
| slug: string; | ||
| keywords: string[]; | ||
| description: string; | ||
| } | ||
|
|
||
| async function getPosts() { | ||
| const entries = await readdir("app/posts", { withFileTypes: true }); | ||
| const folders = entries | ||
| .filter((entry) => entry.isDirectory()) | ||
| .map((entry) => path.join(entry.parentPath, entry.name)); | ||
|
|
||
| const raw_metadata: RawPostMetadata[] = await Promise.all( | ||
| folders.map(async (folder) => { | ||
| const filename = `${folder}/page.mdx`; | ||
| const main = await readFile(filename); | ||
| const content = main.toString().split("\n"); | ||
|
|
||
| let index = 0; | ||
| if (content[index++] !== "---") { | ||
| console.error(`Invalid MDX file "${filename}": no frontmatter found`); | ||
| } else { | ||
| while (index < content.length && content[index] != "---") { | ||
| ++index; | ||
| } | ||
| return parse(content.slice(1, index).join("\n")); | ||
| } | ||
| }) | ||
| ); | ||
|
|
||
| return raw_metadata | ||
| .map((post) => { | ||
| let entry: PostMetadata = { | ||
| ...post, | ||
| date: new Date(post.date), | ||
| editDate: undefined, | ||
| }; | ||
| if (post.editDate != undefined) { | ||
| entry.editDate = new Date(post.editDate); | ||
| } | ||
| return entry; | ||
| }) | ||
| .sort((a, b) => { | ||
| return dateComparator(a.date, b.date, false); | ||
| }); | ||
| } | ||
|
|
||
| function PostInfo({ | ||
| title, | ||
| date, | ||
| editDate, | ||
| author, | ||
| slug, | ||
| description, | ||
| }: PostMetadata) { | ||
| return ( | ||
| <div className="block py-2"> | ||
| <Link | ||
| className="text-xl hover:text-blue-500 transition" | ||
| href={`/posts/${slug}`} | ||
| > | ||
| {title} | ||
| </Link> | ||
| <div className="flex flex-row gap-2 text-sm text-gray-600 dark:text-gray-400"> | ||
| <p>{date.toLocaleDateString()}</p> | ||
| {editDate != undefined ? ( | ||
| <p>(Edited {editDate.toLocaleDateString()})</p> | ||
| ) : null} | ||
| </div> | ||
| <div className="text-gray-600 dark:text-gray-400 text-sm mt-1"> | ||
| {description} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default async function PostMainPage() { | ||
| const posts = await getPosts(); | ||
| return ( | ||
| <div> | ||
| <h1 className="text-2xl font-bold">Posts</h1> | ||
| {posts.length === 0 ? ( | ||
| <p className="text-gray-600 dark:text-gray-400"> | ||
| No posts yet - check back later! | ||
| </p> | ||
| ) : ( | ||
| <div className="flex flex-col divide-y-2"> | ||
| {posts.map((post) => ( | ||
| <PostInfo key={post.slug} {...post} /> | ||
| ))} | ||
| </div> | ||
| )} | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export function dateComparator(a: Date, b: Date, ascending: boolean) { | ||
| let number = 0; | ||
| if (a < b) { | ||
| number = -1; | ||
| } else if (a > b) { | ||
| number = 1; | ||
| } | ||
| return ascending ? number : number * -1; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| "use client"; | ||
| import katex from "katex"; | ||
| import { MutableRefObject, useEffect, useRef } from "react"; | ||
|
|
||
| export interface PostMetadata { | ||
| title: string; | ||
| date: Date; | ||
| editDate?: Date; | ||
| author: string; | ||
| slug: string; | ||
| keywords: string[]; | ||
| description: string; | ||
| } | ||
|
|
||
| interface PostHeaderProps { | ||
| title: string; | ||
| date: Date; | ||
| } | ||
|
|
||
| interface CalloutProps { | ||
| emoji: string; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| interface ExampleProps { | ||
| emoji: string; | ||
| children: React.ReactNode; | ||
| } | ||
|
|
||
| interface BlockEquationProps { | ||
| latex: string; | ||
| } | ||
|
|
||
| export function PostHeader({ title, date }: PostHeaderProps) { | ||
| return ( | ||
| <div className="mb-4"> | ||
| <h1 className="text-5xl font-bold">{title}</h1> | ||
| <h4 className="text-sm text-gray-600 dark:text-gray-400"> | ||
| {date.toLocaleDateString()} | ||
| </h4> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function Callout({ emoji, children }: CalloutProps) { | ||
| return ( | ||
| <div className="flex flex-row items-center px-6 pb-5 pt-2 border-2 border-stone-900 dark:border-stone-100 my-4 mx-8 bg-stone-300 dark:bg-stone-900"> | ||
| <p className="text-2xl">{emoji}</p> | ||
| <div className="px-5 col-span-2">{children}</div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function Example({ children }: ExampleProps) { | ||
| return ( | ||
| <div className="px-6 py-5 border-2 border-blue-500 my-4 mx-8 bg-stone-300 dark:bg-stone-900"> | ||
| <p className="font-bold">Example:</p> | ||
| {children} | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export function BlockEquation({ latex }: BlockEquationProps) { | ||
| const body = useRef<HTMLDivElement>(null); | ||
|
|
||
| useEffect(() => { | ||
| if (body.current != null) { | ||
| katex.render(latex, body.current, { | ||
| displayMode: true, | ||
| }); | ||
| } | ||
| }); | ||
| return <div ref={body} className="mt-3 flex flex-row justify-center"></div>; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.