-
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.
- Loading branch information
1 parent
7fd401b
commit 82c9bd8
Showing
2 changed files
with
72 additions
and
65 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import Image from "next/image"; | ||
|
|
||
| export const Article = ({ post }) => { | ||
|
|
||
| return ( | ||
| <div className="max-w-5xl xl:max-w-7xl xl:grid xl:grid-cols-[2fr_1fr] gap-12 mt-12 mb-24"> | ||
| <aside className="mb-12 xl:order-2"> | ||
| <Image | ||
| width="984" | ||
| height="554" | ||
| className="w-full rounded h-auto mb-6 xl:mb-12" | ||
| src={post.coverImage.url} | ||
| alt="" | ||
| /> | ||
| </aside> | ||
| <article className="w-full xl:order-1 mx-auto"> | ||
| <h1 className="text-4xl font-bold mb-8">{post.title}</h1> | ||
| <div className="max-w-3xl flex items-center gap-4 mb-8"> | ||
| <Image | ||
| width="48" | ||
| height="48" | ||
| className="w-12 h-auto rounded-full" | ||
| src={post.author.profilePicture} | ||
| alt="" | ||
| /> | ||
| <div> | ||
| <p className="text-lg font-bold mb-[.1rem]">{post.author.name}</p> | ||
| <ul className="flex gap-3"> | ||
| <li className="text-sm"> | ||
| <a | ||
| className="hover:underline hover:text-blue-500" | ||
| href="https://twitter.com/@ashishagr2024" | ||
| > | ||
| </a>{" "} | ||
| <a | ||
| className="hover:underline hover:text-blue-500" | ||
| href="https://github.com/ashishagarwal2023" | ||
| > | ||
| GitHub | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <p className="italic text-zinc-300 mb-6"> | ||
| Published on | ||
| {` `} | ||
| {new Date(post.publishedAt).toLocaleDateString("en-us", { | ||
| weekday: "long", | ||
| year: "numeric", | ||
| month: "short", | ||
| day: "numeric", | ||
| })} | ||
| </p> | ||
| <div | ||
| className="prose max-w-3xl prose-img:rounded text-white article_contents" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: post.content.html, | ||
| }} | ||
| /> | ||
| </article> | ||
| </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,85 +1,27 @@ | ||
| import Image from "next/image"; | ||
| import { getPostBySlug, getAllPostSlugs } from "@/lib/posts"; | ||
| import { Article } from "./components/Article"; | ||
|
|
||
| export async function generateStaticParams() { | ||
| const slugs = await getAllPostSlugs(); | ||
| return slugs.map((slug) => ({ | ||
| postSlug: slug | ||
| postSlug: slug, | ||
| })); | ||
| } | ||
|
|
||
| export async function generateMetadata({ | ||
| params, | ||
| }) { | ||
| export async function generateMetadata({ params }) { | ||
| const post = await getPostBySlug(params.postSlug); | ||
| return { | ||
| title: `${post.title} - Ashish Agarwal`, | ||
| description: post.seo?.description || `Read ${post.title} on Ashish Agarwal's Blog`, | ||
| description: | ||
| post.seo?.description || `Read ${post.title} on Ashish Agarwal's Blog`, | ||
| }; | ||
| } | ||
|
|
||
| export default async function Post({ params }) { | ||
| const post = await getPostBySlug(params.postSlug); | ||
| return ( | ||
| <> | ||
| <div className="max-w-5xl xl:max-w-7xl xl:grid xl:grid-cols-[2fr_1fr] gap-12 mt-12 mb-24"> | ||
| <aside className="mb-12 xl:order-2"> | ||
| <Image | ||
| width="984" | ||
| height="554" | ||
| className="w-full rounded h-auto mb-6 xl:mb-12" | ||
| src={post.coverImage.url} | ||
| alt="" | ||
| /> | ||
| </aside> | ||
| <article className="w-full xl:order-1 mx-auto"> | ||
| <h1 className="text-4xl font-bold mb-8">{post.title}</h1> | ||
| <div className="max-w-3xl flex items-center gap-4 mb-8"> | ||
| <Image | ||
| width="48" | ||
| height="48" | ||
| className="w-12 h-auto rounded-full" | ||
| src={post.author.profilePicture} | ||
| alt="" | ||
| /> | ||
| <div> | ||
| <p className="text-lg font-bold mb-[.1rem]">{post.author.name}</p> | ||
| <ul className="flex gap-3"> | ||
| <li className="text-sm"> | ||
| <a | ||
| className="hover:underline hover:text-blue-500" | ||
| href="https://twitter.com/@ashishagr2024" | ||
| > | ||
| </a> {" "} | ||
| <a | ||
| className="hover:underline hover:text-blue-500" | ||
| href="https://github.com/ashishagarwal2023" | ||
| > | ||
| GitHub | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| </div> | ||
| <p className="italic text-zinc-300 mb-6"> | ||
| Published on | ||
| {` `} | ||
| {new Date(post.publishedAt).toLocaleDateString("en-us", { | ||
| weekday: "long", | ||
| year: "numeric", | ||
| month: "short", | ||
| day: "numeric", | ||
| })} | ||
| </p> | ||
| <div | ||
| className="prose max-w-3xl prose-img:rounded text-white article_contents" | ||
| dangerouslySetInnerHTML={{ | ||
| __html: post.content.html, | ||
| }} | ||
| /> | ||
| </article> | ||
| </div> | ||
| <Article post={post} /> | ||
| </> | ||
| ); | ||
| } | ||
| } |