Skip to content

Commit

Permalink
removed product hunt banners, added search for blog and documentations
Browse files Browse the repository at this point in the history
  • Loading branch information
@tulsiojha
tulsiojha committed Jun 27, 2024
1 parent 633c468 commit bdfd22a
Show file tree
Hide file tree
Showing 11 changed files with 125 additions and 67 deletions.
54 changes: 34 additions & 20 deletions src/apps/devdoc/app/components/flexsearch.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@ const loadIndexesPromises = new Map<string, Promise<void>>();

const loadIndexesImpl = async (
basePath: string,
locale: string
locale: string,
): Promise<void> => {
const response = await fetch(
`${basePath}/_next/static/chunks/nextra-data-${locale}.json`
`${basePath}/_next/static/chunks/nextra-data-${locale}.json`,
);
const searchData = (await response.json()) as SearchData;

Expand Down Expand Up @@ -103,6 +103,8 @@ const loadIndexesImpl = async (
},
});

console.log('searchData', sectionIndex);

let pageId = 0;

for (const [route, structurizedData] of Object.entries(searchData)) {
Expand Down Expand Up @@ -165,6 +167,8 @@ export function Flexsearch(): ReactElement {
const [results, setResults] = useState<SearchResult[]>([]);
const [search, setSearch] = useState('');

const router = useRouter();

const doSearch = (search: string) => {
if (!search) return;
const [pageIndex, sectionIndex] = indexes[locale];
Expand Down Expand Up @@ -211,19 +215,19 @@ export function Flexsearch(): ReactElement {
prefix: isFirstItemOfPage && (
<div
className={cn(
'headingMd mx-xl pb-md mb-md border-b border-border-default'
'wb-headingMd wb-mx-xl wb-pb-md wb-mb-md wb-border-b wb-border-border-default',
)}
>
{result.doc.title}
</div>
),
children: (
<>
<div className="text-base bodyMd-semibold text-text-default">
<div className="wb-text-base wb-bodyMd-semibold wb-text-text-default">
<HighlightMatches match={search} value={title} />
</div>
{content && (
<div className="excerpt bodySm text-text-soft">
<div className="wb-excerpt wb-bodySm wb-text-text-soft">
<HighlightMatches match={search} value={content} />
</div>
)}
Expand All @@ -246,13 +250,20 @@ export function Flexsearch(): ReactElement {
}
return a._page_rk - b._page_rk;
})
.filter(
(res) =>
(res.route.startsWith('/docs') &&
router.route.startsWith('/docs')) ||
(res.route.startsWith('/blog') && router.route.startsWith('/blog')),
)
.map((res) => ({
id: `${res._page_rk}_${res._section_rk}`,
route: res.route,
prefix: res.prefix,
children: res.children,
}))
})),
);
console.log(router);
};

const preload = useCallback(
Expand All @@ -267,7 +278,7 @@ export function Flexsearch(): ReactElement {
setLoading(false);
}
},
[locale, basePath]
[locale, basePath],
);

const handleChange = async (value: string) => {
Expand Down Expand Up @@ -298,21 +309,22 @@ export function Flexsearch(): ReactElement {
setSearch('');
}
}, [show]);

