Add meta descriptions to all docs files

src/pages/docs/explanation/apollo-client-basics/index.mdx

@@ -1,7 +1,8 @@
 export const metadata = {
-    title: "Apollo Client Basics",
-
-}
+	title: "Apollo Client Basics",
+	description:
+		"Learn about core Apollo Client concepts like queries, fragments, mutations, and caching as they relate to Faust.js and WordPress.",
+};
 
 Faust.js uses `@apollo/client` under the hood to perform GraphQL operations against your WordPress backend. Having a solid understanding of Apollo Client queries, fragments, and mutations will help you get the most out of Faust.js.
 

src/pages/docs/explanation/example/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Example",
+	description:
+		"Example documentation page demonstrating various content elements and formatting styles.",
 };
 
 Welcome to the Faust.js docs!

src/pages/docs/explanation/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Explanation",
+	description:
+		"High-level conceptual guides that provide background information and understanding of Headless WordPress development.",
 };
 
 I see you found the root of the Explanatory guides! Explanatory guides are a place where we step away from code and talk high-level concepts and import background information. If you are looking to grow your understanding of Headless WordPress, you are in the right place.

src/pages/docs/explanation/migrating-to-typescript/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Migrating to TypeScript",
+	description:
+		"Guide for migrating existing Next.js pages to TypeScript in a Faust.js project with resources and references.",
 };
 
 If you have existing Next.js pages that you want to migrate to TypeScript, you can follow the [official TypeScript Docs](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html) for general TypeScript migration tips.

src/pages/docs/explanation/telemetry/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Telemetry",
+	description:
+		"Information about Faust's anonymous telemetry data collection, what data is collected, and how to opt out.",
 };
 
 Faust collects completely anonymous telemetry data about general usage. Participation in this anonymous program is optional. For more information on how we handle this data, please read our [Privacy Policy](/privacy-policy).

src/pages/docs/how-to/authentication/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Auth",
+	description:
+		"Guide to implementing authentication in your Next.js app using Faust.js toolkit features.",
 };
 
 Understanding authentication is crucial for protecting your application's data. This page will guide you through implementing features from the Faust.js toolkit into your Next.js app.

src/pages/docs/how-to/basic-setup/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
-	title: "Basic Setup with Template Hierarchy",
+	title: "Basic Setup",
+	description:
+		"Step-by-step guide for setting up a WordPress backend and Next.js frontend to use Faust.js toolkit features.",
 };
 
 In order to leverage any of the tools in the Faust.js toolkit, some preliminary setup needs to be done. Follow the steps below to get started.
@@ -16,6 +18,10 @@ Likewise, if you don't have a Next.js project yet, [create one](https://nextjs.o
 
 Install and activate the [FaustWP](https://wordpress.org/plugins/faustwp/) and [WPGraphQL](https://wordpress.org/plugins/wp-graphql/) plugins on your WordPress backend site.
 
+### Set permalinks
+
+In the WordPress admin sidebar, go to `Settings` > `Permalinks`. Check the radio button next to `Custom Structure`, type `/blog/%postname%/` into the box next to it, then click the button to save your changes. This will result in Posts having URIs like `/blog/hello-world`, whereas Pages will still exist on the root domain, such as `/about`.
+
 ### Set environment variables
 
 Create a `.env.local` file in the root of your Next.js project that contains these environment variables:
@@ -32,7 +38,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)
+![Faust.js secret key](./images/headless-admin-secret-1024x743.png)
 
 Save your `.env.local` file.
 
@@ -46,39 +52,40 @@ npm install @apollo/client @faustwp/core graphql @faustwp/cli
 
 ## Create Faust config file
 
-Create a `faust.config` file in the root of your project with this code:
+Create a `faust.config.js` file in the root of your project with this code:
 
 ```js title="faust.config.js"
 import { setConfig } from "@faustwp/core";
 
 /**
  * @type {import('@faustwp/core').FaustConfig}
  **/
-export default setConfig({
-	plugins: [],
-});
+export default setConfig({});
 ```
 
 ### Create Faust API route
 
-Create an API route for Faust.js to use. You can do this by creating a file in `pages/api/faust/[[...route]].js`, with the following code:
+Create an API route for Faust.js to use. You can do this by creating a file in `src/pages/api/faust/[[...route]].js`, with the following code:
 
-```js title="pages/api/faust/[[...route]].js"
-import "../../../faust.config";
+```js title="src/pages/api/faust/[[...route]].js"
+import "../../faust.config"; // Adjust path as necessary
 
 export { apiRouter as default } from "@faustwp/core";
 ```
 
+> [!IMPORTANT] Important
+> If you're not using a `/src` folder in your project, you can omit "/src" from the file path above. And the same applies for other file paths mentioned throughout this doc.
+
 ### Update `_app.js` file
 
-Once the API router is set up, head to `pages/_app.js` and add this code to the file:
+Once the API router is set up, head to `src/pages/_app.js`. Add the `import` statements, wrap your app in the `FaustProvider`, and pass `key={router.asPath}` to `Component`, as shown below.
 
-```js title="pages/_app.js"
+```js title="src/pages/_app.js"
 import { useRouter } from "next/router";
 import { FaustProvider } from "@faustwp/core";
 import "../faust.config";
 
-export default function MyApp({ Component, pageProps }) {
+export default function App({ Component, pageProps }) {
 	const router = useRouter();
 
 	return (
@@ -95,6 +102,8 @@ export default function MyApp({ Component, pageProps }) {
 
 In order for Faust.js to run the GraphQL queries it needs to determine the correct template to use, it needs to have a list of all the types available in the GraphQL schema. We'll generate this list of types now.
 
+In your WordPress admin sidebar, go to `GraphQL` > `Settings`. Check the `Enable Public Introspection` box if it's not checked already and save your changes. Enabling introspection is required for the `npm run generate` command below to work.
+
 Add the following generate script to your Next.js project's `package.json` file, in the scripts block:
 
 ```json title="package.json"
@@ -109,12 +118,9 @@ Add the following generate script to your Next.js project's `package.json` file,
 
 Run `npm run generate` on the command line. Confirm that a possibleTypes.json has been generated in the root of your project.
 
-> [!IMPORTANT] Important
-> Be sure to enable WPGraphQL introspection before running the `npm run generate` command since it is [disabled by default](https://www.wpgraphql.com/docs/security#introspection-disabled-by-default).
-
 ### Add a template
 
-Create a new `wp-templates` folder in the root of your project. This is where your template files will be stored. We'll start by adding a template for rendering single blog posts.
+Create a new `src/wp-templates` folder (or add the `/wp-templates` folder in the root project folder if you don't use a `/src` folder). This is where your template files will be stored. We'll start by adding a template for rendering single blog posts.
 
 Inside the `wp-templates` folder, create a `single.js` file that contains the following code.
 
@@ -157,30 +163,30 @@ In the `SingleTemplate` component, we receive the props, destructure the `title`
 Finally, we have to make Faust.js aware that this template exists. To do that, create an `index.js` file inside the `wp-templates` folder with this code inside:
 
 ```js title="wp-templates/index.js"
-import single from "./single";
+import SingleTemplate from "./single";
 
 const templates = {
-	single,
+	single: SingleTemplate,
 };
 
 export default templates;
 ```
 
 ### Pass in Templates and Types in Faust.js config
 
-Put the following code inside your Faust.js config:
+Put the following code inside your `faust.config.js` file:
 
 ```js title="faust.config.js"
 import { setConfig } from "@faustwp/core";
-import templates from "./wp-templates/index.js";
-import possibleTypes from "./possibleTypes.json";
+import templates from "./src/wp-templates/index.js"; // Adjust path as necessary // [!code ++]
+import possibleTypes from "./possibleTypes.json"; // [!code ++]
 
 /**
  * @type {import('@faustwp/core').FaustConfig}
  **/
 export default setConfig({
-	templates,
-	possibleTypes,
+	templates, // [!code ++]
+	possibleTypes, // [!code ++]
 });
 ```
 
@@ -190,7 +196,7 @@ Here, we call the `setConfig()` function that Faust.js provides, passing in our
 
 Create a `[...wordpressNode].js` file inside your `pages` folder. Add the following code to it.
 
-```js title="pages/[...wordpressNode].js"
+```js title="src/pages/[...wordpressNode].js"
 import { getWordPressProps, WordPressTemplate } from "@faustwp/core";
 
 export default function Page(props) {
@@ -211,7 +217,7 @@ export async function getStaticPaths() {
 
 This catch-all route tells Next.js to use the templates to render pages.
 
-Note that it is still possible to override this with hardcoded pages. For example, if you have a page in your WordPress site with a URI of `/about`, Faust.js will render that page using the relevant template in your project's `wp-templates` folder. However, if you add a `pages/about.js` file to your project, Next.js will render the `/about` path in your app using that file instead.
+Note that it is still possible to override this with hardcoded pages. For example, if you have a page in your WordPress site with a URI of `/about`, Faust.js will render that page using the relevant template in your project's `wp-templates` folder. However, if you add a `src/pages/about.js` file to your project, Next.js will render the `/about` path in your app using that file instead.
 
 ## Test your template
 

src/pages/docs/how-to/create-a-plugin/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Create A Plugin",
+	description:
+		"Learn how to create Faust.js plugins to extend or alter the framework's behavior using JavaScript/TypeScript actions and filters.",
 };
 
 Faust plugins are a structured way to extend or alter the framework's behavior, very much like WordPress plugins do in a traditional WordPress environment. Instead of `PHP`, however, Faust's plugins are written in JavaScript/TypeScript, leveraging actions and filters to deliver similar flexibility in a headless architecture.

src/pages/docs/how-to/generate-types-with-graphql-codegen/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Generate types with GraphQL Codegen",
+	description:
+		"Guide to generating TypeScript definitions for your custom GraphQL queries and fragments using GraphQL Code Generator.",
 };
 
 Faust.js provides built-in TypeScript support, including types for Templates, Blocks, and more. This guide will show you how to generate fully typed definitions for your custom GraphQL queries and fragments using [GraphQL Code Generator](https://the-guild.dev/graphql/codegen).

src/pages/docs/how-to/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "How-to Guides",
+	description:
+		"Step-by-step guides for implementing specific features and achieving practical goals with Faust.js.",
 };
 
 I see you found the root of the How-to guides! How-to guides are a place where we walk you through implementing specific features of Faust.js®. If you are looking to achieve a specific goal with Faust.js®, you are in the right place.

src/pages/docs/how-to/post-previews/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Post Previews",
+	description:
+		"Learn how to implement post preview functionality in your headless WordPress app using Faust.js.",
 };
 
 When editing content in the [WordPress editor](https://wordpress.com/support/wordpress-editor/), content creators can click the **Preview** link to preview what the content will look like on the frontend before the post has been published. This docs page outlines how to set up post previews in a headless WordPress app.

src/pages/docs/how-to/query-data-in-nextjs-routes/index.mdx

@@ -1,6 +1,7 @@
 export const metadata = {
-    title: "Query Data in Next.js Routes",
-
+	title: "Query Data in Next.js Routes",
+	description:
+		"Guide to pre-fetching WordPress data in Next.js routes using getNextServerSideProps and getNextStaticProps helper functions.",
 };
 
 When you want to pre-fetch WordPress data and render your pages outside of the Faust.js template hierarchy and instead use Next.js routes, either at **build time** or **on every request**, Faust provides two helper functions:

src/pages/docs/how-to/query-data-in-the-browser/index.mdx

@@ -1,7 +1,8 @@
 export const metadata = {
-    title: "Query Data in the Browser",
-
-}
+	title: "Query Data in the Browser",
+	description:
+		"Learn how to perform client-side data fetching using Apollo's useQuery hook in your React components.",
+};
 
 When you query data in the browser, you're leveraging Apollo's `useQuery` hook within your React components.
 

src/pages/docs/how-to/rendering-blocks-with-the-template-hierarchy/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Rendering Blocks with the Template Hierarchy",
+	description:
+		"Learn how to use Faust.js template router to dynamically map and render WordPress blocks as React components.",
 };
 
 In headless WordPress with Faust.js, the template router offers a powerful way to dynamically map WordPress pages and posts to specific templates, streamlining how content is fetched and rendered. When working with WordPress block data, the template router allows you to efficiently map block types to React components, giving you greater control over how individual blocks are rendered within each template.

src/pages/docs/how-to/rendering-blocks/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Rendering Blocks",
+	description:
+		"Guide to mapping WordPress blocks to React components in your front-end app for customized block rendering.",
 };
 
 In headless WordPress, it's possible to take the HTML for an entire page and insert it into the DOM in your decoupled front-end app. On most sites, though, it becomes necessary to map WordPress blocks to React components in your front-end app so you can control how individual blocks are rendered. This document details how to do just that.

src/pages/docs/how-to/sitemaps/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Sitemaps",
+	description:
+		"Guide to implementing XML sitemaps in your headless WordPress site using Faust.js built-in sitemap functionality.",
 };
 
 Sitemaps can be a complicated process when using WordPress in a headless environment. Thankfully, Faust takes care of all your sitemap needs through creation of a file within the pages directory.

src/pages/docs/how-to/use-wpgraphql-smart-cache/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Using WPGraphQL Smart Cache Network Caching",
+	description:
+		"Guide to optimizing GraphQL queries using WPGraphQL Smart Cache with Faust.js built-in network caching support.",
 };
 
 WPGraphQL Smart Cache optimizes GraphQL queries by caching the results of your requests and automatically evicting outdated data whenever your WordPress content changes. Faust.js provides built-in support for [Network Caching](https://github.com/wp-graphql/wp-graphql-smart-cache/blob/main/docs/network-cache.md). This guide walks you through enabling Automatic Persisted Queries, using GET methods for network requests, and making one-off requests that override your default settings.

src/pages/docs/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Introduction",
+	description:
+		"Introduction to Faust.js, a toolkit for building headless WordPress applications with Next.js.",
 };
 
 ## What is Faust.js®?

src/pages/docs/nav.json

@@ -3,6 +3,16 @@
 		"title": "Getting Started",
 		"route": "/docs/"
 	},
+	{
+		"title": "Tutorials",
+		"route": "/docs/tutorial/",
+		"children": [
+			{
+				"title": "Learn Faust.js",
+				"route": "/docs/tutorial/learn-faust/"
+			}
+		]
+	},
 	{
 		"title": "How-To Guides",
 		"route": "/docs/how-to/",

src/pages/docs/reference/from-theme-json/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "fromThemeJson",
+	description:
+		"Reference for the fromThemeJson helper function that converts WordPress theme.json objects into compatible BlocksTheme objects.",
 };
 
 The `fromThemeJson` is a helper function that is used to convert a WordPress theme's `theme.json` object into a compatible `BlocksTheme` object.

src/pages/docs/reference/get-next-server-side-props/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "getNextServerSideProps",
+	description:
+		"Reference for the getNextServerSideProps function used to enable server-side rendering with WordPress data outside the template hierarchy.",
 };
 
 The `getNextServerSideProps` function lets you server side render your page with WordPress data outside of the template hierarchy using Next.js file-based pages. The function should be returned from `getServerSideProps` which is required by Next.js to perform server-side rendering (SSR).

src/pages/docs/reference/get-next-static-props/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "getNextStaticProps",
+	description:
+		"Reference for the getNextStaticProps function used to build static sites with WordPress data outside the template hierarchy.",
 };
 
 The `getNextStaticProps` function lets you build a static site with your WordPress data outside of the template hierarchy using Next.js file based pages. The function should be returned from `getStaticProps`.

src/pages/docs/reference/get-site-map-props/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "getSiteMapProps",
+	description:
+		"Reference for the getSitemapProps helper function used to proxy sitemaps from WordPress to your Faust frontend.",
 };
 
 `getSitemapProps` is a server side helper function that facilitates the proxying of sitemaps from your WordPress site to your Faust frontend. It is a function that is returned from inside of a [`getServerSideProps`](https://nextjs.org/docs/basic-features/data-fetching/get-server-side-props) Next.js function.

src/pages/docs/reference/get-styles/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "getStyles",
+	description:
+		"Reference for the getStyles helper function used to calculate inline styles for WordPress blocks based on theme and block properties.",
 };
 
 The `getStyles` is a helper function that is used to calculate the inline styles of a block given the current theme and block properties. This is mainly useful when developing blocks taken from the [core WordPress blocks list](https://developer.wordpress.org/block-editor/reference-guides/core-blocks/).

src/pages/docs/reference/get-wordpress-props/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "getWordPressProps",
+	description:
+		"Reference for the getWordPressProps function used to set up the Faust Template Hierarchy system in Next.js applications.",
 };
 
 `getWordPressProps` is a function that should be returned within Next.js' `getStaticProps` or `getServerSideProps` to properly setup the Faust Template Hierarchy system.

src/pages/docs/reference/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "Reference Guides",
+	description:
+		"API specifications and detailed documentation for Faust.js functions, components, and features.",
 };
 
 I see you found the root of the Reference guides! Reference guides are a place where we provide API specs. If you are looking for information on specific APIs, you are in the right place.

src/pages/docs/reference/set-config/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "setConfig",
+	description:
+		"Reference for the setConfig function used to configure Faust.js settings in the faust.config.js file.",
 };
 
 The `setConfig` function is used to set the configuration for Faust. It is used in the `faust.config.js` file to set the configuration options for Faust.

src/pages/docs/reference/typescript/index.mdx

@@ -1,5 +1,7 @@
 export const metadata = {
 	title: "TypeScript",
+	description:
+		"Guide to using TypeScript with Faust.js components, hooks, and plugins, including common patterns and type definitions.",
 };
 
 Faust has built-in TypeScript support, which means you can use TypeScript to type your Faust components, hooks, and plugins. This may not be exhaustive but should show you common patterns for typing your Faust code.