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];
+	let markdownFiles = [...getStartedFiles, ...guideFiles, ...tutorialFiles];
-	const navigation: Navigation = {};
+	let navigation: Navigation = {};
 
 	for (const file of markdownFiles) {
-		const filePath = file.url;
+		let filePath = file.url;
-		const [_, category] = filePath!.split("/");
+		let [_, category] = filePath!.split("/");
-		const formattedCategory = formatTitle(category);
+		let formattedCategory = formatTitle(category).toLowerCase();
-		const formattedTitle = file.frontmatter.title;
+		let formattedTitle = file.frontmatter.title;
-		const order = file.frontmatter.order ?? 0;
+		let order = file.frontmatter.order ?? 0;
 
 		if (!navigation[formattedCategory]) {
 			navigation[formattedCategory] = [];
@@ -43,18 +48,18 @@ export async function setup() {
 		});
 	}
 
-	// sort by "order"
+	// Create a new navigation object with the desired order
-	const sortedNavigation: Navigation = {};
+	let orderedNavigation: Navigation = {};
-	Object.keys(navigation)
+	for (let category of categoryOrder) {
-		.sort()
+		if (navigation[category.toLowerCase()]) {
-		.forEach((key) => {
+			orderedNavigation[category] = navigation[
-			sortedNavigation[key] = navigation[key].sort(
+				category.toLowerCase()
-				(a, b) => a.order - b.order
+			].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
+				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-white" : "text-gray-400"}`}
+                    ${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
+				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-white" : "text-gray-400"}`}
+                    ${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
+				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-white" : "text-gray-400"}`}
+                    ${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.add("text-black", "bg-primary-green");
-				link.classList.remove("text-gray-400");
+				link.classList.remove(
+					"text-gray-400",
+					"bg-none",
+					"hover:text-white"
+				);
 			} else {
-				link.classList.remove("text-white");
+				link.classList.remove("text-black", "bg-primary-green");
-				link.classList.add("text-gray-400");
+				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="mx-auto px-2 max-w-[1440px]">
-		<div class="flex flex-col lg:grid lg:grid-cols-10">
+		<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="mx-auto px-2 max-w-[1440px]">
-		<div class="flex flex-col lg:grid lg:grid-cols-10">
+		<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)
+Image source: [Seiji (Twitch)](https://twitch.tv/Seiji)
-
-> ### 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/)
 
 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:
+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 [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.
 
 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

@@ -31,33 +31,33 @@ Closed captions open your stream to a wider audience by including viewers who ar
 
 - ### Have control of your ad timings
 
-```
+    ```
-https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel
+    https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel
-```
+    ```
 
-If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "\{\{channel\}\}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard.
+    If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "\{\{channel\}\}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard.
 
 - ### Have a consistent stream schedule
 
-A regular stream schedule lets your viewers know exactly when to expect you to go live. When viewers can anticipate your streams, they are more likely to make time to watch, increasing the chances of them tuning in and engaging with your content.
+    A regular stream schedule lets your viewers know exactly when to expect you to go live. When viewers can anticipate your streams, they are more likely to make time to watch, increasing the chances of them tuning in and engaging with your content.
 
-Regularly scheduled streams also help you attract and retain viewers. When new viewers find your stream, they are more likely to follow if they see a consistent schedule. Additionally, existing followers are more likely to continue watching if they know when to catch your streams.
+    Regularly scheduled streams also help you attract and retain viewers. When new viewers find your stream, they are more likely to follow if they see a consistent schedule. Additionally, existing followers are more likely to continue watching if they know when to catch your streams.
 
 - ### Social Media Marketing
 
-Having good social media marketing allows you to reach a broader audience beyond your live streams. Utilizing platforms like Instagram and YouTube (even YouTube Shorts!) enables you to promote your content, engage with potential viewers and build a loyal following, increasing visibility and attracting new members to your community.
+    Having good social media marketing allows you to reach a broader audience beyond your live streams. Utilizing platforms like Instagram and YouTube (even YouTube Shorts!) enables you to promote your content, engage with potential viewers and build a loyal following, increasing visibility and attracting new members to your community.
 
 - ### Use stream layouts that make your stream stand out
 
-On Twitch, people would go through the browse section with a frame of your stream as the thumbnail. If you want to increase the chances of people clicking onto your stream, you should make your stream more attractive.
+    On Twitch, people would go through the browse section with a frame of your stream as the thumbnail. If you want to increase the chances of people clicking onto your stream, you should make your stream more attractive.
 
 - ### Interact with Chat
 
-Interacting with your chat is crucial to grow your community because it fosters a sense of engagement and connection with your audience. By acknowledging and responding to viewers, you create a welcoming and inclusive atmosphere, encouraging viewers to stay, become regulars, and invite others, ultimately leading to organic community growth.
+    Interacting with your chat is crucial to grow your community because it fosters a sense of engagement and connection with your audience. By acknowledging and responding to viewers, you create a welcoming and inclusive atmosphere, encouraging viewers to stay, become regulars, and invite others, ultimately leading to organic community growth.
 
 - ### Network with other streamers
 
-Having good networking opens up collaboration opportunities, cross-promotion, and exposure to each other’s audiences. By forming connections within the streaming community, you can tap into a larger pool of viewers, gain credibility, and foster a supportive environment that encourages mutual growth and success.
+    Having good networking opens up collaboration opportunities, cross-promotion, and exposure to each other’s audiences. By forming connections within the streaming community, you can tap into a larger pool of viewers, gain credibility, and foster a supportive environment that encourages mutual growth and success.
 
 ---
 
@@ -65,20 +65,20 @@ Having good networking opens up collaboration opportunities, cross-promotion, an
 
 - ### Don't get distracted by chat
 
-One concern for many new coworking streamers is that they are worried about ignoring chat. This is the hard part! It's important (and very tempting) to interact with your community but it's also important you are able to get your work done. That's the point after all!. Remember you're there to work so try not to feel guilty about ignoring new people - it's useful to have mods who can do this for you instead. And you can always chat with them in your breaktime! If you're too busy to answer questions, it can be useful to have a command like !muted to let new people know that you are trying to focus and will chat later. 
+    One concern for many new coworking streamers is that they are worried about ignoring chat. This is the hard part! It's important (and very tempting) to interact with your community but it's also important you are able to get your work done. That's the point after all!. Remember you're there to work so try not to feel guilty about ignoring new people - it's useful to have mods who can do this for you instead. And you can always chat with them in your breaktime! If you're too busy to answer questions, it can be useful to have a command like !muted to let new people know that you are trying to focus and will chat later. 
 
 - ### Don't self promote
 
-Hopping on chat and mention anything about your own stream is considered self-promotion and can be considered rude, especially when no permission was granted.
+    Hopping on chat and mention anything about your own stream is considered self-promotion and can be considered rude, especially when no permission was granted.
 
 - ### Don't worry about view count
 
-Just focus on your work.
+    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.
+    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.
 
-It is recommended to blur it, or make your Display Capture source very small until no text content is readable.
+    It is recommended to blur it, or make your Display Capture source very small until no text content is readable.
 
 ---

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",
+                    padding: "0.5rem 0.5rem",
-                    fontFamily: "monospace, courier-new",
+                    fontFamily: "monospace",
                     fontSize: "0.875rem",
                 },
             });