+ {items.map((item, idx) => (
+ setHoveredIndex(idx)}
+ onMouseLeave={() => setHoveredIndex(null)}
+ >
+
+ {hoveredIndex === idx && (
+
+
+ {item.title}
+ {item.description}
+
+
+ ))}
+
+ );
+};
+
+export const Card = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+
+ );
+};
+export const CardTitle = ({
+ className,
+ children,
+}: {
+ className?: string;
+ children: React.ReactNode;
+}) => {
+ return (
+
+
+ {children}
+ + {children} +
+ ); +}; +export const CardDescription = ({ + className, + children, +}: { + className?: string; + children: React.ReactNode; +}) => { + return ( ++ {children} +
+ ); +}; diff --git a/src/content/config.ts b/src/content/config.ts new file mode 100644 index 0000000..4962e2f --- /dev/null +++ b/src/content/config.ts @@ -0,0 +1,23 @@ +// 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, +}; diff --git a/src/content/posts/1-Spirit-City.md b/src/content/posts/1-Spirit-City.md new file mode 100644 index 0000000..bc14fec --- /dev/null +++ b/src/content/posts/1-Spirit-City.md @@ -0,0 +1,44 @@ +--- +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. + +
+
+by [RythonDev](https://twitch.tv/RythonDev)
+
+
\ No newline at end of file
diff --git a/src/env.d.ts b/src/env.d.ts
index f964fe0..acef35f 100644
--- a/src/env.d.ts
+++ b/src/env.d.ts
@@ -1 +1,2 @@
+///
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/Markdown.astro b/src/layouts/Markdown.astro
deleted file mode 100644
index 87f439c..0000000
--- a/src/layouts/Markdown.astro
+++ /dev/null
@@ -1,89 +0,0 @@
----
-import Layout from "./Layout.astro";
-
-export interface Props {
- frontmatter: {
- title: string;
- description: string;
- };
-}
-
-const { frontmatter } = Astro.props;
----
-
-
-
-
-
-
-
-
-
-
- 
-
-
-
-
- - What are Coworking & Study streams? -
-- Coworking and study streams are a type of stream where people - work or study together. It's a great way to stay motivated and - productive, especially if you're working! -
-
-
- - How can this guide benefit me? -
-- This guide has been created to help out coworking and study - streamers by providing tips and resources to enhance the - streaming experience! -
-
-
- - Why should I stream myself working? -
-- Streaming yourself working is a great way to stay accountable - and productive. It's also a great way to grow your following and - meet new people! -
-Blog Posts
+
+ {
+ allPosts.map((post) => (
+
+{entry.data.heading}
+{entry.data.subheading}
+
+
+
+ {
+ entry.data.image && (
+ + By {entry.data.author} +
++ Published {timeAgo(new Date(entry.data.pubDate))} +
+
-
-MohCitrus is a translator bot made by MohFocus! 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 Comfy.JS made by Instafluff!
diff --git a/src/pages/credits/index.md b/src/pages/credits/index.md
new file mode 100644
index 0000000..18d0da5
--- /dev/null
+++ b/src/pages/credits/index.md
@@ -0,0 +1,41 @@
+---
+title: Credits
+layout: "../../layouts/GuideLayout.astro"
+description: Credits to the people behind this website!
+---
+
+# Credits
+
+Credits to the wonderful team of people behind this guide!
+
+---
+
+
+
+## RythonDev
+
+Main developer of the project
+
+
+
+[](https://twitch.tv/RythonDev)
+
+[](https://youtube.com/@RythonDev)
+
+[](https://rython.dev/)
+
+[](https://ko-fi.com/rython)
+
+
+
+## Coworking Crew Cheat Sheet
+
+
+
+An amazing resource for this guide!
+
+[](https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c/)
+
+
+
+
\ No newline at end of file
diff --git a/src/pages/get-started/introduction.md b/src/pages/get-started/introduction.md
new file mode 100644
index 0000000..9089dab
--- /dev/null
+++ b/src/pages/get-started/introduction.md
@@ -0,0 +1,113 @@
+---
+title: Introduction
+layout: "../../layouts/GuideLayout.astro"
+description: Introduction to coworking streams!
+order: 0
+---
+
+# Introduction
+
+A brief introduction to coworking streams! Let's keep each other accountable ^^
+
+---
+
+## What are coworking streams?
+
+
+
+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!
+
+---
+
+## What is a "pomodoro"?
+
+
+
+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.
+
+---
+
+## How do people enjoy these streams?
+
+
+
+Image source: [SeijiSoldier (Twitch)](https://twitch.tv/SeijiSoldier)
+
+> ### What are your thoughts on co-working streams?
+
+> I'm not saying I dislike them, but I just want to understand how people enjoy these streams. It's mostly just the streamer doing their work while their cam is facing in front of them. There's nothing much to watch as it's not display captured (understandable since work is confidential).
+>
+> Sometimes, when I chat with them they don't even reply back. They usually have a timer in their overlay and after the timer ends they talk to chat again.
+>
+> Maybe I'm a boomer, but can anyone shed light on why these streams are a thing on Twitch?
+
+Source: [Archived Reddit post](https://www.reddit.com/r/Twitch/comments/t66g15/what_are_your_thoughts_on_coworking_streams/)
+
+Although might seem unconventional to watch someone else work, there are several reasons why viewers enjoy these streams:
+
+- **Accountability and Focus**
+
+ Working from home can be isolating and lead to procrastination. Co-working streams provide a virtual study buddy or colleague, fostering a sense of accountability that viewers can leverage to stay on task. Seeing the streamer working diligently can motivate viewers to do the same.
+
+- **Community and Support**
+
+ The chat function in these streams creates a sense of community. Viewers can discuss their work, ask questions, or simply enjoy the company of others while working. This social interaction can be a welcome change from the solitary nature of remote work.
+
+- **Background Noise and Ambience**
+
+ Some viewers find background noise, like music or light chatter, helpful for concentration. Co-working streams can provide this calming ambience without the distractions of traditional co-working spaces.
+
+- **Learning and Inspiration**
+
+ 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.
+
+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.
+
+---
+
+## What is a task widget?
+
+
+
+If you want to add a task widget to your own stream, check it out in the Widgets section!
+
+A task widget is a widget where users can use commands such as:
+- !task [current task]
+- !todo [current task]
+
+in chat to add their task(s) to the widget, to remind themselves about what they need to focus on at the moment.
+
+Task widgets offer an extra layer of accountability for the streamer and chatters to focus on their current task(s).
+
+---
+
+## How can I find these streams?
+
+The recommended way of searching for coworking streams are using the tags!
+
+- [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)
+
+
+
+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.
+
+---
\ No newline at end of file
diff --git a/src/pages/get-started/pre-requisites.md b/src/pages/get-started/pre-requisites.md
new file mode 100644
index 0000000..6a3504d
--- /dev/null
+++ b/src/pages/get-started/pre-requisites.md
@@ -0,0 +1,54 @@
+---
+title: Pre-requisites
+layout: "../../layouts/GuideLayout.astro"
+description: Pre-requisites for coworking streams!
+order: 1
+---
+
+# Pre-requisites
+
+Get ready for coworking streams!
+
+---
+
+## Pre-requisites (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.
+
+### Hardware
+
+- **Internet Capacity (bitrate)**
+ - 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 [in depth guide from Reddit](https://www.reddit.com/r/Twitch/comments/2dz7ru/bitrates_resolutions_and_quality/) to learn more!
+- **RAM**
+ - The more RAM a computer has, the better it is at multitasking.
+ - Minimum 8GB, 16GB or more is recommended.
+- **CPU**
+ - The better the CPU, the faster the computer can process data and instructions.
+ - clock speed of 3.0 GHz or higher, such as an Intel Core i5 or AMD Ryzen 5.
+- **GPU**
+ - 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.
+ - A dedicated graphics card with at least 4GB of VRAM, such as an NVIDIA GeForce GTX 1050 or AMD Radeon RX 560.
+
+---
+
+## Pre-requisites (Mobile)
+
+Usually, streamers who stream from their phone would use their laptop device to interact with chat!
+
+### Hardware
+
+- **Camera**
+ - Having a camera pointed towards your direction is effective for accountability!
+
+### Software
+
+- **Twitch / YouTube app**
+ - Depending on which platform you intend to stream on.
+
+---
\ No newline at end of file
diff --git a/src/pages/groups.md b/src/pages/groups.md
deleted file mode 100644
index 36fba41..0000000
--- a/src/pages/groups.md
+++ /dev/null
@@ -1,61 +0,0 @@
----
-title: Groups
-layout: "../layouts/Markdown.astro"
-description: Find new communities to join!
----
-
-# Groups
-
-I recommend the following communities to join! They provide a great way to connect with other streamers and viewers!
-
----
-
-Coworking Crew π
-
-
- 
-
-
-The Coworking Crew is a group of co-working streamers who aim to create supportive and motivational live streams for people who are working or studying at home. As a group we help each other out, collaborate on stream, and ultimately find new friends.
-
----
-
-Self.dev π
-
-
- 
-
-
-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.
-
----
-
-YOUthversity π
-
-
- 
-
-
-YOUthversity is not only an online space to study together but is dedicated to the exchange of resources, dialogue, peer-to-peer support, and development.
-
----
-
-Erudita π
-
-
- 
-
-
-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.
-
----
-
-CEO Gang π
-
-
- 
-
-
-The right place for ambitious people working together and supporting each other! Make friends, learn and work remote!
-
----
diff --git a/src/pages/groups/index.md b/src/pages/groups/index.md
new file mode 100644
index 0000000..e8e4ce5
--- /dev/null
+++ b/src/pages/groups/index.md
@@ -0,0 +1,52 @@
+---
+title: Stream groups
+layout: "../../layouts/GuideLayout.astro"
+description: Groups you should definitely checkout!
+order: 0
+---
+
+# Groups
+
+Communities provide a great way to connect with other streamers and viewers!
+
+---
+
+[](https://www.twitch.tv/team/coworkingcrew/)
+
+## [Coworking Crew π](https://www.twitch.tv/team/coworkingcrew/)
+
+The Coworking Crew is a group of co-working streamers who aim to create supportive and motivational live streams for people who are working or studying at home. As a group we help each other out, collaborate on stream, and ultimately find new friends.
+
+---
+
+[](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.
+
+---
+
+
+
+## [YOUthversity π](https://www.youthversity.org/)
+
+YOUthversity is not only an online space to study together but is dedicated to the exchange of resources, dialogue, peer-to-peer support, and development.
+
+---
+
+
+
+## [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.
+
+---
+
+
+
+## [CEO Gang π](https://studytme.com/)
+
+The right place for ambitious people working together and supporting each other! Make friends, learn and work remote!
+
+---
diff --git a/src/pages/guide/emotes.md b/src/pages/guide/emotes.md
new file mode 100644
index 0000000..da665a6
--- /dev/null
+++ b/src/pages/guide/emotes.md
@@ -0,0 +1,31 @@
+---
+title: Emotes
+layout: "../../layouts/GuideLayout.astro"
+description: Learn how to add emotes to your streams!
+order: 5
+---
+
+# Emotes
+
+Stream emotes are like custom emojis specific to a channel, acting as a fun and engaging way for viewers to express emotions, inside jokes, and reactions during a livestream, fostering a sense of community and shared experience.
+
+---
+
+## Channel emotes (Twitch)
+
+When you reach the Twitch Affiliate goal, you can add emotes to your channel for subscribers to use! However, Follower emotes are only available if you have [Instant Upload Privilege](https://help.twitch.tv/s/article/emote-guidelines?language=en_US#instantupload)
+
+## Emote extensions
+
+Donβt understand when your chat says in βKEKWβ? Itβs a common third party Twitch emote! You can add extensions to your channel to add more emotes for your viewers to use. Some popular ones include BetterTTV, FrankerFaceZ and 7TV.
+
+### Browser Extensions
+ - [Download BetterTTV](https://betterttv.com/)
+ - [Download FrankerFaceZ](https://www.frankerfacez.com/)
+ - [Download 7TV](https://7tv.app/)
+
+You wonβt run into any issues using all three extensions at once!
+
+However, if you only want to use one Emote extension, [FrankerFaceZ](https://www.frankerfacez.com/) is probably the best one to go for! It is stable, has special addons through the extension itself for BTTV and 7TV emotes, and has the best customization for twitch as a site!
+
+---
diff --git a/src/pages/guide/general-tips.md b/src/pages/guide/general-tips.md
new file mode 100644
index 0000000..34b85f0
--- /dev/null
+++ b/src/pages/guide/general-tips.md
@@ -0,0 +1,84 @@
+---
+title: General Tips
+layout: "../../layouts/GuideLayout.astro"
+description: General tips for your coworking streams!
+order: 0
+---
+
+# General Tips
+
+General tips for your coworking streams!
+
+---
+
+## Should I 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!
+
+## 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.
+
+## Closed Captions
+
+[MAXIMIZE Your Reach on Twitch with Live Captions](https://youtu.be/cQzJL9uoIbg)
+
+Closed captions open your stream to a wider audience by including viewers who are deaf or hard of hearing, and can even benefit viewers in noisy environments who might miss some dialogue.
+
+---
+
+## Do's
+
+- ### Have control of your ad timings
+
+```
+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.
+
+- ### 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.
+
+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.
+
+- ### 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.
+
+- ### 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.
+
+- ### 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.
+
+---
+
+## Don'ts
+
+- ### 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.
+
+- ### 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.
+
+- ### Don't worry about view count
+
+Just focus on your work.
+
+- ### Avoid using Display Capture
+
+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.
+
+---
\ No newline at end of file
diff --git a/src/pages/guide/moderation-and-trolls.md b/src/pages/guide/moderation-and-trolls.md
new file mode 100644
index 0000000..92b6f37
--- /dev/null
+++ b/src/pages/guide/moderation-and-trolls.md
@@ -0,0 +1,64 @@
+---
+title: Moderation and Trolls
+layout: "../../layouts/GuideLayout.astro"
+description: Learn how to moderate your coworking streams!
+order: 6
+---
+
+# Moderation and Trolls
+
+---
+
+## Moderation
+
+Having a good moderation team is important for coworking streamers, since most of the time we are focused on our own work and not chat! This is why it's particularly important to have a good moderation team to help you out so you don't get distracted.
+
+Consider these three main things when choosing your mods:
+
+- How well do they all get along with each other?
+- What is their availability?
+- Are they good at staying calm and being reasonable?
+
+As well as this, it is ideal if mods are welcoming and active in your community - you can't always be there to say hi to everyone while your working so it's great to have a friendly mod team to welcome new people and answer questions!
+
+:::note
+How you invite your mods is a personal choice! And don't feel bad if you ask someone and they say no - not everyone is up for the job! If you know someone you'd like as a mod you could DM them with a personal invite, otherwise you could create an application form if that suits you and your community better!
+:::
+
+
+---
+
+## Bots and trolls
+
+As with any social media platform, you may encounter trolls and bots while you stream. If this happens, it is best to stay calm and work with your mods to resolve the situation; most of the time it is just annoying and won't result in anything serious. The following section is not an exhaustive list and this only meant as friendly advice. Please make sure you have read twitch TOS and only do what makes you feel comfortable and safe.
+
+- ### Generic Trolls
+
+ For trolls that enter your chat and immediately send very inappropriate messages (e.g. hateful/sexual content) it is best to ignore them, ban them straightaway and move on. Giving them attention may create a negative atmosphere in your stream and make others feel unsafe. Try not to take these comments personally - it is unlikely to be targeted and they probably just want to get a reaction out of you.
+
+- ### 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 `/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.)
+
+- ### Follow bots/raids
+
+ This is when several bot accounts follow your channel all at the same time. It can be anywhere from 10-10k. If this happens, stay calm, and turn off follower alerts to stop the alert spam. Sometimes the bots will also send messages all at once so you put your chat in subscriber mode to prevent this if you wish (type /subscribers in your chat).
+
+ To get rid of bots, you can use [CommanderRoot's follower removal tool](https://twitch-tools.rootonline.de/follower_remover.php). Follow the instructions on his home page to remove accounts between a certain timeframe (you'll need to know what time the bots followed to avoid removing real people). Alternatively, you can just wait and Twitch will delete the accounts after a few days. Your follower count will drop suddenly but this is good - you don't want bots following you!
+
+- ### Donation trolls
+
+ These are particularly nasty trolls. They donate money, anywhere from $10-$200 or more, maybe repeatedly, and will not talk very much in the chat, aside from making some request in exchange for the money they just donated. They then will ask for a chargeback (if youre using paypal). You can try and fight the case but there is a good change you will not win, and if you lose you have to pay $14 chargeback fee each time. This can add up over time. If you suspect someone is a Dono troll, you can block them from donating:
+
+ Go to your [donation page](https://streamlabs.com/dashboard#/donations). There should be a list of names and donations:
+
+ 
+
+ + Also in Settings > Donation settings, make sure you've ticked "Login Required": + +
+
+---
\ No newline at end of file
diff --git a/src/pages/guide/music-and-audio.md b/src/pages/guide/music-and-audio.md
new file mode 100644
index 0000000..5fafd40
--- /dev/null
+++ b/src/pages/guide/music-and-audio.md
@@ -0,0 +1,132 @@
+---
+title: Music and Audio
+layout: "../../layouts/GuideLayout.astro"
+description: Learn how to add music or audio for your coworking streams!
+order: 1
+---
+
+# Music and Audio
+
+The vibe of a coworking stream is determined by the background music or audio!
+
+---
+
+## Non-DMCA Playlists
+
+> DMCA: Digital Millenium Copyright Act
+
+Non-copyrighted music playlists for you to listen on stream!
+
+### Lofi Girl
+
+- [Spotify](https://open.spotify.com/playlist/0vvXsWCC9xrXsKd4FyS8kM?si=65d4b951673847a2)
+- [YouTube (playlist)](https://www.youtube.com/watch?v=CMNyHBx1gak&list=PL6NdkXsPL07KN01gH2vucrHCEyyNmVEx4)
+- [SoundCloud](https://soundcloud.com/lofi_girl)
+
+### Lofi Boy (Synthwave)
+
+- [Spotify](https://open.spotify.com/playlist/1YIe34rcmLjCYpY9wJoM2p?si=f5115c5c9b644871)
+- [YouTube (video)](https://youtu.be/TlWYgGyNnJo)
+
+### Chillhop
+
+- [Spotify](https://open.spotify.com/user/chillhopmusic?si=b9c63cbb27db45ab&nd=1&dlsi=477657d953294e71)
+- [YouTube (playlist)](https://www.youtube.com/watch?v=XuW2hx3h7sE&list=PLt7bG0K25iXgkGK9PLhP3yryqc7S8uHds)
+- [SoundCloud](https://soundcloud.com/chillhopdotcom)
+
+### Lud and Schlatts Musical Emporium - Classical
+
+- [YouTube (playlist)](https://youtu.be/VBSP75pr2bg?list=PL2LwrpMfls5K1DVyG5ii_mEGKqzK9EGlr)
+
+---
+
+## How to Display 'Now Playing'
+
+### [6K Labs π](https://6klabs.com/)
+
+
+
+- Easy to implement
+- Available for YouTube Music and Spotify
+- Has many design choices and settings:
+ - Dark/Light mode
+ - Tint colour options
+ - Different aesthetic choices:
+ - Compact
+ - macOS
+ - Linux Shell
+ - And many more!
+
+### [Pixel Chat π](https://pixelchat.tv/)
+
+
+
+- Shows what you're playing via Spotify, Apple Music etc.
+- Includes other widgets for shoutouts, captions and counters
+
+---
+
+## Non-music options
+
+Don't like listening to music? Still worried about DMCA? Want other forms of background audio to stand out amongst other streamers? Don't worry! Here are a few suggestions for your background ambience that doesn't involve music!
+
+The following websites allow you to download audio files, so you can add to your streaming application (e.g. OBS) as a Media Source.
+
+**Note: Please be careful when downloading any files onto your computer.**
+
+- ### [Coffee Shop Ambience π](https://pixabay.com/sound-effects/search/coffee%20shop/)
+
+ The low hum of conversation and coffee shop bustle can provide a focused ambience that aids studying.
+
+- ### [Forest Ambience π](https://pixabay.com/sound-effects/search/forest%20ambience/)
+
+ The calming sounds of nature in a forest ambience can create a peaceful and focused atmosphere.
+
+- ### [Rain Ambience π](https://pixabay.com/sound-effects/search/rain/)
+
+ The steady pitter-patter of rain ambience offers a soothing and concentration-boosting backdrop for studying.
+
+- ### [Ocean Ambience π](https://pixabay.com/sound-effects/search/ocean%20ambience/)
+
+ With its rhythmic waves, provides a calming yet stimulating soundscape that can enhance focus.
+
+- ### [Fireplace Ambience π](https://pixabay.com/sound-effects/search/fireplace/)
+
+ The crackle and warmth of a fireplace ambience create a cozy and concentration-promoting environment for studying.
+
+---
+
+## How to Separate Audio for Twitch VOD
+
+[How to SEPARATE AUDIO for Twitch VOD with OBS studio (NO Voicemeeter) π](https://www.youtube.com/watch?v=0Lj5rkqSp48)
+
+If youβre streaming on Twitch using OBS, you can easily avoid getting your VODs muted by separating audio tracks into VOD audio tracks and stream audio tracks. This way, you can listen to music on your stream without worrying about getting muted.
+
+---
+
+## How to Separate your Audio for meetings/classes
+
+### Easy way (have two different outputs)
+
+
+
+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:
+
+There you can have your different outputs for different programmes. For example, one pair of headphones is used for zoom, and the other for everything else. In your streaming software, make sure the output is selected for the correct pair of headphones in your mixer!
+
+### Complicated ways
+
+- #### [VoicemeeterBanana](https://vb-audio.com/Voicemeeter/banana.htm)
+ 
+
+ - Download Voicemeeter Banana (software to route audio sources) and set all the audio sources/inputs you don't want to include on stream into a Voicemeeter input/output source separate from the main routing.
+ - The outputs will show up separately in your Audio Mixer, which you can adjust/mute
+ - Tutorial: [Separate Game Audio, Discord, Music in OBS! (A Voicemeeter Tutorial for Beginners)](https://www.youtube.com/watch?v=XD9sWOjITYU&t=376s)
+
+- #### [BlackHole audio](https://obsproject.com/forum/resources/mac-desktop-audio-using-blackhole.1191/)
+ 
+ - Free! Integrates with OBS
+
+- #### [GroundControl Caster](https://gingeraudio.com/groundcontrol-caster/)
+ 
+ - Free! Integrates with Twitch, OBS, StreamLabs, Zoom, FaceTime etc.
diff --git a/src/pages/guide/stream-bots.md b/src/pages/guide/stream-bots.md
new file mode 100644
index 0000000..871e86b
--- /dev/null
+++ b/src/pages/guide/stream-bots.md
@@ -0,0 +1,101 @@
+---
+title: Stream Bots
+layout: "../../layouts/GuideLayout.astro"
+description: Stream bots for your coworking streams!
+order: 3
+---
+
+# Stream Bots
+
+Useful bots to add to your stream!
+
+---
+
+## Cloud-hosted bots
+
+### [Sery Bot π](https://serycodes.carrd.co/)
+
+
+
+Available on:
+
+
+
+
+
+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)
+
+
+
+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!
+
+
+### [Nightbot π](https://nightbot.tv/)
+
+
+
+Available on:
+
+
+
+
+
+
+Nightbot 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.
+
+### [BotRix π](https://botrix.live/)
+
+
+
+Available on:
+
+
+
+
+
+
+BotRix is a chat bot that offers features and tools to enhance your community experience. You can use BotRix to moderate, send notifications, play minigames and more on Twitch, YouTube and Discord.
+
+---
+
+## Local bots
+
+### [Streamer.bot π](https://streamer.bot/)
+
+
+
+Available on:
+
+
+
+
+
+
+
+
+Supercharge your livestream! Add advanced levels of interactivity to your streams with Streamer.bot.
+
+### [Mix It Up bot π](https://mixitupapp.com/)
+
+
+
+Available on:
+
+
+
+
+
+
+
+
+Mix It Up is a free, full featured, community driven, open-source stream bot developed by streamers for streamers.
+
+---
\ No newline at end of file
diff --git a/src/pages/guide/stream-layout.md b/src/pages/guide/stream-layout.md
new file mode 100644
index 0000000..dbe434c
--- /dev/null
+++ b/src/pages/guide/stream-layout.md
@@ -0,0 +1,76 @@
+---
+title: Stream Layouts
+layout: "../../layouts/GuideLayout.astro"
+description: Learn how to moderate your coworking streams!
+order: 2
+---
+
+# Stream Layouts
+
+An organized layout structures information effectively, allowing viewers to easily find the elements they need, such as timers, chat windows, and your work area.
+
+---
+
+## [Canva π](https://www.canva.com/)
+
+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/)
+
+Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.
+
+---
+
+## Royalty free images & icons
+
+### [Pexels π](https://www.pexels.com/license/)
+
+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/)
+
+The Noun Project is a website that aggregates and catalogs symbols that are created and uploaded by graphic designers around the world.
+
+---
+
+## Fonts
+
+### [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 is a service provided by Google that offers a wide selection of high-quality web fonts for use in web projects.
+
+---
+
+## Principles of Grouping
+
+The principles of grouping explain how our brains see patterns. We naturally group things that are close together, look similar, or are connected. This helps us make sense of the visual world around us.
+
+There are five main principles of grouping:
+
+- **Proximity**: Objects close together are perceived as being related. Imagine scattered stars. We tend to see groups or constellations based on closeness, even if the stars aren't truly connected.
+
+- **Similarity**: Objects that look similar are seen as belonging together. A row of red balls amongst yellow ones will likely be perceived as a separate group.
+
+- **Continuity**: Elements arranged along a line or curve are perceived as following a path and being related. Think of stepping stones leading across a stream.
+
+- **Closure**: We tend to fill in gaps to create a complete whole. A broken circle can still be recognized as a circle despite the missing portion.
+
+- **Connectedness**: Elements linked by lines or shapes are seen as a unit. Imagine overlapping squares β our brains will likely group them based on the connection.
+
+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)
\ No newline at end of file
diff --git a/src/pages/guide/stream-widgets.md b/src/pages/guide/stream-widgets.md
new file mode 100644
index 0000000..5a6f8fd
--- /dev/null
+++ b/src/pages/guide/stream-widgets.md
@@ -0,0 +1,108 @@
+---
+title: Stream Widgets
+layout: "../../layouts/GuideLayout.astro"
+description: Stream widgets for your coworking streams!
+order: 4
+---
+
+# Stream widgets
+
+Widgets to add to your stream!
+
+---
+
+## 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 widget to display the current work session and break time.
+
+### Browser Sources
+
+#### [MohFocus' Minimal Pomo Timer π](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer)
+
+[](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer)
+
+- Twitch only
+- Easy to setup and customize
+- Called through commands in Twitch chat
+- Optionally post break time notifications to Discord
+
+#### [Mayuko's Pomodoro Countdown Timer π](https://github.com/hellomayuko/Pomodoro-Countdown)
+
+
+
+- Easy to setup and customize
+- Interactive through OBS
+
+### Window Capture
+
+#### [Pomofocus π](https://pomofocus.io/)
+
+
+
+- You can also add tasks to do on the web page
+
+---
+
+## Task widgets
+
+A task list widget is a great way to keep track of your tasks along with your chatters!
+
+### [Rython Task Bot π](https://github.com/liyunze-coding/chat-task-tic-overlay-infinity)
+
+
+
+- Free and open source
+- Easy to use, setup and customize
+- Horizontal version available
+- Used by 100+ streamers
+- Handles only one incomplete task per user
+
+### [Multi-task Widget π](https://ko-fi.com/s/94e7e8dc81)
+
+
+
+- $50 USD on ko-fi
+- Easy to use, setup and customize
+- Several versions to choose from:
+ - Original version
+ - Streamer bot version (Windows only, stream to YouTube and Twitch!)
+ - Horizontal version
+
+### [Super Sweet Bot π](https://www.patreon.com/super_sweet_bot)
+
+
+
+- β¬3 / month
+- Comes with a Pomo Timer
+- Colors are customizable
+- Hosted on a cloud server
+
+---
+
+## Music Widgets
+
+Display what you're playing on Spotify or YouTube Music!
+
+### [6K Labs π](https://6klabs.com/)
+
+
+
+- Easy to implement
+- Available for YouTube Music and Spotify
+- Has many design choices and settings:
+ - Dark/Light mode
+ - Tint colour options
+ - Different aesthetic choices:
+ - Compact
+ - macOS
+ - Linux Shell
+ - And many more!
+
+### [Pixel Chat π](https://pixelchat.tv/)
+
+
+
+- Shows what you're playing via Spotify, Apple Music etc.
+- Includes other widgets for shoutouts, captions and counters
+
+---
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 0429e9d..c260368 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,854 +1,17 @@
---
import Layout from "../layouts/Layout.astro";
+import Hero from "../components/blocks/Hero.astro";
+import BlurBackground from "../components/ui/BlurBackground.astro";
---
-
-
-
-
- - How to get started with -
-- Coworking Streams -
-- For coworking & study streamers on Twitch -
-- Click on the navigation icon on the top right to get - started! -
- -
-
- 
-
-If you're interested in a task list widget that allows you to add multiple tasks at a time, check out RythonDev's stream and learn more about the multi-task widget here! Note: This widget is behind a paywall.
-
----
-
-## Spotify widget
-
-A Spotify widget is a great way to let your viewers know what you're listening to!
-
-### Browser Source:
-
-6K Labs: A widget that shows what you're playing via Spotify or YouTube music. Many customization options provided for free.
-
-
-
-
-Pixel Chat: 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.
-
-
-
-Aiden Wallis: A widget that shows what you're playing via Spotify. Bonus: you can add a command like !song to your bot (Nightbot) that outputs the current song.
-
-
-
-### Software:
-
-Snip: Captures music from iTunes or Spotify and saves the current song as a text and png file that you can add into your streaming software.
-
-
-
----
-
-## Other
-
-You can use Twitch Alerts that can be found in your Twitch Dashboard!
-
-Want to make your own widget? Check out Comfy.JS made by Instafluff!
-
-P.S. It requires some knowledge of Javascript, HTML and CSS
-
----
-
-Once again, thanks to the creators of the Coworking Streamer Cheat Sheet for the reference!
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index db478e8..98456ee 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,41 +1,65 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
- theme: {
- extend: {},
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- h1: {
- fontSize: theme("fontSize.3xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.2"),
- },
- h2: {
- fontSize: theme("fontSize.2xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.1"),
- },
- h3: {
- fontSize: theme("fontSize.xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.1"),
- },
- ul: {
- listStyleType: "disc",
- listStylePosition: "inside",
- marginBottom: theme("margin.2"),
- },
- p: {
- marginBottom: theme("margin.6"),
- lineHeight: theme("lineHeight.7"),
- },
- hr: {
- marginTop: theme("margin.6"),
- marginBottom: theme("margin.6"),
- },
- });
- },
- ],
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ theme: {
+ extend: {
+ backgroundImage: (theme) => ({
+ "hero-gradient":
+ "linear-gradient(to right, #3F84D8, aquamarine, #C65BCF)",
+ }),
+ keyframes: {
+ rotate: {
+ "0%": { transform: "rotate(0deg)" },
+ "50%": { scale: "1 1.5" },
+ "100%": { transform: "rotate(360deg)" },
+ },
+ gradient: {
+ "0%": {
+ "background-position": "0% 50%",
+ },
+ "50%": {
+ "background-position": "100% 50%",
+ },
+ "100%": {
+ "background-position": "0% 50%",
+ },
+ },
+ fadeIn: {
+ from: {
+ opacity: "0",
+ },
+ to: {
+ opacity: "1",
+ },
+ },
+ scaleIn: {
+ from: {
+ transform: "scale(0)",
+ },
+ to: {
+ transform: "scale(1)",
+ },
+ },
+ },
+ animation: {
+ "spin-slow": "rotate 15s linear infinite",
+ gradient: "gradient 15s ease infinite",
+ fadeIn: "fadeIn 0.3s ease-in-out forwards",
+ scaleIn: "scaleIn 0.3s ease-in-out forwards",
+ },
+ colors: {
+ "cowo-pink": "#FF7782",
+ secondary: "#171717",
+ primary: "#fafafa",
+ "primary-green": "#88D47D",
+ "primary-blue": "#3F84D8",
+ },
+ },
+ },
+ variants: {
+ extend: {
+ backgroundImage: ["responsive", "hover", "focus", "active"],
+ },
+ },
+ plugins: [],
};
diff --git a/tsconfig.json b/tsconfig.json
index 77da9dd..6d0d384 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,13 @@
{
- "extends": "astro/tsconfigs/strict"
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ }
+ }
}
\ No newline at end of file
diff --git a/utils/cn.ts b/utils/cn.ts
new file mode 100644
index 0000000..242d96f
--- /dev/null
+++ b/utils/cn.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
-
-
+
-
- !taskhelp
- 1/65
-
-
-
-
-
- RyanPython
-
- :
- build this website
-
-
-
- MohFocus
-
- :
- resolve merge conflict
-
-
-
- j3dg
-
- :
- spin class
-
-
-
- berryspace
-
- :
- setup coworking stream
-
-
-
- CloudyDayzzz
-
- :
- interpret sign language
-
-
-
- pcc_lanezzz
-
- :
- torture Poco
-
-
-
- lala_xitlali
-
- :
- buy more fabric
-
-
-
- xeno_hiraeth
-
- :
- diagnose patients
-
-
-
- opoemperdernida
-
- :
- rutina de la maΓ±ana
-
-
-
- 4l1c3_0
-
- :
- mental breakdance
-
-
-
- studywithjojo
-
- :
- get into NHS
-
-
-
- StudyPaws
-
- :
- identify cow breeds
-
-
-
- mikewhatwhere
-
- :
- become a dietician
-
-
-
- AuspexOneGaming
-
- :
- grade papers
-
-
-
- BossOnCamera
-
- :
- get into Kyoto University
-
-
-
- samkitkat
-
- :
- codewars exercises
-
-
-
- euphie___
-
- :
- be a cinnamon roll
-
-
-
- charliosaurus
-
- :
- praise the lord Jesus Christ
-
-
-
- unknownnie
-
- :
- grow a sprout
-
-
-
- imJamJams
-
- :
- feed the mods
-
-
-
- itsbrandonut
-
- :
- music stream
-
-
-
- nihnesyo
-
- :
- release new Lofi EP
-
-
-
- warpyn
-
- :
- release new song cover
-
-
-
- shadygepril
-
- :
- studying for A-Levels
-
-
-
- Extelso
-
- :
- show off stream layout
-
-
-
- Bubxmicn
-
- :
- drive a truck
-
-
-
- theyolotato
-
- :
- read smut
-
-
-
- sneakymoon_
-
- :
- edit YouTube vlogs
-
-
-
- nanakitchen
-
- :
- annoy sneakymoon_
-
-
-
- pinsaregood
-
- :
- be an instagram influencer
-
-
-
- wasmishtaken_
-
- :
- simp for levi
-
-
-
- Jutstreams
-
- :
- play geoguessr
-
-
-
- GuluTwitch
-
- :
- take care of Gulu
-
-
-
- j2modest
-
- :
- penetration testing
-
-
-
- nachoburrit0
-
- :
- play Apex for charity
-
-
-
- clarissawrites
-
- :
- 10,000 words essay
-
-
-
- PottleLive
-
- :
- Promote Erudita and protest the french
- government
-
-
-
- long1nteger
-
- :
- work on the next AI project for self.dev
-
-
-
- Elly78456
-
- :
- sell merch
-
-
-
- sunfflawer
-
- :
- be clingy
-
-
-
- xhumming
-
- :
- feed Emmy
-
-
-
- arcaneXVIII
-
- :
- babysit
-
-
-
- OOPmarie
-
- :
- React project
-
-
-
- Seijisoldier
-
- :
- Be the tallest in the room
-
-
-
- StudySmrt
-
- :
- be the youngest in the room
-
-
-
- anchigaming
-
- :
- love kirby
-
-
-
- brisim_claimhte
-
- :
- love kiki
-
-
-
- Chieysse
-
- :
- play Valorant
-
-
-
- lyricalclove
-
- :
- commit arson with Calcifer
-
-
-
- hillabunny
-
- :
- play Valorant
-
-
-
- StudyStreamKen
-
- :
- be drunk
-
-
-
- Supernaturalwriter
-
- :
- be the fittest in the DnD group
-
-
-
- KhrowV
-
- :
- caw caw
-
-
-
- michiimiya
-
- :
- be a cult leader
-
-
-
- Chiichyan
-
- :
- practice piano
-
-
-
- mindiigo
-
- :
- hit Ascendant in Valorant
-
-
-
- RosieDream_
-
- :
- be a lawyer
-
-
-
- MemouriArt
-
- :
- design T-shirts
-
-
-
- study_with_flowergirl
-
- :
- be a flower
-
-
-
- sunnyblue_
-
- :
- mod for Ranboo
-
-
-
- SquaredMo
-
- :
- play Valorant deathmatch
-
-
-
- triplefattypatty
-
- :
- travel around the world
-
-
-
- JettesHus
-
- :
- Furniture restoration
-
-
-
- Bli_FlowState
-
- :
- Make productivity youtube videos
-
-
-
- wafflesdot025
-
- :
- skip class
-
+
-
-
-
-
diff --git a/src/pages/specs.md b/src/pages/specs.md
deleted file mode 100644
index 1055732..0000000
--- a/src/pages/specs.md
+++ /dev/null
@@ -1,97 +0,0 @@
----
-title: Specifications
-layout: "../layouts/Markdown.astro"
-description: Find out the minimum computer specification requirements for coworking streams!
----
-
-
-
-# Specifications
-
-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.
-
-Note: Some smaller study streamers use their smartphones to stream. This is a great option for those who are just starting out, but it is not recommended for long-term streaming, due to limited settings and limited interactivity with viewers.
-
-
+
-
-
-CPU
- -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)
- -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
- -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
- -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
- -The better the internet connection, the better the streaming experience. You can check your internet speed at speedtest.net. - -**The ideal internet for streaming**: At least 5 Mbps upload speed, preferably 10 Mbps or more. - -
-
-
-
-Peripherals
- -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. - -Note: A smartphone can be used as a webcam, however it is recommended to keep it charging while you stream. - -
-
-
-
-Bitrate
- -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 in depth guide from Reddit to learn more! - -
-
-
diff --git a/src/pages/tips.md b/src/pages/tips.md
deleted file mode 100644
index b08c6bb..0000000
--- a/src/pages/tips.md
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: Tips
-layout: "../layouts/Markdown.astro"
-description: Tips for coworking streamers
----
-
-# Tips
-
-Here are some tips for coworking streamers!
-
-## Table of Contents
-
-- [Tips](#tips)
- - [Table of Contents](#table-of-contents)
- - [How to get noticed as a new streamer?](#how-to-get-noticed-as-a-new-streamer)
- - [Have a consistent stream schedule](#have-a-consistent-stream-schedule)
- - [Use stream tags to its full potential](#use-stream-tags-to-its-full-potential)
- - [Social Media Marketing](#social-media-marketing)
- - [Use stream layouts that make your stream stand out](#use-stream-layouts-that-make-your-stream-stand-out)
- - [Disable pre-roll advertisements](#disable-pre-roll-advertisements)
- - [Interact with chat](#interact-with-chat)
- - [Networking](#networking)
- - [Other notes](#other-notes)
- - [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)
- - [How to listen to music without getting VOD muted?](#how-to-listen-to-music-without-getting-vod-muted)
- - [Emotes](#emotes)
- - [Channel emotes](#channel-emotes)
- - [Emote extensions](#emote-extensions)
- - [Browser Extensions](#browser-extensions)
- - [Other tips](#other-tips)
- - [References](#references)
-
----
-
-## How to get noticed as a new streamer?
-
-### 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.
-
-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.
-
-### Use stream tags to its full potential
-
-The most common way to get noticed is if you set a "coworking" tag into your stream tags. Other variations include "study" and "studywithme". The community has been struggling to discover new streamers through this method due to the variety of "coworking" tags, hence it has been suggested to Twitch that the Coworking and Study category should be built into Twitch's list of categories. Please leave a vote to support this suggestion!
-
-### 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.
-
-### 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 aesthetic.
-
-### Disable pre-roll advertisements
-
-It's annoying that when you want to check out a streamer you never watched before and you're greeted with an advertisement lasting 30 seconds long.
-
-After being a Twitch affiliate, your streams will have advertisements. If you disable mid-roll ads, pre-roll ads will be given to your viewers when they hop on your stream at all times.
-
-However if you have mid-roll ads enabled, your viewers may only get pre-roll ads near when the mid-roll ads are about to happen.
-
-It is recommended to add Ads Manager to your OBS deck:
-
-`https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel`
-
-With the OBS deck, you can manually control when the advertisements start and be notified when the stream advertisement is in progress.
-
-### 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.
-
-### Networking
-
-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.
-
-### Other notes
-
-Even if you follow these tips, it is not a 100% guarantee that you will become a successful streamer.
-
-There are other factors that you have little to no control over, such as luck and entertaining personality.
-
----
-
-## 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.
-
----
-
-## How to listen to music without getting VOD muted?
-
-If you're streaming on Twitch using OBS, you can easily avoid getting your VODs muted by separating audio tracks into VOD audio tracks and stream audio tracks. This way, you can listen to music on your stream without worrying about getting muted. Here's a video that explains how to do it! (NO VOICEMEETER REQUIRED)
-
----
-
-## Emotes
-
-### Channel emotes
-
-When you reach the Twitch Affiliate goal, you can add emotes to your channel for subscribers to use! However, Follower emotes are only available if you have Instant Upload Privilege!
-
-### Emote extensions
-
-Don't understand when your chat says in 'KEKW'? It's a common third party Twitch emote! You can add extensions to your channel to add more emotes for your viewers to use. Some popular ones include BetterTTV, FrankerFaceZ and 7TV.
-
-### Browser Extensions
-
-
-
-You won't run into any issues using all three extensions at once!
-
-Only want to use one extension? FrankerFaceZ is probably the best one to go for! It is stable, has special addons through the extension itself for BTTV and 7TV emotes, and has the best customization for twitch as a site!
-
----
-
-## Other tips
-
-- Don't promote yourself in other people's channels without permission. It's rude and will likely get you banned.
-- Don't worry about view count, just focus on your work and the rest will follow.
-- Avoid spending money on your stream setup until you're sure you want to stick with it.
-- Avoid using Display/Screen Capture where you may accidentally leak personal information. It is recommended to keep the Display Capture window small enough or to blur it, so that the text content is not readable.
-- Consider using Application Capture Audio instead of Desktop Audio. This will prevent your viewers from hearing your notifications or other unwanted noise.
-- For macOS users, if you are struggling with Desktop Audio issues on OBS, consider watching this video on how to setup BlackHole Audio!
-
----
-
-## References
-
-Please take a look at A Coworking Streamer Cheat Sheet for more information!
diff --git a/src/pages/widgets.md b/src/pages/widgets.md
deleted file mode 100644
index 72cbf12..0000000
--- a/src/pages/widgets.md
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Widgets
-layout: "../layouts/Markdown.astro"
-description: Find out the widgets you can use to enhance your stream!
----
-
-# Widgets
-
-These widgets 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 widget to display the current work session and break time.
-
-### Browser Source
-
-Streaming software
- -There are many streaming software options available, but the most popular one is OBS Studio! - -Check out this YouTube video made by Hammer Dance on how to setup OBS! - -If you're using macOS and you're struggling with Desktop Audio issues, check out this video on how to setup BlackHole Audio! - -If you're streaming on mobile, the Twitch mobile app has a built-in streaming feature! - --
-
- - https://github.com/mohamed-tayeh/Minimal-Pomo-Timer * - -
- - https://github.com/njallam/stream-pomodoro - -
- - https://ecard.enter-media.org/widgets/ - -
- - https://github.com/hellomayuko/Pomodoro-Countdown - -
- - https://pixelchat.tv/ * - -
- - https://github.com/liyunze-coding/streamodoro * - -
-
-
- - https://pomofocus.io/ - -
- - https://www.timeanddate.com/timer/ - -
- - https://pomodor.app/timer - -
- - https://tomato-timer.com/ - -
- - https://pomodoro-tracker.com/ - -
- 
- 
-
-
-A task list widget is a great way to keep track of your tasks along with your viewers! For these widgets, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed.
-
-### Browser Source
-
-
-
--
-
- - - https://youtu.be/-5EdJcvDuFQ - - -
- - - https://github.com/liyunze-coding/Chat-Task-Tic-Overlay-Infinity - - -
- - - https://github.com/liyunze-coding/Chat-Task-Tic-Overlay-Horizontal - - -
- - - https://github.com/mohamed-tayeh/Task-List - - -
-
-If you're interested in a task list widget that allows you to add multiple tasks at a time, check out RythonDev's stream and learn more about the multi-task widget here! Note: This widget is behind a paywall.
-
----
-
-## Spotify widget
-
-A Spotify widget is a great way to let your viewers know what you're listening to!
-
-### Browser Source:
-
-6K Labs: A widget that shows what you're playing via Spotify or YouTube music. Many customization options provided for free.
-
-
-
-
-Pixel Chat: 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.
-
-
-
-Aiden Wallis: A widget that shows what you're playing via Spotify. Bonus: you can add a command like !song to your bot (Nightbot) that outputs the current song.
-
-
-
-### Software:
-
-Snip: Captures music from iTunes or Spotify and saves the current song as a text and png file that you can add into your streaming software.
-
-
-
----
-
-## Other
-
-You can use Twitch Alerts that can be found in your Twitch Dashboard!
-
-Want to make your own widget? Check out Comfy.JS made by Instafluff!
-
-P.S. It requires some knowledge of Javascript, HTML and CSS
-
----
-
-Once again, thanks to the creators of the Coworking Streamer Cheat Sheet for the reference!
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index db478e8..98456ee 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,41 +1,65 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
- theme: {
- extend: {},
- },
- plugins: [
- function ({ addComponents, theme }) {
- addComponents({
- h1: {
- fontSize: theme("fontSize.3xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.2"),
- },
- h2: {
- fontSize: theme("fontSize.2xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.1"),
- },
- h3: {
- fontSize: theme("fontSize.xl"),
- fontWeight: theme("fontWeight.bold"),
- marginBottom: theme("margin.1"),
- },
- ul: {
- listStyleType: "disc",
- listStylePosition: "inside",
- marginBottom: theme("margin.2"),
- },
- p: {
- marginBottom: theme("margin.6"),
- lineHeight: theme("lineHeight.7"),
- },
- hr: {
- marginTop: theme("margin.6"),
- marginBottom: theme("margin.6"),
- },
- });
- },
- ],
+ content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
+ theme: {
+ extend: {
+ backgroundImage: (theme) => ({
+ "hero-gradient":
+ "linear-gradient(to right, #3F84D8, aquamarine, #C65BCF)",
+ }),
+ keyframes: {
+ rotate: {
+ "0%": { transform: "rotate(0deg)" },
+ "50%": { scale: "1 1.5" },
+ "100%": { transform: "rotate(360deg)" },
+ },
+ gradient: {
+ "0%": {
+ "background-position": "0% 50%",
+ },
+ "50%": {
+ "background-position": "100% 50%",
+ },
+ "100%": {
+ "background-position": "0% 50%",
+ },
+ },
+ fadeIn: {
+ from: {
+ opacity: "0",
+ },
+ to: {
+ opacity: "1",
+ },
+ },
+ scaleIn: {
+ from: {
+ transform: "scale(0)",
+ },
+ to: {
+ transform: "scale(1)",
+ },
+ },
+ },
+ animation: {
+ "spin-slow": "rotate 15s linear infinite",
+ gradient: "gradient 15s ease infinite",
+ fadeIn: "fadeIn 0.3s ease-in-out forwards",
+ scaleIn: "scaleIn 0.3s ease-in-out forwards",
+ },
+ colors: {
+ "cowo-pink": "#FF7782",
+ secondary: "#171717",
+ primary: "#fafafa",
+ "primary-green": "#88D47D",
+ "primary-blue": "#3F84D8",
+ },
+ },
+ },
+ variants: {
+ extend: {
+ backgroundImage: ["responsive", "hover", "focus", "active"],
+ },
+ },
+ plugins: [],
};
diff --git a/tsconfig.json b/tsconfig.json
index 77da9dd..6d0d384 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,3 +1,13 @@
{
- "extends": "astro/tsconfigs/strict"
+ "extends": "astro/tsconfigs/strict",
+ "compilerOptions": {
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
+ "baseUrl": ".",
+ "paths": {
+ "@/*": [
+ "./src/*"
+ ]
+ }
+ }
}
\ No newline at end of file
diff --git a/utils/cn.ts b/utils/cn.ts
new file mode 100644
index 0000000..242d96f
--- /dev/null
+++ b/utils/cn.ts
@@ -0,0 +1,7 @@
+import type { ClassValue } from "clsx";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}