docs: add typescript, nextjs, remove old style tags

www/package.json

@@ -17,7 +17,8 @@
     "@docsearch/react": "^3.2.1",
     "@nanostores/react": "^0.3.0",
     "astro-seo": "^0.6.0",
-    "nanostores": "^0.6.0"
+    "nanostores": "^0.6.0",
+    "tailwind-scrollbar": "^2.0.1"
   },
   "devDependencies": {
     "@astrojs/react": "^1.1.0",

www/src/components/blog/avatarList.astro

@@ -75,11 +75,15 @@ const additionalContributors = unique.length - recentContributors.length; // lis
     class={`grid grid-cols-${recentContributors.length} gap-2 sm:gap-4 sm:grid-cols-${recentContributors.length}`}
   >
     {
-      recentContributors.map((item) => (
+      recentContributors.map((item, i) => (
         <li>
           <a href={`https://github.com/${item.login}`}>
             <img
-              class="rounded-full w-8 h-8 sm:w-10 sm:h-10"
+              class={
+                i === 0
+                  ? `rounded-full w-8 h-8 sm:w-10 sm:h-10`
+                  : `rounded-full w-8 h-8 sm:w-10 sm:h-10 -translate-x-3 sm:-translate-x-5`
+              }
               alt={`Contributor ${item.login}`}
               title={`Contributor ${item.login}`}
               width="64"
@@ -110,79 +114,3 @@ const additionalContributors = unique.length - recentContributors.length; // lis
     )
   }
 </div>
-
-<style>
-  .avatar-list {
-    --avatar-size: 2.5rem;
-    --avatar-count: 3;
-
-    display: grid;
-    list-style: none;
-    /* Default to displaying most of the avatar to
-  enable easier access on touch devices, ensuring
-  the WCAG touch target size is met or exceeded */
-    grid-template-columns: repeat(
-      var(--avatar-count),
-      max(44px, calc(var(--avatar-size) / 1.15))
-    );
-    /* `padding` matches added visual dimensions of
-  the `box-shadow` to help create a more accurate
-  computed component size */
-    padding: 0.08em;
-    font-size: var(--avatar-size);
-  }
-
-  @media (any-hover: hover) and (any-pointer: fine) {
-    .avatar-list {
-      /* We create 1 extra cell to enable the computed 
-    width to match the final visual width */
-      grid-template-columns: repeat(
-        calc(var(--avatar-count) + 1),
-        calc(var(--avatar-size) / 1.75)
-      );
-    }
-  }
-
-  .avatar-list li {
-    width: var(--avatar-size);
-    height: var(--avatar-size);
-  }
-
-  .avatar-list li:hover ~ li a,
-  .avatar-list li:focus-within ~ li a {
-    transform: translateX(33%);
-  }
-
-  .avatar-list img,
-  .avatar-list a {
-    display: block;
-    border-radius: 50%;
-  }
-
-  .avatar-list a {
-    transition: transform 180ms ease-in-out;
-  }
-
-  .avatar-list img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    background-color: #fff;
-    box-shadow: 0 0 0 0.05em #fff, 0 0 0 0.08em rgba(0, 0, 0, 0.15);
-  }
-
-  .avatar-list a:focus {
-    outline: 2px solid transparent;
-    /* Double-layer trick to work for dark and light backgrounds */
-    box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-  }
-
-  .contributors {
-    display: flex;
-    align-items: center;
-  }
-
-  .contributors > * + * {
-    margin-left: 0.75rem;
-  }
-</style>

www/src/components/blog/pageContent.astro

@@ -24,7 +24,7 @@ const title = frontmatter.title;
       <slot />
     </article>
   </section>
-  <nav class="flex sm:hidden">
+  <nav class="flex lg:hidden">
     <MoreMenu editHref={githubEditUrl} />
   </nav>
 </article>

www/src/components/footer/footer.astro

@@ -65,6 +65,13 @@ const { path, isBlog } = Astro.props;
           </li>
         </ul>
       </div>
+      <a
+        href="https://vercel.com/?utm_source=t3-oss&utm_campaign=oss"
+        rel="noopener noreferrer"
+        target="_blank"
+      >
+        <img src="/images/powered-by-vercel.svg" class="w-full h-10 mt-6" />
+      </a>
     </div>
   </div>
 </footer>

www/src/components/navigation/Search.tsx

@@ -1,7 +1,7 @@
 /** @jsxImportSource react */
 import { useState, useCallback, useRef } from "react";
 import { ALGOLIA } from "../../config";
-import "@docsearch/css";
+import "../../styles/algolia/style.css";
 
 import { createPortal } from "react-dom";
 import * as docSearchReact from "@docsearch/react";
@@ -51,9 +51,9 @@ export default function Search() {
         type="button"
         ref={searchButtonRef}
         onClick={onOpen}
-        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/10 rounded-lg"
+        className="w-full flex items-center justify-between px-4 py-2 text-sm font-medium text-white dark:text-gray-700 dark:bg-t3-purple-100 bg-white/70 rounded-lg"
       >
-        <div className="flex items-center justify-center text-white dark:text-slate-900 dark:stroke-slate-900">
+        <div className="flex items-center justify-center text-slate-900 dark:stroke-slate-900">
           <svg width="24" height="24" fill="none">
             <path
               d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
@@ -64,12 +64,10 @@ export default function Search() {
             />
           </svg>
 
-          <span className="pl-1 lg:pl-3 text-white dark:text-slate-900">
-            Search
-          </span>
+          <span className="pl-1 lg:pl-3 text-slate-900">Search</span>
         </div>
 
-        <span className="border px-1 rounded-md border-white text-white dark:border-slate-900 dark:text-slate-900">
+        <span className="border px-1 rounded-md border-slate-900 text-slate-900">
           <span className="sr-only">Press </span>
 
           <kbd>/</kbd>

www/src/components/navigation/TableOfContents.tsx

@@ -60,7 +60,7 @@ export default function TableOfContents({
           }`.trim()}
         >
           <a
-            className="hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200"
+            className="hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 text-base"
             href="#overview"
           >
             Overview

www/src/components/navigation/leftSidebar.astro

@@ -18,11 +18,11 @@ const sidebar = SIDEBAR[langCode];
     ? `pt-3 pb-28 h-full`
     : `md:overflow-hidden h-full pb-32`}
 >
-  <div class="max-w-lg mx-auto p-3 pt-6 md:hidden">
+  <div class="max-w-lg mx-auto p-3 md:hidden">
     <Search client:idle />
   </div>
   <ul
-    class="p-8 h-full overflow-x-visible overflow-y-scroll sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
+    class="p-8 h-full overflow-x-visible overflow-y-scroll scrollbar-thin scrollbar-thumb-rounded-sm scrollbar-track-rounded-sm scrollbar-thumb-t3-purple-50 scrollbar-track-slate-600 sm:overflow-auto pb-32 dark:text-slate-50 text-slate-800"
   >
     {
       Object.entries(sidebar).map(([header, children]) => (

www/src/components/navigation/moreMenu.astro

@@ -10,78 +10,75 @@ const { editHref } = Astro.props;
 const showMoreSection = CONFIG.COMMUNITY_INVITE_URL;
 ---
 
-{
-  showMoreSection && (
-    <h2 class="heading dark:text-white text-slate-900">More</h2>
-  )
-}
-<ul>
+<div class="flex flex-col w-full items-center sm:items-start pt-8">
   {
-    editHref && (
-      <li
-        class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
-      >
-        <a class="flex pl-2" href={editHref} target="_blank">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="pen"
-            class="svg-inline--fa fa-pen fa-w-16"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            height="1em"
-            width="1em"
-          >
-            <path
-              fill="currentColor"
-              d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
-            />
-          </svg>
-          <span>Edit this page</span>
-        </a>
-      </li>
+    showMoreSection && (
+      <h2 class="heading dark:text-white text-slate-900">More</h2>
     )
   }
-  {
-    CONFIG.COMMUNITY_INVITE_URL && (
-      <li
-        class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
-      >
-        <a class="flex pl-2" href={CONFIG.COMMUNITY_INVITE_URL} target="_blank">
-          <svg
-            aria-hidden="true"
-            focusable="false"
-            data-prefix="fas"
-            data-icon="comment-alt"
-            class="svg-inline--fa fa-comment-alt fa-w-16"
-            role="img"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
-            height="1em"
-            width="1em"
+  <ul>
+    {
+      editHref && (
+        <li
+          class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+        >
+          <a class="flex pl-2" href={editHref} target="_blank">
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="pen"
+              class="svg-inline--fa fa-pen fa-w-16"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              height="1em"
+              width="1em"
+            >
+              <path
+                fill="currentColor"
+                d="M290.74 93.24l128.02 128.02-277.99 277.99-114.14 12.6C11.35 513.54-1.56 500.62.14 485.34l12.7-114.22 277.9-277.88zm207.2-19.06l-60.11-60.11c-18.75-18.75-49.16-18.75-67.91 0l-56.55 56.55 128.02 128.02 56.55-56.55c18.75-18.76 18.75-49.16 0-67.91z"
+              />
+            </svg>
+            <span>Edit this page</span>
+          </a>
+        </li>
+      )
+    }
+    {
+      CONFIG.COMMUNITY_INVITE_URL && (
+        <li
+          class={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 border-t3-purple-300 dark:border-t3-purple-200 depth-2 border-l-2 hover:border-t3-purple-300`}
+        >
+          <a
+            class="flex pl-2"
+            href={CONFIG.COMMUNITY_INVITE_URL}
+            target="_blank"
           >
-            <path
-              fill="currentColor"
-              d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
-            />
-          </svg>
-          <span>Join our community</span>
-        </a>
-      </li>
-    )
-  }
-</ul>
-<div style="margin: 2rem 0; text-align: center;">
-  <ThemeToggleButton client:visible />
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              data-prefix="fas"
+              data-icon="comment-alt"
+              class="svg-inline--fa fa-comment-alt fa-w-16"
+              role="img"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 512 512"
+              height="1em"
+              width="1em"
+            >
+              <path
+                fill="currentColor"
+                d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 9.8 11.2 15.5 19.1 9.7L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"
+              />
+            </svg>
+            <span>Join our community</span>
+          </a>
+        </li>
+      )
+    }
+  </ul>
+  <div class="m-8 text-center">
+    <ThemeToggleButton client:visible />
+  </div>
 </div>
-
-<style>
-  .edit-on-github {
-    text-decoration: none;
-    font: inherit;
-    color: inherit;
-    font-size: 1rem;
-  }
-</style>