added tutorials section

.gitignore

@@ -24,3 +24,4 @@ pnpm-debug.log*
 public/pagefind
 
 md-to-html.exe
+to-do-list.md

src/components/blocks/TableOfContent.astro

@@ -35,5 +35,5 @@ const { headings } = Astro.props;
 		})
 	}
 </ul>
-<hr class="my-4" />
+<hr class="my-4 border-primary-blue" />
 <CommunityLinks />

src/components/blocks/verticalNav.astro

@@ -19,18 +19,23 @@ export function formatTitle(title: string): string {
 
 export async function setup() {
 	// setup navigation
+
+	// Define the order of categories
+	let categoryOrder = ["Get Started", "Guide", "Tutorials"];
+
 	const getStartedFiles = await Astro.glob("../../pages/get-started/*");
 	const guideFiles = await Astro.glob("../../pages/guide/*");
+	const tutorialFiles = await Astro.glob("../../pages/tutorials/*");
 
-	const markdownFiles = [...getStartedFiles, ...guideFiles];
-	const navigation: Navigation = {};
+	let markdownFiles = [...getStartedFiles, ...guideFiles, ...tutorialFiles];
+	let navigation: Navigation = {};
 
 	for (const file of markdownFiles) {
-		const filePath = file.url;
-		const [_, category] = filePath!.split("/");
-		const formattedCategory = formatTitle(category);
-		const formattedTitle = file.frontmatter.title;
-		const order = file.frontmatter.order ?? 0;
+		let filePath = file.url;
+		let [_, category] = filePath!.split("/");
+		let formattedCategory = formatTitle(category).toLowerCase();
+		let formattedTitle = file.frontmatter.title;
+		let order = file.frontmatter.order ?? 0;
 
 		if (!navigation[formattedCategory]) {
 			navigation[formattedCategory] = [];
@@ -43,18 +48,18 @@ export async function setup() {
 		});
 	}
 
-	// sort by "order"
-	const sortedNavigation: Navigation = {};
-	Object.keys(navigation)
-		.sort()
-		.forEach((key) => {
-			sortedNavigation[key] = navigation[key].sort(
-				(a, b) => a.order - b.order
-			);
-		});
+	// Create a new navigation object with the desired order
+	let orderedNavigation: Navigation = {};
+	for (let category of categoryOrder) {
+		if (navigation[category.toLowerCase()]) {
+			orderedNavigation[category] = navigation[
+				category.toLowerCase()
+			].sort((a, b) => a.order - b.order);
+		}
+	}
 
 	return {
-		navigation: sortedNavigation,
+		navigation: orderedNavigation,
 	};
 }
 
@@ -84,7 +89,7 @@ const { showHome } = Astro.props;
 				<div class="mb-2">
 					<a
 						href="/"
-						class={`no-target-blank hover:no-underline hover:text-white text-lg mt-0
+						class={`no-target-blank px-2 rounded-md w-full hover:no-underline hover:text-white text-lg mt-0
                                 ${isCurrentUrl("/") ? "text-white" : "text-gray-400"}`}
 					>
 						Home
@@ -96,7 +101,7 @@ const { showHome } = Astro.props;
 		{
 			Object.entries(navigation).map(([category, links]) => (
 				<div class="mb-2">
-					<div class="category no-target-blank text-lg font-bold mb-1 mt-0 text-white">
+					<div class="category no-target-blank rounded-md text-lg font-bold mb-1 mt-0 text-white">
 						{category}
 					</div>
 					<ul class="list-disc list-outside font-normal">
@@ -104,7 +109,7 @@ const { showHome } = Astro.props;
 							<li class="mb-1 pl-0">
 								<a
 									href={link.url}
-									class={`no-target-blank transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-white" : "text-gray-400"}`}
+									class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white ${isCurrentUrl(link.url) ? "text-black bg-primary-green" : "text-gray-400 bg-none"}`}
 								>
 									{link.title}
 								</a>
@@ -117,8 +122,8 @@ const { showHome } = Astro.props;
 		<div class="mb-2">
 			<a
 				href="/groups"
-				class={`no-target-blank transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
-                    ${isCurrentUrl("/groups") ? "text-white" : "text-gray-400"}`}
+				class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
+                    ${isCurrentUrl("/groups") ? "text-black bg-primary-green" : "text-gray-400"}`}
 			>
 				Groups
 			</a>
@@ -126,8 +131,8 @@ const { showHome } = Astro.props;
 		<div class="mb-2">
 			<a
 				href="/blog"
-				class={`no-target-blank transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
-                    ${isCurrentUrl("/blog") ? "text-white" : "text-gray-400"}`}
+				class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
+                    ${isCurrentUrl("/blog") ? "text-black bg-primary-green" : "text-gray-400"}`}
 			>
 				Blog
 			</a>
@@ -135,8 +140,8 @@ const { showHome } = Astro.props;
 		<div class="mb-2">
 			<a
 				href="/credits"
-				class={`no-target-blank transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
-                    ${isCurrentUrl("/credits") ? "text-white" : "text-gray-400"}`}
+				class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
+                    ${isCurrentUrl("/credits") ? "text-black bg-primary-green" : "text-gray-400"}`}
 			>
 				Credits
 			</a>
