Skip to content

Commit 1b4fcb1

Browse files
ariflogsariflogs
authored
Merge pull request #13 from ariflogs/new-install-guide
New install guide
2 parents c8d7479 + 0942b2d commit 1b4fcb1

25 files changed

+403
-65
lines changed

‎.github/workflows/deploy.yml

+3-3
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.02 ./
28-
docker push devarifhossain/retroui:1.02
27+
docker build -t devarifhossain/retroui:1.03 ./
28+
docker push devarifhossain/retroui:1.03
2929
3030
- name: Set up SSH
3131
uses: webfactory/ssh-agent@v0.9.0
@@ -38,4 +38,4 @@ jobs:
3838
3939
- name: Deploy to VPS
4040
run: |
41-
ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up -d"
41+
ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"

‎app/(docs)/docs/[[...slug]]/page.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,8 @@ export default function page({ params }: IProps) {
4444
}
4545

4646
return (
47-
<div className="space-y-12 pb-8">
48-
<div>
47+
<div className="space-y-12 py-8">
48+
<div className="border-b border-black pb-4">
4949
<H2>{doc.title}</H2>
5050
<p className="text-lg text-muted">{doc.description}</p>
5151
</div>

‎app/(docs)/docs/layout.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,11 @@ export default function ComponentLayout({
1111
children: React.ReactNode;
1212
}>) {
1313
return (
14-
<div className="relative">
14+
<div className="relative max-w-6xl mx-auto">
1515
<div className="hidden lg:block">
1616
<SideNav />
1717
</div>
18-
<div className="lg:ml-72 mt-20 px-4">{children}</div>
18+
<div className="lg:ml-72 mt-16">{children}</div>
1919
</div>
2020
);
21-
}
21+
}

‎app/(sink)/demo/components/page.tsx

