ready for deployment

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "",
+  "name": "coworking-guide",
   "type": "module",
   "version": "0.0.1",
   "scripts": {

public/favicon.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
-    <style>
-        path { fill: #000; }
-        @media (prefers-color-scheme: dark) {
-            path { fill: #FFF; }
-        }
-    </style>
-</svg>

src/components/Card.astro

@@ -1,63 +0,0 @@
----
-export interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 0.6rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
-</style>

src/components/navBar.astro

@@ -0,0 +1,227 @@
+<div class="w-full">
+	<label
+		class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg"
+	>
+		<span class="top-bun"></span>
+		<input type="checkbox" />
+		<span class="bottom-bun"></span>
+	</label>
+	<aside class="sidebar flex z-20">
+		<nav class="flex flex-col capitalize">
+			<a
+				class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/">home</a
+			>
+			<a
+				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/about">about</a
+			>
+			<a
+				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/tips">tips</a
+			>
+			<a
+				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/specs">specs</a
+			>
+			<a
+				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/bots">bots</a
+			>
+			<a
+				class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
+				href="/widgets">widgets</a
+			>
+		</nav>
+	</aside>
+	<div
+		id="navbar"
+		class="absolute top-0 w-full hidden md:flex justify-center bg-gray-800 shadow-md shadow-gray-900"
+	>
+		<div
+			id="navbar-div"
+			class="pt-2 mr-5 capitalize w-full pb-1 flex flex-row justify-center text-lg"
+		>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/">home</a
+			>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/about">about</a
+			>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/tips">tips</a
+			>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/specs">specs</a
+			>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/bots">bots</a
+			>
+			<a
+				class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
+				href="/widgets">widgets</a
+			>
+		</div>
+	</div>
+</div>
+
+<style>
+	:root {
+		--bar-width: 30px;
+		--bar-height: 4px;
+		--hamburger-gap: 6px;
+		--foreground: #111827;
+		--background: white;
+		--hamburger-margin: 20px;
+		--animation-timing: 200ms ease-in-out;
+		--hamburger-height: calc(
+			var(--bar-height) * 3 + var(--hamburger-gap) * 2
+		);
+	}
+
+	.hamburger-menu {
+		--x-width: calc(var(--hamburger-height) * 1.41421356237);
+
+		translate: 0 -200px;
+		flex-direction: column;
+
+		gap: var(--hamburger-gap);
+		width: max-content;
+		top: var(--hamburger-margin);
+		right: var(--hamburger-margin);
+		z-index: 30;
+		cursor: pointer;
+		background: var(--foreground);
+
+		rotate: 180deg;
+
+		transition: translate var(--animation-timing);
+	}
+
+	.hamburger-menu input:focus-visible {
+		border: 1px solid var(--background);
+		box-shadow: 0 0 0 1px var(--foreground);
+	}
+
+	.hamburger-menu input,
+	.hamburger-menu span {
+		content: "";
+		width: var(--bar-width);
+		height: var(--bar-height);
+		background-color: white;
+		border-radius: 9999px;
+		transform-origin: left center;
+		transition: opacity var(--animation-timing),
+			width var(--animation-timing), rotate var(--animation-timing),
+			translate var(--animation-timing),
+			background-color var(--animation-timing);
+	}
+
+	.hamburger-menu input {
+		appearance: none;
+		padding: 0;
+		margin: 0;
+		outline: none;
+		pointer-events: none;
+	}
+
+	.hamburger-menu .top-bun.active {
+		rotate: 45deg;
+		width: var(--x-width);
+		translate: 0 calc(var(--bar-height) / -2);
+	}
+
+	.hamburger-menu .bottom-bun.active {
+		rotate: -45deg;
+		width: var(--x-width);
+		translate: 0 calc(var(--bar-height) / 2);
+	}
+
+	.hamburger-menu input:checked {
+		opacity: 0;
+		width: 0;
+	}
+
+	.sidebar {
+		position: fixed;
+		top: 0;
+		right: 0;
+		transition: translate var(--animation-timing);
+		translate: 100%;
+		padding: 0.5rem 1rem;
+		padding-top: calc(
+			var(--hamburger-height) + var(--hamburger-margin) + 1rem
+		);
+		background-color: var(--foreground);
+		color: var(--background);
+		max-width: 10rem;
+		min-height: 100vh;
+	}
+</style>
+
+<script defer is:inline>
+	const sidebar = document.querySelectorAll(".sidebar-url");
+	const hamburger = document.querySelector(".hamburger-menu");
+	const checkbox = document.querySelector("input");
+
+	const topBun = document.querySelector(".top-bun");
+	const bottomBun = document.querySelector(".bottom-bun");
+
+	const openSideBar = () => {
+		checkbox.checked = true;
+		document.querySelector(".sidebar").style.translate = "0";
+		topBun.classList.add("active");
+		bottomBun.classList.add("active");
+	};
+
+	const closeSideBar = () => {
+		checkbox.checked = false;
+		document.querySelector(".sidebar").style.translate = "100%";
+		topBun.classList.remove("active");
+		bottomBun.classList.remove("active");
+	};
+
+	// for each sidebar url, if clicked on, uncheck the checkbox
+	sidebar.forEach((url) => {
+		url.addEventListener("click", () => {
+			closeSideBar();
+		});
+	});
+
+	if (window.innerWidth < 768) {
+		hamburger.style.translate = "0 0";
+	}
+
+	window.addEventListener("scroll", () => {
+		if (window.scrollY > 50 || window.innerWidth < 768) {
+			hamburger.style.translate = "0 0";
+		} else {
+			hamburger.style.translate = "0 -200px";
+			closeSideBar();
+		}
+	});
+
+	// if window is resized, check if it's less than 768px
+	window.addEventListener("resize", () => {
+		if (window.innerWidth < 768) {
+			hamburger.style.translate = "0 0";
+		} else {
+			hamburger.style.translate = "0 -200px";
+			closeSideBar();
+		}
+	});
+
+	// if checked, translate the sidebar
+	checkbox.addEventListener("change", () => {
+		if (checkbox.checked) {
+			openSideBar();
+		} else {
+			closeSideBar();
+		}
+	});
+</script>

src/layouts/Layout.astro

@@ -1,4 +1,6 @@
 ---
+import NavBar from "../components/navBar.astro";
+
 export interface Props {
 	title: string;
 }
@@ -12,7 +14,7 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
@@ -31,40 +33,7 @@ const { title } = Astro.props;
 		<title>{title}</title>
 	</head>
 	<body>
-		<nav
+		<NavBar />
-			class="fixed w-full flex flex-row items-center justify-center pl-4 pr-8 py-2 bg-gray-800 shadow-md shadow-gray-900 h-12"
-		>
-			<ul class="flex flex-row justify-start items-center list-none">
-				<a href="/">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Home
-					</li>
-				</a>
-				<a href="/about">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						About
-					</li>
-				</a>
-				<a href="/specs">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Specs
-					</li>
-				</a>
-				<a href="/overlays">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Overlays
-					</li>
-				</a>
-			</ul>
-		</nav>
 		<slot />
 	</body>
 </html>

src/layouts/Markdown.astro

@@ -1,9 +1,13 @@
 ---
+import NavBar from "../components/navBar.astro";
+
 export interface Props {
+	frontmatter: {
 		title: string;
+	};
 }
 
-const { title } = Astro.props;
+const { frontmatter } = Astro.props;
 ---
 
 <!DOCTYPE html>
@@ -12,7 +16,7 @@ const { title } = Astro.props;
 		<meta charset="UTF-8" />
 		<meta name="description" content="Astro description" />
 		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+		<link rel="icon" type="image/x-icon" href="/favicon.ico" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 		<link
@@ -28,47 +32,14 @@ const { title } = Astro.props;
 			rel="stylesheet"
 		/>
 		<meta name="generator" content={Astro.generator} />
-		<title>{title}</title>
+		<title>{frontmatter.title}</title>
 	</head>
 	<body>
-		<nav
+		<NavBar />
-			class="fixed w-full flex flex-row items-center justify-center pl-4 pr-8 py-2 bg-gray-800 shadow-md shadow-gray-900 h-12"
-		>
-			<ul class="flex flex-row justify-start items-center list-none">
-				<a href="/">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Home
-					</li>
-				</a>
-				<a href="/about">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						About
-					</li>
-				</a>
-				<a href="/specs">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Specs
-					</li>
-				</a>
-				<a href="/overlays">
-					<li
-						class="text-lg text-gray-100 px-3 py-1 mx-3 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors duration-500 ease-in-out"
-					>
-						Overlays
-					</li>
-				</a>
-			</ul>
-		</nav>
 		<div class="pt-12 w-full flex flex-col justify-center items-center">
-			<div class="w-5/6 md:w-3/4 lg:w-2/3 py-10">
+			<article class="w-5/6 md:w-3/4 lg:w-2/3 py-10">
 				<slot />
-			</div>
+			</article>
 		</div>
 	</body>
 </html>
@@ -112,6 +83,28 @@ const { title } = Astro.props;
 	}
 
 	summary {
-		@apply font-bold text-xl;
+		@apply font-bold text-2xl py-2 cursor-pointer;
+
+		-webkit-touch-callout: none; /* iOS Safari */
+		-webkit-user-select: none; /* Safari */
+		-khtml-user-select: none; /* Konqueror HTML */
+		-moz-user-select: none; /* Old versions of Firefox */
+		-ms-user-select: none; /* Internet Explorer/Edge */
+		user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+	}
+
+	details {
+		@apply my-4;
+	}
+
+	ul li a {
+		@apply hover:underline underline-offset-2 hover:text-blue-400;
+	}
+
+	.hyperlink {
+		font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+			Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+			sans-serif;
 	}
 </style>

src/pages/about.astro

@@ -59,22 +59,21 @@ import Layout from "../layouts/Layout.astro";
 			</h2>
 			<p class="w-4/5 lg:w-1/2">
 				This guide has been created to help out new (and old)
-				coworking streamers.
+				coworking streamers! It contains a bunch of resources that
+				you can use to enhance your stream, such as interactive
+				overlays and useful bots.
 			</p>
 		</div>
 		<div
 			class="w-full h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
 		>
 			<h2 class="font-bold text-2xl mb-5">
-				Why did you and other people make these resources open
+				Why should I stream myself working?
-				source?
 			</h2>
 			<p class="w-4/5 lg:w-1/2">
-				Personally, I'm a huge fan of open source software, and I
+				Streaming yourself working is a great way to stay
-				believe that open source is the future. I want to contribute
+				accountable and productive. It's also a great way to grow
-				to the open source community, and I hope that these overlays
+				your following and meet new people!
-				will help you get started with your own coworking or study
-				stream!
 			</p>
 		</div>
 	</div>

src/pages/bots.md

@@ -0,0 +1,42 @@
+---
+title: Bots
+layout: "../layouts/Markdown.astro"
+---
+
+# Twitch Bots
+
+Twitch bots are a great way to increase engagement for your viewers and improve your streaming experience. They can also help you manage your stream and chat more effectively. Here are some bots you can use for your stream!
+
+\(All of these bots are free to use!\)
+
+---
+
+<a href="https://streamelements.com/overlays" target="_blank" class="font-bold text-2xl hover:underline">StreamElements</a>
+
+<a href="https://streamelements.com/overlays" target="_blank" class="hover:underline">StreamElements</a> is a great all-in-one tool for streamers. They have a chatbot that you can use to manage your chat and add commands. You can also use it to create overlays and alerts for your stream.
+
+---
+
+<a href="https://serycodes.carrd.co/" target="_blank" class="font-bold text-2xl hover:underline">Nightbot</a>
+
+<a href="https://serycodes.carrd.co/" target="_blank" class="hover:underline">Nightbot</a> is a chatbot that you can use to manage your chat. It has a lot of features and is easy to use. You can also use it to create custom commands for your stream.
+
+---
+
+<a href="https://serycodes.carrd.co/" target="_blank" class="font-bold text-2xl hover:underline">Sery Bot</a>
+
+<a href="https://serycodes.carrd.co/" target="_blank" class="hover:underline">Sery Bot</a> is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers.
+
+---
+
+<a href="https://twitch.tv/MohCitrus/about" target="_blank" class="font-bold text-2xl hover:underline">MohCitrus</a>
+
+<img src="/assets/mohcitrus.webp" width="300" class="mb-1">
+
+<a href="https://twitch.tv/MohCitrus/about" target="_blank" class="hover:underline">MohCitrus</a> is a translator bot made by <a href="https://twitch.tv/MohFocus" target="_blank" class="underline hover:text-blue-400">MohFocus</a>! It can translate messages of viewers to any language via commands!
+
+---
+
+## Custom bots
+
+Interested in making your own bot? Want to look for a programming project to work on? Check out <a href="https://github.com/instafluff/comfyjs" target="_blank" class="underline">Comfy.JS</a> made by Instafluff!

src/pages/index.astro

@@ -25,7 +25,7 @@ import Layout from "../layouts/Layout.astro";
 			class="w-full lg:w-1/3 h-full flex flex-col justify-center items-center"
 		>
 			<a
-				href="/overlays"
+				href="/widgets#task-list-widget"
 				class="preview w-full flex items-center justify-center"
 			>
 				<div
@@ -209,6 +209,16 @@ import Layout from "../layouts/Layout.astro";
 							</div>
 							<div class="mr-1">:</div> release new Lofi EP
 						</div>
+						<div
+							class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
+						>
+							<div
+								class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
+							>
+								Warpyn
+							</div>
+							<div class="mr-1">:</div> release new song cover
+						</div>
 						<div
 							class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
 						>
@@ -227,8 +237,8 @@ import Layout from "../layouts/Layout.astro";
 							>
 								Extelso
 							</div>
-							<div class="mr-1">:</div> architecturing a new
+							<div class="mr-1 max-w-[55%]">:</div> show off
-							project
+							stream layout
 						</div>
 						<div
 							class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
@@ -258,7 +268,7 @@ import Layout from "../layouts/Layout.astro";
 							>
 								pinsaregood
 							</div>
-							<div class="mr-1">:</div> be instagram influencer
+							<div class="mr-1">:</div> be an instagram influencer
 						</div>
 						<div
 							class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"

src/pages/overlays.astro

@@ -1,29 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
----
-
-<!-- 
-    - timer
-        https://github.com/liyunze-coding/streamodoro
-        https://github.com/mohamed-tayeh/Minimal-Pomo-Timer
-    - task list
-        https://github.com/mohamed-tayeh/Task-List
-
-    - other (locale, spotify, etc)
-        https://github.com/mohamed-tayeh/forest-overlay
-        https://github.com/mohamed-tayeh/locale-overlay
--->
-<Layout title="Coworking Overlays">
-	<div class="pt-12 w-full h-full flex flex-col">
-		<div
-			class="w-full h-fit text-white pt-5 pb-5 flex flex-col items-center bg-gray-900"
-		>
-			<h1 class="font-bold text-4xl">Overlays</h1>
-		</div>
-		<div
-			class="w-full h-full text-white pt-5 flex flex-col items-center justify-center"
-		>
-			<h1 class="font-bold text-4xl">Task List</h1>
-		</div>
-	</div>
-</Layout>

src/pages/specs.md

@@ -10,40 +10,69 @@ layout: "../layouts/Markdown.astro"
 
 # Specifications
 
-In this section, we will discuss the minimum computer specification requirements for Coworking and Study streams. The minimum specifications should be suffice for a comfortable streaming and viewing experience.
+In this section, we will discuss the minimum computer specification requirements for coworking streams. The minimum specifications should be suffice for a comfortable streaming and viewing experience.
 
-## CPU
+<details>
+<summary>CPU</summary>
 
 The CPU (Central Processing Unit) is the brain of the computer. The better the CPU, the faster the computer can process data and instructions.
 
 **The ideal CPU for streaming**: A quad-core processor, preferably with a clock speed of 3.0 GHz or higher, such as an Intel Core i5 or AMD Ryzen 5.
 
-## GPU (optional)
+</details>
+
+<details>
+<summary>GPU (optional)</summary>
 
 The GPU (Graphics Processing Unit) is the component that renders images on the screen. The better the GPU, the better the image quality and the higher the frame rate. A dedicated GPU is not required for streaming, but it is recommended for a better viewing experience.
 
 **The ideal GPU for streaming**: A dedicated graphics card with at least 4GB of VRAM, such as an NVIDIA GeForce GTX 1050 or AMD Radeon RX 560.
 
-## RAM
+</details>
 
-RAM (Random Access Memory) is the component that stores data and instructions for the CPU to process. The more RAM a computer has, the more data and instructions it can store at once.
+<details>
+<summary>RAM</summary>
+
+RAM (Random Access Memory) is the component that stores data and instructions for the CPU to process. The more RAM a computer has, the better it is at multitasking.
 
 **The ideal RAM for streaming**: At least 8GB of RAM, preferably 16GB or more.
 
-## Storage
+</details>
+
+<details>
+<summary>Storage</summary>
 
 Storage is the component that stores data and instructions for the CPU to process. The more storage a computer has, the more data and instructions it can store at once.
 
 **The ideal storage for streaming**: At least 256GB of SSD storage, preferably 512GB or more.
 
-## Internet speed
+</details>
 
-The better the internet connection, the better the streaming experience. You can check your internet speed at [speedtest.net](https://www.speedtest.net/).
+<details>
+<summary>Internet speed</summary>
+
+The better the internet connection, the better the streaming experience. You can check your internet speed at <a href="https://www.speedtest.net" target="_blank" class="underline hover:text-blue-400">speedtest.net</a>.
 
 **The ideal internet for streaming**: At least 5 Mbps upload speed, preferably 10 Mbps or more.
 
-## Peripherals
+</details>
+
+<details>
+
+<summary>Peripherals</summary>
 
 Peripherals are the components that connect to the computer to provide additional functionality.
 
 **The ideal peripherals for streaming**: A webcam, a microphone, and a headset.
+
+</details>
+
+<details>
+
+<summary>Bitrate</summary>
+
+There are some online calculators you can use to determine the ideal bitrate based off your computer specs and preferred output (screen resolution, frames per second)
+
+Check out this <a href="https://www.reddit.com/r/Twitch/comments/2dz7ru/bitrates_resolutions_and_quality/" target="_blank" class="underline hover:text-blue-400">in depth guide from Reddit</a> to learn more!
+
+</details>

src/pages/tips.md

@@ -0,0 +1,42 @@
+---
+title: Tips
+layout: "../layouts/Markdown.astro"
+---
+
+# Tips
+
+Here are some tips for coworking streamers!
+
+-    [To mute or not to mute?](#to-mute-or-not-to-mute)
+-    [Should I leave chat opened while working?](#should-i-leave-chat-opened-while-working)
+-    [Fixed schedule](#fixed-schedule)
+-    [Social media](#social-media)
+-    [Chat commands for coworking streams](#chat-commands-for-coworking-streams)
+
+---
+
+## To mute or not to mute?
+
+Most streamers mute themselves during the work sessions because it makes it easier for the viewers to focus. However it's also possible to leave the mic on for keyboard asmr and general "office noise" which many people enjoy - ask your community what they prefer!
+
+## Should I leave chat opened while working?
+
+Many new coworking streamers often worry about neglecting chat. It's a tough balancing act! On one hand, you want to engage with your community. But on the other hand, you need to focus on your work. After all, that's the whole point of streaming while coworking! So, try not to feel guilty about not always responding to new people immediately. It's actually quite helpful to have mods who can handle the chat interactions for you. And hey, don't forget that you can always have a nice chat with them during your break time!
+
+Having commands such as "!muted" or "!speak" can come in handy. It lets newcomers know that you're currently focused and will catch up with them later. Trust me, as time goes by, you'll attract viewers who are also there to work, so the pressure to chat constantly during work hours will naturally ease up. So hang in there!
+
+## Fixed schedule
+
+It is often recommended that streamers in general stick to a regular schedule because it allows your community to know when to join your channel. While it's definitely beneficial, it's not a requirement and it's totally fine to be flexible with your streams. If you do have irregular stream times, you might want to think about posting on social media to let your followers know you're live.
+
+## Social media
+
+Speaking of social media, it's a great way to let your followers know when you're live! You can also use it to post about your upcoming streams, share your work, and interact with your community. It's a good idea to have a Discord server for your community as well. It's a great way to keep in touch with your viewers and get to know them better!
+
+## Chat commands for coworking streams
+
+Chat commands are very useful since you won't be chatting much during the work timer. Some common chat commands you may see include ones that introduce your stream, provide a brief introduction to the pomodoro method (if you use it), or a muted command that may explain why you may be muted (e.g: !welcome !timer !pomo !muted). You may also like to add a command to tell your viewers what you're working on that day (!today !work !study) - this adds a nice personal touch and you can use it to encourage other's to talk about what they're working on too.
+
+# References
+
+Please take a look at <a href="https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c" target="_blank" class="underline underline-offset-2 hover:text-blue-400">A Coworking Streamer Cheat Sheet</a> for more information!

src/pages/widgets.md

@@ -0,0 +1,140 @@
+---
+title: Widgets
+layout: "../layouts/Markdown.astro"
+---
+
+# Widgets
+
+These overlays can be useful for coworking streamers to increase engagement for their viewers!
+
+---
+
+## Pomodoro timer
+
+A pomodoro timer is a great way to keep track of your work sessions. It's also a great way to let your viewers know when you're taking a break. You can use a pomodoro timer overlay to display the current work session and break time.
+
+### Browser Source
+
+<ul>
+    <li>
+        <a href="https://github.com/mohamed-tayeh/Minimal-Pomo-Timer" target="_blank" class="hyperlink">https://github.com/mohamed-tayeh/Minimal-Pomo-Timer</a> *
+    </li>
+    <li>
+        <a href="https://github.com/njallam/stream-pomodoro" target="_blank" class="hyperlink">https://github.com/njallam/stream-pomodoro</a>
+    </li>
+    <li>
+        <a href="https://ecard.enter-media.org/widgets/" target="_blank" class="hyperlink">https://ecard.enter-media.org/widgets/</a>
+    </li>
+    <li>
+        <a href="https://github.com/hellomayuko/Pomodoro-Countdown" target="_blank" class="hyperlink">https://github.com/hellomayuko/Pomodoro-Countdown</a>
+    </li>
+    <li>
+        <a href="https://pixelchat.tv/" target="_blank" class="hyperlink">https://pixelchat.tv/</a> *
+    </li>
+    <li>
+        <a href="https://obstutorials.com/countdown-timer-for-twitch-and-streamelements/" target="_blank" class="hyperlink">https://obstutorials.com/countdown-timer-for-twitch-and-streamelements/</a> *
+    </li>
+    <li>
+        <a href="https://github.com/liyunze-coding/streamodoro" target="_blank" class="hyperlink">https://github.com/liyunze-coding/streamodoro</a> *
+    </li>
+</ul>
+
+\* can be called through commands in chat
+
+### Window Capture
+
+You can also add timers by using 3rd part websites and then using _window capture_ on your streaming programme!
+
+<ul>
+    <li>
+        <a href="https://pomofocus.io/" target="_blank" class="hyperlink">https://pomofocus.io/</a>
+    </li>
+    <li>
+        <a href="https://www.timeanddate.com/timer/" target="_blank" class="hyperlink">https://www.timeanddate.com/timer/</a>
+    </li>
+    <li>
+        <a href="https://pomodor.app/timer" target="_blank" class="hyperlink">https://pomodor.app/timer</a>
+    </li>
+    <li>
+        <a href="https://tomato-timer.com/" target="_blank" class="hyperlink">https://tomato-timer.com/</a>
+    </li>
+    <li>
+        <a href="https://pomodoro-tracker.com/" target="_blank" class="hyperlink">https://pomodoro-tracker.com/</a>
+    </li>
+</ul>
+
+Do check beforehand the volumes for the alarms, as sometimes they may be startling or distracting for viewers if not expected!
+
+---
+
+## Task list widget
+
+<div class="flex flex-row mb-5">
+    <img src="/assets/moh-task-list.webp" class="h-[300px] rounded-md mr-5">
+    <img src="/assets/ryanpython-task-list.webp" class="h-[300px] rounded-md">
+</div>
+
+A task list widget is a great way to keep track of your tasks along with your viewers! For these overlays, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed.
+
+### Browser Source
+
+<ul>
+    <li>
+        <a href="https://github.com/liyunze-coding/chat-task-tic-overlay" target="_blank" class="hyperlink">
+        https://github.com/liyunze-coding/chat-task-tic-overlay
+        </a>
+    </li>
+    <li>
+        <a href="https://github.com/mohamed-tayeh/Task-List" target="_blank" class="hyperlink">
+        https://github.com/mohamed-tayeh/Task-List
+        </a>
+    </li>
+</ul>
+
+<img src="/assets/multi-task.webp" class="h-[300px] rounded-md mb-5 mt-10">
+
+If you're interested in a task list overlay that allows you to add multiple tasks at a time, check out <a href="https://www.twitch.tv/RyanPython" target="_blank" class="underline hover:text-blue-400">RyanPython's stream</a>!
+
+---
+
+## Spotify widget
+
+A Spotify widget is a great way to let your viewers know what you're listening to!
+
+### Browser Source:
+
+<a href="https://pixelchat.tv/" target="_blank" class="font-bold underline hover:text-blue-400">Pixel Chat</a>: An easy-to-implement widget that shows what you're playing via Spotify, Apple Music, etc. Bonus: includes other widgets like one for shout outs, captions, and counters.
+
+<img src="/assets/pixelchat.webp" width="500" class="mb-10">
+
+<a href="https://spotify.aidenwallis.co.uk/" target="_blank" class="font-bold underline hover:text-blue-400">Aiden Wallis</a>: A widget that shows what you're playing via Spotify. Bonus: you can add a command like !song to your bot (Nightbot, StreamElements, etc.) that outputs the current song.
+
+<img src="/assets/aidenwallis.webp" width="500" class="mb-10">
+
+<a href="https://github.com/liyunze-coding/spotify-widget-for-obs" target="_blank" class="font-bold underline hover:text-blue-400">RyanPython</a>: A widget that shows what you're playing via Spotify. You can customize the widget to your liking using CSS.
+
+<img src="/assets/ryanpython_spotify.webp" width="500" class="mb-10">
+
+---
+
+## General Purpose
+
+For alerts, chat, and other widgets, it is recommended to use <a href="https://streamelements.com/overlays" target="_blank" class="underline hover:text-blue-400">StreamElements</a>!
+
+#### Resources to get started with StreamElements:
+
+-    <a href="https://support.streamelements.com/en/articles/31-quick-start-guide" target="_blank" class="font-bold underline hover:text-blue-400">Quick-Start Guide</a>
+-    <a href="https://www.youtube.com/watch?v=YctwM_51i44" target="_blank" class="font-bold underline hover:text-blue-400">10min setup guide by Hammer Dance</a>
+-    <a href="https://streamersquare.com/getting-started-with-streamelements/" target="_blank" class="hyperlink font-bold underline hover:text-blue-400">Getting started with StreamElements</a>
+
+---
+
+## Custom widget
+
+Want to make your own widget? Check out <a href="https://github.com/instafluff/comfyjs" target="_blank" class="underline">Comfy.JS</a> made by Instafluff!
+
+P.S. It requires some knowledge of Javascript, HTML and CSS
+
+---
+
+Once again, thanks to the creators of the <a href="https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c" target="_blank" class="underline underline-offset-2 hover:text-blue-400">Coworking Streamer Cheat Sheet</a> for the reference!

tailwind.config.cjs

@@ -25,12 +25,15 @@ module.exports = {
 				ul: {
 					listStyleType: "disc",
 					listStylePosition: "inside",
-				},
+					marginBottom: theme("margin.2"),
-				a: {
-					textDecoration: "underline",
 				},
 				p: {
 					marginBottom: theme("margin.6"),
+					lineHeight: theme("lineHeight.7"),
+				},
+				hr: {
+					marginTop: theme("margin.6"),
+					marginBottom: theme("margin.6"),
 				},
 			});
 		},