Merge branch 'develop' into 1071-video-player-page-for-courses

.github/pull_request_template.md

@@ -17,3 +17,8 @@ Fixes #(issue)
 
 - IF YOU HAVE ANY SCREENSHOTS, INCLUDE THEM HERE. _( Welcome file extensions include gifs/png screenshots of your feature in action )_
 - IF YOU HAVE NO SCREENSHOTS, ENTER 'None'
+
+## [Optional] What gif best describes this PR or how it makes you feel
+
+- [HERES](https://stackoverflow.com/questions/34341808/is-there-a-way-to-add-an-animated-gif-to-a-markdown-file) HOW TO EASILY ADD GIFS TO A PR
+- IF NO GIF COMES TO MIND, ENTER 'None'

.github/workflows/e2e-tests.yml

@@ -46,7 +46,7 @@ jobs:
       NEXTAUTH_SECRET: ${{ secrets.NEXTAUTH_SECRET }}
       E2E_USER_EMAIL: [email protected]
       E2E_USER_ID: 8e3179ce-f32b-4d0a-ba3b-234d66b836ad
-      E2E_USER_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
+      E2E_USER_ONE_SESSION_ID: df8a11f2-f20a-43d6-80a0-a213f1efedc1
 
     steps:
       - name: Checkout repository

README.md

@@ -141,9 +141,9 @@ You shouldn't need to change the default value here. This is a variable used by
 NEXTAUTH_URL=http://localhost:3000/api/auth
 ```
 
-### E2E_USER_SESSION_ID
+### E2E_USER_ONE_SESSION_ID
 
-This is the sessionToken uuid that .
+This is the sessionToken uuid that is used to identify a users current active session.
 This is currently hardcoded and there is no reason to change this until we require multiple E2E test users within the same test suite
 
 ### E2E_USER_ID
@@ -173,7 +173,7 @@ Please ensure you have the following variables set in your `.env` file:
 
 - `E2E_USER_ID`: The id of the E2E user for testing.
 - `E2E_USER_EMAIL`: The email of the E2E user for testing.
-- `E2E_USER_SESSION_ID`: The session id that the user will use to authenticate.
+- `E2E_USER_ONE_SESSION_ID`: The session id that the user will use to authenticate.
 
 
 Note the sample .env [here](./sample.env) is fine to use.

app/(app)/articles/[slug]/page.tsx

@@ -14,10 +14,11 @@ import ArticleAdminPanel from "@/components/ArticleAdminPanel/ArticleAdminPanel"
 import { type Metadata } from "next";
 import { getPost } from "@/server/lib/posts";
 import { getCamelCaseFromLower } from "@/utils/utils";
-import { generateHTML } from "@tiptap/html";
+import { generateHTML } from "@tiptap/core";
 import { TiptapExtensions } from "@/components/editor/editor/extensions";
 import DOMPurify from "isomorphic-dompurify";
 import type { JSONContent } from "@tiptap/core";
+import NotFound from "@/components/NotFound/NotFound";
 
 type Props = { params: { slug: string } };
 
@@ -119,11 +120,17 @@ const ArticlePage = async ({ params }: Props) => {
 
           {isTiptapContent ? (
             <div
-              dangerouslySetInnerHTML={{ __html: renderedContent }}
+              dangerouslySetInnerHTML={{
+                __html: renderedContent ?? <NotFound />,
+              }}
               className="tiptap-content"
             />
           ) : (
-            <div>{renderedContent}</div>
+            <div>
+              {Markdoc.renderers.react(renderedContent, React, {
+                components: markdocComponents,
+              })}
+            </div>
           )}
         </article>
         {post.tags.length > 0 && (

app/(app)/letters/is-your-domain-haunted/page.mdx

@@ -0,0 +1,60 @@
+Tue, October 29th, 2024 • Niall Maher
+
+# 🎃 Is Your Domain Haunted? + Dev Productivity Tips
+
+Here's a Chrome DevTools trick to share screenshots of elements: the "Capture node screenshot" feature.
+
+Right-click any element in the Elements panel, select "Capture node screenshot," and instantly get a perfect screenshot of just that component. This is incredibly useful for documentation, bug reports, or sharing UI elements with designers.
+
+No more awkward cropping in image editors.
+
+## 📚 This Week's Picks
+
+**[How to Cancel Async Code in JavaScript (4 min)](https://www.codu.co/articles/how-to-cancel-async-code-in-javascript-k4ate_e8)**  
+Canceling asynchronous operations in JavaScript has historically been challenging. Not anymore thanks to AbortController API and its companion, AbortSignal. A short guide I wrote to introduce these topics.
+
+**[Before you buy a domain name, first check to see if it's haunted (6 min)](https://www.bryanbraun.com/2024/10/25/before-you-buy-a-domain-name-first-check-to-see-if-its-haunted/)**  
+Since it's Halloween season, you probably buy too many domains if you are anything like me. Here's why you check if it's "haunted."
+
+**[Creating Links to Locations in Google Maps and Apple Maps (2 min)](https://www.codu.co/articles/creating-links-to-locations-in-google-maps-and-apple-maps-eqj0ozor)**  
+This guide covers different methods for linking to locations in Google Maps and Apple Maps.
+
+**[SOLID Principles: Building a Strong Foundation for Your Code (2 min)](https://www.codu.co/articles/solid-principles-building-a-strong-foundation-for-your-code-fliy0v84)**  
+Maintaining and extending code in software development can become challenging as projects grow. Here are how SOLID principles can help.
+
+**[Why does JavaScript's fetch make me wait TWICE (video)](https://youtu.be/Ki64Cnyf_cA?si=JotsNJdMySFhV-82)**  
+Ever wonder why you need to use response.json() after fetching in JavaScript? This video will explain why this isn't just a single operation.
+
+**[Our Journey with Caching (4 min)](https://nextjs.org/blog/our-journey-with-caching)**  
+This post dives into caching with Next.js. Written by the Next.js team, it is an essential and short guide to getting it right in your applications.
+
+## 📖 Book of the Week
+
+**[Inspired: How to Create Tech Products Customers Love](https://amzn.to/3Ai1D7k)**
+
+This one might be familiar if you've read my newsletter for a while. But I guess it's that time of year again when I re-read my favorite product book.
+
+Marty Cagan's insights never get old - from how to validate ideas quickly to structuring teams that consistently ship great products. What I love most is how it challenges the usual "build what customers ask for" mindset. Instead, Cagan shows how to dig deeper and solve problems customers didn't even know they had. If you're involved in product decisions at any level, this book, I'd say, is worth revisiting every year.
+
+## 🛠️ Something Cool
+
+**[Schotten Totten 2 | Board Game](https://amzn.to/3C6eQks)**
+
+Yes, it's not code related. But if you're looking for a perfect lunch break game, this is it. It's a two-player card battle where you're trying to breach your opponent's castle walls. What makes it fun is how it packs strategy into 15-minute rounds - think poker hands mixed with tactical positioning.
+
+Once you get your head around the rules (which might take a game or two if you are slow like me), you'll be discovering new strategies weeks later. A rare gem that's both accessible and strategically rich.
+
+## 🔗 Quick Links
+
+- Codú TikTok: [https://www.tiktok.com/@codu.co](https://newsletter.codu.co/l/OKhlNrmpjTTHP763xCz1UNOw/p8DcaDEDbL8FJC5y1tmH4w/EEOHywhMSrHPNxKbF3Ps892Q)
+- Hacktoberfest GitHub Issues: [https://github.com/codu-code/codu/issues](https://newsletter.codu.co/l/OKhlNrmpjTTHP763xCz1UNOw/EWCx6TdpfoYQZxltZdSeZQ/EEOHywhMSrHPNxKbF3Ps892Q)
+- Our YouTube channel: [https://www.youtube.com/@codu](https://newsletter.codu.co/l/OKhlNrmpjTTHP763xCz1UNOw/iJvccMa1dTBysEZfCVFzkw/EEOHywhMSrHPNxKbF3Ps892Q)
+- Find us on Twitch: [https://www.twitch.tv/codudotco](https://www.twitch.tv/codudotco)
+
+**If you have any ideas or feedback, reply to this email.**
+
+Thanks, and stay awesome,
+
+Niall
+
+Founder @ [Codú](https://www.codu.co/?ref=newsletter)

components/Nav/Nav.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { api } from "@/server/trpc/react";
+import { usePathname } from "next/navigation";
 import {
   Disclosure,
   DisclosureButton,
@@ -40,6 +41,8 @@ const Nav = ({
     enabled: session ? true : false,
   });
 
+  const pathname = usePathname();
+
   const userNavigation = [
     {
       name: "Your Profile",
@@ -55,6 +58,18 @@ const Nav = ({
 
   const hasNotifications = !!count && count > 0;
 
+  const handleSignInPageNavigation = () => {
+    /**
+     * * NextAuth.js automatically adds current url to the callbackurl prop in the singin() method.
+     * * As Navbar is always present, spamming SignIn button causes login page url getting appended in the url bar.
+     */
+    if (pathname === "/get-started") {
+      return;
+    }
+
+    signIn();
+  };
+
   return (
     <Disclosure as="nav" className="bg-neutral-100 dark:bg-black">
       {({ close, open }) => (
@@ -117,12 +132,15 @@ const Nav = ({
                     </>
                   ) : (
                     <>
-                      <button className="nav-button" onClick={() => signIn()}>
+                      <button
+                        className="nav-button"
+                        onClick={handleSignInPageNavigation}
+                      >
                         Sign in
                       </button>
                       <button
                         className="primary-button"
-                        onClick={() => signIn()}
+                        onClick={handleSignInPageNavigation}
                       >
                         Sign up for free
                       </button>

drizzle/seed.ts

@@ -11,7 +11,7 @@ import postgres from "postgres";
 const DATABASE_URL = process.env.DATABASE_URL || "";
 // These can be removed in a follow on PR. Until this hits main we cant add E2E_USER_* stuff to the env.
 const E2E_SESSION_ID =
-  process.env.E2E_USER_SESSION_ID || "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
+  process.env.E2E_USER_ONE_SESSION_ID || "df8a11f2-f20a-43d6-80a0-a213f1efedc1";
 const E2E_USER_ID =
   process.env.E2E_USER_ID || "8e3179ce-f32b-4d0a-ba3b-234d66b836ad";
 const E2E_USER_EMAIL = process.env.E2E_USER_EMAIL || "[email protected]";

e2e/articles.spec.ts

@@ -1,11 +1,8 @@
 import { test, expect } from "playwright/test";
 import { randomUUID } from "crypto";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Articles Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
-
   test("Should show popular tags", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/articles");
     await expect(
@@ -133,6 +130,9 @@ test.describe("Unauthenticated Articles Page", () => {
 });
 
 test.describe("Authenticated Articles Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Should show recent bookmarks", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/articles");
     await expect(

e2e/home.spec.ts

@@ -1,6 +1,10 @@
 import { test, expect } from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Authenticated homepage", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Homepage view", async ({ page, isMobile }) => {
     await page.goto("http://localhost:3000/");
 
@@ -24,9 +28,6 @@ test.describe("Authenticated homepage", () => {
 });
 
 test.describe("Unauthenticated homepage", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   test("Homepage view", async ({ page }) => {
     await page.goto("http://localhost:3000/");
 

e2e/login.spec.ts

@@ -1,5 +1,6 @@
 import { test, expect } from "playwright/test";
 import "dotenv/config";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated Login Page", () => {
   test.beforeEach(async ({ page }) => {
@@ -31,6 +32,9 @@ test.describe("Unauthenticated Login Page", () => {
 });
 
 test.describe("Authenticated Login Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   test("Sign up page contains sign up links", async ({ page, isMobile }) => {
     // authenticated users are kicked back to the homepage if they try to go to /get-started
     await page.goto("http://localhost:3000/get-started");

e2e/my-posts.spec.ts

@@ -1,14 +1,15 @@
 import test from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated my-posts Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   //
   // Replace with tests for unauthenticated users
 });
 
 test.describe("Authenticated my-posts Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   //
   // Replace with tests for authenticated users
 });

e2e/settings.spec.ts

@@ -1,14 +1,15 @@
 import test from "@playwright/test";
+import { loggedInAsUserOne } from "./utils";
 
 test.describe("Unauthenticated setttings Page", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.context().clearCookies();
-  });
   //
   // Replace with tests for unauthenticated users
 });
 
 test.describe("Authenticated settings Page", () => {
+  test.beforeEach(async ({ page }) => {
+    await loggedInAsUserOne(page);
+  });
   //
   // Replace with tests for authenticated users
 });

e2e/utils/index.ts

@@ -0,0 +1 @@
+export * from "./utils";

e2e/utils/utils.ts

@@ -0,0 +1,25 @@
+import { expect, Page } from "@playwright/test";
+
+export const loggedInAsUserOne = async (page: Page) => {
+  try {
+    expect(process.env.E2E_USER_ONE_SESSION_ID).toBeDefined();
+
+    await page.context().addCookies([
+      {
+        name: "next-auth.session-token",
+        value: process.env.E2E_USER_ONE_SESSION_ID as string,
+        domain: "localhost",
+        path: "/",
+        sameSite: "Lax",
+      },
+    ]);
+
+    expect(
+      (await page.context().cookies()).find(
+        (cookie) => cookie.name === "next-auth.session-token",
+      ),
+    ).toBeTruthy();
+  } catch (err) {
+    throw Error("Error while authenticating E2E test user one");
+  }
+};