docs: add typescript, nextjs, remove old style tags

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/navigation/Search.tsx

@@ -53,7 +53,7 @@ export default function Search() {
         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"
       >
-        <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/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>

www/src/components/navigation/navbar.astro

@@ -71,30 +71,3 @@ const navbarLinks: Array<{ href: string; label: string; newTab?: boolean }> = [
     </div>
   </div>
 </nav>
-
-<style>
-  :root {
-    --docsearch-primary-color: var(--theme-accent);
-    --docsearch-logo-color: var(--theme-text);
-  }
-
-  /* .search-item {
-    display: none;
-    position: relative;
-    z-index: 10;
-    flex-grow: 1;
-    padding-right: 0.7rem;
-    display: flex;
-    max-width: 200px;
-  } */
-
-  :global(.search-item > *) {
-    flex-grow: 1;
-  }
-
-  @media (min-width: 50em) {
-    .search-item {
-      max-width: 400px;
-    }
-  }
-</style>

www/src/layouts/blog.astro

@@ -37,17 +37,6 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
           : CONFIG.SITE.title
       }
     </title>
-    <style>
-      :global(.mobile-sidebar-toggle) {
-        overflow: hidden;
-      }
-      :global(.mobile-sidebar-toggle) #grid-left {
-        display: block;
-        position: fixed;
-        width: 100%;
-        top: 2rem;
-      }
-    </style>
   </head>
 
   <body class="w-full">
@@ -74,7 +63,7 @@ const githubEditUrl = `${CONFIG.GITHUB_EDIT_URL}/${currentFile}`;
       <aside
         id="grid-right"
         title="Table of Contents"
-        class="hidden lg:block pt-1 md:col-start-11 md:col-span-1"
+        class="hidden lg:block pt-1 md:col-start-10 md:col-span-2"
       >
         <RightSidebar headings={headings} githubEditUrl={githubEditUrl} />
       </aside>

www/src/layouts/landingPage.astro

@@ -40,15 +40,5 @@ const currentPage = Astro.url.pathname;
     </div>
     <slot />
     <Footer isBlog={false} path="/" />
-    <style>
-      :global(.mobile-sidebar-toggle) {
-        overflow: hidden;
-      }
-
-      :global(.mobile-sidebar-toggle) #grid-left {
-        display: block;
-        top: 2rem;
-      }
-    </style>
   </body>
 </html>

www/src/pages/en/usage/next-js.md

@@ -0,0 +1,39 @@
+---
+title: NextJS
+description: Usage of NextJS
+layout: ../../../layouts/blog.astro
+---
+
+# What is NextJS?
+
+NextJS is a backend framework for your React applications.
+
+<a href="https://www.youtube.com/watch?v=2cB5Fh46Vi4" className="mx-auto" target="_blank">
+  <p align="center">
+    <img src="/images/nextjs_thumbnail.jpg" alt="NextJS is a backend framework" width="320" />
+  </p>
+</a>
+
+<a href="https://www.youtube.com/watch?v=2cB5Fh46Vi4" className="mx-auto" target="_blank">
+  <p align="center">Watch Theo's overview on Youtube here</p>
+</a>
+
+# Why should I use it?
+
+We love React. It has made UI development accessible in ways we never imagined before. It also can lead developers down some rough paths. Next.js offers a lightly opinionated, heavily optimized approach to creating a website using React. From routing to API definitions to image rendering, we trust Next.js to lead developers towards good decisions.
+
+Pairing NextJS with [Vercel](https://vercel.com/) makes developing and deploying websites possible in the simplest way possible. Their extremely generous free-tier and super intuitive interface provides a point and click solution to deploy your site (We ❤️ Vercel)
+
+# Get Static/Server Props
+
+One of NextJS prime features is its data fetching capabilities. We highly recommend reading through the [official documentation](https://nextjs.org/docs/basic-features/data-fetching) to understand how to use each method and how they differ. `getServerSideProps` is generally discouraged unless there is a good reason for it, due to the fact that it is a blocking call and will slow down your site. [Incremental Static Regeneration](https://nextjs.org/docs/basic-features/incremental-static-regeneration) is a great alternative to `getServerSideProps` when the data is dynamic and can be fetched incrementally.
+
+# Useful Resources
+
+| Resource                       | Link                               |
+| ------------------------------ | ---------------------------------- |
+| Next.js Documentation          | https://nextjs.org/docs            |
+| Next.js Blog                   | https://nextjs.org/blog            |
+| Next.js Twitter                | https://twitter.com/nextjs         |
+| Next.js GitHub                 | https://github.com/vercel/next.js  |
+| Vercel/Next.js YouTube Channel | https://www.youtube.com/c/VercelHQ |