Merge pull request #13 from ariflogs/new-install-guide

New install guide
Logging-Stuff · Oct 12, 2024 · 1b4fcb1 · 1b4fcb1
2 parents c8d7479 + 0942b2d
commit 1b4fcb1
Show file tree

Hide file tree

Showing 25 changed files with 403 additions and 65 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.02 ./
-          docker push devarifhossain/retroui:1.02
+          docker build -t devarifhossain/retroui:1.03 ./
+          docker push devarifhossain/retroui:1.03
     
       - name: Set up SSH
         uses: webfactory/ssh-agent@v0.9.0
@@ -38,4 +38,4 @@ jobs:
           
       - name: Deploy to VPS
         run: |
-          ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up -d"
+          ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"
diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx
@@ -44,8 +44,8 @@ export default function page({ params }: IProps) {
   }
 
   return (
-    <div className="space-y-12 pb-8">
-      <div>
+    <div className="space-y-12 py-8">
+      <div className="border-b border-black pb-4">
         <H2>{doc.title}</H2>
         <p className="text-lg text-muted">{doc.description}</p>
       </div>

diff --git a/app/(docs)/docs/layout.tsx b/app/(docs)/docs/layout.tsx
@@ -11,11 +11,11 @@ export default function ComponentLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <div className="relative">
+    <div className="relative max-w-6xl mx-auto">
       <div className="hidden lg:block">
         <SideNav />
       </div>
-      <div className="lg:ml-72 mt-20 px-4">{children}</div>
+      <div className="lg:ml-72 mt-16">{children}</div>
     </div>
   );
