perf: update documentation

CONTRIBUTING.md

@@ -0,0 +1,80 @@
+## Getting Started
+
+To contribute to Open UI, follow these steps:
+
+1. Fork the repository by clicking on the "Fork" button at the top right corner of the GitHub page.
+
+2. Clone your forked repository to your local machine:
+
+   ```
+   git clone https://github.com/OpenLab-dev/openui.git
+   ```
+
+3. Create a new branch for your changes:
+
+   ```
+   git switch -c my-feature
+   ```
+
+4. Make the necessary changes and improvements to the codebase.
+5. Commit your changes with a descriptive commit message:
+
+   ```
+   git commit -m "feat: new feature"
+   ```
+
+6. Push your changes to your forked repository:
+
+   ```
+   git push origin my-feature
+   ```
+
+7. Open a pull request (PR) on the original repository's GitHub page.
+
+8. Provide a clear and detailed description of your changes in the PR.
+9. Wait for the maintainers to review your changes and address any feedback or comments.
+10. Once your changes are approved, they will be merged into the main branch.
+
+Thank you for your contribution to Open UI! We appreciate your support and look forward to your ideas and improvements.
+
+## Development
+
+To start developing with Open UI, follow these steps:
+
+- Install the necessary dependencies by running the following command in your terminal:
+
+  ```
+  pnpm install --frozen-lockfile
+  ```
+
+### Built components
+
+1. Start the development to built components:
+
+   ```
+   pnpm compile
+   ```
+
+   Happy coding!
+
+2. Start playground
+
+   ```
+   pnpm dev-playground-next
+   ```
+
+## Development documentation
+
+1. Start the development to docs:
+
+   ```
+   pnpm dev-web
+   ```
+
+   Happy coding!
+
+2. Start playground
+
+   ```
+   pnpm build-web
+   ```

README.md

@@ -1,6 +1,6 @@
 # Open UI
 
-This design system is totally easy to use with the aim of facilitating upcoming new projects. The design system is a challenge for our team. You can gladly contribute and guide us with ideas to improve... We would be keen to hear any feedback on this project.
+Open UI is a powerful design system created with Shadcn UI and Tailwind CSS. It is designed to make it easy to use and facilitate the development of new projects. Our team has put in a lot of effort to create this design system, and we welcome contributions and ideas for improvement. We value your feedback and would love to hear from you.
 
 ## Features
 
