Add README and thumbnail on example 'simultaneous-cursors' (#683)

examples/simultaneous-cursors/README.md

@@ -0,0 +1,61 @@
+# Yorkie Simultaneous-Cursors Example
+
+<p>
+    <a href="https://yorkie.dev/yorkie-js-sdk/examples/simultaneous-cursors/" target="_blank">
+        <img src="https://img.shields.io/badge/preview-message?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAyNCAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTYuODU3MTcgMi43ODE5OUwxMS4yNzUxIDkuMTI2NzhDMTEuNTU0NCA5LjUyODAxIDEyLjEwNjIgOS42MjY3NiAxMi41MDc0IDkuMzQ3NDRDMTIuNTkzNCA5LjI4NzUgMTIuNjY4MSA5LjIxMjggMTIuNzI4MSA5LjEyNjc4TDE3LjE0NiAyLjc4MTk5QzE3LjcwNDggMS45Nzk1NCAxNy41MDcyIDAuODc2MTMxIDE2LjcwNDggMC4zMTc0OTRDMTYuNDA4IDAuMTEwODM3IDE2LjA1NSAwIDE1LjY5MzIgMEg4LjMxMDAxQzcuMzMyMiAwIDYuNTM5NTUgMC43OTI2NTQgNi41Mzk1NSAxLjc3MDQ2QzYuNTM5NjggMi4xMzIxMSA2LjY1MDUxIDIuNDg1MTEgNi44NTcxNyAyLjc4MTk5WiIgZmlsbD0iIzUxNEM0OSIvPgo8cGF0aCBkPSJNMTMuODA4OSAxNC4yMzg4QzE0LjEyMzEgMTQuNDE4IDE0LjQ4NDcgMTQuNDk2NiAxNC44NDUgMTQuNDY0MkwyMi45MjYgMTMuNzM1QzIzLjU3NTMgMTMuNjc2NSAyNC4wNTQgMTMuMTAyNyAyMy45OTU1IDEyLjQ1MzVDMjMuOTkyNCAxMi40MTkyIDIzLjk4NzggMTIuMzg1MSAyMy45ODE3IDEyLjM1MTNDMjMuNzM4OSAxMC45OTY4IDIzLjI2MTEgOS42OTUyNyAyMi41Njk5IDguNTA1NDZDMjEuODc4NiA3LjMxNTY1IDIwLjk4NDggNi4yNTU3NyAxOS45Mjg2IDUuMzczOTFDMTkuNDI4MiA0Ljk1NjE0IDE4LjY4MzkgNS4wMjMwNyAxOC4yNjYyIDUuNTIzNTZDMTguMjQ0MiA1LjU0OTkgMTguMjIzMyA1LjU3NzI2IDE4LjIwMzYgNS42MDU1MUwxMy41NjcgMTIuMjY0MUMxMy4zNjAzIDEyLjU2MSAxMy4yNDk1IDEyLjkxNCAxMy4yNDk1IDEzLjI3NThWMTMuMjUzN0MxMy4yNDk1IDEzLjQ1NjIgMTMuMzAxNiAxMy42NTU0IDEzLjQwMDggMTMuODMxOUMxMy41MDUgMTQuMDA1NCAxMy42NTIxIDE0LjE0OTMgMTMuODI4MSAxNC4yNDk2IiBmaWxsPSIjRkRDNDMzIi8+CjxwYXRoIGQ9Ik0xMC42NDE2IDEzLjc0MzRDMTAuNTM3NSAxMy45NTU5IDEwLjM3MiAxNC4xMzIyIDEwLjE2NjUgMTQuMjQ5NEwxMC4xOTE1IDE0LjIzNTFDOS44NzczNCAxNC40MTQzIDkuNTE1NjkgMTQuNDkyOSA5LjE1NTQ0IDE0LjQ2MDVMMS4wNzQ0MSAxMy43MzEzQzEuMDQwMTggMTMuNzI4MyAxLjAwNjA3IDEzLjcyMzcgMC45NzIyMjUgMTMuNzE3NkMwLjMzMDYyIDEzLjYwMjUgLTAuMDk2MzExOSAxMi45ODkyIDAuMDE4NzI0MiAxMi4zNDc2QzAuMjYxNTIyIDEwLjk5MyAwLjczOTM1NCA5LjY5MTU2IDEuNDMwNDYgOC41MDE2M0MyLjEyMTU3IDcuMzExNjkgMy4wMTU1MSA2LjI1MjA2IDQuMDcxODQgNS4zNzAwOEM0LjA5ODE4IDUuMzQ4MDYgNC4xMjU1NCA1LjMyNzE5IDQuMTUzNzkgNS4zMDc0N0M0LjY4ODc2IDQuOTM1IDUuNDI0MjcgNS4wNjY3MSA1Ljc5Njg3IDUuNjAxNjhMMTAuNDMzNCAxMi4yNjA0QzEwLjY0MDEgMTIuNTU3MyAxMC43NTA5IDEyLjkxMDMgMTAuNzUwOSAxMy4yNzIxVjEzLjI0MzJDMTAuNzUwOSAxMy40Nzk3IDEwLjY3OTggMTMuNzExIDEwLjU0NjggMTMuOTA2NyIgZmlsbD0iI0ZEQzQzMyIvPgo8L3N2Zz4K&color=FEF3D7" alt="Live Preview" />
+    </a>
+</p>
+
+<img width="500" alt="simultaneous-cursors" src="thumbnail.jpg"/>
+
+## How to run demo
+
+### With Yorkie Dashboard
+
+Install dependencies
+
+```bash
+$ npm install
+```
+
+Create an account on [Yorkie Dashboard](https://yorkie.dev/dashboard)
+Create a new project and copy your public key from the dashboard
+Update the `.env` file like so:
+
+```
+VITE_YORKIE_API_ADDR='https://api.yorkie.dev'
+VITE_YORKIE_API_KEY='your_key_xxxx'
+```
+
+Start demo project
+
+```bash
+$ npm run dev
+```
+
+### With local Yorkie server
+
+Install dependencies
+
+```bash
+$ npm install
+```
+
+At project root, run below command to start Yorkie and Envoy proxy.
+
+```bash
+$ docker-compose -f docker/docker-compose.yml up --build -d
+```
+
+Update the `.env` file like so:
+
+```
+VITE_YORKIE_API_ADDR='http://localhost:8080'
+VITE_YORKIE_API_KEY=''
+```
+
+Start demo project
+
+```bash
+$ npm run dev
+```

examples/simultaneous-cursors/src/components/Cursor.jsx

@@ -5,7 +5,7 @@ const Cursor = ({ selectedCursorShape, x, y, pointerDown }) => {
   return (
     <>
       <img
-        src={`src/assets/icons/icon_${selectedCursorShape}.svg`}
+        src={`./src/assets/icons/icon_${selectedCursorShape}.svg`}
         className={`${selectedCursorShape}-cursor`}
         style={{ transform: `translate3d(${x}px, ${y}px, 0)` }}
       />

examples/simultaneous-cursors/src/components/CursorSelections.jsx

@@ -20,7 +20,7 @@ const CursorSelections = ({ handleCursorShapeSelect, clientsLength }) => {
                 ? 'cursor-shape-selected'
                 : 'cursor-shape-not-selected'
             }`}
-            src={`src/assets/icons/icon_${shape}.svg`}
+            src={`./src/assets/icons/icon_${shape}.svg`}
           />
         ))}
       </div>

examples/simultaneous-cursors/src/components/SingleAnimation.jsx

@@ -16,7 +16,7 @@ export default function SingleAnimation({
       >
         <div className={styles['leftRight' + (timestamp % 3)]}>
           <div className="transform -translate-x-1/2 -translate-y-1/2">
-            <img src={`src/assets/icons/icon_${selectedCursorShape}.svg`} />
+            <img src={`./src/assets/icons/icon_${selectedCursorShape}.svg`} />
           </div>
         </div>
       </div>

examples/simultaneous-cursors/vite.config.js

@@ -3,5 +3,6 @@ import react from '@vitejs/plugin-react'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  base: '',
   plugins: [react()],
 })