feat: improve lighthouse score (#554)

* use image-optimization

* use on tweets

* index page

* seo worky?

* alt tag

* remove misused definition list

* image show pls?

www/astro.config.mjs

@@ -2,6 +2,7 @@ import { defineConfig } from "astro/config";
 import react from "@astrojs/react";
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
+import image from "@astrojs/image";
 
 /**
  * @link https://astro.build/config
@@ -14,5 +15,12 @@ export default defineConfig({
       wrap: true,
     },
   },
-  integrations: [react(), tailwind(), mdx()],
+  integrations: [
+    react(),
+    tailwind(),
+    mdx(),
+    image({
+      serviceEntryPoint: "@astrojs/image/sharp",
+    }),
+  ],
 });

www/package.json

@@ -13,13 +13,15 @@
   },
   "dependencies": {
     "@algolia/client-search": "^4.13.1",
+    "@astrojs/image": "^0.9.1",
     "@docsearch/css": "^3.2.1",
     "@docsearch/react": "^3.2.1",
     "@fontsource/inter": "^4.5.12",
     "@fontsource/jetbrains-mono": "^4.5.10",
     "clsx": "^1.2.1",
     "embla-carousel": "^7.0.3",
     "embla-carousel-autoplay": "^7.0.3",
+    "sharp": "^0.31.1",
     "tailwind-scrollbar": "^2.0.1"
   },
   "devDependencies": {

www/public/robots.txt

@@ -2,4 +2,4 @@
 
 User-agent: *
 Allow: /
-Sitemap: https://create.t3.gg/sitemap-index.xml
+Sitemap: https://beta.create.t3.gg/sitemap.xml

www/src/components/landingPage/stack/card.astro

@@ -15,18 +15,18 @@ const { title, href } = Astro.props;
     target="_blank"
     rel="noopener noreferrer"
     class="hover:no-underline active:no-underline focus:no-underline"
-    ><dt
+    ><div
       class="flex space-x-4 items-center bg-white/10 p-2 pl-5 rounded-tr-md rounded-tl-md hover:bg-white/20 transition-colors"
     >
       <slot name="icon" />
       <p class="text-lg leading-6 md:text-xl font-medium text-t3-purple-200">
         {title}
       </p>
-    </dt>
-    <dd
+    </div>
+    <div
       class="m-6 text-sm md:text-base text-t3-purple-100 subpixel-antialiased h-full"
     >
       <slot name="description" />
-    </dd>
+    </div>
   </a>
 </div>

www/src/components/landingPage/stack/stack.astro

@@ -1,7 +1,7 @@
 ---
+import { Image } from "@astrojs/image/components";
 import PageSection from "../pageSection.astro";
 import Feature from "./card.astro";
-import NextAuthIcon from "./nextauth.png";
 ---
 
 <PageSection size={"24"} id="stack">
@@ -20,7 +20,7 @@ import NextAuthIcon from "./nextauth.png";
       </p>
     </div>
     <div>
-      <dl
+      <div
         class="space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 md:grid-cols-3 sm:grid-rows-3 md:grid-rows-2 sm:grid-flow-col sm:gap-x-6 sm:gap-y-14 lg:gap-x-8"
       >
         <Feature title="Next.js" href="https://nextjs.org/">
@@ -140,13 +140,12 @@ import NextAuthIcon from "./nextauth.png";
         </Feature>
 
         <Feature title="NextAuth.js" href="https://next-auth.js.org/">
-          <img
+          <Image
             slot="icon"
-            src={NextAuthIcon}
+            src={import("./nextauth.png")}
             class="h-10 w-8 py-1"
             alt="NextAuth.js"
-            width={100}
-            height={100}
+            format="webp"
           />
           <Fragment slot="description">
             When you need a flexible, secure, and scalable authentication
@@ -155,7 +154,7 @@ import NextAuthIcon from "./nextauth.png";
             ties into NextJS and tRPC to provide a seamless experience.
           </Fragment>
         </Feature>
-      </dl>
+      </div>
     </div>
   </div>
 </PageSection>

www/src/components/landingPage/tweets/tweetCard.astro

@@ -1,5 +1,6 @@
 ---
 import type { Tweet } from "./types";
+import { Image } from "@astrojs/image/components";
 
 const {
   id,
@@ -18,10 +19,11 @@ const {
 <article
   class="px-4 pt-4 pb-1 flex flex-wrap items-start hover:bg-white/20 bg-white/10 bg-cover rounded-lg transition-colors hover:no-underline border border-t3-purple-200/20 hover:border-t3-purple-300/50"
 >
-  <img
+  <Image
     src={avatar}
     width={48}
     height={48}
+    format="webp"
     class="rounded-full w-12 h-12 mr-3"
     alt={`@${handle}'s Avatar`}
   />

www/src/layouts/landingPage.astro

@@ -27,6 +27,7 @@ const currentPage = Astro.url.pathname;
     <img
       src="/images/background-pattern.svg"
       class="absolute inset-0 opacity-5 h-max w-max object-cover"
+      alt="background pattern"
     />
     <div class="relative">
       <Navbar />

www/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "astro/tsconfigs/strictest",
   "compilerOptions": {
     "jsx": "preserve",
+    "types": ["@astrojs/image/client"],
     // Skip type checking of external libraries.
     "skipLibCheck": true
   }