chore: improve metatadata

Author: LGLabGreg

apps/docs/src/app/data-modules-settings/page.tsx

@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { Bold, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'DataModulesSettings',
+  description:
+    'Configuration options for DataModulesSettings in @lglab/react-qr-code, used to control QR code data module color, shape, and random sizing.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',

apps/docs/src/app/examples/background/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from 'next'
+
 import {
   DemoGradient,
   DemoSolid,
@@ -8,6 +10,12 @@ import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyH3, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Background Example',
+  description:
+    'Example showing how to customize QR code backgrounds in @lglab/react-qr-code using solid colors and gradients.',
+}
+
 export default function Page() {
   return (
     <>

apps/docs/src/app/examples/data-modules/page.tsx

@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/data-modules'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Data Modules Example',
+  description:
+    'Example demonstrating how to customize QR code data modules in @lglab/react-qr-code, including shape, color, and random sizing.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Data modules example' />
       <TypographyP>
         The data modules in a QR code are the small squares that encode the actual
         information. With @lglab/react-qr-code, you can customize their shape and color,

apps/docs/src/app/examples/download/page.tsx

@@ -1,8 +1,16 @@
+import type { Metadata } from 'next'
+
 import { DemoDownload, codeBlock } from '@/components/demos/demo-download'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Download Example',
+  description:
+    'Example demonstrating how to use the download API in @lglab/react-qr-code to export QR codes as SVG, PNG, or JPEG files.',
+}
+
 export default function Page() {
   return (
     <>

apps/docs/src/app/examples/finder-patterns/page.tsx

@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/finder-patterns'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Finder Patterns Example',
+  description:
+    'Example showing how to customize QR code finder patterns in @lglab/react-qr-code, including inner and outer styles.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Finder patterns example' />
       <TypographyP>
         The finder patterns are the three prominent squares located at the corners of a QR
         code, essential for orientation during scanning. With @lglab/react-qr-code, you

apps/docs/src/app/examples/image/page.tsx

@@ -1,14 +1,21 @@
+import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { Demo, codeBlock } from '@/components/demos/image'
 import { PageHeading } from '@/components/page-heading'
 import { ExampleTabs } from '@/components/ui/example-tabs'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'Image Example',
+  description:
+    'Example showing how to embed images or logos inside QR codes using the ImageSettings options in @lglab/react-qr-code.',
+}
+
 export default function Page() {
   return (
     <>
-      <PageHeading heading='Data Modules' />
+      <PageHeading heading='Image example' />
       <TypographyP>
         The @lglab/react-qr-code library allows you to embed images or logos within your
         QR codes, enhancing branding and visual appeal. This guide details the

apps/docs/src/app/finder-pattern-inner-settings/page.tsx

@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'FinderPatternInnerSettings',
+  description:
+    'Configuration options for FinderPatternInnerSettings in @lglab/react-qr-code, used to style the inner part of QR code finder patterns.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',

apps/docs/src/app/finder-pattern-outer-settings/page.tsx

@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'FinderPatternOuterSettings',
+  description:
+    'Configuration options for FinderPatternOuterSettings in @lglab/react-qr-code, used to style the outer part of QR code finder patterns.',
+}
+
 const props: Prop[] = [
   {
     name: 'color',

apps/docs/src/app/gradient-settings/page.tsx

@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyH2, TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'GradientSettings',
+  description:
+    'Configuration options for GradientSettings in @lglab/react-qr-code, including gradient type, stops, and rotation for QR code data or backgrounds.',
+}
+
 const props: Prop[] = [
   {
     name: 'type',

apps/docs/src/app/image-settings/page.tsx

@@ -1,9 +1,17 @@
+import type { Metadata } from 'next'
+
 import type { Prop } from '@/types/props'
 
 import { PageHeading } from '@/components/page-heading'
 import { PropsTable } from '@/components/props-table'
 import { TypographyP } from '@/components/ui/typography'
 
+export const metadata: Metadata = {
+  title: 'ImageSettings',
+  description:
+    'Configuration options for ImageSettings in @lglab/react-qr-code, allowing you to embed and position images or logos inside QR codes.',
+}
+
 const props: Prop[] = [
   {
     name: 'src',