Merge branch 'main' into fix-landing

Author: forestream

Cargo.lock

@@ -8,7 +8,6 @@ export default withMDX(
     {
       pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
       output: 'export',
-      assetPrefix: '/devup-ui',
     },
     {},
   ),

apps/landing/next.config.ts

@@ -15,9 +15,9 @@
     "@devup-ui/react": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@next/mdx": "^15.2.4",
+    "@next/mdx": "^15.3.2",
     "@types/mdx": "^2.0.13",
-    "next": "^15.2.4",
+    "next": "^15.3.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-syntax-highlighter": "^15.6.1",
@@ -31,7 +31,7 @@
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
     "typescript": "^5",
-    "glob": "^11.0.1",
+    "glob": "^11.0.2",
     "remark": "^15.0.1"
   }
 }

apps/landing/package.json

@@ -3,7 +3,6 @@ import { Box, css, Flex, Text } from '@devup-ui/react'
 import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 
-import { URL_PREFIX } from '../../../constants'
 import { OpenMenuItem } from './OpenMenuItem'
 
 export interface MenuItemProps {
@@ -19,12 +18,8 @@ export function MenuItem(props: MenuItemProps) {
   const { children, to, subMenu } = props
   const path = usePathname()
   const selected = to
-    ? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
-    : !!subMenu?.some((item) =>
-        item.to
-          ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
-          : false,
-      )
+    ? path.startsWith(to)
+    : !!subMenu?.some((item) => (item.to ? path.startsWith(item.to) : false))
 
   if (subMenu) return <OpenMenuItem {...props} subMenu={subMenu} />
   const inner = (
@@ -61,7 +56,7 @@ export function MenuItem(props: MenuItemProps) {
       className={css({
         textDecoration: 'none',
       })}
-      href={URL_PREFIX + to}
+      href={to}
     >
       {inner}
     </Link>

apps/landing/src/app/(detail)/docs/MenuItem.tsx

@@ -4,7 +4,6 @@ import Link from 'next/link'
 import { usePathname } from 'next/navigation'
 import { Fragment, useReducer } from 'react'
 
-import { URL_PREFIX } from '../../../constants'
 import { MenuItemProps } from './MenuItem'
 
 export function OpenMenuItem({
@@ -14,9 +13,7 @@ export function OpenMenuItem({
   Required<Pick<MenuItemProps, 'subMenu'>>) {
   const path = usePathname()
   const selected = subMenu.some((item) =>
-    item.to
-      ? path.startsWith(URL_PREFIX + item.to) || path.startsWith(item.to)
-      : false,
+    item.to ? path.startsWith(item.to) : false,
   )
   const [open, handleOpen] = useReducer((state) => !state, selected)
   return (
@@ -45,7 +42,7 @@ export function OpenMenuItem({
         {subMenu && (
           <Image
             boxSize="16px"
-            src={URL_PREFIX + '/menu-arrow.svg'}
+            src="/menu-arrow.svg"
             transform={open ? 'rotate(0deg)' : 'rotate(-90deg)'}
             transition="transform 0.2s"
           />
@@ -56,9 +53,7 @@ export function OpenMenuItem({
           <Box borderRight="1px solid var(--border, #E0E0E0)" w="10px" />
           <VStack flex="1" gap="4px">
             {subMenu.map(({ children, to }, idx) => {
-              const selected = to
-                ? path.startsWith(to) || path.startsWith(URL_PREFIX + to)
-                : false
+              const selected = to ? path.startsWith(to) : false
               const inner = (
                 <Flex
                   _hover={{
@@ -90,7 +85,7 @@ export function OpenMenuItem({
                   className={css({
                     textDecoration: 'none',
                   })}
-                  href={URL_PREFIX + to}
+                  href={to}
                 >
                   {inner}
                 </Link>

apps/landing/src/app/(detail)/docs/OpenMenuItem.tsx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Box",
+  title: 'Box',
 }
 
 # Box
@@ -8,23 +8,22 @@ The `Box` component is a layout primitive that can be used to create any kind of
 
 It is just a `div` with some styles.
 
-
 ## How to use
 
 ```jsx
 // Before
-<Box bg={"red"}/>
+<Box bg={"red"} />
 
 // After
-<div className="d0"/>
+<div className="d0" />
 ```
 
-You can use the as prop to change the element type.
+You can use the `as` prop to change the element type.
 
 ```jsx
 // Before
-<Box as="span"/>
+<Box as={"span"} />
 
 // After
-<span class="d0"/>
+<span className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/box/page.mdx

@@ -1,16 +1,17 @@
 export const metadata = {
-    title: "Button",
+  title: 'Button',
 }
 
 # Button
 
-The Button component is a simple button component that can be used to trigger actions.
+The `Button` component is a simple button component that can be used to trigger actions.
 
+## How to use
 
 ```jsx
 // Before
-<Button bg={"red"}/>
+<Button bg={"red"} />
 
 // After
-<button className="d0"/>
+<button className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/button/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Center",
+  title: 'Center',
 }
 
 # Center
@@ -10,10 +10,18 @@ It has a `display: flex` style with `justify-content: center` and `align-items:
 
 ## How to use
 
-```jsx
+````jsx
 // Before
-<Center/>
+<Center>
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+    <Box bg="blue" w={25} h={25} />
+</Center>
 
 // After, It has 3 classes on default
-<div className="d0 d1 d2"/>
-```
+<div className="d3 d4 d5">
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+    <div className="d0 d1 d2"></div>
+</div>```
+````

apps/landing/src/app/(detail)/docs/api/center/page.mdx

@@ -1,40 +1,38 @@
 export const metadata = {
-    title: "css",
+  title: 'css',
 }
 
 # css
 
-css function is a function that returns a string.
+`css` function is a function that returns a string.
 
-## Usage
+## How to use
 
 ### CSS Literal
-You can use the css function to create a css string.
+
+You can use `css` as a tag function to create a css string. Pass in a string of css properties as an argument, ans it will be converted
+into a class list.
+
 ```jsx
-<any css={css`
+// Before
+<any className={css`
     color: red;
 `}/>
 
-<any className={"d0"}/>
+// After
+<any className="d0"/>
 ```
 
 ### CSS Object
-You can use the css function to create a css object.
+
+You can also use the css function by passing in a css object as an argument.
+
 ```jsx
+// Before
 <any className={css({
     color: "red"
 })}/>
 
-<any className={"d0"}/>
-```
-
-Also, css function can be used in the style prop. (responsive, pseudo-class, etc.)
-```jsx
-// It works like this
-<any style={css({
-    color: ["red", "blue"],
-    _hover: {
-        color: "green"
-    }
-})}/>
+// After
+<any className="d0" />
 ```

apps/landing/src/app/(detail)/docs/api/css/page.mdx

@@ -1,5 +1,5 @@
 export const metadata = {
-    title: "Flex",
+  title: 'Flex',
 }
 
 # Flex
@@ -12,9 +12,8 @@ It has a `display: flex` style by default.
 
 ```jsx
 // Before
-<Flex/>
+<Flex />
 
-// After, It has a class on default
-<div className="d0"/>
+// After, it has a class on default
+<div className="d0" />
 ```
-