docs(homepage, banner, about, roadmap): 📝 add roadmap, point banner t…

…o hacktoberfest, improve about page
movesthatmatter · Oct 10, 2024 · cfa1af1 · cfa1af1
1 parent 571b9b6
commit cfa1af1
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 92 deletions.
diff --git a/changelog.md → CHANGELOG.md b/changelog.md → CHANGELOG.md
diff --git a/ROADMAP.md b/ROADMAP.md
@@ -0,0 +1 @@
+apps/movex-docs/pages/roadmap.md
diff --git a/apps/movex-docs/pages/_meta.json b/apps/movex-docs/pages/_meta.json
@@ -25,6 +25,10 @@
  "title": "About",
  "type": "page"
  },
+ "roadmap": {
+ "title": "Roadmap",
+ "type": "page"
+ },
  "changelog": {
  "title": "Changelog",
  "type": "page"

diff --git a/apps/movex-docs/pages/about.mdx b/apps/movex-docs/pages/about.mdx
@@ -1,22 +1,5 @@
 # About Movex
 
+Movex is an open-source framework designed to simplify multiplayer communication and state synchronization for web games and multi-peer applications. Born from the need to streamline backend logic across projects like Chessroulette, Movex allows developers to seamlessly run game logic on both the client and server without getting bogged down in complex networking protocols. With built-in real-time synchronization and an authoritative server model, Movex is built to handle multiplayer functionality so developers can focus on what they do best—creating engaging experiences.
 
-## Origins 
-Movex is the legacy of [chessroulette.live](https://gabrielctroia.medium.com/meet-chessroulette-org-a-quarantine-project-e4108f05db39) (now defunct but up for a comeback built on movex soon).
-
-import Image from 'next/image';
-
-<Image src="/static/chessroulette_screenshot.png" alt="Chessroulette Screenshot" width="720" height="560" className="pt-4"/>
-
-
-## Idea iteration
-
-The idea for Movex came while attempting to port the backend code from Chessroulette (everything from the network logic & protocols, servers, redis to matchmaking), into another turn based chess-like game server to make it multiplayer (that we are launching soon), and realizing that I actually have to copy and paste most of that code with very slight changes.
-
-The initial idea was simply to take that code, wrap it in a backend service of its own, complete with an api, socket + a (redis) store, and use it for my game as well as opening it up for other game developers that don't handle all that multyplayer logc on their own.
-
-But then, while working on that version, I realized I can in fact go a few steps further, and offer a solution for the client, where the actual game or app logic happens. So the idea of combining functional code (i.e. functions), to have them run both on the client and the server (seamlessly), could be an appealing solution for other game developers who don't won't to get out of their Game bubble, where to be honest, the fun happens.
-
-Combine that with an Authoritative Server that seamlessly just works, Realtime Synchronization and Deterministic Propagation and I think we have something here.
-
-But of course, only time will tell!
+Movex is a **[Moves That Matter](https://github.com/movesthatmatter)** project.
diff --git a/apps/movex-docs/pages/changelog.md b/apps/movex-docs/pages/changelog.md
@@ -1,4 +1,4 @@
-# Changelog
+# Movex Changelog
 
 ## v0.1.6 (Sep 26 2024)
 

diff --git a/apps/movex-docs/pages/index.mdx b/apps/movex-docs/pages/index.mdx
@@ -4,72 +4,69 @@ import Link from 'next/link';
 import { Button } from '../components/Button';
 import { Code, Pre } from 'nextra/components';
 import { MovexDiagram } from '../components/MovexDiagram';
+import { features, faqs, community } from '../modules/home/homeVars';
 
 <div className="container mx-auto max-w-[90rem] gap-2 pl-[max(env(safe-area-inset-left),1.5rem)] pr-[max(env(safe-area-inset-right),1.5rem)]">
+ <div className="flex flex-col lg:flex-row pt-4 md:pt-10 pb-10 lg:pt-20 lg:pb-20 gap-24 text-center lg:text-left">
+ <div className="flex flex-col justify-center flex-1">
+ <HeroText className="text-5xl md:text-6xl font-bold mb-4 lg:mb-10 !leading-normals !md:leading-[4.5rem]" />
+ <HeroSubText className="text-xl lg:text-2xl mb-10 lg:mb-20 !leading-normal text-slate-500" />
 
-<div className="flex flex-col lg:flex-row pt-4 md:pt-10 pb-10 lg:pt-20 lg:pb-20 gap-24 text-center lg:text-left">
- <div className="flex flex-col justify-center flex-1">
- <HeroText className="text-5xl md:text-6xl font-bold mb-4 lg:mb-10 !leading-normals !md:leading-[4.5rem]" />
- <HeroSubText className="text-xl lg:text-2xl mb-10 lg:mb-20 !leading-normal text-slate-500" />
-
- <div className="flex flex-col gap-5">
- <div className="flex justify-center lg:justify-start">
- <div className="flex gap-5">
- <Link href="/docs/overview/get_started">
- <Button className="bg-gradient-to-r from-movexBlue-400 via-indigo-500 to-purple-500 hover:to-movexBlue-500 via-indigo-500 hover:from-purple-300">
- Get Started
- </Button>
- </Link>
- <Link
- href="https://github.com/movesthatmatter/movex"
- target="_blank"
- >
- <Button type="clear" className="">
- Contribute on Github
- </Button>
- </Link>
+ <div className="flex flex-col gap-5">
+ <div className="flex justify-center lg:justify-start">
+ <div className="flex gap-5">
+ <Link href="/docs/overview/get_started">
+ <Button className="bg-gradient-to-r from-movexBlue-400 via-indigo-500 to-purple-500 hover:to-movexBlue-500 via-indigo-500 hover:from-purple-300">
+ Get Started
+ </Button>
+ </Link>
+ <Link
+ href="https://github.com/movesthatmatter/movex"
+ target="_blank"
+ >
+ <Button type="clear" className="">
+ Contribute on Github
+ </Button>
+ </Link>
+ </div>
  </div>
  </div>
+
  </div>
+ <div className="flex items-center flex-1">
+ <a href="docs/overview/introduction">
+ <div className="dark:bg-slate-800 rounded-xl p-2 md:p-8 md:pb-4 shadow-xl border dark:border-0 bg-slate-100 text-center">
+ <MovexDiagram />
+ <i className="pt-8 block">Movex at a glance!</i>
+ </div>
+ </a>
 
+ </div>
  </div>
- <div className="flex items-center flex-1">
- <a href="docs/overview/introduction">
- <div className="dark:bg-slate-800 rounded-xl p-2 md:p-8 md:pb-4 shadow-xl border dark:border-0 bg-slate-100 text-center">
- <MovexDiagram />
- <i className="pt-8 block">Movex at a glance!</i>
- </div>
- </a>
 
+ <div className="mt-6 mb-20 lg:mb-24 bg-green-100s">
+ <dl className="mx-auto slg:flex grid smax-w-xl grid-cols-2 md:grid-cols-3 gap-x-5 gap-y-10 smd:gap-x-20 md:gap-y-20 bg-red-100s">
+ {features.map((feature) => (
+ <div key={feature.name} className="flex-1">
+ <dt className="text-base font-semibold leading-7 text-gray-900 dark:text-gray-300 flex gap-4">
+ <feature.icon className="h-9 w-9 text-white bg-purple-500 rounded-lg p-2" aria-hidden="true" />
+ {feature.name}
+ </dt>
+ <dd className="mt-2 pb-3 text-base leading-7 text-gray-600 dark:text-gray-400">
+ {feature.description}
+ </dd>
+ <Link
+ className="hover:underline text-gray-700 dark:text-gray-300"
+ href={feature.link.url}
+ >
+ {feature.link.label}
+ </Link>
+ </div>
+ ))}
+ </dl>
  </div>
 </div>
 
-import { features, faqs, community } from '../modules/home/homeVars';
-
-<div className="mt-6 mb-20 lg:mb-24 bg-green-100s">
- <dl className="mx-auto slg:flex grid smax-w-xl grid-cols-2 md:grid-cols-3 gap-x-5 gap-y-10 smd:gap-x-20 md:gap-y-20 bg-red-100s">
- {features.map((feature) => (
- <div key={feature.name} className="flex-1">
- <dt className="text-base font-semibold leading-7 text-gray-900 dark:text-gray-300 flex gap-4">
- <feature.icon className="h-9 w-9 text-white bg-purple-500 rounded-lg p-2" aria-hidden="true" />
- {feature.name}
- </dt>
- <dd className="mt-2 pb-3 text-base leading-7 text-gray-600 dark:text-gray-400">
- {feature.description}
- </dd>
- <Link
- className="hover:underline text-gray-700 dark:text-gray-300"
- href={feature.link.url}
- >
- {feature.link.label}
- </Link>
- </div>
- ))}
-
- </dl>
-</div>
-</div>
-
 <div
  id="examples"
  className="h-screen lg:h-auto w-full bg-gradient-to-tr from-movexBlue-400 via-indigo-500 to-purple-500 p-6 lg:pt-0 lg:p-20 lg:pt-0 flex flex-col text-white"

diff --git a/apps/movex-docs/pages/roadmap.md b/apps/movex-docs/pages/roadmap.md
@@ -0,0 +1,57 @@
+# Movex Roadmap
+
+#### Current Version: v0.1.6
+
+Movex is already fully functional, supporting real-time multiplayer communication and state synchronization. It’s currently being used in production for web-based multiplayer games (see [Chessroulette](https://chessroulette.live)). Our focus now is to improve performance, expand compatibility, and grow the community of contributors.
+
+### Short-Term Goals (Next 3-6 Months)
+
+**1. Optimize Framework Size**
+- Goal: Reduce the overall package size to make Movex lighter and faster to deploy. This will improve performance, especially in resource-constrained environments.
+- Benefit: Smaller bundle size makes Movex more accessible to developers who want efficient, low-latency multiplayer games.
+
+**2. Improve Documentation & Tutorials**
+- Goal: Add more comprehensive guides, examples, and walkthroughs for new users. Focus on common use cases like integrating Movex with web games.
+- Benefit: Lower the barrier for new developers and contributors by offering clear, practical resources.
+
+**3. Multi-Peer Application Use Case Demos**
+- Goal: Build demos showing Movex in use for collaborative, multi-peer applications like shared whiteboards or real-time document editing.
+- Benefit: Broaden the scope of Movex’s use cases beyond games, showcasing its versatility for real-time collaboration apps.
+
+
+### Medium-Term Goals (6-12 Months)
+
+**1. Library Integration: Angular, Vue, etc..**
+- Goal: Expand Movex compatibility to support popular frontend libraries like Angular and Vue.
+- Benefit: Broaden Movex’s adoption by making it available to a wider range of developers who use different tech stacks.
+
+**2. Game Engine Compatibility (Phaser, Babylon.js, etc.)**
+- Goal: Integrate Movex with popular JavaScript game engines like Phaser and Babylon.js to create more seamless multiplayer game development experiences.
+- Benefit: Make Movex the go-to framework for real-time multiplayer in web-based games.
+
+**3. WebSocket Support**
+- Goal: Implement WebSocket support to replace or augment Socket.io. This will enhance real-time communication while reducing overhead.
+- Benefit: More efficient communication for multiplayer games, leading to faster performance. Smaller size.
+
+**4. Community Building**
+- Goal: Grow an engaged community of contributors and users through Hacktoberfest, Discord discussions, and open feedback.
+- Benefit: Increase long-term contributions, feedback, and engagement for the project.
+
+
+### Long-Term Goals (12+ Months)
+
+**1. io Games Compatibility & Multi-Peer Scaling**
+- Goal: Make Movex suitable for massively multiplayer games and large-scale multi-peer applications with features like horizontal scaling, load balancing, and better handling of large user bases.
+- Benefit: Scale Movex’s architecture to support both multiplayer games and multi-peer apps with thousands of users.
+
+**2. Advanced State Synchronization Features**
+- Goal: Add more robust state synchronization features for edge cases in complex multiplayer games.
+- Benefit: Support more advanced use cases in real-time multiplayer games, allowing for smoother, more flexible state management.
+
+**3. Monetization & Sustainability**
+- Goal: Explore potential monetization options or sponsorships to ensure the long-term sustainability of Movex as an open-source project.
+- Benefit: Secure the future of Movex while keeping the project open and free for developers.
+
+## Contributing
+
+Movex is an open-source project, and contributions are always welcome! Whether you’re fixing a bug, improving documentation, or building a new feature for multiplayer games or multi-peer apps, your input helps make Movex better for everyone. Check out the [GitHub issues](https://github.com/movesthatmatter/movex/issues) to find ways to get involved.
diff --git a/apps/movex-docs/theme.config.tsx b/apps/movex-docs/theme.config.tsx
@@ -10,24 +10,16 @@ const tags = {
 
 const config: DocsThemeConfig = {
  logo: <Logo />,
- // banner: {
- // key: 'dev-version-sept-2024',
- // text: () => (
- // <span>
- // Movex is <a href="/docs/overview/introduction" style={{ textDecoration: 'underline' }}>feature-complete</a> yet still in Development for now.
- // Contributions and feedback are much{' '}
- // <a
- // href="https://github.com/movesthatmatter/movex/issues"
- // target='_blank'
- // style={{ textDecoration: 'underline' }}
- // >
- // appreciated
- // </a>
- // !
- // </span>
- // ),
- // dismissible: true,
- // },
+ banner: {
+ key: 'dev-version-sept-2024',
+ text: () => (
+ <span>
+ <b>We're Participating in #Hacktoberfest2024! 🤩</b>{' '}
+ Check out our <a href="https://github.com/movesthatmatter/movex/issues" target='_blank' style={{ textDecoration: 'underline' }}>open issues</a> and help us simplify multiplayer game development!
+ </span>
+ ),
+ dismissible: true,
+ },
  project: {
  link: 'https://github.com/movesthatmatter/movex',
  },