Skip to content

Commit 68097bd

Browse files
ariflogsariflogs
authored
Merge pull request #65 from Logging-Stuff/top-nextjs-blog
added nextjs blog
2 parents 6021105 + fdb71f6 commit 68097bd

File tree

8 files changed

+466
-44
lines changed

8 files changed

+466
-44
lines changed

‎app/(marketing)/blogs/[slug]/page.tsx‎

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { Metadata } from "next";
88
import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
99
import Image from "next/image";
1010
import Link from "next/link";
11-
11+
import Footer from "@/components/footer";
1212
interface IProps {
1313
params: { slug: string[] };
1414
}
@@ -55,12 +55,32 @@ export default function page({ params }: IProps) {
5555
}
5656

5757
return (
58-
<div className="max-w-3xl mx-auto">
58+
<div className="max-w-3xl mt-8 mx-auto">
5959
<div className="border-b border-black pb-6 mb-6">
60-
<Text className="text-muted-foreground text-sm">
61-
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
62-
</Text>
63-
<Text as="h2" className="mb-2">
60+
<div className="flex items-center gap-4 mb-6">
61+
<Text className="text-muted-foreground text-sm font-medium">
62+
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
63+
</Text>
64+
<Text>|</Text>
65+
<div className="flex items-center gap-3">
66+
{blog.tags.map((tag) => (
67+
<Badge
68+
key={tag}
69+
size="sm"
70+
variant="surface"
71+
className={`bg-${
72+
["red", "green", "blue", "yellow", "purple", "pink"][
73+
blog.tags.indexOf(tag) % 6
74+
]
75+
}-300`}
76+
>
77+
{tag}
78+
</Badge>
79+
))}
80+
</div>
81+
</div>
82+
83+
<Text as="h1" className="mb-2">
6484
{blog.title}
6585
</Text>
6686
<p className="text-lg text-muted-foreground mb-8">
@@ -81,13 +101,24 @@ export default function page({ params }: IProps) {
81101
</Avatar>
82102
<div>
83103
<Text as="h5">{blog.author.name}</Text>
84-
<Link
85-
href={`https://x.com/@${blog.author.x}`}
86-
target="_blank"
87-
className="text-muted-foreground"
88-
>
89-
@{blog.author.x}
90-
</Link>
104+
{blog.author.linkedin && (
105+
<Link
106+
href={`https://www.linkedin.com/in/${blog.author.linkedin}`}
107+
target="_blank"
108+
className="text-muted-foreground"
109+
>
110+
@{blog.author.linkedin}
111+
</Link>
112+
)}
113+
{blog.author.x && (
114+
<Link
115+
href={`https://x.com/@${blog.author.x}`}
116+
target="_blank"
117+
className="text-muted-foreground"
118+
>
119+
@{blog.author.x}
120+
</Link>
121+
)}
91122
</div>
92123
</div>
93124

‎app/(marketing)/blogs/layout.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Metadata } from "next";
2-
2+
import Footer from "@/components/footer";
33
export const metadata: Metadata = {
44
title: "RetroUI Blogs",
55
};
@@ -9,5 +9,10 @@ export default function BlogsLayout({
99
}: Readonly<{
1010
children: React.ReactNode;
1111
}>) {
12-
return <div className="max-w-6xl mx-auto pt-12 px-4 lg:px-0">{children}</div>;
12+
return (
13+
<>
14+
<div className="max-w-6xl mx-auto py-12 px-4 lg:px-0">{children}</div>
15+
<Footer />
16+
</>
17+
);
1318
}

‎app/(marketing)/page.tsx‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
} from "lucide-react";
2323
import Image from "next/image";
2424
import Link from "next/link";
25-
25+
import Footer from "@/components/footer";
2626
async function getContributors(): Promise<
2727
{ avatar: string; username: string; url: string }[]
2828
> {
@@ -429,32 +429,7 @@ export default async function Home() {
429429
</div>
430430
</section>
431431

432-
<footer className="bg-black py-8">
433-
<div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
434-
<div className="flex justify-center space-x-4">
435-
<a href="https://twitter.com/ariflogs" className="text-primary">
436-
Twitter
437-
</a>
438-
<a
439-
href="https://github.com/Logging-Stuff/retroui"
440-
className="text-primary"
441-
>
442-
GitHub
443-
</a>
444-
<a href="/docs" className="text-primary">
445-
Documentation
446-
</a>
447-
</div>
448-
449-
<p className="text-gray-300 text-sm">
450-
Built by{" "}
451-
<a href="https://twitter.com/ariflogs" className="text-primary">
452-
Arif Hossain
453-
</a>
454-
.
455-
</p>
456-
</div>
457-
</footer>
432+
<Footer />
458433
</main>
459434
);
460435
}

‎components/MDX.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const components = (type: "doc" | "blog") => ({
1818
),
1919
h2: (props: HTMLAttributes<HTMLHeadingElement>) =>
2020
type === "blog" ? (
21-
<Text as="h2" className="mb-4" {...props} />
21+
<Text as="h2" className="mb-4 mt-8" {...props} />
2222
) : (
2323
<Text as="h2" className="border-b pb-1 mb-6" {...props} />
2424
),

‎components/footer.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
export default function Footer() {
2+
return (
3+
<footer className="bg-black py-8">
4+
<div className="container max-w-6xl mx-auto flex flex-col lg:flex-row space-y-4 lg:space-y-0 justify-between items-center">
5+
<div className="flex justify-center space-x-4">
6+
<a href="https://twitter.com/ariflogs" className="text-primary">
7+
Twitter
8+
</a>
9+
<a
10+
href="https://github.com/Logging-Stuff/retroui"
11+
className="text-primary"
12+
>
13+
GitHub
14+
</a>
15+
<a href="/docs" className="text-primary">
16+
Documentation
17+
</a>
18+
</div>
19+
20+
<p className="text-gray-300 text-sm">
21+
Built by{" "}
22+
<a href="https://twitter.com/ariflogs" className="text-primary">
23+
Arif Hossain
24+
</a>
25+
.
26+
</p>
27+
</div>
28+
</footer>
29+
);
30+
}

0 commit comments

Comments
 (0)