From cb6e9e3616ffa64281c06470d8a1e0becfd6ac76 Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Wed, 20 Dec 2023 13:06:42 -0700 Subject: [PATCH 1/9] - update graphql fetcher to set the url and variables from the GraphiQL Component and pass it as queryParams to the GET request --- components/MiniGraphiQL.jsx | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/components/MiniGraphiQL.jsx b/components/MiniGraphiQL.jsx index eb59ff7..ce94e1b 100644 --- a/components/MiniGraphiQL.jsx +++ b/components/MiniGraphiQL.jsx @@ -47,17 +47,22 @@ const MiniGraphiQLClient = ({ initialQuery, initialVariables, endpoint, readOnly const fetcher = createGraphiQLFetcher({ url: endpoint, fetch: async (url, options) => { - // Construct query parameters - const params = new URLSearchParams({ - query: options.body.query, - variables: JSON.stringify(options.body.variables), - }); + const parsedBody = JSON.parse(options?.body); + + const params = new URLSearchParams(); + params.append('query', parsedBody.query); + if (options.body.variables) { + params.append('variables', JSON.stringify(parsedBody.variables)); + } + const getUrl = `${url}&${params.toString()}`; // Make the GET request - return fetch(`${url}?${params.toString()}`, { + const res = await fetch(getUrl, { method: 'GET', - headers: { 'Accept': 'application/json' } + headers: options?.headers, }); + + return res; } }); From 77b1b3f2de0a7665277d400ed0e22a6ca1346cf8 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 20 Dec 2023 15:47:22 -0500 Subject: [PATCH 2/9] Implement sitewide notification Signed-off-by: Joe Fusco --- components/Layout.jsx | 6 +++++- components/LayoutArchive.jsx | 6 +++++- components/LayoutFrontPage.jsx | 6 +++++- components/SiteHeader.jsx | 8 ++++++-- components/SitewideNotice.jsx | 22 ++++++++++++++++++++++ components/icons/XIcon.jsx | 19 +++++++++++++++++++ wp-blocks/AcfFieldTypeSettingsBlock.js | 7 +++---- 7 files changed, 65 insertions(+), 9 deletions(-) create mode 100644 components/SitewideNotice.jsx create mode 100644 components/icons/XIcon.jsx diff --git a/components/Layout.jsx b/components/Layout.jsx index 3c2f0c7..3717a6b 100644 --- a/components/Layout.jsx +++ b/components/Layout.jsx @@ -10,14 +10,17 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation' import { Prose } from '@/components/Prose' import { SiteFooter } from '@/components/SiteFooter' import { SiteHeader } from '@/components/SiteHeader' +import { SitewideNotice } from '@/components/SitewideNotice' import { collectHeadings } from '@/lib/utils' Layout.fragment = gql` fragment LayoutFragment on RootQuery { + ...SitewideNoticeFragment ...PrimaryNavigationFragment ...DocsSidebarNavigationFragment ...FooterNavigationFragment } + ${SitewideNotice.fragment} ${PrimaryNavigation.fragment} ${DocsSidebarNavigation.fragment} ${FooterNavigation.fragment} @@ -124,7 +127,8 @@ export function Layout({ data, children, toc, title }) { return ( <> - + +
diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx index e4d219e..6fdba42 100644 --- a/components/LayoutArchive.jsx +++ b/components/LayoutArchive.jsx @@ -8,13 +8,16 @@ import { DocsSidebarNavigation } from '@/components/DocsSidebarNavigation' import { Prose } from '@/components/Prose' import { SiteFooter } from '@/components/SiteFooter' import { SiteHeader } from '@/components/SiteHeader' +import { SitewideNotice } from '@/components/SitewideNotice' LayoutArchive.fragment = gql` fragment LayoutArchiveFragment on RootQuery { + ...SitewideNoticeFragment ...PrimaryNavigationFragment ...DocsSidebarNavigationFragment ...FooterNavigationFragment } + ${SitewideNotice.fragment} ${PrimaryNavigation.fragment} ${DocsSidebarNavigation.fragment} ${FooterNavigation.fragment} @@ -53,7 +56,8 @@ export function LayoutArchive({ data, children, title }) { return ( <> - + +
diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx index 0bf1238..eb0d0c8 100644 --- a/components/LayoutFrontPage.jsx +++ b/components/LayoutFrontPage.jsx @@ -6,13 +6,16 @@ import { SiteFooter } from './SiteFooter' import { PrimaryNavigation } from '@/components/PrimaryNavigation' import { SiteHeader } from '@/components/SiteHeader' +import { SitewideNotice } from '@/components/SitewideNotice' LayoutFrontPage.fragment = gql` fragment LayoutFrontPageFragment on RootQuery { + ...SitewideNoticeFragment ...PrimaryNavigationFragment ...FooterNavigationFragment } + ${SitewideNotice.fragment} ${PrimaryNavigation.fragment} ${FooterNavigation.fragment} ` @@ -36,7 +39,8 @@ export function LayoutFrontPage({ data, children }) { : [] return ( <> - + +
{children}
diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx index ed99d8e..c886066 100644 --- a/components/SiteHeader.jsx +++ b/components/SiteHeader.jsx @@ -10,9 +10,11 @@ import { PrimaryNavigation } from '@/components/PrimaryNavigation' import { Search } from '@/components/Search' import { ModeToggle } from '@/components/ThemeSelector' -export function SiteHeader({ navigation }) { +export function SiteHeader({ navigation, isNoticeVisible = false }) { let [isScrolled, setIsScrolled] = useState(false) + const headerTopPosition = isNoticeVisible ? 'top-12' : 'top-0'; + useEffect(() => { function onScroll() { setIsScrolled(window.scrollY > 0) @@ -27,7 +29,9 @@ export function SiteHeader({ navigation }) { return (
+

{message}

+
+ ) + } +} diff --git a/components/icons/XIcon.jsx b/components/icons/XIcon.jsx new file mode 100644 index 0000000..ac73808 --- /dev/null +++ b/components/icons/XIcon.jsx @@ -0,0 +1,19 @@ +export function XIcon(props) { + return ( + + + + + ) +} \ No newline at end of file diff --git a/wp-blocks/AcfFieldTypeSettingsBlock.js b/wp-blocks/AcfFieldTypeSettingsBlock.js index 0d5a2bc..a6e9c36 100644 --- a/wp-blocks/AcfFieldTypeSettingsBlock.js +++ b/wp-blocks/AcfFieldTypeSettingsBlock.js @@ -1,5 +1,4 @@ import { gql } from '@apollo/client'; -import clsx from 'clsx' import React, { useState } from 'react'; import { Button } from "@/components/ui/button"; @@ -8,7 +7,7 @@ import { Card, CardFooter, CardHeader } from "@/components/ui/card"; const AccordionItem = ({ title, content, isOpen, onClick }) => { return ( <> - {isOpen && ( -
+
{content}
)} @@ -75,7 +74,7 @@ export function AcfFieldTypeSettingsBlock({ fieldTypeSettingsBlockFields }) { })} -
+
From 9760d5d25fb5f87761d632147494025a1776396c Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 20 Dec 2023 15:48:54 -0500 Subject: [PATCH 3/9] New Line at EOF Signed-off-by: Joe Fusco --- components/icons/XIcon.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/icons/XIcon.jsx b/components/icons/XIcon.jsx index ac73808..e328580 100644 --- a/components/icons/XIcon.jsx +++ b/components/icons/XIcon.jsx @@ -16,4 +16,4 @@ export function XIcon(props) { ) -} \ No newline at end of file +} From 4c8493b15ce734c6509409832f085ff406cfb8a8 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Wed, 20 Dec 2023 15:55:44 -0500 Subject: [PATCH 4/9] Remove unused icon Signed-off-by: Joe Fusco --- components/icons/XIcon.jsx | 19 ------------------- 1 file changed, 19 deletions(-) delete mode 100644 components/icons/XIcon.jsx diff --git a/components/icons/XIcon.jsx b/components/icons/XIcon.jsx deleted file mode 100644 index e328580..0000000 --- a/components/icons/XIcon.jsx +++ /dev/null @@ -1,19 +0,0 @@ -export function XIcon(props) { - return ( - - - - - ) -} From f0581c261fe6bf6e4c9996f475017f231b7dfdef Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Mon, 8 Jan 2024 14:11:07 -0500 Subject: [PATCH 5/9] Global styles from WP Signed-off-by: Joe Fusco --- pages/_app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/_app.js b/pages/_app.js index 1d65d7d..4418724 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -6,7 +6,7 @@ import React from 'react' import 'focus-visible' import '@/styles/tailwind.css' -// import '../globalStylesheet.css' +import '../globalStylesheet.css' import { SearchProvider } from '@/components/Search' import { ThemeProvider } from '@/components/ThemeProvider' import blocks from '@/wp-blocks' From bb32011787bf05e9b213f7eb9228a10868a1b224 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Mon, 8 Jan 2024 14:11:18 -0500 Subject: [PATCH 6/9] scaffold code block Signed-off-by: Joe Fusco --- wp-blocks/CoreCode.js | 26 ++++++++++++++++++++++++++ wp-blocks/index.js | 2 ++ 2 files changed, 28 insertions(+) create mode 100644 wp-blocks/CoreCode.js diff --git a/wp-blocks/CoreCode.js b/wp-blocks/CoreCode.js new file mode 100644 index 0000000..5b2819b --- /dev/null +++ b/wp-blocks/CoreCode.js @@ -0,0 +1,26 @@ +import { CoreBlocks } from '@faustwp/blocks' +import slugify from '@sindresorhus/slugify' +const { CoreCode: FaustCoreCode } = CoreBlocks + +export function CoreCode(props) { + const { attributes } = props + + + const customAttributes = { + ...attributes, + anchor: !attributes.anchor + ? slugify(attributes.content) + : attributes.anchor, + } + console.log({attributes, customAttributes}); + + return ( + <> + + + ) +} + +CoreCode.displayName = { ...FaustCoreCode.displayName } +CoreCode.config = { ...FaustCoreCode.config } +CoreCode.fragments = { ...FaustCoreCode.fragments } diff --git a/wp-blocks/index.js b/wp-blocks/index.js index 359c717..521eabc 100644 --- a/wp-blocks/index.js +++ b/wp-blocks/index.js @@ -4,9 +4,11 @@ import { AcfFieldTypeConfigurationBlock } from './AcfFieldTypeConfigurationBlock import { AcfFieldTypeSettingsBlock } from './AcfFieldTypeSettingsBlock' import { AcfGraphqlQuery } from './AcfGraphqlQuery' import { CoreHeading } from './CoreHeading' +import { CoreCode } from './CoreCode' const blocks = { ...CoreBlocks, + CoreCode, CoreHeading, AcfGraphqlQuery, AcfFieldTypeSettingsBlock, From 28b569ddba777a7d8c10a4ca818cee2f53de5490 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Mon, 8 Jan 2024 14:48:00 -0500 Subject: [PATCH 7/9] Add missing document titles Signed-off-by: Joe Fusco --- wp-templates/IndexTemplate.js | 60 ++++++++++++++++-------------- wp-templates/archive-field_type.js | 22 +++++++---- 2 files changed, 47 insertions(+), 35 deletions(-) diff --git a/wp-templates/IndexTemplate.js b/wp-templates/IndexTemplate.js index 29a9ba5..1bd0399 100644 --- a/wp-templates/IndexTemplate.js +++ b/wp-templates/IndexTemplate.js @@ -1,6 +1,7 @@ import { gql } from '@apollo/client' import { WordPressBlocksViewer } from '@faustwp/blocks' import { flatListToHierarchical } from '@faustwp/core' +import Head from 'next/head' import { Layout } from '@/components/Layout' import blocks from '@/wp-blocks' @@ -47,33 +48,38 @@ export const IndexTemplate = ({ data }) => { }) return ( - - {node?.modified && ( -
- Last Upated:{' '} - {new Date(node.modified).toLocaleDateString('en-us', { - weekday: 'long', - year: 'numeric', - month: 'short', - day: 'numeric', - })} -
- )} - - {/*

Raw editorBlocks

*/} - { - /** - * uncomment to debug editorBlocks - * 
{JSON.stringify(node.editorBlocks, null, 2)}
- */ - // 
{JSON.stringify(node, null, 2)}
- } - + <> + + {`${node?.title} - WPGraphQL for ACF`} + + + {node?.modified && ( +
+ Last Upated:{' '} + {new Date(node.modified).toLocaleDateString('en-us', { + weekday: 'long', + year: 'numeric', + month: 'short', + day: 'numeric', + })} +
+ )} + + {/*

Raw editorBlocks

*/} + { + /** + * uncomment to debug editorBlocks + * 
{JSON.stringify(node.editorBlocks, null, 2)}
+ */ + // 
{JSON.stringify(node, null, 2)}
+ } + + ) } diff --git a/wp-templates/archive-field_type.js b/wp-templates/archive-field_type.js index b197808..2cf7648 100644 --- a/wp-templates/archive-field_type.js +++ b/wp-templates/archive-field_type.js @@ -1,4 +1,5 @@ import { gql } from '@apollo/client' +import Head from 'next/head' import { FieldTypesList } from '@/components/FieldTypesList' import { LayoutArchive } from '@/components/LayoutArchive' @@ -15,14 +16,19 @@ export const ArchiveFieldType = (props) => { let toc = [] return ( - - - + <> + + {`${data?.node?.label} - WPGraphQL for ACF`} + + + + + ) } From 89eda6dacf73a42e14294c7718a01b7e8dfff642 Mon Sep 17 00:00:00 2001 From: Joe Fusco Date: Mon, 8 Jan 2024 15:09:30 -0500 Subject: [PATCH 8/9] Scaffold archive Signed-off-by: Joe Fusco --- wp-templates/archive.js | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/wp-templates/archive.js b/wp-templates/archive.js index 7937732..e4db2da 100644 --- a/wp-templates/archive.js +++ b/wp-templates/archive.js @@ -1,29 +1,38 @@ import { gql } from '@apollo/client' +import Head from 'next/head' import { LayoutArchive } from '@/components/LayoutArchive' export const Archive = (props) => { const { data } = props - const { node } = data - - if (!node) { - return null - } - return ( <> -

Archive

- 
{JSON.stringify(props, null, 2)}
+ + {`${data?.node?.name} - WPGraphQL for ACF`} + + + {/* 
{JSON.stringify(props, null, 2)}
*/} + ) } Archive.query = gql` - query GetArchiveFieldType($uri: String!) { + query GetArchive($uri: String!) { node: nodeByUri(uri: $uri) { __typename uri + ... on ContentType { + label + } + ... on TermNode { + name + } ... on Category { posts { nodes { From 488468d699169df3e143648bed1e932ce85031f0 Mon Sep 17 00:00:00 2001 From: Jason Bahl Date: Tue, 9 Jan 2024 15:08:18 -0700 Subject: [PATCH 9/9] Update Search.jsx Update Algolia App ID and API Key --- components/Search.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/components/Search.jsx b/components/Search.jsx index dd88c95..adcd3f0 100644 --- a/components/Search.jsx +++ b/components/Search.jsx @@ -9,9 +9,9 @@ import { createPortal } from "react-dom"; import { SearchIcon } from '@/components/icons/SearchIcon'; import '@docsearch/css/dist/style.css'; -const INDEX_NAME = 'wpgraphql'; -const API_KEY = '0c11d662dad18e8a18d20c969b25c65f'; -const APP_ID = 'HB50HVJDY8'; +const INDEX_NAME = 'acf-wpgraphql'; +const API_KEY = 'b404b713250845334bb3538fe4f32895'; +const APP_ID = 'I1X3LCBG6R'; const SearchContext = createContext();