diff --git a/mdx-components.jsx b/mdx-components.jsx index 49bb0b63..7482d2a5 100644 --- a/mdx-components.jsx +++ b/mdx-components.jsx @@ -5,15 +5,16 @@ import CustomLink from "@/components/link"; export function useMDXComponents(components) { return { - img: ({ src }, ...props) => ( + img: ({ src, alt }, ...props) => ( {props.alt} ), a: (props) => , diff --git a/src/pages/docs/how-to/authentication/images/auth-redirect-flow-2048x989-3.png b/src/pages/docs/how-to/authentication/images/auth-redirect-flow.png similarity index 100% rename from src/pages/docs/how-to/authentication/images/auth-redirect-flow-2048x989-3.png rename to src/pages/docs/how-to/authentication/images/auth-redirect-flow.png diff --git a/src/pages/docs/how-to/authentication/index.mdx b/src/pages/docs/how-to/authentication/index.mdx index e2f1ca91..98b68d1a 100644 --- a/src/pages/docs/how-to/authentication/index.mdx +++ b/src/pages/docs/how-to/authentication/index.mdx @@ -14,7 +14,7 @@ Before starting, it helps to break down the process into three concepts: This diagram shows the authentication flow using the Faust.js toolkit auth feature: -![](./images/auth-redirect-flow-2048x989-3.png) +![Flow diagram illustrating authentication flow](./images/auth-redirect-flow.png) Redirect-based authentication is the default strategy in the Faust.js toolkit. This strategy involves redirecting the user to WordPress to authenticate. Once the user has shown authentication, the user redirects back to the Next.js application with an authorization code, which you can then use to request a refresh and access token, thus completing the login process. diff --git a/src/pages/docs/how-to/basic-setup/images/headless-admin-secret-1024x743.png b/src/pages/docs/how-to/basic-setup/images/headless-admin-secret.png similarity index 100% rename from src/pages/docs/how-to/basic-setup/images/headless-admin-secret-1024x743.png rename to src/pages/docs/how-to/basic-setup/images/headless-admin-secret.png diff --git a/src/pages/docs/how-to/basic-setup/index.mdx b/src/pages/docs/how-to/basic-setup/index.mdx index d67a78d3..11bb4b48 100644 --- a/src/pages/docs/how-to/basic-setup/index.mdx +++ b/src/pages/docs/how-to/basic-setup/index.mdx @@ -32,7 +32,7 @@ Replace `https://faustexample.wpengine.com` with the URL for your WordPress back Replace `YOUR_PLUGIN_SECRET` with the Secret Key found in `Settings → Faust` in your WordPress admin area. -![](./images/headless-admin-secret-1024x743.png) +![Screenshot of the Headless Settings page in the WordPress admin panel, showing the Faust plugin settings. The Secret Key field is highlighted, which is required to enable authentication features like post previews in Faust.js.](./images/headless-admin-secret.png) Save your `.env.local` file. diff --git a/src/pages/docs/how-to/generate-types-with-graphql-codegen/index.mdx b/src/pages/docs/how-to/generate-types-with-graphql-codegen/index.mdx index d0a25915..361cfc7b 100644 --- a/src/pages/docs/how-to/generate-types-with-graphql-codegen/index.mdx +++ b/src/pages/docs/how-to/generate-types-with-graphql-codegen/index.mdx @@ -101,11 +101,13 @@ export const pageQuery = gql(/* GraphQL */ ` Then you can inspect all the types in the `props` parameters as you type: -![](./images/ts-image-one.png) +![TypeScript auto-complete suggestion in Faust.js, showing the available fields for a GraphQL query's response. The code completion suggests properties like `__SEED_NODE__`, `data`, and `loading`, indicating TypeScript's type inference for the `props` object. +](./images/ts-image-one.png) All the data from the query results will be properly typed based on the introspected schema: -![](./images/ts-image-two.png) +![TypeScript type definition for an author field in a Faust.js GraphQL query. The type structure shows `NodeWithAuthorToUserConnectionEdge`, defining the `User` type with an optional `name` property, demonstrating TypeScript's type safety for GraphQL responses. +](./images/ts-image-two.png) ### B. Typing Block Components diff --git a/src/pages/docs/how-to/post-previews/images/post-preview-frontend-1024x806-1.png b/src/pages/docs/how-to/post-previews/images/post-preview-frontend.png similarity index 100% rename from src/pages/docs/how-to/post-previews/images/post-preview-frontend-1024x806-1.png rename to src/pages/docs/how-to/post-previews/images/post-preview-frontend.png diff --git a/src/pages/docs/how-to/post-previews/images/post-preview-1024x806-1.png b/src/pages/docs/how-to/post-previews/images/post-preview.png similarity index 100% rename from src/pages/docs/how-to/post-previews/images/post-preview-1024x806-1.png rename to src/pages/docs/how-to/post-previews/images/post-preview.png diff --git a/src/pages/docs/how-to/post-previews/index.mdx b/src/pages/docs/how-to/post-previews/index.mdx index 07e86fce..1e218569 100644 --- a/src/pages/docs/how-to/post-previews/index.mdx +++ b/src/pages/docs/how-to/post-previews/index.mdx @@ -112,10 +112,11 @@ Start by logging into your WordPress Admin. For this example, we'll create a new So far, I've added a title and a simple line of text for the content. To view this post as a preview on your front end, click the `Preview` link (1). From there, click, `Preview in new tab` (2): -![](./images/post-preview-1024x806-1.png) +![WordPress editor with a draft post titled 'My Post' and a simple text block for post content. The Preview dropdown menu is open, showing options to preview the post on Desktop, Tablet, and Mobile, along with a 'Preview in new tab' option highlighted. +](./images/post-preview.png) Notice that the `Publish` button is also visible, meaning that you still need to publish the post. Therefore, you can now view the post on the frontend without being authenticated. Clicking on `Preview in new tab` should take you to your post preview page with the current preview content: -![](./images/post-preview-frontend-1024x806-1.png) +![Frontend preview of a WordPress post in a Faust.js headless setup. The page displays 'My Post' as the title with preview content below. The preview URL includes `?preview=true`, indicating that the user is viewing an unpublished draft.](./images/post-preview-frontend.png) diff --git a/src/pages/docs/how-to/rendering-blocks/images/Screenshot-2024-10-08-at-10.10.31-AM.png b/src/pages/docs/how-to/rendering-blocks/images/graphqlide-block.png similarity index 100% rename from src/pages/docs/how-to/rendering-blocks/images/Screenshot-2024-10-08-at-10.10.31-AM.png rename to src/pages/docs/how-to/rendering-blocks/images/graphqlide-block.png diff --git a/src/pages/docs/how-to/rendering-blocks/index.mdx b/src/pages/docs/how-to/rendering-blocks/index.mdx index cfc935c1..8753788c 100644 --- a/src/pages/docs/how-to/rendering-blocks/index.mdx +++ b/src/pages/docs/how-to/rendering-blocks/index.mdx @@ -26,7 +26,7 @@ Once the plugin is installed and activated, head over to the GraphQL IDE. You ca You should be able to perform queries for the block data. There is a new field added in the Post and Page models called `editorBlocks`. This represents a list of available blocks for that content type: -![](images/Screenshot-2024-10-08-at-10.10.31-AM.png) +![GraphQL IDE interface showing a WPGraphQL query fetching post block data. The query requests `editorBlocks` fields, including `name` and `renderedHtml`, while the response displays structured JSON data containing block names and their corresponding rendered HTML content.](images/graphqlide-block.png) If you search in GraphQL IDE documentation explorer tab for the `editorBlocks` type you will be able to see the available block fields. The most important ones are: diff --git a/src/pages/docs/how-to/sitemaps/index.mdx b/src/pages/docs/how-to/sitemaps/index.mdx index 7084e97e..6fbd8243 100644 --- a/src/pages/docs/how-to/sitemaps/index.mdx +++ b/src/pages/docs/how-to/sitemaps/index.mdx @@ -15,7 +15,7 @@ Ensure that you have completed the steps in the following pages before proceedin 1. In your WordPress Admin, go to **Settings > Reading**. 2. Uncheck the **Search Engine Visibility** box. - ![](./images/reading-settings.png) + ![WordPress Reading Settings screen displaying options for feed content inclusion and search engine visibility. The 'Discourage search engines from indexing this site' checkbox is unchecked, ensuring the site is visible to search engines.](./images/reading-settings.png) ## 2. Create `sitemap.xml.js` diff --git a/src/pages/docs/how-to/use-wpgraphql-smart-cache/images/graphql-admin.png b/src/pages/docs/how-to/use-wpgraphql-smart-cache/images/graphql-admin.png index d287986e..0058f7ca 100644 Binary files a/src/pages/docs/how-to/use-wpgraphql-smart-cache/images/graphql-admin.png and b/src/pages/docs/how-to/use-wpgraphql-smart-cache/images/graphql-admin.png differ diff --git a/src/pages/docs/how-to/use-wpgraphql-smart-cache/index.mdx b/src/pages/docs/how-to/use-wpgraphql-smart-cache/index.mdx index bebae94f..2adbd897 100644 --- a/src/pages/docs/how-to/use-wpgraphql-smart-cache/index.mdx +++ b/src/pages/docs/how-to/use-wpgraphql-smart-cache/index.mdx @@ -21,7 +21,7 @@ Navigate to your WP Admin to install install and activate the [WPGraphQL Smart C Navigate to the WPGraphQL Settings from the left hand menu. -![](./images/graphql-admin.png) +![The WordPress admin sidebar showing the GraphQL menu expanded, revealing the "Settings" and "GraphQL IDE" options.](./images/graphql-admin.png) You will notice new "**_Cache_**" and "**_Saved Queries_**" tabs in the setting for WPGraphQL. @@ -32,7 +32,7 @@ Navigate to the "**_Cache_**" tab and set the "Cache-Control max-age" for the "* > [!INFO] > Smart Cache uses tag based cache invalidation. This means that when a post is updated, all queries that include that post will be invalidated. This is a powerful feature that allows for very granular cache invalidation. This is why we can set the cache time to a higher value than we would with a traditional cache. This TTL is the maximum time a query will be cached. If a post is updated, the cache will be invalidated without regard wo this value and the next request will be uncached. -![](./images/smart-cache-wpadmin-cache.png) +![The "Cache" settings tab in the WPGraphQL admin panel, where the "Cache-Control max-age" value is set to 600 seconds for network caching.](./images/smart-cache-wpadmin-cache.png) ### C. Configure Saved Queries @@ -43,7 +43,7 @@ Navigate to the "**_Saved Queries_**" tab and select the box to "Display saved q > > If you are concerned about this abuse, you can adjust these global settings or set "Allow/Deny" on a per query basis. See the [Persisted Query docs](https://github.com/wp-graphql/wp-graphql-smart-cache/blob/main/docs/persisted-queries.md) for more information. -![](./images/smart-cache-wpadmin-saved-queries.png) +![The "Saved Queries" settings tab in WPGraphQL, displaying options for configuring query persistence, including allow/deny mode and the ability to display saved queries in the admin editor.](./images/smart-cache-wpadmin-saved-queries.png) ## 3. Enabling Automatic Persisted Queries in Faust.js @@ -71,10 +71,10 @@ export default setConfig({ Start up your development server and navigate to a page that uses GraphQL queries. If you check the "Network tab of your Developer Tools in browser you should see the network requests being made with the `GET` method. -![](./images/network-graphql-get.png) +![A browser developer tools panel showing network requests for a GraphQL query, including response headers and caching details.](./images/network-graphql-get.png) ## 5. Seeing your Persisted Queries Finally, let's go checkout our persisted queries! Selct the "GraphQL Documents" option from the left hand menu in your WP Admin. You should see any queries that have been made by your site. As you add and modify queries, you'll see them appear here. -![](./images/graphql-persisted-queries.png) +![The GraphQL Documents admin page in WordPress, displaying a list of persisted GraphQL queries, including "PostArchive" and "PostPreview," along with their associated alias names.](./images/graphql-persisted-queries.png)