feat: guidesblitz

package.json

@@ -41,6 +41,7 @@
   },
   "license": "MIT",
   "dependencies": {
+    "cheerio": "^1.1.2",
     "googleapis": "^144.0.0",
     "lodash-es": "^4.17.21",
     "protobufjs": "^7.5.2",

packages/i18n/strings/en.json

@@ -1026,7 +1026,6 @@
 
         "review": {
           "title": "Review videos",
-          "disclaimer": "BlitzKit does not endorse any review videos.",
           "join": "Apply to %s1 YouTuber program"
         },
 

packages/website/src/components/Tankopedia/GuideSection/components/GuidesBlitz.tsx

@@ -0,0 +1,51 @@
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Box, Flex, Link, Text } from '@radix-ui/themes';
+import { Var } from '../../../../core/radix/var';
+import type { TankGuide } from '../../../../pages/[...locale]/tanks/[slug]/index.astro';
+
+interface Props {
+  guide: TankGuide;
+}
+
+export function GuidesBlitz({ guide }: Props) {
+  return (
+    <>
+      <Flex direction="column" gap="4" position="relative">
+        <Text size="4" weight="medium">
+          <Flex width="100%" justify="start" align="center" gap="2">
+            <img
+              style={{
+                width: '1.5em',
+                height: '1.5em',
+                objectFit: 'contain',
+              }}
+              src="https://guidesblitz.com/wp-content/uploads/2023/11/cropped-logo-1.png"
+            />
+            GuidesBlitz
+          </Flex>
+        </Text>
+
+        <Text size="2">{guide.description}</Text>
+        <img style={{ width: '100%' }} src={guide.image} />
+
+        <Box
+          position="absolute"
+          bottom="0"
+          width="100%"
+          height="100%"
+          left="0"
+          style={{
+            background: `linear-gradient(${Var('gray-a1')}, ${Var('gray-1')})`,
+          }}
+        />
+      </Flex>
+
+      <Link underline="always" href={guide.url} target="_blank">
+        <Flex width="100%" justify="center" align="center" gap="1">
+          Read the full guide
+          <CaretRightIcon width="1em" height="1em" />
+        </Flex>
+      </Link>
+    </>
+  );
+}

packages/website/src/components/Tankopedia/GuideSection/components/YouTube.tsx