@@ -157,11 +162,19 @@ const { showHome } = Astro.props;
 		// add active class to current url
 		links.forEach((link) => {
 			if (isCurrentUrl(link.getAttribute("href")!)) {
-				link.classList.add("text-white");
-				link.classList.remove("text-gray-400");
+				link.classList.add("text-black", "bg-primary-green");
+				link.classList.remove(
+					"text-gray-400",
+					"bg-none",
+					"hover:text-white"
+				);
 			} else {
-				link.classList.remove("text-white");
-				link.classList.add("text-gray-400");
+				link.classList.remove("text-black", "bg-primary-green");
+				link.classList.add(
+					"text-gray-400",
+					"bg-none",
+					"hover:text-white"
+				);
 			}
 		});
 

src/components/ui/BlurBackground.astro

@@ -1,6 +1,6 @@
 <div
 	id="background"
-	class="bg-[white] h-screen md:h-[50vh] aspect-square absolute rounded-full bg-[linear-gradient(to_right,#88D47D,#3F84D8)] animate-[rotate_20s_infinite] opacity-20 md:opacity-80 origin-center"
+	class="bg-[white] h-screen md:h-[50vh] aspect-square absolute rounded-full bg-[linear-gradient(to_right,#88D47D,#3F84D8)] animate-[rotate_15s_infinite] opacity-20 md:opacity-80 origin-center"
 >
 </div>
 <div
@@ -18,15 +18,15 @@
 
 	@keyframes rotate {
 		from {
-			transform: rotate(0deg) scale(1.5, 1);
+			transform: rotate(0deg) scale(3, 1);
 		}
 
 		50% {
-			transform: rotate(180deg) scale(1, 1.5);
+			transform: rotate(180deg) scale(1, 3);
 		}
 
 		to {
-			transform: rotate(360deg) scale(1.5, 1);
+			transform: rotate(360deg) scale(3, 1);
 		}
 	}
 </style>

src/components/ui/card-hover-effect.tsx

