Merge pull request #247 from wpengine/fix/add-alt-text-to-images

Fix: Add alt-text to images and fix mdx-components.jsx file

Author: moonmeister

mdx-components.jsx

@@ -5,15 +5,16 @@ import CustomLink from "@/components/link";
 
 export function useMDXComponents(components) {
 	return {
-		img: ({ src }, ...props) => (
+		img: ({ src, alt }, ...props) => (
 			<Image
-				alt={props.alt}
+				alt={alt}
 				blurDataURL={src.blurDataURL}
 				height={src.height}
 				placeholder="blur"
 				src={src.src}
 				style={{ width: "100%", height: "auto" }}
 				width={src.width}
+				{...props}
 			/>
 		),
 		a: (props) => <CustomLink {...props} />,

…images/auth-redirect-flow-2048x989-3.png …entication/images/auth-redirect-flow.pngsrc/pages/docs/how-to/authentication/images/auth-redirect-flow-2048x989-3.png renamed to src/pages/docs/how-to/authentication/images/auth-redirect-flow.png src/pages/docs/how-to/authentication/images/auth-redirect-flow-2048x989-3.png renamed to src/pages/docs/how-to/authentication/images/auth-redirect-flow.png

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

src/pages/docs/how-to/authentication/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.
 

…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

@@ -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/basic-setup/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)