t3-oss · juliusmarminge · Sep 2, 2022 · Aug 29, 2022 · Aug 29, 2022 · Aug 30, 2022
@@ -55,8 +55,8 @@ export default function TableOfContents({
       <h2 className="text-lg my-4 font-semibold">On this page</h2>
       <ul className="w-full border-l-2 border-t3-purple-300 marker:text-t3-purple-300  dark:border-t3-purple-200 my-1">
         <li
-          className={`pl-2 marker:bg-t3-purple-300 ${
-            activeId === "overview" ? "active" : ""
+          className={`pl-1 ml-1 marker:bg-t3-purple-300 ${
+            activeId === "overview" ? "font-bold" : "font-normal"
           }`.trim()}
         >
           <a
@@ -69,12 +69,19 @@ export default function TableOfContents({
         {headings
           .filter(({ depth }) => depth > 0 && depth < 4)
           .map((heading, i) => {
-            const padding = heading.depth + 1;
+            console.log(heading);
+            const padding = heading.depth;
             return (
-              <li key={i} className="w-full list-none pl-2">
+              <li key={i} className={`pl-${padding} ml-1 w-full list-none`}>
                 <a
-                  className={`pl-${padding} hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 marker:text-t3-purple-300 ${
+                  className={`hover:text-t3-purple-300 dark:hover:text-t3-purple-100 text-t3-purple-300 dark:text-t3-purple-200 marker:text-t3-purple-300 ${
                     activeId === heading.slug ? "font-bold" : "font-normal"
+                  } ${
+                    padding < 3
+                      ? "text-base"
+                      : padding >= 3
+                      ? "text-sm"
+                      : "text-sm"
                   }`}
                   href={`#${heading.slug}`}
                 >

@@ -15,7 +15,7 @@ const sidebar = SIDEBAR[langCode];
 <nav
   aria-labelledby="grid-left"
   class={currentPage === "/"
-    ? `pt-6 pb-28 h-full`
+    ? `pt-3 pb-28 h-full`
     : `overflow-y-scroll md:overflow-hidden h-full pb-32`}
 >
   <div class="max-w-lg mx-auto p-3 pt-6 md:hidden">

@@ -27,15 +27,17 @@ const currentPage = Astro.url.pathname;
     <link rel="icon" type="image/ico" href="/favicon.ico" />
     <meta name="generator" content={Astro.generator} />
   </head>
-  <body class="relative h-full">
+  <body>
     <Navbar />
-    <aside
-      id="grid-left"
-      class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
-      title="Site Navigation"
-    >
-      <LeftSidebar currentPage={currentPage} />
-    </aside>
+    <div class="relative h-full">
+      <aside
+        id="grid-left"
+        class="hidden sticky h-[100vh] overflow-y-auto bottom-0 top-0 left-0 right-0 bg-gradient-to-b via-[#300171] from-gray-900 to-slate-900 z-10"
+        title="Site Navigation"
+      >
+        <LeftSidebar currentPage={currentPage} />
+      </aside>
+    </div>
     <slot />
     <Footer isBlog={false} path="/" />
     <style>

@@ -0,0 +1,73 @@
+---
+title: NextAuth.js
+description: Usage of NextAuth
+layout: ../../../layouts/blog.astro
+---
+
+# What is NextAuth.js?
+
+For when you want an authentication system in your NextJS application, NextAuth.js is a perfect solution to bring in the complexity of security without the hassle of having to build it yourself. It comes with an extensive list of providers to quickly add OAuth authentication, as well as a database adapter system to allow you to use your own database of choice.
+
+# Usage with tRPC
+
+When using NextAuth in combination with tRPC when scaffolding with `create-t3-app`, the context provider is already set up for you. This allows tRPC to access the NextAuth session data to be able to use it in your API routes.
+
+## Context Provider
+
+Located at `server/router/context.ts`, the context provider is setup to recieve the `req` and `res` object from NextJS, to query if a current session exists and provide it to the tRPC context. This allows you to use the `session` object in your API routes to check if a user is authenticated in middleware.
+
+## \_app.tsx
+
+The entrypoint to your NextJS project, `_app.tsx` is where the context provider is imported to wrap the page being rendered:
+
+```tsx
+<SessionProvider session={session}>
+  <Component {...pageProps} />
+</SessionProvider>
+```
+
+### Session ID
+
+`create-t3-app` is configured to utilise the `session` callback in the NextAuth config to include the user's ID within the `session` object.
+
+```ts
+callbacks: {
+    session({ session, user }) {
+      if (session.user) {
+        session.user.id = user.id;
+      }
+      return session;
+    },
+  },
+```
+
+This is coupled with a types file located at `/types/next-auth.d.ts` to allow the `session` object to be typed.
+
+```ts
+import { DefaultSession } from "next-auth";
+
+declare module "next-auth" {
+  /**
+   * Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
+   */
+  interface Session {
+    user?: {
+      id: string;
+    } & DefaultSession["user"];
+  }
+}
+```
+
+# Middleware
+
+**Important Note**
+
+Usage of NextAuth.js with NextJS middleware [requires the use of the JWT session strategy](https://next-auth.js.org/configuration/nextjs#caveats) for authentication. This is because the middleware is only able to access the session cookie if it is a JWT. By default, `create-t3-app` is configured to use the **default** database strategy, in combination with Prisma as the database adapter.
+
+# Useful Resources
+
+| Resource                          | Link                                    |
+| --------------------------------- | --------------------------------------- |
+| NextAuth Docs                     | https://next-auth.js.org/               |
+| NextAuth Github                   | https://github.com/nextauthjs/next-auth |
+| tRPC Kitchen Sink - with NextAuth | https://kitchen-sink.trpc.io/next-auth  |
@@ -0,0 +1,32 @@
+---
+title: Prisma
+description: Usage of Prisma
+layout: ../../../layouts/blog.astro
+---
+
+# What is Prisma?
+
+Prisma is an ORM for Typescript, that allows you to define your database schema and models in a `schema.prisma` file, and then generate a type-safe client that can be used to interact with your database from your backend.
+
+# Prisma Client
+
+Located at `/server/db/client.ts`, the Prisma Client is instantiated as a global variable (as recommended as [best practice](https://www.prisma.io/docs/guides/database/troubleshooting-orm/help-articles/nextjs-prisma-client-dev-practices#problem) by the team at Prisma) and exported to be used in your API routes.
+
+## Schema
+
+You will find the Prisma schema file at `/prisma/schema.prisma`. This file is where you define your database schema and models, and is used when generating the Prisma Client.
+
+### With NextAuth.js
+
+When you select NextAuth.js in combination with Prisma, the schema file is generated and set up for you with the recommended values for the `User`, `Session`, `Account` and `VerificationToken` models, as per the [NextAuth.js documentation](https://next-auth.js.org/adapters/prisma).
+
+## Default Database
+
+The default database is a SQLite database, which is great for development and quickly spinning up a proof-of-concept, but not recommended for production. You can change the database to use by changing the `provider` in the `datasource` block to either `postgresql` or `mysql`, and then updating the connection string within environment variables to point to your database.
+
+# Useful Resources
+
+| Resource      | Link                             |
+| ------------- | -------------------------------- |
+| Prisma Docs   | https://www.prisma.io/docs/      |
+| Prisma Github | https://github.com/prisma/prisma |
@@ -0,0 +1,66 @@
+---
+title: Tailwind
+description: Usage of TailwindCSS
+layout: ../../../layouts/blog.astro
+---
+
+# What is TailwindCSS?
+
+TailwindCSS is a tiny, [utility first](https://tailwindcss.com/docs/utility-first) CSS framework for building custom designs, while being able to switch your brain off.
+
+It makes CSS incredibly easy and quick to write, as shown by the following example:
+
+Old CSS:
+
+1. Write CSS, often in a seperate file
+
+```css
+.my-class {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.25rem;
+  padding: 1rem;
+}
+```
+
+2. Import CSS into your component
+
+```jsx
+import "./my-class.css";
+```
+
+3. Add the class to your HTML
+
+```html
+<div class="my-class">...</div>
+```
+
+Equivelent in Tailwind:
+
+1. Just write classes in your HTML
+
+```html
+<div
+  class="flex flex-col justify-center items-center bg-white border border-gray-200 rounded p-4"
+>
+  ...
+</div>
+```
+
+Its usage along with React components is extremely powerful for quickly building UIs.
+
+TailwindCSS has a beautiful built-in design system, that comes out of the box with a carefully chosen color palette, sizing patterns for styles such as width/height and padding/margin for a uniform design, as well as media breakpoints for an encouraged mobile-first layout. This can be extended and customised to be as restrictive or broad as you like.
+
+# Useful Resources
+
+| Resource                     | Link                                                    |
+| ---------------------------- | ------------------------------------------------------- |
+| Tailwind Docs                | https://tailwindcss.com/docs/editor-setup               |
+| Tailwind Playground          | https://play.tailwindcss.com/                           |
+| awesome-tailwindcss          | https://github.com/aniftyco/awesome-tailwindcss         |
+| TailwindLabs Youtube Channel | https://www.youtube.com/tailwindlabs                    |
+| Tailwind Community           | https://github.com/tailwindlabs/tailwindcss/discussions |
@@ -62,7 +62,7 @@
     @apply mb-0 font-semibold;
   }
   .markdown code {
-    @apply font-mono bg-[#0d1117] p-1 rounded-md text-slate-50 text-xs cursor-text selection:bg-t3-purple-100;
+    @apply font-mono bg-[#0d1117] p-1 rounded-md text-slate-50 text-xs cursor-text selection:bg-t3-purple-100 overflow-y-scroll whitespace-pre-wrap;
   }
   .markdown p > img {
     @apply text-sm mt-8;