added code blocks

astro.config.mjs

@@ -1,12 +1,13 @@
 import { defineConfig } from "astro/config";
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
-
 import react from "@astrojs/react";
 
+import expressiveCode from "astro-expressive-code";
+
 // https://astro.build/config
 export default defineConfig({
-    integrations: [tailwind(), mdx(), react()],
+    integrations: [tailwind(), expressiveCode(), mdx(), react()],
     server: {
         port: 3000,
     },

package.json

@@ -18,11 +18,11 @@
         "@types/react-dom": "^18.2.22",
         "@vercel/analytics": "^1.0.1",
         "astro": "^4.4.1",
+        "astro-expressive-code": "^0.33.5",
         "clsx": "^2.1.0",
         "framer-motion": "^11.0.12",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "react-router-dom": "^6.22.3",
         "tailwind-merge": "^2.2.1",
         "tailwindcss": "^3.4.1"
     },

src/components/blocks/Hero.astro

@@ -35,7 +35,8 @@ const items = [
 	},
 	{
 		title: "Credits",
-		description: "Support the people behind this website! Drop them",
+		description:
+			"Support the people behind this website! Drop them a follow and show some support 🙌",
 		link: "/credits",
 	},
 ];

src/components/blocks/navBar.astro

@@ -5,7 +5,7 @@ import VerticalNav from "./verticalNav.astro";
 <div
 	transition:persist
 	transition:name="navbar"
-	class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 border-b border-solid border-gray-800 h-[var(--header-height)]"
+	class="w-full backdrop-blur fixed top-0 text-white bg-secondary/75 z-[60] text-lg py-3 h-[var(--header-height)]"
 >
 	<div
 		class="mx-auto relative px-3 lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
@@ -69,9 +69,7 @@ import VerticalNav from "./verticalNav.astro";
 			>
 		</div>
 		<!-- Theme Toggle (COMING SOON) -->
-		<div class="flex lg:flex-1 justify-end">
+		<div class="flex lg:flex-1 justify-end"></div>
-			<!-- <button id="theme-toggle" type="button" class=""></button> -->
-		</div>
 	</div>
 </div>
 <aside
@@ -83,49 +81,49 @@ import VerticalNav from "./verticalNav.astro";
 </aside>
 
 <script>
