removed blog, optimised images

README.md

@@ -29,7 +29,6 @@
   - [Frontmatter](#frontmatter)
     - [Guide Content](#guide-content)
     - [Independent Pages](#independent-pages)
-    - [Blog Post](#blog-post)
 
 ---
 
@@ -95,22 +94,3 @@ description:
 - `layout`: Path to layout file
 - `description`: Description of the content
 
-### Blog Post
-
-```
----
-heading: 
-subheading: 
-author: 
-slug: spirit-city 
-pubDate: 1970-01-01T0:00:00
----
-```
-
-- `heading`: the main title
-- `subheading`: the tagline of the blog post
-- `author`: name / username of author
-- `slug`: desired URL slug
-- `pubDate`: Published date (ISO 8601)
-
----

src/components/blocks/BlogPostPreview.astro

@@ -1,48 +0,0 @@
----
-function timeAgo(date: Date) {
-	const dateObject = new Date(date);
-	const seconds = Math.floor(
-		(new Date().getTime() - dateObject.getTime()) / 1000
-	);
-	let interval = Math.floor(seconds / 31536000);
-
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " year ago" : " years ago");
-	}
-	interval = Math.floor(seconds / 2592000);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " month ago" : " months ago");
-	}
-	interval = Math.floor(seconds / 86400);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " day ago" : " days ago");
-	}
-	interval = Math.floor(seconds / 3600);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " hour ago" : " hours ago");
-	}
-	interval = Math.floor(seconds / 60);
-	if (interval > 1) {
-		return interval + (interval === 1 ? " minute ago" : " minutes ago");
-	}
-	return (
-		Math.floor(seconds) + (seconds === 1 ? " second ago" : " seconds ago")
-	);
-}
-
-const { title, tagline, pubDate, url } = Astro.props;
----
-
-<a
-	href={url}
-	class="no-target-blank hover:no-underline hover:-translate-y-1 shadow-xl transition-all duration-300 w-full"
->
-	<div class="bg-[#303338] text-white
-    px-5 py-3
-	w-full
-    rounded-xl">
-		<h1 class="text-2xl font-bold">{title}</h1>
-		<p class="text-base">{tagline}</p>
-		<p class="text-sm text-gray-400">{timeAgo(new Date(pubDate))}</p>
-	</div>
-</a>

src/components/blocks/Hero.astro

