diff --git a/draft.md b/draft.md deleted file mode 100644 index 5d98db3..0000000 --- a/draft.md +++ /dev/null @@ -1,123 +0,0 @@ -# Draft - -For me to plan out how the structure of the content. - -## nav bar - -- left: Coworking Guide (leads to home page) -- center: Get Started, Guide, Blog, Credits -- right: Dark mode toggle - -## Get Started - -Get started with streaming - -### What is co-working streaming? - -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! - -### Pre-requisites - -Hardware: -- Internet capacity - - in depth guide from reddit -- RAM -- CPU -- GPU - -Software: -- OBS - -For mobile streamers: -- Good camera -- RAM -- Twitch / YouTube app - -## Guide - -Guide on how to do coworking streams - -### General tips: - -- Should I mute my mic? - - Muting = less distraction, BUT - unmuted + keyboard ASMR / office noise = comfy - -- Don't get distracted by chat - - Distracted by chat = less productivity - -- Fixed schedule - - 1. Sticking to a regular schedule - 2. Viewers can expect when to catch your stream - 3. Good viewer retention - -- Chat commands - - Setup commands for chat to use (!pomo, !muted, !welcome) - -- have control over your advertisements - - ``` - https://dashboard.twitch.tv/popout/u/{{channel}}/stream-manager/streamer-ads-manager-panel - ``` - -- Listen to music without getting vod muted - - https://www.youtube.com/watch?v=0Lj5rkqSp48 - -### Growing your stream tips: - -- Grow your other social medias - - Twitch discovery bad - YouTube (shorts/videos), TikTok, Instagram discovery better - -- Network with other streamers - - Go fast, go alone; go far, go together - -- Good stream layout - - Attractive thumbnail + title - -- Use stream tags - - use `coworking`, `studywithme` tags - -### Closed Captions on Twitch - -https://youtu.be/cQzJL9uoIbg - -### Emotes - -- Setup channel emotes - - 7tv - - Frankerfacez - - BetterTTV - -### Layout - -- Canva -- PixelChat -- TriggerFyre https://overlays.thefyrewire.com/widgets/triggerfyre/ - -### Music - -DMCA-free: -- Lofi Girl -- Chillhop -- Twitch Soundtrack - -- Listen to music without getting vod muted - - https://www.youtube.com/watch?v=0Lj5rkqSp48 - -### Other tips: - -- macOS users, BlackHole Audio: https://www.youtube.com/watch?v=H4VPbMvBuLg -- Don't self-promo -- Don't worry about view count -- Don't spend too much money -- Avoid display / screen capture, unless you blur it / minimize it. Don't leak sensitive info, including personal email / sensitive work related stuff. diff --git a/src/components/blocks/verticalNav.astro b/src/components/blocks/verticalNav.astro index cf5b249..25a8070 100644 --- a/src/components/blocks/verticalNav.astro +++ b/src/components/blocks/verticalNav.astro @@ -17,8 +17,10 @@ export function formatTitle(title: string): string { export async function setup() { // setup navigation - const getStartedFiles = await Astro.glob("../../pages/get-started/*.md"); - const guideFiles = await Astro.glob("../../pages/guide/*.md"); + // MD files + const getStartedFiles = await Astro.glob("../../pages/get-started/*"); + const guideFiles = await Astro.glob("../../pages/guide/*"); + const markdownFiles = [...getStartedFiles, ...guideFiles]; const navigation: Navigation = {}; diff --git a/src/components/ui/BlurBackground.astro b/src/components/ui/BlurBackground.astro index abf3e15..df64360 100644 --- a/src/components/ui/BlurBackground.astro +++ b/src/components/ui/BlurBackground.astro @@ -1,5 +1,5 @@
diff --git a/src/pages/guide/emotes.md b/src/pages/guide/emotes.md index b9f0250..da665a6 100644 --- a/src/pages/guide/emotes.md +++ b/src/pages/guide/emotes.md @@ -2,7 +2,7 @@ title: Emotes layout: "../../layouts/GuideLayout.astro" description: Learn how to add emotes to your streams! -order: 4 +order: 5 --- # Emotes diff --git a/src/pages/guide/moderation-and-trolls.md b/src/pages/guide/moderation-and-trolls.md index 49f9e7c..08e2940 100644 --- a/src/pages/guide/moderation-and-trolls.md +++ b/src/pages/guide/moderation-and-trolls.md @@ -2,7 +2,7 @@ title: Moderation and Trolls layout: "../../layouts/GuideLayout.astro" description: Learn how to moderate your coworking streams! -order: 5 +order: 6 --- # Moderation and Trolls diff --git a/src/pages/guide/bots.md b/src/pages/guide/stream-bots.md similarity index 99% rename from src/pages/guide/bots.md rename to src/pages/guide/stream-bots.md index 915b629..871e86b 100644 --- a/src/pages/guide/bots.md +++ b/src/pages/guide/stream-bots.md @@ -2,7 +2,7 @@ title: Stream Bots layout: "../../layouts/GuideLayout.astro" description: Stream bots for your coworking streams! -order: 2 +order: 3 --- # Stream Bots diff --git a/src/pages/guide/stream-layout.md b/src/pages/guide/stream-layout.md new file mode 100644 index 0000000..c4822a0 --- /dev/null +++ b/src/pages/guide/stream-layout.md @@ -0,0 +1,66 @@ +--- +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. + diff --git a/src/pages/guide/widgets.md b/src/pages/guide/stream-widgets.md similarity index 99% rename from src/pages/guide/widgets.md rename to src/pages/guide/stream-widgets.md index c63cd51..5a6f8fd 100644 --- a/src/pages/guide/widgets.md +++ b/src/pages/guide/stream-widgets.md @@ -2,7 +2,7 @@ title: Stream Widgets layout: "../../layouts/GuideLayout.astro" description: Stream widgets for your coworking streams! -order: 3 +order: 4 --- # Stream widgets diff --git a/tailwind.config.cjs b/tailwind.config.cjs index f2f0bf9..4540510 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -5,7 +5,7 @@ module.exports = { extend: { backgroundImage: (theme) => ({ "gradient-pink-cyan": - "linear-gradient(to right, #FF7782, aquamarine)", + "linear-gradient(to right, #F7418F,#FF7782 , aquamarine)", }), keyframes: { rotate: {