+17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {
2+
Avatar,
23
Badge,
34
Button,
45
Tabs,
@@ -24,6 +25,22 @@ export default function page() {
2425
<Badge variant="filled">Badge</Badge>
2526
</div>
2627

28+
<div className="flex items-center space-x-4">
29+
<Avatar>
30+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
31+
<Avatar.Fallback>AH</Avatar.Fallback>
32+
</Avatar>
33+
34+
<Avatar className="rounded-none">
35+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
36+
<Avatar.Fallback>AH</Avatar.Fallback>
37+
</Avatar>
38+
39+
<Avatar className="rounded-none h-20 w-20">
40+
<Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
41+
<Avatar.Fallback>AH</Avatar.Fallback>
42+
</Avatar>
43+
</div>
2744
<div>
2845
<Tabs>
2946
<TabsTriggerList>

‎app/layout.tsx

+1-11
Original file line numberDiff line numberDiff line change
@@ -25,16 +25,6 @@ export const metadata: Metadata = {
2525
title: "Retro Styled Tailwind UI Library | Retro UI",
2626
description:
2727
"RetroUI - Retro styled TailwindCSS component library for modern web apps.",
28-
openGraph: {
29-
images: ["/banner.png"],
30-
},
31-
twitter: {
32-
card: "summary_large_image",
33-
title: "Retro Styled Tailwind UI Library | Retro UI",
34-
description:
35-
"RetroUI - Retro styled TailwindCSS component library for modern web apps.",
36-
images: ["/banner.png"],
37-
},
3828
};
3929

4030
export default function RootLayout({
@@ -54,7 +44,7 @@ export default function RootLayout({
5444
<body
5545
className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
5646
>
57-
<div className="mb-20 relative z-10">
47+
<div className="relative z-10">
5848
<TopNav />
5949
</div>
6050
{children}

‎app/open-graph.png

441 KB
Loading

‎app/twitter-image.png

441 KB
Loading

‎components/ComponentShowcase.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,20 @@ import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
44
import React, { HTMLAttributes } from "react";
55

66
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
7-
name: keyof typeof componentConfig.registry;
7+
name: keyof typeof componentConfig.examples;
88
}
99

1010
export function ComponentShowcase({ name, children }: IComponentShowcase) {
11-
const { preview: Preview } = componentConfig.registry[name];
11+
const { preview: Preview } = componentConfig.examples[name];
1212
const Code = React.Children.toArray(children)[0];
1313

1414
return (
1515
<TabGroup>
1616
<TabList className="space-x-4 ">
17-
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
17+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
1818
Preview
1919
</Tab>
20-
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
20+
<Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
2121
Code
2222
</Tab>
2323
</TabList>

‎components/ComponentSource.tsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { cn } from "@/lib/utils";
2+
3+
interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
4+
src: string;
5+
}
6+
7+
export function ComponentSource({ children, className }: ComponentSourceProps) {
8+
return (
9+
<div className={cn("overflow-hidden rounded-md", className)}>
10+
{children}
11+
</div>
12+
);
13+
}

‎components/MDX.tsx

+9-3
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,19 @@ import { useMDXComponent } from "next-contentlayer/hooks";
33
import React, { HTMLAttributes } from "react";
44
import { ComponentShowcase } from "./ComponentShowcase";
55
import { cn } from "@/lib/utils";
6+
import { ComponentSource } from "./ComponentSource";
67

78
const components = {
89
h1: H1,
910
h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
10-
<H2 className="mb-2" {...props} />
11+
<H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
12+
),
13+
h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
14+
<H3 className="mb-4" {...props} />
15+
),
16+
h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
17+
<H4 className="mb-2" {...props} />
1118
),
12-
h3: H3,
13-
h4: H4,
1419
h5: H5,
1520
h6: H6,
1621
pre: ({
@@ -44,6 +49,7 @@ const components = {
4449
</code>
4550
),
4651
ComponentShowcase,
52+
ComponentSource,
4753
};
4854

4955
export default function MDX({ code }: { code: string }) {

‎components/SideNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import Link from "next/link";
55
export default function SideNav() {
66
return (
77
<div
8-
className={`fixed top-16 left-0 border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white z-50`}
8+
className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white`}
99
>
10-
<nav className="flex flex-col items-start p-6 space-y-4">
10+
<nav className="flex flex-col items-start pr-6 space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
1313
<H6>{item.title}</H6>

‎config/components.ts

+25-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
import { lazy } from "react";
22

33
export const componentConfig = {
4-
registry: {
4+
core: {
5+
avatar: {
6+
name: "avatar",
7+
filePath: "packages/ui/Avatars/Avatar.tsx",
8+
},
9+
button: {
10+
name: "button",
11+
filePath: "packages/ui/Buttons/Button.tsx",
12+
},
13+
},
14+
examples: {
515
"accordion-style-default": {
616
name: "accordion-style-default",
717
filePath: "preview/components/accordion-style-default.tsx",
@@ -14,6 +24,20 @@ export const componentConfig = {
1424
filePath: "preview/components/avatar-style-circle.tsx",
1525
preview: lazy(() => import("@/preview/components/avatar-style-circle")),
1626
},
27+
"avatar-style-circle-fallbacks": {
28+
name: "avatar-style-fallbacks",
29+
filePath: "preview/components/avatar-style-circle-fallbacks.tsx",
30+
preview: lazy(
31+
() => import("@/preview/components/avatar-style-circle-fallbacks")
32+
),
33+
},
34+
"avatar-style-circle-sizes": {
35+
name: "avatar-style-circle-sizes",
36+
filePath: "preview/components/avatar-style-circle-sizes.tsx",
37+
preview: lazy(
38+
() => import("@/preview/components/avatar-style-circle-sizes")
39+
),
40+
},
1741
"badge-style-default": {
1842
name: "badge-style-default",
1943
filePath: "preview/components/badge-style-default.tsx",

‎content/docs/components/avatar.mdx

+37-4
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,44 @@
11
---
22
title: Avatar
33
description: Default rounded avatar that can show your users profile picture. ✨
4-
lastUpdated: 08 Oct, 2024
4+
lastUpdated: 12 Oct, 2024
55
---
66

7-
### Circle
7+
<ComponentShowcase name="avatar-style-circle" />
8+
<br />
9+
<br />
10+
11+
## Installation
12+
13+
#### 1. Install dependencies:
14+
15+
```sh
16+
npm install @radix-ui/react-avatar
17+
```
818

9-
<hr />
1019
<br />
11-
<ComponentShowcase name="avatar-style-circle" />
20+
21+
#### 2. Copy the code 👇 into your project:
22+
23+
<ComponentSource name="avatar" />
24+
25+
<br />
26+
<br />
27+
28+
## Examples
29+
30+
### Size variants
31+
32+
<ComponentShowcase name="avatar-style-circle-sizes" />
33+
34+
<br />
35+
<br />
36+
37+
### Fallbacks
38+
39+
Fallbacks are helpfull when there ia an error loading the src of the avatar.
40+
You can set fallbacks with `Avatar.Fallback` component.
41+
42+
<br />
43+
44+
<ComponentShowcase name="avatar-style-circle-fallbacks" />

‎content/docs/components/button.mdx

+23-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,31 @@
11
---
22
title: Button
33
description: This bold button makes sure your users click on it and perform the actions you want! 🚀
4-
lastUpdated: 30 Sep, 2024
4+
lastUpdated: 12 Oct, 2024
55
---
66

7-
### Default
7+
<ComponentShowcase name="button-style-default" />
8+
<br />
9+
<br />
10+
11+
## Installation
12+
13+
#### 1. Install dependencies:
14+
15+
```sh
16+
npm install class-variance-authority
17+
```
818

9-
<hr />
1019
<br />
20+
21+
#### 2. Copy the code 👇 into your project:
22+
23+
<ComponentSource name="button" />
24+
<br />
25+
<br />
26+
27+
## Examples
28+
29+
### Default
30+
1131
<ComponentShowcase name="button-style-default" />

‎contentlayer.config.ts

+38-2
Original file line numberDiff line numberDiff line change
@@ -31,15 +31,51 @@ export default makeSource({
3131
rehypePlugins: [
3232
() => (tree) => {
3333
visit(tree, (node: UnistNode) => {
34+
if (node.name === "ComponentSource" && node.attributes) {
35+
const name = getNodeAttributeByName(node, "name")
36+
?.value as keyof typeof componentConfig.core;
37+
38+
if (!name) {
39+
return null;
40+
}
41+
42+
const component = componentConfig.core[name];
43+
const filePath = path.join(process.cwd(), component.filePath);
44+
const source = fs.readFileSync(filePath, "utf8");
45+
46+
node.children?.push(
47+
u("element", {
48+
tagName: "pre",
49+
properties: {
50+
__src__: source,
51+
},
52+
children: [
53+
u("element", {
54+
tagName: "code",
55+
properties: {
56+
className: ["language-tsx"],
57+
},
58+
children: [
59+
{
60+
type: "text",
61+
value: source,
62+
},
63+
],
64+
}),
65+
],
66+
})
67+
);
68+
}
69+
3470
if (node.name === "ComponentShowcase" && node.attributes) {
3571
const name = getNodeAttributeByName(node, "name")
36-
?.value as keyof typeof componentConfig.registry;
72+
?.value as keyof typeof componentConfig.examples;
3773

3874
if (!name) {
3975
return null;
4076
}
4177

42-
const component = componentConfig.registry[name];
78+
const component = componentConfig.examples[name];
4379
const filePath = path.join(process.cwd(), component.filePath);
4480
const source = fs.readFileSync(filePath, "utf8");
4581
// const cleanedJSX = source

‎infra/docker-compose.prod.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
services:
22
web:
3-
image: devarifhossain/retroui:1.02
3+
image: devarifhossain/retroui:1.03
44
container_name: retroui
55
expose:
66
- "3000"
@@ -16,4 +16,4 @@ services:
1616
volumes:
1717
- ./Caddyfile:/etc/caddy/Caddyfile
1818
depends_on:
19-
- web
19+
- web

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
},
1111
"dependencies": {
1212
"@headlessui/react": "^2.1.9",
13+
"@radix-ui/react-avatar": "^1.1.1",
1314
"class-variance-authority": "^0.7.0",
1415
"clsx": "^2.1.1",
1516
"contentlayer": "^0.3.4",

0 commit comments

Comments
 (0)