Skip to content

Commit

Permalink
feat: finish mvp of blog
Browse files Browse the repository at this point in the history
  • Loading branch information
dillionverma committed Jun 19, 2024
1 parent ab16718 commit bc50c40
Show file tree
Hide file tree
Showing 18 changed files with 1,518 additions and 35 deletions.
11 changes: 11 additions & 0 deletions content/hello-world.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: "Hello World"
publishedAt: "2024-06-18"
summary: "My first post on my new blog."
---

Hi there!

```jsx
console.log("Hello World");
```
4 changes: 3 additions & 1 deletion next.config.mjs
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {};
const nextConfig = {
reactStrictMode: true,
};

export default nextConfig;
12 changes: 11 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,28 @@
"@radix-ui/react-icons": "^1.3.0",
"@radix-ui/react-slot": "^1.0.2",
"@radix-ui/react-tooltip": "^1.0.7",
"@types/mdx": "^2.0.13",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"framer-motion": "^11.2.10",
"gray-matter": "^4.0.3",
"lucide-react": "^0.395.0",
"next": "14.2.4",
"next-themes": "^0.3.0",
"react": "^18",
"react-dom": "^18",
"react-markdown": "^9.0.1",
"rehype-pretty-code": "^0.13.2",
"rehype-stringify": "^10.0.0",
"remark-parse": "^11.0.0",
"remark-rehype": "^11.1.0",
"shiki": "^1.7.0",
"tailwind-merge": "^2.3.0",
"tailwindcss-animate": "^1.0.7"
"tailwindcss-animate": "^1.0.7",
"unified": "^11.0.4"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.13",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
Expand Down
990 changes: 990 additions & 0 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

102 changes: 102 additions & 0 deletions src/app/blog/[slug]/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
import { getPost } from "@/data/blog";
import { DATA } from "@/data/resume";
import { formatDate } from "@/lib/utils";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { Suspense } from "react";

export async function generateMetadata({
params,
}: {
params: {
slug: string;
};
}): Promise<Metadata | undefined> {
let post = await getPost(params.slug);

let {
title,
publishedAt: publishedTime,
summary: description,
image,
} = post.metadata;
let ogImage = image ? `${DATA.url}${image}` : `${DATA.url}/og?title=${title}`;

return {
title,
description,
openGraph: {
title,
description,
type: "article",
publishedTime,
url: `${DATA.url}/blog/${post.slug}`,
images: [
{
url: ogImage,
},
],
},
twitter: {
card: "summary_large_image",
title,
description,
images: [ogImage],
},
};
}

export default async function Blog({
params,
}: {
params: {
slug: string;
};
}) {
let post = await getPost(params.slug);

if (!post) {
notFound();
}

return (
<section id="blog">
<script
type="application/ld+json"
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: JSON.stringify({
"@context": "https://schema.org",
"@type": "BlogPosting",
headline: post.metadata.title,
datePublished: post.metadata.publishedAt,
dateModified: post.metadata.publishedAt,
description: post.metadata.summary,
image: post.metadata.image
? `${DATA.url}${post.metadata.image}`
: `${DATA.url}/og?title=${post.metadata.title}`,
url: `${DATA.url}/blog/${post.slug}`,
author: {
"@type": "Person",
name: DATA.name,
},
}),
}}
/>
<h1 className="title font-medium text-2xl tracking-tighter max-w-[650px]">
{post.metadata.title}
</h1>
<div className="flex justify-between items-center mt-2 mb-8 text-sm max-w-[650px]">
<Suspense fallback={<p className="h-5" />}>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
{formatDate(post.metadata.publishedAt)}
</p>
</Suspense>
</div>
<article
className="prose dark:prose-invert"
dangerouslySetInnerHTML={{ __html: post.source }}
></article>
</section>
);
}
46 changes: 46 additions & 0 deletions src/app/blog/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
import BlurFade from "@/components/magicui/blur-fade";
import { getBlogPosts } from "@/data/blog";
import Link from "next/link";

export const metadata = {
title: "Blog",
description: "My thoughts on software development, life, and more.",
};

const BLUR_FADE_DELAY = 0.04;

export default async function BlogPage() {
const posts = await getBlogPosts();

return (
<section>
<BlurFade delay={BLUR_FADE_DELAY}>
<h1 className="font-medium text-2xl mb-8 tracking-tighter">blog</h1>
</BlurFade>
{posts
.sort((a, b) => {
if (
new Date(a.metadata.publishedAt) > new Date(b.metadata.publishedAt)
) {
return -1;
}
return 1;
})
.map((post, id) => (
<BlurFade delay={BLUR_FADE_DELAY * 2 + id * 0.05} key={post.slug}>
<Link
className="flex flex-col space-y-1 mb-4"
href={`/blog/${post.slug}`}
>
<div className="w-full flex flex-col">
<p className="tracking-tight">{post.metadata.title}</p>
<p className="h-6 text-xs text-muted-foreground">
{post.metadata.publishedAt}
</p>
</div>
</Link>
</BlurFade>
))}
</section>
);
}
76 changes: 72 additions & 4 deletions src/app/globals.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind components;
@tailwind utilities;