@@ -9,50 +9,8 @@ This design system is totally easy to use with the aim of facilitating upcoming
 - Dark mode support
 - [Figma Kit](https://www.figma.com/community/file/1354464067434498042)
 
-## Getting Started
-
-### Configure workspaces
-
-#### Install turbo
-
-Install turbo globally.
-
-```shell
-pnpm install --frozen-lockfile
-```
-
-For more details about installation, see Installing Turborepo
-
-#### Scripts
-
-1. Run mode dev.
-
-```shell
-turbo dev
-```
-
-2. Run build packages
-
-```shell
-turbo build
-```
-
-Your ready for worker and add components.
-
 ## Components
 
-_General_
-
-- [x] Button
-- [x] Aspect Ratio
-- [x] Carousel
-
-_Data Input_
-
-- [x] Input
-- [x] Label
-- [x] Select
-- [x] Checkbox
 - [x] Slider
 
 _Layout_
@@ -88,10 +46,8 @@ _Loading_
 
 If you want to know more about this design system visit
 
-- [Documentation](https://openui.up.railway.app/docs/getting-started)
+- [Documentation](https://openui-dd0.pages.dev/docs)
 
 ## License
 
-Design System is licensed under either of
-
-- MIT license (LICENSE-MIT or https://opensource.org/licenses/MIT)
+[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://opensource.org/licenses/MIT))

apps/web/app/(docs)/docs/[[...slug]]/page.tsx

@@ -1,3 +1,5 @@
+import '../../../mdx.css'
+
 import type { Metadata } from 'next'
 import { notFound } from 'next/navigation'
 import { allDocs } from 'contentlayer/generated'
@@ -7,8 +9,6 @@ import { DocsPageHeader } from '@/components/page-header'
 import { DocsPager } from '@/components/pager'
 import { DashboardTableOfContents } from '@/components/toc'
 
-import '../../../mdx.css'
-
 interface DocPageProps {
   params: {
     slug: string[]

apps/web/app/(docs)/docs/layout.tsx

@@ -1,3 +1,4 @@
+import { ScrollArea } from '@openui-org/react'
 import { DocsSidebarNav } from '@/components/sidebar-nav'
 import { docsConfig } from '@/constants/docs'
 
@@ -7,9 +8,11 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
-    <div className="flex-1 md:grid md:grid-cols-[220px_1fr] md:gap-6 lg:grid-cols-[240px_1fr] lg:gap-10">
-      <aside className="fixed top-14 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 overflow-y-auto border-r pt-6 pr-2 md:sticky md:block">
-        <DocsSidebarNav items={docsConfig.sidebarNav} />
+    <div className="flex-1 md:grid md:grid-cols-[240px_1fr] md:gap-6 lg:grid-cols-[260px_1fr] lg:gap-10">
+      <aside className="fixed top-14 h-[calc(100vh-3.5rem)] hidden w-full shrink-0 pt-8 pr-2 md:sticky md:block">
+        <ScrollArea className="h-full">
+          <DocsSidebarNav items={docsConfig.sidebarNav} />
+        </ScrollArea>
       </aside>
       {children}
     </div>

apps/web/app/(docs)/layout.tsx

@@ -1,41 +1,11 @@
-import Link from 'next/link'
-import { DocsSearch } from '@/components/docs-search'
-import { MainNav } from '@/components/main-nav'
-import { DocsSidebarNav } from '@/components/sidebar-nav'
-import { docsConfig } from '@/constants/docs'
-import { SiteFooter } from '@/components/docs-footer'
-
 interface DocsLayoutProps {
   children: React.ReactNode
 }
 
 export default function DocsLayout({ children }: DocsLayoutProps) {
   return (
     <div className="flex min-h-screen flex-col">
-      <header className="sticky top-0 z-40 w-full shadow-large">
-        <div className="container flex h-16 items-center space-x-4 sm:justify-between sm:space-x-0">
-          <MainNav items={docsConfig.mainNav}>
-            <DocsSidebarNav items={docsConfig.sidebarNav} />
-          </MainNav>
-          <div className="flex flex-1 items-center space-x-4 sm:justify-end">
-            <div className="flex-1 sm:grow-0">
-              <DocsSearch />
-            </div>
-            <nav className="flex space-x-4">
-              <Link
-                href="https://github.com/OpenLab-dev/openui"
-                target="_blank"
-                rel="noreferrer"
-              >
-                Github
-                <span className="sr-only">GitHub</span>
-              </Link>
-            </nav>
-          </div>
-        </div>
-      </header>
-      <div className="container flex-1">{children}</div>
-      <SiteFooter />
+      <div className="container flex-1 mx-auto">{children}</div>
     </div>
   )
 }

apps/web/app/faq/page.tsx

@@ -0,0 +1,7 @@
+export default function BlogPage() {
+  return (
+    <div>
+      <h1>Blog</h1>
+    </div>
+  )
+}

apps/web/app/globals.css

@@ -1,15 +1,3 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@layer base {
-  @font-face {
-    font-family: 'Gotham Medium';
-    src: url('/fonts/GothamSSm-medium.woff2') format('woff2');
-  }
-  html,
-  body {
-    scroll-behavior: smooth;
-    font-family: 'Gotham Medium', system-ui, sans-serif;
-  }
-}

apps/web/app/layout.tsx

@@ -1,22 +1,27 @@
-import type { Metadata } from 'next'
 import './globals.css'
 
+import type { Metadata } from 'next'
+import { Poppins } from 'next/font/google'
+import Menu from '@/components/menu'
+import Footer from '@/components/footer'
+
 export const metadata: Metadata = {
   title: 'Open UI',
   description: 'Design system built with Shadcn and Tailwind CSS',
 }
+const poppins = Poppins({ subsets: ['latin'], display: 'swap', weight: ['400', '500', '600', '700'] })
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className={poppins.className}>
       <body>
-
+        <Menu />
         {children}
-
+        <Footer />
       </body>
     </html>
   )

apps/web/app/mdx.css

@@ -1,39 +1,75 @@
+[data-theme='light'] {
+  display: block;
+}
+
+[data-theme='dark'] {
+  display: none;
+}
+
+.dark [data-theme='light'] {
+  display: none;
+}
+
+.dark [data-theme='dark'] {
+  display: block;
+}
+
+[data-rehype-pretty-code-fragment] {
+  @apply relative text-white;
+}
+
 [data-rehype-pretty-code-fragment] code {
-  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0 text-sm text-black;
+  @apply grid min-w-full break-words rounded-none border-0 bg-transparent p-0;
   counter-reset: line;
   box-decoration-break: clone;
 }
 
 [data-rehype-pretty-code-fragment] .line {
-  @apply px-4 py-1;
+  @apply px-4 min-h-[1rem] py-0.5 w-full inline-block;
+}
+
+[data-rehype-pretty-code-fragment] [data-line-numbers] .line {
+  @apply px-2;
 }
 
 [data-rehype-pretty-code-fragment] [data-line-numbers] > .line::before {
+  @apply text-zinc-50/40 text-xs;
   counter-increment: line;
   content: counter(line);
   display: inline-block;
-  width: 1rem;
-  margin-right: 1rem;
+  width: 1.8rem;
+  margin-right: 1.4rem;
   text-align: right;
-  color: gray;
 }
 
 [data-rehype-pretty-code-fragment] .line--highlighted {
-  @apply bg-slate-300 bg-opacity-10;
+  @apply bg-zinc-700/50;
 }
 
 [data-rehype-pretty-code-fragment] .line-highlighted span {
   @apply relative;
 }
 
 [data-rehype-pretty-code-fragment] .word--highlighted {
-  @apply rounded-md bg-slate-300 bg-opacity-10 p-1;
+  @apply rounded-md bg-zinc-700/50 border-zinc-700/70 p-1;
+}
+
+.dark [data-rehype-pretty-code-fragment] .word--highlighted {
+  @apply bg-zinc-900;
 }
 
 [data-rehype-pretty-code-title] {
-  @apply mt-4 py-2 px-4 text-sm font-medium;
+  @apply mt-2 pt-6 px-4 text-sm font-medium;
 }
 
 [data-rehype-pretty-code-title] + pre {
+  @apply mt-2;
+}
+
+.mdx > .steps:first-child > h3:first-child {
   @apply mt-0;
 }
+
+.steps > h3 {
+  @apply mt-8 mb-4 text-base font-semibold;
+}

apps/web/app/page.tsx

@@ -1,5 +1,3 @@
-import Menu from '@/components/menu'
-import Footer from '@/components/footer'
 import Commons from '@/components/commons'
 import ExploreDocs from '@/components/explore-docs'
 import FAQ from '@/components/faq'
@@ -8,14 +6,12 @@ import Home from '@/components/home'
 export default function Page() {
   return (
     <>
-      <Menu />
       <main className="max-w-screen-2xl mx-auto flex flex-col items-center justify-center">
         <Home />
         <Commons />
         <ExploreDocs />
         <FAQ />
       </main>
-      <Footer />
     </>
   )
 }