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={{
-    backgroundImage: `url(${imgur(tool.image, {
-      format: 'jpeg',
-      size: ImgurSize.SmallThumbnail,
-    })})`,
-  }}
+  style={{ backgroundImage: `url(/assets/images/tools/${tool.id}.webp)` }}
   data-disabled={disabled}
   data-significant={tool.significant}
   className="container"
@@ -72,12 +67,7 @@ const toolStrings =
     <Box
       flexGrow="1"
       style={{
-        backgroundImage: `url(${imgur(tool.image, {
-          format: 'jpeg',
-          size: tool.significant
-            ? ImgurSize.HugeThumbnail
-            : ImgurSize.LargeThumbnail,
-        })})`,
+        backgroundImage: `url(/assets/images/tools/${tool.id}.webp)`,
         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',