Skip to content

Commit 1e34850

Browse files
moonmeistermoonmeister
authored
Merge pull request #217 from wpengine/bug-fix-mobile-desktop-issues
bug: fix mobile desktop issues
2 parents 185253a + 793232e commit 1e34850

File tree

10 files changed

+198
-23
lines changed

10 files changed

+198
-23
lines changed

‎src/components/docs-breadcrumbs.jsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { ChevronRightIcon } from "@heroicons/react/24/outline";
2+
import { useRouter } from "next/router";
3+
import Link from "@/components/link";
4+
import { normalizeHref } from "@/utils/strings";
5+
6+
export default function DocsBreadcrumbs({ routes }) {
7+
const generateBreadcrumbs = (breadcrumbRoutes, currentRoute) => {
8+
const breadcrumbs = [];
9+
10+
const traverse = (navigationRoutes, path) => {
11+
const currentIndex = navigationRoutes.findIndex(
12+
(route) => normalizeHref(route.route) === normalizeHref(path),
13+
);
14+
15+
if (currentIndex === -1) {
16+
return;
17+
}
18+
19+
breadcrumbs.unshift(navigationRoutes[currentIndex]);
20+
21+
const parentPath = navigationRoutes[currentIndex].parentPath;
22+
if (!parentPath) {
23+
return;
24+
}
25+
26+
traverse(navigationRoutes, parentPath);
27+
};
28+
29+
traverse(routes, currentRoute);
30+
return breadcrumbs;
31+
};
32+
33+
const router = useRouter();
34+
const currentPath = router.pathname;
35+
const breadcrumbLinks = generateBreadcrumbs(routes, currentPath);
36+
37+
if (breadcrumbLinks.length === 0 || currentPath === "/docs") {
38+
return;
39+
}
40+
41+
const homeRoute = routes[0];
42+
homeRoute.title = "Docs";
43+
breadcrumbLinks.unshift(homeRoute);
44+
45+
return (
46+
<div className="mb-7 mt-4 md:mb-10 md:mt-2">
47+
<div className="flex flex-wrap items-center gap-2 text-sm">
48+
{breadcrumbLinks.map((breadcrumb, index) =>
49+
normalizeHref(breadcrumb.route) === normalizeHref(currentPath) ? (
50+
<span key={index}>{breadcrumb.title}</span>
51+
) : (
52+
<Link
53+
key={index}
54+
className="font-normal text-gray-500 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
55+
href={breadcrumb.route}
56+
noDefaultStyles
57+
aria-label={breadcrumb.title}
58+
>
59+
<span>{breadcrumb.title}</span>
60+
<span>
61+
<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
62+
</span>
63+
</Link>
64+
),
65+
)}
66+
</div>
67+
</div>
68+
);
69+
}

‎src/components/docs-layout.jsx‎

Lines changed: 31 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,39 +4,65 @@ import {
44
DisclosurePanel,
55
} from "@headlessui/react";
66
import { ChevronRightIcon, ChevronDownIcon } from "@heroicons/react/24/outline";
7+
import DocsBreadcrumbs from "./docs-breadcrumbs";
8+
import DocsPreviousNextLinks from "./docs-previous-next-link";
79
import OnThisPageNav from "./on-this-page-nav";
810
import DocsNav from "@/components/docs-nav";
911
import routes from "@/pages/docs/nav.json";
1012
import "rehype-callouts/theme/vitepress";
1113

