fix(website): better image format

This commit is contained in:
OLIMINATOR 2023-04-09 22:00:25 +02:00
parent 44aa5961bc
commit 78778d1a4a
5 changed files with 93 additions and 53 deletions

View file

@ -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: [
sitemap(),
robotsTxt({
policy: [
{
userAgent: "*",
},
],
sitemap: true,
}),
compress({
css: true,
html: true,
img: true,
js: true,
svg: true,
}),
tailwind(),
],
vite: {
resolve: {
alias: {
"~": path.resolve(__dirname, "./src"),
},
},
},
});
site: CONFIG.origin,
base: "/",
trailingSlash: "always",
output: "static",
integrations: [sitemap(), robotsTxt({
policy: [{
userAgent: "*"
}],
sitemap: true
}), compress({
css: true,
html: true,
img: true,
js: true,
svg: true
}), tailwind(), image()],
vite: {
resolve: {
alias: {
"~": path.resolve(__dirname, "./src")
}
}
}
});

View file

@ -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",

Binary file not shown.

After

Width:  |  Height:  |  Size: 200 KiB

View file

@ -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
src="https://raw.githubusercontent.com/Hyro-Blobs/blobs/main/other/hyro_santa_bucket.png"
alt=""
<Image
src={Logo}
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>

View file

@ -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
version: 2.1.9
specifier: ^2.2.1
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):
resolution: {integrity: sha512-rYkmFEv2w7oEk6ZPgxHkhWzwcxSUGc1vJU0cbCu5sHF8iFNnc1cmMsjXWa5DrU5sCEf8VVYE1iFlbbnFzvHQJw==}
/@astrojs/markdown-remark@2.1.3(astro@2.2.1):
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:
resolution: {integrity: sha512-UkbG0lgue1b/t4yMI+AkAGEfdOwcPS2RUYQ/QIurtKjP6W5gtKQveRTBuHH7iwiBziH+z8Ecc5/OAALoXSvMlQ==}
/astro@2.2.1:
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