@@ -0,0 +1,118 @@
+import { youtubers } from '@blitzkit/core';
+import { CaretRightIcon } from '@radix-ui/react-icons';
+import { Box, Flex, Link, Skeleton, Text } from '@radix-ui/themes';
+import { awaitableReviews } from '../../../../core/awaitables/reviews';
+import { Var } from '../../../../core/radix/var';
+import { Duel } from '../../../../stores/duel';
+import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
+import { VerifiedIcon } from '../../../VerifiedIcon';
+
+const reviews = await awaitableReviews;
+
+export function YouTube({ skeleton }: MaybeSkeletonComponentProps) {
+  const tank = Duel.use((state) => state.protagonist.tank);
+  const videos = reviews.reviews[tank.id]?.videos;
+
+  if (!videos) return null;
+
+  return (
+    <>
+      <Flex direction="column" gap="4" position="relative">
+        <Text size="4" weight="medium">
+          <Flex width="100%" justify="start" align="center" gap="2">
+            <img
+              style={{
+                width: '1.5em',
+                height: '1.5em',
+                objectFit: 'contain',
+              }}
+              src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/YouTube_full-color_icon_%282017%29.svg/330px-YouTube_full-color_icon_%282017%29.svg.png"
+            />
+            YouTube
+          </Flex>
+        </Text>
+
+        <Flex direction="column" gap="3">
+          {videos.map((video) => {
+            const image = `https://i.ytimg.com/vi/${video.id}/hqdefault.jpg`;
+            const youtuber = youtubers.find(
+              (youtuber) => youtuber.id === video.author,
+            );
+
+            if (!youtuber) return null;
+
+            return (
+              <Link
+                color="gray"
+                highContrast
+                underline="hover"
+                key={video.id}
+                href={`https://www.youtube.com/watch?v=${video.id}`}
+                target="_blank"
+              >
+                <Flex
+                  width="fit-content"
+                  direction="column"
+                  style={{
+                    borderRadius: 'var(--radius-3)',
+                    overflow: 'hidden',
+                    background: skeleton
+                      ? Var('color-panel-solid')
+                      : `url(${image})`,
+                    backgroundPosition: '0 18px',
+                    backgroundSize: 'cover',
+                  }}
+                >
+                  <Box
+                    style={{
+                      background: skeleton ? 'transparent' : `url(${image})`,
+                      backgroundSize: 'cover',
+                      backgroundPosition: 'center',
+                      height: 128,
+                      aspectRatio: '16 / 9',
+                    }}
+                  />
+                  <Flex
+                    p="2"
+                    width="100%"
+                    justify="center"
+                    style={{
+                      backdropFilter: 'blur(4rem)',
+                      WebkitBackdropFilter: 'blur(4rem)',
+                    }}
+                    align="center"
+                    gap="1"
+                  >
+                    <Text>
+                      {!skeleton && youtuber.name}
+                      {skeleton && <Skeleton height="1em" width="7rem" />}
+                    </Text>
+                    {!skeleton && <VerifiedIcon width="1em" height="1em" />}
+                  </Flex>
+                </Flex>
+              </Link>
+            );
+          })}
+        </Flex>
+
+        <Box
+          position="absolute"
+          bottom="0"
+          width="100%"
+          height="100%"
+          left="0"
+          style={{
+            background: `linear-gradient(${Var('gray-a1')}, ${Var('gray-1')})`,
+          }}
+        />
+      </Flex>
+
+      <Link underline="always" target="_blank">
+        <Flex width="100%" justify="center" align="center" gap="1">
+          Read the full guide
+          <CaretRightIcon width="1em" height="1em" />
+        </Flex>
+      </Link>
+    </>
+  );
+}

packages/website/src/components/Tankopedia/GuideSection/index.tsx

@@ -0,0 +1,17 @@
+import { Flex } from '@radix-ui/themes';
+import type { TankGuide } from '../../../pages/[...locale]/tanks/[slug]/index.astro';
+import { GuidesBlitz } from './components/GuidesBlitz';
+
+interface Props {
+  guide: TankGuide;
+}
+
+export function GuideSection({ guide }: Props) {
+  return (
+    <Flex justify="center">
+      <Flex maxWidth="40rem" direction="column" gap="4">
+        <GuidesBlitz guide={guide} />
+      </Flex>
+    </Flex>
+  );
+}

packages/website/src/components/Tankopedia/VideoSection.tsx

@@ -24,10 +24,6 @@ export function VideoSection({ skeleton }: MaybeSkeletonComponentProps) {
           <Heading size="6">
             {strings.website.tools.tankopedia.review.title}
           </Heading>
-
-          <Text color="gray">
-            {strings.website.tools.tankopedia.review.disclaimer}
-          </Text>
         </Flex>
 
         <Flex gap="3" wrap="wrap" justify="center">

packages/website/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -3,6 +3,7 @@ import { PageWrapper } from '../../../../components/PageWrapper';
 import { CalloutsSection } from '../../../../components/Tankopedia/CalloutsSection';
 import { CharacteristicsSection } from '../../../../components/Tankopedia/CharacteristicsSection';
 import { GameModeSection } from '../../../../components/Tankopedia/GameModeSection';
+import { GuideSection } from '../../../../components/Tankopedia/GuideSection';
 import { HeroSection } from '../../../../components/Tankopedia/HeroSection';
 import { MetaSection } from '../../../../components/Tankopedia/MetaSection';
 import { TechTreeSection } from '../../../../components/Tankopedia/TechTreeSection';
@@ -19,10 +20,12 @@ import { Duel } from '../../../../stores/duel';
 import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
 import { TankopediaPersistent } from '../../../../stores/tankopediaPersistent';
 import type { MaybeSkeletonComponentProps } from '../../../../types/maybeSkeletonComponentProps';
+import type { TankGuide } from './index.astro';
 
 type PageProps = MaybeSkeletonComponentProps &
   LocaleAcceptorProps & {
     id: number;
+    guide?: TankGuide;
   };
 
 const [tankDefinitions, provisionDefinitions, modelDefinitions] =
@@ -32,7 +35,7 @@ const [tankDefinitions, provisionDefinitions, modelDefinitions] =
     awaitableModelDefinitions,
   ]);
 