@@ -28,10 +28,10 @@ const items = [
 		link: "/groups",
 	},
 	{
-		title: "Blog",
+		title: "Moderation and Trolls",
 		description:
-			"Take a look at some blog posts regarding the coworking community!",
-		link: "/blog",
+			"Having a good moderation team is important for coworking streamers",
+		link: "/guide/moderation-and-trolls",
 	},
 	{
 		title: "Credits",

src/components/blocks/navBar.astro

@@ -58,10 +58,6 @@ import SearchModal from "../ui/SearchModal.astro";
 				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
 				href="/groups">Groups</a
 			>
-			<a
-				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
-				href="/blog">Blog</a
-			>
 			<a
 				class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
 				href="/credits">Credits</a

src/components/blocks/verticalNav.astro

@@ -128,15 +128,6 @@ const { showHome } = Astro.props;
 				Groups
 			</a>
 		</div>
-		<div class="mb-2">
-			<a
-				href="/blog"
-				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>
-		</div>
 		<div class="mb-2">
 			<a
 				href="/credits"

src/content/config.ts

@@ -1,23 +0,0 @@
-// Import utilities from `astro:content`
-import { z, defineCollection } from "astro:content";
-// Define a `type` and `schema` for each collection
-const postsCollection = defineCollection({
-    type: "content",
-    schema: z.object({
-        heading: z.string(),
-        subheading: z.string()?.optional(),
-        pubDate: z.date(),
-        author: z.string(),
-        image: z
-            .object({
-                url: z.string(),
-                alt: z.string(),
-            })
-            ?.optional(),
-        tags: z.array(z.string())?.optional(),
-    }),
-});
-// Export a single `collections` object to register your collection(s)
-export const collections = {
-    posts: postsCollection,
-};

src/content/posts/1-Spirit-City.md

@@ -1,44 +0,0 @@
----
-heading: "Spirit City: Lofi Sessions"
-subheading: Where Productivity Meets Cozy Vibes
-author: RythonDev
-slug: spirit-city
-pubDate: 2024-04-18T4:10:00
----
-
-In the ever-growing world of productivity apps and techniques, Spirit City: Lofi Sessions offers a unique and delightful twist. Forget the harsh red timers and sterile to-do lists. Here, you cultivate focus amidst a charming virtual world bathed in calming lo-fi beats and populated by friendly spirits. 
-
-## A Gamified Oasis for Focus
-
-Developed by Mooncube Games, Spirit City: Lofi Sessions isn't your typical productivity tool. It's a gamified experience, transforming the act of getting things done into a visually appealing and engaging adventure.  Imagine a cozy room, customizable to your heart's content, where you can unwind and tackle your tasks simultaneously. This is your haven in Spirit City.  
-
-## Unleash Your Inner Decorator
-
-The room is your canvas. Spruce it up with a variety of furniture, plants, and decorations.  Want a minimalist aesthetic conducive to intense concentration? Done. Craving a vibrant and playful space to spark creativity? No problem.  The options cater to diverse preferences, allowing you to personalize your environment for maximum focus flow.
-
-## Meet Your Spirit Companions
-
-One of the most captivating aspects of Spirit City is the presence of adorable, collectable spirits. These ethereal companions aren't just cute additions to your room; they provide a sense of purpose within the game's focus-driven framework.  As you complete tasks in the real world, your spirits level up, unlocking new customization options and deepening the connection between your virtual and actual productivity.  
-
-## Beyond the Aesthetics: Practical Tools for Productivity
-
-While the visuals and atmosphere are undeniably captivating, Spirit City offers a robust toolkit for actual productivity, such as:
-
-* **Task Management:** Create and manage to-do lists directly within the game, seamlessly integrating your virtual and real-world tasks.
-* **Focus Timers:** Utilize built-in focus timers to structure your workday and prevent procrastination. 
-* **Pomodoro Technique Integration:**  For fans of the Pomodoro Technique, Spirit City provides a gamified version of this popular time management method. 
-* **Background Ambience:**  The ever-present (non-copyrighted) lo-fi soundtrack creates a calming and focused atmosphere, perfect for drowning out distractions and promoting concentration. 
-
-## A Community of Focused Folks
-
-Spirit City fosters a community of like-minded individuals striving for productivity.  Follow productivity streamers playing the game to connect with others who share your goals.  Sharing tips, celebrating accomplishments, and holding each other accountable can significantly boost your overall motivation.
-
-## Is Spirit City Right for You?
-
-If you're tired of traditional productivity apps and yearn for a more engaging and stress-free approach to getting things done, then Spirit City: Lofi Sessions might be the game-changer you've been looking for.  It offers a unique blend of customization, gamification, and a focus-oriented environment, all wrapped in a charming and visually appealing package.  So, put on your headphones, fire up Spirit City, and embark on a productivity adventure unlike any other. 
-
-<div class="mt-10">
-
-by [RythonDev](https://twitch.tv/RythonDev)
-
-</div>

src/layouts/BlogPostLayout.astro

@@ -1,35 +0,0 @@
----
-import Layout from "./Layout.astro";
-import TableOfContent from "../components/blocks/TableOfContent.astro";
-import VerticalNav from "../components/blocks/verticalNav.astro";
-
-const { frontmatter, headings } = Astro.props;
----
-
-<Layout title={frontmatter.heading} description={frontmatter.subheading}>
-	<div class="mx-auto px-4 sm:px-6 max-w-7xl">
-		<div class="flex flex-col lg:grid lg:grid-cols-10">
-			<!-- vertical navbar -->
-			<div class="lg:col-span-2" 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]"
-				>
-					<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-20 pt-8">
-						<slot />
-					</div>
-					<div
-						class="col-span-2 pt-8 hidden lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
-					>
-						<!-- TOC -->
-						<TableOfContent headings={headings} />
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</Layout>

src/layouts/BlogsLayout.astro

@@ -1,25 +0,0 @@
----
-import Layout from "./Layout.astro";
-import VerticalNav from "../components/blocks/verticalNav.astro";
----
-
-<Layout title={Astro.props.title} description={Astro.props.description}>
-	<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 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:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
-				>
-					<VerticalNav />
-				</aside>
-			</div>
-			<div class="lg:col-span-8 pt-8">
-				<slot />
-			</div>
-		</div>
-	</div>
-</Layout>

src/pages/blog/index.astro

@@ -1,26 +0,0 @@
----
-import BlogsLayout from "../../layouts/BlogsLayout.astro";
-import BlogPost from "../../components/blocks/BlogPostPreview.astro";
-import { getCollection } from "astro:content";
-
-const allPosts = await getCollection("posts");
----
-
-<BlogsLayout
-	title="Blog Posts"
-	description="A collection of blog posts, related to coworking, studying, streaming and many more!"
->
-	<h1 class="mb-5">Blog Posts</h1>
-	<div>
-		{
-			allPosts.map((post) => (
-				<BlogPost
-					url={`/blog/posts/${post.slug}/`}
-					title={post.data.heading}
-					tagline={post.data.subheading}
-					pubDate={post.data.pubDate}
-				/>
-			))
-		}
-	</div>
-</BlogsLayout>

src/pages/blog/posts/[...slug].astro

@@ -1,74 +0,0 @@
----
-import { getCollection } from "astro:content";
-import BlogPostLayout from "../../../layouts/BlogPostLayout.astro";
-import { Image } from "astro:assets";
-
-function timeAgo(date: Date) {
-	const dateObject = new Date(date);
-	const seconds = Math.floor(
-		(new Date().getTime() - dateObject.getTime()) / 1000
-	);
-	let interval = Math.floor(seconds / 31536000);
-
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " year ago" : " years ago");
-	}
-	interval = Math.floor(seconds / 2592000);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " month ago" : " months ago");
-	}
-	interval = Math.floor(seconds / 86400);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " day ago" : " days ago");
-	}
-	interval = Math.floor(seconds / 3600);
-	if (interval >= 1) {
-		return interval + (interval === 1 ? " hour ago" : " hours ago");
-	}
-	interval = Math.floor(seconds / 60);
-	if (interval > 1) {
-		return interval + (interval === 1 ? " minute ago" : " minutes ago");
-	}
-	return (
-		Math.floor(seconds) + (seconds === 1 ? " second ago" : " seconds ago")
-	);
-}
-
-export async function getStaticPaths() {
-	const blogEntries = await getCollection("posts");
-	return blogEntries.map((entry) => ({
-		params: { slug: entry.slug },
-		props: { entry },
-	}));
-}
-
-const { entry } = Astro.props;
-const { Content, headings } = await entry.render();
----
-
-<BlogPostLayout frontmatter={entry.data} headings={headings}>
-	<h1>{entry.data.heading}</h1>
-	<h2 class="font-normal text-lg">{entry.data.subheading}</h2>
-	<div class="flex justify-start items-start gap-3">
-		<p class="text-base font-normal text-gray-200">
-			By {entry.data.author}
-		</p>
-		<p class="text-base font-normal text-gray-400">
-			Published {timeAgo(new Date(entry.data.pubDate))}
-		</p>
-	</div>
-
-	{
-		entry.data.image && (
-			<Image
-				src={entry.data.image.url}
-				alt={entry.data.image.alt}
-				class="mt-5 mb-5"
-				width="700"
-				height="400"
-				loading="eager"
-			/>
-		)
-	}
-	<Content />
-</BlogPostLayout>