14+
const flattenRoutes = (routeConfig) => {
15+
const flatRoutes = [];
16+
17+
const traverse = (innerRoutes, parentPath = "") => {
18+
for (const route of innerRoutes) {
19+
const fullPath = `${parentPath}${route.route}`;
20+
flatRoutes.push({ ...route, fullPath, parentPath });
21+
22+
if (route.children) {
23+
traverse(route.children, `${parentPath}${route.route}`);
24+
}
25+
}
26+
};
27+
28+
traverse(routeConfig);
29+
return flatRoutes;
30+
};
31+
1232
export default function DocumentPage({ children, metadata }) {
33+
const flatRoutes = flattenRoutes(routes);
1334
return (
1435
<>
1536
<Disclosure
1637
as="div"
17-
className="sticky top-[85px] z-10 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-sm md:hidden"
38+
className="sticky top-[84px] z-10 border-b-[1px] border-gray-800 bg-gray-900/80 backdrop-blur-sm md:hidden"
1839
>
1940
<DisclosureButton className="group flex items-center rounded-md px-2 py-1.5 text-white/70 hover:text-white">
2041
<ChevronDownIcon className="relative z-20 hidden h-4 w-4 group-data-[open]:inline" />
2142
<ChevronRightIcon className="inline h-4 w-4 group-data-[open]:hidden" />
2243
<span className="pl-1">Menu</span>
2344
</DisclosureButton>
2445
<DisclosurePanel as="nav" className="hidden data-[open]:block">
25-
<DocsNav className="container-main" routes={routes} />
46+
<DocsNav
47+
className="container-main h-screen max-h-screen overflow-y-scroll"
48+
routes={routes}
49+
/>
2650
</DisclosurePanel>
2751
</Disclosure>
28-
<main className="relative mx-auto flex grid-cols-[1fr_auto_1fr] flex-col gap-6 md:grid">
52+
<main className="relative mx-auto flex max-w-full grid-cols-[1fr_auto_1fr] flex-col gap-6 overflow-scroll md:grid">
2953
<nav className="sticky top-[84px] hidden h-min w-60 overflow-y-auto p-6 md:block">
3054
<DocsNav routes={routes} />
3155
</nav>
3256
<nav className="sticky top-[84px] order-last hidden h-min w-[240px] overflow-y-auto p-6 lg:block">
3357
<OnThisPageNav>{children}</OnThisPageNav>
3458
</nav>
35-
<article className="container-main prose prose-invert min-h-[calc(100vh-120px)] max-w-[80ch] py-14 md:py-24">
59+
<article className="container-main xs:py-20 prose prose-invert min-h-[calc(100vh-120px)] max-w-full py-0 sm:max-w-[80ch] sm:py-20 md:py-24">
60+
<DocsBreadcrumbs routes={flatRoutes} />
3661
{metadata?.title && (
37-
<h1 className="article-title">{metadata.title}</h1>
62+
<h1 className="article-title break-words">{metadata.title}</h1>
3863
)}
3964
{children}
65+
<DocsPreviousNextLinks routes={flatRoutes} />
4066
</article>
4167
</main>
4268
</>

‎src/components/docs-nav.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Fragment } from "react";
22
import Link from "@/components/link";
3-
import { classNames } from "@/utils/strings";
3+
import { normalizeHref, classNames } from "@/utils/strings";
44

55
export default function DocsNav({ as, routes, level = 0, className }) {
66
const As = as || Fragment;
@@ -29,7 +29,7 @@ function NavItem({ item, level, ...props }) {
2929
<li className="py-2 text-gray-400">
3030
<Link
3131
data-doc-nav-level={level}
32-
href={item.route}
32+
href={normalizeHref(item.route)}
3333
noDefaultStyles
3434
activeClassName="text-blue-500 active"
3535
{...props}

‎src/components/docs-previous-next-link.jsx‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/24/outline";
2+
import { useRouter } from "next/router";
3+
import Link from "@/components/link";
4+
import { normalizeHref } from "@/utils/strings";
5+
6+
export default function DocsPreviousNextLinks({ routes }) {
7+
const router = useRouter();
8+
const currentPath = router.pathname;
9+
10+
const currentIndex = routes.findIndex(
11+
(route) => normalizeHref(route.route) === normalizeHref(currentPath),
12+
);
13+
14+
if (currentIndex === -1) {
15+
return;
16+
}
17+
18+
const previousPage = routes[currentIndex - 1];
19+
const nextPage = routes[currentIndex + 1];
20+
21+
return (
22+
<nav aria-label="pagination" className="mb-4 mt-8 flex justify-between">
23+
{previousPage && (
24+
<Link
25+
className="max-w-[200px] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
26+
href={previousPage.route}
27+
noDefaultStyles
28+
aria-label={`Go to previous page: ${previousPage.title}`}
29+
>
30+
<span className="mb-1 ml-10 block text-sm">Previous</span>
31+
<span>
32+
<ChevronLeftIcon className="inline h-5 w-10 pr-4 align-text-top" />
33+
</span>
34+
<span className="text-white">{previousPage.title}</span>
35+
</Link>
36+
)}
37+
{nextPage && (
38+
<Link
39+
className="max-w-[200px] font-normal text-gray-400 no-underline transition duration-200 ease-in hover:text-white focus:text-white"
40+
href={nextPage.route}
41+
noDefaultStyles
42+
aria-label={`Go to next page: ${nextPage.title}`}
43+
>
44+
<span className="mb-1 block text-sm">Next</span>
45+
<span className="text-white">{nextPage.title}</span>
46+
<span>
47+
<ChevronRightIcon className="inline h-5 w-10 pl-4 align-text-top" />
48+
</span>
49+
</Link>
50+
)}
51+
</nav>
52+
);
53+
}

‎src/components/footer.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export default function Footer() {
77
<div className="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24">
88
<FooterColumns />
99
</div>
10-
<div className="mt-24 text-gray-500">
10+
<div className="mt-2 text-gray-500 lg:mt-24">
1111
<p>
1212
Powered by{" "}
1313
<Link

‎src/components/header.jsx‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
import { SiDiscord, SiGithub } from "@icons-pack/react-simple-icons";
2+
import { useState } from "react";
23
import FaustLogo from "./faust-logo";
34
import PrimaryMenu from "./primary-menu";
45
import SearchBar from "./search-bar";
56
import Link from "@/components/link";
7+
import { classNames } from "@/utils/strings";
68

79
const socialIcons = [
810
{
@@ -18,8 +20,17 @@ const socialIcons = [
1820
];
1921

2022
export default function Header() {
23+
const [isMenuOpen, setIsMenuOpen] = useState(false);
24+
const [isSearchOpen, setIsSearchOpen] = useState(false);
25+
2126
return (
22-
<div className="container-blur-bg sticky top-0 z-10 border-b-[1px] border-gray-800 bg-gray-900/80">
27+
<div
28+
className={classNames(
29+
"container-blur-bg top-0 border-b-[1px] border-gray-800 bg-gray-900/80",
30+
isMenuOpen ? "fixed z-[11] w-full" : "sticky z-10",
31+
isSearchOpen ? "z-[11]" : "z-10",
32+
)}
33+
>
2334
<header className="container mx-auto flex items-center justify-between px-4 py-6 sm:px-6 md:max-w-6xl md:px-8">
2435
<div className="flex items-center gap-8">
2536
<Link
@@ -37,9 +48,12 @@ export default function Header() {
3748
</Link>
3849
</div>
3950
<div className="flex items-center gap-5 md:w-full md:justify-between">
40-
<PrimaryMenu />
51+
<PrimaryMenu
52+
onMenuToggle={setIsMenuOpen}
53+
setIsMenuOpen={setIsMenuOpen}
54+
/>
4155
<span className="flex gap-5">
42-
<SearchBar />
56+
<SearchBar setIsSearchOpen={setIsSearchOpen} />
4357
<div className="hidden items-center space-x-4 md:flex">
4458
{socialIcons.map(({ url, name, icon: Icon }) => (
4559
<Link

‎src/components/primary-menu.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const CustomLink = forwardRef((props, reference) => {
1515
);
1616
});
1717

18-
export default function PrimaryMenu({ className }) {
18+
export default function PrimaryMenu({ isMenuOpen, setIsMenuOpen, className }) {
1919
return (
2020
<nav className={classNames("flex items-center space-x-4", className)}>
2121
<ul className="hidden flex-row space-x-4 pl-4 md:flex">
@@ -51,7 +51,10 @@ export default function PrimaryMenu({ className }) {
5151
</li>
5252
</ul>
5353
<Menu>
54-
<MenuButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
54+
<MenuButton
55+
className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden"
56+
onClick={() => setIsMenuOpen(!isMenuOpen)}
57+
>
5558
<span className="sr-only hidden group-data-[open]:block">
5659
Open main nav
5760
</span>

‎src/components/search-bar.jsx‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import debounce from "lodash.debounce";
44
import { useRouter } from "next/router";
55
import { useState, useEffect, useRef, useCallback } from "react";
66

7-
export default function SearchBar() {
7+
export default function SearchBar({ setIsSearchOpen }) {
88
const [items, setItems] = useState([]);
99
const [inputValue, setInputValue] = useState("");
1010
const [isModalOpen, setIsModalOpen] = useState(false);
@@ -15,9 +15,13 @@ export default function SearchBar() {
1515
setIsModalOpen(true);
1616
setInputValue("");
1717
setItems([]);
18-
}, []);
18+
setIsSearchOpen(true);
19+
}, [setIsSearchOpen]);
1920

20-
const closeModal = useCallback(() => setIsModalOpen(false), []);
21+
const closeModal = useCallback(() => {
22+
setIsModalOpen(false);
23+
setIsSearchOpen(false);
24+
}, [setIsSearchOpen]);
2125

2226
const handleOutsideClick = useCallback(
2327
(event) => {
@@ -125,7 +129,9 @@ export default function SearchBar() {
125129
<>
126130
<button
127131
className="inline-flex items-center rounded-md bg-gray-800 px-2 py-1.5 text-sm font-medium text-gray-400 hover:bg-gray-700"
128-
onClick={openModal}
132+
onClick={() => {
133+
openModal();
134+
}}
129135
type="button"
130136
>
131137
<span className="sr-only md:hidden">Open search</span>

‎src/pages/docs/index.mdx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,12 @@ From data fetching to Block components, Faust.js® has you covered. Build your h
1212

1313
Some of the main Faust.js® features include:
1414

15-
| Feature | Description |
16-
| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------- |
17-
| [Authentication](/docs/how-to/authentication/) | Authenticate users in your Next.js app with WordPress |
18-
| [Block Components](/docs/how-to/rendering-blocks/) | Render WordPress blocks in your Next.js app |
19-
| [Post Preview](/docs/how-to/post-preview/) | Preview posts and pages in your Next.js app before publishing them |
20-
| [Template Hierarchy](/docs/how-to/template-heirarchy/) | Fetch data and render posts and pages with a React based version of WordPress' Template Hierarchy |
15+
| Feature | Description |
16+
| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
17+
| [Authentication](/docs/how-to/authentication/) | Authenticate users in your Next.js app with WordPress |
18+
| [Block Components](/docs/how-to/rendering-blocks/) | Render WordPress blocks in your Next.js app |
19+
| [Post Preview](/docs/how-to/post-previews/) | Preview posts and pages in your Next.js app before publishing them |
20+
| [Template Hierarchy](/docs/how-to/rendering-blocks-with-the-template-hierarchy/) | Fetch data and render posts and pages with a React based version of WordPress' Template Hierarchy |
2121

2222
## How to Use These Docs
2323

‎src/utils/strings.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,7 @@ export function classNames(...arguments_) {
2222

2323
return classes;
2424
}
25+
26+
export function normalizeHref(path) {
27+
return path.endsWith("/") ? path : `${path}/`;
28+
}

0 commit comments

Comments
 (0)