-}
+}
diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx
@@ -1,4 +1,5 @@
 import {
+  Avatar,
   Badge,
   Button,
   Tabs,
@@ -24,6 +25,22 @@ export default function page() {
         <Badge variant="filled">Badge</Badge>
       </div>
 
+      <div className="flex items-center space-x-4">
+        <Avatar>
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+
+        <Avatar className="rounded-none">
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+
+        <Avatar className="rounded-none h-20 w-20">
+          <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />
+          <Avatar.Fallback>AH</Avatar.Fallback>
+        </Avatar>
+      </div>
       <div>
         <Tabs>
           <TabsTriggerList>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,16 +25,6 @@ export const metadata: Metadata = {
   title: "Retro Styled Tailwind UI Library | Retro UI",
   description:
     "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
-  openGraph: {
-    images: ["/banner.png"],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "Retro Styled Tailwind UI Library | Retro UI",
-    description:
-      "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
-    images: ["/banner.png"],
-  },
 };
 
 export default function RootLayout({
@@ -54,7 +44,7 @@ export default function RootLayout({
       <body
         className={`${shareTech.className} ${archivoBlack.variable} ${shareTech.variable} ${shareTechMono.variable}`}
       >
-        <div className="mb-20 relative z-10">
+        <div className="relative z-10">
           <TopNav />
         </div>
         {children}

diff --git a/app/open-graph.png b/app/open-graph.png
diff --git a/app/twitter-image.png b/app/twitter-image.png
diff --git a/components/ComponentShowcase.tsx b/components/ComponentShowcase.tsx
@@ -4,20 +4,20 @@ import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
-  name: keyof typeof componentConfig.registry;
+  name: keyof typeof componentConfig.examples;
 }
 
 export function ComponentShowcase({ name, children }: IComponentShowcase) {
-  const { preview: Preview } = componentConfig.registry[name];
+  const { preview: Preview } = componentConfig.examples[name];
   const Code = React.Children.toArray(children)[0];
 
   return (
     <TabGroup>
       <TabList className="space-x-4 ">
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
+        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
           Preview
         </Tab>
-        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2">
+        <Tab className="text-lg px-1 border-black data-[selected]:border-b-2 focus:outline-none">
           Code
         </Tab>
       </TabList>

diff --git a/components/ComponentSource.tsx b/components/ComponentSource.tsx
@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils";
+
+interface ComponentSourceProps extends React.HTMLAttributes<HTMLDivElement> {
+  src: string;
+}
+
+export function ComponentSource({ children, className }: ComponentSourceProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-md", className)}>
+      {children}
+    </div>
+  );
+}
diff --git a/components/MDX.tsx b/components/MDX.tsx
@@ -3,14 +3,19 @@ import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
 import { cn } from "@/lib/utils";
+import { ComponentSource } from "./ComponentSource";
 
 const components = {
   h1: H1,
   h2: (props: HTMLAttributes<HTMLHeadingElement>) => (
-    <H2 className="mb-2" {...props} />
+    <H2 className="border-b lg:text-3xl pb-1 mb-6" {...props} />
+  ),
+  h3: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <H3 className="mb-4" {...props} />
+  ),
+  h4: (props: HTMLAttributes<HTMLHeadingElement>) => (
+    <H4 className="mb-2" {...props} />
   ),
-  h3: H3,
-  h4: H4,
   h5: H5,
   h6: H6,
   pre: ({
@@ -44,6 +49,7 @@ const components = {
     </code>
   ),
   ComponentShowcase,
+  ComponentSource,
 };
 
 export default function MDX({ code }: { code: string }) {

diff --git a/components/SideNav.tsx b/components/SideNav.tsx
@@ -5,9 +5,9 @@ import Link from "next/link";
 export default function SideNav() {
   return (
     <div
-      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`}
+      className={`fixed right-auto border-r-2 border-black h-full py-8 transition-transform transform md:translate-x-0 w-64 bg-white`}
     >
-      <nav className="flex flex-col items-start p-6 space-y-4">
+      <nav className="flex flex-col items-start pr-6 space-y-4">
         {navConfig.sideNavItems.map((item) => (
           <div key={item.title}>
             <H6>{item.title}</H6>

diff --git a/config/components.ts b/config/components.ts
@@ -1,7 +1,17 @@
 import { lazy } from "react";
 
 export const componentConfig = {
-  registry: {
+  core: {
+    avatar: {
+      name: "avatar",
+      filePath: "packages/ui/Avatars/Avatar.tsx",
+    },
+    button: {
+      name: "button",
+      filePath: "packages/ui/Buttons/Button.tsx",
+    },
+  },
+  examples: {
     "accordion-style-default": {
       name: "accordion-style-default",
       filePath: "preview/components/accordion-style-default.tsx",
@@ -14,6 +24,20 @@ export const componentConfig = {
       filePath: "preview/components/avatar-style-circle.tsx",
       preview: lazy(() => import("@/preview/components/avatar-style-circle")),
     },
+    "avatar-style-circle-fallbacks": {
+      name: "avatar-style-fallbacks",
+      filePath: "preview/components/avatar-style-circle-fallbacks.tsx",
+      preview: lazy(
+        () => import("@/preview/components/avatar-style-circle-fallbacks")
+      ),
+    },
+    "avatar-style-circle-sizes": {
+      name: "avatar-style-circle-sizes",
+      filePath: "preview/components/avatar-style-circle-sizes.tsx",
+      preview: lazy(
+        () => import("@/preview/components/avatar-style-circle-sizes")
+      ),
+    },
     "badge-style-default": {
       name: "badge-style-default",
       filePath: "preview/components/badge-style-default.tsx",

diff --git a/content/docs/components/avatar.mdx b/content/docs/components/avatar.mdx
@@ -1,11 +1,44 @@
 ---
 title: Avatar
 description: Default rounded avatar that can show your users profile picture. ✨
-lastUpdated: 08 Oct, 2024
+lastUpdated: 12 Oct, 2024
 ---
 
-### Circle
+<ComponentShowcase name="avatar-style-circle" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-avatar
+```
 
-<hr />
 <br />
-<ComponentShowcase name="avatar-style-circle" />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="avatar" />
+
+<br />
+<br />
+
+## Examples
+
+### Size variants
+
+<ComponentShowcase name="avatar-style-circle-sizes" />
+
+<br />
+<br />
+
+### Fallbacks
+
+Fallbacks are helpfull when there ia an error loading the src of the avatar.
+You can set fallbacks with `Avatar.Fallback` component.
+
+<br />
+
+<ComponentShowcase name="avatar-style-circle-fallbacks" />
diff --git a/content/docs/components/button.mdx b/content/docs/components/button.mdx
@@ -1,11 +1,31 @@
 ---
 title: Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
-lastUpdated: 30 Sep, 2024
+lastUpdated: 12 Oct, 2024
 ---
 
-### Default
+<ComponentShowcase name="button-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install class-variance-authority
+```
 
-<hr />
 <br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="button" />
+<br />
+<br />
+
+## Examples
+
+### Default
+
 <ComponentShowcase name="button-style-default" />
diff --git a/contentlayer.config.ts b/contentlayer.config.ts
@@ -31,15 +31,51 @@ export default makeSource({
     rehypePlugins: [
       () => (tree) => {
         visit(tree, (node: UnistNode) => {
+          if (node.name === "ComponentSource" && node.attributes) {
+            const name = getNodeAttributeByName(node, "name")
+              ?.value as keyof typeof componentConfig.core;
+
+            if (!name) {
+              return null;
+            }
+
+            const component = componentConfig.core[name];
+            const filePath = path.join(process.cwd(), component.filePath);
+            const source = fs.readFileSync(filePath, "utf8");
+
+            node.children?.push(
+              u("element", {
+                tagName: "pre",
+                properties: {
+                  __src__: source,
+                },
+                children: [
+                  u("element", {
+                    tagName: "code",
+                    properties: {
+                      className: ["language-tsx"],
+                    },
+                    children: [
+                      {
+                        type: "text",
+                        value: source,
+                      },
+                    ],
+                  }),
+                ],
+              })
+            );
+          }
+
           if (node.name === "ComponentShowcase" && node.attributes) {
             const name = getNodeAttributeByName(node, "name")
-              ?.value as keyof typeof componentConfig.registry;
+              ?.value as keyof typeof componentConfig.examples;
 
             if (!name) {
               return null;
             }
 
-            const component = componentConfig.registry[name];
+            const component = componentConfig.examples[name];
             const filePath = path.join(process.cwd(), component.filePath);
             const source = fs.readFileSync(filePath, "utf8");
             // const cleanedJSX = source

diff --git a/infra/docker-compose.prod.yml b/infra/docker-compose.prod.yml
@@ -1,6 +1,6 @@
 services:
   web:
-    image: devarifhossain/retroui:1.02
+    image: devarifhossain/retroui:1.03
     container_name: retroui
     expose:
       - "3000"
@@ -16,4 +16,4 @@ services:
     volumes:
       - ./Caddyfile:/etc/caddy/Caddyfile
     depends_on:
-      - web
+      - web
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@headlessui/react": "^2.1.9",
+    "@radix-ui/react-avatar": "^1.1.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "contentlayer": "^0.3.4",