-export function Page({ id, skeleton, locale }: PageProps) {
+export function Page({ id, skeleton, locale, guide }: PageProps) {
   const tank = tankDefinitions.tanks[id];
   const model = modelDefinitions.models[id];
 
@@ -53,6 +56,7 @@ export function Page({ id, skeleton, locale }: PageProps) {
                 )}
                 <CharacteristicsSection />
                 <GameModeSection />
+                {guide && <GuideSection skeleton={skeleton} guide={guide} />}
                 <VideoSection skeleton={skeleton} />
               </PageWrapper>
             </Duel.Provider>

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

@@ -1,6 +1,7 @@
 ---
 import { AstroSeo } from '@astrolib/seo';
 import {
+  assertSecret,
   asset,
   createDefaultProvisions,
   createDefaultSkills,
@@ -14,6 +15,7 @@ import {
 import { DEFAULT_LOCALE, unwrapper } from '@blitzkit/i18n';
 import { literals } from '@blitzkit/i18n/src/literals';
 import type { GetStaticPaths } from 'astro';
+import { load } from 'cheerio';
 import { tankCharacteristics } from '../../../../core/blitzkit/tankCharacteristics';
 import { getStrings } from '../../../../core/i18n/getStrings';
 import BaseLayout from '../../../../layouts/BaseLayout.astro';
@@ -43,6 +45,7 @@ const skillDefinitions = await fetchSkillDefinitions();
 const provisionDefinitions = await fetchProvisionDefinitions();
 const equipmentDefinitions = await fetchEquipmentDefinitions();
 const tankModelDefinitions = await fetchModelDefinitions();
+
 const tank = tankDefinitions.tanks[id];
 const tankModelDefinition = tankModelDefinitions.models[tank.id];
 const unwrap = unwrapper(locale);
@@ -57,6 +60,7 @@ const title = literals(strings.website.tools.tankopedia.tank_seo_title, [
   strings.common.nations[tank.nation as keyof typeof strings.common.nations],
 ]);
 const url = import.meta.env.SITE + Astro.url.pathname;
+
 const icon = asset(`icons/tanks/big/${id}.webp`);
 const turret = tank.turrets.at(-1)!;
 const gun = turret.guns.at(-1)!;
@@ -96,6 +100,28 @@ const description = literals(
     Math.round(characteristics.health).toLocaleString(locale),
   ],
 );
+
+export interface TankGuide {
+  url: string;
+  description?: string;
+  image?: string;
+}
+
+const guideUrl = `${assertSecret(import.meta.env.PUBLIC_GUIDE_WEBSITE)}/${tank.slug}`;
+let guide: TankGuide | undefined = undefined;
+const guideResponse = await fetch(guideUrl);
+
+if (guideResponse.ok) {
+  const $ = await guideResponse.text().then(load);
+  const description = $('.entry-content p').first().text();
+  const image = $('.entry-content img').first().attr('src')?.toString();
+
+  guide = {
+    url: guideUrl,
+    description,
+    image,
+  };
+}
 ---
 
 <AstroSeo
@@ -110,7 +136,7 @@ const description = literals(
 <meta name="twitter:image:src" content={icon} />
 
 <BaseLayout integrated>
-  <Page {locale} id={id} client:only="react">
-    <Page {locale} id={id} skeleton slot="fallback" />
+  <Page {locale} id={id} {guide} client:only="react">
+    <Page {locale} id={id} {guide} skeleton slot="fallback" />
   </Page>
 </BaseLayout>