Cj ification (#1724)

* adds cj adn ability to modify hosts

* updates shows to add cj and removes logging

* fixes ts errors

prisma/schema.prisma

@@ -23,16 +23,19 @@ enum ShowType {
 }
 
 model User {
-  id         String     @id @default(uuid())
-  avatar_url String?
-  created_at DateTime   @default(now())
-  email      String?    @unique
-  github_id  Int        @unique
-  session    Session[]
-  updated_at DateTime   @updatedAt
-  username   String?
-  roles      UserRole[]
-  theme      String     @default("system")
+  id          String     @id @default(uuid())
+  avatar_url  String?
+  created_at  DateTime   @default(now())
+  email       String?    @unique
+  github_id   Int        @unique
+  session     Session[]
+  updated_at  DateTime   @updatedAt
+  username    String?
+  roles       UserRole[]
+  theme       String     @default("system")
+  name        String?
+  twitter     String?
+  hostedShows Show[]
 }
 
 model Role {
@@ -123,6 +126,7 @@ model Show {
   aiShowNote  AiShowNote?
   show_type   ShowType    @default(SPECIAL)
   videos      ShowVideo[]
+  hosts       User[]
 
   @@index([number, date], name: "idx_show_number_date") // Define composite index
   @@index([number]) // Define composite index

shows/779 - Why SQLite is Taking Over with Brian Holt & Marco Bambini.md

@@ -17,6 +17,9 @@ guest:
     of: SQLite Cloud
     url: https://sqlitecloud.io/
     social: https://www.linkedin.com/in/marcobambini/
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 Scott and CJ dive into the world of SQLite Cloud with special guests Brian Holt and Marco Bambini. They explore why SQLite is gaining traction, its unique features, and the misconceptions surrounding its use—let's get into it!

shows/781 - Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode.md

@@ -4,6 +4,9 @@ title: Potluck - The Value of TypeScript × Vue vs Svelte × Leetcode
 date: 1718190000000
 url: https://traffic.libsyn.com/syntax/Syntax_-_781.mp3
 youtube_url: https://www.youtube.com/watch?v=Vj9Z4Dso8y4
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 In this potluck episode of Syntax, Scott and CJ serve up a variety of community questions, from the nuances of beginner vs. advanced TypeScript to the pros and cons of SvelteKit. They also discuss falling out of love with React, shipping private packages via NPM, and the eternal struggle of always starting but never finishing projects.

shows/782 - The Developer’s Guide To Fonts with Stephen Nixon.md

@@ -13,6 +13,9 @@ guest:
   social:
   - https://www.youtube.com/arrowtype
   - https://www.instagram.com/arrowtype
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 Scott and CJ are joined by Stephen Nixon of ArrowType to delve into the world of fonts and type for developers. They explore the intricacies of font creation, the utility of variable fonts, and offer tips for making visually appealing typography on the web.

shows/786 - What Open Source license should you use.md

@@ -4,6 +4,9 @@ title: What Open Source license should you use?
 date: 1719226800000
 url: https://traffic.libsyn.com/syntax/Syntax_-_786.mp3
 youtube_url: https://www.youtube.com/watch?v=FcieXP8T4R4
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 Scott and CJ dive into the world of open source, breaking down its meaning, benefits, and the various types of licenses you'll encounter. From permissive licenses like MIT and Apache 2.0 to copy-left licenses such as GNU GPLv3, they'll help you choose and apply the right license for your project.

shows/787 - You Should Try Vuejs.md

@@ -4,6 +4,9 @@ title: You Should Try Vue.js
 date: 1719399600000
 url: https://traffic.libsyn.com/syntax/Syntax_-_787.mp3
 youtube_url: https://www.youtube.com/watch?v=TkJMtssND-U
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 Scott and CJ dive deep into the world of Vue.js, exploring what makes this frontend framework unique and why it stands out from React and Svelte. CJ gives a comprehensive tour, covering everything from getting started to advanced features like state management and Vue’s built-in styles.

shows/788 - Supabase with Paul Copplestone.md

@@ -4,6 +4,9 @@ title: "Supabase: Open Source Firebase for Fullstack JS Apps"
 date: 1719572400000
 url: https://traffic.libsyn.com/syntax/Syntax_-_788.mp3
 youtube_url: https://www.youtube.com/watch?v=KtxoJUZDgIU
+hosts:
+  - stolinski
+  - w3cj
 guest:
   name: Paul Copplestone
   github: kiwicopple

shows/789 - Do More With AI - LLMs With Big Token Counts.md

@@ -4,6 +4,9 @@ title: Do More With AI - LLMs With Big Token Counts
 date: 1719831600000
 url: https://traffic.libsyn.com/syntax/Syntax_-_789.mp3
 youtube_url: https://www.youtube.com/watch?v=81DY1IsMckE
+hosts:
+  - stolinski
+  - w3cj
 ---
 
 Join Scott and CJ as they dive into the fascinating world of AI, exploring topics from LLM token sizes and context windows to understanding input length. They discuss practical use cases and share insights on how web developers can leverage larger token counts to maximize the potential of AI and LLMs.

src/lib/HostsAndGuests.svelte

@@ -2,6 +2,11 @@
 	import type { Guest } from '@prisma/client';
 	import Host from '$lib/hosts/Host.svelte';
 	export let guests: { Guest: Guest }[] = [];
+	export let hosts: {
+		name: string | null;
+		username: string | null;
+		twitter: string | null;
+	}[] = [];
 </script>
 
 <div class="guests-and-hosts">
@@ -18,20 +23,32 @@
 			/>
 		{/each}
 	{/if}
-	<Host
-		host={{
-			name: 'Wes Bos',
-			github: 'wesbos',
-			twitter: 'wesbos'
-		}}
-	/>
-	<Host
-		host={{
-			name: 'Scott Tolinski',
-			github: 'stolinski',
-			twitter: 'stolinski'
-		}}
-	/>
+	{#if hosts.length > 0}
+		{#each hosts as host}
+			<Host
+				host={{
+					name: host.name || '',
+					github: host.username,
+					twitter: host.twitter
+				}}
+			/>
+		{/each}
+	{:else}
+		<Host
+			host={{
+				name: 'Wes Bos',
+				github: 'wesbos',
+				twitter: 'wesbos'
+			}}
+		/>
+		<Host
+			host={{
+				name: 'Scott Tolinski',
+				github: 'stolinski',
+				twitter: 'stolinski'
+			}}
+		/>
+	{/if}
 </div>
 
 <style lang="postcss">

src/lib/PodcastHero.svelte

@@ -17,10 +17,10 @@
 			<a href="/"><Logo /></a>
 		</div>
 		<h2 class="text-center">
-			A <span class="tasty">Tasty Treats</span> Podcast for Web Developers
+			<span class="tasty">Tasty Treats</span> for Web Developers
 		</h2>
 		<p class="hosted-by">
-			<span>Hosted by<wbr /></span>
+			<span>With<wbr /></span>
 			<span>
 				<img
 					width="50"
@@ -29,7 +29,7 @@
 					alt="A rather handsome Wes Bos"
 				/><a href="/about">Wes Bos</a>
 			</span>
-			<span class="amp">&</span>
+			<span class="amp">×</span>
 			<span>
 				<img
 					width="50"
@@ -38,6 +38,11 @@
 					alt="Scott lookin absolutely fresh"
 				/> <a href="/about">Scott Tolinski</a>
 			</span>
+			<span class="amp">×</span>
+			<span>
+				<img width="50" height="50" src={`https://github.com/w3cj.png`} alt="A very dapper CJ" />
+				<a href="/about">CJ Reynolds</a>
+			</span>
 		</p>
 		<p class="brought-by">
 			Brought to you by <a

src/lib/ShowCard.svelte

@@ -24,11 +24,15 @@
 				github: string | null;
 			};
 		}[];
+		hosts?: {
+			name: string | null;
+			username: string | null;
+		}[];
 	};
 	export let display: 'list' | 'card' | 'highlight' = 'card';
-
 	export let heading = 'h4';
 	export let show_date = new Date(show.date);
+
 	function format_date(date: Date, baseDate: Date = new Date()) {
 		const timeFormatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
 		const diff = date.getTime() - baseDate.getTime();
@@ -45,6 +49,24 @@
 		}
 	}
 	export const aria_key = `show${show.number}-description`;
+
+	let hosts: {
+		name: string;
+		github: string;
+	}[] = [];
+	if ((show?.hosts?.length || 0) > 0) {
+		show.hosts?.forEach((host) => {
+			hosts.push({
+				name: host.name || '',
+				github: host.username || ''
+			});
+		});
+	} else {
+		hosts = [
+			{ name: 'Wes Bos', github: 'wesbos' },
+			{ name: 'Scott Tolinski', github: 'stolinski' }
+		];
+	}
 </script>
 
 <article class={display}>
@@ -108,8 +130,7 @@
 			<div class="bottom-row">
 				<FacePile
 					faces={[
-						{ name: 'Wes Bos', github: 'wesbos' },
-						{ name: 'Scott Tolinski', github: 'stolinski' },
+						...hosts,
 						...(show.guests || []).map((guest) => ({
 							name: guest.Guest.name,
 							github: guest.Guest.github || ''

src/routes/(blank)/embed/[show_number]/+page.server.ts

@@ -12,6 +12,14 @@ export const load = async function ({ params, locals }) {
 					Guest: true
 				}
 			},
+			hosts: {
+				select: {
+					id: true,
+					username: true,
+					name: true,
+					twitter: true
+				}
+			},
 			aiShowNote: {
 				include: {
 					topics: true,

src/routes/(blank)/embed/[show_number]/+page.svelte

@@ -12,7 +12,7 @@
 	import { browser } from '$app/environment';
 
 	export let data;
-	$: ({ show, user_theme } = data);
+	$: ({ show } = data);
 
 	function toggle_share() {
 		$episode_share_status = !$episode_share_status;

src/routes/(site)/show/[show_number]/[slug]/+layout.server.ts

@@ -26,6 +26,14 @@ export const load = async function ({ params, locals, url }) {
 					}
 				}
 			},
+			hosts: {
+				select: {
+					id: true,
+					username: true,
+					name: true,
+					twitter: true
+				}
+			},
 			aiShowNote: {
 				include: {
 					topics: true,

src/routes/(site)/show/[show_number]/[slug]/+layout.svelte

@@ -63,7 +63,7 @@
 </header>
 
 <div>
-	<HostsAndGuests guests={show.guests} />
+	<HostsAndGuests hosts={show.hosts} guests={show.guests} />
 </div>
 
 <div class="show-actions-wrap">

src/server/ai/queries.ts

@@ -107,6 +107,14 @@ export const SHOW_QUERY = (
 					}
 				}
 			},
+			hosts: {
+				select: {
+					id: true,
+					username: true,
+					name: true,
+					twitter: true
+				}
+			},
 			aiShowNote: {
 				select: {
 					description: true,

src/server/shows.ts

@@ -97,6 +97,26 @@ export async function parse_and_save_show_notes(
 		DAYS_OF_WEEK_TYPES[dayOfWeek] || 'SPECIAL';
 	// Save or update the show
 	try {
+		// Prepare the hosts connection if hosts exist in the frontmatter
+		let hostsConnection = {};
+		if (data.hosts && Array.isArray(data.hosts)) {
+			const hostUsers = await prisma.user.findMany({
+				where: {
+					username: {
+						in: data.hosts
+					}
+				}
+			});
+
+			if (hostUsers.length > 0) {
+				hostsConnection = {
+					hosts: {
+						connect: hostUsers.map((user) => ({ id: user.id }))
+					}
+				};
+			}
+		}
+
 		await prisma.show.upsert({
 			where: { id },
 			update: {
@@ -109,7 +129,8 @@ export async function parse_and_save_show_notes(
 				show_notes: content,
 				hash: hash,
 				md_file,
-				show_type // Assign the calculated show_type
+				show_type, // Assign the calculated show_type
+				...hostsConnection
 			},
 			create: {
 				id,
@@ -122,7 +143,8 @@ export async function parse_and_save_show_notes(
 				show_notes: content,
 				hash: hash,
 				md_file,
-				show_type // Assign the calculated show_type
+				show_type, // Assign the calculated show_type
+				...hostsConnection
 			}
 		});