Implement search

owjs3901 · owjs3901 · commit a5db0c1ebf98 · 2025-02-06T21:30:18.000+09:00
diff --git a/apps/landing/.gitignore b/apps/landing/.gitignore
@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+public/search.json
 /node_modules
 /.pnp
 .pnp.*
diff --git a/apps/landing/package.json b/apps/landing/package.json
@@ -4,9 +4,10 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
+    "dev": "node ./script.js && next dev",
+    "search": "node ./script.js",
+    "build": "node ./script.js && next build",
+    "start": "node ./script.js && next start",
     "lint": "eslint"
   },
   "dependencies": {
@@ -29,6 +30,8 @@
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "typescript": "^5"
+    "typescript": "^5",
+    "glob": "^11.0.1",
+    "remark": "^15.0.1"
   }
 }
diff --git a/apps/landing/script.js b/apps/landing/script.js
@@ -0,0 +1,25 @@
+import { glob, readFile, writeFile } from 'node:fs/promises'
+
+const files = await glob('src/**/*.mdx')
+
+const q = []
+for await (const file of files) {
+  q.push(
+    readFile(file).then((content) => {
+      const titleIndex = content.toString().indexOf('#')
+      return {
+        text: content.toString().substring(titleIndex),
+        title: /# (.*)/.exec(content.toString())[1],
+        url:
+          '/devup-ui/' +
+          file
+            .replace(/src[/\\]app[/\\]\(detail\)[/\\]/, '')
+            .replace('page.mdx', ''),
+      }
+    }),
+  )
+}
+
+const res = await Promise.all(q)
+
+await writeFile('public/search.json', JSON.stringify(res))
diff --git a/apps/landing/src/app/(detail)/docs/api/box/page.mdx b/apps/landing/src/app/(detail)/docs/api/box/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Box",
+}
+
 # Box
 
 The `Box` component is a layout primitive that can be used to create any kind of layout.
diff --git a/apps/landing/src/app/(detail)/docs/api/button/page.mdx b/apps/landing/src/app/(detail)/docs/api/button/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Button",
+}
+
 # Button
 
 The Button component is a simple button component that can be used to trigger actions.
diff --git a/apps/landing/src/app/(detail)/docs/api/center/page.mdx b/apps/landing/src/app/(detail)/docs/api/center/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Center",
+}
+
 # Center
 
 The `Center` component is a layout component that centers its children both vertically and horizontally.
diff --git a/apps/landing/src/app/(detail)/docs/api/css/page.mdx b/apps/landing/src/app/(detail)/docs/api/css/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "css",
+}
+
 # css
 
 css function is a function that returns a string.
diff --git a/apps/landing/src/app/(detail)/docs/api/flex/page.mdx b/apps/landing/src/app/(detail)/docs/api/flex/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Flex",
+}
+
 # Flex
 
 The `Flex` component is a layout component that uses flexbox to layout its children.
diff --git a/apps/landing/src/app/(detail)/docs/api/grid/page.mdx b/apps/landing/src/app/(detail)/docs/api/grid/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Grid",
+}
+
 # Grid
 
 The grid component is a layout component that arranges its children in a grid layout. It supports both fixed and fluid layouts.
diff --git a/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/group-selector/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Group Selector",
+}
+
 # Group Selector
 
 AThe `group` selector is used to apply styles to a group of elements. It is used to apply styles to a group of elements that are siblings of each other.
diff --git a/apps/landing/src/app/(detail)/docs/api/image/page.mdx b/apps/landing/src/app/(detail)/docs/api/image/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Image",
+}
+
 # Image
 
 The `Image` component is a layout primitive that can be used to create any kind of layout.
diff --git a/apps/landing/src/app/(detail)/docs/api/input/page.mdx b/apps/landing/src/app/(detail)/docs/api/input/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Input",
+}
+
 # Input
 
 The input component is a layout primitive that can be used to create any kind of layout.
diff --git a/apps/landing/src/app/(detail)/docs/api/selector/page.mdx b/apps/landing/src/app/(detail)/docs/api/selector/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Selector",
+}
+
 # Selector
 
 <table>
diff --git a/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx b/apps/landing/src/app/(detail)/docs/api/style-props/page.mdx
@@ -1,6 +1,8 @@
-# Style Props
-
+export const metadata = {
+    title: "Style Props",
+}
 
+# Style Props
 
 ## Animation
 
