perf: optimize lighthouse score

docusaurus.config.ts

@@ -95,6 +95,7 @@ export default {
         {to: "https://blog.tailcall.run/", label: "Blog", position: "left"},
         {
           href: "https://discord.gg/kRZBPpkgwq",
+          "aria-label": "Discord",
           position: "right",
           className: "header-button header-button-discord",
           html: `      

package.json

@@ -24,7 +24,7 @@
     "autoprefixer": "^10.4.17",
     "clsx": "^2.1.0",
     "docusaurus-lunr-search": "^3.3.2",
-    "graphiql": "^3.2.0",
+    "graphiql-tc": "^3.2.3",
     "lottie-react": "^2.4.0",
     "postcss": "^8.4.33",
     "prism-react-renderer": "^2.3.1",

src/components/home/Features.tsx

@@ -13,7 +13,7 @@ const Feature = ({feature}: FeatureProps): JSX.Element => {
     <div className="text-tailCall-dark-500 sm:max-w-6xl sm:m-SPACE_10 lg:mx-auto lg:px-SPACE_016 my-0 lg:my-SPACE_20">
       <div className="flex items-center -ml-SPACE_02 sm:space-x-SPACE_02 sm:-ml-SPACE_05 lg:-ml-SPACE_10 mb-SPACE_06">
         <GreaterThanUnderscoreIcon className="h-5 sm:h-7" />
-        <Heading as="h5" className="text-title-semi-large sm:text-display-tiny lg:text-display-small mb-0">
+        <Heading as="h2" className="text-title-semi-large sm:text-display-tiny lg:text-display-small mb-0">
           {feature.title}
         </Heading>
       </div>

src/components/playground/Playground.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from "react"
-import {GraphiQL} from "graphiql"
+import {GraphiQL} from "graphiql-tc/esm"
 import {isValidURL} from "@site/src/utils"
-import "graphiql/graphiql.css"
+import "graphiql-tc/graphiql.min.css"
 import "../../css/graphiql.css"
 
 type FetcherParams = {

src/components/shared/Footer.tsx

@@ -40,7 +40,7 @@ const Footer = (): JSX.Element => {
         </p>
         <div className="space-x-SPACE_04">
           {socials.map((social) => (
-            <Link href={social.href} className="cursor-pointer" key={social.id}>
+            <Link href={social.href} className="cursor-pointer" key={social.id} aria-label={social.ariaLabel}>
               <social.image className="h-6 w-6" />
             </Link>
           ))}

src/constants/index.tsx

@@ -185,25 +185,28 @@ export const socials: Social[] = [
     name: "github",
     image: require("@site/static/icons/companies/github-footer.svg").default,
     href: "https://github.com/tailcallhq/tailcall",
+    ariaLabel: "GitHub",
   },
   {
     id: 2,
     name: "discord",
     image: require("@site/static/icons/companies/discord-gray.svg").default,
     href: "https://discord.gg/kRZBPpkgwq",
+    ariaLabel: "Discord",
   },
   {
     id: 3,
     name: "linkedin",
     image: require("@site/static/icons/companies/linkedin-gray.svg").default,
     href: "https://www.linkedin.com/company/tailcall",
+    ariaLabel: "LinkedIn",
   },
-
   {
     id: 4,
     name: "twitter",
     image: require("@site/static/icons/companies/x-gray.svg").default,
     href: "https://twitter.com/tailcallhq",
+    ariaLabel: "Twitter",
   },
 ]
 
@@ -395,16 +398,19 @@ export const founders: Founder[] = [
         id: 1,
         name: "linkedin",
         href: "https://www.linkedin.com/in/tusharmath",
+        ariaLabel: "LinkedIn",
       },
       {
         id: 2,
         name: "x",
         href: "https://twitter.com/tusharmath",
+        ariaLabel: "Twitter",
       },
       {
         id: 3,
         name: "discord",
         href: "https://discord.com/users/358987818825154560",
+        ariaLabel: "Discord",
       },
     ],
   },
@@ -418,16 +424,19 @@ export const founders: Founder[] = [
         id: 1,
         name: "linkedin",
         href: "https://www.linkedin.com/in/amitksingh1490",
+        ariaLabel: "LinkedIn",
       },
       {
         id: 2,
         name: "x",
         href: "https://twitter.com/amitksingh1490",
+        ariaLabel: "Twitter",
       },
       {
         id: 3,
         name: "discord",
         href: "https://discord.com/users/784053215104467004",
+        ariaLabel: "Discord",
       },
     ],
   },
@@ -441,16 +450,19 @@ export const founders: Founder[] = [
         id: 1,
         name: "linkedin",
         href: "https://www.linkedin.com/in/meskill",
+        ariaLabel: "LinkedIn",
       },
       {
         id: 2,
         name: "x",
         href: "https://twitter.com/_meskill",
+        ariaLabel: "Twitter",
       },
       {
         id: 3,
         name: "discord",
         href: "https://discord.com/users/294552389518884864",
+        ariaLabel: "Discord",
       },
     ],
   },
@@ -464,16 +476,19 @@ export const founders: Founder[] = [
         id: 1,
         name: "linkedin",
         href: "https://www.linkedin.com/in/shashi-kant-f07fed/",
+        ariaLabel: "LinkedIn",
       },
       {
         id: 2,
         name: "x",
         href: "https://twitter.com/notshashitnak",
+        ariaLabel: "Twitter",
       },
       {
         id: 3,
         name: "discord",
         href: "https://discord.com/users/1177867346912759891",
+        ariaLabel: "Discord",
       },
     ],
   },

src/css/custom.css

@@ -23,7 +23,7 @@
   --ifm-content-link-font-size: 0.875rem;
   --ifm-search-input-font-size: 0.9rem;
   --ifm-search-desc-font-size: 14px;
-
+  --ifm-color-primary: #004eca;
   /* Color Tokens */
   --ifm-color-brand: #fdea2e;
   --ifm-color-brand-linkedin: #0a66c2;

src/types/index.d.ts

@@ -19,6 +19,7 @@ type MoreFeatures = {
 type Social = {
   id: number
   name: string
+  ariaLabel: string
   image?: FunctionComponent<SVGProps<SVGSVGElement>> | undefined
   href: string
 }