feat: astro seo

packages/website/src/pages/[...locale]/docs/[directory]/[document]/index.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroSeo } from '@astrolib/seo';
 import type { GetStaticPaths } from 'astro';
 import { readFile } from 'fs/promises';
 import BaseLayout from '../../../../../layouts/BaseLayout.astro';
@@ -7,7 +8,6 @@ import { Page } from './_index';
 
 export const getStaticPaths = (async () => {
   const parentPaths = parentGetStaticPaths();
-
   const ROOT = '../../../../../../../../docs/';
   const files = import.meta.glob('../../../../../../../../docs/**/*.md', {
     eager: true,
@@ -40,7 +40,18 @@ const { content } = Astro.props;
 const title = content.split('\n')[0].replace('# ', '');
 ---
 
-<title>{title}</title>
+<AstroSeo
+  title={title}
+  description={title}
+  canonical={Astro.url.href}
+  openGraph={{
+    url: Astro.url.href,
+    title,
+    description: title,
+    site_name: 'BlitzKit',
+  }}
+  twitter={{ cardType: 'summary_large_image' }}
+/>
 
 <BaseLayout>
   <Page content={content} />

packages/website/src/pages/[...locale]/docs/patches/index.astro

@@ -1,15 +1,17 @@
 ---
+import { AstroSeo } from '@astrolib/seo';
 import { MagicWandIcon, StarFilledIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, Link } from '@radix-ui/themes';
 import { compareVersions } from 'compare-versions';
 import { PageWrapper } from '../../../../components/PageWrapper';
+import { getStrings } from '../../../../core/i18n/getStrings';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
 
 export { getStaticPaths } from '../../index.astro';
 
 // this can't be used in template literal :(
 const ROOT = '../../../../../../../docs/changelogs/';
-
+const strings = getStrings(Astro.params.locale);
 const versions = Object.keys(
   import.meta.glob('../../../../../../../docs/changelogs/*.md', {
     eager: true,
@@ -20,7 +22,18 @@ const versions = Object.keys(
   .reverse();
 ---
 
-<title>BlitzKit Patches</title>
+<AstroSeo
+  title={strings.website.docs.patches.name}
+  description={strings.website.docs.patches.seo_description}
+  canonical={Astro.url.href}
+  openGraph={{
+    url: Astro.url.href,
+    title: strings.website.docs.patches.name,
+    description: strings.website.docs.patches.seo_description,
+    site_name: 'BlitzKit',
+  }}
+  twitter={{ cardType: 'summary_large_image' }}
+/>
 
 <BaseLayout>
   <PageWrapper align="center">

packages/website/src/pages/[...locale]/index.astro

@@ -44,36 +44,14 @@ export const getStaticPaths = (() => {
 <AstroSeo
   title="BlitzKit"
   description={strings.website.home.seo_description}
-  canonical={Astro.url}
+  canonical={Astro.url.href}
   openGraph={{
-    url: 'https://www.url.ie/a',
-    title: 'Open Graph Title',
-    description: 'Open Graph Description',
-    images: [
-      {
-        url: 'https://www.example.ie/og-image-01.jpg',
-        width: 800,
-        height: 600,
-        alt: 'Og Image Alt',
-        type: 'image/jpeg',
-      },
-      {
-        url: 'https://www.example.ie/og-image-02.jpg',
-        width: 900,
-        height: 800,
-        alt: 'Og Image Alt Second',
-        type: 'image/jpeg',
-      },
-      { url: 'https://www.example.ie/og-image-03.jpg' },
-      { url: 'https://www.example.ie/og-image-04.jpg' },
-    ],
-    site_name: 'SiteName',
-  }}
-  twitter={{
-    handle: '@handle',
-    site: '@site',
-    cardType: 'summary_large_image',
+    url: Astro.url.href,
+    title: 'BlitzKit',
+    description: strings.website.home.seo_description,
+    site_name: 'BlitzKit',
   }}
+  twitter={{ cardType: 'summary_large_image' }}
 />
 
 <BaseLayout>

packages/website/src/pages/[...locale]/tools/embed/[embed]/host/index.astro

@@ -1,5 +1,4 @@
 ---
-import { capitalize } from 'lodash-es';
 import EmbedLayout from '../../../../../../layouts/EmbedLayout.astro';
 import type { getStaticPaths } from '../index.astro';
 import { Page } from './_index';
@@ -7,8 +6,6 @@ import { Page } from './_index';
 export { getStaticPaths } from '../index.astro';
 ---
 
-<title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
-
 <EmbedLayout>
   <Page client:only="react" embed={Astro.params.embed} />
 </EmbedLayout>

packages/website/src/pages/[...locale]/tools/embed/[embed]/index.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroSeo } from '@astrolib/seo';
 import type { GetStaticPaths } from 'astro';
 import { capitalize } from 'lodash-es';
 import { embedConfigurations } from '../../../../../constants/embeds';
@@ -21,10 +22,24 @@ export const getStaticPaths = (() => {
     .flat();
 }) satisfies GetStaticPaths;
 
+const name = capitalize(Astro.params.embed);
+const title = `BlitzKit - ${name} embed`;
+const description = `BlitzKit ${name} embeds for streaming World of Tanks Blitz with extreme customization`;
 const { locale } = Astro.params;
 ---
 
-<title>BlitzKit - {capitalize(Astro.params.embed)} embed</title>
+<AstroSeo
+  title={title}
+  description={description}
+  canonical={Astro.url.href}
+  openGraph={{
+    url: Astro.url.href,
+    title,
+    description,
+    site_name: 'BlitzKit',
+  }}
+  twitter={{ cardType: 'summary_large_image' }}
+/>
 
 <style is:global>
   @keyframes fade-out-border {

packages/website/src/pages/[...locale]/tools/tankopedia/[id]/index.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroSeo } from '@astrolib/seo';
 import {
   asset,
   createDefaultProvisions,
@@ -11,10 +12,10 @@ import {
   TIER_ROMAN_NUMERALS,
 } from '@blitzkit/core';
 import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
+import { literals } from '@blitzkit/i18n/src/literals';
 import type { GetStaticPaths } from 'astro';
 import { tankCharacteristics } from '../../../../../core/blitzkit/tankCharacteristics';
 import { getStrings } from '../../../../../core/i18n/getStrings';
-import { literals } from '@blitzkit/i18n/src/literals';
 import BaseLayout from '../../../../../layouts/BaseLayout.astro';
 import { genericDefaultEquipmentMatrix } from '../../../../../stores/duel/constants';
 import { getStaticPaths as parentGetStaticPaths } from '../index.astro';
@@ -95,12 +96,12 @@ const description = literals(
 );
 ---
 
-<title>{title}</title>
-<meta property="og:title" content={title} />
-<meta name="description" content={description} />
-<meta property="og:description" content={description} />
-<meta property="og:image" content={icon} />
-<meta property="og:url" content={url} />
+<AstroSeo
+  {title}
+  {description}
+  openGraph={{ title, description, images: [{ url: icon }], url }}
+/>
+
 <meta name="twitter:title" content={title} />
 <meta name="twitter:description" content={description} />
 <meta name="twitter:card" content="summary" />