diff --git a/package.json b/package.json index 254476a..47c6410 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "", + "name": "coworking-guide", "type": "module", "version": "0.0.1", "scripts": { diff --git a/public/assets/aidenwallis.webp b/public/assets/aidenwallis.webp new file mode 100644 index 0000000..b2b1e5d Binary files /dev/null and b/public/assets/aidenwallis.webp differ diff --git a/public/assets/moh-task-list.webp b/public/assets/moh-task-list.webp new file mode 100644 index 0000000..03ee121 Binary files /dev/null and b/public/assets/moh-task-list.webp differ diff --git a/public/assets/mohcitrus.webp b/public/assets/mohcitrus.webp new file mode 100644 index 0000000..ae75638 Binary files /dev/null and b/public/assets/mohcitrus.webp differ diff --git a/public/assets/multi-task.webp b/public/assets/multi-task.webp new file mode 100644 index 0000000..1cf5862 Binary files /dev/null and b/public/assets/multi-task.webp differ diff --git a/public/assets/pixelchat.webp b/public/assets/pixelchat.webp new file mode 100644 index 0000000..dd8ee53 Binary files /dev/null and b/public/assets/pixelchat.webp differ diff --git a/public/assets/ryanpython-task-list.webp b/public/assets/ryanpython-task-list.webp new file mode 100644 index 0000000..535fa58 Binary files /dev/null and b/public/assets/ryanpython-task-list.webp differ diff --git a/public/assets/ryanpython_spotify.webp b/public/assets/ryanpython_spotify.webp new file mode 100644 index 0000000..fd105d0 Binary files /dev/null and b/public/assets/ryanpython_spotify.webp differ diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 0000000..eb75e0a Binary files /dev/null and b/public/favicon.ico differ diff --git a/public/favicon.svg b/public/favicon.svg deleted file mode 100644 index f157bd1..0000000 --- a/public/favicon.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - diff --git a/src/components/Card.astro b/src/components/Card.astro deleted file mode 100644 index c68fa2a..0000000 --- a/src/components/Card.astro +++ /dev/null @@ -1,63 +0,0 @@ ---- -export interface Props { - title: string; - body: string; - href: string; -} - -const { href, title, body } = Astro.props; ---- - -
  • - -

    - {title} - → -

    -

    - {body} -

    -     -
    • - diff --git a/src/components/navBar.astro b/src/components/navBar.astro new file mode 100644 index 0000000..070ddca --- /dev/null +++ b/src/components/navBar.astro @@ -0,0 +1,227 @@ +
    + + + +
    + + + + diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 12f32bc..1f54ea5 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,4 +1,6 @@ --- +import NavBar from "../components/navBar.astro"; + export interface Props { title: string; } @@ -12,7 +14,7 @@ const { title } = Astro.props; - + {title} - + diff --git a/src/layouts/Markdown.astro b/src/layouts/Markdown.astro index d090966..3c38085 100644 --- a/src/layouts/Markdown.astro +++ b/src/layouts/Markdown.astro @@ -1,9 +1,13 @@ --- +import NavBar from "../components/navBar.astro"; + export interface Props { - title: string; + frontmatter: { + title: string; + }; } -const { title } = Astro.props; +const { frontmatter } = Astro.props; --- @@ -12,7 +16,7 @@ const { title } = Astro.props; - + - {title} + {frontmatter.title} - +
    -
    +
    -
    +
    @@ -112,6 +83,28 @@ const { title } = Astro.props; } summary { - @apply font-bold text-xl; + @apply font-bold text-2xl py-2 cursor-pointer; + + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ + } + + details { + @apply my-4; + } + + ul li a { + @apply hover:underline underline-offset-2 hover:text-blue-400; + } + + .hyperlink { + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", + sans-serif; } diff --git a/src/pages/about.astro b/src/pages/about.astro index 1a446ce..5889c77 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -59,22 +59,21 @@ import Layout from "../layouts/Layout.astro";

    This guide has been created to help out new (and old) - coworking streamers. + coworking streamers! It contains a bunch of resources that + you can use to enhance your stream, such as interactive + overlays and useful bots.

    - Why did you and other people make these resources open - source? + Why should I stream myself working?

    - Personally, I'm a huge fan of open source software, and I - believe that open source is the future. I want to contribute - to the open source community, and I hope that these overlays - will help you get started with your own coworking or study - stream! + 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!

    diff --git a/src/pages/bots.md b/src/pages/bots.md new file mode 100644 index 0000000..ce7aef8 --- /dev/null +++ b/src/pages/bots.md @@ -0,0 +1,42 @@ +--- +title: Bots +layout: "../layouts/Markdown.astro" +--- + +# Twitch Bots + +Twitch bots are a great way to increase engagement for your viewers and improve your streaming experience. They can also help you manage your stream and chat more effectively. Here are some bots you can use for your stream! + +\(All of these bots are free to use!\) + +--- + +StreamElements + +StreamElements is a great all-in-one tool for streamers. They have a chatbot that you can use to manage your chat and add commands. You can also use it to create overlays and alerts for your stream. + +--- + +Nightbot + +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. + +--- + +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. + +--- + +MohCitrus + + + +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/index.astro b/src/pages/index.astro index 309ead2..0864a5c 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -25,7 +25,7 @@ import Layout from "../layouts/Layout.astro"; class="w-full lg:w-1/3 h-full flex flex-col justify-center items-center" >
    :
    release new Lofi EP
    +
    +
    + Warpyn +
    +
    :
    release new song cover +
    @@ -227,8 +237,8 @@ import Layout from "../layouts/Layout.astro"; > Extelso
    -
    :
    architecturing a new - project +
    :
    show off + stream layout
    pinsaregood
    -
    :
    be instagram influencer +
    :
    be an instagram influencer
    - -
    -
    -

    Overlays

    -
    -
    -

    Task List

    -
    -
    -     diff --git a/src/pages/specs.md b/src/pages/specs.md index 530bd27..dafed23 100644 --- a/src/pages/specs.md +++ b/src/pages/specs.md @@ -10,40 +10,69 @@ layout: "../layouts/Markdown.astro" # Specifications -In this section, we will discuss the minimum computer specification requirements for Coworking and Study streams. The minimum specifications should be suffice for a comfortable streaming and viewing experience. +In this section, we will discuss the minimum computer specification requirements for coworking streams. The minimum specifications should be suffice for a comfortable streaming and viewing experience. -## CPU +
    +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) +
    + +
    +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 more data and instructions it can store at once. +
    +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 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](https://www.speedtest.net/). +
    +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 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. + +
    + +
    + +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 new file mode 100644 index 0000000..dd1c126 --- /dev/null +++ b/src/pages/tips.md @@ -0,0 +1,42 @@ +--- +title: Tips +layout: "../layouts/Markdown.astro" +--- + +# Tips + +Here are some tips for coworking streamers! + +- [To mute or not to mute?](#to-mute-or-not-to-mute) +- [Should I leave chat opened while working?](#should-i-leave-chat-opened-while-working) +- [Fixed schedule](#fixed-schedule) +- [Social media](#social-media) +- [Chat commands for coworking streams](#chat-commands-for-coworking-streams) + +--- + +## To mute or not to mute? + +Most streamers mute themselves during the work sessions because it makes it easier for the viewers to focus. However it's also possible to leave the mic on for keyboard asmr and general "office noise" which many people enjoy - ask your community what they prefer! + +## Should I leave chat opened while working? + +Many new coworking streamers often worry about neglecting chat. It's a tough balancing act! On one hand, you want to engage with your community. But on the other hand, you need to focus on your work. After all, that's the whole point of streaming while coworking! So, try not to feel guilty about not always responding to new people immediately. It's actually quite helpful to have mods who can handle the chat interactions for you. And hey, don't forget that you can always have a nice chat with them during your break time! + +Having commands such as "!muted" or "!speak" can come in handy. It lets newcomers know that you're currently focused and will catch up with them later. Trust me, as time goes by, you'll attract viewers who are also there to work, so the pressure to chat constantly during work hours will naturally ease up. So hang in there! + +## Fixed schedule + +It is often recommended that streamers in general stick to a regular schedule because it allows your community to know when to join your channel. While it's definitely beneficial, it's not a requirement and it's totally fine to be flexible with your streams. If you do have irregular stream times, you might want to think about posting on social media to let your followers know you're live. + +## Social media + +Speaking of social media, it's a great way to let your followers know when you're live! You can also use it to post about your upcoming streams, share your work, and interact with your community. It's a good idea to have a Discord server for your community as well. It's a great way to keep in touch with your viewers and get to know them better! + +## Chat commands for coworking streams + +Chat commands are very useful since you won't be chatting much during the work timer. Some common chat commands you may see include ones that introduce your stream, provide a brief introduction to the pomodoro method (if you use it), or a muted command that may explain why you may be muted (e.g: !welcome !timer !pomo !muted). You may also like to add a command to tell your viewers what you're working on that day (!today !work !study) - this adds a nice personal touch and you can use it to encourage other's to talk about what they're working on too. + +# References + +Please take a look at A Coworking Streamer Cheat Sheet for more information! diff --git a/src/pages/widgets.md b/src/pages/widgets.md new file mode 100644 index 0000000..61c19dd --- /dev/null +++ b/src/pages/widgets.md @@ -0,0 +1,140 @@ +--- +title: Widgets +layout: "../layouts/Markdown.astro" +--- + +# Widgets + +These overlays can be useful for coworking streamers to increase engagement for their viewers! + +--- + +## Pomodoro timer + +A pomodoro timer is a great way to keep track of your work sessions. It's also a great way to let your viewers know when you're taking a break. You can use a pomodoro timer overlay to display the current work session and break time. + +### Browser Source + + + +\* can be called through commands in chat + +### Window Capture + +You can also add timers by using 3rd part websites and then using _window capture_ on your streaming programme! + + + +Do check beforehand the volumes for the alarms, as sometimes they may be startling or distracting for viewers if not expected! + +--- + +## Task list widget + +
    + + +
    + +A task list widget is a great way to keep track of your tasks along with your viewers! For these overlays, you may only add 1 incomplete task at a time. You may only add another task once the previous task is completed. + +### Browser Source + + + + + +If you're interested in a task list overlay that allows you to add multiple tasks at a time, check out RyanPython's stream! + +--- + +## Spotify widget + +A Spotify widget is a great way to let your viewers know what you're listening to! + +### Browser Source: + +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, StreamElements, etc.) that outputs the current song. + + + +RyanPython: A widget that shows what you're playing via Spotify. You can customize the widget to your liking using CSS. + + + +--- + +## General Purpose + +For alerts, chat, and other widgets, it is recommended to use StreamElements! + +#### Resources to get started with StreamElements: + +- Quick-Start Guide +- 10min setup guide by Hammer Dance +- Getting started with StreamElements + +--- + +## Custom widget + +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 36cb226..db478e8 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -25,12 +25,15 @@ module.exports = { ul: { listStyleType: "disc", listStylePosition: "inside", - }, - a: { - textDecoration: "underline", + marginBottom: theme("margin.2"), }, p: { marginBottom: theme("margin.6"), + lineHeight: theme("lineHeight.7"), + }, + hr: { + marginTop: theme("margin.6"), + marginBottom: theme("margin.6"), }, }); },