@layer base {
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 210 11.1% 3.53%;
Expand Down Expand Up @@ -73,4 +73,72 @@
body {
@apply bg-background text-foreground;
}
}
}

h3 code {
@apply !text-lg md:!text-xl;
}

pre {
@apply !px-0 rounded-lg overflow-x-auto py-4
}

pre [data-line] {
@apply px-4
}

code {
@apply text-sm md:text-base !leading-loose;
}

pre > code {
counter-reset: line;
}

code[data-theme*=" "],
code[data-theme*=" "] span {
color: var(--shiki-light);
background-color: var(--shiki-light-bg);
}

@media (prefers-color-scheme: dark) {
code[data-theme*=" "],
code[data-theme*=" "] span {
color: var(--shiki-dark);
background-color: var(--shiki-dark-bg);
}
}

code[data-line-numbers] {
counter-reset: line;
}

code[data-line-numbers] > [data-line]::before {
counter-increment: line;
content: counter(line);
@apply inline-block w-4 mr-4 text-right text-gray-500;
}

code {
counter-reset: line;
}

code > [data-line]::before {
counter-increment: line;
content: counter(line);

/* Other styling */
display: inline-block;
width: 1rem;
margin-right: 2rem;
text-align: right;
color: gray;
}

code[data-line-numbers-max-digits="2"] > [data-line]::before {
width: 2rem;
}

code[data-line-numbers-max-digits="3"] > [data-line]::before {
width: 3rem;
}
10 changes: 7 additions & 3 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Navbar from "@/components/navbar";
import { ThemeProvider } from "@/components/theme-provider";
import { TooltipProvider } from "@/components/ui/tooltip";
import { DATA } from "@/data";
import { DATA } from "@/data/resume";
import { cn } from "@/lib/utils";
import type { Metadata } from "next";
import { Inter as FontSans } from "next/font/google";
Expand Down Expand Up @@ -56,12 +57,15 @@ export default function RootLayout({
<html lang="en" suppressHydrationWarning>
<body
className={cn(
"min-h-screen bg-background font-sans antialiased max-w-2xl mx-auto",
"min-h-screen bg-background font-sans antialiased max-w-2xl mx-auto py-12 sm:py-24 px-4",
fontSans.variable
)}
>
<ThemeProvider attribute="class" defaultTheme="light">
<TooltipProvider>{children}</TooltipProvider>
<TooltipProvider>
{children}
<Navbar />
</TooltipProvider>
</ThemeProvider>
</body>
</html>
Expand Down
19 changes: 5 additions & 14 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { HackathonCard } from "@/components/hackathon-card";
import BlurFade from "@/components/magicui/blur-fade";
import BlurFadeText from "@/components/magicui/blur-fade-text";
import { ModeToggle } from "@/components/mode-toggle";
import { ProjectCard } from "@/components/project-card";
import { ResumeCard } from "@/components/resume-card";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
Expand All @@ -11,16 +10,17 @@ import {
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { DATA } from "@/data";
import { DATA } from "@/data/resume";
import { MailIcon, PhoneIcon } from "lucide-react";
import Link from "next/link";
import Markdown from "react-markdown";

const BLUR_FADE_DELAY = 0.04;

export default function Page() {
return (
<>
<main className="flex flex-col min-h-[100dvh] space-y-10 py-12 sm:py-24 px-4">
<main className="flex flex-col min-h-[100dvh] space-y-10">
<section id="hero">
<div className="mx-auto w-full max-w-2xl space-y-8">
<div className="gap-2 flex justify-between">
Expand Down Expand Up @@ -115,9 +115,9 @@ export default function Page() {
<h2 className="text-xl font-bold">About</h2>
</BlurFade>
<BlurFade delay={BLUR_FADE_DELAY * 4}>
<p className="text-pretty text-sm text-muted-foreground">
<Markdown className="prose max-w-full text-pretty font-sans text-sm text-muted-foreground dark:prose-invert">
{DATA.summary}
</p>
</Markdown>
</BlurFade>
</section>
<section id="work">
Expand Down Expand Up @@ -278,15 +278,6 @@ export default function Page() {
</div>
</section>
</main>
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-50 mx-auto mb-4 flex">
<div
className={
"pointer-events-auto relative mx-auto flex h-full items-center rounded-lg px-0.5 bg-background [box-shadow:0_0_0_1px_rgba(0,0,0,.03),0_2px_4px_rgba(0,0,0,.05),0_12px_24px_rgba(0,0,0,.05)]transform-gpu dark:[border:1px_solid_rgba(255,255,255,.1)] dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset]"
}
>
<ModeToggle />
</div>
</div>
</>
);
}
Loading

0 comments on commit bc50c40

Please sign in to comment.