mirror of
https://github.com/liyunze-coding/coworking-website.git
synced 2026-11-06 13:13:34 +00:00
new games page, focumon sponsor, improved responsiveness
This commit is contained in:
liyunze
parent
ebad694a48
commit
cf658ceea8
16 changed files with 657 additions and 1044 deletions
|
|
@ -25,6 +25,7 @@
|
|||
- [Coworking Guide](#coworking-guide)
|
||||
- [Table of Contents](#table-of-contents)
|
||||
- [Contributing](#contributing)
|
||||
- [Badges](#badges)
|
||||
- [Directive Components](#directive-components)
|
||||
- [Frontmatter](#frontmatter)
|
||||
- [Guide Content](#guide-content)
|
||||
|
|
@ -36,6 +37,12 @@
|
|||
|
||||
Guidelines: TBA
|
||||
|
||||
### Badges
|
||||
|
||||
Use https://badges.pages.dev/ to get badges such as
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Directive Components
|
||||
|
|
|
|||
1519
package-lock.json
generated
1519
package-lock.json
generated
File diff suppressed because it is too large
Load diff
12
package.json
12
package.json
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "coworking-guide",
|
||||
"type": "module",
|
||||
"version": "3.0.0",
|
||||
"version": "4.0.0",
|
||||
"scripts": {
|
||||
"dev": "astro dev",
|
||||
"start": "astro dev",
|
||||
|
|
@ -10,14 +10,14 @@
|
|||
"astro": "astro"
|
||||
},
|
||||
"dependencies": {
|
||||
"@astrojs/mdx": "^2.3.1",
|
||||
"@astrojs/react": "^3.1.0",
|
||||
"@astrojs/tailwind": "^5.1.0",
|
||||
"@astrojs/ts-plugin": "^1.5.3",
|
||||
"@astrojs/mdx": "^3.1.9",
|
||||
"@astrojs/react": "^3.6.2",
|
||||
"@astrojs/tailwind": "^5.1.2",
|
||||
"@astrojs/ts-plugin": "^1.10.4",
|
||||
"@types/react": "^18.2.65",
|
||||
"@types/react-dom": "^18.2.22",
|
||||
"@vercel/analytics": "^1.0.1",
|
||||
"astro": "^4.4.1",
|
||||
"astro": "^4.16.13",
|
||||
"astro-expressive-code": "^0.33.5",
|
||||
"clsx": "^2.1.0",
|
||||
"framer-motion": "^11.0.12",
|
||||
|
|
|
|||
|
|
@ -9,18 +9,19 @@ const items = [
|
|||
"What is Coworking? What are study streams? What's the purpose of it?",
|
||||
link: "/get-started/introduction",
|
||||
},
|
||||
{
|
||||
title: "Games",
|
||||
description:
|
||||
"Check out some gamified tools aimed to enhance your productivity!",
|
||||
link: "/games",
|
||||
},
|
||||
{
|
||||
title: "Tips",
|
||||
description:
|
||||
"Learn some tips to enhance your stream and attract more viewers!",
|
||||
link: "/guide/general-tips",
|
||||
},
|
||||
{
|
||||
title: "Music and Audio",
|
||||
description:
|
||||
"Check out non-copyrighted playlists, non-music background audio and many more!",
|
||||
link: "/guide/music-and-audio",
|
||||
},
|
||||
|
||||
{
|
||||
title: "Groups",
|
||||
description:
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import SearchModal from "../ui/SearchModal.astro";
|
|||
<!-- Vertical Navbar -->
|
||||
<aside
|
||||
id="vertical-navbar"
|
||||
class="sidebar fixed block overflow-y-auto duration-300 z-[60] lg:hidden bg-[#151515] py-8 px-8 h-[calc(100vh-var(--header-height))] top-[--header-height] left-0"
|
||||
class="sidebar fixed block overflow-y-auto duration-300 z-[60] lg:hidden bg-[#151515] py-8 px-8 h-[calc(100vh-var(--header-height))] top-[--header-height] left-0 w-full"
|
||||
transition:persist="vertical-nav-from-left"
|
||||
>
|
||||
<VerticalNav showHome={true} />
|
||||
|
|
@ -54,6 +54,10 @@ import SearchModal from "../ui/SearchModal.astro";
|
|||
class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
|
||||
href="/guide/general-tips">Guide</a
|
||||
>
|
||||
<a
|
||||
class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
|
||||
href="/games">Games</a
|
||||
>
|
||||
<a
|
||||
class="no-target-blank hover:text-black hover:bg-white rounded-md transition-colors duration-300 px-2 py-1 text-white hover:no-underline"
|
||||
href="/groups">Groups</a
|
||||
|
|
@ -184,6 +188,15 @@ import SearchModal from "../ui/SearchModal.astro";
|
|||
if (verticalNavBar) hamburgerMenu.checked = false;
|
||||
});
|
||||
});
|
||||
|
||||
// hamburger menu listen for checked
|
||||
hamburgerMenu.addEventListener("change", function () {
|
||||
if (verticalNavBar) {
|
||||
document.body.style.overflow = hamburgerMenu.checked
|
||||
? "hidden"
|
||||
: "auto";
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.addEventListener("astro:page-load", () => {
|
||||
|
|
|
|||
|
|
@ -119,6 +119,15 @@ const { showHome } = Astro.props;
|
|||
</div>
|
||||
))
|
||||
}
|
||||
<div class="mb-2">
|
||||
<a
|
||||
href="/games"
|
||||
class={`no-target-blank px-2 rounded-md w-full transition-colors duration-150 hover:no-underline hover:text-white text-lg mt-0
|
||||
${isCurrentUrl("/games") ? "text-black bg-primary-green" : "text-gray-400"}`}
|
||||
>
|
||||
Games
|
||||
</a>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<a
|
||||
href="/groups"
|
||||
|
|
|
|||
|
|
@ -137,6 +137,11 @@ const { title, description } = Astro.props;
|
|||
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
aspect-ratio: 16 / 9;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
console.log(
|
||||
|
|
|
|||
BIN
src/pages/games/_images/focumon.webp
Normal file
BIN
src/pages/games/_images/focumon.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/pages/games/_images/weyrdlets.webp
Normal file
BIN
src/pages/games/_images/weyrdlets.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
51
src/pages/games/index.mdx
Normal file
51
src/pages/games/index.mdx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
---
|
||||
title: Games
|
||||
layout: "../../layouts/GuideLayout.astro"
|
||||
description: Find out these "gamified tools" that can improve your productivity!
|
||||
path: "/src/pages/games/index.mdx"
|
||||
---
|
||||
import { Image } from 'astro:assets';
|
||||
import focumon from "./_images/focumon.webp";
|
||||
import weyrdlets from "./_images/weyrdlets.webp";
|
||||
|
||||
# Games
|
||||
|
||||
This page focuses on gamified productivity tools rather than traditional games
|
||||
|
||||
---
|
||||
|
||||
<div class="flex justify-start items-end h-fit gap-10">
|
||||
<a href="https://www.focumon.com/for_streamers" target="_blank">
|
||||
<h2>Focumon 🔗</h2>
|
||||
</a>
|
||||
<div class="bg-[#319c2a] px-2 py-1 w-fit rounded-lg mb-3">Sponsored</div>
|
||||
</div>
|
||||
|
||||
|
||||
<a href="https://www.focumon.com/for_streamers/" target="_blank">
|
||||
<Image src={focumon} alt="Focumon" loading="eager" width="400" class="rounded-sm" />
|
||||
</a>
|
||||
|
||||
Focumon is a charming multiplayer game crafted to make coworking more fun and productive! Team up with your viewers and community to explore unique maps, collect adorable monsters, and unlock their evolutions as you complete co-working sessions together. With a built-in streaming widget and an affiliate program, Focumon also offers an opportunity to earn money while fostering community building.
|
||||
|
||||
Learn more and get started here: https://www.focumon.com/for_streamers
|
||||
|
||||
## [Weyrdlets 🔗](https://weyrdworks.com/weyrdlets)
|
||||
|
||||
<a href="https://weyrdworks.com/weyrdlets" target="_blank">
|
||||
<Image src={weyrdlets} alt="Weyrdlets" loading="lazy" width="400" class="rounded-sm" />
|
||||
</a>
|
||||
|
||||
Weyrdlets is a virtual pet game that harmonizes relaxation with productivity. Collect adorable items, customize your pet and its home, and bring your loving companion to your desktop to boost real-life tasks, enriching your daily routine with a touch of joy and motivation!
|
||||
|
||||
## [PomoFarm 🔗](https://store.steampowered.com/app/2060480/PomoFarm/)
|
||||
|
||||
PomoFarm is half focus timer and half idle farming game! As Tomato the Duck, grow your farm as you focus on tasks in the real world!
|
||||
|
||||
## [Rusty's Retirement 🔗](https://store.steampowered.com/app/2666510/Rustys_Retirement/)
|
||||
|
||||
A relaxing idle-farming simulator that sits at the bottom of your screen while you do other things.
|
||||
|
||||
## [Spirit City: Lo-fi Sessions 🔗](https://store.steampowered.com/app/2113850/Spirit_City_Lofi_Sessions/)
|
||||
|
||||
Spirit City: Lofi Sessions is a gamified focus tool, set to a soothing lofi soundtrack. Discover and collect Spirits, customize your cozy virtual space, and facilitate your real-life tasks with a collection of handy features designed to improve concentration and ease stress.
|
||||
BIN
src/pages/get-started/_images/introduction/studyyoulazy.webp
Normal file
BIN
src/pages/get-started/_images/introduction/studyyoulazy.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -9,6 +9,7 @@ import { Image } from 'astro:assets';
|
|||
import RythonDev from "./_images/introduction/rythondev.webp";
|
||||
import Ellyskey from "./_images/introduction/ellyskey.webp";
|
||||
import Seiji from "./_images/introduction/seiji.webp";
|
||||
import Studyyoulazy from "./_images/introduction/studyyoulazy.webp";
|
||||
import MultiTaskWidget from "./../guide/_images/widgets/multitask.webp";
|
||||
import CoworkingCategory from "./_images/introduction/coworking_study_category.webp";
|
||||
|
||||
|
|
@ -66,6 +67,9 @@ Although might seem unconventional to watch someone else work, there are several
|
|||
|
||||
By watching a streamer work, viewers might pick up new productivity techniques or software shortcuts. Seeing someone else tackle similar tasks can be inspiring and motivating.
|
||||
|
||||
<Image src={Studyyoulazy} alt="studyyoulazy" width="400" />
|
||||
Image source: [studyyoulazy (YouTube)](https://www.youtube.com/@studyyoulazy/live)
|
||||
|
||||
> ### What are your thoughts on co-working streams?
|
||||
>
|
||||
> I'm not saying I dislike them, but I just want to understand how people enjoy these streams. It's mostly just the streamer doing their work while their cam is facing in front of them. There's nothing much to watch as it's not display captured (understandable since work is confidential).
|
||||
|
|
|
|||
BIN
src/pages/guide/_images/layouts/studyyoulazy.webp
Normal file
BIN
src/pages/guide/_images/layouts/studyyoulazy.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
|
|
@ -18,13 +18,11 @@ Useful bots to add to your stream!
|
|||
|
||||
### [Sery Bot 🔗](https://serycodes.carrd.co/)
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protections, and other safety features and tools to streamers.
|
||||
|
|
@ -33,7 +31,7 @@ Sery Bot is a moderation bot providing anti-hate raid and anti-follow bot protec
|
|||
|
||||
<Image src={Demo} alt="MohCitrus" width="400" loading="lazy" />
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
|
|
@ -46,27 +44,31 @@ MohCitrus is a translator bot made by [MohFocus (Twitch)](https://twitch.tv/MohF
|
|||
|
||||
### [Nightbot 🔗](https://nightbot.tv/)
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
<div class="flex flex-wrap flex-row gap-2">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Nightbot is a chatbot that you can use to manage your chat. It has a lot of features and is easy to use. You can also use it to create custom commands for your stream.
|
||||
|
||||
### [BotRix 🔗](https://botrix.live/)
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
<div class="flex flex-wrap flex-row gap-2">
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
BotRix is a chat bot that offers features and tools to enhance your community experience. You can use BotRix to moderate, send notifications, play minigames and more on Twitch, YouTube and Discord.
|
||||
|
||||
|
|
@ -76,31 +78,35 @@ BotRix is a chat bot that offers features and tools to enhance your community ex
|
|||
|
||||
### [Streamer.bot 🔗](https://streamer.bot/)
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
<div class="flex flex-wrap flex-row gap-2">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Supercharge your livestream! Add advanced levels of interactivity to your streams with Streamer.bot.
|
||||
|
||||
### [Mix It Up bot 🔗](https://mixitupapp.com/)
|
||||
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="flex md:flex-row flex-col gap-2">
|
||||
|
||||
Available on:
|
||||
|
||||
<div class="flex flex-wrap flex-row gap-2">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Mix It Up is a free, full featured, community driven, open-source stream bot developed by streamers for streamers.
|
||||
|
||||
|
|
@ -110,13 +116,15 @@ Mix It Up is a free, full featured, community driven, open-source stream bot dev
|
|||
|
||||
Available on:
|
||||
|
||||
<div class="flex flex-wrap flex-row gap-2">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Firebot is a fully featured open-source bot that can help level up your streams. A simple yet powerful Effect system that allows you to program the bot to do just about anything with no programming knowledge needed.
|
||||
|
|
|
|||
|
|
@ -90,17 +90,17 @@ Some cool YouTube videos on this topic if you want some inspiration!
|
|||
|
||||
- [How-to: Easy "Graphic Design" on Google Slides (for VTubers and Streamers)](https://youtu.be/VoF-Qk_tWgU)
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/VoF-Qk_tWgU?si=Oq6xA7nzjOJa_YrR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
<iframe width="560" src="https://www.youtube.com/embed/VoF-Qk_tWgU?si=Oq6xA7nzjOJa_YrR" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
<br />
|
||||
|
||||
- [Create Minimal Stream Overlays From Scratch! (Without Photoshop!)](https://youtu.be/Rs75ovA7Fvo)
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/Rs75ovA7Fvo?si=esfZ1dELAKot2GaZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
<iframe width="560" src="https://www.youtube.com/embed/Rs75ovA7Fvo?si=esfZ1dELAKot2GaZ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
<br />
|
||||
|
||||
- [How to Make an Overlay for Streaming! Tips for Artists and Gamers!](https://youtu.be/OBXK9qi4j8E)
|
||||
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/OBXK9qi4j8E?si=tnjsR4h5s7Vm36nb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
<iframe width="560" src="https://www.youtube.com/embed/OBXK9qi4j8E?si=tnjsR4h5s7Vm36nb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
|
||||
|
||||
|
|
|
|||
|
|
@ -61,17 +61,17 @@ A pomodoro timer is a great way to keep track of your work sessions. It’s also
|
|||
|
||||
A task list widget is a great way to keep track of your tasks along with your chatters!
|
||||
|
||||
### [Rython Task Bot 🔗](https://github.com/liyunze-coding/chat-task-tic-overlay-infinity)
|
||||
|
||||
<a href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" target="_blank">
|
||||
<Image src={RythonTaskBot} alt="Rython Task Bot" loading="lazy" />
|
||||
<div class="flex justify-start items-end h-fit gap-10">
|
||||
<a href="https://www.focumon.com/for_streamers" target="_blank">
|
||||
<h2>Focumon's co-working widget 🔗</h2>
|
||||
</a>
|
||||
<div class="bg-[#319c2a] px-2 py-1 w-fit rounded-lg mb-3">Sponsored</div>
|
||||
</div>
|
||||
|
||||
- Free and open source
|
||||
- Easy to use, setup and customize
|
||||
- Horizontal version available
|
||||
- Used by 100+ streamers
|
||||
- Handles only one incomplete task per user
|
||||
- Free with optional subscription
|
||||
- Easy to use, set up, and customize
|
||||
- Affiliate program to earn money
|
||||
- Handles one task per user
|
||||
|
||||
### [Multi-task Widget 🔗](https://ko-fi.com/s/94e7e8dc81)
|
||||
|
||||
|
|
@ -86,6 +86,18 @@ A task list widget is a great way to keep track of your tasks along with your ch
|
|||
- Streamer bot version (Windows only, stream to YouTube and Twitch!)
|
||||
- Horizontal version
|
||||
|
||||
### [Rython Task Bot 🔗](https://github.com/liyunze-coding/chat-task-tic-overlay-infinity)
|
||||
|
||||
<a href="https://github.com/liyunze-coding/chat-task-tic-overlay-infinity" target="_blank">
|
||||
<Image src={RythonTaskBot} alt="Rython Task Bot" loading="lazy" />
|
||||
</a>
|
||||
|
||||
- Free and open source
|
||||
- Easy to use, setup and customize
|
||||
- Horizontal version available
|
||||
- Used by 100+ streamers
|
||||
- Handles only one incomplete task per user
|
||||
|
||||
### [Super Sweet Bot 🔗](https://www.patreon.com/super_sweet_bot)
|
||||
|
||||
<a href="https://www.patreon.com/super_sweet_bot" target="_blank">
|
||||
|
|
|
|||
Loading…
Reference in a new issue