Skip to content

Commit 2bea5c8

Browse files
ariflogsariflogs
committed
blogs added
1 parent 75cbba5 commit 2bea5c8

File tree

10 files changed

+346
-89
lines changed

10 files changed

+346
-89
lines changed

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from "react";
2+
import { allBlogs } from "contentlayer/generated";
3+
import { notFound } from "next/navigation";
4+
import { format } from "date-fns";
5+
import MDX from "@/components/MDX";
6+
import { Avatar, Badge, Button, Text } from "@/packages/ui";
7+
import { Metadata } from "next";
8+
import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
9+
import Image from "next/image";
10+
import Link from "next/link";
11+
12+
interface IProps {
13+
params: { slug: string[] };
14+
}
15+
16+
function getBlogParams({ params }: IProps) {
17+
const url = `/blogs/${params.slug}`;
18+
const blog = allBlogs.find((blog) => blog.url === url);
19+
20+
if (!blog) {
21+
return null;
22+
}
23+
24+
return blog;
25+
}
26+
27+
export async function generateMetadata({ params }: IProps): Promise<Metadata> {
28+
const blog = getBlogParams({ params });
29+
30+
if (!blog) {
31+
return {
32+
title: "Not Found | Retro UI",
33+
};
34+
}
35+
36+
return {
37+
title: `${blog.title} | RetroUI Blogs`,
38+
description: blog.description,
39+
};
40+
}
41+
42+
export default function page({ params }: IProps) {
43+
const blog = getBlogParams({ params });
44+
45+
if (!blog) {
46+
return notFound();
47+
}
48+
49+
if (!blog.publishedAt || blog.status !== "published") {
50+
return notFound();
51+
}
52+
53+
return (
54+
<div className="max-w-3xl mx-auto">
55+
<div className="border-b border-black pb-6 mb-6">
56+
<Text className="text-muted text-sm">
57+
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
58+
</Text>
59+
<Text as="h2" className="mb-2">
60+
{blog.title}
61+
</Text>
62+
<p className="text-lg text-muted mb-8">{blog.description}</p>
63+
<Image
64+
src={blog.coverImage}
65+
alt={blog.title}
66+
width={1200}
67+
height={800}
68+
className="mb-8"
69+
/>
70+
<div className="flex justify-between items-start">
71+
<div className="flex gap-4">
72+
<Avatar>
73+
<Avatar.Image src={blog.author.avatar} alt={blog.author.name} />
74+
<Avatar.Fallback>{blog.author.name}</Avatar.Fallback>
75+
</Avatar>
76+
<div>
77+
<Text as="h5">{blog.author.name}</Text>
78+
<Link
79+
href={`https://x.com/@${blog.author.x}`}
80+
target="_blank"
81+
className="text-muted"
82+
>
83+
@{blog.author.x}
84+
</Link>
85+
</div>
86+
</div>
87+
88+
<Link
89+
target="_blank"
90+
href={`https://x.com/share?url=${
91+
"https://retroui.dev" + blog.url
92+
}&text=${blog.title}.%0ACheck it out 👉`}
93+
>
94+
<Button size="sm" variant="outline">
95+
Share on X
96+
</Button>
97+
</Link>
98+
</div>
99+
</div>
100+
<MDX code={blog.body.code} type="blog" />
101+
</div>
102+
);
103+
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ function page() {
1414
</Text>
1515
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
1616
{blogs.map((blog) => (
17-
<Link href={`${blog.url}`}>
18-
<Card key={blog._id}>
17+
<Link href={`${blog.url}`} key={blog._id}>
18+
<Card>
1919
<Card.Header>
2020
<Image
2121
src={blog.coverImage}

‎app/(marketing)/page.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export default async function Home() {
6363
<Link
6464
id="checkout-figma-kit"
6565
data-umami-event="checkout-figma-kit"
66-
href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
66+
href="https://dub.sh/retroui-figma"
6767
target="_blank"
6868
className="mb-6 inline-block"
6969
>
@@ -311,7 +311,7 @@ export default async function Home() {
311311
<Link
312312
id="checkout-figma-kit"
313313
data-umami-event="checkout-figma-kit"
314-
href="https://buy.polar.sh/polar_cl_lDjYITXPX3VSsoGl2UfxIZqiinJ9xVn4y9YAP1ApYcJ"
314+
href="https://dub.sh/retroui-figma"
315315
target="_blank"
316316
>
317317
<Button>Checkout Now</Button>

‎components/MDX.tsx

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,23 @@
22

33
import { Text } from "@/packages/ui";
44
import { useMDXComponent } from "next-contentlayer/hooks";
5-
import React, { HTMLAttributes } from "react";
5+
import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
66
import { ComponentShowcase } from "./ComponentShowcase";
77
import { cn } from "@/lib/utils";
88
import { ComponentSource } from "./ComponentSource";
99
import { CodeBlock } from "./CodeBlock";
10+
import Link from "next/link";
1011

11-
const components = {
12+
const components = (type: "doc" | "blog") => ({
1213
h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
1314
<Text as="h1" {...props} />
1415
),
15-
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
16-
<Text as="h2" className="border-b lg:text-3xl pb-1 mb-6" {...props} />
17-
),
16+
h2: (props: HTMLAttributes<HTMLHeadingElement>) =>
17+
type === "blog" ? (
18+
<Text as="h2" className="mb-4" {...props} />
19+
) : (
20+
<Text as="h2" className="border-b pb-1 mb-6" {...props} />
21+
),
1822
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
1923
<Text as="h3" className="mb-4" {...props} />
2024
),
@@ -23,6 +27,50 @@ const components = {
2327
),
2428
h5: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h5" {...props} />,
2529
h6: (props: HTMLAttributes<HTMLHeadElement>) => <Text as="h6" {...props} />,
30+
p: (props: HTMLAttributes<HTMLHeadElement>) =>
31+
type === "blog" ? (
32+
<Text {...props} className="text-lg text-zinc-600" />
33+
) : (
34+
<Text {...props} />
35+
),
36+
li: (props: HTMLAttributes<HTMLHeadElement>) =>
37+
type === "blog" ? (
38+
<Text
39+
as="li"
40+
{...props}
41+
className="text-lg text-zinc-600 ml-4 lg:ml-8 mb-2"
42+
/>
43+
) : (
44+
<Text as="li" {...props} />
45+
),
46+
img: (props: HTMLAttributes<HTMLImageElement>) => (
47+
<img className="mx-auto w-full max-w-[600px] my-8" {...props} />
48+
),
49+
a: (props: AnchorHTMLAttributes<HTMLAnchorElement>) => {
50+
const { href, target, rel, ...rest } = props;
51+
52+
if (!href) {
53+
return <a {...rest} />;
54+
}
55+
56+
const isExternal = href.startsWith("http");
57+
58+
return isExternal ? (
59+
<a
60+
href={href}
61+
target={target || "_blank"}
62+
rel={rel || "noopener noreferrer"}
63+
className="underline underline-offset-4 hover:decoration-primary-500"
64+
{...rest}
65+
/>
66+
) : (
67+
<Link
68+
href={href}
69+
className="underline underline-offset-4 hover:decoration-primary-500"
70+
{...rest}
71+
/>
72+
);
73+
},
2674
pre: CodeBlock,
2775
code: ({
2876
className,
@@ -41,10 +89,16 @@ const components = {
4189
),
4290
ComponentShowcase,
4391
ComponentSource,
44-
};
92+
});
4593

46-
export default function MDX({ code }: { code: string }) {
94+
export default function MDX({
95+
code,
96+
type = "doc",
97+
}: {
98+
code: string;
99+
type?: "doc" | "blog";
100+
}) {
47101
const Content = useMDXComponent(code);
48102

49-
return <Content components={components} />;
103+
return <Content components={components(type)} />;
50104
}

‎components/TopNav.tsx

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -29,12 +29,12 @@ export default function TopNav() {
2929
</div>
3030

3131
{/* Navigation Links */}
32-
<div className="hidden md:flex space-x-8">
32+
<div className="hidden md:flex space-x-6">
3333
{navConfig.topNavItems.map((item) => (
3434
<Link
3535
key={item.title}
3636
href={item.href}
37-
className="hover:text-primary-500 transition-all"
37+
className="hover:underline decoration-primary-500 underline-offset-2 transition-all"
3838
>
3939
{item.title}
4040
</Link>
@@ -47,13 +47,13 @@ export default function TopNav() {
4747
target="_blank"
4848
rel="noopener noreferrer"
4949
>
50-
<HeartIcon />
50+
<GithubIcon />
5151
</Link>
5252
<HamburgerMenu />
5353
</div>
5454

5555
<div className="hidden lg:flex items-center">
56-
{/* <Link
56+
<Link
5757
href="https://github.com/Logging-Stuff/retroui"
5858
target="_blank"
5959
rel="noopener noreferrer"
@@ -62,16 +62,6 @@ export default function TopNav() {
6262
<GithubIcon size="16" className="mr-2" />
6363
Star on GitHub
6464
</Button>
65-
</Link> */}
66-
<Link
67-
href="https://opencollective.com/retroui"
68-
target="_blank"
69-
rel="noopener noreferrer"
70-
>
71-
<Button className="flex items-center" size="sm" variant="outline">
72-
<HeartIcon size="16" className="mr-2" />
73-
Support Us
74-
</Button>
7565
</Link>
7666
</div>
7767
</div>

‎config/navigation.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const navConfig: INavigationConfig = {
77
topNavItems: [
88
{ title: "Documentation", href: "/docs" },
99
{ title: "Components", href: `${componentsRoute}/button` },
10+
{ title: "Blogs", href: "/blogs" },
1011
],
1112
sideNavItems: [
1213
{

0 commit comments

Comments
 (0)