mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 13:13:34 +00:00
first commit on UI change
This commit is contained in:
liyunze
parent
eefc92f715
commit
eccf9ad06f
26 changed files with 7505 additions and 8095 deletions
4
.prettierrc
Normal file
4
.prettierrc
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"plugins": ["prettier-plugin-tailwindcss"],
|
||||||
|
"tabWidth": 4
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,7 @@
|
||||||
import { defineConfig } from "astro/config";
|
import { defineConfig } from "astro/config";
|
||||||
|
|
||||||
import tailwind from "@astrojs/tailwind";
|
import tailwind from "@astrojs/tailwind";
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [tailwind()],
|
integrations: [tailwind()]
|
||||||
experimental: {
|
|
||||||
viewTransitions: true,
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
123
draft.md
Normal file
123
draft.md
Normal file
|
|
@ -0,0 +1,123 @@
|
||||||
|
# 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.
|
||||||
12756
package-lock.json
generated
12756
package-lock.json
generated
File diff suppressed because it is too large
Load diff
37
package.json
37
package.json
|
|
@ -1,19 +1,22 @@
|
||||||
{
|
{
|
||||||
"name": "coworking-guide",
|
"name": "coworking-guide",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "1.0.0",
|
"version": "2.0.0",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview",
|
"preview": "astro preview",
|
||||||
"astro": "astro"
|
"astro": "astro"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@astrojs/tailwind": "^3.1.3",
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
"@vercel/analytics": "^1.0.1",
|
"@vercel/analytics": "^1.0.1",
|
||||||
"astro": "^2.10.7",
|
"astro": "^4.4.1",
|
||||||
"caniuse-lite": "^1.0.30001576",
|
"tailwindcss": "^3.4.1"
|
||||||
"tailwindcss": "^3.3.2"
|
},
|
||||||
}
|
"devDependencies": {
|
||||||
|
"prettier": "^3.2.5",
|
||||||
|
"prettier-plugin-tailwindcss": "^0.5.11"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
BIN
public/fonts/Inter-Medium.ttf
Normal file
BIN
public/fonts/Inter-Medium.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Inter-Regular.ttf
Normal file
BIN
public/fonts/Inter-Regular.ttf
Normal file
Binary file not shown.
Binary file not shown.
12
src/components/PreBlock.astro
Normal file
12
src/components/PreBlock.astro
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
---
|
||||||
|
import { Prism } from "@astrojs/prism";
|
||||||
|
const props = Astro.props;
|
||||||
|
---
|
||||||
|
|
||||||
|
<!-- Code block, include copy button -->
|
||||||
|
<pre
|
||||||
|
class="language-js">
|
||||||
|
<code class="language-js">
|
||||||
|
<slot />
|
||||||
|
</code>
|
||||||
|
</pre>
|
||||||
|
|
@ -1,257 +1,109 @@
|
||||||
<div transition:persist class="w-full">
|
<div
|
||||||
<label
|
transition:persist
|
||||||
class="fixed flex hamburger-menu bg-primary border-2 border-solid border-gray-100 p-2 rounded-lg"
|
transition:name="navbar"
|
||||||
aria-label="Menu"
|
class="w-full fixed text-white bg-secondary z-50 text-lg py-3 font-['Inter'] border-b border-solid border-gray-800 h-[--header-height]"
|
||||||
>
|
>
|
||||||
<span class="top-bun"></span>
|
<div
|
||||||
<input type="checkbox" aria-label="Toggle menu" />
|
class="mx-auto relative lg:px-8 max-w-7xl flex flex-row justify-between items-center gap-3"
|
||||||
<span class="bottom-bun"></span>
|
>
|
||||||
</label>
|
<div
|
||||||
<aside class="sidebar flex z-20">
|
class="lg:flex-1 flex items-center text-xl select-none"
|
||||||
<nav class="flex flex-col capitalize" role="navigation">
|
transition:name="cowo-logo"
|
||||||
<a
|
>
|
||||||
class="sidebar-url px-5 py-2 mt-10 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
<a
|
||||||
href="/"
|
href="/"
|
||||||
title="Go to the home page">home</a
|
class="no-target-blank no-underline text-white hover:no-underline"
|
||||||
>
|
>
|
||||||
<a
|
Coworking <span class="font-bold">Guide</span>
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
</a>
|
||||||
href="/about"
|
</div>
|
||||||
title="Go to the about page">about</a
|
<div class="flex items-center gap-10">
|
||||||
>
|
<a
|
||||||
<a
|
class="no-target-blank hover:underline text-white"
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
href="/get-started/introduction">Get started</a
|
||||||
href="/tips"
|
>
|
||||||
title="Go to the tips page">tips</a
|
<a
|
||||||
>
|
class="no-target-blank hover:underline text-white"
|
||||||
<a
|
href="/guide/general-tips">Guide</a
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
>
|
||||||
href="/specs"
|
<a class="no-target-blank hover:underline text-white" href="/blog"
|
||||||
title="Go to the specs page">specs</a
|
>Blog</a
|
||||||
>
|
>
|
||||||
<a
|
<a class="no-target-blank hover:underline text-white" href="/groups"
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
>Groups</a
|
||||||
href="/bots"
|
>
|
||||||
title="Go to the bots page">bots</a
|
<a
|
||||||
>
|
class="no-target-blank hover:underline text-white"
|
||||||
<a
|
href="/credits">Credits</a
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
>
|
||||||
href="/widgets"
|
</div>
|
||||||
title="Go to the widgets page">widgets</a
|
<div
|
||||||
>
|
class="flex lg:flex-1 justify-end"
|
||||||
<a
|
transition:name="display-toggle"
|
||||||
class="sidebar-url px-5 py-2 mt-2 text-center rounded-md hover:text-gray-600 hover:bg-gray-100 transition-colors duration-500"
|
>
|
||||||
href="/groups"
|
<button id="theme-toggle" type="button" class="">
|
||||||
title="Go to the widgets page">groups</a
|
<svg
|
||||||
>
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
</nav>
|
viewBox="0 0 24 24"
|
||||||
</aside>
|
fill="currentColor"
|
||||||
<div
|
class="w-6 h-6"
|
||||||
id="navbar"
|
>
|
||||||
class="absolute top-0 w-full hidden md:flex justify-center bg-gray-800 shadow-md shadow-gray-900"
|
<path
|
||||||
>
|
fill-rule="evenodd"
|
||||||
<div
|
d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
|
||||||
id="navbar-div"
|
clip-rule="evenodd"></path>
|
||||||
class="pt-2 mr-5 capitalize w-full pb-1 flex flex-row justify-center text-lg"
|
</svg>
|
||||||
>
|
</button>
|
||||||
<a
|
</div>
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
</div>
|
||||||
href="/">home</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/about">about</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/tips">tips</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/specs">specs</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/bots">bots</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/widgets">widgets</a
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
class="px-3 mx-2 py-1 text-white hover:bg-gray-200 hover:text-black transition-colors duration-500 rounded-md"
|
|
||||||
href="/groups">groups</a
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<script defer>
|
||||||
:root {
|
function updateDarkModeIcon() {
|
||||||
--bar-width: 30px;
|
const darkModeToggle = document.querySelector("#theme-toggle");
|
||||||
--bar-height: 4px;
|
const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||||
--hamburger-gap: 6px;
|
const moonSVG = `
|
||||||
--foreground: #111827;
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
--background: white;
|
<path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
|
||||||
--hamburger-margin: 20px;
|
</svg>
|
||||||
--animation-timing: 200ms ease-in-out;
|
`;
|
||||||
--hamburger-height: calc(
|
const sunSVG = `
|
||||||
var(--bar-height) * 3 + var(--hamburger-gap) * 2
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
|
||||||
);
|
<path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
|
||||||
}
|
</svg>
|
||||||
|
`;
|
||||||
|
|
||||||
.hamburger-menu {
|
if (darkModeToggle) {
|
||||||
--x-width: calc(var(--hamburger-height) * 1.41421356237);
|
if (isDarkMode) {
|
||||||
|
darkModeToggle.innerHTML = moonSVG;
|
||||||
|
} else {
|
||||||
|
darkModeToggle.innerHTML = sunSVG;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const darkModeToggle = document.querySelector("#theme-toggle");
|
||||||
|
|
||||||
translate: 0 -200px;
|
if (!localStorage.getItem("theme")) {
|
||||||
flex-direction: column;
|
localStorage.setItem("theme", "dark");
|
||||||
|
}
|
||||||
|
|
||||||
gap: var(--hamburger-gap);
|
if (darkModeToggle) {
|
||||||
width: max-content;
|
darkModeToggle.addEventListener("click", () => {
|
||||||
top: var(--hamburger-margin);
|
const isDarkMode = localStorage.getItem("theme") === "dark";
|
||||||
right: var(--hamburger-margin);
|
|
||||||
z-index: 30;
|
|
||||||
cursor: pointer;
|
|
||||||
background: var(--foreground);
|
|
||||||
|
|
||||||
rotate: 180deg;
|
if (isDarkMode) {
|
||||||
|
localStorage.setItem("theme", "light");
|
||||||
|
document.documentElement.classList.remove("dark");
|
||||||
|
} else {
|
||||||
|
localStorage.setItem("theme", "dark");
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
}
|
||||||
|
|
||||||
transition: translate var(--animation-timing);
|
updateDarkModeIcon();
|
||||||
}
|
});
|
||||||
|
}
|
||||||
|
|
||||||
.hamburger-menu input:focus-visible {
|
window.onload = function () {
|
||||||
border: 1px solid var(--background);
|
updateDarkModeIcon();
|
||||||
box-shadow: 0 0 0 1px var(--foreground);
|
};
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-menu input,
|
|
||||||
.hamburger-menu span {
|
|
||||||
content: "";
|
|
||||||
width: var(--bar-width);
|
|
||||||
height: var(--bar-height);
|
|
||||||
background-color: white;
|
|
||||||
border-radius: 9999px;
|
|
||||||
transform-origin: left center;
|
|
||||||
transition: opacity var(--animation-timing),
|
|
||||||
width var(--animation-timing), rotate var(--animation-timing),
|
|
||||||
translate var(--animation-timing),
|
|
||||||
background-color var(--animation-timing);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-menu input {
|
|
||||||
appearance: none;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
outline: none;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-menu .top-bun.active {
|
|
||||||
rotate: 45deg;
|
|
||||||
width: var(--x-width);
|
|
||||||
translate: 0 calc(var(--bar-height) / -2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-menu .bottom-bun.active {
|
|
||||||
rotate: -45deg;
|
|
||||||
width: var(--x-width);
|
|
||||||
translate: 0 calc(var(--bar-height) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.hamburger-menu input:checked {
|
|
||||||
opacity: 0;
|
|
||||||
width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
transition: translate var(--animation-timing);
|
|
||||||
translate: 100%;
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
padding-top: calc(
|
|
||||||
var(--hamburger-height) + var(--hamburger-margin) + 1rem
|
|
||||||
);
|
|
||||||
background-color: var(--foreground);
|
|
||||||
color: var(--background);
|
|
||||||
max-width: 10rem;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script defer is:inline>
|
|
||||||
const sidebar = document.querySelectorAll(".sidebar-url");
|
|
||||||
const hamburger = document.querySelector(".hamburger-menu");
|
|
||||||
const checkbox = document.querySelector("input");
|
|
||||||
|
|
||||||
const topBun = document.querySelector(".top-bun");
|
|
||||||
const bottomBun = document.querySelector(".bottom-bun");
|
|
||||||
|
|
||||||
const openSideBar = () => {
|
|
||||||
checkbox.checked = true;
|
|
||||||
document.querySelector(".sidebar").style.translate = "0";
|
|
||||||
topBun.classList.add("active");
|
|
||||||
bottomBun.classList.add("active");
|
|
||||||
};
|
|
||||||
|
|
||||||
const closeSideBar = () => {
|
|
||||||
checkbox.checked = false;
|
|
||||||
document.querySelector(".sidebar").style.translate = "100%";
|
|
||||||
topBun.classList.remove("active");
|
|
||||||
bottomBun.classList.remove("active");
|
|
||||||
};
|
|
||||||
|
|
||||||
// for each sidebar url, if clicked on, uncheck the checkbox
|
|
||||||
sidebar.forEach((url) => {
|
|
||||||
url.addEventListener("click", () => {
|
|
||||||
closeSideBar();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (window.innerWidth < 768) {
|
|
||||||
hamburger.style.translate = "0 0";
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("scroll", () => {
|
|
||||||
if (window.scrollY > 50 || window.innerWidth < 768) {
|
|
||||||
hamburger.style.translate = "0 0";
|
|
||||||
} else {
|
|
||||||
hamburger.style.translate = "0 -200px";
|
|
||||||
closeSideBar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// if clicked outside of the hamburger menu, close the sidebar
|
|
||||||
window.addEventListener("click", (e) => {
|
|
||||||
if (
|
|
||||||
e.target !== hamburger &&
|
|
||||||
e.target !== topBun &&
|
|
||||||
e.target !== bottomBun &&
|
|
||||||
e.target !== checkbox &&
|
|
||||||
e.target !== document.querySelector(".sidebar") &&
|
|
||||||
e.target !== document.querySelector(".sidebar nav")
|
|
||||||
) {
|
|
||||||
closeSideBar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// if window is resized, check if it's less than 768px
|
|
||||||
window.addEventListener("resize", () => {
|
|
||||||
if (window.innerWidth < 768) {
|
|
||||||
hamburger.style.translate = "0 0";
|
|
||||||
} else {
|
|
||||||
hamburger.style.translate = "0 -200px";
|
|
||||||
closeSideBar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// if checked, translate the sidebar
|
|
||||||
checkbox.addEventListener("change", () => {
|
|
||||||
if (checkbox.checked) {
|
|
||||||
openSideBar();
|
|
||||||
} else {
|
|
||||||
closeSideBar();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
1
src/env.d.ts
vendored
1
src/env.d.ts
vendored
|
|
@ -1 +1,2 @@
|
||||||
|
/// <reference path="../.astro/types.d.ts" />
|
||||||
/// <reference types="astro/client" />
|
/// <reference types="astro/client" />
|
||||||
|
|
|
||||||
196
src/layouts/GuideLayout.astro
Normal file
196
src/layouts/GuideLayout.astro
Normal file
|
|
@ -0,0 +1,196 @@
|
||||||
|
---
|
||||||
|
import Layout from "./Layout.astro";
|
||||||
|
|
||||||
|
type Navigation = Record<string, { title: string; url: string }[]>;
|
||||||
|
type Heading = {
|
||||||
|
depth: number;
|
||||||
|
text: string;
|
||||||
|
slug: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function formatTitle(title: string): string {
|
||||||
|
return title
|
||||||
|
.split("-")
|
||||||
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
|
.join(" ");
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function setup() {
|
||||||
|
// setup navigation
|
||||||
|
const markdownFiles = await Astro.glob("../pages/**/*.md");
|
||||||
|
const navigation: Navigation = {};
|
||||||
|
|
||||||
|
for (const file of markdownFiles) {
|
||||||
|
const filePath = file.url;
|
||||||
|
const [_, category] = filePath!.split("/");
|
||||||
|
const formattedCategory = formatTitle(category);
|
||||||
|
const formattedTitle = file.frontmatter.title;
|
||||||
|
|
||||||
|
if (!navigation[formattedCategory]) {
|
||||||
|
navigation[formattedCategory] = [];
|
||||||
|
}
|
||||||
|
|
||||||
|
navigation[formattedCategory].push({
|
||||||
|
title: formattedTitle,
|
||||||
|
url: filePath || "",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// sort, make Get Started first, Guide second
|
||||||
|
const sortedNavigation: Navigation = {};
|
||||||
|
Object.keys(navigation)
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a === "Get Started") return -1;
|
||||||
|
if (b === "Get Started") return 1;
|
||||||
|
if (a === "Guide") return -1;
|
||||||
|
if (b === "Guide") return 1;
|
||||||
|
return 0;
|
||||||
|
})
|
||||||
|
.forEach((key) => {
|
||||||
|
sortedNavigation[key] = navigation[key];
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
navigation: sortedNavigation,
|
||||||
|
markdownFiles,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const { frontmatter, headings } = Astro.props;
|
||||||
|
const { navigation } = await setup();
|
||||||
|
---
|
||||||
|
|
||||||
|
<Layout title={frontmatter.title} description={frontmatter.description}>
|
||||||
|
<div class="pt-20 mx-auto px-4 sm:px-6 max-w-7xl">
|
||||||
|
<div class="flex flex-col lg:grid lg:grid-cols-10">
|
||||||
|
<!-- vertical navbar -->
|
||||||
|
<div class="lg:col-span-2" transition:name="vertical-navbar">
|
||||||
|
<aside
|
||||||
|
class="hidden overflow-y-auto lg:block lg:sticky py-8 lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
||||||
|
>
|
||||||
|
<div class="relative">
|
||||||
|
<nav class="flex flex-col">
|
||||||
|
{
|
||||||
|
Object.entries(navigation).map(
|
||||||
|
([category, links]) => (
|
||||||
|
<div class="mb-4">
|
||||||
|
<h3 class="text-lg font-bold mb-1 mt-0">
|
||||||
|
{category}
|
||||||
|
</h3>
|
||||||
|
<ul class="list-disc list-inside">
|
||||||
|
{links.map((link) => (
|
||||||
|
<li class="mb-2 pl-0">
|
||||||
|
<a
|
||||||
|
href={link.url}
|
||||||
|
class="no-target-blank text-white hover:underline"
|
||||||
|
>
|
||||||
|
{link.title}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
<div class="lg:col-span-8">
|
||||||
|
<div class="flex flex-col lg:grid lg:grid-cols-10">
|
||||||
|
<div class="col-span-8 pr-10 pb-10 pt-8">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="col-span-2 pt-8 lg:block lg:sticky lg:px-4 lg:-mx-4 lg:max-h-[calc(100vh-var(--header-height))] lg:top-[--header-height]"
|
||||||
|
>
|
||||||
|
<!-- TOC -->
|
||||||
|
<h3
|
||||||
|
class="text-lg font-bold mb-2 mt-0"
|
||||||
|
transition:name="Table of Content"
|
||||||
|
>
|
||||||
|
Table of Contents
|
||||||
|
</h3>
|
||||||
|
<ul class="list-outside list-disc text-sm">
|
||||||
|
{
|
||||||
|
headings.map(
|
||||||
|
(heading: Heading, index: number) => {
|
||||||
|
if (heading.depth === 1) return;
|
||||||
|
const margin = `${(heading.depth - 1) * 2}rem`;
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
style={{ marginLeft: margin }}
|
||||||
|
class="mb-2 pl-0"
|
||||||
|
>
|
||||||
|
<a
|
||||||
|
href={`#${heading.slug}`}
|
||||||
|
class="no-target-blank text-white hover:underline"
|
||||||
|
>
|
||||||
|
{heading.text}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style is:global>
|
||||||
|
h1 {
|
||||||
|
@apply text-3xl font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
@apply mt-5 scroll-mt-[calc(20px+var(--header-height))] text-2xl font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
@apply mt-5 scroll-mt-[calc(17px+var(--header-height))] text-xl font-bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
@apply mb-2 mt-2 font-[system-ui] leading-6;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
@apply my-10 border-gray-500;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
@apply list-outside list-disc leading-7;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
@apply my-4 border-l-4 border-gray-500 pl-4;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
@apply text-blue-400 hover:underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul ul {
|
||||||
|
@apply mb-2 ml-5 list-[circle];
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li {
|
||||||
|
@apply mb-1;
|
||||||
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
@apply mb-4 rounded-lg bg-[#303030] p-4;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
// make all <a> attributes have target="_blank" except for Table of Contents
|
||||||
|
document.querySelectorAll("a:not(.no-target-blank)").forEach((el) => {
|
||||||
|
el.setAttribute("target", "_blank");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</Layout>
|
||||||
|
|
@ -3,163 +3,210 @@ import NavBar from "../components/navBar.astro";
|
||||||
import { ViewTransitions } from "astro:transitions";
|
import { ViewTransitions } from "astro:transitions";
|
||||||
|
|
||||||
export interface Props {
|
export interface Props {
|
||||||
title: string;
|
title: string;
|
||||||
description: string;
|
description: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { title, description } = Astro.props;
|
const { title, description } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<!DOCTYPE html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="description" content={description} />
|
<meta name="description" content={description} />
|
||||||
<meta name="keywords" content="coworking, study, streams" />
|
<meta name="keywords" content="coworking, study, streams" />
|
||||||
<meta name="author" content="RyanPython" />
|
<meta name="author" content="RyanPython" />
|
||||||
<meta name="theme-color" content="#2B2D31" />
|
<meta name="theme-color" content="#2B2D31" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<meta name="viewport" content="width=device-width" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||||
<script defer src="/_vercel/insights/script.js"></script>
|
<script defer src="/_vercel/insights/script.js"></script>
|
||||||
<ViewTransitions />
|
<ViewTransitions />
|
||||||
<meta name="generator" content={Astro.generator} />
|
<meta name="generator" content={Astro.generator} />
|
||||||
<title>{title}</title>
|
<title>{title}</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<slot />
|
<slot />
|
||||||
|
|
||||||
<style is:global>
|
<style is:global>
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Fredoka";
|
font-family: "Fredoka";
|
||||||
src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
|
src: url("/fonts/Fredoka-Bold.ttf") format("truetype");
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Fredoka";
|
font-family: "Fredoka";
|
||||||
src: url("/fonts/Fredoka-Light.ttf") format("truetype");
|
src: url("/fonts/Fredoka-Light.ttf") format("truetype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Fredoka";
|
font-family: "Fredoka";
|
||||||
src: url("/fonts/Fredoka-Medium.ttf") format("truetype");
|
src: url("/fonts/Fredoka-Medium.ttf") format("truetype");
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Fredoka";
|
font-family: "Fredoka";
|
||||||
src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
|
src: url("/fonts/Fredoka-Regular.ttf") format("truetype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Montserrat";
|
font-family: "Montserrat";
|
||||||
src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
|
src: url("/fonts/Montserrat-Bold.ttf") format("truetype");
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Montserrat";
|
font-family: "Montserrat";
|
||||||
src: url("/fonts/Montserrat-Light.ttf") format("truetype");
|
src: url("/fonts/Montserrat-Light.ttf") format("truetype");
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Montserrat";
|
font-family: "Montserrat";
|
||||||
src: url("/fonts/Montserrat-Medium.ttf") format("truetype");
|
src: url("/fonts/Montserrat-Medium.ttf") format("truetype");
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Montserrat";
|
font-family: "Montserrat";
|
||||||
src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
|
src: url("/fonts/Montserrat-Regular.ttf") format("truetype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Montserrat";
|
font-family: "Montserrat";
|
||||||
src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
|
src: url("/fonts/Montserrat-SemiBold.ttf") format("truetype");
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Poppins";
|
font-family: "Poppins";
|
||||||
src: url("/fonts/Poppins-Light.ttf") format("truetype");
|
src: url("/fonts/Poppins-Light.ttf") format("truetype");
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Poppins";
|
font-family: "Poppins";
|
||||||
src: url("/fonts/Poppins-Medium.ttf") format("truetype");
|
src: url("/fonts/Poppins-Medium.ttf") format("truetype");
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Poppins";
|
font-family: "Poppins";
|
||||||
src: url("/fonts/Poppins-Regular.ttf") format("truetype");
|
src: url("/fonts/Poppins-Regular.ttf") format("truetype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
@font-face {
|
||||||
box-sizing: border-box;
|
font-family: "Inter";
|
||||||
margin: 0;
|
src: url("/fonts/Inter-Regular.ttf") format("truetype");
|
||||||
padding: 0;
|
font-weight: normal;
|
||||||
}
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
html {
|
@font-face {
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
font-family: "Inter";
|
||||||
background-color: #29233f;
|
src: url("/fonts/Inter-Medium.ttf") format("truetype");
|
||||||
}
|
font-weight: 500;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
html,
|
:root {
|
||||||
body {
|
--header-height: 3.5rem;
|
||||||
min-height: 100%;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
* {
|
||||||
height: 100vh;
|
box-sizing: border-box;
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
margin: 0;
|
||||||
}
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
code {
|
html {
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
font-family: system-ui, sans-serif;
|
||||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New,
|
background-color: #171717;
|
||||||
monospace;
|
color: rgb(255 255 255);
|
||||||
}
|
}
|
||||||
|
|
||||||
nav {
|
html,
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
body {
|
||||||
font-weight: 500;
|
min-height: 100%;
|
||||||
}
|
/* smooth scroll */
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
nav ul a {
|
body {
|
||||||
text-decoration: none;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.preview {
|
code {
|
||||||
text-decoration: none;
|
font-family:
|
||||||
}
|
Menlo,
|
||||||
|
Monaco,
|
||||||
|
Lucida Console,
|
||||||
|
Liberation Mono,
|
||||||
|
DejaVu Sans Mono,
|
||||||
|
Bitstream Vera Sans Mono,
|
||||||
|
Courier New,
|
||||||
|
monospace;
|
||||||
|
}
|
||||||
|
|
||||||
p code {
|
nav {
|
||||||
word-break: break-all; /* This will allow the URL to break at any character */
|
font-family: system-ui, sans-serif;
|
||||||
display: block; /* Ensures the entire URL is on its own line */
|
font-weight: 500;
|
||||||
width: 100%; /* Make sure the code element takes up the full width of its container */
|
}
|
||||||
overflow-x: auto;
|
|
||||||
}
|
nav ul a {
|
||||||
</style>
|
text-decoration: none;
|
||||||
</body>
|
}
|
||||||
|
|
||||||
|
a.preview {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
p code {
|
||||||
|
word-break: break-all; /* This will allow the URL to break at any character */
|
||||||
|
display: block; /* Ensures the entire URL is on its own line */
|
||||||
|
width: 100%; /* Make sure the code element takes up the full width of its container */
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script is:inline>
|
||||||
|
const theme = (() => {
|
||||||
|
if (
|
||||||
|
typeof localStorage !== "undefined" &&
|
||||||
|
localStorage.getItem("theme")
|
||||||
|
) {
|
||||||
|
return localStorage.getItem("theme");
|
||||||
|
}
|
||||||
|
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
|
||||||
|
return "dark";
|
||||||
|
}
|
||||||
|
return "light";
|
||||||
|
})();
|
||||||
|
|
||||||
|
if (theme === "light") {
|
||||||
|
document.documentElement.classList.remove("dark");
|
||||||
|
} else {
|
||||||
|
document.documentElement.classList.add("dark");
|
||||||
|
}
|
||||||
|
window.localStorage.setItem("theme", theme);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "./Layout.astro";
|
|
||||||
|
|
||||||
export interface Props {
|
|
||||||
frontmatter: {
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const { frontmatter } = Astro.props;
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title={frontmatter.title} description={frontmatter.description}>
|
|
||||||
<div class="pt-12 w-full flex flex-col justify-center items-center">
|
|
||||||
<article class="w-5/6 md:w-3/4 lg:w-2/3 py-10">
|
|
||||||
<slot />
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style is:global>
|
|
||||||
* {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
html {
|
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
|
||||||
color: #fff;
|
|
||||||
background-color: #29233f;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
min-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
height: 100vh;
|
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
code {
|
|
||||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
|
|
||||||
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
font-family: "Montserrat", system-ui, sans-serif;
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav ul a {
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
@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 underline underline-offset-2 decoration-1 hover:text-blue-400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hyperlink {
|
|
||||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
|
|
||||||
Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
|
|
||||||
sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul {
|
|
||||||
list-style-position: inside;
|
|
||||||
padding-left: 1rem;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "../layouts/Layout.astro";
|
|
||||||
|
|
||||||
// plans:
|
|
||||||
// - what is coworking
|
|
||||||
// - how the overlays benefit
|
|
||||||
// - why did I open source
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="About" description="About the creator of this website + FAQ">
|
|
||||||
<div class="h-full flex flex-col text-white">
|
|
||||||
<div class="w-full h-full flex flex-col justify-center items-center">
|
|
||||||
<div
|
|
||||||
class="w-4/5 lg:w-2/3 flex flex-col justify-center items-center text-center"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src="/assets/circle_logo.webp"
|
|
||||||
alt="ryan logo"
|
|
||||||
width="200"
|
|
||||||
class="mb-10"
|
|
||||||
/>
|
|
||||||
<h1 class="text-5xl font-bold">About</h1>
|
|
||||||
<p class="mt-5 text-lg mb-5">
|
|
||||||
Hello, I'm <span class="font-bold">Ryan</span>, a computer
|
|
||||||
science student based in Malaysia. The objective of this
|
|
||||||
website is to offer valuable resources to aspiring
|
|
||||||
streamers, helping them enhance their streaming experience!
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
If you want to learn more about me, check out my <a
|
|
||||||
href="https://ryanpython.me"
|
|
||||||
target="_blank"
|
|
||||||
class="underline underline-offset-2 transition-colors duration-500 hover:text-blue-500"
|
|
||||||
>website</a
|
|
||||||
> or my <a
|
|
||||||
href="https://www.twitch.tv/RythonDev"
|
|
||||||
target="_blank"
|
|
||||||
class="underline underline-offset-2 transition-colors duration-500 hover:text-blue-500"
|
|
||||||
>stream</a
|
|
||||||
>!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="w-full h-full flex flex-col text-white">
|
|
||||||
<div
|
|
||||||
class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
|
|
||||||
>
|
|
||||||
<h2 class="font-bold text-2xl mb-5">
|
|
||||||
What are Coworking & Study streams?
|
|
||||||
</h2>
|
|
||||||
<p class="w-4/5 lg:w-1/2">
|
|
||||||
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!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit py-5 sm:py-0 sm:h-1/3 flex flex-col justify-center items-center text-center"
|
|
||||||
>
|
|
||||||
<h2 class="font-bold text-2xl mb-5">
|
|
||||||
How can this guide benefit me?
|
|
||||||
</h2>
|
|
||||||
<p class="w-4/5 lg:w-1/2">
|
|
||||||
This guide has been created to help out coworking and study
|
|
||||||
streamers by providing tips and resources to enhance the
|
|
||||||
streaming experience!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="w-full h-fit py-5 sm:py-0 sm:h-1/3 bg-gray-900 flex flex-col justify-center items-center text-center"
|
|
||||||
>
|
|
||||||
<h2 class="font-bold text-2xl mb-5">
|
|
||||||
Why should I stream myself working?
|
|
||||||
</h2>
|
|
||||||
<p class="w-4/5 lg:w-1/2">
|
|
||||||
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!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
@ -1,37 +0,0 @@
|
||||||
---
|
|
||||||
title: Bots
|
|
||||||
layout: "../layouts/Markdown.astro"
|
|
||||||
description: Find out the bots you can use for your stream!
|
|
||||||
---
|
|
||||||
|
|
||||||
# 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!\)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://nightbot.tv/" target="_blank" class="font-bold text-2xl hover:underline">Nightbot 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://nightbot.tv/" target="_blank" class="hover:underline">Nightbot</a> 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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://serycodes.carrd.co/" target="_blank" class="font-bold text-2xl hover:underline">Sery Bot 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://serycodes.carrd.co/" target="_blank" class="hover:underline">Sery Bot</a> is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://twitch.tv/MohCitrus/about" target="_blank" class="font-bold text-2xl hover:underline">MohCitrus 🔗</a>
|
|
||||||
|
|
||||||
<img src="/assets/mohcitrus.webp" width="300" class="mb-1">
|
|
||||||
|
|
||||||
<a href="https://twitch.tv/MohCitrus/about" target="_blank" class="hover:underline">MohCitrus</a> is a translator bot made by <a href="https://twitch.tv/MohFocus" target="_blank" class="underline hover:text-blue-400">MohFocus</a>! 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 <a href="https://github.com/instafluff/comfyjs" target="_blank" class="underline">Comfy.JS</a> made by Instafluff!
|
|
||||||
18
src/pages/get-started/introduction.md
Normal file
18
src/pages/get-started/introduction.md
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
---
|
||||||
|
title: Introduction
|
||||||
|
layout: "../../layouts/GuideLayout.astro"
|
||||||
|
description: Introduction to coworking streams!
|
||||||
|
---
|
||||||
|
|
||||||
|
# Introduction
|
||||||
|
|
||||||
|
A brief introduction to coworking streams! Let's keep each other accountable ^^
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## What are coworking streams?
|
||||||
|
|
||||||
|
> 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!
|
||||||
|
|
||||||
51
src/pages/get-started/pre-requisites.md
Normal file
51
src/pages/get-started/pre-requisites.md
Normal file
|
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
title: Pre-requisites
|
||||||
|
layout: "../../layouts/GuideLayout.astro"
|
||||||
|
description: Pre-requisites for coworking streams!
|
||||||
|
---
|
||||||
|
|
||||||
|
# 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.
|
||||||
|
|
@ -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!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://www.twitch.tv/team/coworkingcrew/" target="_blank" class="font-bold text-2xl hover:underline">Coworking Crew 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://www.twitch.tv/team/coworkingcrew" target="_blank" class="inline-block mt-2 mb-5">
|
|
||||||
<img src="/assets/coworkingcrew.webp" alt="coworking crew" width="300" class="rounded-md">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://theselfdev.com/" target="_blank" class="font-bold text-2xl hover:underline">Self.dev 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://theselfdev.com/" target="_blank" class="inline-block mt-2 mb-5">
|
|
||||||
<img src="/assets/selfdev_logo.webp" alt="self dev" width="300" class="rounded-md">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://www.youthversity.org/" target="_blank" class="font-bold text-2xl hover:underline">YOUthversity 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://www.youthversity.org/" target="_blank" class="inline-block mt-2 mb-5">
|
|
||||||
<img src="/assets/youthversity.webp" alt="youthversity" width="300" class="rounded-md">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://erudita.me/" target="_blank" class="font-bold text-2xl hover:underline">Erudita 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://erudita.me/" target="_blank" class="inline-block mt-2 mb-5">
|
|
||||||
<img src="/assets/erudita.webp" alt="erudita" width="300" class="rounded-md">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
<a href="https://studytme.com/" target="_blank" class="font-bold text-2xl hover:underline">CEO Gang 🔗</a>
|
|
||||||
|
|
||||||
<a href="https://studytme.com/" target="_blank" class="inline-block mt-2 mb-5">
|
|
||||||
<img src="/assets/ceogang.webp" alt="ceo gang" width="300" class="rounded-md">
|
|
||||||
</a>
|
|
||||||
|
|
||||||
The right place for ambitious people working together and supporting each other! Make friends, learn and work remote!
|
|
||||||
|
|
||||||
---
|
|
||||||
74
src/pages/guide/general-tips.md
Normal file
74
src/pages/guide/general-tips.md
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
---
|
||||||
|
title: General Tips
|
||||||
|
layout: "../../layouts/GuideLayout.astro"
|
||||||
|
description: General tips for your coworking streams!
|
||||||
|
---
|
||||||
|
|
||||||
|
# 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.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 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 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.
|
||||||
|
|
||||||
15
src/pages/guide/music-and-audio.md
Normal file
15
src/pages/guide/music-and-audio.md
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
---
|
||||||
|
title: Music and Audio
|
||||||
|
layout: "../../layouts/GuideLayout.astro"
|
||||||
|
description: Learn how to add music or audio for your coworking streams!
|
||||||
|
---
|
||||||
|
|
||||||
|
# Music and Audio
|
||||||
|
|
||||||
|
Every Coworking & Study stream has their vibe based on their stream audio!
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## how about this
|
||||||
|
|
||||||
|
test
|
||||||
|
|
@ -3,852 +3,60 @@ import Layout from "../layouts/Layout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout
|
<Layout
|
||||||
title="Get started with Coworking streams"
|
title="Get started with Coworking streams"
|
||||||
description="A guide for new and existing coworking streamers!"
|
description="A guide for new and existing coworking streamers!"
|
||||||
>
|
>
|
||||||
<div
|
<div class="relative flex justify-center items-center h-screen">
|
||||||
class="flex flex-col lg:flex-row justify-center items-center text-gray-100 sm:flex-col h-fit min-h-screen"
|
<div class="flex flex-col">
|
||||||
>
|
<div
|
||||||
<div
|
class="text-center text-4xl font-bold font-['Inter'] leading-10"
|
||||||
class="w-full lg:w-2/3 flex flex-col justify-center items-center mt-40 lg:mt-0 mb-10 lg:mb-0"
|
>
|
||||||
>
|
<span class="mb-2">Getting started with</span>
|
||||||
<div
|
<div
|
||||||
class="flex flex-col justify-center items-center lg:items-start text-center lg:text-left"
|
class="bg-clip-text text-transparent bg-gradient-pink-cyan py-2"
|
||||||
>
|
>
|
||||||
<p class="text-xl mb-1 mt-24 lg:mt-0">
|
Coworking streams
|
||||||
How to get started with
|
</div>
|
||||||
</p>
|
</div>
|
||||||
<h1 class="text-2xl lg:text-4xl font-bold">
|
<div class="flex mt-5 items-center gap-10">
|
||||||
Coworking Streams
|
<a
|
||||||
</h1>
|
href="/get-started/introduction"
|
||||||
<p class="text-lg lg:text-xl mt-2">
|
class="bg-cowo-pink text-white
|
||||||
For coworking & study streamers on Twitch
|
text-lg
|
||||||
</p>
|
px-5 py-2
|
||||||
<p class="text-lg mt-0 md:hidden">
|
rounded-md font-medium
|
||||||
Click on the navigation icon on the top right to get
|
duration-150
|
||||||
started!
|
hover:text-cowo-pink hover:bg-white"
|
||||||
</p>
|
>
|
||||||
<p class="text-lg mt-0 hidden md:block">
|
Get started
|
||||||
Click on the navigation bar above to get started!
|
</a>
|
||||||
</p>
|
<a
|
||||||
</div>
|
href="/guide/general-tips"
|
||||||
</div>
|
class="font-medium flex items-center text-lg
|
||||||
<div
|
hover:underline
|
||||||
class="w-full lg:w-1/3 h-full flex flex-col justify-center items-center"
|
duration-150"
|
||||||
>
|
>
|
||||||
<a
|
Check out our guide <svg
|
||||||
href="/widgets#task-list-widget"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
class="preview w-full flex items-center justify-center"
|
fill="none"
|
||||||
>
|
viewBox="0 0 24 24"
|
||||||
<div
|
stroke-width="1.5"
|
||||||
class="task-list w-5/6 flex flex-col rounded-md overflow-hidden mb-10 lg:mb-0 border border-solid border-white hover:shadow-gray-200 hover:shadow-lg transition duration-300 ease-in-out"
|
stroke="currentColor"
|
||||||
>
|
class="w-4 h-4"
|
||||||
<div
|
>
|
||||||
class="task-list-header text-2xl flex flex-row justify-between bg-gray-900 px-5 py-3 rounded-md z-10 border border-solid border-b-white"
|
<path
|
||||||
>
|
stroke-linecap="round"
|
||||||
<div id="widget-title" class="font-bold">!taskhelp</div>
|
stroke-linejoin="round"
|
||||||
<div>1/65</div>
|
d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
|
||||||
</div>
|
</svg>
|
||||||
<div class="task-list-body px-1">
|
</a>
|
||||||
<div
|
</div>
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
</div>
|
||||||
>
|
<!-- <div
|
||||||
<div
|
class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
>
|
||||||
>
|
</div> -->
|
||||||
RyanPython
|
</div>
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span class="line-through">build this website</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
MohFocus
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>resolve merge conflict</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-green-400"
|
|
||||||
>
|
|
||||||
j3dg
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>spin class</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
berryspace
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>setup coworking stream</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-600"
|
|
||||||
>
|
|
||||||
CloudyDayzzz
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>interpret sign language</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-600"
|
|
||||||
>
|
|
||||||
pcc_lanezzz
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>torture Poco</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
lala_xitlali
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>buy more fabric</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-green-600"
|
|
||||||
>
|
|
||||||
xeno_hiraeth
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>diagnose patients</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
opoemperdernida
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>rutina de la mañana</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-300"
|
|
||||||
>
|
|
||||||
4l1c3_0
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>mental breakdance</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
studywithjojo
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>get into NHS</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
StudyPaws
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>identify cow breeds</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
mikewhatwhere
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>become a dietician</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-red-500"
|
|
||||||
>
|
|
||||||
AuspexOneGaming
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>grade papers</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-red-500"
|
|
||||||
>
|
|
||||||
BossOnCamera
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>get into Kyoto University</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
samkitkat
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>codewars exercises</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-green-300"
|
|
||||||
>
|
|
||||||
euphie___
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be a cinnamon roll</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
charliosaurus
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>praise the lord Jesus Christ</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-orange-600"
|
|
||||||
>
|
|
||||||
unknownnie
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>grow a sprout</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
imJamJams
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>feed the mods</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
itsbrandonut
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>music stream</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
nihnesyo
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>release new Lofi EP</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
warpyn
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>release new song cover</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
shadygepril
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>studying for A-Levels</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-300"
|
|
||||||
>
|
|
||||||
Extelso
|
|
||||||
</div>
|
|
||||||
<div class="mr-1 max-w-[55%]">:</div>
|
|
||||||
<span>show off stream layout</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-400"
|
|
||||||
>
|
|
||||||
Bubxmicn
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>drive a truck</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
theyolotato
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>read smut</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-orange-400"
|
|
||||||
>
|
|
||||||
sneakymoon_
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>edit YouTube vlogs</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
nanakitchen
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>annoy sneakymoon_</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-orange-600"
|
|
||||||
>
|
|
||||||
pinsaregood
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be an instagram influencer</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
wasmishtaken_
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>simp for levi</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-300"
|
|
||||||
>
|
|
||||||
Jutstreams
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>play geoguessr</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
GuluTwitch
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>take care of Gulu</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
j2modest
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>penetration testing</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-200"
|
|
||||||
>
|
|
||||||
nachoburrit0
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>play Apex for charity</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-500"
|
|
||||||
>
|
|
||||||
clarissawrites
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>10,000 words essay</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-[#aae2cd]"
|
|
||||||
>
|
|
||||||
PottleLive
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span class="max-w-[75%]"
|
|
||||||
>Promote Erudita and protest the french
|
|
||||||
government</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
long1nteger
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span class="max-w-[65%]"
|
|
||||||
>work on the next AI project for self.dev</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-red-400"
|
|
||||||
>
|
|
||||||
Elly78456
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>sell merch</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-400"
|
|
||||||
>
|
|
||||||
sunfflawer
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be clingy</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-100"
|
|
||||||
>
|
|
||||||
xhumming
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>feed Emmy</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-500"
|
|
||||||
>
|
|
||||||
arcaneXVIII
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>babysit</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
OOPmarie
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>React project</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-indigo-400"
|
|
||||||
>
|
|
||||||
Seijisoldier
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>Be the tallest in the room</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
StudySmrt
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be the youngest in the room</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
anchigaming
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>love kirby</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-green-500"
|
|
||||||
>
|
|
||||||
brisim_claimhte
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>love kiki</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
Chieysse
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>play Valorant</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-yellow-400"
|
|
||||||
>
|
|
||||||
lyricalclove
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>commit arson with Calcifer</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-200"
|
|
||||||
>
|
|
||||||
hillabunny
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>play Valorant</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
StudyStreamKen
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be drunk</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[75%] overflow-hidden overflow-ellipsis text-orange-400"
|
|
||||||
>
|
|
||||||
Supernaturalwriter
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be the fittest in the DnD group</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-500"
|
|
||||||
>
|
|
||||||
KhrowV
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>caw caw</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-indigo-400"
|
|
||||||
>
|
|
||||||
michiimiya
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be a cult leader</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
Chiichyan
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>practice piano</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
mindiigo
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>hit Ascendant in Valorant</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-pink-400"
|
|
||||||
>
|
|
||||||
RosieDream_
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be a lawyer</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-400"
|
|
||||||
>
|
|
||||||
MemouriArt
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>design T-shirts</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[75%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
study_with_flowergirl
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>be a flower</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-blue-400"
|
|
||||||
>
|
|
||||||
sunnyblue_
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>mod for Ranboo</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-orange-500"
|
|
||||||
>
|
|
||||||
SquaredMo
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>play Valorant deathmatch</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-gray-200"
|
|
||||||
>
|
|
||||||
triplefattypatty
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>travel around the world</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-orange-600"
|
|
||||||
>
|
|
||||||
JettesHus
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>Furniture restoration</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[55%] overflow-hidden overflow-ellipsis text-blue-400"
|
|
||||||
>
|
|
||||||
Bli_FlowState
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>Make productivity youtube videos</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="flex flex-row justify-start items-start bg-gray-700 px-5 py-2 rounded-md mt-1"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="font-bold max-w-[45%] overflow-hidden overflow-ellipsis text-purple-400"
|
|
||||||
>
|
|
||||||
wafflesdot025
|
|
||||||
</div>
|
|
||||||
<div class="mr-1">:</div>
|
|
||||||
<span>skip class</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
||||||
<style>
|
<style></style>
|
||||||
.task-list {
|
|
||||||
font-family: "Poppins", sans-serif;
|
|
||||||
|
|
||||||
height: 500px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-list-header {
|
|
||||||
font-family: "Fredoka", sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* scroll up and down automatically keyframes*/
|
|
||||||
@keyframes scroll {
|
|
||||||
0% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
10% {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
90% {
|
|
||||||
transform: translateY(calc(-100% + 435px));
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: translateY(calc(-100% + 435px));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-list-header {
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.task-list-body {
|
|
||||||
animation: scroll 30s linear alternate infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
#widget-title {
|
|
||||||
transition: all 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fade {
|
|
||||||
animation: fade 1s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fade {
|
|
||||||
0% {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<script defer is:inline>
|
|
||||||
const taskListTitles = ["Click here!", "!taskhelp"];
|
|
||||||
|
|
||||||
const widgetTitle = document.querySelector("#widget-title");
|
|
||||||
|
|
||||||
let index = 0;
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
widgetTitle.classList.add("fade");
|
|
||||||
setTimeout(() => {
|
|
||||||
widgetTitle.classList.remove("fade");
|
|
||||||
}, 1000);
|
|
||||||
|
|
||||||
widgetTitle.textContent = taskListTitles[index];
|
|
||||||
|
|
||||||
index++;
|
|
||||||
|
|
||||||
if (index === taskListTitles.length) {
|
|
||||||
index = 0;
|
|
||||||
}
|
|
||||||
}, 5000);
|
|
||||||
</script>
|
|
||||||
|
|
|
||||||
|
|
@ -1,97 +0,0 @@
|
||||||
---
|
|
||||||
title: Specifications
|
|
||||||
layout: "../layouts/Markdown.astro"
|
|
||||||
description: Find out the minimum computer specification requirements for coworking streams!
|
|
||||||
---
|
|
||||||
|
|
||||||
<!--
|
|
||||||
https://help.twitch.tv/s/article/broadcasting-guidelines?language=en_US
|
|
||||||
https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c
|
|
||||||
-->
|
|
||||||
|
|
||||||
# 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.
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>CPU</summary>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>GPU (optional)</summary>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>RAM</summary>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Storage</summary>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>Internet speed</summary>
|
|
||||||
|
|
||||||
The better the internet connection, the better the streaming experience. You can check your internet speed at <a href="https://www.speedtest.net" target="_blank" class="underline hover:text-blue-400">speedtest.net</a>.
|
|
||||||
|
|
||||||
**The ideal internet for streaming**: At least 5 Mbps upload speed, preferably 10 Mbps or more.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
|
|
||||||
<summary>Peripherals</summary>
|
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
|
|
||||||
<summary>Bitrate</summary>
|
|
||||||
|
|
||||||
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 <a href="https://www.reddit.com/r/Twitch/comments/2dz7ru/bitrates_resolutions_and_quality/" target="_blank" class="underline hover:text-blue-400">in depth guide from Reddit</a> to learn more!
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
|
|
||||||
<summary>Streaming software</summary>
|
|
||||||
|
|
||||||
There are many streaming software options available, but the most popular one is <a href="https://obsproject.com/" target="_blank" class="underline hover:text-blue-400">OBS Studio</a>!
|
|
||||||
|
|
||||||
Check out this <a href="https://youtu.be/9idPREZzWpE" target="_blank" class="underline hover:text-blue-400">YouTube video made by Hammer Dance</a> on how to setup OBS!
|
|
||||||
|
|
||||||
If you're using macOS and you're struggling with Desktop Audio issues, check out this <a href="https://www.youtube.com/watch?v=H4VPbMvBuLg" target="_blank" class="underline hover:text-blue-400">video</a> on how to setup BlackHole Audio!
|
|
||||||
|
|
||||||
If you're streaming on mobile, the Twitch mobile app has a built-in streaming feature!
|
|
||||||
|
|
||||||
</details>
|
|
||||||
|
|
@ -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 <a href="https://twitch.uservoice.com/forums/310210-discover/suggestions/46004791-coworking" target="_blank" class="underline font-bold hover:text-blue-400">Coworking and Study category</a> 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 <a href="https://youtu.be/0Lj5rkqSp48/" target="_blank" class="underline hover:text-blue-400">video</a> 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 <a href="https://help.twitch.tv/s/article/emote-guidelines?language=en_US#instantupload" target="_blank" class="underline hover:text-blue-400">Instant Upload Privilege</a>!
|
|
||||||
|
|
||||||
### 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
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li><a href="https://betterttv.com/" target="_blank" class="underline hover:text-blue-400">Download BetterTTV</a></li>
|
|
||||||
<li><a href="https://www.frankerfacez.com/" target="_blank" class="underline hover:text-blue-400">Download FrankerFaceZ</a></li>
|
|
||||||
<li><a href="https://7tv.app/" target="_blank" class="underline hover:text-blue-400">Download 7TV</a></li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
You won't run into any issues using all three extensions at once!
|
|
||||||
|
|
||||||
Only want to use one extension? <a href="https://www.frankerfacez.com/" target="_blank" class="underline hover:text-blue-400">FrankerFaceZ</a> 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 <a href="https://www.youtube.com/watch?v=H4VPbMvBuLg" target="_blank" class="underline hover:text-blue-400">video</a> on how to setup BlackHole Audio!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## References
|
|
||||||
|
|
||||||
Please take a look at <a href="https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c" target="_blank" class="underline underline-offset-2 hover:text-blue-400">A Coworking Streamer Cheat Sheet</a> for more information!
|
|
||||||
|
|
@ -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
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/mohamed-tayeh/Minimal-Pomo-Timer" target="_blank" class="hyperlink">https://github.com/mohamed-tayeh/Minimal-Pomo-Timer</a> *
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/njallam/stream-pomodoro" target="_blank" class="hyperlink">https://github.com/njallam/stream-pomodoro</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://ecard.enter-media.org/widgets/" target="_blank" class="hyperlink">https://ecard.enter-media.org/widgets/</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/hellomayuko/Pomodoro-Countdown" target="_blank" class="hyperlink">https://github.com/hellomayuko/Pomodoro-Countdown</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://pixelchat.tv/" target="_blank" class="hyperlink">https://pixelchat.tv/</a> *
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/liyunze-coding/streamodoro" target="_blank" class="hyperlink">https://github.com/liyunze-coding/streamodoro</a> *
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
\* 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!
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://pomofocus.io/" target="_blank" class="hyperlink">https://pomofocus.io/</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://www.timeanddate.com/timer/" target="_blank" class="hyperlink">https://www.timeanddate.com/timer/</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://pomodor.app/timer" target="_blank" class="hyperlink">https://pomodor.app/timer</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://tomato-timer.com/" target="_blank" class="hyperlink">https://tomato-timer.com/</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://pomodoro-tracker.com/" target="_blank" class="hyperlink">https://pomodoro-tracker.com/</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
Do check beforehand the volumes for the alarms, as sometimes they may be startling or distracting for viewers if not expected!
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Task list widget
|
|
||||||
|
|
||||||
<div class="flex flex-col sm:flex-row mb-5">
|
|
||||||
<img src="/assets/moh-task-list.webp" class="rounded-md mr-5 w-56 h-56 mb-5 sm:mb-0">
|
|
||||||
<img src="/assets/ryanpython-task-list.webp" class="rounded-md w-60 h-56">
|
|
||||||
</div>
|
|
||||||
|
|
||||||
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
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<a href="https://youtu.be/-5EdJcvDuFQ" target="_blank" class="hyperlink">
|
|
||||||
https://youtu.be/-5EdJcvDuFQ
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" target="_blank" class="hyperlink">
|
|
||||||
https://github.com/liyunze-coding/Chat-Task-Tic-Overlay-Infinity
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/liyunze-coding/Chat-Task-Tic-Overlay-Horizontal" target="_blank" class="hyperlink">
|
|
||||||
https://github.com/liyunze-coding/Chat-Task-Tic-Overlay-Horizontal
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<a href="https://github.com/mohamed-tayeh/Task-List" target="_blank" class="hyperlink">
|
|
||||||
https://github.com/mohamed-tayeh/Task-List
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<img src="/assets/multi-task.webp" class="rounded-md mb-5 mt-10 w-68 h-56">
|
|
||||||
|
|
||||||
If you're interested in a task list widget that allows you to add multiple tasks at a time, check out <a href="https://www.twitch.tv/RythonDev" target="_blank" class="underline hover:text-blue-400">RythonDev's stream</a> and learn more about the multi-task widget <a href="https://github.com/liyunze-coding/Chat-Task-Tic-Overlay/blob/main/MultiTask.md" target="_blank" class="underline hover:text-blue-400">here</a>! 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:
|
|
||||||
|
|
||||||
<a href="https://6klabs.com/" target="_blank" class="font-bold underline hover:text-blue-400">6K Labs</a>: A widget that shows what you're playing via Spotify or YouTube music. Many customization options provided for free.
|
|
||||||
|
|
||||||
<a href="https://6klabs.com/" target="_blank" class="block w-fit"><img src="/assets/6kLabs.webp" width="300" class="mb-10"></a>
|
|
||||||
|
|
||||||
|
|
||||||
<a href="https://pixelchat.tv/" target="_blank" class="font-bold underline hover:text-blue-400">Pixel Chat</a>: 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.
|
|
||||||
|
|
||||||
<a href="https://pixelchat.tv/" target="_blank" class="block w-fit"><img src="/assets/pixelchat.webp" width="500" class="mb-10"></a>
|
|
||||||
|
|
||||||
<a href="https://spotify.aidenwallis.co.uk/" target="_blank" class="font-bold underline hover:text-blue-400">Aiden Wallis</a>: 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.
|
|
||||||
|
|
||||||
<a href="https://pixelchat.tv/" target="_blank" class="block w-fit"><img src="/assets/aidenwallis.webp" width="500" class="mb-10"></a>
|
|
||||||
|
|
||||||
### Software:
|
|
||||||
|
|
||||||
<a href="https://github.com/dlrudie/Snip/releases" target="_blank" class="font-bold underline hover:text-blue-400">Snip</a>: 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.
|
|
||||||
|
|
||||||
<a href="https://github.com/dlrudie/Snip/releases" target="_blank" class="block w-fit"><img src="/assets/snip.webp" width="500" class="mb-10"></a>
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Other
|
|
||||||
|
|
||||||
You can use Twitch Alerts that can be found in your <a href="https://dashboard.twitch.tv/" target="_blank" class="underline hover:text-blue-400">Twitch Dashboard</a>!
|
|
||||||
|
|
||||||
Want to make your own widget? Check out <a href="https://github.com/instafluff/comfyjs" target="_blank" class="underline">Comfy.JS</a> made by Instafluff!
|
|
||||||
|
|
||||||
P.S. It requires some knowledge of Javascript, HTML and CSS
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Once again, thanks to the creators of the <a href="https://third-stinger-20a.notion.site/A-Coworking-Streamer-Cheat-Sheet-01ee1e5ff006410d84c339069ea6546c" target="_blank" class="underline underline-offset-2 hover:text-blue-400">Coworking Streamer Cheat Sheet</a> for the reference!
|
|
||||||
|
|
@ -1,41 +1,35 @@
|
||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {
|
||||||
},
|
backgroundImage: (theme) => ({
|
||||||
plugins: [
|
"gradient-blob":
|
||||||
function ({ addComponents, theme }) {
|
"linear-gradient(to right, #FF7782, rgba(0,0,0,0))",
|
||||||
addComponents({
|
"gradient-pink-cyan":
|
||||||
h1: {
|
"linear-gradient(to right, #FF7782, #8CC0DE)",
|
||||||
fontSize: theme("fontSize.3xl"),
|
}),
|
||||||
fontWeight: theme("fontWeight.bold"),
|
keyframes: {
|
||||||
marginBottom: theme("margin.2"),
|
rotate: {
|
||||||
},
|
"0%": { transform: "rotate(0deg)" },
|
||||||
h2: {
|
"50%": { scale: "1 1.5" },
|
||||||
fontSize: theme("fontSize.2xl"),
|
"100%": { transform: "rotate(360deg)" },
|
||||||
fontWeight: theme("fontWeight.bold"),
|
},
|
||||||
marginBottom: theme("margin.1"),
|
},
|
||||||
},
|
animation: {
|
||||||
h3: {
|
"spin-slow": "rotate 5s linear infinite",
|
||||||
fontSize: theme("fontSize.xl"),
|
},
|
||||||
fontWeight: theme("fontWeight.bold"),
|
colors: {
|
||||||
marginBottom: theme("margin.1"),
|
"cowo-pink": "#FF7782",
|
||||||
},
|
"secondary": "#171717",
|
||||||
ul: {
|
"primary": "#fafafa",
|
||||||
listStyleType: "disc",
|
},
|
||||||
listStylePosition: "inside",
|
},
|
||||||
marginBottom: theme("margin.2"),
|
},
|
||||||
},
|
variants: {
|
||||||
p: {
|
extend: {
|
||||||
marginBottom: theme("margin.6"),
|
backgroundImage: ["responsive", "hover", "focus", "active"],
|
||||||
lineHeight: theme("lineHeight.7"),
|
},
|
||||||
},
|
},
|
||||||
hr: {
|
plugins: [],
|
||||||
marginTop: theme("margin.6"),
|
|
||||||
marginBottom: theme("margin.6"),
|
|
||||||
},
|
|
||||||
});
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue