chore(docs): fix homepage logo, build, and lighthouse improvements (#6238)

* chore(docs): fix homepage logo size

* chore(docs): fix sidebars.js solid-start doc path name

* chore(docs): image file and size optimizations

* chore(docs): fix semantic misordered headings

* chore(docs): make banner link more descriptive

* chore(docs): add solid-start redirect

Author: ndom91

docs/docusaurus.config.js

@@ -46,7 +46,7 @@ const docusaurusConfig = {
       title: "Auth.js",
       logo: {
         alt: "Auth.js Logo",
-        src: "img/logo/logo-xs.png",
+        src: "img/logo/logo-xs.webp",
       },
       items: [
         {
@@ -101,7 +101,7 @@ const docusaurusConfig = {
     announcementBar: {
       id: "new-major-announcement",
       content:
-        "<a target='_blank' rel='noopener noreferrer' href='https://next-auth.js.org'>NextAuth.js</a> is becoming Auth.js! 🎉 We're creating Authentication for the Web. Everyone included. Starting with SvelteKit, check out the docs <a  href='/reference/sveltekit'>here</a>.",
+        "<a target='_blank' rel='noopener noreferrer' href='https://next-auth.js.org'>NextAuth.js</a> is becoming Auth.js! 🎉 We're creating Authentication for the Web. Everyone included. Starting with SvelteKit, check out <a href='/reference/sveltekit'>the docs</a>.",
       backgroundColor: "#000",
       textColor: "#fff",
     },
@@ -121,6 +121,7 @@ const docusaurusConfig = {
                 alt="Powered by Vercel"
                 style="margin-top: 8px"
                 height="32"
+                width="167"
                 src="https://raw.githubusercontent.com/nextauthjs/next-auth/main/docs/static/img/powered-by-vercel.svg"
               />
             </a>`,
@@ -181,7 +182,10 @@ const docusaurusConfig = {
           lastVersion: "current",
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
-          remarkPlugins: [require("@sapphire/docusaurus-plugin-npm2yarn2pnpm").npm2yarn2pnpm, require("remark-github")],
+          remarkPlugins: [
+            require("@sapphire/docusaurus-plugin-npm2yarn2pnpm").npm2yarn2pnpm,
+            require("remark-github"),
+          ],
           versions: {
             current: {
               label: "experimental",
@@ -201,7 +205,15 @@ const docusaurusConfig = {
         ...typedocConfig,
         id: "core",
         plugin: ["./tyepdoc"],
-        entryPoints: ["index.ts", "adapters.ts", "errors.ts", "jwt.ts", "types.ts"].map((e) => `${coreSrc}/${e}`).concat(providers),
+        entryPoints: [
+          "index.ts",
+          "adapters.ts",
+          "errors.ts",
+          "jwt.ts",
+          "types.ts",
+        ]
+          .map((e) => `${coreSrc}/${e}`)
+          .concat(providers),
         tsconfig: "../packages/core/tsconfig.json",
         out: "reference/03-core",
         watch: process.env.TYPEDOC_WATCH,
@@ -214,7 +226,9 @@ const docusaurusConfig = {
         ...typedocConfig,
         id: "sveltekit",
         plugin: ["./tyepdoc"],
-        entryPoints: ["index.ts", "client.ts"].map((e) => `../packages/frameworks-sveltekit/src/lib/${e}`),
+        entryPoints: ["index.ts", "client.ts"].map(
+          (e) => `../packages/frameworks-sveltekit/src/lib/${e}`
+        ),
         tsconfig: "../packages/frameworks-sveltekit/tsconfig.json",
         out: "reference/04-sveltekit",
         watch: process.env.TYPEDOC_WATCH,

docs/sidebars.js

@@ -58,9 +58,9 @@ module.exports = {
       label: "@auth/solid-start",
       link: {
         type: "doc",
-        id: "reference/solid-start/index",
+        id: "reference/solidstart/index",
       },
-      items: ["reference/solid-start/client", "reference/solid-start/protected"],
+      items: ["reference/solidstart/client", "reference/solidstart/protected"],
     },
     {
       type: "category",

docs/src/css/index.css

@@ -140,19 +140,19 @@ html[data-theme="dark"] hr {
   border-radius: 10rem;
   overflow: visible;
   box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
-  background-image: url("/img/mesh-1.jpg");
+  background-image: url("/img/mesh-1.webp");
   background-size: cover;
   background-origin: center;
 }
 
 .home-main .section-features .row .col:nth-child(2) .feature-image-wrapper {
-  background-image: url("/img/mesh-2.jpg");
+  background-image: url("/img/mesh-2.webp");
   background-size: cover;
   background-origin: center;
 }
 
 .home-main .section-features .row .col:nth-child(3) .feature-image-wrapper {
-  background-image: url("/img/mesh-3.jpg");
+  background-image: url("/img/mesh-3.webp");
   background-size: cover;
   background-origin: center;
 }

docs/src/css/navbar.css

@@ -6,6 +6,11 @@
   margin-right: 1rem !important;
 }
 
+.navbar__logo {
+  width: 29px;
+  height: 32px;
+}
+
 .navbar__title {
   font-size: 1.2rem;
   margin-left: 0.2rem;

docs/src/pages/index.js

@@ -117,9 +117,11 @@ export default function Home() {
           <div className="container">
             <div className="hero-inner">
               <img
-                src="/img/logo/logo-sm.png"
+                src="/img/logo/logo-sm.webp"
                 alt="Shield with key icon"
                 className={styles.heroLogo}
+                height="142"
+                width="128"
               />
               <div className={styles.heroText}>
                 <h1 className="hero__title">{siteConfig.title}</h1>
@@ -214,29 +216,29 @@ export default function Home() {
               <div className="row">
                 <div className="col col--6">
                   <div className="code">
-                    <h4 className="code-heading">
+                    <div className="code-heading">
                       Next.js <span>/pages/api/auth/[...nextauth].ts</span>
-                    </h4>
+                    </div>
                     <CodeBlock className="prism-code language-js">
                       {nextJsCode}
                     </CodeBlock>
                   </div>
                 </div>
                 <div className="col col--6">
                   <div className="code">
-                    <h4 className="code-heading">
+                    <div className="code-heading">
                       SvelteKit <span>/hooks.server.ts</span>
-                    </h4>
+                    </div>
                     <CodeBlock className="prism-code language-js">
                       {svelteKitCode}
                     </CodeBlock>
                   </div>
                 </div>
                 <div className="col col--6">
                   <div className="code">
-                    <h4 className="code-heading">
+                    <div className="code-heading">
                       SolidStart <span>/routes/api/auth/[...solidauth].ts</span>
-                    </h4>
+                    </div>
                     <CodeBlock className="prism-code language-js">
                       {solidStartCode}
                     </CodeBlock>