return (
<Popup.Root
show={show}
onOpenChange={(e) => {
setShow(e);
}}
>
<Popup.Content className="!p-0">
<div className="flex flex-col">
<div className="flex flex-row items-center sticky top-0 bg-surface-basic-default border-b border-border-default pr-xs">
<span className="pl-xl pr-md py-xl">
<Popup.Content className="!wb-p-0">
<div className="wb-flex wb-flex-col">
<div className="wb-flex wb-flex-row wb-items-center wb-sticky wb-top-0 wb-bg-surface-basic-default wb-border-b wb-border-border-default wb-pr-xs">
<span className="wb-pl-xl wb-pr-md wb-py-xl wb-text-text-default">
<Search size={20} />
</span>
<input
className="flex-1 outline-none p-lg min-h-[32px] box-content bodyLg placeholder:text-text-disabled text-text-default"
className="wb-flex-1 wb-outline-none wb-p-lg wb-min-h-[32px] wb-box-content wb-bodyLg placeholder:wb-text-text-disabled wb-text-text-default wb-bg-surface-basic-default"
placeholder="Search"
onKeyDown={setKeyEvent}
value={search}
Expand All @@ -323,8 +335,10 @@ export function Flexsearch(): ReactElement {
handleChange(target.value);
}}
/>
<span className="pl-lg pr-xl bodyMd text-text-soft">⌘K</span>
<div className="border-l border-border-default h-[26px]" />
<span className="wb-pl-lg wb-pr-xl wb-bodyMd wb-text-text-soft">
⌘K
</span>
<div className="wb-border-l wb-border-border-default wb-h-[26px]" />
<IconButton
variant="plain"
size="md"
Expand All @@ -336,23 +350,23 @@ export function Flexsearch(): ReactElement {
</div>
<div>
{results.length === 0 && (
<div className="bodyMd px-4xl py-8xl text-center text-text-soft">
<div className="wb-bodyMd wb-px-4xl wb-py-8xl wb-text-center wb-text-text-soft">
No recent results
</div>
)}
{results.length > 0 && (
<ListNavigate
selectedClass="bg-surface-basic-hovered"
selectedClass="wb-bg-surface-basic-hovered"
keyPressEvent={keyEvent}
className="py-xl px-lg flex flex-col space-y-lg"
className="wb-py-xl wb-px-lg wb-flex wb-flex-col wb-space-y-lg"
childSelectorClass="search-result-item"
>
{results.map((res) => (
<div key={res.id} className="flex flex-col">
<div>{res.prefix}</div>
<div key={res.id} className="wb-flex wb-flex-col">
<div className="text-text-default">{res.prefix}</div>
<Link
href={res.route}
className="transition-all rounded search-result-item flex flex-col gap-md px-xl py-lg"
className="wb-transition-all wb-rounded search-result-item wb-flex wb-flex-col wb-gap-md wb-px-xl wb-py-lg"
>
{res.children}
</Link>
Expand Down
33 changes: 33 additions & 0 deletions src/apps/devdoc/app/components/header-secondary.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@ import useMenu from '../utils/use-menu';
import Wrapper from './wrapper';
import NavigationMenuV2 from './nav-menu-v2';
import JoinProvidersDialog from './join-provider-dialog';
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import useSearch from '../utils/use-search';
import SearchBox from './search';

const HeaderSecondary = ({
activePath,
Expand All @@ -17,6 +21,34 @@ const HeaderSecondary = ({
}) => {
const { config } = useConfig();
const { state, setState } = useMenu();

const { setShow: setShowSearch } = useSearch();
const route = useRouter();

useEffect(() => {
setShowSearch(false);
}, [route]);

useEffect(() => {
const commandK = (e: KeyboardEvent) => {
if (e.key === 'k' && (e.ctrlKey || e.metaKey)) {
setShowSearch(true);
}
if (e.key === 'Escape') {
setShowSearch(false);
}
};

document.addEventListener('keydown', commandK);

return () => {
document.removeEventListener('keydown', commandK);
};
}, []);

const showSearch = () =>
route.route.startsWith('/blog') || route.route.startsWith('/docs');

return (
<div className="lg:wb-relative wb-flex wb-flex-row wb-top-0 wb-left-0 wb-right-0 wb-bg-surface-basic-subdued wb-border-b wb-border-border-default wb-min-h-[var(--kl-navbar-height)] wb-z-50">
<Wrapper className="wb-flex">
Expand All @@ -28,6 +60,7 @@ const HeaderSecondary = ({

<div className="wb-flex-1 lg:wb-flex-none wb-flex wb-flex-row wb-gap-2xl wb-items-center wb-justify-end">
<div className="wb-flex wb-flex-col lg:wb-flex-row wb-gap-xl lg:wb-items-center">
{showSearch() && <SearchBox />}
<a
href={config.gitRepoUrl}
aria-label="kloudlite-github"
Expand Down
14 changes: 6 additions & 8 deletions src/apps/devdoc/app/components/page/blog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ const ListDetailItem = ({
};
const BlogHome = () => {
const [tab, setTab] = useState<'overview' | 'engineering' | 'community'>(
'overview'
'overview',
);

const config = useConfig();
Expand All @@ -111,21 +111,22 @@ const BlogHome = () => {

useEffect(() => {
const blogPage = config.config.pageOpts?.pageMap.find(
(p) => p.kind === 'Folder' && p.route === '/blog'
(p) => p.kind === 'Folder' && p.route === '/blog',
);

const blogPosts =
blogPage?.kind === 'Folder'
? blogPage.children.filter(
(f) => f.kind === 'MdxPage' && f.frontMatter && !f.frontMatter.draft
(f) =>
f.kind === 'MdxPage' && f.frontMatter && !f.frontMatter.draft,
) || ([] as PageMapItem[])
: ([] as PageMapItem[]);
// @ts-ignore
setItems(
blogPosts.sort((a: any, b: any) => {
// @ts-ignore
return new Date(b?.frontMatter?.date) - new Date(a?.frontMatter?.date);
})
}),
);
}, [config]);

Expand Down Expand Up @@ -153,9 +154,6 @@ const BlogHome = () => {
))}
</Tab.Root>
</div>
<div className="wb-w-full md:wb-w-[330px]">
<TextInput placeholder="Search" prefixIcon={<Search />} />
</div>
</div>
<SectionWrapper className="wb-flex wb-flex-col" noPadding>
<GraphExtended>
Expand Down Expand Up @@ -198,7 +196,7 @@ const BlogHome = () => {
<div
className={cn(
'wb-py-3xl wb-px-3xl md:wb-pt-3xl md:wb-py-xl md:wb-px-5xl wb-flex wb-flex-col wb-gap-3xl lg:wb-gap-5xl md:wb-flex-row md:wb-items-center lg:wb-h-8xl wb-transition-all',
index === page.length - 1 ? 'wb-pb-3xl' : ''
index === page.length - 1 ? 'wb-pb-3xl' : '',
)}
>
<div className="wb-flex-1 wb-bodyLg wb-text-text-default lg:wb-line-clamp-1">
Expand Down
4 changes: 2 additions & 2 deletions src/apps/devdoc/app/components/page/contact-us.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const addContact = async (
mobile: string;
country: string;
message: string;
}
},
) => {
if (!app) {
return;
Expand Down Expand Up @@ -205,7 +205,7 @@ const ContactRoot = () => {
message={errors.message?.message}
/>
</div>
<div className="wb-w-full md:wb-w-fit">
<div className="wb-w-full md:wb-w-fit wb-self-end">
<Button
loading={loading}
type="submit"
Expand Down
2 changes: 1 addition & 1 deletion src/apps/devdoc/app/components/page/index-new.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@ const Index = () => {
return (
<div>
<Wrapper className="wb-relative wb-flex wb-justify-center lg:wb-justify-start wb-py-6xl md:wb-pt-8xl lg:wb-pt-10xl">
<div className="wb-z-[51]">
<div className="wb-z-[51] wb-hidden">
<div
className="fixed wb-right-[10px] wb-bottom-[10px] wb-z-[1]"
dangerouslySetInnerHTML={{
Expand Down
15 changes: 9 additions & 6 deletions src/apps/devdoc/app/components/search.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,24 @@ import { cn } from '../utils/commons';
import useSearch from '../utils/use-search';

const SearchBox = ({ className }: { className?: string }) => {
const { setShow } = useSearch();
const { setShow, show } = useSearch();
return (
<div className={cn('flex flex-row items-center gap-xl', className)}>
<div
className={cn('wb-flex wb-flex-row wb-items-center wb-gap-xl', className)}
>
<button
onClick={() => {
setShow(true);
console.log('here', show);
}}
className="flex md:!hidden lg:!flex flex-row items-center rounded border border-border-default bg-surface-basic-default h-[36px] min-w-[200px] w-full"
className="wb-hidden xl:wb-flex wb-flex-row wb-items-center wb-rounded wb-border wb-border-border-default wb-bg-surface-basic-default wb-h-[38px] xl:wb-min-w-[200px] wb-w-full wb-box-content"
>
<span className="text-icon-default py-lg pl-lg pr-md">
<span className="wb-text-icon-default wb-py-lg wb-pl-lg wb-pr-md">
<Search size={20} />
</span>
<span className="text-text-disabled bodyMd">Search</span>
<span className="wb-text-text-disabled wb-bodyMd">Search</span>
</button>
<div className="hidden md:!flex lg:!hidden">
<div className="wb-flex xl:wb-hidden">
<IconButton
icon={<Search />}
variant="plain"
Expand Down
3 changes: 0 additions & 3 deletions src/apps/devdoc/app/layout/mdx-components.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,9 +203,6 @@ export const createComponents = ({
className="wb-mt-3xl wb-bg-surface-basic-input wb-border wb-border-border-default wb-rounded wb-p-xl"
/>
),
img: (props) => (
<img {...props} className="wb-p-3xl wb-mt-3xl wb-bg-white" />
),
// code: Code,
...components,
};
Expand Down
Loading

0 comments on commit bdfd22a

Please sign in to comment.