Skip to content

Commit 9102021

Browse files
ariflogsariflogs
authored
Merge pull request #37 from Logging-Stuff/blogs
Added blogs Blogs
2 parents bb9d652 + 1dee82b commit 9102021

File tree

17 files changed

+492
-38
lines changed

17 files changed

+492
-38
lines changed

‎.github/workflows/deploy.yml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ jobs:
2424

2525
- name: Build and push to DockerHub
2626
run: |
27-
docker build -t devarifhossain/retroui:1.0.12 ./
28-
docker push devarifhossain/retroui:1.0.12
27+
docker build -t devarifhossain/retroui:1.0.13 ./
28+
docker push devarifhossain/retroui:1.0.13
2929
3030
# - name: Set up SSH
3131
# uses: webfactory/[email protected]

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

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
openGraph: {
40+
images: blog.coverImage,
41+
title: `${blog.title} | RetroUI Blogs`,
42+
},
43+
};
44+
}
45+
46+
export default function page({ params }: IProps) {
47+
const blog = getBlogParams({ params });
48+
49+
if (!blog) {
50+
return notFound();
51+
}
52+
53+
if (!blog.publishedAt || blog.status !== "published") {
54+
return notFound();
55+
}
56+
57+
return (
58+
<div className="max-w-3xl mx-auto">
59+
<div className="border-b border-black pb-6 mb-6">
60+
<Text className="text-muted text-sm">
61+
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")}
62+
</Text>
63+
<Text as="h2" className="mb-2">
64+
{blog.title}
65+
</Text>
66+
<p className="text-lg text-muted mb-8">{blog.description}</p>
67+
<Image
68+
src={blog.coverImage}
69+
alt={blog.title}
70+
width={1200}
71+
height={800}
72+
className="mb-8"
73+
/>
74+
<div className="flex justify-between items-start">
75+
<div className="flex gap-4">
76+
<Avatar>
77+
<Avatar.Image src={blog.author.avatar} alt={blog.author.name} />
78+
<Avatar.Fallback>{blog.author.name}</Avatar.Fallback>
79+
</Avatar>
80+
<div>
81+
<Text as="h5">{blog.author.name}</Text>
82+
<Link
83+
href={`https://x.com/@${blog.author.x}`}
84+
target="_blank"
85+
className="text-muted"
86+
>
87+
@{blog.author.x}
88+
</Link>
89+
</div>
90+
</div>
91+
92+
<Link
93+
target="_blank"
94+
href={`https://x.com/share?url=${
95+
"https://retroui.dev" + blog.url
96+
}&text=${blog.title}.%0ACheck it out 👉`}
97+
>
98+
<Button size="sm" variant="outline">
99+
Share on X
100+
</Button>
101+
</Link>
102+
</div>
103+
</div>
104+
<MDX code={blog.body.code} type="blog" />
105+
</div>
106+
);
107+
}

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { Metadata } from "next";
2+
3+
export const metadata: Metadata = {
4+
title: "RetroUI Blogs",
5+
};
6+
7+
export default function BlogsLayout({
8+
children,
9+
}: Readonly<{
10+
children: React.ReactNode;
11+
}>) {
12+
return <div className="max-w-6xl mx-auto pt-12">{children}</div>;
13+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { allBlogs } from "@/.contentlayer/generated";
2+
import { Card, Text } from "@/packages/ui";
3+
import Image from "next/image";
4+
import Link from "next/link";
5+
import React from "react";
6+
7+
function page() {
8+
const blogs = allBlogs.filter((blog) => blog.status === "published");
9+
10+
return (
11+
<div>
12+
<Text as="h2" className="mb-12 text-center ">
13+
All RetroUI Blogs
14+
</Text>
15+
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:gap-8">
16+
{blogs.map((blog) => (
17+
<Link href={`${blog.url}`} key={blog._id}>
18+
<Card>
19+
<Card.Header>
20+
<Image
21+
src={blog.coverImage}
22+
alt={blog.title}
23+
width={600}
24+
height={400}
25+
className="mb-6"
26+
/>
27+
<Card.Title>{blog.title}</Card.Title>
28+
<Card.Description>{blog.description}</Card.Description>
29+
</Card.Header>
30+
</Card>
31+
</Link>
32+
))}
33+
</div>
34+
</div>
35+
);
36+
}
37+
38+
export default page;

‎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>

‎app/layout.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,13 @@ const shareTechMono = Share_Tech_Mono({
2525
});
2626

2727
export const metadata: Metadata = {
28-
title: "Retro Styled Tailwind UI Library | Retro UI",
28+
title: "Retro Styled React UI Library | Retro UI",
2929
description:
30-
"RetroUI - Retro styled TailwindCSS component library for modern web apps.",
30+
"RetroUI - Retro styled component library built with React and TailwindCSS for modern web apps.",
31+
openGraph: {
32+
images: "/banner.png",
33+
title: "Retro Styled React UI Library | Retro UI",
34+
},
3135
};
3236

3337
export default function RootLayout({
@@ -47,7 +51,7 @@ export default function RootLayout({
4751
<body
4852
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
4953
>
50-
<div className="relative z-40 mb-16">
54+
<div className="relative z-40 pb-16">
5155
<TopNav />
5256
</div>
5357
{children}

‎app/open-graph.png‎

-745 KB
Binary file not shown.

‎app/twitter-image.png‎

-745 KB
Binary file not shown.

‎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>

0 commit comments

Comments
 (0)