diff --git a/.gitignore b/.gitignore index 91f8086..8ed6e2b 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,5 @@ pnpm-debug.log* # PageFind public/pagefind -md-to-html.exe \ No newline at end of file +md-to-html.exe +to-do-list.md \ No newline at end of file diff --git a/src/components/blocks/TableOfContent.astro b/src/components/blocks/TableOfContent.astro index b9e5304..711ca8e 100644 --- a/src/components/blocks/TableOfContent.astro +++ b/src/components/blocks/TableOfContent.astro @@ -35,5 +35,5 @@ const { headings } = Astro.props; }) } -
+
diff --git a/src/components/blocks/verticalNav.astro b/src/components/blocks/verticalNav.astro index 50eb4ec..73cf7da 100644 --- a/src/components/blocks/verticalNav.astro +++ b/src/components/blocks/verticalNav.astro @@ -19,18 +19,23 @@ export function formatTitle(title: string): string { export async function setup() { // setup navigation + + // Define the order of categories + let categoryOrder = ["Get Started", "Guide", "Tutorials"]; + const getStartedFiles = await Astro.glob("../../pages/get-started/*"); const guideFiles = await Astro.glob("../../pages/guide/*"); + const tutorialFiles = await Astro.glob("../../pages/tutorials/*"); - const markdownFiles = [...getStartedFiles, ...guideFiles]; - const navigation: Navigation = {}; + let markdownFiles = [...getStartedFiles, ...guideFiles, ...tutorialFiles]; + let navigation: Navigation = {}; for (const file of markdownFiles) { - const filePath = file.url; - const [_, category] = filePath!.split("/"); - const formattedCategory = formatTitle(category); - const formattedTitle = file.frontmatter.title; - const order = file.frontmatter.order ?? 0; + let filePath = file.url; + let [_, category] = filePath!.split("/"); + let formattedCategory = formatTitle(category).toLowerCase(); + let formattedTitle = file.frontmatter.title; + let order = file.frontmatter.order ?? 0; if (!navigation[formattedCategory]) { navigation[formattedCategory] = []; @@ -43,18 +48,18 @@ export async function setup() { }); } - // sort by "order" - const sortedNavigation: Navigation = {}; - Object.keys(navigation) - .sort() - .forEach((key) => { - sortedNavigation[key] = navigation[key].sort( - (a, b) => a.order - b.order - ); - }); + // Create a new navigation object with the desired order + let orderedNavigation: Navigation = {}; + for (let category of categoryOrder) { + if (navigation[category.toLowerCase()]) { + orderedNavigation[category] = navigation[ + category.toLowerCase() + ].sort((a, b) => a.order - b.order); + } + } return { - navigation: sortedNavigation, + navigation: orderedNavigation, }; } @@ -84,7 +89,7 @@ const { showHome } = Astro.props;
Home @@ -96,7 +101,7 @@ const { showHome } = Astro.props; { Object.entries(navigation).map(([category, links]) => (
-
+
{category}
    @@ -104,7 +109,7 @@ const { showHome } = Astro.props;
  • {link.title} @@ -117,8 +122,8 @@ const { showHome } = Astro.props;
    Groups @@ -126,8 +131,8 @@ const { showHome } = Astro.props;
    Blog @@ -135,8 +140,8 @@ const { showHome } = Astro.props;
    Credits @@ -157,11 +162,19 @@ const { showHome } = Astro.props; // add active class to current url links.forEach((link) => { if (isCurrentUrl(link.getAttribute("href")!)) { - link.classList.add("text-white"); - link.classList.remove("text-gray-400"); + link.classList.add("text-black", "bg-primary-green"); + link.classList.remove( + "text-gray-400", + "bg-none", + "hover:text-white" + ); } else { - link.classList.remove("text-white"); - link.classList.add("text-gray-400"); + link.classList.remove("text-black", "bg-primary-green"); + link.classList.add( + "text-gray-400", + "bg-none", + "hover:text-white" + ); } }); diff --git a/src/components/ui/BlurBackground.astro b/src/components/ui/BlurBackground.astro index a7ecdf9..02ff8b5 100644 --- a/src/components/ui/BlurBackground.astro +++ b/src/components/ui/BlurBackground.astro @@ -1,6 +1,6 @@
    diff --git a/src/components/ui/card-hover-effect.tsx b/src/components/ui/card-hover-effect.tsx index 05dc0be..9947792 100644 --- a/src/components/ui/card-hover-effect.tsx +++ b/src/components/ui/card-hover-effect.tsx @@ -33,7 +33,7 @@ export const HoverEffect = ({ {hoveredIndex === idx && ( -
    -
    +
    +
    -
    +
    diff --git a/src/layouts/GuideLayout.astro b/src/layouts/GuideLayout.astro index c5f1d3d..a1e8984 100644 --- a/src/layouts/GuideLayout.astro +++ b/src/layouts/GuideLayout.astro @@ -8,19 +8,22 @@ const { frontmatter, headings } = Astro.props; --- -
    -
    +
    +
    -
    +
    -
    +
    {title} -
    +
    @@ -127,6 +127,28 @@ const { title, description } = Astro.props; scrollbar-color: #4a4a4a #2b2d31; scrollbar-gutter: 10px; } + aside { + /* scrollbar customize */ + scrollbar-width: thin; + scrollbar-color: #31343d transparent; + overflow-y: auto; + padding-left: 0.5rem; + padding-right: 0.5rem; + + border-radius: 0.375rem; + } + diff --git a/src/pages/get-started/_images/introduction/ellyskey.webp b/src/pages/get-started/_images/introduction/ellyskey.webp new file mode 100644 index 0000000..ba0d972 Binary files /dev/null and b/src/pages/get-started/_images/introduction/ellyskey.webp differ diff --git a/src/pages/get-started/_images/introduction/petition.webp b/src/pages/get-started/_images/introduction/petition.webp new file mode 100644 index 0000000..4abd294 Binary files /dev/null and b/src/pages/get-started/_images/introduction/petition.webp differ diff --git a/src/pages/get-started/_images/introduction/rythondev.webp b/src/pages/get-started/_images/introduction/rythondev.webp new file mode 100644 index 0000000..daa2664 Binary files /dev/null and b/src/pages/get-started/_images/introduction/rythondev.webp differ diff --git a/src/pages/get-started/_images/introduction/seiji.webp b/src/pages/get-started/_images/introduction/seiji.webp new file mode 100644 index 0000000..ed4004d Binary files /dev/null and b/src/pages/get-started/_images/introduction/seiji.webp differ diff --git a/src/pages/get-started/introduction.md b/src/pages/get-started/introduction.mdx similarity index 84% rename from src/pages/get-started/introduction.md rename to src/pages/get-started/introduction.mdx index 9089dab..690426d 100644 --- a/src/pages/get-started/introduction.md +++ b/src/pages/get-started/introduction.mdx @@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro" description: Introduction to coworking streams! order: 0 --- +import { Image } from 'astro:assets'; +import RythonDev from "./_images/introduction/rythondev.webp"; +import Ellyskey from "./_images/introduction/ellyskey.webp"; +import Seiji from "./_images/introduction/seiji.webp"; # Introduction @@ -13,43 +17,33 @@ A brief introduction to coworking streams! Let's keep each other accountable ^^ ## What are coworking streams? -![RythonDev](/images/introduction/rythondev.webp) +RythonDev Image source: [RythonDev (Twitch)](https://twitch.tv/RythonDev) > Coworking (or study) streaming is an opportunity to share a virtual, productive, space with others and to connect based on interests and studies - in some ways replicating the in-person office, library, or cafe. Often, study streaming follows a pomodoro counter so that streamers can focus on working for a set amount of time and then converse with chat during another set amount of time for break. -Many viewers like to watch coworking streams because it provides motivation and accountability, which is especially hard if you're trying to focus at home. In the light of Covid, where working from home is becoming more common, it can nice to find an environment with like-minded people. Plus, the sense of community attracts many people - often coworking streams are very welcoming and supportive! +Many viewers like to watch coworking streams because it provides motivation and accountability, which is especially hard if you're trying to focus at home. In the light of Covid, where working from home is becoming more common, it can be nice to find an environment with like-minded people. Plus, the sense of community attracts many people - often coworking streams are very welcoming and supportive! --- ## What is a "pomodoro"? -Ellyskey +Ellyskey Image source: [Ellyskey (Twitch)](https://twitch.tv/Ellyskey) -The Pomodoro Technique is a time management method where you work in focused intervals called pomodoros separated by short breaks. This helps you stay concentrated, avoid burnout, and tackle big tasks by breaking them into manageable chunks. - Coworking streamers tend to use 50 minutes of work and 10 minutes of break (50/10) for their streams for optimal balance of being able to get work done and be able to chat with viewers. +The Pomodoro Technique is a time management method where you work in focused intervals called pomodoros separated by short breaks. This helps you stay concentrated, avoid burnout, and tackle big tasks by breaking them into manageable chunks. + --- ## How do people enjoy these streams? -SeijiSoldier +Seiji -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/) +Image source: [Seiji (Twitch)](https://twitch.tv/Seiji) Although might seem unconventional to watch someone else work, there are several reasons why viewers enjoy these streams: @@ -69,6 +63,16 @@ Although might seem unconventional to watch someone else work, there are several By watching a streamer work, viewers might pick up new productivity techniques or software shortcuts. Seeing someone else tackle similar tasks can be inspiring and motivating. +> ### What are your thoughts on co-working streams? +> +> I'm not saying I dislike them, but I just want to understand how people enjoy these streams. It's mostly just the streamer doing their work while their cam is facing in front of them. There's nothing much to watch as it's not display captured (understandable since work is confidential). +> +> Sometimes, when I chat with them they don't even reply back. They usually have a timer in their overlay and after the timer ends they talk to chat again. +> +> Maybe I'm a boomer, but can anyone shed light on why these streams are a thing on Twitch? +> +> Source: [Archived Reddit post](https://www.reddit.com/r/Twitch/comments/t66g15/what_are_your_thoughts_on_coworking_streams/) + It's understandable that the lack of direct interaction or display capture might be unfamiliar. Streamers typically prioritize focusing on their work during these periods, addressing chat messages during breaks or using timers to dedicate time for interaction. Ultimately, co-working streams cater to a specific need for some viewers. They offer a unique blend of productivity, community, and a supportive atmosphere that traditional work environments might lack. @@ -77,15 +81,11 @@ Ultimately, co-working streams cater to a specific need for some viewers. They o ## What is a task widget? -Multi Task Widget +Multi 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. +A task widget is a tool where users can add tasks via commands such as `!task [current task]` or `!todo [current task]` in chat to add their task(s) to the widget, to remind themselves about what they need to focus on. Task widgets offer an extra layer of accountability for the streamer and chatters to focus on their current task(s). diff --git a/src/pages/get-started/pre-requisites.md b/src/pages/get-started/pre-requisites.md index 6a3504d..542acbd 100644 --- a/src/pages/get-started/pre-requisites.md +++ b/src/pages/get-started/pre-requisites.md @@ -11,13 +11,14 @@ Get ready for coworking streams! --- -## Pre-requisites (Computer) +## Computer Pre-requisites for starting coworking streams on your desktop computer or laptop. ### Software -- [OBS](https://obsproject.com/) : Free and open source software for video recording and live streaming. +#### [OBS πŸ”—](https://obsproject.com/) +Free and open source software for video recording and live streaming. ### Hardware @@ -37,7 +38,7 @@ Pre-requisites for starting coworking streams on your desktop computer or laptop --- -## Pre-requisites (Mobile) +## Mobile Usually, streamers who stream from their phone would use their laptop device to interact with chat! diff --git a/src/pages/guide/_images/bots/mohcitrus.webp b/src/pages/guide/_images/bots/mohcitrus.webp new file mode 100644 index 0000000..599cd8d Binary files /dev/null and b/src/pages/guide/_images/bots/mohcitrus.webp differ diff --git a/src/pages/guide/_images/layouts/NounProject_brandmark_horizontal_black.png b/src/pages/guide/_images/layouts/NounProject_brandmark_horizontal_black.png new file mode 100644 index 0000000..0389338 Binary files /dev/null and b/src/pages/guide/_images/layouts/NounProject_brandmark_horizontal_black.png differ diff --git a/src/pages/guide/_images/layouts/canva.webp b/src/pages/guide/_images/layouts/canva.webp new file mode 100644 index 0000000..af29ced Binary files /dev/null and b/src/pages/guide/_images/layouts/canva.webp differ diff --git a/src/pages/guide/_images/layouts/figma.webp b/src/pages/guide/_images/layouts/figma.webp new file mode 100644 index 0000000..91869a3 Binary files /dev/null and b/src/pages/guide/_images/layouts/figma.webp differ diff --git a/src/pages/guide/_images/layouts/pexels.webp b/src/pages/guide/_images/layouts/pexels.webp new file mode 100644 index 0000000..9c619bb Binary files /dev/null and b/src/pages/guide/_images/layouts/pexels.webp differ diff --git a/src/pages/guide/_images/music-and-audio/6klabs.webp b/src/pages/guide/_images/music-and-audio/6klabs.webp new file mode 100644 index 0000000..16c27c4 Binary files /dev/null and b/src/pages/guide/_images/music-and-audio/6klabs.webp differ diff --git a/src/pages/guide/_images/music-and-audio/audio_settings.webp b/src/pages/guide/_images/music-and-audio/audio_settings.webp new file mode 100644 index 0000000..a90f594 Binary files /dev/null and b/src/pages/guide/_images/music-and-audio/audio_settings.webp differ diff --git a/src/pages/guide/_images/music-and-audio/pixelchat.webp b/src/pages/guide/_images/music-and-audio/pixelchat.webp new file mode 100644 index 0000000..7a70a6a Binary files /dev/null and b/src/pages/guide/_images/music-and-audio/pixelchat.webp differ diff --git a/src/pages/guide/_images/widgets/mayuko-pomo.webp b/src/pages/guide/_images/widgets/mayuko-pomo.webp new file mode 100644 index 0000000..f97ea61 Binary files /dev/null and b/src/pages/guide/_images/widgets/mayuko-pomo.webp differ diff --git a/src/pages/guide/_images/widgets/moh-minimal-timer.webp b/src/pages/guide/_images/widgets/moh-minimal-timer.webp new file mode 100644 index 0000000..cf8c83f Binary files /dev/null and b/src/pages/guide/_images/widgets/moh-minimal-timer.webp differ diff --git a/src/pages/guide/_images/widgets/multitask.webp b/src/pages/guide/_images/widgets/multitask.webp new file mode 100644 index 0000000..de4a29c Binary files /dev/null and b/src/pages/guide/_images/widgets/multitask.webp differ diff --git a/src/pages/guide/_images/widgets/pomofocus.webp b/src/pages/guide/_images/widgets/pomofocus.webp new file mode 100644 index 0000000..30abc63 Binary files /dev/null and b/src/pages/guide/_images/widgets/pomofocus.webp differ diff --git a/src/pages/guide/_images/widgets/rythontaskbot.webp b/src/pages/guide/_images/widgets/rythontaskbot.webp new file mode 100644 index 0000000..55f33c8 Binary files /dev/null and b/src/pages/guide/_images/widgets/rythontaskbot.webp differ diff --git a/src/pages/guide/_images/widgets/supersweetbot.webp b/src/pages/guide/_images/widgets/supersweetbot.webp new file mode 100644 index 0000000..8af6e19 Binary files /dev/null and b/src/pages/guide/_images/widgets/supersweetbot.webp differ diff --git a/src/pages/guide/general-tips.md b/src/pages/guide/general-tips.md index 34b85f0..5e6c809 100644 --- a/src/pages/guide/general-tips.md +++ b/src/pages/guide/general-tips.md @@ -31,33 +31,33 @@ Closed captions open your stream to a wider audience by including viewers who ar - ### Have control of your ad timings -``` -https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel -``` + ``` + https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel + ``` -If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "\{\{channel\}\}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard. + If you're using OBS, you can add the link above as a dock to your OBS (remember to replace "\{\{channel\}\}" with your actual channel name). This way, you can easily run ads and view when your next ad break is without having to go to the Twitch dashboard. - ### Have a consistent stream schedule -A regular stream schedule lets your viewers know exactly when to expect you to go live. When viewers can anticipate your streams, they are more likely to make time to watch, increasing the chances of them tuning in and engaging with your content. + A regular stream schedule lets your viewers know exactly when to expect you to go live. When viewers can anticipate your streams, they are more likely to make time to watch, increasing the chances of them tuning in and engaging with your content. -Regularly scheduled streams also help you attract and retain viewers. When new viewers find your stream, they are more likely to follow if they see a consistent schedule. Additionally, existing followers are more likely to continue watching if they know when to catch your streams. + Regularly scheduled streams also help you attract and retain viewers. When new viewers find your stream, they are more likely to follow if they see a consistent schedule. Additionally, existing followers are more likely to continue watching if they know when to catch your streams. - ### Social Media Marketing -Having good social media marketing allows you to reach a broader audience beyond your live streams. Utilizing platforms like Instagram and YouTube (even YouTube Shorts!) enables you to promote your content, engage with potential viewers and build a loyal following, increasing visibility and attracting new members to your community. + Having good social media marketing allows you to reach a broader audience beyond your live streams. Utilizing platforms like Instagram and YouTube (even YouTube Shorts!) enables you to promote your content, engage with potential viewers and build a loyal following, increasing visibility and attracting new members to your community. - ### Use stream layouts that make your stream stand out -On Twitch, people would go through the browse section with a frame of your stream as the thumbnail. If you want to increase the chances of people clicking onto your stream, you should make your stream more attractive. + On Twitch, people would go through the browse section with a frame of your stream as the thumbnail. If you want to increase the chances of people clicking onto your stream, you should make your stream more attractive. - ### Interact with Chat -Interacting with your chat is crucial to grow your community because it fosters a sense of engagement and connection with your audience. By acknowledging and responding to viewers, you create a welcoming and inclusive atmosphere, encouraging viewers to stay, become regulars, and invite others, ultimately leading to organic community growth. + Interacting with your chat is crucial to grow your community because it fosters a sense of engagement and connection with your audience. By acknowledging and responding to viewers, you create a welcoming and inclusive atmosphere, encouraging viewers to stay, become regulars, and invite others, ultimately leading to organic community growth. - ### Network with other streamers -Having good networking opens up collaboration opportunities, cross-promotion, and exposure to each other’s audiences. By forming connections within the streaming community, you can tap into a larger pool of viewers, gain credibility, and foster a supportive environment that encourages mutual growth and success. + Having good networking opens up collaboration opportunities, cross-promotion, and exposure to each other’s audiences. By forming connections within the streaming community, you can tap into a larger pool of viewers, gain credibility, and foster a supportive environment that encourages mutual growth and success. --- @@ -65,20 +65,20 @@ Having good networking opens up collaboration opportunities, cross-promotion, an - ### Don't get distracted by chat -One concern for many new coworking streamers is that they are worried about ignoring chat. This is the hard part! It's important (and very tempting) to interact with your community but it's also important you are able to get your work done. That's the point after all!. Remember you're there to work so try not to feel guilty about ignoring new people - it's useful to have mods who can do this for you instead. And you can always chat with them in your breaktime! If you're too busy to answer questions, it can be useful to have a command like !muted to let new people know that you are trying to focus and will chat later. + One concern for many new coworking streamers is that they are worried about ignoring chat. This is the hard part! It's important (and very tempting) to interact with your community but it's also important you are able to get your work done. That's the point after all!. Remember you're there to work so try not to feel guilty about ignoring new people - it's useful to have mods who can do this for you instead. And you can always chat with them in your breaktime! If you're too busy to answer questions, it can be useful to have a command like !muted to let new people know that you are trying to focus and will chat later. - ### Don't self promote -Hopping on chat and mention anything about your own stream is considered self-promotion and can be considered rude, especially when no permission was granted. + Hopping on chat and mention anything about your own stream is considered self-promotion and can be considered rude, especially when no permission was granted. - ### Don't worry about view count -Just focus on your work. + Just focus on your work. -- ### Avoid using Display Capture +- ### Don't use Display Capture without blurring or minimizing -Some coworking streamers may have Display Capture source on their primary pomodoro scene for extra accountability. However, this may leak sensitive information such as Email, full name, credentials etc. + Some coworking streamers may have Display Capture source on their primary pomodoro scene for extra accountability. However, this may leak sensitive information such as Email, full name, credentials etc. -It is recommended to blur it, or make your Display Capture source very small until no text content is readable. + It is recommended to blur it, or make your Display Capture source very small until no text content is readable. --- \ No newline at end of file diff --git a/src/pages/guide/music-and-audio.md b/src/pages/guide/music-and-audio.mdx similarity index 93% rename from src/pages/guide/music-and-audio.md rename to src/pages/guide/music-and-audio.mdx index 86cf581..9abb508 100644 --- a/src/pages/guide/music-and-audio.md +++ b/src/pages/guide/music-and-audio.mdx @@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro" description: Learn how to add music or audio for your coworking streams! order: 1 --- +import { Image } from 'astro:assets'; +import SixKLabs from "./_images/music-and-audio/6klabs.webp"; +import PixelChat from "./_images/music-and-audio/pixelchat.webp"; +import AudioSettings from "./_images/music-and-audio/audio_settings.webp"; # Music and Audio @@ -83,7 +87,9 @@ Streaming audio from Spotify to streaming services such as Twitch is against Spo ### [6K Labs πŸ”—](https://6klabs.com/) -6K Labs widget + + 6K Labs widget + - Easy to implement - Available for YouTube Music and Spotify @@ -98,7 +104,7 @@ Streaming audio from Spotify to streaming services such as Twitch is against Spo ### [Pixel Chat πŸ”—](https://pixelchat.tv/) -Pixel Chat widget +Pixel Chat widget - Shows what you're playing via Spotify, Apple Music etc. - Includes other widgets for shoutouts, captions and counters @@ -147,7 +153,7 @@ If you’re streaming on Twitch using OBS, you can easily avoid getting your VOD ### Easy way (have two different outputs) -Audio settings +Audio settings 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: diff --git a/src/pages/guide/stream-bots.md b/src/pages/guide/stream-bots.md index 871e86b..72359c7 100644 --- a/src/pages/guide/stream-bots.md +++ b/src/pages/guide/stream-bots.md @@ -27,6 +27,8 @@ Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protec ### [MohCitrus πŸ”—](https://www.twitch.tv/MohCitrus/about) +![MohCitrus](./_images/bots/mohcitrus.webp) +
    Available on: @@ -36,7 +38,6 @@ Available on: MohCitrus is a translator bot made by [MohFocus (Twitch)](https://twitch.tv/MohFocus)! It can translate messages of viewers to any language via commands! -![MohCitrus](/images/bots/mohcitrus.webp) ### [Nightbot πŸ”—](https://nightbot.tv/) diff --git a/src/pages/guide/stream-layout.md b/src/pages/guide/stream-layouts.mdx similarity index 68% rename from src/pages/guide/stream-layout.md rename to src/pages/guide/stream-layouts.mdx index dbe434c..614b05a 100644 --- a/src/pages/guide/stream-layout.md +++ b/src/pages/guide/stream-layouts.mdx @@ -4,6 +4,10 @@ layout: "../../layouts/GuideLayout.astro" description: Learn how to moderate your coworking streams! order: 2 --- +import { Image } from 'astro:assets'; +import Canva from "./_images/layouts/canva.webp"; +import Figma from "./_images/layouts/figma.webp"; +import Pexels from "./_images/layouts/pexels.webp" # Stream Layouts @@ -13,12 +17,20 @@ An organized layout structures information effectively, allowing viewers to easi ## [Canva πŸ”—](https://www.canva.com/) + +Canva + + 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 + + Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. --- @@ -27,6 +39,10 @@ Figma is a collaborative web application for interface design, with additional o ### [Pexels πŸ”—](https://www.pexels.com/license/) + +Pexels + + Pexels provides high quality and completely free stock photos licensed under the Pexels license. All photos are nicely tagged, searchable and also easy to discover through our discover pages. ### [The Noun Project πŸ”—](https://thenounproject.com/) @@ -72,5 +88,17 @@ These principles are used extensively in various fields like design, art, and ad Some cool YouTube videos on this topic if you want some inspiration! - [How-to: Easy "Graphic Design" on Google Slides (for VTubers and Streamers)](https://youtu.be/VoF-Qk_tWgU) + + + +
    + - [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 + + + +
    + +- [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.mdx similarity index 61% rename from src/pages/guide/stream-widgets.md rename to src/pages/guide/stream-widgets.mdx index 88f84e0..b734488 100644 --- a/src/pages/guide/stream-widgets.md +++ b/src/pages/guide/stream-widgets.mdx @@ -4,8 +4,17 @@ layout: "../../layouts/GuideLayout.astro" description: Stream widgets for your coworking streams! order: 4 --- +import { Image } from 'astro:assets'; +import MohMinimalTimer from "./_images/widgets/moh-minimal-timer.webp"; +import MayukoPomo from "./_images/widgets/mayuko-pomo.webp"; +import Pomofocus from "./_images/widgets/pomofocus.webp"; +import RythonTaskBot from "./_images/widgets/rythontaskbot.webp"; +import MultiTask from "./_images/widgets/multitask.webp"; +import SuperSweetBot from "./_images/widgets/supersweetbot.webp"; +import PixelChat from "./_images/music-and-audio/pixelchat.webp"; +import SixKLabs from "./_images/music-and-audio/6klabs.webp"; -# Stream widgets +# Stream Widgets Widgets to add to your stream! @@ -19,7 +28,9 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also #### [MohFocus' Minimal Pomo Timer πŸ”—](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer) -[![Minimal Pomo Timer](/images/widgets/moh-minimal-timer.webp)](https://github.com/mohamed-tayeh/Minimal-Pomo-Timer) + + Minimal Pomo Timer + - Twitch only - Easy to setup and customize @@ -28,7 +39,9 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also #### [Mayuko's Pomodoro Countdown Timer πŸ”—](https://github.com/hellomayuko/Pomodoro-Countdown) -Mayuko Pomodoro Countdown Timer + + Mayuko Pomodoro Countdown Timer + - Easy to setup and customize - Interactive through OBS @@ -37,7 +50,7 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also #### [Pomofocus πŸ”—](https://pomofocus.io/) -pomofocus +pomofocus - You can also add tasks to do on the web page @@ -49,7 +62,9 @@ A task list widget is a great way to keep track of your tasks along with your ch ### [Rython Task Bot πŸ”—](https://github.com/liyunze-coding/chat-task-tic-overlay-infinity) -Rython Task Bot + +Rython Task Bot + - Free and open source - Easy to use, setup and customize @@ -59,7 +74,9 @@ A task list widget is a great way to keep track of your tasks along with your ch ### [Multi-task Widget πŸ”—](https://ko-fi.com/s/94e7e8dc81) -Multi Task Widget + +Multi Task Widget + - $30 USD on ko-fi - Easy to use, setup and customize @@ -70,7 +87,9 @@ A task list widget is a great way to keep track of your tasks along with your ch ### [Super Sweet Bot πŸ”—](https://www.patreon.com/super_sweet_bot) -Super Sweet Bot + +Super Sweet Bot + - €3 / month - Comes with a Pomo Timer @@ -85,7 +104,9 @@ Display what you're playing on Spotify or YouTube Music! ### [6K Labs πŸ”—](https://6klabs.com/) -6K Labs widget + +6K Labs widget + - Easy to implement - Available for YouTube Music and Spotify @@ -100,7 +121,9 @@ Display what you're playing on Spotify or YouTube Music! ### [Pixel Chat πŸ”—](https://pixelchat.tv/) -Pixel Chat widget + +Pixel Chat widget + - Shows what you're playing via Spotify, Apple Music etc. - Includes other widgets for shoutouts, captions and counters diff --git a/src/pages/tutorials/Ad-manager.mdx b/src/pages/tutorials/Ad-manager.mdx new file mode 100644 index 0000000..80bb055 --- /dev/null +++ b/src/pages/tutorials/Ad-manager.mdx @@ -0,0 +1,31 @@ +--- +title: Ad manager +layout: "../../layouts/GuideLayout.astro" +description: Add an ad manager to your OBS dock! +order: 2 +--- +import { Image } from 'astro:assets'; +import DocksToCustomDocks from "./_images/ad-manager/Docks-to-Custom-Docks.webp"; + +# Ad Manager + +You can add an Ad Manager to your OBS dock to easily manage your ads. This is especially useful to keep track of your ad breaks and to be able to run an ad break with a single click. + +--- + +## How to setup an Ad Manager + +1. Open OBS and go to the dock where you want to add the Ad Manager.\ + Docks to Custom Docks + +2. Under "Dock Name", enter "Ad Manager" or any other name you want. + +3. Under URL, enter the following URL: + + `https://dashboard.twitch.tv/popout/u/YOUR_USERNAME_HERE/stream-manager/quick-actions` + + Replace `YOUR_USERNAME_HERE` with your Twitch username. + +4. Click "Apply". + +5. Under "Docks", you can now see the Ad Manager dock. Click it to open the Ad Manager dock. diff --git a/src/pages/tutorials/OBS.mdx b/src/pages/tutorials/OBS.mdx new file mode 100644 index 0000000..f4c1b7f --- /dev/null +++ b/src/pages/tutorials/OBS.mdx @@ -0,0 +1,42 @@ +--- +title: How to setup OBS +layout: "../../layouts/GuideLayout.astro" +description: Learn how to setup OBS! +order: 0 +--- +import { Image } from 'astro:assets'; +import StudyWithMeYT from "./_images/obs/study-with-me-youtube-live.webp"; + +# How to setup OBS + +Although OBS may seem intimidating, it's very easy to navigate around after you finish setting up and familiarize yourself with interface! + +--- + +## YouTube Tutorial for OBS Twitch setup + + + +Check out this video from Hammer Dance on how to setup OBS! Note that this is targeted towards those who want to stream to Twitch! + +--- + +## How to setup for study streams + +If you want a simple, step-by-step guide on how to get started with study streaming on YouTube, check out [this article from Girl Knows Tech](https://girlknowstech.com/study-with-me-obs/)! + + +Study with me YouTube + + +Although it's made for YouTube, the steps are very similar for Twitch! + +--- + +If you want more options for different widgets and layouts, check out the other pages in this guide! + +- Stream Widgets +- Stream Layouts + +--- + diff --git a/src/pages/tutorials/Simulcast.mdx b/src/pages/tutorials/Simulcast.mdx new file mode 100644 index 0000000..4c891cd --- /dev/null +++ b/src/pages/tutorials/Simulcast.mdx @@ -0,0 +1,14 @@ +--- +title: Simulcasting +layout: "../../layouts/GuideLayout.astro" +description: Stream to multiple streaming platforms with a free plugin! +order: 1 +--- + +# How to simulcast to multiple platforms + +Simulcasting is a great way to reach a wider audience by streaming to multiple platforms at once! + +--- + + \ No newline at end of file diff --git a/src/pages/tutorials/_images/ad-manager/Docks-to-Custom-Docks.webp b/src/pages/tutorials/_images/ad-manager/Docks-to-Custom-Docks.webp new file mode 100644 index 0000000..229d02e Binary files /dev/null and b/src/pages/tutorials/_images/ad-manager/Docks-to-Custom-Docks.webp differ diff --git a/src/pages/tutorials/_images/obs/study-with-me-youtube-live.webp b/src/pages/tutorials/_images/obs/study-with-me-youtube-live.webp new file mode 100644 index 0000000..5f6b4cb Binary files /dev/null and b/src/pages/tutorials/_images/obs/study-with-me-youtube-live.webp differ diff --git a/src/pages/tutorials/_images/sery-bot/sery_bot.webp b/src/pages/tutorials/_images/sery-bot/sery_bot.webp new file mode 100644 index 0000000..7f77c1f Binary files /dev/null and b/src/pages/tutorials/_images/sery-bot/sery_bot.webp differ diff --git a/src/pages/tutorials/closed-captions.md b/src/pages/tutorials/closed-captions.md new file mode 100644 index 0000000..6de8da4 --- /dev/null +++ b/src/pages/tutorials/closed-captions.md @@ -0,0 +1,16 @@ +--- +title: Closed Captions +layout: "../../layouts/GuideLayout.astro" +description: Add Closed Captions to your streams! +order: 1 +--- + +# Closed Captions (OBS Plugin) + +Did you know? Captions can greatly improve engagement, as [80% of viewers prefer video subtitles](https://www.kapwing.com/resources/subtitle-statistics/). + +Add some captions to your stream to improve accessibility and engagement for your streams! + +--- + + \ No newline at end of file diff --git a/src/pages/tutorials/sery-bot.mdx b/src/pages/tutorials/sery-bot.mdx new file mode 100644 index 0000000..60681c2 --- /dev/null +++ b/src/pages/tutorials/sery-bot.mdx @@ -0,0 +1,28 @@ +--- +title: Sery bot +layout: "../../layouts/GuideLayout.astro" +description: Add a layer of protection for your streams! +order: 1 +--- +import { Image } from 'astro:assets'; +import SeryBot from "./_images/sery-bot/sery_bot.webp"; + +# Sery Bot + +Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers. + +--- + +Sery bot + +## [Sery Bot Carrd πŸ”—](https://serycodes.carrd.co/) + +Click [here](https://serycodes.carrd.co/) for more information about Sery Bot. + +## How to setup? + +1. Click on https://sery.bot/auth, to authorize with your Twitch account. +2. After authorizing, you should be redirected to the Sery_bot's stream. +3. Enter `/mod Sery_bot` in your own chat. +4. Enter `!join` in the chat to join the bot to your channel. +5. You can now use the bot in your channel! Try `!followban` in Sery_bot's chat to confirm. \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs index 88a2ebb..47b672d 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -5,7 +5,14 @@ module.exports = { extend: { backgroundImage: (theme) => ({ "hero-gradient": - "linear-gradient(to right, #3F84D8, aquamarine, #C65BCF)", + "linear-gradient(to right, #3F84D8, aquamarine)", + "cowo-pink": "#FF7782", + secondary: "#171717", + primary: "#fafafa", + "primary-green": "#8DECB4", + "dark-green": "#45513f", + "primary-blue": "#3F84D8", + "light-blue": "#B3C6F9", }), keyframes: { rotate: { @@ -51,8 +58,10 @@ module.exports = { "cowo-pink": "#FF7782", secondary: "#171717", primary: "#fafafa", - "primary-green": "#88D47D", + "primary-green": "#8DECB4", + "dark-green": "#45513f", "primary-blue": "#3F84D8", + "light-blue": "#B3C6F9", }, spacing: { auto: "auto", @@ -88,13 +97,13 @@ module.exports = { }, h1: { marginBottom: "0.5rem", - fontSize: "2.25rem", + fontSize: "2.75rem", fontWeight: "bold", scrollMarginTop: "3.7rem", }, h2: { marginBottom: "0.5rem", - marginTop: "1.25rem", + marginTop: "1.5rem", fontSize: "1.875rem", fontWeight: "bold", scrollMarginTop: "3.7rem", @@ -117,11 +126,12 @@ module.exports = { marginBottom: "0.5rem", marginTop: "0.5rem", fontFamily: "system-ui", + fontSize: "1rem", lineHeight: "1.75rem", }, hr: { margin: "2.5rem 0", - borderColor: "#718096", + // borderColor: "#add19c", }, "ul, ol": { listStylePosition: "outside", @@ -146,8 +156,8 @@ module.exports = { code: { borderRadius: "0.375rem", backgroundColor: "#323232", - padding: "0.25rem 0.5rem", - fontFamily: "monospace, courier-new", + padding: "0.5rem 0.5rem", + fontFamily: "monospace", fontSize: "0.875rem", }, });