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
Merged

Feature: Convert menus to JSON #195

Show file tree
Hide file tree
Changes from 2 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
71 changes: 8 additions & 63 deletions src/components/footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,12 @@
import { gql, useQuery } from "@apollo/client";
import Link from "@/components/link";
import { FooterMenus, FooterMenuSections } from "@/constants/menus";

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,20 +37,20 @@ export default function Footer() {
);
}

function FooterColumns({ data }) {
const { footer1MenuItems, footer2MenuItems, footer3MenuItems } = data;
function FooterColumns() {
const columns = [
footer1MenuItems?.menuItems?.nodes,
footer2MenuItems?.menuItems?.nodes,
footer3MenuItems?.menuItems?.nodes,
FooterMenus.filter((item) => item.section === "downloads"),
FooterMenus.filter((item) => item.section === "community"),
FooterMenus.filter((item) => item.section === "wpengine"),
];

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

@kellenmace kellenmace Dec 10, 2024

Choose a reason for hiding this comment

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

Per this section of the React docs (https://react.dev/learn/conditional-rendering#conditionally-returning-nothing-with-null), the recommended way to render nothing is to return null. So this line should do that.

Copy link
Member Author

@colinmurphy colinmurphy Dec 10, 2024

Choose a reason for hiding this comment

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

Thanks Kellen, That is good to know.

Copy link
Member Author

@colinmurphy colinmurphy Dec 10, 2024

Choose a reason for hiding this comment

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

Thanks Kellen for the really good feedback. I can definitely see where your coming from and I agree with your approach too. There is definitely too much overhead for some static links which are not going to be re-used elsewhere. We could also probably set a variable for the class names to try and reduce repetition too.

}

const columnTitle = column[0]?.menu?.node?.name || "Menu";
const columnSection = column[0]?.section || "menu";
const columnTitle = FooterMenuSections[columnSection] || "Menu";

return (
<div className="col-span-1 flex flex-col gap-4" key={index}>
Expand All @@ -80,53 +75,3 @@ function FooterColumns({ data }) {
);
});
}

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
}
}
}
}
}
}
`;
36 changes: 5 additions & 31 deletions src/components/primary-menu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,10 @@
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 { HeaderMenu } from "@/constants/menus";
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,21 +17,11 @@ 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}>
{HeaderMenu.map((item) => (
<li key={item.id} className={navItemClass}>
<Link className="block px-1" href={item.uri} noDefaultStyles>
{item.label}
</Link>
Expand All @@ -70,10 +44,10 @@ 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) => (
{HeaderMenu.map((item) => (
<MenuItem
as={CustomLink}
key={item.databaseId}
key={item.id}
className={navItemClass}
noDefaultStyles
href={item.uri}
Expand Down
118 changes: 118 additions & 0 deletions src/constants/menus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,120 @@
export const PRIMARY_LOCATION = "PRIMARY";
export const FOOTER_LOCATION = "FOOTER_1";

export const HeaderMenu = [
Copy link
Contributor

@kellenmace kellenmace Dec 10, 2024

Choose a reason for hiding this comment

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

I would name this using camelCase instead of PascalCase here. By convention, PascalCase is typically used for classes and React components and camelCase is used for other variables like this array. When I first glanced at this PR and saw HeaderMenu, my first thought was that it was a React component that was being imported.

Copy link
Member Author

@colinmurphy colinmurphy Dec 10, 2024

Choose a reason for hiding this comment

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

Thanks Kellen, That is really useful feedback. I wasn't aware of the different conventions for React. Thank you.

Copy link
Contributor

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

Choose a reason for hiding this comment

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

ya same with the HeaderMenu in my mind being a React component.

{
id: "docs",
uri: "/docs/",
label: "Docs",
},
{
id: "blog",
uri: "/blog/",
label: "Blog",
},
{
id: "showcase",
uri: "/showcase/",
label: "Showcase",
},
];

export const FooterMenuSections = {
downloads: "Downloads",
community: "Community",
wpengine: "WP Engine",
};

export const FooterMenus = [
{
id: "faust-cli",
section: "downloads",
uri: "https://www.npmjs.com/package/@faustwp/cli",
label: "@faustwp/cli",
target: "_blank",
},
{
id: "faust-core",
section: "downloads",
uri: "https://www.npmjs.com/package/@faustwp/core",
label: "@faustwp/core",
target: "_blank",
},
{
id: "faust-blocks",
section: "downloads",
uri: "https://www.npmjs.com/package/@faustwp/blocks",
label: "@faustwp/blocks",
target: "_blank",
},
{
id: "faust-js-companion-plugin",
section: "downloads",
uri: "https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp",
label: "Faust.js Companion Plugin",
target: "_blank",
},
{
id: "wpgraphql-content-blocks",
section: "downloads",
uri: "https://github.com/wpengine/wp-graphql-content-blocks",
label: "WPGraphQL Content Blocks",
target: "_blank",
},
{
id: "github",
section: "community",
uri: "https://github.com/wpengine/faustjs?ref=faustjs",
label: "Github",
target: "_blank",
},
{
id: "twitter",
section: "community",
uri: "https://twitter.com/wpengine",
label: "Twitter",
target: "_blank",
},
{
id: "youtube",
section: "community",
uri: "https://www.youtube.com/channel/UCh1WuL54XFb9ZI6m6goFv1g",
label: "YouTube",
target: "_blank",
},
{
id: "dicord",
Copy link
Contributor

@kellenmace kellenmace Dec 10, 2024

Choose a reason for hiding this comment

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

Typo here– missing an "s". Not that it matters too much, since this is just a unique ID that end users never see :)

Copy link
Member Author

@colinmurphy colinmurphy Dec 10, 2024

Choose a reason for hiding this comment

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

Thanks Kellen :)

section: "community",
uri: "https://discord.com/invite/headless-wordpress-836253505944813629",
label: "Headless Discord",
target: "_blank",
},
{
id: "privacy",
section: "wpengine",
uri: "/privacy-policy/",
label: "Privacy Policy",
target: "_self",
},
{
id: "developers",
section: "wpengine",
uri: "https://developers.wpengine.com/?ref=faustjs",
label: "Developers",
target: "_blank",
},
{
id: "hiring",
section: "wpengine",
uri: "https://wpengine.careers/?ref=faustjs",
label: "We're Hiring!",
target: "_blank",
},
{
id: "hosting",
section: "wpengine",
uri: "https://wpengine.com/atlas?ref=faustjs",
label: "Headless Hosting",
target: "_blank",
},
];