add tool

packages/website/astro.config.ts

@@ -1,7 +1,13 @@
 import react from "@astrojs/react";
+import { wrapper } from "@blitzkit/i18n";
+import locales from "@blitzkit/i18n/locales.json";
 import strings from "@blitzkit/i18n/strings/en.json";
+import { mauve, mauveDark } from "@radix-ui/colors";
+import AstroPWA from "@vite-pwa/astro";
 import favicons from "astro-favicons";
 import { defineConfig } from "astro/config";
+import packageJSON from "../../package.json";
+import { tools } from "./src/constants/tools";
 
 export default defineConfig({
   devToolbar: { enabled: false },
@@ -23,6 +29,55 @@ export default defineConfig({
       name: strings.common.name,
       short_name: strings.common.name,
 
+      background: mauveDark.mauve1,
+      themes: [mauve.mauve1, mauveDark.mauve1],
+      appleStatusBarStyle: "black-translucent",
+
+      version: packageJSON.version,
+
+      shortcuts: Object.values(tools)
+        .filter((tool) => !tool.disabled && !tool.href)
+        .map((tool) => {
+          const stringId = (tool.strings ??
+            tool.id) as keyof typeof strings.website.tools;
+
+          return {
+            name: strings.website.tools[stringId].name,
+            name_localized: wrapper(
+              (strings) => strings.website.tools[stringId].name,
+            ),
+            description: strings.website.tools[stringId].description,
+            description_localized: wrapper(
+              (strings) => strings.website.tools[stringId].description,
+            ),
+            short_name: strings.website.tools[stringId].name,
+            short_name_localized: wrapper(
+              (strings) => strings.website.tools[stringId].name,
+            ),
+            url: `/${tool.id}`,
+            icon: `public/assets/images/tools/${tool.id}.webp`,
+          };
+        }),
+
+      manifest: {
+        description: strings.website.home.seo_description,
+        description_localized: wrapper(
+          (strings) => strings.website.home.seo_description,
+        ),
+
+        dir: "ltr",
+        categories: ["utilities", "games", "developer", "developer tools"],
+
+        id: "com.tresabhi.blitzkit",
+        start_url: "/",
+        launch_handler: { client_mode: "navigate-new" },
+        display: "fullscreen",
+        display_override: ["fullscreen", "standalone", "minimal-ui"],
+
+        lang: locales.default,
+        orientation: "any",
+      },
+
       icons: {
         windows: true,
         android: true,
@@ -33,6 +88,21 @@ export default defineConfig({
       },
     }),
 
+    AstroPWA({
+      manifest: false,
+      devOptions: { enabled: true },
+      workbox: {
+        globPatterns: ["**/*.{html,css,js,png,webp,svg,xml,json}"],
+        runtimeCaching: [
+          {
+            urlPattern: ({ url }) =>
+              url.href.startsWith(import.meta.env.PUBLIC_ASSET_BASE),
+            handler: "NetworkFirst",
+          },
+        ],
+      },
+    }),
+
     react(),
   ],
 });

packages/website/src/constants/tools.ts

@@ -1,47 +1,81 @@
 import type { ButtonProps } from "@radix-ui/themes";
 
 export interface Tool {
-  path?: string;
+  id: string;
   strings?: string;
 
   button: ButtonProps["color"];
+  significant?: boolean;
+  disabled?: boolean;
   href?: string;
 }
 
 export const tools: Record<string, Tool> = {
   tanks: {
+    id: "tanks",
     strings: "tankopedia",
     button: "purple",
+    significant: true,
+  },
+  players: {
+    id: "players",
+    disabled: true,
+    button: "blue",
   },
   compare: {
+    id: "compare",
     button: "crimson",
   },
   performance: {
+    id: "performance",
     button: "jade",
   },
+  charts: {
+    id: "charts",
+    disabled: true,
+    button: "bronze",
+  },
   playlist: {
+    id: "playlist",
     button: "tomato",
   },
   mixer: {
+    id: "mixer",
     button: "gray",
   },
   guess: {
+    id: "guess",
     button: "cyan",
   },
   gallery: {
+    id: "gallery",
     button: "gold",
   },
   session: {
+    id: "session",
     button: "blue",
   },
   tier_list: {
+    id: "tier-list",
+    strings: "tier_list",
     button: "orange",
   },
   embed: {
+    id: "embed",
     button: "red",
   },
+  api: {
+    id: "api",
+    disabled: true,
+    button: "bronze",
+  },
   more: {
+    id: "more",
     href: "https://discord.gg/nDt7AjGJQH",
     button: "plum",
   },
+  studio: {
+    id: "studio",
+    button: "indigo",
+  },
 };