diff --git a/apps/landing/src/app/(detail)/docs/api/text/page.mdx b/apps/landing/src/app/(detail)/docs/api/text/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "Text",
+}
+
 # Text
diff --git a/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx b/apps/landing/src/app/(detail)/docs/api/v-stack/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "VStack",
+}
+
 # VStack
diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "Breakpoints",
+}
+
 # Breakpoints
diff --git a/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx b/apps/landing/src/app/(detail)/docs/devup/colors/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "Colors",
+}
+
 # Colors
diff --git a/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx b/apps/landing/src/app/(detail)/docs/devup/devup-json/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "devup.json",
+}
+
 # devup.json
diff --git a/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx b/apps/landing/src/app/(detail)/docs/devup/typography/page.mdx
@@ -1 +1,5 @@
+export const metadata = {
+    title: "Typography",
+}
+
 # Typography
diff --git a/apps/landing/src/app/(detail)/docs/features/page.mdx b/apps/landing/src/app/(detail)/docs/features/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "Features",
+}
+
 # Features
 
 Many css in js solutions are designed to be used with JavaScript, but Devup UI is designed to be used without JavaScript.
diff --git a/apps/landing/src/app/(detail)/docs/installation/page.mdx b/apps/landing/src/app/(detail)/docs/installation/page.mdx
@@ -1,5 +1,8 @@
-# Installation
+export const metadata = {
+    title: "Installation",
+}
 
+# Installation
 
 ## Install @devup-ui/react
 
diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx
@@ -11,15 +11,15 @@ export default function DetailLayout({
   return (
     <>
       <Flex maxW="1440px" minH="calc(100vh - 500px)" mx="auto">
-        <Box p="20px 16px" w="220px">
+        <Box display={['none', null, 'initial']} p="20px 16px" w="220px">
           <Box pos="sticky" top={['70px', null, '90px']}>
             <LeftMenu />
           </Box>
         </Box>
         <Box className="markdown-body" flex={1} px="60px" py="40px">
           {children}
         </Box>
-        <Box>
+        <Box display={['none', null, null, 'initial']}>
           <Box pos="sticky" top={['50px', null, '70px']}>
             <RightIndex />
           </Box>
diff --git a/apps/landing/src/app/(detail)/docs/overview/page.mdx b/apps/landing/src/app/(detail)/docs/overview/page.mdx
@@ -1,3 +1,7 @@
+export const metadata = {
+    title: "What is Devup UI?",
+}
+
 ## What is Devup UI?
 
 Devup UI is a CSS in JS preprocessor that does not require runtime.
diff --git a/apps/landing/src/app/(detail)/team/layout.tsx b/apps/landing/src/app/(detail)/team/layout.tsx
@@ -7,7 +7,7 @@ export default function TeamLayout({
 }>) {
   return (
     <>
-      <Box mx="auto" p="40px 60px" w="1014px">
+      <Box minH="calc(100vh - 500px)" mx="auto" p="40px 60px" w="1014px">
         {children}
       </Box>
     </>
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -6,6 +6,7 @@ import type { Metadata } from 'next'
 
 import { Footer } from '../components/Footer'
 import { Header } from '../components/Header'
+import { SearchModal } from '../components/SearchModal'
 import { URL_PREFIX } from '../constants'
 
 export const metadata: Metadata = {
@@ -32,6 +33,7 @@ export default function RootLayout({
           color: '$text',
         })}
       >
+        <SearchModal />
         <Header />
         {children}
         <Footer />
diff --git a/apps/landing/src/components/Header/HeaderInput.tsx b/apps/landing/src/components/Header/HeaderInput.tsx
@@ -2,7 +2,7 @@ import { Flex, Image, Input } from '@devup-ui/react'
 
 import { URL_PREFIX } from '../../constants'
 
-export function HeaderInput() {
+export function HeaderInput(props: React.ComponentProps<'input'>) {
   return (
     <Flex
       alignItems="center"
@@ -23,6 +23,8 @@ export function HeaderInput() {
         outline="none"
         placeholder="Search documentation..."
         typography="caption"
+        w="100%"
+        {...props}
       />
     </Flex>
   )
diff --git a/apps/landing/src/components/Header/HeaderInputWrap.tsx b/apps/landing/src/components/Header/HeaderInputWrap.tsx
@@ -1,5 +1,6 @@
 'use client'
-import { usePathname } from 'next/navigation'
+import { Box } from '@devup-ui/react'
+import { usePathname, useRouter } from 'next/navigation'
 
 import { isRoot } from '../../utils/is-root'
 
@@ -10,5 +11,15 @@ interface HeaderInputWrapProps {
 export function HeaderInputWrap({ children }: HeaderInputWrapProps) {
   const path = usePathname()
   const root = isRoot(path)
-  return root ? null : children
+  const router = useRouter()
+
+  return root ? null : (
+    <Box
+      onClick={() => {
+        router.replace('?search=1')
+      }}
+    >
+      {children}
+    </Box>
+  )
 }
diff --git a/apps/landing/src/components/Header/HeaderWrap.tsx b/apps/landing/src/components/Header/HeaderWrap.tsx
@@ -31,13 +31,16 @@ function HeaderWrapInner({ children }: { children: React.ReactNode }) {
       alignItems="center"
       bg="$containerBackground"
       borderRadius={root ? [null, null, '16px'] : undefined}
-      boxShadow="0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))"
+      boxShadow={
+        root
+          ? '0px 2px 8px 0px var(--shadow, rgba(135, 135, 135, 0.25))'
+          : '0px 1px 1px 0px var(--shadow, rgba(135, 135, 135, 0.25))'
+      }
       h={['50px', null, '70px']}
       justifyContent="space-between"
       maxW={root ? '1440px' : '100%'}
       mx="auto"
-      pl={[null, 5, '40px']}
-      pr={[null, 5, '40px']}
+      px={[null, 5, '20px']}
     >
       {children}
     </Flex>
diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx
@@ -4,13 +4,16 @@ import Link from 'next/link'
 import { LeftMenu } from '../../app/(detail)/docs/LeftMenu'
 import { URL_PREFIX } from '../../constants'
 import { HeaderInput } from './HeaderInput'
+import { HeaderInputWrap } from './HeaderInputWrap'
 import { MobMenuWrap } from './MobMenuWrap'
 
 export function MobMenu() {
   return (
     <MobMenuWrap>
       <Box px={4} py={2.5}>
-        <HeaderInput />
+        <HeaderInputWrap>
+          <HeaderInput readOnly />
+        </HeaderInputWrap>
       </Box>
       <Box overflowY="auto" px={4}>
         <Link
diff --git a/apps/landing/src/components/Header/MobMenuWrap.tsx b/apps/landing/src/components/Header/MobMenuWrap.tsx
@@ -11,8 +11,15 @@ export function MobMenuWrap({ children }: MobMenuWrapProps) {
     <VStack
       ref={(ref) => {
         bodyScrollLock.disableBodyScroll(ref!)
+
+        function ev() {
+          if (window.innerWidth >= 768) bodyScrollLock.enableBodyScroll(ref!)
+        }
+
+        window.addEventListener('resize', ev)
         return () => {
           bodyScrollLock.enableBodyScroll(ref!)
+          window.removeEventListener('resize', ev)
         }
       }}
       bg="$containerBackground"
diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx
@@ -101,7 +101,7 @@ export function Header() {
           </Link>
         </Flex>
         <HeaderInputWrap>
-          <HeaderInput />
+          <HeaderInput readOnly />
         </HeaderInputWrap>
         {top}
       </Flex>
diff --git a/apps/landing/src/components/SearchModal/SearchContent.tsx b/apps/landing/src/components/SearchModal/SearchContent.tsx
diff --git a/apps/landing/src/components/SearchModal/SearchInput.tsx b/apps/landing/src/components/SearchModal/SearchInput.tsx
diff --git a/apps/landing/src/components/SearchModal/SearchModalWrap.tsx b/apps/landing/src/components/SearchModal/SearchModalWrap.tsx
diff --git a/apps/landing/src/components/SearchModal/index.tsx b/apps/landing/src/components/SearchModal/index.tsx
diff --git a/apps/vite-lib/package.json b/apps/vite-lib/package.json
diff --git a/apps/vite/package.json b/apps/vite/package.json
diff --git a/benchmark/next-chakra-ui/package.json b/benchmark/next-chakra-ui/package.json
diff --git a/package.json b/package.json
diff --git a/packages/next-plugin/package.json b/packages/next-plugin/package.json
diff --git a/packages/react/package.json b/packages/react/package.json
diff --git a/packages/react/src/types/props/selector/index.ts b/packages/react/src/types/props/selector/index.ts
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