src/pages/blog/posts/index.astro

@@ -1,3 +0,0 @@
----
-Astro.redirect("../../");
----

src/pages/credits/index.mdx

@@ -4,6 +4,8 @@ layout: "../../layouts/GuideLayout.astro"
 description: Credits to the people behind this website!
 path: "/src/pages/credits/index.md"
 ---
+import { Image } from 'astro:assets';
+import RythonDev from "./_images/rythondev.webp"
 
 # Credits
 
@@ -11,7 +13,7 @@ Credits to the wonderful team of people behind this guide!
 
 ---
 
-<img src="/images/credits/rythondev.webp" alt="RythonDev" class="rounded-lg" width="300" />
+<Image src={RythonDev} alt="RythonDev" width="200" height="200" />
 
 ## RythonDev
 
@@ -37,6 +39,3 @@ An amazing resource for this guide!
 
 [![Website](https://img.shields.io/badge/Website-fc626f?logoColor=000&style=for-the-badge)](https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c/)
 
-<!-- REFERENCES FOR BADGES/ICONS -->
-<!-- https://badges.pages.dev/ -->
-<!-- https://shields.io/badges -->

src/pages/get-started/introduction.mdx

@@ -22,7 +22,7 @@ A brief introduction to coworking streams! Let's keep each other accountable ^^
 
 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.
+> 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 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!
 
@@ -94,21 +94,13 @@ Task widgets offer an extra layer of accountability for the streamer and chatter
 
 ## How can I find these streams?
 
-The recommended way of searching for coworking streams are using the tags! 
+Recently, Twitch has introduced the official Co-working & Studying category! 
+
+- [Co-working & Studying category](https://www.twitch.tv/directory/category/co-working-and-studying)
+
+You can find other co-working or study streams with these tags too! 
 
 - [Coworking tag](https://www.twitch.tv/directory/all/tags/coworking)
 - ["Study with me" tag](https://www.twitch.tv/directory/all/tags/studywithme)
 
-### [Coworking category petition 🔗](https://twitch.uservoice.com/forums/310210-discover/suggestions/46004791-coworking)
-
-<img src="/images/introduction/petition.webp" alt="Coworking and Study category petition" loading="lazy" />
-
-As of March 2024, there isn't an official category. So we want YOU to [SIGN THE PETITION](https://twitch.uservoice.com/forums/310210-discover/suggestions/46004791-coworking) for a "Coworking and Study" category! 
-
-An official coworking category will be beneficial for the community in the following ways:
-
-- Allow coworking and study streamers to stream away from Just Chatting and stream in a less saturated category.
-- Improve discoverability of productivity streamers (big and small creators!)
-- Improve the algorithm to recommend more productivity related streams to users who are interested.
-
 ---

src/pages/groups/index.mdx

@@ -5,6 +5,11 @@ description: Groups you should definitely checkout!
 path: "/src/pages/groups/index.md"
 order: 0
 ---
+import { Image } from 'astro:assets';
+import CEOgang from "./_images/CEOgang.webp";
+import CoworkingCrew from "./_images/coworkingcrew.webp";
+import Erudita from "./_images/erudita.webp";
+import YOUthversity from "./_images/YOUthversity.webp";
 
 # Groups
 
@@ -12,7 +17,9 @@ Communities provide a great way to connect with other streamers and viewers!
 
 ---
 
-[![Coworking Crew](/images/groups/coworkingcrew.webp)](https://www.twitch.tv/team/coworkingcrew/)
+<a href="https://www.twitch.tv/team/coworkingcrew/">
+    <Image src={CoworkingCrew} alt="Coworking Crew" width="400" height="143" loading="eager" />
+</a>
 
 ## [Coworking Crew 🔗](https://www.twitch.tv/team/coworkingcrew/)
 
@@ -20,15 +27,10 @@ The Coworking Crew is a group of co-working streamers who aim to create supporti
 
 ---
 
-[![Erudita](/images/groups/erudita.webp)](https://erudita.me/)
 
-## [Erudita 🔗](https://erudita.me/)
-
-An educational platform suitable for those seeking knowledge. In the community, you have the opportunity to learn alongside others or apply for Erudita membership and share your expertise and passions.
-
----
-
-<a href="https://www.youthversity.org/"><img src="/images/groups/YOUthversity.webp" alt="YOUthversity" loading="lazy" /></a>
+<a href="https://www.youthversity.org/">
+    <Image src={YOUthversity} alt="YOUthversity" width="400" height="143" loading="lazy" />
+</a>
 
 ## [YOUthversity 🔗](https://www.youthversity.org/)
 
@@ -36,18 +38,24 @@ YOUthversity is not only an online space to study together but is dedicated to t
 
 ---
 
-<a href="https://theselfdev.com/"><img src="/images/groups/selfdev.webp" alt="self dev" loading="lazy" /></a>
-
-## [self.dev 🔗](https://theselfdev.com/)
-
-Self.dev is a community of various individuals from different fields come together to share knowledge and grow together. They focus on supporting each other by sharing and creating valuable resources to help each other grow individually.
-
----
-
-<a href="https://studytme.com/"><img src="/images/groups/CEOgang.webp" alt="CEO gang" loading="lazy" /></a>
+<a href="https://studytme.com/">
+    <Image src={CEOgang} alt="CEO gang" width="400" height="143" loading="lazy" />
+</a>
 
 ## [CEO Gang 🔗](https://studytme.com/)
 
 The right place for ambitious people working together and supporting each other! Make friends, learn and work remote!
 
 ---
+
+
+<a href="https://erudita.me/">
+    <Image src={Erudita} alt="Erudita" width="400" height="143" loading="lazy"  />
+</a>
+
+## [Erudita 🔗](https://erudita.me/)
+
+An educational platform suitable for those seeking knowledge. In the community, you have the opportunity to learn alongside others or apply for Erudita membership and share your expertise and passions.
+
+---
+

src/pages/guide/moderation-and-trolls.mdx

@@ -5,6 +5,9 @@ description: Learn how to moderate your coworking streams!
 path: "/src/pages/guide/moderation-and-trolls.md"
 order: 6
 ---
+import { Image } from 'astro:assets';
+import DonationSettings from "./_images/moderation-and-trolls/donation-settings.webp";
+import DonationTroll from "./_images/moderation-and-trolls/donation-troll.webp";
 
 # Moderation and Trolls
 
@@ -55,12 +58,12 @@ As with any social media platform, you may encounter trolls and bots while you s
 
     Go to your [donation page](https://streamlabs.com/dashboard#/donations). There should be a list of names and donations:
 
-    <img src="/images/moderation-and-trolls/donation-troll.webp" alt="Donation troll" loading="lazy" />
+    <Image src={DonationTroll} alt="Donation troll" width="720" height="344" loading="lazy" />
 
-    <br> 
+    <br /> 
     Also in Settings > Donation settings, make sure you've ticked "Login Required":
 
-    <img src="/images/moderation-and-trolls/donation-settings.webp" alt="Donation settings" loading="lazy" />
+    <Image src={DonationSettings} alt="Donation settings" loading="lazy" width="720" height="344"  />
 
 ---
 

src/pages/guide/stream-bots.mdx

@@ -5,6 +5,8 @@ description: Stream bots for your coworking streams!
 path: "/src/pages/guide/stream-bots.md"
 order: 3
 ---
+import { Image } from 'astro:assets';
+import Demo from "./../tutorials/_images/translation-bot/MohCitrus-Demo.webp"
 
 # Stream Bots
 
@@ -22,13 +24,14 @@ Available on:
 
 ![Twitch Badge](https://img.shields.io/badge/Twitch-9146FF?logo=twitch&logoColor=fff&style=for-the-badge)
 
+
 </div>
 
 Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers.
 
 ### [MohCitrus 🔗](https://www.twitch.tv/MohCitrus/about)
 
-![MohCitrus](./_images/bots/mohcitrus.webp)
+<Image src={Demo} alt="MohCitrus" width="400" loading="lazy" />
 
 <div class="flex flex-row gap-2">
 
@@ -37,8 +40,9 @@ Available on:
 ![Twitch Badge](https://img.shields.io/badge/Twitch-9146FF?logo=twitch&logoColor=fff&style=for-the-badge)
 </div>
 
+[CLICK HERE TO LEARN HOW TO SET IT UP 🔗](/tutorials/translation-bot)
 
-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 is a translator bot made by [MohFocus (Twitch)](https://twitch.tv/MohFocus)! It can translate messages of viewers to any language via commands! 
 
 ### [Nightbot 🔗](https://nightbot.tv/)
 

src/pages/guide/stream-layouts.mdx

@@ -94,12 +94,13 @@ Some cool YouTube videos on this topic if you want some inspiration!
 
 <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>
+
+<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/tutorials/translation-bot.mdx

@@ -6,7 +6,8 @@ path: "/src/pages/tutorials/translation-bot.mdx"
 order: 1
 ---
 import { Image } from 'astro:assets';
-import MohCitrus from "./_images/translation-bot/MohCitrus.png"
+import MohCitrus from "./_images/translation-bot/MohCitrus.webp"
+import Demo from "./_images/translation-bot/MohCitrus-Demo.webp"
 
 # Translation Bot
 
@@ -21,7 +22,12 @@ MohCitrus is a bot that can translate messages in your chat.
 <br />
 
 1. Click on [MohCitrus's Twitch page](https://www.twitch.tv/mohcitrus/about).
-2. Hop onto chat.
-3. Type "!join" in chat.
-4. Set MohCitrus as a moderator in your channel by typing `/mod MohCitrus` in your chat.
-5. You can now use the bot in your channel! Try typing `!en que tal` in your chat to confirm.
+2. Hop onto MohCitrus' chat.
+3. Type "!join" in the chat.
+4. Set MohCitrus as a moderator in your channel by typing `/mod MohCitrus` in your own chat.
+
+<br />
+<Image src={Demo} alt="MohCitrus demo" width="500" loading="lazy" />
+
+5. You can now use the bot in your channel! Try typing `!en que tal` in your chat to confirm.
+