feat: better history and video sections

scripts/buildAssets/videos.ts

@@ -2,6 +2,7 @@ import { readdir } from 'fs/promises';
 import { google } from 'googleapis';
 import { cloneDeep, uniqBy } from 'lodash';
 import { parse as parseYaml } from 'yaml';
+import { youtubers } from '../../src/constants/youtubers';
 import { readXMLDVPL } from '../../src/core/blitz/readXMLDVPL';
 import { readYAMLDVPL } from '../../src/core/blitz/readYAMLDVPL';
 import { toUniqueId } from '../../src/core/blitz/toUniqueId';
@@ -10,12 +11,6 @@ import { VideoDefinitions } from '../../src/core/blitzkit/videos';
 import { DATA } from './constants';
 import { BlitzStrings, botPattern, VehicleDefinitionList } from './definitions';
 
-const youtubers = [
-  'UCKBYXp4Xn2I2tL1UL4fpbhw', // droodles
-  'UCrQ-Dy8lVsm11u8pCJ8W7Tw', // fatness
-  'UCxRpZqMElssTdPYDK3x7wyg', // n90
-];
-
 export async function videos(production: boolean) {
   console.log('Building videos...');
 
@@ -108,7 +103,7 @@ export async function videos(production: boolean) {
           (item) =>
             item.snippet?.channelId &&
             item.id?.videoId &&
-            youtubers.includes(item.snippet.channelId),
+            youtubers.some(({ id }) => id === item.snippet?.channelId),
         ),
         (item) => item.snippet!.channelId,
       );

src/app/tools/tankopedia/[id]/components/HistorySection.tsx

@@ -8,7 +8,7 @@ export function HistorySection() {
   if (!tank.description) return null;
 
   return (
-    <PageWrapper noFlex1>
+    <PageWrapper noFlex1 align="center">
       <Heading>History of the {tank.name}</Heading>
       <Text>{tank.description}</Text>
     </PageWrapper>

src/app/tools/tankopedia/[id]/components/VideoSection.tsx

@@ -1,4 +1,5 @@
-import { Flex, Heading, Link, Text } from '@radix-ui/themes';
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex, Heading, Link } from '@radix-ui/themes';
 import { use } from 'react';
 import PageWrapper from '../../../../../components/PageWrapper';
 import { videoDefinitions } from '../../../../../core/blitzkit/videos';
@@ -11,10 +12,18 @@ export function VideoSection() {
 
   return (
     <PageWrapper noFlex1>
-      <Flex direction="column" gap="4" align="start">
-        <Flex direction="column">
+      <Flex direction="column" gap="6" align="center">
+        <Flex direction="column" gap="2" align="center">
           <Heading size="6">Review videos</Heading>
-          <Text color="gray">BlitzKit does not endorse any review videos.</Text>
+
+          <Callout.Root size="1">
+            <Callout.Icon>
+              <InfoCircledIcon />
+            </Callout.Icon>
+            <Callout.Text>
+              BlitzKit does not endorse any review videos.
+            </Callout.Text>
+          </Callout.Root>
         </Flex>
 
         <Flex gap="3" wrap="wrap">

src/app/tools/tankopedia/[id]/page.tsx

@@ -84,7 +84,7 @@ export default function Page({ params }: { params: { id: string } }) {
       <TechTreeSection />
       <VideoSection />
       <HistorySection />
-      {!exempt && <AdMidSectionResponsive />}
+      {!exempt && <AdMidSectionResponsive mb="6" />}
     </PageWrapper>
   );
 }

src/constants/youtubers.ts

@@ -0,0 +1,5 @@
+export const youtubers = [
+  { id: 'UCKBYXp4Xn2I2tL1UL4fpbhw', name: 'Droodles' },
+  { id: 'UCrQ-Dy8lVsm11u8pCJ8W7Tw', name: 'HisRoyalFatness' },
+  { id: 'UCxRpZqMElssTdPYDK3x7wyg', name: 'N90' },
+];