From b9707db139c1cf3ccb74af0884a77f50989421e1 Mon Sep 17 00:00:00 2001 From: Utku <74243531+utkubakir@users.noreply.github.com> Date: Sun, 5 Nov 2023 23:15:24 +0300 Subject: [PATCH] [ENG-303] Search on Docs (#1735) * implement search * fix pnpm lock * indexer action and added some alerts * test action * oops * styles pls * disable input ring --- .github/workflows/search-index.yml | 24 +++ apps/landing/package.json | 1 + apps/landing/src/app/docs/Breadcrumbs.tsx | 5 +- .../src/app/docs/Sidebar/MobileSidebar.tsx | 2 +- apps/landing/src/app/docs/Sidebar/Search.tsx | 22 ++- apps/landing/src/app/docs/layout.tsx | 3 + apps/landing/src/components/DocsLayout.tsx | 66 -------- apps/landing/src/components/DocsSidebar.tsx | 89 ---------- apps/landing/src/styles/search.scss | 71 ++++++++ .../Layout/Sidebar/EphemeralSection.tsx | 9 +- .../Layout/Sidebar/LibrarySection.tsx | 7 - .../settings/library/locations/$id.tsx | 2 +- pnpm-lock.yaml | 155 ++++++++++++++++++ 13 files changed, 282 insertions(+), 174 deletions(-) create mode 100644 .github/workflows/search-index.yml delete mode 100644 apps/landing/src/components/DocsLayout.tsx delete mode 100644 apps/landing/src/components/DocsSidebar.tsx create mode 100644 apps/landing/src/styles/search.scss diff --git a/.github/workflows/search-index.yml b/.github/workflows/search-index.yml new file mode 100644 index 000000000..085ac1911 --- /dev/null +++ b/.github/workflows/search-index.yml @@ -0,0 +1,24 @@ +name: Trigger Algolia Crawler + +on: + workflow_dispatch: + push: + paths: + - 'docs/**' + branches: + - main + pull_request: + paths: + - '.github/workflows/search-index.yml' + +jobs: + trigger_crawler: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v2 + + - name: Trigger Algolia Crawler + run: | + curl -X POST --user ${{secrets.CRAWLER_USER_ID}}:${{secrets.CRAWLER_API_KEY}} "https://crawler.algolia.com/api/1/crawlers/${{secrets.CRAWLER_ID}}/reindex" diff --git a/apps/landing/package.json b/apps/landing/package.json index 42641522d..d8dd96371 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -10,6 +10,7 @@ "typecheck": "contentlayer build && tsc -b" }, "dependencies": { + "@docsearch/react": "3", "@octokit/webhooks": "^12.0.3", "@phosphor-icons/react": "^2.0.13", "@react-three/drei": "^9.88.4", diff --git a/apps/landing/src/app/docs/Breadcrumbs.tsx b/apps/landing/src/app/docs/Breadcrumbs.tsx index fc27966af..04bcff859 100644 --- a/apps/landing/src/app/docs/Breadcrumbs.tsx +++ b/apps/landing/src/app/docs/Breadcrumbs.tsx @@ -2,6 +2,7 @@ import { CaretRight } from '@phosphor-icons/react'; import { useParams } from 'next/navigation'; +import { Fragment } from 'react'; import { toTitleCase } from '~/utils/util'; export function Breadcrumbs() { @@ -11,10 +12,10 @@ export function Breadcrumbs() { return (
{slug.map((item, index) => ( - <> + {index > 0 && } {toTitleCase(item)} - + ))}
); diff --git a/apps/landing/src/app/docs/Sidebar/MobileSidebar.tsx b/apps/landing/src/app/docs/Sidebar/MobileSidebar.tsx index 023aebf67..3d865adc5 100644 --- a/apps/landing/src/app/docs/Sidebar/MobileSidebar.tsx +++ b/apps/landing/src/app/docs/Sidebar/MobileSidebar.tsx @@ -23,7 +23,7 @@ export function MobileSidebarProvider({ children }: PropsWithChildren) { return {children}; } -function useMenuContext() { +export function useMenuContext() { const ctx = useContext(MenuContext); if (!ctx) throw new Error('useMenuContext must be used within a MenuProvider'); diff --git a/apps/landing/src/app/docs/Sidebar/Search.tsx b/apps/landing/src/app/docs/Sidebar/Search.tsx index 90967d447..644054049 100644 --- a/apps/landing/src/app/docs/Sidebar/Search.tsx +++ b/apps/landing/src/app/docs/Sidebar/Search.tsx @@ -1,14 +1,24 @@ 'use client'; -import { SearchInput } from '@sd/ui'; +import { DocSearch } from '@docsearch/react'; + +import { useMenuContext } from './MobileSidebar'; export function SearchBar() { + const menu = useMenuContext(); + return ( -
alert('Search coming soon...')} className="mb-5"> - ⌘K} +
{ + menu.open && menu.setOpen(false); + }} + > +
); diff --git a/apps/landing/src/app/docs/layout.tsx b/apps/landing/src/app/docs/layout.tsx index 17db9edee..edb5222f4 100644 --- a/apps/landing/src/app/docs/layout.tsx +++ b/apps/landing/src/app/docs/layout.tsx @@ -8,6 +8,9 @@ import { } from './Sidebar/MobileSidebar'; import 'katex/dist/katex.min.css'; +import '@docsearch/css'; +// This must be imported after the docsearch css +import '~/styles/search.scss'; import { Breadcrumbs } from './Breadcrumbs'; diff --git a/apps/landing/src/components/DocsLayout.tsx b/apps/landing/src/components/DocsLayout.tsx deleted file mode 100644 index 55dcbdf0a..000000000 --- a/apps/landing/src/components/DocsLayout.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { CaretRight, List, X } from '@phosphor-icons/react/dist/ssr'; -import { PropsWithChildren, useState } from 'react'; -import { slide as Menu } from 'react-burger-menu'; -import { Button } from '@sd/ui'; -import { DocsNavigation } from '~/utils/contentlayer'; -import { toTitleCase } from '~/utils/util'; - -import DocsSidebar from './DocsSidebar'; - -type DocsLayoutProps = { - docUrl?: string; - navigation: DocsNavigation; -}; - -export default function DocsLayout(props: PropsWithChildren) { - const [menuOpen, setMenuOpen] = useState(false); - - return ( -
- setMenuOpen(false)} - customBurgerIcon={false} - isOpen={menuOpen} - pageWrapId="page-container" - className="shadow-2xl shadow-black" - > -
- - -
- - - -
-
-
- -
- {props.docUrl?.split('/').map((item, index) => { - if (index === 2) return null; - return ( -
- {toTitleCase(item)} - {index < 1 && } -
- ); - })} -
-
{props.children}
-
-
-
- ); -} diff --git a/apps/landing/src/components/DocsSidebar.tsx b/apps/landing/src/components/DocsSidebar.tsx deleted file mode 100644 index 97861cd6e..000000000 --- a/apps/landing/src/components/DocsSidebar.tsx +++ /dev/null @@ -1,89 +0,0 @@ -import clsx from 'clsx'; -import Link from 'next/link'; -import { SearchInput } from '@sd/ui'; -import { DocsNavigation, iconConfig } from '~/utils/contentlayer'; -import { toTitleCase } from '~/utils/util'; - -interface DocsSidebarProps { - navigation: DocsNavigation; - activePath?: string; -} - -export default function DocsSidebar(props: DocsSidebarProps) { - const activeSection = props.activePath?.split('/')[2] || props.navigation[0]?.slug; - - const activeSectionData = props.navigation.find((section) => section.slug === activeSection); - - return ( - - ); -} diff --git a/apps/landing/src/styles/search.scss b/apps/landing/src/styles/search.scss new file mode 100644 index 000000000..ba6613e7a --- /dev/null +++ b/apps/landing/src/styles/search.scss @@ -0,0 +1,71 @@ +@tailwind utilities; + +// Set docsearch to dark mode and set primary color to our primary color +:root { + --docsearch-primary-color: rgb(37 153 255); + --docsearch-text-color: rgb(245, 246, 247); + --docsearch-container-background: rgba(9, 10, 17, 0.8); + --docsearch-modal-background: rgb(21, 23, 42); + --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64), 0 3px 8px 0 rgb(0, 3, 9); + --docsearch-searchbox-background: rgb(9, 10, 17); + --docsearch-searchbox-focus-background: #000; + --docsearch-hit-color: rgb(190, 195, 201); + --docsearch-hit-shadow: none; + --docsearch-hit-background: rgb(9, 10, 17); + --docsearch-key-gradient: linear-gradient(-26.5deg, rgb(86, 88, 114) 0%, rgb(49, 53, 91) 100%); + --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85), inset 0 0 1px 1px rgb(81, 87, 125), + 0 2px 2px 0 rgba(3, 4, 9, 0.3); + --docsearch-key-pressed-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d, + 0 1px 1px 0 #0304094d; + --docsearch-footer-background: rgb(30, 33, 54); + --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5), 0 -4px 8px 0 rgba(0, 0, 0, 0.2); + --docsearch-logo-color: rgb(255, 255, 255); + --docsearch-muted-color: rgb(127, 132, 151); +} + +.DocSearch-Button { + @apply m-0 flex h-[34px] w-full rounded-md border border-app-line bg-app-input text-sm leading-4 shadow-sm outline-none; +} + +.DocSearch-Button:hover, +.DocSearch-Button:focus, +.DocSearch-Button:active { + background: none; + box-shadow: none; + @apply border-primary bg-app-hover text-ink-faint; +} + +.DocSearch-Button-Key--pressed { + transform: none; +} + +.DocSearch-Button .DocSearch-Search-Icon { + @apply mr-2 py-0.5 text-gray-350; +} + +.DocSearch-Button-Placeholder { + @apply flex-1 border-none bg-transparent px-3 pl-0 pr-0 text-sm text-ink-faint outline-none; +} + +.DocSearch-Search-Icon { + @apply h-5 w-5; +} + +.DocSearch-Button-Keys { + min-width: auto; +} + +.DocSearch-Button-Key { + background: none; + @apply top-0 w-5 bg-app-button p-0 text-sm text-ink shadow; +} + +@media (max-width: 768px) { + .DocSearch-Button-Placeholder { + display: block; + } +} + +.DocSearch-Input:focus { + @apply ring-0; +} diff --git a/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx b/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx index 1e84d2dd8..93a61fb82 100644 --- a/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx +++ b/interface/app/$libraryId/Layout/Sidebar/EphemeralSection.tsx @@ -2,7 +2,7 @@ import { EjectSimple } from '@phosphor-icons/react'; import clsx from 'clsx'; import { useMemo, useState } from 'react'; import { useBridgeQuery, useLibraryQuery } from '@sd/client'; -import { Button, tw } from '@sd/ui'; +import { Button, toast, tw } from '@sd/ui'; import { Icon, IconName } from '~/components'; import { usePlatform } from '~/util/Platform'; @@ -12,8 +12,13 @@ import SeeMore from './SeeMore'; const Name = tw.span`truncate`; +// TODO: This eject button does nothing! const EjectButton = ({ className }: { className?: string }) => ( - ); diff --git a/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx b/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx index 534b592c1..0e3cd85e5 100644 --- a/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx +++ b/interface/app/$libraryId/Layout/Sidebar/LibrarySection.tsx @@ -1,4 +1,3 @@ -import { EjectSimple } from '@phosphor-icons/react'; import clsx from 'clsx'; import { useEffect, useState } from 'react'; import { Link, NavLink } from 'react-router-dom'; @@ -41,12 +40,6 @@ type TriggeredContextItem = tagId: number; }; -const EjectButton = ({ className }: { className?: string }) => ( - -); - export const LibrarySection = () => { const node = useBridgeQuery(['nodeState']); const locationsQuery = useLibraryQuery(['locations.list'], { keepPreviousData: true }); diff --git a/interface/app/$libraryId/settings/library/locations/$id.tsx b/interface/app/$libraryId/settings/library/locations/$id.tsx index a487ef8a8..aa0655f0b 100644 --- a/interface/app/$libraryId/settings/library/locations/$id.tsx +++ b/interface/app/$libraryId/settings/library/locations/$id.tsx @@ -225,7 +225,7 @@ const EditLocationForm = () => {