Improve page performance

TibiNonEst · Nov 21, 2024 · b176586 · b176586
1 parent 0c16cd9
commit b176586
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 5 deletions.
diff --git a/astro.config.ts b/astro.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from "astro/config";
+
+export default defineConfig({
+    image: {
+        domains: [ "static.tibs.gay" ]
+    }
+});
diff --git a/bun.lockb b/bun.lockb
diff --git a/package.json b/package.json
@@ -13,7 +13,7 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@catppuccin/palette": "^1.7.1",
-    "@fortawesome/fontawesome-free": "^6.7.0",
+    "@fortawesome/fontawesome-free": "^6.7.1",
     "astro": "^4.16.13",
     "bootstrap": "^5.3.3",
     "sass": "^1.81.0",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -19,6 +19,9 @@ const { title } = Astro.props;
     <title>{title}</title>
 
 	<link rel="preconnect" href="https://static.tibs.gay">
+	<link rel="preconnect" href="https://fonts.bunny.net">
+
+	<link href="https://fonts.bunny.net/css?family=noto-sans:400,500" rel="stylesheet">
 </head>
 
 <body>
@@ -30,6 +33,10 @@ const { title } = Astro.props;
 	html, body {
 		height: 100%;
 	}
+
+	body {
+		font-family: "Noto Sans", "Open Sans", "Fira Sans", Roboto, sans-serif, system-ui, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	}
 </style>
 
 <style is:global lang="scss">

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,11 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import { Picture } from 'astro:assets';
 ---
 
 <Layout title="tibs">
 	<main>
 		<a href="/">
-			<img src="https://static.tibs.gay/tibs.jpg" alt="tibs' avatar" class="avatar">
+			<Picture src="https://static.tibs.gay/tibs.jpg" formats={["avif", "webp"]} alt="tibs' avatar" width="160" height="160" />
 			<h1>tibs</h1>
 		</a>
 		<div class="links">
@@ -53,9 +54,7 @@ import Layout from '../layouts/Layout.astro';
 		margin-bottom: 0;
 	}
 
-	.avatar {
-		width: 10rem;
-		height: 10rem;
+	img {
 		border-radius: 5rem;
 		margin-bottom: .5rem;
 	}