feat: astro seo

.vscode/settings.json

@@ -14,6 +14,7 @@
     "applypatches",
     "artefacts",
     "astrojs",
+    "astrolib",
     "atgm",
     "Autoloader",
     "Autoreloader",

packages/i18n/strings/en.json

@@ -844,6 +844,13 @@
       "seo_description": "Tools for everything World of Tanks Blitz"
     },
 
+    "docs": {
+      "patches": {
+        "name": "BlitzKit Changelogs",
+        "seo_description": "Changelogs for BlitzKit Discord bot and website"
+      }
+    },
+
     "tools": {
       "tankopedia": {
         "name": "Tankopedia",

packages/website/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@astrojs/partytown": "^2.1.4",
+    "@astrolib/seo": "^1.0.0-beta.8",
     "@blitzkit/core": "workspace:*",
     "@blitzkit/i18n": "workspace:*",
     "@nanostores/persistent": "^0.10.2",

packages/website/src/components/Navbar.astro

@@ -73,161 +73,161 @@ const strings = getStrings(locale);
 >
   <Flex
     width="100%"
-    maxWidth="80rem"
     p={{ initial: '4', sm: '3' }}
-    gap="4"
     direction="column"
-    style={{
-      backgroundColor: Var('gray-1'),
-    }}
+    align="center"
+    style={{ backgroundColor: Var('gray-1') }}
   >
-    <Flex align="center">
-      <LinkI18n
-        {locale}
-        color="gray"
-        highContrast
-        href="/"
-        underline="hover"
-        weight="medium"
-      >
-        <Flex align="center" gap="1">
-          BlitzKit
+    <Flex gap="4" direction="column" maxWidth="80rem" width="100%">
+      <Flex align="center">
+        <LinkI18n
+          {locale}
+          color="gray"
+          highContrast
+          href="/"
+          underline="hover"
+          weight="medium"
+        >
+          <Flex align="center" gap="1">
+            BlitzKit
+            {
+              isBranchNamed && (
+                <Code color="gray" size="1" variant="outline">
+                  {branchName}
+                </Code>
+              )
+            }
+          </Flex>
+        </LinkI18n>
+
+        <Box flexGrow="1" />
+
+        <Flex
+          align="center"
+          gap={{ initial: '4', md: '6' }}
+          display={{ initial: 'none', sm: 'flex' }}
+          justify="center"
+          className="tools"
+        >
           {
-            isBranchNamed && (
-              <Code color="gray" size="1" variant="outline">
-                {branchName}
-              </Code>
-            )
+            toolsFiltered.map((tool, index) => {
+              const unavailableOnBranch = tool.branches?.every(
+                (branch) =>
+                  branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
+              );
+              const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
+              const toolStrings =
+                strings.website.tools[
+                  (tool.stringsId ??
+                    tool.id) as keyof typeof strings.website.tools
+                ];
+
+              if (unavailableOnBranch) return null;
+
+              return (
+                <LinkI18n
+                  {locale}
+                  weight={selected ? 'medium' : 'regular'}
+                  color="gray"
+                  highContrast={selected}
+                  size="2"
+                  href={`/tools/${tool.id}`}
+                  underline="hover"
+                >
+                  {toolStrings.name}
+                </LinkI18n>
+              );
+            })
           }
         </Flex>
-      </LinkI18n>
 
-      <Box flexGrow="1" />
+        <Box flexGrow="1" />
+
+        <Flex align="center" gap="4">
+          <Link
+            style={{ display: 'flex', alignContent: 'center' }}
+            color="gray"
+            href="https://discord.gg/nDt7AjGJQH"
+            underline="none"
+            target="_blank"
+          >
+            <DiscordLogoIcon width="1em" height="1em" />
+          </Link>
+
+          <LinkI18n
+            {locale}
+            style={{ display: 'flex', alignContent: 'center' }}
+            color="gray"
+            href="/settings"
+            underline="none"
+          >
+            <GearIcon width="1em" height="1em" />
+          </LinkI18n>
+
+          <!-- <NavbarAccount client:idle /> -->
+
+          <Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
+            <IconButton variant="ghost" color="gray" className="hamburger">
+              <Cross1Icon data-expanded />
+              <HamburgerMenuIcon data-closed />
+            </IconButton>
+          </Flex>
+        </Flex>
+      </Flex>
 
       <Flex
-        align="center"
-        gap={{ initial: '4', md: '6' }}
-        display={{ initial: 'none', sm: 'flex' }}
-        justify="center"
-        className="tools"
+        direction="column"
+        data-expanded
+        gap="3"
+        display={{ initial: 'flex', sm: 'none' }}
       >
         {
-          toolsFiltered.map((tool, index) => {
+          toolsFiltered.map((tool) => {
             const unavailableOnBranch = tool.branches?.every(
               (branch) =>
                 branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
             );
-            const selected = Astro.url.pathname.includes(`/tools/${tool.id}`);
+
+            if (unavailableOnBranch) return null;
+
             const toolStrings =
               strings.website.tools[
                 (tool.stringsId ??
                   tool.id) as keyof typeof strings.website.tools
               ];
 
-            if (unavailableOnBranch) return null;
-
             return (
-              <LinkI18n
-                {locale}
-                weight={selected ? 'medium' : 'regular'}
+              <Link
                 color="gray"
-                highContrast={selected}
-                size="2"
+                highContrast
+                style={{ display: 'contents' }}
                 href={`/tools/${tool.id}`}
-                underline="hover"
               >
-                {toolStrings.name}
-              </LinkI18n>
+                <Box
+                  style={{
+                    borderRadius: Var('radius-2'),
+                    backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
+                    backgroundSize: '200%',
+                    backgroundPosition: 'right center',
+                    overflow: 'hidden',
+                  }}
+                >
+                  <Flex
+                    py="4"
+                    justify="end"
+                    flexGrow="1"
+                    style={{
+                      background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
+                    }}
+                  >
+                    {toolStrings.name}
+                  </Flex>
+                </Box>
+              </Link>
             );
           })
         }
       </Flex>
-
-      <Box flexGrow="1" />
-
-      <Flex align="center" gap="4">
-        <Link
-          style={{ display: 'flex', alignContent: 'center' }}
-          color="gray"
-          href="https://discord.gg/nDt7AjGJQH"
-          underline="none"
-          target="_blank"
-        >
-          <DiscordLogoIcon width="1em" height="1em" />
-        </Link>
-
-        <LinkI18n
-          {locale}
-          style={{ display: 'flex', alignContent: 'center' }}
-          color="gray"
-          href="/settings"
-          underline="none"
-        >
-          <GearIcon width="1em" height="1em" />
-        </LinkI18n>
-
-        <!-- <NavbarAccount client:idle /> -->
-
-        <Flex align="center" display={{ initial: 'flex', sm: 'none' }}>
-          <IconButton variant="ghost" color="gray" className="hamburger">
-            <Cross1Icon data-expanded />
-            <HamburgerMenuIcon data-closed />
-          </IconButton>
-        </Flex>
-      </Flex>
-    </Flex>
-
-    <Flex
-      direction="column"
-      data-expanded
-      gap="3"
-      display={{ initial: 'flex', sm: 'none' }}
-    >
-      {
-        toolsFiltered.map((tool) => {
-          const unavailableOnBranch = tool.branches?.every(
-            (branch) =>
-              branch !== assertSecret(import.meta.env.PUBLIC_ASSET_BRANCH),
-          );
-
-          if (unavailableOnBranch) return null;
-
-          const toolStrings =
-            strings.website.tools[
-              (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
-            ];
-
-          return (
-            <Link
-              color="gray"
-              highContrast
-              style={{ display: 'contents' }}
-              href={`/tools/${tool.id}`}
-            >
-              <Box
-                style={{
-                  borderRadius: Var('radius-2'),
-                  backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
-                  backgroundSize: '200%',
-                  backgroundPosition: 'right center',
-                  overflow: 'hidden',
-                }}
-              >
-                <Flex
-                  py="4"
-                  justify="end"
-                  flexGrow="1"
-                  style={{
-                    background: `linear-gradient(90deg, transparent, ${Var('gray-1')})`,
-                  }}
-                >
-                  {toolStrings.name}
-                </Flex>
-              </Box>
-            </Link>
-          );
-        })
-      }
     </Flex>
   </Flex>
 

packages/website/src/components/ToolOpenGraph.astro

@@ -1,4 +1,5 @@
 ---
+import { AstroSeo } from '@astrolib/seo';
 import { imgur } from '@blitzkit/core';
 import { type Tool } from '../constants/tools';
 import { getStrings } from '../core/i18n/getStrings';
@@ -16,7 +17,16 @@ const toolStrings =
   ];
 ---
 
-<title>{toolStrings.name}</title>
-<meta property="og:image" content={imgur(tool.image)} />
-<meta name="description" content={toolStrings.seo_description} />
-<meta property="og:description" content={toolStrings.seo_description} />
+<AstroSeo
+  title={toolStrings.name}
+  description={toolStrings.seo_description}
+  canonical={Astro.url.href}
+  openGraph={{
+    url: Astro.url.href,
+    images: [{ url: imgur(tool.image) }],
+    title: toolStrings.name,
+    description: toolStrings.seo_description,
+    site_name: 'BlitzKit',
+  }}
+  twitter={{ cardType: 'summary_large_image' }}
+/>

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" />