@@ -33,7 +33,7 @@ export const HoverEffect = ({
                     <AnimatePresence>
                         {hoveredIndex === idx && (
                             <motion.span
-                                className="absolute inset-0 block h-full w-full rounded-3xl bg-[#8DECB4]"
+                                className="absolute inset-0 block h-full w-full rounded-3xl bg-primary-green"
                                 layoutId="hoverBackground"
                                 initial={{ opacity: 0 }}
                                 animate={{

src/layouts/BlogsLayout.astro

@@ -4,12 +4,15 @@ import VerticalNav from "../components/blocks/verticalNav.astro";
 ---
 
 <Layout title={Astro.props.title} description={Astro.props.description}>
-	<div class="mx-auto px-6 max-w-7xl">
-		<div class="flex flex-col lg:grid lg:grid-cols-10">
+	<div class="mx-auto px-2 max-w-[1440px]">
+		<div class="flex flex-col lg:grid lg:grid-cols-10 gap-5">
 			<!-- vertical navbar -->
-			<div class="lg:col-span-2" transition:name="vertical-navbar">
+			<div
+				class="lg:col-span-2 lg:px-4"
+				transition:name="vertical-navbar"
+			>
 				<aside
-					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
+					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
 				>
 					<VerticalNav />
 				</aside>

src/layouts/GuideLayout.astro

@@ -8,19 +8,22 @@ const { frontmatter, headings } = Astro.props;
 ---
 
 <Layout title={frontmatter.title} description={frontmatter.description}>
-	<div class="mx-auto px-6 max-w-7xl">
-		<div class="flex flex-col lg:grid lg:grid-cols-10">
+	<div class="mx-auto px-2 max-w-[1440px]">
+		<div class="flex flex-col lg:grid lg:grid-cols-10 gap-5">
 			<!-- vertical navbar -->
-			<div class="lg:col-span-2" transition:name="vertical-navbar">
+			<div
+				class="lg:col-span-2 lg:px-4"
+				transition:name="vertical-navbar"
+			>
 				<aside
-					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
+					class="hidden lg:translate-x-0 overflow-y-auto z-30 lg:block lg:sticky py-8 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
 				>
 					<VerticalNav />
 				</aside>
 			</div>
 			<div class="lg:col-span-8">
 				<div class="flex flex-col lg:grid lg:grid-cols-10">
-					<div class="col-span-8 pr-10 pb-10 pt-8">
+					<div class="col-span-8 px-2 md:px-10 pb-10 pt-8">
 						<slot />
 					</div>
 					<div

src/layouts/Layout.astro

@@ -55,7 +55,7 @@ const { title, description } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-		<div class="pt-[var(--header-height)]">
+		<div class="pt-[var(--header-height)] bg-none">
 			<NavBar />
 			<slot />
 		</div>
@@ -127,6 +127,28 @@ const { title, description } = Astro.props;
 				scrollbar-color: #4a4a4a #2b2d31;
 				scrollbar-gutter: 10px;
 			}
+			aside {
+				/* scrollbar customize */
+				scrollbar-width: thin;
+				scrollbar-color: #31343d transparent;
+				overflow-y: auto;
+				padding-left: 0.5rem;
+				padding-right: 0.5rem;
+
+				border-radius: 0.375rem;
+			}
 		</style>
+		<script>
+			console.log(
+				"%cstop%c if you don't know what you're doing",
+				"color: red; font-weight: bold; font-size:2rem; ",
+				"color: inherit; font-size: 1.5rem"
+			);
+
+			console.log(
+				"%cHowever, if you do know what you're doing, you are welcomed to make the website better here! \n\nhttps://github.com/liyunze-coding/coworking-website",
+				"font-size: 1.2rem; margin-top: 1rem;"
+			);
+		</script>
 	</body>
 </html>

src/pages/get-started/introduction.mdx

@@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro"
 description: Introduction to coworking streams!
 order: 0
 ---
+import { Image } from 'astro:assets';
+import RythonDev from "./_images/introduction/rythondev.webp";
+import Ellyskey from "./_images/introduction/ellyskey.webp";
+import Seiji from "./_images/introduction/seiji.webp";
 
 # Introduction
 
@@ -13,43 +17,33 @@ A brief introduction to coworking streams! Let's keep each other accountable ^^
 
 ## What are coworking streams?
 
-![RythonDev](/images/introduction/rythondev.webp)
+<Image src={RythonDev} alt="RythonDev" loading="eager" />
 
 Image source: [RythonDev (Twitch)](https://twitch.tv/RythonDev)
 
 > Coworking (or study) streaming is an opportunity to share a virtual, productive, space with others and to connect based on interests and studies - in some ways replicating the in-person office, library, or cafe. Often, study streaming follows a pomodoro counter so that streamers can focus on working for a set amount of time and then converse with chat during another set amount of time for break.
 
-Many viewers like to watch coworking streams because it provides motivation and accountability, which is especially hard if you're trying to focus at home. In the light of Covid, where working from home is becoming more common, it can nice to find an environment with like-minded people. Plus, the sense of community attracts many people - often coworking streams are very welcoming and supportive!
+Many viewers like to watch coworking streams because it provides motivation and accountability, which is especially hard if you're trying to focus at home. In the light of Covid, where working from home is becoming more common, it can be nice to find an environment with like-minded people. Plus, the sense of community attracts many people - often coworking streams are very welcoming and supportive!
 
 ---
 
 ## What is a "pomodoro"?
 
-<img src="/images/introduction/ellyskey.webp" alt="Ellyskey" loading="lazy" />
+<Image src={Ellyskey} alt="Ellyskey" />
 
 Image source: [Ellyskey (Twitch)](https://twitch.tv/Ellyskey)
 
-The Pomodoro Technique is a time management method where you work in focused intervals called pomodoros separated by short breaks. This helps you stay concentrated, avoid burnout, and tackle big tasks by breaking them into manageable chunks.
-
 Coworking streamers tend to use 50 minutes of work and 10 minutes of break (50/10) for their streams for optimal balance of being able to get work done and be able to chat with viewers.
 
+The Pomodoro Technique is a time management method where you work in focused intervals called pomodoros separated by short breaks. This helps you stay concentrated, avoid burnout, and tackle big tasks by breaking them into manageable chunks.
+
 ---
 
 ## How do people enjoy these streams?
 
-<img src="/images/introduction/seijisoldier.webp" alt="SeijiSoldier" loading="lazy" />
+<Image src={Seiji} alt="Seiji" />
 
-Image source: [SeijiSoldier (Twitch)](https://twitch.tv/SeijiSoldier)
-
-> ### What are your thoughts on co-working streams?
-
-> I'm not saying I dislike them, but I just want to understand how people enjoy these streams. It's mostly just the streamer doing their work while their cam is facing in front of them. There's nothing much to watch as it's not display captured (understandable since work is confidential).
-> 
-> Sometimes, when I chat with them they don't even reply back. They usually have a timer in their overlay and after the timer ends they talk to chat again.
-> 
-> Maybe I'm a boomer, but can anyone shed light on why these streams are a thing on Twitch?
-
-Source: [Archived Reddit post](https://www.reddit.com/r/Twitch/comments/t66g15/what_are_your_thoughts_on_coworking_streams/)
+Image source: [Seiji (Twitch)](https://twitch.tv/Seiji)
 
 Although might seem unconventional to watch someone else work, there are several reasons why viewers enjoy these streams:
 
@@ -69,6 +63,16 @@ Although might seem unconventional to watch someone else work, there are several
 
     By watching a streamer work, viewers might pick up new productivity techniques or software shortcuts. Seeing someone else tackle similar tasks can be inspiring and motivating.
 
+> ### What are your thoughts on co-working streams?
+> 
+> I'm not saying I dislike them, but I just want to understand how people enjoy these streams. It's mostly just the streamer doing their work while their cam is facing in front of them. There's nothing much to watch as it's not display captured (understandable since work is confidential).
+> 
+> Sometimes, when I chat with them they don't even reply back. They usually have a timer in their overlay and after the timer ends they talk to chat again.
+> 
+> Maybe I'm a boomer, but can anyone shed light on why these streams are a thing on Twitch?
+> 
+> Source: [Archived Reddit post](https://www.reddit.com/r/Twitch/comments/t66g15/what_are_your_thoughts_on_coworking_streams/)
+
 It's understandable that the lack of direct interaction or display capture might be unfamiliar. Streamers typically prioritize focusing on their work during these periods, addressing chat messages during breaks or using timers to dedicate time for interaction.
 
 Ultimately, co-working streams cater to a specific need for some viewers. They offer a unique blend of productivity, community, and a supportive atmosphere that traditional work environments might lack.
@@ -77,15 +81,11 @@ Ultimately, co-working streams cater to a specific need for some viewers. They o
 
 ## What is a task widget?
 
-<a href="../guide/stream-widgets#task-widgets" class="no-target-blank"><img src="/images/widgets/multitask.webp" alt="Multi Task Widget" loading="lazy"></a>
+<a href="../guide/stream-widgets#task-widgets" class="no-target-blank"><img src="/images/widgets/multitask.webp" alt="Multi Task Widget" loading="lazy" /></a>
 
 If you want to add a task widget to your own stream, check it out in the <a href="../guide/stream-widgets#task-widgets" class="no-target-blank">Widgets section</a>!
 
-A task widget is a widget where users can use commands such as:
-- !task [current task]
-- !todo [current task]
-
-in chat to add their task(s) to the widget, to remind themselves about what they need to focus on at the moment.
+A task widget is a tool where users can add tasks via commands such as `!task [current task]` or `!todo [current task]` in chat to add their task(s) to the widget, to remind themselves about what they need to focus on.
 
 Task widgets offer an extra layer of accountability for the streamer and chatters to focus on their current task(s).
 

src/pages/get-started/pre-requisites.md

@@ -11,13 +11,14 @@ Get ready for coworking streams!
 
 ---
 
-## Pre-requisites (Computer)
+## Computer
 
 Pre-requisites for starting coworking streams on your desktop computer or laptop.
 
 ### Software
 
-- [OBS](https://obsproject.com/) : Free and open source software for video recording and live streaming.
+#### [OBS 🔗](https://obsproject.com/)
+Free and open source software for video recording and live streaming.
 
 ### Hardware
 
@@ -37,7 +38,7 @@ Pre-requisites for starting coworking streams on your desktop computer or laptop
 
 ---
 
-## Pre-requisites (Mobile)
+## Mobile
 
 Usually, streamers who stream from their phone would use their laptop device to interact with chat!
 

src/pages/guide/general-tips.md

@@ -75,7 +75,7 @@ Hopping on chat and mention anything about your own stream is considered self-pr
 
     Just focus on your work.
 
-- ### Avoid using Display Capture
+- ### Don't use Display Capture without blurring or minimizing
 
     Some coworking streamers may have Display Capture source on their primary pomodoro scene for extra accountability. However, this may leak sensitive information such as Email, full name, credentials etc.
 

src/pages/guide/music-and-audio.mdx

@@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro"
 description: Learn how to add music or audio for your coworking streams!
 order: 1
 ---
+import { Image } from 'astro:assets';
+import SixKLabs from "./_images/music-and-audio/6klabs.webp";
+import PixelChat from "./_images/music-and-audio/pixelchat.webp";
+import AudioSettings from "./_images/music-and-audio/audio_settings.webp";
 
 # Music and Audio
 
@@ -83,7 +87,9 @@ Streaming audio from Spotify to streaming services such as Twitch is against Spo
 
 ### [6K Labs 🔗](https://6klabs.com/)
 
-<a href="https://6klabs.com/"><img src="/images/music-and-audio/6klabs.webp" alt="6K Labs widget" loading="lazy" /></a>
+<a href="https://6klabs.com/">
+  <Image src={SixKLabs} alt="6K Labs widget" loading="lazy" />
+</a>
 
 - Easy to implement
 - Available for YouTube Music and Spotify
@@ -98,7 +104,7 @@ Streaming audio from Spotify to streaming services such as Twitch is against Spo
 
 ### [Pixel Chat 🔗](https://pixelchat.tv/)
 
-<a href="https://pixelchat.tv/"><img src="/images/music-and-audio/pixelchat.webp" alt="Pixel Chat widget" loading="lazy" /></a>
+<a href="https://pixelchat.tv/"><Image src={PixelChat} alt="Pixel Chat widget" loading="lazy" /></a>
 
 - Shows what you're playing via Spotify, Apple Music etc.
 - Includes other widgets for shoutouts, captions and counters
@@ -147,7 +153,7 @@ If you’re streaming on Twitch using OBS, you can easily avoid getting your VOD
 
 ### Easy way (have two different outputs)
 
-<img src="/images/music-and-audio/audio_settings.webp" alt="Audio settings" loading="lazy" />
+<Image src={AudioSettings} alt="Audio settings" loading="lazy" />
 
 To do this, you'll need to have two different audio outputs (i.e. two headphones/speakers). For windows users, go to sound settings --> advance sound options --> app volume device preferences (or if you can't find it, search "sound mixer options" in your start) then you should see this:
 

src/pages/guide/stream-bots.md

@@ -27,6 +27,8 @@ Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protec
 
 ### [MohCitrus 🔗](https://www.twitch.tv/MohCitrus/about)
 
+![MohCitrus](./_images/bots/mohcitrus.webp)
+
 <div class="flex flex-row gap-2">
 
 Available on:
@@ -36,7 +38,6 @@ Available on:
 
 
 MohCitrus is a translator bot made by [MohFocus (Twitch)](https://twitch.tv/MohFocus)! It can translate messages of viewers to any language via commands!
-![MohCitrus](/images/bots/mohcitrus.webp)
 
 ### [Nightbot 🔗](https://nightbot.tv/)
 

src/pages/guide/stream-layouts.mdx

@@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro"
 description: Learn how to moderate your coworking streams!
 order: 2
 ---
+import { Image } from 'astro:assets';
+import Canva from "./_images/layouts/canva.webp";
+import Figma from "./_images/layouts/figma.webp";
+import Pexels from "./_images/layouts/pexels.webp"
 
 # Stream Layouts
 
@@ -13,12 +17,20 @@ An organized layout structures information effectively, allowing viewers to easi
 
 ## [Canva 🔗](https://www.canva.com/)
 
+<a href="https://www.canva.com/" target="_blank">
+<Image src={Canva} alt="Canva" width="300" loading="eager" />
+</a>
+
 Canva is a free graphic design platform that is fairly intuitive to use and quick to pick up on! You can use this site to build any layout or to get inspired with templates. You can upload this into your software as a image or gif.  
 
 ---
 
 ## [Figma 🔗](https://www.figma.com/)
 
+<a href="https://www.figma.com/" target="_blank">
+<Image src={Figma} alt="Figma" width="400" loading="lazy" />
+</a>
+
 Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.
 
 ---
@@ -27,6 +39,10 @@ Figma is a collaborative web application for interface design, with additional o
 
 ### [Pexels 🔗](https://www.pexels.com/license/)
 
+<a href="https://www.pexels.com/license/" target="_blank">
+<Image src={Pexels} alt="Pexels" width="400" loading="lazy" />
+</a>
+
 Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages.
 
 ### [The Noun Project 🔗](https://thenounproject.com/)
@@ -72,5 +88,17 @@ These principles are used extensively in various fields like design, art, and ad
 Some cool YouTube videos on this topic if you want some inspiration! 
 
 - [How-to: Easy "Graphic Design" on Google Slides (for VTubers and Streamers)](https://youtu.be/VoF-Qk_tWgU)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/VoF-Qk_tWgU?si=Oq6xA7nzjOJa_YrR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+<br />
+
 - [How to Make an Overlay for Streaming! Tips for Artists and Gamers!](https://youtu.be/OBXK9qi4j8E)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/OBXK9qi4j8E?si=tnjsR4h5s7Vm36nb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+<br />
+
 - [Create Minimal Stream Overlays From Scratch! (Without Photoshop!)](https://youtu.be/Rs75ovA7Fvo)
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/Rs75ovA7Fvo?si=esfZ1dELAKot2GaZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

src/pages/guide/stream-widgets.mdx

@@ -4,8 +4,17 @@ layout: "../../layouts/GuideLayout.astro"
 description: Stream widgets for your coworking streams!
 order: 4
 ---
+import { Image } from 'astro:assets';
+import MohMinimalTimer from "./_images/widgets/moh-minimal-timer.webp";
+import MayukoPomo from "./_images/widgets/mayuko-pomo.webp";
+import Pomofocus from "./_images/widgets/pomofocus.webp";
+import RythonTaskBot from "./_images/widgets/rythontaskbot.webp";
+import MultiTask from "./_images/widgets/multitask.webp";
+import SuperSweetBot from "./_images/widgets/supersweetbot.webp";
+import PixelChat from "./_images/music-and-audio/pixelchat.webp";
+import SixKLabs from "./_images/music-and-audio/6klabs.webp";
 
-# Stream widgets
+# Stream Widgets
 
 Widgets to add to your stream! 
 
@@ -19,7 +28,9 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also
 
 #### [MohFocus' Minimal Pomo Timer 🔗](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer)
 
-[![Minimal Pomo Timer](/images/widgets/moh-minimal-timer.webp)](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer)
+<a href="https://github.com/mohamed-tayeh/Minimal-Pomo-Timer">
+    <Image src={MohMinimalTimer} alt="Minimal Pomo Timer" loading="eager"/>
+</a>
 
 - Twitch only
 - Easy to setup and customize 
@@ -28,7 +39,9 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also
 
 #### [Mayuko's Pomodoro Countdown Timer 🔗](https://github.com/hellomayuko/Pomodoro-Countdown)
 
-<a href="https://github.com/hellomayuko/Pomodoro-Countdown"><img src="/images/widgets/mayuko-pomo.webp" alt="Mayuko Pomodoro Countdown Timer" loading="lazy" /></a>
+<a href="https://github.com/hellomayuko/Pomodoro-Countdown">
+  <Image src={MayukoPomo} alt="Mayuko Pomodoro Countdown Timer" loading="lazy" />
+</a>
 
 - Easy to setup and customize
 - Interactive through OBS
@@ -37,7 +50,7 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also
 
 #### [Pomofocus 🔗](https://pomofocus.io/)
 
-<a href="https://pomofocus.io/"><img src="/images/widgets/pomofocus.webp" alt="pomofocus" loading="lazy" /></a>
+<a href="https://pomofocus.io/"><Image src={Pomofocus} alt="pomofocus" loading="lazy" /></a>
 
 - You can also add tasks to do on the web page
 
@@ -49,7 +62,9 @@ A task list widget is a great way to keep track of your tasks along with your ch
 
 ### [Rython Task Bot 🔗](https://github.com/liyunze-coding/chat-task-tic-overlay-infinity)
 
-<a href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity"><img src="/images/widgets/rythontaskbot.webp" alt="Rython Task Bot" loading="lazy" /></a>
+<a href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity">
+<Image src={RythonTaskBot} alt="Rython Task Bot" loading="lazy" />
+</a>
 
 - Free and open source
 - Easy to use, setup and customize
@@ -59,7 +74,9 @@ A task list widget is a great way to keep track of your tasks along with your ch
 
 ### [Multi-task Widget 🔗](https://ko-fi.com/s/94e7e8dc81)
 
-<a href="https://ko-fi.com/s/94e7e8dc81"><img src="/images/widgets/multitask.webp" alt="Multi Task Widget" loading="lazy" /></a>
+<a href="https://ko-fi.com/s/94e7e8dc81">
+<Image src={MultiTask} alt="Multi Task Widget" loading="lazy" />
+</a>
 
 - $30 USD on ko-fi
 - Easy to use, setup and customize
@@ -70,7 +87,9 @@ A task list widget is a great way to keep track of your tasks along with your ch
 
 ### [Super Sweet Bot 🔗](https://www.patreon.com/super_sweet_bot)
 
-<a href="https://www.patreon.com/super_sweet_bot"><img src="/images/widgets/supersweetbot.webp" alt="Super Sweet Bot" loading="lazy" /></a>
+<a href="https://www.patreon.com/super_sweet_bot">
+<Image src={SuperSweetBot} alt="Super Sweet Bot" loading="lazy" />
+</a>
 
 - €3 / month
 - Comes with a Pomo Timer
@@ -85,7 +104,9 @@ Display what you're playing on Spotify or YouTube Music!
 
 ### [6K Labs 🔗](https://6klabs.com/)
 
-<a href="https://6klabs.com/"><img src="/images/music-and-audio/6klabs.webp" alt="6K Labs widget" loading="lazy" /></a>
+<a href="https://6klabs.com/">
+<Image src={SixKLabs} alt="6K Labs widget" loading="lazy" />
+</a>
 
 - Easy to implement
 - Available for YouTube Music and Spotify
@@ -100,7 +121,9 @@ Display what you're playing on Spotify or YouTube Music!
 
 ### [Pixel Chat 🔗](https://pixelchat.tv/)
 
-<a href="https://pixelchat.tv/"><img src="/images/music-and-audio/pixelchat.webp" alt="Pixel Chat widget" loading="lazy" /></a>
+<a href="https://pixelchat.tv/">
+<Image src={PixelChat} alt="Pixel Chat widget" loading="lazy" />
+</a>
 
 - Shows what you're playing via Spotify, Apple Music etc.
 - Includes other widgets for shoutouts, captions and counters

src/pages/tutorials/Ad-manager.mdx

@@ -0,0 +1,31 @@
+---
+title: Ad manager
+layout: "../../layouts/GuideLayout.astro"
+description: Add an ad manager to your OBS dock!
+order: 2
+---
+import { Image } from 'astro:assets';
+import DocksToCustomDocks from "./_images/ad-manager/Docks-to-Custom-Docks.webp";
+
+# Ad Manager
+
+You can add an Ad Manager to your OBS dock to easily manage your ads. This is especially useful to keep track of your ad breaks and to be able to run an ad break with a single click.
+
+---
+
+## How to setup an Ad Manager
+
+1. Open OBS and go to the dock where you want to add the Ad Manager.\
+    <Image src={DocksToCustomDocks} alt="Docks to Custom Docks" loading="eager" />
+
+2. Under "Dock Name", enter "Ad Manager" or any other name you want.
+
+3. Under URL, enter the following URL: 
+
+    `https://dashboard.twitch.tv/popout/u/YOUR_USERNAME_HERE/stream-manager/quick-actions`
+
+    Replace `YOUR_USERNAME_HERE` with your Twitch username.
+
+4. Click "Apply".
+
+5. Under "Docks", you can now see the Ad Manager dock. Click it to open the Ad Manager dock.

src/pages/tutorials/OBS.mdx

@@ -0,0 +1,42 @@
+---
+title: How to setup OBS
+layout: "../../layouts/GuideLayout.astro"
+description: Learn how to setup OBS!
+order: 0
+---
+import { Image } from 'astro:assets';
+import StudyWithMeYT from "./_images/obs/study-with-me-youtube-live.webp";
+
+# How to setup OBS
+
+Although OBS may seem intimidating, it's very easy to navigate around after you finish setting up and familiarize yourself with interface! 
+
+---
+
+## YouTube Tutorial for OBS Twitch setup
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/9idPREZzWpE?si=y0uiex8T7P83E14W&amp;start=147" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+Check out this video from Hammer Dance on how to setup OBS! Note that this is targeted towards those who want to stream to Twitch!
+
+--- 
+
+## How to setup for study streams
+
+If you want a simple, step-by-step guide on how to get started with study streaming on YouTube, check out [this article from Girl Knows Tech](https://girlknowstech.com/study-with-me-obs/)! 
+
+<a href="https://girlknowstech.com/study-with-me-obs/"> 
+<Image src={StudyWithMeYT} alt="Study with me YouTube"  width="500"/>
+</a>
+
+Although it's made for YouTube, the steps are very similar for Twitch!
+
+---
+
+If you want more options for different widgets and layouts, check out the other pages in this guide!
+
+- <a href="/guide/stream-widgets" class="no-target-blank">Stream Widgets</a>
+- <a href="/guide/stream-layouts" class="no-target-blank">Stream Layouts</a>
+
+--- 
+

src/pages/tutorials/Simulcast.mdx

@@ -0,0 +1,14 @@
+---
+title: Simulcasting
+layout: "../../layouts/GuideLayout.astro"
+description: Stream to multiple streaming platforms with a free plugin!
+order: 1
+---
+
+# How to simulcast to multiple platforms
+
+Simulcasting is a great way to reach a wider audience by streaming to multiple platforms at once!
+
+---
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/QJWCFQ2K52w?si=aWEDurQHsCUNovCF&amp;start=106" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

src/pages/tutorials/closed-captions.md

@@ -0,0 +1,16 @@
+---
+title: Closed Captions
+layout: "../../layouts/GuideLayout.astro"
+description: Add Closed Captions to your streams!
+order: 1
+---
+
+# Closed Captions (OBS Plugin)
+
+Did you know? Captions can greatly improve engagement, as [80% of viewers prefer video subtitles](https://www.kapwing.com/resources/subtitle-statistics/). 
+
+Add some captions to your stream to improve accessibility and engagement for your streams! 
+
+---
+
+<iframe width="560" height="315" src="https://www.youtube.com/embed/cQzJL9uoIbg?si=5PLtcikPKFha_fzR&amp;start=98" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

src/pages/tutorials/sery-bot.mdx

@@ -0,0 +1,28 @@
+---
+title: Sery bot
+layout: "../../layouts/GuideLayout.astro"
+description: Add a layer of protection for your streams!
+order: 1
+---
+import { Image } from 'astro:assets';
+import SeryBot from "./_images/sery-bot/sery_bot.webp";
+
+# Sery Bot
+
+Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers.
+
+---
+
+<Image src={SeryBot} alt="Sery bot" width="500" />
+
+## [Sery Bot Carrd 🔗](https://serycodes.carrd.co/)
+
+Click [here](https://serycodes.carrd.co/) for more information about Sery Bot.
+
+## How to setup?
+
+1. Click on https://sery.bot/auth, to authorize with your Twitch account.
+2. After authorizing, you should be redirected to the Sery_bot's stream.
+3. Enter `/mod Sery_bot` in your own chat.
+4. Enter `!join` in the chat to join the bot to your channel.
+5. You can now use the bot in your channel! Try `!followban` in Sery_bot's chat to confirm.

tailwind.config.cjs

@@ -5,7 +5,14 @@ module.exports = {
         extend: {
             backgroundImage: (theme) => ({
                 "hero-gradient":
-                    "linear-gradient(to right, #3F84D8, aquamarine, #C65BCF)",
+                    "linear-gradient(to right, #3F84D8, aquamarine)",
+                "cowo-pink": "#FF7782",
+                secondary: "#171717",
+                primary: "#fafafa",
+                "primary-green": "#8DECB4",
+                "dark-green": "#45513f",
+                "primary-blue": "#3F84D8",
+                "light-blue": "#B3C6F9",
             }),
             keyframes: {
                 rotate: {
@@ -51,8 +58,10 @@ module.exports = {
                 "cowo-pink": "#FF7782",
                 secondary: "#171717",
                 primary: "#fafafa",
-                "primary-green": "#88D47D",
+                "primary-green": "#8DECB4",
+                "dark-green": "#45513f",
                 "primary-blue": "#3F84D8",
+                "light-blue": "#B3C6F9",
             },
             spacing: {
                 auto: "auto",
@@ -88,13 +97,13 @@ module.exports = {
                 },
                 h1: {
                     marginBottom: "0.5rem",
-                    fontSize: "2.25rem",
+                    fontSize: "2.75rem",
                     fontWeight: "bold",
                     scrollMarginTop: "3.7rem",
                 },
                 h2: {
                     marginBottom: "0.5rem",
-                    marginTop: "1.25rem",
+                    marginTop: "1.5rem",
                     fontSize: "1.875rem",
                     fontWeight: "bold",
                     scrollMarginTop: "3.7rem",
@@ -117,11 +126,12 @@ module.exports = {
                     marginBottom: "0.5rem",
                     marginTop: "0.5rem",
                     fontFamily: "system-ui",
+                    fontSize: "1rem",
                     lineHeight: "1.75rem",
                 },
                 hr: {
                     margin: "2.5rem 0",
-                    borderColor: "#718096",
+                    // borderColor: "#add19c",
                 },
                 "ul, ol": {
                     listStylePosition: "outside",
@@ -146,8 +156,8 @@ module.exports = {
                 code: {
                     borderRadius: "0.375rem",
                     backgroundColor: "#323232",
-                    padding: "0.25rem 0.5rem",
-                    fontFamily: "monospace, courier-new",
+                    padding: "0.5rem 0.5rem",
+                    fontFamily: "monospace",
                     fontSize: "0.875rem",
                 },
             });