fixed images and added alt text. destructures props and mdx file appropriately.

Author: Fran-A-Dev

…mages/headless-admin-secret-1024x743.png …c-setup/images/headless-admin-secret.pngsrc/pages/docs/how-to/basic-setup/images/headless-admin-secret-1024x743.png renamed to src/pages/docs/how-to/basic-setup/images/headless-admin-secret.png src/pages/docs/how-to/basic-setup/images/headless-admin-secret-1024x743.png renamed to src/pages/docs/how-to/basic-setup/images/headless-admin-secret.png

@@ -32,7 +32,8 @@ 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.
 

src/pages/docs/how-to/basic-setup/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
 

src/pages/docs/how-to/generate-types-with-graphql-codegen/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)

…ges/post-preview-frontend-1024x806-1.png …reviews/images/post-preview-frontend.pngsrc/pages/docs/how-to/post-previews/images/post-preview-frontend-1024x806-1.png renamed to src/pages/docs/how-to/post-previews/images/post-preview-frontend.png src/pages/docs/how-to/post-previews/images/post-preview-frontend-1024x806-1.png renamed to src/pages/docs/how-to/post-previews/images/post-preview-frontend.png

@@ -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:
 

…views/images/post-preview-1024x806-1.png …to/post-previews/images/post-preview.pngsrc/pages/docs/how-to/post-previews/images/post-preview-1024x806-1.png renamed to src/pages/docs/how-to/post-previews/images/post-preview.png src/pages/docs/how-to/post-previews/images/post-preview-1024x806-1.png renamed to src/pages/docs/how-to/post-previews/images/post-preview.png

@@ -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`