Skip to content

Feature: Convert menus to JSON #195

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kellenmace merged 6 commits into from
Dec 12, 2024
+182 −136
Merged

Feature: Convert menus to JSON #195

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c6682ae
Replaced primary menu
colinmurphy Dec 10, 2024
d801d87
Added footer menus
colinmurphy Dec 10, 2024
8f87253
Hardcoded header links
colinmurphy Dec 10, 2024
e388fea
Hardcoded footer menus
colinmurphy Dec 10, 2024
e2e7b89
Removed keys and target _blank as per code review
colinmurphy Dec 11, 2024
9a7e6dd
Fixed path for discord
colinmurphy Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
241 changes: 150 additions & 91 deletions src/components/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,11 @@
import { gql, useQuery } from "@apollo/client";
import Link from "@/components/link";

export default function Footer() {
const { data, loading, error } = useQuery(GET_FOOTER_NAV_ITEMS);

if (loading) return <p>Loading...</p>;
if (error) return <p>Error! {error.message}</p>;

return (
<footer className="bg-gray-950 px-8 pb-14 lg:px-16 lg:pb-24">
<div className="container-main container prose prose-invert border-t border-gray-900">
<div className="grid grid-cols-1 gap-8 pt-14 sm:grid-cols-2 lg:grid-cols-3 lg:pt-24">
<FooterColumns data={data} />
<FooterColumns />
</div>
<div className="mt-24 text-gray-500">
<p>
Expand Down Expand Up @@ -42,91 +36,156 @@ export default function Footer() {
);
}

function FooterColumns({ data }) {
const { footer1MenuItems, footer2MenuItems, footer3MenuItems } = data;
const columns = [
footer1MenuItems?.menuItems?.nodes,
footer2MenuItems?.menuItems?.nodes,
footer3MenuItems?.menuItems?.nodes,
];

return columns.map((column, index) => {
if (!column || column.length === 0) {
return; // Skip rendering if no menu items are found
}

const columnTitle = column[0]?.menu?.node?.name || "Menu";
function FooterColumns() {
const columnClass = "col-span-1 flex flex-col gap-4";
const listClass = "my-0 list-none ps-0";
const headingClass = "font-bold uppercase tracking-wider text-gray-300";
const listItemClass = "my-0 space-y-2 ps-0";
const linkClass =
"inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200";

return (
<div className="col-span-1 flex flex-col gap-4" key={index}>
<h6 className="font-bold uppercase tracking-wider text-gray-300">
{columnTitle}
</h6>
<ul className="my-0 list-none ps-0">
{column.map((item) => (
<li className="my-0 space-y-2 ps-0" key={item.id}>
<Link
className="inline-flex items-center gap-1 font-normal text-gray-400 no-underline transition duration-150 ease-in-out hover:text-gray-200"
href={item.uri}
noDefaultStyles
target={item.target}
>
{item.label}
</Link>
</li>
))}
return (
<>
<div className={columnClass} key="downloads">
<h6 className={headingClass}>Downloads</h6>
<ul className={listClass}>
<li className={listItemClass} key="faustwp-cli">
<Link
className={linkClass}
href="https://www.npmjs.com/package/@faustwp/cli"
noDefaultStyles
target="_blank"
Copy link
Member

@moonmeister moonmeister Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is handled by the component.

>
@faustwp/cli
</Link>
</li>
<li className={listItemClass} key="faustwp-core">
<Link
className={linkClass}
href="https://www.npmjs.com/package/@faustwp/core"
noDefaultStyles
target="_blank"
>
@faustwp/core
</Link>
</li>
<li className={listItemClass} key="faustwp-blocks">
<Link
className={linkClass}
href="https://www.npmjs.com/package/@faustwp/blocks"
noDefaultStyles
target="_blank"
>
@faustwp/blocks
</Link>
</li>
<li className={listItemClass} key="faustwp-companion-plugin">
<Link
className={linkClass}
href="https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp"
noDefaultStyles
target="_blank"
>
Faust.js Companion Plugin
</Link>
</li>
<li className={listItemClass} key="wpgraphql-content-blocks">
<Link
className={linkClass}
href="https://github.com/wpengine/wp-graphql-content-blocks"
noDefaultStyles
target="_blank"
>
WPGraphQL Content Blocks
</Link>
</li>
</ul>
</div>
<div className={columnClass} key="community">
Copy link
Member

@moonmeister moonmeister Dec 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Keys are unneeded if we're not mapping over an array.

Copy link
Contributor

@Fran-A-Dev Fran-A-Dev Dec 11, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@colinmurphy @kellenmace @moonmeister I am for whatever ya'll decide is best! Stoked

<h6 className={headingClass}>Community</h6>
<ul className={listClass}>
<li className={listItemClass} key="github">
<Link
className={linkClass}
href="https://github.com/wpengine/faustjs?ref=faustjs"
noDefaultStyles
target="_blank"
>
Github
</Link>
</li>
<li className={listItemClass} key="twitter">
<Link
className={linkClass}
href="https://twitter.com/wpengine"
noDefaultStyles
target="_blank"
>
Twitter
</Link>
</li>
<li className={listItemClass} key="youtube">
<Link
className={linkClass}
href="https://www.youtube.com/channel/UCh1WuL54XFb9ZI6m6goFv1g"
noDefaultStyles
target="_blank"
>
YouTube
</Link>
</li>
<li className={listItemClass} key="discord">
<Link
className={linkClass}
href="/discord/"
noDefaultStyles
target="_blank"
>
Discord
</Link>
</li>
</ul>
</div>
<div className={columnClass} key="wpengine">
<h6 className={headingClass}>WP Engine</h6>
<ul className={listClass}>
<li className={listItemClass} key="privacy-policy">
<Link className={linkClass} href="/privacy-policy/" noDefaultStyles>
Privacy Policy
</Link>
</li>
<li className={listItemClass} key="developers">
<Link
className={linkClass}
href="https://wpengine.com/builders/headless"
noDefaultStyles
target="_blank"
>
Developers
</Link>
</li>
<li className={listItemClass} key="hiring">
<Link
className={linkClass}
href="https://wpengine.careers/?ref=faustjs"
noDefaultStyles
target="_blank"
>
We're Hiring!
</Link>
</li>
<li className={listItemClass} key="headless-hosting">
<Link
className={linkClass}
href="https://wpengine.com/atlas?ref=faustjs"
noDefaultStyles
target="_blank"
>
Headless Hosting
</Link>
</li>
</ul>
</div>
);
});
</>
);
}

const GET_FOOTER_NAV_ITEMS = gql`
query GetFooterNavItems {
footer1MenuItems: menu(id: "downloads", idType: NAME) {
menuItems {
nodes {
id
uri
label
target
menu {
node {
name
}
}
}
}
}
footer2MenuItems: menu(id: "community", idType: NAME) {
menuItems {
nodes {
id
uri
label
target
menu {
node {
name
}
}
}
}
}
footer3MenuItems: menu(id: "WP engine", idType: NAME) {
menuItems {
nodes {
id
uri
label
target
menu {
node {
name
}
}
}
}
}
}
`;
87 changes: 42 additions & 45 deletions src/components/primary-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,9 @@
import { gql, useQuery } from "@apollo/client";
import { Menu, MenuButton, MenuItems, MenuItem } from "@headlessui/react";
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
import { forwardRef } from "react";
import Link from "@/components/link";
import { classNames } from "@/utils/strings";

const GET_PRIMARY_NAV = gql`
query GetPrimaryNav {
menu(id: "primary-nav", idType: NAME) {
id
name
menuItems {
nodes {
label
uri
databaseId
}
}
}
}
`;

const navItemClass =
"text-gray-400 data-[focus]:text-purple-500 data-[focus]:outline rounded-md px-1";

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

export default function PrimaryMenu({ className }) {
const { data, loading, error } = useQuery(GET_PRIMARY_NAV);

if (loading) return <p>Loading...</p>;
if (error) {
console.error("Error loading navigation items:", error);
return <p>Error loading navigation items.</p>;
}

const menuItems = data?.menu?.menuItems?.nodes || [];

return (
<nav className={classNames("flex items-center space-x-4", className)}>
<ul className="hidden flex-row space-x-4 pl-4 md:flex">
{menuItems.map((item) => (
<li key={item.databaseId} className={navItemClass}>
<Link className="block px-1" href={item.uri} noDefaultStyles>
{item.label}
</Link>
</li>
))}
<li key="docs" className={navItemClass}>
<Link className="block px-1" href="/docs/" noDefaultStyles>
Docs
</Link>
</li>
<li key="blog" className={navItemClass}>
<Link className="block px-1" href="/blog/" noDefaultStyles>
Blog
</Link>
</li>
<li key="showcase" className={navItemClass}>
<Link className="block px-1" href="/showcase/" noDefaultStyles>
Showcase
</Link>
</li>
</ul>
<Menu>
<MenuButton className="group rounded-md px-2 py-1.5 text-white/70 hover:text-white md:hidden">
Expand All @@ -70,17 +51,33 @@ export default function PrimaryMenu({ className }) {
transition
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"
>
{menuItems.map((item) => (
<MenuItem
as={CustomLink}
key={item.databaseId}
className={navItemClass}
noDefaultStyles
href={item.uri}
>
{item.label}
</MenuItem>
))}
<MenuItem
as={CustomLink}
key="docs"
className={navItemClass}
noDefaultStyles
href="/docs/"
>
Docs
</MenuItem>
<MenuItem
as={CustomLink}
key="blog"
className={navItemClass}
noDefaultStyles
href="/blog/"
>
Blog
</MenuItem>
<MenuItem
as={CustomLink}
key="showcase"
className={navItemClass}
noDefaultStyles
href="/showcase/"
>
Showcase
</MenuItem>
</MenuItems>
</Menu>
</nav>
Expand Down
Loading