doc: grammar

docs/content/0.getting-started/0.introduction.md

@@ -5,6 +5,24 @@ navigation:
   title: 'Introduction'
 ---
 
+## Why use Nuxt OG Image?
+
+When you share a link of your site on social media or some chat platforms, the link will be [unfurled](https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-know-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb9254),
+displaying a title, description, and an image. All of these are powered by the [Open Graph Prtocol](https://ogp.me/).
+
+Nuxt OG Image allows you to generate these images at runtime or when prerendering, using simple Vue templates.
+
+For example, the OG image for the current page is:
+
+<img src="/__og-image__/static/docs/og-image/getting-started/introduction/og.png">
+
+While it may not help with your organic traffic, it can significantly improve the click-through rate of your pages when shared.
+
+While it's simple to create your own OG images, it can be time-consuming to keep them up-to-date with your site's content and easy to misconfigure
+the meta tags for each platform.
+
+Ready to get started? Check out the [installation guide](/docs/og-image/getting-started/installation).
+
 ## Features
 
 - ✨ Create an og:image using the built-in templates or make your own with Vue components

docs/content/0.getting-started/1.installation.md

@@ -5,20 +5,31 @@ navigation:
   title: 'Installation'
 ---
 
-## Module Setup
+## Setup Module
+
+Want to know why you might need this module? Check out the [introduction](/docs/og-image/getting-started/introduction).
+
+To get started with Nuxt OG IMage, you need to install the dependency and add it to your Nuxt config.
 
 :ModuleInstall{name="og-image"}
 
-### DevTools
+## Verifying Installation
+
+Out-of-the-box the module will not do anything until you configure it.
+
+You can verify the module is installed correctly by checking the [Nuxt DevTools](https://devtools.nuxt.com/) for the OG Image tab.
+
+The DevTools is the starting point, providing a playground to design and test your OG Image with full HMR support.
+
+## Configuration
+
+OG Images must be served with absolute URLs, if you're prerendering, you will need
+to provide a Site URL.
 
-Nuxt OG Image uses [Nuxt DevTools](https://devtools.nuxt.com/) to provide a live preview of your OG Images.
+:SiteConfigQuickSetup
 
-```ts [nuxt.config.ts]
-export default defineNuxtConfig({
-  devtools: { enabled: true },
-})
-```
+## Next Steps
 
-### Previewing Your OG Image
+You've successfully installed Nuxt OG Image, but you need to make your first OG Image.
 
-Get started with the [OG Image](/docs/og-image/getting-started/getting-familar-with-nuxt-og-image) tutorial.
+Follow the [Getting Familiar with Nuxt OG Image](/docs/og-image/getting-started/getting-familar-with-nuxt-og-image) tutorial to get started.

docs/content/0.getting-started/5.getting-familar-with-nuxt-og-image.md

@@ -38,7 +38,7 @@ Once you're in the Nuxt DevTools, you can navigate to the OG Image tab by openin
 You should now see a preview of your OG Image.
 
 <div class="px-10">
-<img loading="lazy" class="rounded-lg shadow-lg" height="300" style="aspect-ratio: 2 / 1;" src="/__og-image__/image/og-image/api/nuxt-seo-template/og.png?component=NuxtSeo&title=This+is+the+NuxtSeo+template" alt="NuxtSeo Template" />
+<img loading="lazy" class="rounded-lg shadow-lg" height="300" style="aspect-ratio: 2 / 1;" src="/__og-image__/static/docs/og-image/getting-started/getting-familar-with-nuxt-og-image/og.png" alt="NuxtSeo Template" />
 </div>
 
 ## Part 2: Customising NuxtSeo Template

docs/content/4.api/0.define-og-image-component.md

@@ -3,7 +3,9 @@ title: defineOgImageComponent()
 description: Define an og:image for the current page with type safety.
 ---
 
-The `defineOgImageComponent` composable allows you to define an og:image using a custom template for the current page
+## Introduction
+
+The `defineOgImageComponent()`{lang="ts"} composable allows you to define an og:image using a custom template for the current page
 with improved type safety.
 
 ## Arguments

docs/content/4.api/0.define-og-image-screenshot.md

@@ -3,7 +3,9 @@ title: defineOgImageScreenshot()
 description: Define an OG Image that takes a screenshot of the page.
 ---
 
-The `defineOgImageScreenshot` composable allows you to take a screenshot of the page and use it as the image.
+## Introduction
+
+The `defineOgImageScreenshot()`{lang="ts"} composable allows you to take a screenshot of the page and use it as the image.
 
 This requires the `chromium` renderer, check the [chromium](/docs/og-image/guides/chromium) guide for more information.
 

docs/content/4.api/0.define-og-image.md

@@ -3,7 +3,9 @@ title: defineOgImage()
 description: Define an og:image for the current page.
 ---
 
-The `defineOgImage` composable allows you to define an og:image for the current page.
+## Introduction
+
+The `defineOgImage()`{lang="ts"} composable allows you to define an og:image for the current page.
 
 It supports rendering a custom image, using an existing image, or disabling the og:image for the current page.
 

docs/content/4.api/3.components.md

@@ -3,6 +3,8 @@ title: Components
 description: Components that are included with the module, including OgImage and OgImageScreenshot.
 ---
 
+## Introduction
+
 It's recommended to use composables over components, as they are more flexible and will provide better type safety.
 
 ## `OgImage`

docs/content/4.api/3.nuxt-hooks.md

@@ -7,7 +7,7 @@ Built-time hooks for Nuxt OG Image.
 
 ## `nuxt-og-image:runtime-config`
 
-**Type:** `(config: ModuleOptions) => HookResult`
+**Type:** `(config: ModuleOptions) => HookResult`{lang="ts"}
 
 Allows you to modify the Nuxt OG IMage runtime config at build-time.
 
@@ -26,7 +26,7 @@ export default defineNuxtConfig({
 
 ## `nuxt-og-image:components`
 
-**Type:** `(ctx: { components: OgImageComponent[] }) => HookResult`
+**Type:** `(ctx: { components: OgImageComponent[] }) => HookResult`{lang="ts"}
 
 This hook allows you to programmatically modify the components that are used by the module.
 

docs/content/5.nitro-api/4.nitro-hooks.md

@@ -7,7 +7,7 @@ Runtime hooks for Nuxt OG Image.
 
 ## `nuxt-og-image:context`
 
-**Type:** `async (ctx: OgImageRenderEventContext) => void | Promise<void>`
+**Type:** `async (ctx: OgImageRenderEventContext) => void | Promise<void>`{lang="ts"}
 
 Called when the render context is generated. Within this object you can the entire behaviour of the render.
 
@@ -30,7 +30,7 @@ export default defineNitroPlugin((nitroApp) => {
 
 ## `nuxt-og-image:satori:vnodes`
 
-**Type:** `async (vnodes: VNode[]) => void | Promise<void>`
+**Type:** `async (vnodes: VNode[]) => void | Promise<void>`{lang="ts"}
 
 Called when the Satori vnodes are generated. Using this hook you can modify the final content that is passed to Satori.