feat: nuxt-seo-experiments

docs/components/HeaderLinks.vue

@@ -8,9 +8,11 @@ const items = [useModuleList()]
 
 const route = useRoute()
 const isOgImage = computed(() => {
-  console.log('route path', route.path)
   return route.path.startsWith('/og-image')
 })
+const isExperiments = computed(() => {
+  return route.path.startsWith('/experiments')
+})
 </script>
 
 <template>
@@ -40,6 +42,10 @@ const isOgImage = computed(() => {
       <span class="text-gray-700 dark:text-gray-200">OG Image</span>
     </UButton>
 
+    <UButton to="/experiments/getting-started/installation" :variant="!isExperiments ? 'ghost' : 'outline'" class="md:block hidden">
+      <span class="text-gray-700 dark:text-gray-200">Experiments</span>
+    </UButton>
+
     <div class="flex items-center justify-end -mr-1.5 gap-3">
       <DocsSearchButton class="ml-1.5 flex-1 lg:flex-none lg:w-48" />
 

docs/components/docs/DocsAsideLinks.vue

@@ -6,11 +6,23 @@ const navigation: Ref<NavItem[]> = inject('navigation')
 function mapContentLinks(links: NavItem[]) {
   return links?.map(link => ({ label: link.title, icon: link.icon, to: link._path, badge: link.badge })) || []
 }
+
+const route = useRoute()
+const children = computed(() => {
+  // first segment
+  const segment = route.path.split('/')[1]
+  switch(segment) {
+    case 'og-image':
+      return navigation.value[0].children
+    case 'experiments':
+      return navigation.value[1].children
+  }
+})
 </script>
 
 <template>
-  <div class="space-y-8">
-    <div v-for="(group, index) in navigation[0].children" :key="index" class="space-y-3">
+  <div v-if="children" class="space-y-8">
+    <div v-for="(group, index) in children" :key="index" class="space-y-3">
       <p class="text-sm font-semibold text-gray-900 dark:text-gray-200 truncate leading-6">
         {{ group.title }}
       </p>

docs/components/docs/DocsFooter.vue

@@ -29,7 +29,7 @@ const config = useRuntimeConfig().public
         />
       </div>
 
-      <NuxtLink :to="`https://github.com/nuxtlabs/ui/releases/tag/v${config.version}`" target="_blank">
+      <NuxtLink :to="`https://github.com/harlan-zw/nuxt-seo-kit/releases/tag/v${config.version}`" target="_blank">
         <UBadge :label="`v${config.version}`" />
       </NuxtLink>
     </div>

docs/content/2.og-image/0.getting-started/2.your-first-image.md

@@ -24,7 +24,7 @@ defineOgImage(ogImageOptions)
 </template>
 ```
 
-This will use the default template [OgImageBasic](./src/runtime/components/OgImageBasic.island.vue),
+This will use the default template [Fallback](https://github.com/harlan-zw/nuxt-og-image/blob/main/src/runtime/components/OgImageTemplate/Fallback.vue),
 provided by this module.
 
 
@@ -41,4 +41,4 @@ While you have the playground open, start customizing the OG Image by modifying
 Full HMR is supported, so you should see your changes instantly.
 
 Congrats, you've set up your first Satori `og:image`!
-You can check out the [options](./src/runtime/components/OgImageBasic.island.vue) of the default template.
+You can check out the [options](https://github.com/harlan-zw/nuxt-og-image/blob/main/src/runtime/components/OgImageTemplate/Fallback.vue) of the default template.

docs/content/2.og-image/3.api/0.config.md

@@ -13,7 +13,7 @@ Conditionally toggle the module.
 ### `defaults`
 
 - Type: `OgImageOptions`
-- Default: `{ component: 'OgImageBasic', width: 1200, height: 630, }`
+- Default: `{ width: 1200, height: 630 }`
 - Required: `false`
 
 The default options to use when generating images.

docs/content/3.experiments/0.getting-started/1.Installation.md

@@ -0,0 +1,36 @@
+---
+title: 'Installation'
+description: 'Get started with Nuxt SEO Experiments by installing the dependency to your project.'
+---
+
+1. Install `nuxt-seo-experiments` dependency to your project:
+
+::code-group
+
+```bash [yarn]
+yarn add -D nuxt-seo-experiments
+```
+
+```bash [npm]
+npm install -D nuxt-seo-experiments
+```
+
+```sh [pnpm]
+pnpm i -D nuxt-seo-experiments
+```
+
+::
+
+2. Add it to your `modules` section in your `nuxt.config`:
+
+```ts [nuxt.config]
+export default defineNuxtConfig({
+  modules: ['nuxt-seo-experiments']
+})
+```
+
+That's it! 
+
+All features are enabled by default. Learn more by exploring the documentation.
+
+:OgImage{site-name="nuxt-seo-experiments"}

docs/content/3.experiments/0.getting-started/2.prerender-requirements.md

@@ -0,0 +1,16 @@
+---
+title: Prerender Requirements
+---
+
+When using `nuxt generate`, you will need to provide some additional configuration.
+
+- You must provide a `site.url` or the `process.env.NUXT_PUBLIC_SITE_URL` so that the meta tags can be generated correctly as absolute URLs.
+
+```ts
+export default defineNuxtConfig({
+  site: {
+    // if not using environment variables
+    url: 'https://example.com',
+  },
+})
+```

docs/content/3.experiments/0.getting-started/5.credits.md

@@ -0,0 +1,10 @@
+---
+title: Credits
+---
+
+A special thank you to the following people for their work, which helped in the development of this project:
+
+- Next.js team
+- Nuxt UI / Docus team
+
+And all early adopters of this module, thank you for your support!

docs/content/3.experiments/0.getting-started/_dir.yml

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: noto:star

docs/content/3.experiments/2.guides/0.app-icons.md

@@ -0,0 +1,78 @@
+---
+title: App Icons
+description: Learn how metadata files work with logos.
+---
+
+By following the convention for your logos, you can automatically generate `link` tags.
+
+This is based on [Next.js Metadata File](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/app-icons) with an almost identical API, however
+runtime images are not supported.
+
+You can optionally place logos in the root of your `public` folder of alongside your `pages` directory. Any images in the pages
+directory will take share the same routing.
+
+## Naming Convention
+
+### `favicon`
+
+- Name: `favicon.ico`
+
+A single `favicon.ico` file should be placed in the `public` directory. It is supported by most browsers and displayed in the browser tab.
+
+```html [head output]
+<link rel="icon" href="/favicon.ico" sizes="any" />
+```
+
+### `icon`
+
+- Name: `*icon.{ico,jpg,jpeg,png,svg}`, `*icon-*.{ico,jpg,jpeg,png,svg}`
+
+Icons give you greater control over the displayed icon. You can provide multiple icons and
+the browser will automatically select the best icon based on the device's pixel density and uses it to display the app icon.
+
+If you have multiple icons and need to sort them, it's recommended you prefix them with their order. For example:
+`1.icon.png`, `2.icon.png`, `3.icon.png`.
+
+```html [head output]
+<link rel="icon" href="/1.icon.png" sizes="32x32" type="image/png" />
+<link rel="icon" href="/2.icon.png" sizes="192x192" type="image/png" />
+<link rel="icon" href="/3.icon.png" sizes="360x360" type="image/png" />
+```
+
+### `apple-touch-icon`
+
+- Name: `*apple-icon.{png,jpg,jpeg}`, `*apple-touch-icon.{png,jpg,jpeg}`
+
+Apple touch icons are used by iOS devices to display a website's icon on the home screen and in the browser tab. You can again provide
+multiple icons.
+
+```html [head output]
+<link rel="apple-touch-icon" href="/apple-icon.png" sizes="180x180" />
+```
+
+## Pages Directory
+
+You can also place logos in your `pages` directory. This is useful if you want to have different logos for different pages.
+
+The naming convention is the same as the `public` directory.
+
+```bash
+pages/
+├── index.vue
+├── admin/
+│   ├── index.vue
+│   └── icon.png
+```
+
+This will overwrite any logos in the `public` directory for all `admin` pages.
+
+You can optionally also place your files within the `_dir` directory, which will work the same way.
+
+```bash
+pages/
+├── index.vue
+├── admin/
+│   ├── _dir/
+│   │   └── icon.png # Does the same thing!
+│   └── index.vue
+```

docs/content/3.experiments/2.guides/1.open-graph-images.md

@@ -0,0 +1,112 @@
+---
+title: Open Graph Images
+description: Automatically set meta tags for Open Graph images.
+---
+
+By following the convention for your social share images, you can automatically generate `meta` tags.
+
+This is based on [Next.js Metadata File](https://nextjs.org/docs/app/api-reference/file-conventions/metadata/opengraph-image) with an almost identical API, however
+runtime images are not supported.
+
+You can optionally place images in the root of your `public` folder of alongside your `pages` directory. Any images in the pages
+directory will take share the same routing.
+
+## File Types
+
+### `opengraph-image`
+
+Open Graph images are used by social media sites to display a website's icon when shared.
+
+The image dimensions and type will be automatically generated from the image file.
+
+- `*og-image.{png,jpg,jpeg,gif}`
+- `*opengraph-image-*.{png,jpg,jpeg,gif}`
+
+```bash [Example File Structure]
+pages/
+├── index.vue
+├── about/
+│   ├── index.vue
+│   └── og-image.png
+```
+
+<br>
+
+```html [Head output]
+<meta property="og:image" content="<site-url>/about/og-image.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:type" content="image/png" />
+```
+
+
+### `twitter-image`
+
+Twitter images are used by to display an image when your site is shared on Twitter.
+
+The image dimensions and type will be automatically generated from the image file.
+
+- `*twitter-image.{png,jpg,jpeg,gif}`
+
+
+```bash [Example File Structure]
+pages/
+├── index.vue
+├── about/
+│   ├── index.vue
+│   └── twitter-image.png
+```
+
+<br>
+
+```html [head output]
+<meta name="twitter:image" content="<site-url>/about/twitter-image.png" />
+<meta name="twitter:image:width" content="1200" />
+<meta name="twitter:image:height" content="630" />
+<meta name="twitter:image:type" content="image/png" />
+```
+
+## Providing Alternate Text
+
+You can provide alternate text for your images by using creating a matching `.txt` file for your image.
+
+For example, if you have an image `og-image.png`, you can create a `og-image.txt` file with the alternate text.
+
+``` [og-image.txt]
+This is the alternate text for my image.
+```
+
+```html [head output]
+<meta property="og:image:alt" content="This is the alternate text for my image." />
+```
+
+## Using _dir folder
+
+It's recommended to use the `_dir` folder to store your images when you have multiple images for a single route.
+
+```bash [Example File Structure]
+pages/
+├── index.vue
+├── about/
+│   ├── index.vue
+│   └── _dir/
+│       ├── og-image.png
+│       ├── og-image.txt
+│       ├── twitter-image.png
+│       └── twitter-image.txt
+```
+
+<br>
+
+```html [head output]
+<meta property="og:image" content="<site-url>/about/_dir/og-image.png" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:type" content="image/png" />
+<meta property="og:image:alt" content="This is the alternate text for my image." />
+<meta name="twitter:image" content="<site-url>/about/_dir/twitter-image.png" />
+<meta name="twitter:image:width" content="1200" />
+<meta name="twitter:image:height" content="630" />
+<meta name="twitter:image:type" content="image/png" />
+<meta name="twitter:image:alt" content="This is the alternate text for my image." />
+```

docs/content/3.experiments/2.guides/2.nuxt-config-seo-meta.md

@@ -0,0 +1,22 @@
+---
+title: Nuxt Config SEO Meta
+description: Make use of the power of useSeoMeta inside your nuxt.config.
+---
+
+The [useSeoMeta](https://nuxt.com/docs/api/composables/use-seo-meta#useseometa) composable is a powerful tool for managing SEO meta tags.
+
+This module brings the power of `useSeoMeta` to your `nuxt.config`.
+
+To use it, simply add within the `app.seoMeta` config of your `nuxt.config`:
+
+```ts [nuxt.config]
+export default defineNuxtConfig({
+  app: {
+    seoMeta: {
+      ogImage: 'https://example.com/my-og-image.png'
+    }
+  }
+})
+```
+
+The functionality is the same as the composable without reactivity. It has a higher priority than `app.head`.