-	// function updateDarkModeIcon() {
+	function updateDarkModeIcon() {
-	//     const darkModeToggle = document.querySelector("#theme-toggle");
+		const darkModeToggle = document.querySelector("#theme-toggle");
-	//     const isDarkMode = localStorage.getItem("theme") === "dark";
+		const isDarkMode = localStorage.getItem("theme") === "dark";
-	//     const moonSVG = `
+		const moonSVG = `
-	// 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-	// 		<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+				<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
-	// 	</svg>
+			</svg>
-	// 	`;
+			`;
-	//     const sunSVG = `
+		const sunSVG = `
-	// 	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
+			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
-	// 		<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
+				<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
-	// 	</svg>
+			</svg>
-	// 	`;
+			`;
 
-	//     if (darkModeToggle) {
+		if (darkModeToggle) {
-	//         if (isDarkMode) {
+			if (isDarkMode) {
-	//             darkModeToggle.innerHTML = moonSVG;
+				darkModeToggle.innerHTML = moonSVG;
-	//         } else {
+			} else {
-	//             darkModeToggle.innerHTML = sunSVG;
+				darkModeToggle.innerHTML = sunSVG;
-	//         }
+			}
-	//     }
+		}
-	// }
+	}
-	// const darkModeToggle = document.querySelector("#theme-toggle");
+	const darkModeToggle = document.querySelector("#theme-toggle");
 
-	// if (!localStorage.getItem("theme")) {
+	if (!localStorage.getItem("theme")) {
-	//     localStorage.setItem("theme", "dark");
+		localStorage.setItem("theme", "dark");
-	// }
+	}
 
-	// if (darkModeToggle) {
+	if (darkModeToggle) {
-	//     darkModeToggle.addEventListener("click", () => {
+		darkModeToggle.addEventListener("click", () => {
-	//         const isDarkMode = localStorage.getItem("theme") === "dark";
+			const isDarkMode = localStorage.getItem("theme") === "dark";
 
-	//         if (isDarkMode) {
+			if (isDarkMode) {
-	//             localStorage.setItem("theme", "light");
+				localStorage.setItem("theme", "light");
-	//             document.documentElement.classList.remove("dark");
+				document.documentElement.setAttribute("data-theme", "light");
-	//         } else {
+			} else {
-	//             localStorage.setItem("theme", "dark");
+				localStorage.setItem("theme", "dark");
-	//             document.documentElement.classList.add("dark");
+				document.documentElement.setAttribute("data-theme", "dark");
-	//         }
+			}
 
-	//         updateDarkModeIcon();
+			updateDarkModeIcon();
-	//     });
+		});
-	// }
+	}
 
 	// JavaScript for toggling the menu
 	document.addEventListener("DOMContentLoaded", function () {
@@ -147,8 +145,4 @@ import VerticalNav from "./verticalNav.astro";
 			});
 		});
 	});
-
-	// window.onload = function () {
-	//     updateDarkModeIcon();
-	// };
 </script>

src/layouts/BlogsLayout.astro

@@ -29,18 +29,4 @@ import VerticalNav from "../components/blocks/verticalNav.astro";
 			</div>
 		</div>
 	</div>
-
-	<style is:global>
-		span.code-highlight {
-			@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
-		}
-
-		code {
-			@apply rounded-md bg-[#323232] px-3 py-3;
-		}
-
-		/* img {
-            @apply h-[100px] max-w-full;
-        } */
-	</style>
 </Layout>

src/layouts/GuideLayout.astro

@@ -32,65 +32,6 @@ const { frontmatter, headings } = Astro.props;
 			</div>
 		</div>
 	</div>
-
-	<style is:global>
-		h1 {
-			@apply mb-2 text-4xl font-bold;
-		}
-
-		h2 {
-			@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
-		}
-
-		h3 {
-			@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
-		}
-
-		h4 {
-			@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
-		}
-
-		p {
-			@apply mb-2 mt-2 font-[system-ui] leading-6;
-		}
-
-		hr {
-			@apply my-10 border-gray-500;
-		}
-
-		ul {
-			@apply list-outside list-disc leading-7;
-		}
-
-		blockquote {
-			@apply my-4 border-l-4 border-gray-500 pl-4;
-		}
-
-		a {
-			@apply inline-block text-blue-400 hover:underline;
-		}
-
-		ul ul {
-			@apply mb-2 ml-5 list-[circle];
-		}
-
-		ul li {
-			@apply mb-1 ml-5;
-		}
-
-		span.code-highlight {
-			@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
-		}
-
-		code {
-			@apply rounded-md bg-[#323232] px-3 py-3;
-		}
-
-		/* img {
-            @apply h-[100px] max-w-full;
-        } */
-	</style>
-
 	<script is:inline>
 		// make all <a> attributes have target="_blank" except for Table of Contents
 		document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {

src/layouts/Layout.astro

@@ -85,13 +85,6 @@ const { title, description } = Astro.props;
 				text-decoration: none;
 			}
 
-			p code {
-				word-break: break-all; /* This will allow the URL to break at any character */
-				display: block; /* Ensures the entire URL is on its own line */
-				width: 100%; /* Make sure the code element takes up the full width of its container */
-				overflow-x: auto;
-			}
-
 			blockquote {
 				@apply my-4 border-l-4 border-gray-500 pl-4;
 			}
@@ -100,6 +93,38 @@ const { title, description } = Astro.props;
 				@apply inline-block text-blue-400 hover:underline;
 			}
 
+			h1 {
+				@apply mb-2 text-4xl font-bold;
+			}
+
+			h2 {
+				@apply mb-2 mt-5 scroll-mt-[calc(20px+var(--header-height))] text-3xl font-bold;
+			}
+
+			h3 {
+				@apply mb-2 mt-5 scroll-mt-[calc(17px+var(--header-height))] text-2xl font-bold;
+			}
+
+			h4 {
+				@apply mb-2 mt-5 scroll-mt-[calc(14px+var(--header-height))] text-xl font-bold;
+			}
+
+			p {
+				@apply mb-2 mt-2 font-[system-ui] leading-6;
+			}
+
+			hr {
+				@apply my-10 border-gray-500;
+			}
+
+			ul {
+				@apply list-outside list-disc leading-7;
+			}
+
+			code {
+				@apply rounded-md bg-[#323232] px-1 py-1 font-["Lucida_Console",monospace,courier-new] text-sm;
+			}
+
 			ul,
 			ol {
 				@apply list-outside  leading-7;

src/pages/guide/general-tips.md

@@ -31,9 +31,11 @@ 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
 

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

@@ -35,7 +35,7 @@ As with any social media platform, you may encounter trolls and bots while you s
 
 - ### Promotional bots
 
-    This is when several bot accounts post in your chat with the same message, usually advertising a "get famous quick" scam. To stop this, you can put your chat in follower only mode by typing <span class="code-highlight">/followers</span> in your chat. Usually they will go away quickly and you can type <span class="code-highlight">/followersoff</span> to change it back.
+    This is when several bot accounts post in your chat with the same message, usually advertising a "get famous quick" scam. To stop this, you can put your chat in follower only mode by typing `/followers` in your chat. Usually they will go away quickly and you can type `/followersoff` to change it back.
 
     You can also make use of the AutoMod feature by banning phrases like "bigfollow", so their messages get automatically removed. You can find this in your Dashboard Settings → Moderation. If you would like, you can also block hyperlinks in the same page or a stream bot (NightBot, StreamElements, etc.)
 

src/pages/guide/stream-layout.md

@@ -37,14 +37,15 @@ The Noun Project is a website that aggregates and catalogs symbols that are crea
 
 ## Fonts
 
-### [DaFont](https://www.dafont.com/)
+### [DaFont 🔗](https://www.dafont.com/)
 
 DaFont is a popular online platform where you can download fonts for various purposes. Whether you’re working on a design project, creating digital art, or just want to add a unique touch to your documents.
 
-### [Google Fonts](https://fonts.google.com/)
+### [Google Fonts 🔗](https://fonts.google.com/)
 
 Google Fonts is a service provided by Google that offers a wide selection of high-quality web fonts for use in web projects.
 
+---
 
 ## Principles of Grouping
 
@@ -64,3 +65,12 @@ There are five main principles of grouping:
 
 These principles are used extensively in various fields like design, art, and advertising. By understanding how we group things visually, designers can create layouts that are clear, organized, and engaging.
 
+---
+
+## Videos 
+
+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)
+- [How to Make an Overlay for Streaming! Tips for Artists and Gamers!](https://youtu.be/OBXK9qi4j8E)
+- [Create Minimal Stream Overlays From Scratch! (Without Photoshop!)](https://youtu.be/Rs75ovA7Fvo)

src/pages/index.astro

@@ -8,7 +8,7 @@ import BlurBackground from "../components/ui/BlurBackground.astro";
 	title="Get started with Coworking streams"
 	description="A guide for new and existing coworking streamers!"
 >
-	<div class="relative overflow-hidden">
+	<div class="relative overflow-hidden h-fit min-h-screen">
 		<BlurBackground />
 		<div class="flex justify-center items-start pb-10">
 			<Hero />