Skip to content

Commit b5ffb44

Browse files
kellenmacekellenmace
authored
Merge pull request #195 from wpengine/feature/convert-menus-to-json
Feature: Convert menus to JSON
2 parents 09238bc + 9a7e6dd commit b5ffb44

File tree

2 files changed

+182
-136
lines changed

2 files changed

+182
-136
lines changed

‎src/components/footer.jsx‎

Lines changed: 140 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
1-
import { gql, useQuery } from "@apollo/client";
21
import Link from "@/components/link";
32

43
export default function Footer() {
5-
const { data, loading, error } = useQuery(GET_FOOTER_NAV_ITEMS);
6-
7-
if (loading) return <p>Loading...</p>;
8-
if (error) return <p>Error! {error.message}</p>;
9-
104
return (
115
<footer className="bg-gray-950 px-8 pb-14 lg:px-16 lg:pb-24">
126
<div className="container-main container prose prose-invert border-t border-gray-900">
137
<div className="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24">
14-
<FooterColumns data={data} />
8+
<FooterColumns />
159
</div>
1610
<div className="mt-24 text-gray-500">
1711
<p>
@@ -42,91 +36,146 @@ export default function Footer() {
4236
);
4337
}
4438

45-
function FooterColumns({ data }) {
46-
const { footer1MenuItems, footer2MenuItems, footer3MenuItems } = data;
47-
const columns = [
48-
footer1MenuItems?.menuItems?.nodes,
49-
footer2MenuItems?.menuItems?.nodes,
50-
footer3MenuItems?.menuItems?.nodes,
51-
];
52-
53-
return columns.map((column, index) => {
54-
if (!column || column.length === 0) {
55-
return; // Skip rendering if no menu items are found
56-
}
57-
58-
const columnTitle = column[0]?.menu?.node?.name || "Menu";
39+
function FooterColumns() {
40+
const columnClass = "col-span-1 flex flex-col gap-4";
41+
const listClass = "my-0 list-none ps-0";
42+
const headingClass = "font-bold uppercase tracking-wider text-gray-300";
43+
const listItemClass = "my-0 space-y-2 ps-0";
44+
const linkClass =
45+
"inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200";
5946

60-
return (
61-
<div className="col-span-1 flex flex-col gap-4" key={index}>
62-
<h6 className="font-bold uppercase tracking-wider text-gray-300">
63-
{columnTitle}
64-
</h6>
65-
<ul className="my-0 list-none ps-0">
66-
{column.map((item) => (
67-
<li className="my-0 space-y-2 ps-0" key={item.id}>
68-
<Link
69-
className="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200"
70-
href={item.uri}
71-
noDefaultStyles
72-
target={item.target}
73-
>
74-
{item.label}
75-
</Link>
76-
</li>
77-
))}
47+
return (
48+
<>
49+
<div className={columnClass}>
50+
<h6 className={headingClass}>Downloads</h6>
51+
<ul className={listClass}>
52+
<li className={listItemClass}>
53+
<Link
54+
className={linkClass}
55+
href="https://www.npmjs.com/package/@faustwp/cli"
56+
noDefaultStyles
57+
>
58+
@faustwp/cli
59+
</Link>
60+
</li>
61+
<li className={listItemClass}>
62+
<Link
63+
className={linkClass}
64+
href="https://www.npmjs.com/package/@faustwp/core"
65+
noDefaultStyles
66+
>
67+
@faustwp/core
68+
</Link>
69+
</li>
70+
<li className={listItemClass}>
71+
<Link
72+
className={linkClass}
73+
href="https://www.npmjs.com/package/@faustwp/blocks"
74+
noDefaultStyles
75+
>
76+
@faustwp/blocks
77+
</Link>
78+
</li>
79+
<li className={listItemClass}>
80+
<Link
81+
className={linkClass}
82+
href="https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp"
83+
noDefaultStyles
84+
>
85+
Faust.js Companion Plugin
86+
</Link>
87+
</li>
88+
<li className={listItemClass}>
89+
<Link
90+
className={linkClass}
91+
href="https://github.com/wpengine/wp-graphql-content-blocks"
92+
noDefaultStyles
93+
>
94+
WPGraphQL Content Blocks
95+
</Link>
96+
</li>
97+
</ul>
98+
</div>
99+
<div className={columnClass}>
100+
<h6 className={headingClass}>Community</h6>
101+
<ul className={listClass}>
102+
<li className={listItemClass}>
103+
<Link
104+
className={linkClass}
105+
href="https://github.com/wpengine/faustjs?ref=faustjs"
106+
noDefaultStyles
107+
>
108+
Github
109+
</Link>
110+
</li>
111+
<li className={listItemClass}>
112+
<Link
113+
className={linkClass}
114+
href="https://twitter.com/wpengine"
115+
noDefaultStyles
116+
>
117+
Twitter
118+
</Link>
119+
</li>
120+
<li className={listItemClass}>
121+
<Link
122+
className={linkClass}
123+
href="https://www.youtube.com/channel/UCh1WuL54XFb9ZI6m6goFv1g"
124+
noDefaultStyles
125+
>
126+
YouTube
127+
</Link>
128+
</li>
129+
<li className={listItemClass}>
130+
<Link className={linkClass} href="/discord" noDefaultStyles>
131+
Discord
132+
</Link>
133+
</li>
134+
</ul>
135+
</div>
136+
<div className={columnClass}>
137+
<h6 className={headingClass}>WP Engine</h6>
138+
<ul className={listClass}>
139+
<li className={listItemClass}>
140+
<Link
141+
className={linkClass}
142+
href="/privacy-policy/"
143+
noDefaultStyles
144+
target="_self"
145+
>
146+
Privacy Policy
147+
</Link>
148+
</li>
149+
<li className={listItemClass}>
150+
<Link
151+
className={linkClass}
152+
href="https://wpengine.com/builders/headless"
153+
noDefaultStyles
154+
target="_blank"
155+
>
156+
Developers
157+
</Link>
158+
</li>
159+
<li className={listItemClass}>
160+
<Link
161+
className={linkClass}
162+
href="https://wpengine.careers/?ref=faustjs"
163+
noDefaultStyles
164+
>
165+
We're Hiring!
166+
</Link>
167+
</li>
168+
<li className={listItemClass}>
169+
<Link
170+
className={linkClass}
171+
href="https://wpengine.com/atlas?ref=faustjs"
172+
noDefaultStyles
173+
>
174+
Headless Hosting
175+
</Link>
176+
</li>
78177
</ul>
79178
</div>
80-
);
81-
});
179+
</>
180+
);
82181
}
83-
84-
const GET_FOOTER_NAV_ITEMS = gql`
85-
query GetFooterNavItems {
86-
footer1MenuItems: menu(id: "downloads", idType: NAME) {
87-
menuItems {
88-
nodes {
89-
id
90-
uri
91-
label
92-
target
93-
menu {
94-
node {
95-
name
96-
}
97-
}
98-
}
99-
}
100-
}
101-
footer2MenuItems: menu(id: "community", idType: NAME) {
102-
menuItems {
103-
nodes {
104-
id
105-
uri
106-
label
107-
target
108-
menu {
109-
node {
110-
name
111-
}
112-
}
113-
}
114-
}
115-
}
116-
footer3MenuItems: menu(id: "WP engine", idType: NAME) {
117-
menuItems {
118-
nodes {
119-
id
120-
uri
121-
label
122-
target
123-
menu {
124-
node {
125-
name
126-
}
127-
}
128-
}
129-
}
130-
}
131-
}
132-
`;

‎src/components/primary-menu.jsx‎

Lines changed: 42 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,9 @@
1-
import { gql, useQuery } from "@apollo/client";
21
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
32
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
43
import { forwardRef } from "react";
54
import Link from "@/components/link";
65
import { classNames } from "@/utils/strings";
76

8-
const GET_PRIMARY_NAV = gql`
9-
query GetPrimaryNav {
10-
menu(id: "primary-nav", idType: NAME) {
11-
id
12-
name
13-
menuItems {
14-
nodes {
15-
label
16-
uri
17-
databaseId
18-
}
19-
}
20-
}
21-
}
22-
`;
23-
247
const navItemClass =
258
"text-gray-400 data-[focus]:text-purple-500 data-[focus]:outline rounded-md px-1";
269

@@ -33,26 +16,24 @@ const CustomLink = forwardRef((props, reference) => {
3316
});
3417

3518
export default function PrimaryMenu({ className }) {
36-
const { data, loading, error } = useQuery(GET_PRIMARY_NAV);
37-
38-
if (loading) return <p>Loading...</p>;
39-
if (error) {
40-
console.error("Error loading navigation items:", error);
41-
return <p>Error loading navigation items.</p>;
42-
}
43-
44-
const menuItems = data?.menu?.menuItems?.nodes || [];
45-
4619
return (
4720
<nav className={classNames("flex items-center space-x-4", className)}>
4821
<ul className="hidden flex-row space-x-4 pl-4 md:flex">
49-
{menuItems.map((item) => (
50-
<li key={item.databaseId} className={navItemClass}>
51-
<Link className="block px-1" href={item.uri} noDefaultStyles>
52-
{item.label}
53-
</Link>
54-
</li>
55-
))}
22+
<li key="docs" className={navItemClass}>
23+
<Link className="block px-1" href="/docs/" noDefaultStyles>
24+
Docs
25+
</Link>
26+
</li>
27+
<li key="blog" className={navItemClass}>
28+
<Link className="block px-1" href="/blog/" noDefaultStyles>
29+
Blog
30+
</Link>
31+
</li>
32+
<li key="showcase" className={navItemClass}>
33+
<Link className="block px-1" href="/showcase/" noDefaultStyles>
34+
Showcase
35+
</Link>
36+
</li>
5637
</ul>
5738
<Menu>
5839
<MenuButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
@@ -70,17 +51,33 @@ export default function PrimaryMenu({ className }) {
7051
transition
7152
className="container-blur-bg absolute -left-4 top-[84.5px] flex w-full origin-top flex-col items-center justify-around gap-4 border-b-[.5px] border-gray-400 bg-gray-900/80 py-4 text-lg transition duration-200 ease-out focus-within:outline-none data-[closed]:-translate-y-10 data-[closed]:opacity-0 md:hidden"
7253
>
73-
{menuItems.map((item) => (
74-
<MenuItem
75-
as={CustomLink}
76-
key={item.databaseId}
77-
className={navItemClass}
78-
noDefaultStyles
79-
href={item.uri}
80-
>
81-
{item.label}
82-
</MenuItem>
83-
))}
54+
<MenuItem
55+
as={CustomLink}
56+
key="docs"
57+
className={navItemClass}
58+
noDefaultStyles
59+
href="/docs/"
60+
>
61+
Docs
62+
</MenuItem>
63+
<MenuItem
64+
as={CustomLink}
65+
key="blog"
66+
className={navItemClass}
67+
noDefaultStyles
68+
href="/blog/"
69+
>
70+
Blog
71+
</MenuItem>
72+
<MenuItem
73+
as={CustomLink}
74+
key="showcase"
75+
className={navItemClass}
76+
noDefaultStyles
77+
href="/showcase/"
78+
>
79+
Showcase
80+
</MenuItem>
8481
</MenuItems>
8582
</Menu>
8683
</nav>

0 commit comments

Comments
 (0)