feat: better computer responsivity

astro.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from "astro/config";
 
 import tailwind from "@astrojs/tailwind";
 import sitemap from "@astrojs/sitemap";
-import image from "@astrojs/image";
 import compress from "astro-compress";
 import robotsTxt from "astro-robots-txt";
 
@@ -11,13 +10,13 @@ import { SITE } from "./src/config";
 // https://astro.build/config
 export default defineConfig({
   site: SITE.url,
-  base: "/",
-  trailingSlash: "never",
   output: "static",
+  experimental: {
+    assets: true,
+  },
   integrations: [
     tailwind(),
     sitemap(),
-    image(),
     compress({
       css: true,
       html: true,

package.json

@@ -11,7 +11,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/image": "^0.16.4",
     "@astrojs/sitemap": "^1.2.1",
     "@astrojs/tailwind": "^3.1.1",
     "astro": "^2.1.9",

pnpm-lock.yaml

@@ -1,9 +1,6 @@
 lockfileVersion: '6.0'
 
 dependencies:
-  '@astrojs/image':
-    specifier: ^0.16.4
-    version: 0.16.4(astro@2.1.9)
   '@astrojs/sitemap':
     specifier: ^1.2.1
     version: 1.2.1
@@ -45,10 +42,6 @@ devDependencies:
 
 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'}
@@ -64,24 +57,6 @@ packages:
   /@astrojs/compiler@1.3.0:
     resolution: {integrity: sha512-VxSj3gh/UTB/27rkRCT7SvyGjWtuxUO7Jf7QqDduch7j/gr/uA5P/Q5I/4zIIrZjy2yQAKyKLoox2QI2mM/BSA==}
 
-  /@astrojs/image@0.16.4(astro@2.1.9):
-    resolution: {integrity: sha512-oNTzECuUEQxrWZ5YZlQOd6vr/KfdMF5vLi7EarduG6mUfqmbHkbOA3LVM1hpcKA8IFp5iadNWn99teS8ZcIFRg==}
-    peerDependencies:
-      astro: ^2.1.9
-      sharp: '>=0.31.0'
-    peerDependenciesMeta:
-      sharp:
-        optional: true
-    dependencies:
-      '@altano/tiny-async-pool': 1.0.2
-      astro: 2.1.9
-      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==}
     hasBin: true
@@ -2255,10 +2230,6 @@ packages:
     resolution: {integrity: sha512-0quDb7s97CfemeJAnW9wC0hw78MtW7NU3hqtCD75g2vFlDLt36llsYD7uB7SUzojLMP24N5IatXf7ylGXiGG9A==}
     dev: false
 
-  /http-cache-semantics@4.1.1:
-    resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
-    dev: false
-
   /human-signals@3.0.1:
     resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
     engines: {node: '>=12.20.0'}
@@ -2268,14 +2239,6 @@ packages:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
     dev: false
 
-  /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-meta-resolve@2.2.2:
     resolution: {integrity: sha512-f8KcQ1D80V7RnqVm+/lirO9zkOxjGxhaTC1IPrBGd3MEfNgmNG67tSUO9gTi2F3Blr2Az6g1vocaxzkVnWl9MA==}
     dev: false
@@ -3720,12 +3683,6 @@ packages:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: false
 
-  /queue@6.0.2:
-    resolution: {integrity: sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA==}
-    dependencies:
-      inherits: 2.0.4
-    dev: false
-
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
     engines: {node: '>=10'}

src/components/Footer.astro

@@ -0,0 +1,38 @@
+---
+import { SITE } from "../config";
+---
+
+<footer
+  class="flex h-24 w-full flex-col items-center justify-center bg-primaryDottedFooter bg-primaryDottedSize"
+>
+  <p class="text-primary text-sm">
+    Made with ❤️ by
+    <a
+      class="text-primary hover:text-primaryLight font-bold"
+      href={SITE.author.url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      @{SITE.author.name}
+    </a>
+    and original author
+    <a
+      class="text-primary hover:text-primaryLight font-bold"
+      href={SITE.originalAuthor.url}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      @{SITE.originalAuthor.name}
+    </a>
+  </p>
+  <p class="text-primary text-sm">
+    <a
+      class="text-primary hover:text-primaryLight font-bold"
+      href={SITE.sourceCode}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      View Source
+    </a>
+  </p>
+</footer>

src/components/Item.astro

@@ -1,14 +0,0 @@
----
-import { BUTTONS } from "../config";
----
-
-{
-  BUTTONS.map((button) => (
-    <a
-      href={button.href}
-      class={`${button.background} w-full rounded-xl border-2 border-black py-4 text-center text-xl font-bold text-white drop-shadow-[4px_5px_0_rgba(0,0,0,1)] duration-75 hover:translate-x-1 hover:translate-y-1 hover:drop-shadow-none`}
-    >
-      {button.name}
-    </a>
-  ))
-}

src/components/Items.astro

@@ -0,0 +1,14 @@
+---
+import { BUTTONS } from "../config";
+---
+
+{
+  BUTTONS.map((button) => (
+    <a
+      href={button.href}
+      class={`${button.background} md:w80 w-72 rounded-xl border-2 border-black py-4 text-center text-xl font-bold text-white drop-shadow-[4px_5px_0_rgba(0,0,0,1)] duration-75 hover:translate-x-1 hover:translate-y-1 hover:drop-shadow-none`}
+    >
+      {button.name}
+    </a>
+  ))
+}

src/components/Picture.astro

@@ -1,5 +1,5 @@
 ---
-import { Image } from "@astrojs/image/components";
+import { Image } from "astro:assets";
 
 import logo from "../assets/images/logo.png";
 ---

src/env.d.ts

@@ -1 +1 @@
-/// <reference types="astro/client" />
+/// <reference types="astro/client-image" />

src/layouts/Layout.astro

@@ -1,8 +1,7 @@
 ---
+import Footer from "../components/Footer.astro";
 import HeadCommon from "../components/HeadCommon.astro";
 import HeadSEO from "../components/HeadSEO.astro";
-
-import { SITE } from "../config";
 ---
 
 <!DOCTYPE html>
@@ -12,41 +11,12 @@ import { SITE } from "../config";
     <HeadSEO />
   </head>
   <body class="overflow-x-hidden bg-primaryDotted bg-primaryDottedSize">
-    <slot />
+    <div class="flex min-h-screen flex-col">
+      <div class="flex-grow">
+        <slot />
+      </div>
 
-    <footer
+      <Footer />
-      class="flex h-24 w-full flex-col items-center justify-center bg-primaryDottedFooter bg-primaryDottedSize"
+    </div>
-    >
-      <p class="text-primary text-sm">
-        Made with ❤️ by
-        <a
-          class="text-primary hover:text-primaryLight font-bold"
-          href={SITE.author.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          @{SITE.author.name}
-        </a>
-        and original author
-        <a
-          class="text-primary hover:text-primaryLight font-bold"
-          href={SITE.originalAuthor.url}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          @{SITE.originalAuthor.name}
-        </a>
-      </p>
-      <p class="text-primary text-sm">
-        <a
-          class="text-primary hover:text-primaryLight font-bold"
-          href={SITE.sourceCode}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          View Source
-        </a>
-      </p>
-    </footer>
   </body>
 </html>

src/pages/index.astro

@@ -2,17 +2,17 @@
 import Layout from "../layouts/Layout.astro";
 import Picture from "../components/Picture.astro";
 import Username from "../components/Username.astro";
-import Item from "../components/Item.astro";
+import Items from "../components/Items.astro";
 ---
 
 <Layout>
-  <main class="mx-auto mb-12 w-max">
+  <main class="mx-auto mb-12">
     <header class="mt-12 flex flex-col items-center">
       <Picture />
       <Username />
     </header>
-    <section class="mt-6 flex w-72 flex-col gap-y-6 md:w-80">
+    <section class="mt-6 flex flex-wrap justify-center gap-6">
-      <Item />
+      <Items />
     </section>
   </main>
 </Layout>