feat: move images to blitzkit

packages/website/src/components/AesonPlug.tsx

@@ -1,4 +1,3 @@
-import { imgur } from '@blitzkit/core';
 import { Flex, Heading, Link, Text } from '@radix-ui/themes';
 import { Var } from '../core/radix/var';
 
@@ -18,7 +17,7 @@ export function AesonPlug() {
         }}
       >
         <img
-          src={imgur('akrxfFC')}
+          src="/assets/images/third-party/wotb-news.png"
           style={{ width: '6rem', height: '6rem', objectFit: 'cover' }}
         />
 

packages/website/src/components/Navbar.astro

@@ -198,10 +198,9 @@ const strings = getStrings(locale);
                 <Box
                   style={{
                     borderRadius: Var('radius-2'),
-                    backgroundImage: `url(${imgur(tool.image, { format: 'jpeg', size: ImgurSize.LargeThumbnail })})`,
+                    backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
                     backgroundSize: '200%',
                     backgroundPosition: 'right center',
-                    overflow: 'hidden',
                   }}
                 >
                   <Flex
@@ -227,6 +226,7 @@ const strings = getStrings(locale);
     data-expanded
     flexGrow="1"
     width="100%"
+    display={{ initial: 'block', sm: 'none' }}
     style={{
       backgroundColor: Var('black-a7'),
       backdropFilter: 'blur(0.5rem)',

packages/website/src/components/Tankopedia/HeroSection/components/Options/components/CustomShellButton.tsx

@@ -1,4 +1,4 @@
-import { imgur, ShellType } from '@blitzkit/core';
+import { ShellType } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n/src/literals';
 import {
   Button,
@@ -42,7 +42,7 @@ export function CustomShellButton() {
         >
           <img
             alt="custom shell"
-            src={imgur('j2CoXak')}
+            src="/assets/images/icons/custom-shell.png"
             style={{
               width: '50%',
               height: '50%',

packages/website/src/components/Tankopedia/HeroSection/components/Options/index.tsx

@@ -1,6 +1,5 @@
 import {
   asset,
-  imgur,
   resolvePenetrationCoefficient,
   TIER_ROMAN_NUMERALS,
   uniqueGuns,
@@ -104,7 +103,7 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
           left="50%"
           style={{
             zIndex: 2,
-            backgroundImage: `url(${imgur('27Gwth4')})`,
+            backgroundImage: 'url(/assets/images/icons/aim-caret.png)',
             backgroundSize: 'contain',
             transform: 'translateX(-50%)',
             borderRadius: '50%',
@@ -412,7 +411,10 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 content={strings.website.tools.tankopedia.sandbox.model.name}
               >
                 <Flex height="100%" align="center">
-                  <img src={imgur('jAdYf0m')} style={{ height: '1.25em' }} />
+                  <img
+                    src="/assets/images/icons/tankopedia-model.png"
+                    style={{ height: '1.25em' }}
+                  />
                 </Flex>
               </Tooltip>
             </SegmentedControl.Item>
@@ -421,7 +423,10 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 content={strings.website.tools.tankopedia.sandbox.dynamic.name}
               >
                 <Flex height="100%" align="center">
-                  <img src={imgur('oe4Cq0g')} style={{ height: '1.25em' }} />
+                  <img
+                    src="/assets/images/icons/tankopedia-dynamic-armor.png"
+                    style={{ height: '1.25em' }}
+                  />
                 </Flex>
               </Tooltip>
             </SegmentedControl.Item>
@@ -430,14 +435,17 @@ export function Options({ thicknessRange, canvas }: OptionsProps) {
                 content={strings.website.tools.tankopedia.sandbox.static.name}
               >
                 <Flex height="100%" align="center">
-                  <img src={imgur('VQ4uDno')} style={{ height: '1.25em' }} />
+                  <img
+                    src="/assets/images/icons/tankopedia-static-armor.png"
+                    style={{ height: '1.25em' }}
+                  />
                 </Flex>
               </Tooltip>
             </SegmentedControl.Item>
             {/* <SegmentedControl.Item value={`${TankopediaDisplay.ShootingRange}`}>
               <Tooltip content="Shooting range">
                 <Flex height="100%" align="center">
-                  <img src={imgur('q8ZPfzG')} style={{ height: '1.25em' }} />
+                  <img src="/assets/images/icons/tankopedia-shooting-range.png" style={{ height: '1.25em' }} />
                 </Flex>
               </Tooltip>
             </SegmentedControl.Item> */}

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/components/TargetCircle.tsx

@@ -1,4 +1,3 @@
-import { imgur } from '@blitzkit/core';
 import { Box, type BoxProps } from '@radix-ui/themes';
 import { forwardRef } from 'react';
 import { Var } from '../../../../../../../../core/radix/var';
@@ -56,7 +55,7 @@ export const TargetCircle = forwardRef<HTMLDivElement, TargetCircleProps>(
           top="50%"
           left="50%"
           style={{
-            backgroundImage: `url(${imgur('27Gwth4')})`,
+            backgroundImage: 'url(/assets/images/icons/aim-caret.png)',
             backgroundSize: 'contain',
             transform: 'translateX(-50%)',
             borderRadius: '50%',

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx

@@ -1,4 +1,4 @@
-import { asset, I_HAT, imgur, J_HAT } from '@blitzkit/core';
+import { asset, I_HAT, J_HAT } from '@blitzkit/core';
 import { Html } from '@react-three/drei';
 import { useFrame, useLoader } from '@react-three/fiber';
 import { clamp } from 'lodash-es';
@@ -101,7 +101,7 @@ export function SceneProps() {
   let { dispersion } = characteristics;
   const gunRotationSpeed = degToRad(characteristics.gunTraverseSpeed);
   const mockTank = useLoader(GLTFLoader, asset(`3d/tanks/models/6929.glb`));
-  const texture = useLoader(TextureLoader, imgur('C28Z8nU'));
+  const texture = useLoader(TextureLoader, '/assets/images/3d/grid.png');
   const path = new Vector3();
   const direction = new Vector3();
   texture.anisotropy = 2;

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

@@ -1,4 +1,4 @@
-import { asset, imgur, TankType } from '@blitzkit/core';
+import { asset, TankType } from '@blitzkit/core';
 import { literals } from '@blitzkit/i18n/src/literals';
 import { CaretLeftIcon, CaretRightIcon, PlusIcon } from '@radix-ui/react-icons';
 import { Flex, Heading, IconButton, ScrollArea, Text } from '@radix-ui/themes';
@@ -140,7 +140,7 @@ export function TechTreeSection({ skeleton }: MaybeSkeletonComponentProps) {
               <Flex
                 key={multiplier}
                 style={{
-                  background: `url(${imgur('7hDltb4')})`,
+                  background: 'url(/assets/images/icons/xp-multiplier.png)',
                   backgroundSize: 'contain',
                   backgroundRepeat: 'no-repeat',
                   backgroundPosition: 'center',

packages/website/src/components/ToolCard.astro

@@ -1,5 +1,5 @@
 ---
-import { assertSecret, imgur, ImgurSize } from '@blitzkit/core';
+import { assertSecret } from '@blitzkit/core';
 import { CaretRightIcon } from '@radix-ui/react-icons';
 import { Box, Button, Code, Flex, Heading, Text } from '@radix-ui/themes';
 import type { Tool } from '../constants/tools';
@@ -18,7 +18,7 @@ const { locale } = Astro.params;
 const strings = getStrings(locale);
 const toolStrings =
   strings.website.tools[
-    (tool.stringsId??tool.id ) as keyof typeof strings.website.tools
+    (tool.stringsId ?? tool.id) as keyof typeof strings.website.tools
   ];
 ---
 
@@ -48,12 +48,7 @@ const toolStrings =
 </style>
 
 <Flex
-  style={{
+  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
-    backgroundImage: `url(${imgur(tool.image, {
-      format: 'jpeg',
-      size: ImgurSize.SmallThumbnail,
-    })})`,
-  }}
   data-disabled={disabled}
   data-significant={tool.significant}
   className="container"
@@ -72,12 +67,7 @@ const toolStrings =
     <Box
       flexGrow="1"
       style={{
-        backgroundImage: `url(${imgur(tool.image, {
+        backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-          format: 'jpeg',
-          size: tool.significant
-            ? ImgurSize.HugeThumbnail
-            : ImgurSize.LargeThumbnail,
-        })})`,
         backgroundSize: 'cover',
         backgroundPosition: 'center',
       }}

packages/website/src/components/ToolOpenGraph.astro

@@ -1,6 +1,5 @@
 ---
 import { AstroSeo } from '@astrolib/seo';
-import { imgur } from '@blitzkit/core';
 import { type Tool } from '../constants/tools';
 import { getStrings } from '../core/i18n/getStrings';
 
@@ -23,7 +22,9 @@ const toolStrings =
   canonical={Astro.url.href}
   openGraph={{
     url: Astro.url.href,
-    images: [{ url: imgur(tool.image) }],
+    images: [
+      { url: `${Astro.url.origin}/assets/images/tools/${tool.id}.webp` },
+    ],
     title: toolStrings.name,
     description: toolStrings.seo_description,
     site_name: 'BlitzKit',

packages/website/src/constants/tools.ts

@@ -4,7 +4,6 @@ import type { ComponentProps } from 'react';
 export interface Tool {
   id: string;
   stringsId?: string;
-  image: string;
   disabled?: boolean;
   href?: string;
   button: {
@@ -17,7 +16,6 @@ export interface Tool {
 
 export const tankopediaTool: Tool = {
   id: 'tankopedia',
-  image: 'D8j6GZx',
   button: {
     color: 'purple',
   },
@@ -36,7 +34,6 @@ export const tankopediaTool: Tool = {
 
 export const compareTool: Tool = {
   id: 'compare',
-  image: 'O6VNl6e',
   button: {
     color: 'crimson',
   },
@@ -46,7 +43,6 @@ export const compareTool: Tool = {
 export const sessionTool: Tool = {
   // TODO: rename to tracker
   id: 'session',
-  image: 'HdG9sTf',
   button: {
     color: 'blue',
   },
@@ -56,7 +52,6 @@ export const sessionTool: Tool = {
 export const discordTool: Tool = {
   id: 'discord',
   href: 'https://discord.com/application-directory/1097673957865443370',
-  image: '0bWE5hC',
   button: {
     color: 'indigo',
   },
@@ -65,7 +60,6 @@ export const discordTool: Tool = {
 export const moreTool: Tool = {
   id: 'more',
   href: 'https://discord.gg/nDt7AjGJQH',
-  image: '1nPm6VI',
   button: {
     color: 'plum',
   },
@@ -76,7 +70,6 @@ export const playersTool: Tool = {
   button: {
     color: 'blue',
   },
-  image: 'YelSOfT',
   href: '_', // TODO: remove this to re-enable link
   branches: ['main', 'dev'],
 };
@@ -86,7 +79,6 @@ export const performanceTool: Tool = {
   button: {
     color: 'jade',
   },
-  image: 'vOKFB03',
   branches: ['main', 'dev'],
 };
 
@@ -95,14 +87,12 @@ export const embedTool: Tool = {
   button: {
     color: 'red',
   },
-  image: 'Q0faRYg',
   branches: ['main', 'dev'],
 };
 
 export const homeTool: Tool = {
   id: 'home',
   button: { color: 'blue' },
-  image: 'rUPie9G',
 };
 
 export const galleryTool: Tool = {
@@ -110,7 +100,6 @@ export const galleryTool: Tool = {
   button: {
     color: 'gold',
   },
-  image: 'VhKlknk',
   branches: ['main', 'dev'],
 };
 
@@ -120,7 +109,6 @@ export const tierListTool: Tool = {
   button: {
     color: 'orange',
   },
-  image: 'oKKc8Xv',
   branches: ['main', 'dev', 'opentest', 'preview'],
 };
 
@@ -129,7 +117,6 @@ export const chartsTool: Tool = {
   button: {
     color: 'bronze',
   },
-  image: '6fhkljA',
   branches: ['main', 'dev', 'opentest', 'preview'],
 };
 

packages/website/src/layouts/ToolLayout.astro

@@ -1,5 +1,4 @@
 ---
-import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Heading, Text } from '@radix-ui/themes';
 import ToolOpenGraph from '../components/ToolOpenGraph.astro';
 import { type Tool } from '../constants/tools';
@@ -24,10 +23,7 @@ const toolStrings =
 <BaseLayout>
   <Box
     style={{
-      backgroundImage: `url(${imgur(tool!.image, {
+      backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
-        format: 'jpeg',
-        size: ImgurSize.SmallThumbnail,
-      })})`,
       backgroundSize: 'cover',
     }}
   >

packages/website/src/pages/[...locale]/tools/embed/[embed]/_index.tsx

@@ -1,4 +1,3 @@
-import { imgur } from '@blitzkit/core';
 import {
   CodeIcon,
   HeightIcon,
@@ -63,7 +62,7 @@ function Content({ embed }: PageProps) {
   const embedStateStore = EmbedState.useStore();
   const config = embedConfigurations[embed] as EmbedConfig;
   const [backgroundImage, setBackgroundImage] = useState(
-    imgur('SO13zur', { format: 'jpeg' }),
+    '/assets/images/backgrounds/embed-default.webp',
   );
   const fileInput = useRef<HTMLInputElement>();
   const { strings } = useLocale();

packages/website/src/pages/[...locale]/tools/embed/_index.tsx

@@ -1,4 +1,3 @@
-import { imgur, ImgurSize } from '@blitzkit/core';
 import { Box, Flex, Link, Text } from '@radix-ui/themes';
 import { PreviewWrapper } from '../../../../components/Embeds/PreviewWrapper';
 import { LinkI18n } from '../../../../components/LinkI18n';
@@ -85,7 +84,8 @@ function Content() {
                   overflow="hidden"
                   position="relative"
                   style={{
-                    backgroundImage: `url(${imgur('SO13zur', { format: 'jpeg', size: ImgurSize.SmallThumbnail })})`,
+                    backgroundImage:
+                      'url(/assets/images/backgrounds/embed-default.webp)',
                     backgroundSize: 'cover',
                     backgroundPosition: 'center',
                   }}