diff --git a/app/components/DocsLayout.tsx b/app/components/DocsLayout.tsx index 490ed651..4a3f69e1 100644 --- a/app/components/DocsLayout.tsx +++ b/app/components/DocsLayout.tsx @@ -29,6 +29,7 @@ import { DocsCalloutBytes } from '~/components/DocsCalloutBytes' import { ClientOnlySearchButton } from './ClientOnlySearchButton' import { twMerge } from 'tailwind-merge' import { partners } from '~/utils/partners' +import { useThemeStore } from './ThemeToggle' // Let's use zustand to wrap the local storage logic. This way // we'll get subscriptions for free and we can use it in other @@ -321,6 +322,10 @@ export function DocsLayout({ const versionConfig = useVersionConfig({ versions }) const menuConfig = useMenuConfig({ config, frameworks, repo }) + const { mode: themeMode } = useThemeStore() + + const oramaThemeMode = themeMode === 'auto' ? 'system' : themeMode + const matches = useMatches() const lastMatch = last(matches) @@ -493,7 +498,10 @@ export function DocsLayout({ onSelect={versionConfig.onSelect} /> - + Search {menuItems} @@ -554,6 +562,7 @@ export function DocsLayout({ } as any, }} facetProperty={undefined} + colorScheme={oramaThemeMode} /> )} diff --git a/app/components/Orama.tsx b/app/components/Orama.tsx index 9e13ebe0..2d3c7c2f 100644 --- a/app/components/Orama.tsx +++ b/app/components/Orama.tsx @@ -4,6 +4,14 @@ export const searchBoxParams = { endpoint: 'https://cloud.orama.run/v1/indexes/tanstack-dev-ur0ppd', }, colorScheme: 'system' as 'light' | 'dark' | 'system', + suggestions: [ + 'What is TanStack?', + 'Why should I use TanStack query?', + 'Show me an example integration of useQuery hook', + 'How is TanStack router different than other routers?', + 'What is TanStack Table for?', + 'Code example using TanStack Store', + ], facetProperty: 'category', resultMap: { description: 'content', diff --git a/app/routes/_libraries/route.tsx b/app/routes/_libraries/route.tsx index 9d3d7d2b..39ab5c85 100644 --- a/app/routes/_libraries/route.tsx +++ b/app/routes/_libraries/route.tsx @@ -17,7 +17,7 @@ import { getLibrary, libraries } from '~/libraries' import { Scarf } from '~/components/Scarf' import { searchBoxParams, searchButtonParams } from '~/components/Orama' import { ClientOnlySearchButton } from '~/components/ClientOnlySearchButton' -import { ThemeToggle } from '~/components/ThemeToggle' +import { ThemeToggle, useThemeStore } from '~/components/ThemeToggle' import { TbBrandBluesky, TbBrandTwitter } from 'react-icons/tb' export const Route = createFileRoute('/_libraries')({ @@ -41,6 +41,10 @@ function LibrariesLayout() { const [mounted, setMounted] = React.useState(false) + const { mode: themeMode } = useThemeStore() + + const oramaThemeMode = themeMode === 'auto' ? 'system' : themeMode + React.useEffect(() => { setMounted(true) }, []) @@ -242,7 +246,10 @@ function LibrariesLayout() { dark:bg-gray-900" >
- +
{items} @@ -259,7 +266,10 @@ function LibrariesLayout() { {logo}
- + Search
@@ -284,7 +294,7 @@ function LibrariesLayout() { {mounted ? (
- +
) : null} diff --git a/package.json b/package.json index 52e559eb..cc16041b 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,7 @@ "@number-flow/react": "^0.4.1", "@octokit/graphql": "^7.0.2", "@octokit/rest": "^20.0.2", - "@orama/react-components": "^0.0.25", + "@orama/react-components": "^0.1.23", "@remix-run/node": "^2.8.1", "@sentry/react": "^8.35.0", "@sentry/vite-plugin": "^2.22.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d35a8904..86e88483 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -36,8 +36,8 @@ importers: specifier: ^20.0.2 version: 20.0.2 '@orama/react-components': - specifier: ^0.0.25 - version: 0.0.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3) + specifier: ^0.1.23 + version: 0.1.23(react-dom@18.3.1(react@18.3.1))(react@18.3.1) '@remix-run/node': specifier: ^2.8.1 version: 2.8.1(typescript@5.6.3) @@ -2096,24 +2096,37 @@ packages: '@one-ini/wasm@0.1.1': resolution: {integrity: sha512-XuySG1E38YScSJoMlqovLru4KTUNSjgVTIjyh7qMX6aNN5HY5Ct5LhRJdxO79JtTzKfzV/bnWpz+zquYrISsvw==} + '@orama/cuid2@2.2.3': + resolution: {integrity: sha512-Lcak3chblMejdlSHgYU2lS2cdOhDpU6vkfIJH4m+YKvqQyLqs1bB8+w6NT1MG5bO12NUK2GFc34Mn2xshMIQ1g==} + + '@orama/highlight@0.1.8': + resolution: {integrity: sha512-w3TvtWUKYlf/NoujoyEs38nJRi1lkwxdOXntXDYB9cfHzx+s+iPrps70YwFRRJu9TcHW8ffz503b0E6aAfsuvg==} + '@orama/orama@2.0.23': resolution: {integrity: sha512-hb99eZAKW0KBaTyf8f7iV1yFIniQtkcs3sV5pooQ7mh33DCjTyeB39qUW8IHyBDFSs2rjLoePjW0CROvhb3rkw==} engines: {node: '>= 16.0.0'} - '@orama/react-components@0.0.25': - resolution: {integrity: sha512-AVDVRKagrEUJ859JYW/iTfKfvDu+ftQDWQ1fZBEDYxYo8M86WCYhRmi+0wY8dpg27dSmMmYjN1tM+8IXK0lJSA==} + '@orama/orama@3.0.3': + resolution: {integrity: sha512-M1LPYzAh7cZgujrrU2MCqVaVsYMfTVvskBcgc2Oc78ppTtlr9rXfZxKC8VPguIf78jxOeJUOspG/Lueo4vAZBQ==} + engines: {node: '>= 16.0.0'} + + '@orama/react-components@0.1.23': + resolution: {integrity: sha512-LmSO64xN1bhOBnqVbx+FzpFmWvcy+n/s0Y/keQdU1iejSEFgp+JZCmcgI7B2DS+Xa4VCQOVzYxf6TD11eKc4Tg==} peerDependencies: react: ^17.0.0 || ^18.3.1 react-dom: ^17.0.0 || ^18.3.1 - '@orama/wc-components@0.0.25': - resolution: {integrity: sha512-3EJIuE47k86hNbPXExd3bNzeMwdkdDA3AfwNTPSRVq3zdGlcKoUR/kmLvsGtHIt73oIPO+Lcyl9n0PK8F12nbg==} + '@orama/switch@3.0.3': + resolution: {integrity: sha512-ANERC2N5J6X2+iacQqlo8sLF0wzIwW578xkYmnMVRUOSMuHiLpp9wbYF06tyEBIcpTmfQDKvXI20DeELfSn8ww==} + peerDependencies: + '@orama/orama': 3.0.3 + '@oramacloud/client': ^2.1.1 - '@oramacloud/client@1.3.15': - resolution: {integrity: sha512-QBgQrK0WA9pPzeVh/E6p44erwL0IJaHB3TrbEAsrduqbj38xY06jjpYsn//2fJt34jEnIBjOwPkjZ3OJEJlR4A==} + '@orama/wc-components@0.1.23': + resolution: {integrity: sha512-O4jWSC6XeGS+07l2bkBGPGGXq1A6wG/2nPbBi5WyVhLGY4oceq3/c5l4ogHOF9G4OB+217mKN4VU3nmRosFJtQ==} - '@paralleldrive/cuid2@2.2.2': - resolution: {integrity: sha512-ZOBkgDwEdoYVlSeRbYYXs0S9MejQofiVYoTbKzy/6GQa39/q5tQU2IX46+shYnUkpEl3wc+J6wRlar7r2EK2xA==} + '@oramacloud/client@2.1.4': + resolution: {integrity: sha512-uNPFs4wq/iOPbggCwTkVNbIr64Vfd7ZS/h+cricXVnzXWocjDTfJ3wLL4lr0qiSu41g8z+eCAGBqJ30RO2O4AA==} '@parcel/watcher-android-arm64@2.4.1': resolution: {integrity: sha512-LOi/WTbbh3aTn2RYddrO8pnapixAziFl6SMxHM69r3tvdSm94JtCenaKgk1GRg5FJ5wpMCpHeW+7yqPlvZv7kg==} @@ -2708,9 +2721,6 @@ packages: '@types/micromatch@4.0.9': resolution: {integrity: sha512-7V+8ncr22h4UoYRLnLXSpTxjQrNUXtWHGeMPRJt1nULXI57G9bIcpyrHlmrQ7QK24EyyuXvYcSSWAM8GA9nqCg==} - '@types/node-fetch@2.6.11': - resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==} - '@types/node@14.18.63': resolution: {integrity: sha512-fAtCfv4jJg+ExtXhvCkCqUKZ+4ok/JQk01qDKhL5BDDoS3AxKXhV5/MAVUZyQnSEd2GT92fkgZl0pz0Q0AzcIQ==} @@ -3071,10 +3081,6 @@ packages: resolution: {integrity: sha512-jRR5wdylq8CkOe6hei19GGZnxM6rBGwFl3Bg0YItGDimvjGtAvdZk4Pu6Cl4u4Igsws4a1fd1Vq3ezrhn4KmFw==} engines: {node: '>= 14'} - agentkeepalive@4.5.0: - resolution: {integrity: sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew==} - engines: {node: '>= 8.0.0'} - airtable@0.12.2: resolution: {integrity: sha512-HS3VytUBTKj8A0vPl7DDr5p/w3IOGv6RXL0fv7eczOWAtj9Xe8ri4TAiZRXoOyo+Z/COADCj+oARFenbxhmkIg==} engines: {node: '>=8.0.0'} @@ -4185,17 +4191,10 @@ packages: resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} engines: {node: '>=14'} - form-data-encoder@1.7.2: - resolution: {integrity: sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A==} - form-data@4.0.0: resolution: {integrity: sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==} engines: {node: '>= 6'} - formdata-node@4.4.1: - resolution: {integrity: sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ==} - engines: {node: '>= 12.20'} - fraction.js@4.3.7: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} @@ -5165,10 +5164,6 @@ packages: node-addon-api@7.1.1: resolution: {integrity: sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==} - node-domexception@1.0.0: - resolution: {integrity: sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==} - engines: {node: '>=10.5.0'} - node-fetch-native@1.6.4: resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==} @@ -6551,10 +6546,6 @@ packages: resolution: {integrity: sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw==} engines: {node: '>= 8'} - web-streams-polyfill@4.0.0-beta.3: - resolution: {integrity: sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug==} - engines: {node: '>= 14'} - webidl-conversions@3.0.1: resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==} @@ -8521,21 +8512,33 @@ snapshots: '@one-ini/wasm@0.1.1': {} + '@orama/cuid2@2.2.3': + dependencies: + '@noble/hashes': 1.4.0 + + '@orama/highlight@0.1.8': {} + '@orama/orama@2.0.23': {} - '@orama/react-components@0.0.25(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.6.3)': + '@orama/orama@3.0.3': {} + + '@orama/react-components@0.1.23(react-dom@18.3.1(react@18.3.1))(react@18.3.1)': dependencies: - '@orama/wc-components': 0.0.25(typescript@5.6.3) + '@orama/wc-components': 0.1.23 react: 18.3.1 react-dom: 18.3.1(react@18.3.1) - transitivePeerDependencies: - - encoding - - typescript - '@orama/wc-components@0.0.25(typescript@5.6.3)': + '@orama/switch@3.0.3(@orama/orama@3.0.3)(@oramacloud/client@2.1.4)': + dependencies: + '@orama/orama': 3.0.3 + '@oramacloud/client': 2.1.4 + + '@orama/wc-components@0.1.23': dependencies: - '@orama/orama': 2.0.23 - '@oramacloud/client': 1.3.15(typescript@5.6.3) + '@orama/highlight': 0.1.8 + '@orama/orama': 3.0.3 + '@orama/switch': 3.0.3(@orama/orama@3.0.3)(@oramacloud/client@2.1.4) + '@oramacloud/client': 2.1.4 '@phosphor-icons/webcomponents': 2.1.5 '@stencil/core': 4.20.0 '@stencil/store': 2.0.16(@stencil/core@4.20.0) @@ -8546,25 +8549,12 @@ snapshots: marked-highlight: 2.1.4(marked@13.0.2) shiki: 1.10.3 sse.js: 2.5.0 - transitivePeerDependencies: - - encoding - - typescript - '@oramacloud/client@1.3.15(typescript@5.6.3)': + '@oramacloud/client@2.1.4': dependencies: - '@orama/orama': 2.0.23 - '@paralleldrive/cuid2': 2.2.2 + '@orama/cuid2': 2.2.3 + '@orama/orama': 3.0.3 lodash: 4.17.21 - openai: 4.51.0 - react: 18.3.1 - vue: 3.4.26(typescript@5.6.3) - transitivePeerDependencies: - - encoding - - typescript - - '@paralleldrive/cuid2@2.2.2': - dependencies: - '@noble/hashes': 1.4.0 '@parcel/watcher-android-arm64@2.4.1': optional: true @@ -9541,11 +9531,13 @@ snapshots: entities: 4.5.0 estree-walker: 2.0.2 source-map-js: 1.2.1 + optional: true '@vue/compiler-dom@3.4.26': dependencies: '@vue/compiler-core': 3.4.26 '@vue/shared': 3.4.26 + optional: true '@vue/compiler-sfc@3.4.26': dependencies: @@ -9558,34 +9550,41 @@ snapshots: magic-string: 0.30.15 postcss: 8.4.49 source-map-js: 1.2.1 + optional: true '@vue/compiler-ssr@3.4.26': dependencies: '@vue/compiler-dom': 3.4.26 '@vue/shared': 3.4.26 + optional: true '@vue/reactivity@3.4.26': dependencies: '@vue/shared': 3.4.26 + optional: true '@vue/runtime-core@3.4.26': dependencies: '@vue/reactivity': 3.4.26 '@vue/shared': 3.4.26 + optional: true '@vue/runtime-dom@3.4.26': dependencies: '@vue/runtime-core': 3.4.26 '@vue/shared': 3.4.26 csstype: 3.1.3 + optional: true '@vue/server-renderer@3.4.26(vue@3.4.26(typescript@5.6.3))': dependencies: '@vue/compiler-ssr': 3.4.26 '@vue/shared': 3.4.26 vue: 3.4.26(typescript@5.6.3) + optional: true - '@vue/shared@3.4.26': {} + '@vue/shared@3.4.26': + optional: true '@web3-storage/multipart-parser@1.0.0': {} @@ -11135,19 +11134,12 @@ snapshots: cross-spawn: 7.0.3 signal-exit: 4.1.0 - form-data-encoder@1.7.2: {} - form-data@4.0.0: dependencies: asynckit: 0.4.0 combined-stream: 1.0.8 mime-types: 2.1.35 - formdata-node@4.4.1: - dependencies: - node-domexception: 1.0.0 - web-streams-polyfill: 4.0.0-beta.3 - fraction.js@4.3.7: {} framer-motion@11.11.17(react-dom@18.3.1(react@18.3.1))(react@18.3.1): @@ -12188,8 +12180,6 @@ snapshots: node-addon-api@7.1.1: {} - node-domexception@1.0.0: {} - node-fetch-native@1.6.4: {} node-fetch@2.7.0: @@ -13775,6 +13765,7 @@ snapshots: '@vue/shared': 3.4.26 optionalDependencies: typescript: 5.6.3 + optional: true watchpack@2.4.2: dependencies: @@ -13789,8 +13780,6 @@ snapshots: web-streams-polyfill@3.3.3: {} - web-streams-polyfill@4.0.0-beta.3: {} - webidl-conversions@3.0.1: {} webpack-sources@3.2.3: {}