fix(website): better image format

apps/website/astro.config.ts

@@ -1,46 +1,37 @@
 import path from "path";
 import { fileURLToPath } from "url";
-
 import { defineConfig } from "astro/config";
-
 import sitemap from "@astrojs/sitemap";
 import robotsTxt from "astro-robots-txt";
 import compress from "astro-compress";
 import tailwind from "@astrojs/tailwind";
-
 import { CONFIG } from "./src/config";
-
+import image from "@astrojs/image";
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+// https://astro.build/config
 export default defineConfig({
   site: CONFIG.origin,
   base: "/",
   trailingSlash: "always",
   output: "static",
-	integrations: [
+  integrations: [sitemap(), robotsTxt({
-		sitemap(),
+    policy: [{
-		robotsTxt({
+      userAgent: "*"
-			policy: [
+    }],
-				{
+    sitemap: true
-					userAgent: "*",
+  }), compress({
-				},
-			],
-			sitemap: true,
-		}),
-		compress({
     css: true,
     html: true,
     img: true,
     js: true,
-			svg: true,
+    svg: true
-		}),
+  }), tailwind(), image()],
-		tailwind(),
-	],
   vite: {
     resolve: {
       alias: {
-				"~": path.resolve(__dirname, "./src"),
+        "~": path.resolve(__dirname, "./src")
-			},
+      }
-		},
+    }
-	},
+  }
 });

apps/website/package.json

@@ -9,11 +9,12 @@
     "astro": "astro"
   },
   "dependencies": {
+    "@astrojs/image": "^0.16.5",
     "@astrojs/prefetch": "^0.2.1",
     "@astrojs/sitemap": "^1.2.1",
     "@astrojs/tailwind": "^3.1.1",
     "@tailwindcss/typography": "^0.5.9",
-    "astro": "^2.1.9",
+    "astro": "^2.2.1",
     "astro-compress": "^1.1.35",
     "astro-google-fonts-optimizer": "^0.2.2",
     "astro-icon": "^0.8.0",

apps/website/src/pages/index.astro

@@ -2,6 +2,8 @@
 import Layout from "~/layouts/Layout.astro";
 import Invite from "~/components/Invite.astro";
 import Computer from "~/components/Computer.astro";
+import { Image, Picture } from "@astrojs/image/components";
+import Logo from "~/assets/logo.png";
 ---
 
 <Layout>
@@ -9,9 +11,12 @@ import Computer from "~/components/Computer.astro";
     <div
       class="flex flex-col items-center px-4 text-center md:flex-row md:text-left"
     >
-      <img
+      <Image
-        src="https://raw.githubusercontent.com/Hyro-Blobs/blobs/main/other/hyro_santa_bucket.png"
+        src={Logo}
-        alt=""
+        alt="Roles Bot Logo"
+        format="webp"
+        width={512}
+        height={512}
         class="mb-6 h-48 w-48 rounded-full md:h-64 md:w-64"
       />
       <div>

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
 
   apps/website:
     dependencies:
+      '@astrojs/image':
+        specifier: ^0.16.5
+        version: 0.16.5(astro@2.2.1)
       '@astrojs/prefetch':
         specifier: ^0.2.1
         version: 0.2.1
@@ -37,13 +40,13 @@ importers:
         version: 1.2.1
       '@astrojs/tailwind':
         specifier: ^3.1.1
-        version: 3.1.1(astro@2.1.9)(tailwindcss@3.3.1)
+        version: 3.1.1(astro@2.2.1)(tailwindcss@3.3.1)
       '@tailwindcss/typography':
         specifier: ^0.5.9
         version: 0.5.9(tailwindcss@3.3.1)
       astro:
-        specifier: ^2.1.9
+        specifier: ^2.2.1
-        version: 2.1.9
+        version: 2.2.1
       astro-compress:
         specifier: ^1.1.35
         version: 1.1.35
@@ -165,6 +168,10 @@ importers:
 
 packages:
 
+  /@altano/tiny-async-pool@1.0.2:
+    resolution: {integrity: sha512-qQzaI0TBUPdpjZ3qo5b2ziQY9MSNpbziH2ZrE5lvtUZL+kn9GwVuVJwoOubaoNkeDB+rqEefnpu1k+oMpOCYiw==}
+    dev: false
+
   /@ampproject/remapping@2.2.0:
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
     engines: {node: '>=6.0.0'}
@@ -178,6 +185,29 @@ packages:
 
   /@astrojs/compiler@1.3.0:
     resolution: {integrity: sha512-VxSj3gh/UTB/27rkRCT7SvyGjWtuxUO7Jf7QqDduch7j/gr/uA5P/Q5I/4zIIrZjy2yQAKyKLoox2QI2mM/BSA==}
+    dev: true
+
+  /@astrojs/compiler@1.3.1:
+    resolution: {integrity: sha512-xV/3r+Hrfpr4ECfJjRjeaMkJvU73KiOADowHjhkqidfNPVAWPzbqw1KePXuMK1TjzMvoAVE7E163oqfH3lDwSw==}
+    dev: false
+
+  /@astrojs/image@0.16.5(astro@2.2.1):
+    resolution: {integrity: sha512-pps2fXTcPqUJOaATgrXT2eQwYJeW2fmd+QuQLqBiiIQHaECNugHCt/MwBi9skn+195VcFtYM3eCTjvmRrx4fPQ==}
+    peerDependencies:
+      astro: ^2.2.0
+      sharp: '>=0.31.0'
+    peerDependenciesMeta:
+      sharp:
+        optional: true
+    dependencies:
+      '@altano/tiny-async-pool': 1.0.2
+      astro: 2.2.1
+      http-cache-semantics: 4.1.1
+      image-size: 1.0.2
+      kleur: 4.1.5
+      magic-string: 0.27.0
+      mime: 3.0.0
+    dev: false
 
   /@astrojs/language-server@0.28.3:
     resolution: {integrity: sha512-fPovAX/X46eE2w03jNRMpQ7W9m2mAvNt4Ay65lD9wl1Z5vIQYxlg7Enp9qP225muTr4jSVB5QiLumFJmZMAaVA==}
@@ -197,13 +227,13 @@ packages:
       vscode-uri: 3.0.7
     dev: false
 
-  /@astrojs/markdown-remark@2.1.2(astro@2.1.9):
+  /@astrojs/markdown-remark@2.1.3(astro@2.2.1):
-    resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==}
+    resolution: {integrity: sha512-Di8Qbit9p7L7eqKklAJmiW9nVD+XMsNHpaNzCLduWjOonDu9fVgEzdjeDrTVCDtgrvkfhpAekuNXrp5+w4F91g==}
     peerDependencies:
-      astro: ^2.1.5
+      astro: ^2.2.0
     dependencies:
       '@astrojs/prism': 2.1.1
-      astro: 2.1.9
+      astro: 2.2.1
       github-slugger: 1.5.0
       import-meta-resolve: 2.2.2
       rehype-raw: 6.1.1
@@ -240,14 +270,14 @@ packages:
       zod: 3.21.4
     dev: false
 
-  /@astrojs/tailwind@3.1.1(astro@2.1.9)(tailwindcss@3.3.1):
+  /@astrojs/tailwind@3.1.1(astro@2.2.1)(tailwindcss@3.3.1):
     resolution: {integrity: sha512-Wx/ZtVnmtfqHWGVzvUEYZm8rufVKVgDIef0q6fzwUxoT1EpTTwBkTbpnzooogewMLOh2eTscasGe3Ih2HC1wVA==}
     peerDependencies:
       astro: ^2.1.3
       tailwindcss: ^3.0.24
     dependencies:
       '@proload/core': 0.3.3
-      astro: 2.1.9
+      astro: 2.2.1
       autoprefixer: 10.4.14(postcss@8.4.21)
       postcss: 8.4.21
       postcss-load-config: 4.0.1(postcss@8.4.21)
@@ -1879,8 +1909,8 @@ packages:
       zod: 3.21.4
     dev: false
 
-  /astro@2.1.9:
+  /astro@2.2.1:
-    resolution: {integrity: sha512-UkbG0lgue1b/t4yMI+AkAGEfdOwcPS2RUYQ/QIurtKjP6W5gtKQveRTBuHH7iwiBziH+z8Ecc5/OAALoXSvMlQ==}
+    resolution: {integrity: sha512-yYPRzh3su38bi3VBCKmYAUBkQSaFQMKFsu8JAVDzFRoGLbskJ/6JkDX2abSB9/iRug8GAKaH/FWxXOTzIsSQ7Q==}
     engines: {node: '>=16.12.0', npm: '>=6.14.0'}
     hasBin: true
     peerDependencies:
@@ -1889,9 +1919,9 @@ packages:
       sharp:
         optional: true
     dependencies:
-      '@astrojs/compiler': 1.3.0
+      '@astrojs/compiler': 1.3.1
       '@astrojs/language-server': 0.28.3
-      '@astrojs/markdown-remark': 2.1.2(astro@2.1.9)
+      '@astrojs/markdown-remark': 2.1.3(astro@2.2.1)
       '@astrojs/telemetry': 2.1.0
       '@astrojs/webapi': 2.1.0
       '@babel/core': 7.21.4
@@ -4050,7 +4080,6 @@ packages:
 
   /http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
-    dev: true
 
   /human-signals@2.1.0:
     resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
@@ -4075,6 +4104,14 @@ packages:
     engines: {node: '>= 4'}
     dev: true
 
+  /image-size@1.0.2:
+    resolution: {integrity: sha512-xfOoWjceHntRb3qFCrh5ZFORYH8XCdYpASltMhZ/Q0KZiOwjdE/Yl2QCiWdwD+lygV5bMCvauzgu5PxBX/Yerg==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      queue: 6.0.2
+    dev: false
+
   /import-fresh@3.3.0:
     resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==}
     engines: {node: '>=6'}
@@ -6443,6 +6480,12 @@ packages:
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
+  /queue@6.0.2:
+    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
+    dependencies:
+      inherits: 2.0.4
+    dev: false
+
   /quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
     dev: false