yorkie-team · hackerwins · Dec 14, 2022 · Dec 7, 2022 · Dec 8, 2022 · Dec 12, 2022
diff --git a/codes/document.js b/codes/document.js
@@ -0,0 +1,47 @@
+const COMMON_CODE = `
+// You can use a key-value pair to share data with peers.
+// The key is a string, and the value should be serializable - objects, arrays, and primitives.
+doc.update((root) => {
+  root.num = 1;           // {"num":1}
+  root.obj = {'str':'a'}; // {"num":1,"obj":{"str":"a"}}
+  root.arr = ['1', '2'];  // {"num":1,"obj":{"str":"a"},"arr":[1,2]}
+});
+`;
+
+const TEXT_CODE = ` 
+// Text provides supports for collaborative plain text editing.
+// It also has selection information for sharing the cursor position.
+doc.update((root) => {
+  root.text = new yorkie.Text();  // {"text":""}
+  root.text.edit(0, 0, 'hello');  // {"text":"hello"}
+  root.text.edit(0, 1, 'H');      // {"text":"Hello"}
+  root.text.select(0, 1);         // {"text":"^H^ello"}
+});
+`;
+
+const RICHTEXT_CODE = `
+// RichText is similar to Text except that we can add attributes to contents.
+doc.update((root) => {
+  root.text = new yorkie.RichText();       // {"text":""}
+  root.text.edit(0, 0, 'hello');           // {"text":"hello"}
+  root.text.edit(0, 1, 'H');               // {"text":"Hello"}
+  root.text.setStyle(0, 1, {bold: true});  // {"text":"<b>H</b>ello"}
+});
+`;
+
+const COUNTER_CODE = ` 
+// Counter supports numeric types that change with addition and subtraction.
+doc.update((root) => {
+  root.counter = new yorkie.Counter(1);  // {"counter":1}
+  root.counter.increase(2);              // {"counter":3}
+  root.counter.increase(3.5);            // {"counter":6.5}
+  root.counter.increase(-3.5);           // {"counter":3}
+});
+`;
+
+export const DOCUMENT_CODE = {
+  common: COMMON_CODE,
+  text: TEXT_CODE,
+  richText: RICHTEXT_CODE,
+  counter: COUNTER_CODE,
+};
diff --git a/codes/features.js b/codes/features.js
@@ -0,0 +1,102 @@
+const PROFILE_JS = `
+import yorkie from 'yorkie-js-sdk';
+
+async function main() {
+  const client = new yorkie.Client('${process.env.NEXT_PUBLIC_API_ADDR}', {
+    apiKey: 'MY_API_KEY',
+    // set the client's name and color to presence.
+    presence: {
+      name: getRandomName(),
+      color: getRandomColor(),
+    },
+  });
+  await client.activate();
+
+  const doc = new yorkie.Document('example-profile');
+  await client.attach(doc);
+
+  client.subscribe((event) => {
+    if (event.type === 'peers-changed') {
+      // get presence of all clients connected to the Document. 
+      // {<clientID>: {name: string, color: string}}
+      const peers = event.value[doc.getKey()];
+
+      // show peer list
+      updatePeerList(peers);
+    }
+  });
+}
+main();
+`;
+
+const CURSOR_JS = ` 
+import yorkie from 'yorkie-js-sdk';
+
+async function main() {
+  const client = new yorkie.Client('${process.env.NEXT_PUBLIC_API_ADDR}', {
+    apiKey: 'MY_API_KEY',
+  });
+  await client.activate();
+
+  const doc = new yorkie.Document('my-first-document');
+  await client.attach(doc);
+
+  client.subscribe((event) => {
+    if (event.type === 'peers-changed') {
+      // get presence of all clients connected to the Document. 
+      // {<clientID>: {cursor: {x: number, y: number}}}
+      const peers = event.value[doc.getKey()];
+
+      // show peer cursors
+      updatePeerCursors(peers);
+    }
+  });
+
+  document.body.addEventListener('mousemove', (e) => {
+    // set the cursor position to presence.
+    // Presence will be shared with other clients.
+    client.updatePresence('cursor', {
+      x: e.clientX,
+      y: e.clientY,
+    })
+  });
+}
+main();
+`;
+
+const SELECTION_JS = ` 
+// js
+`;
+
+const EDITING_JS = ` 
+// js
+`;
+
+const EDITING_ANDROID = ` 
+// android
+`;
+
+const EDITING_IOS = ` 
+// ios
+`;
+
+export const FEATURES_CODE = {
+  profile: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: PROFILE_JS, language: 'javascript' },
+  },
+  cursor: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: CURSOR_JS, language: 'javascript' },
+  },
+  selection: {
+    tabOrder: ['js'],
+    js: { title: 'JS SDK', code: SELECTION_JS, language: 'javascript' },
+  },
+  editing: {
+    tabOrder: ['js', 'android', 'ios'],
+    js: { title: 'JS SDK', code: EDITING_JS, language: 'javascript' },
+    android: { title: 'Android SDK', code: EDITING_ANDROID, language: 'kotlin' },
+    ios: { title: 'iOS SDK', code: EDITING_IOS, language: 'swift' },
+  },
+};
diff --git a/components/CodeBlock/PrismCode.tsx b/components/CodeBlock/PrismCode.tsx
@@ -19,7 +19,7 @@ export type PrismCodeProps = {
 
 export function PrismCode({ code, language, withLineNumbers }: PrismCodeProps) {
   return (
-    <Highlight {...defaultProps} code={code} theme={theme} language={language}>
+    <Highlight {...defaultProps} code={code.trim()} theme={theme} language={language}>
       {({ className, tokens, getLineProps, getTokenProps }) => (
         <pre className={className}>
           {tokens.map((line, i) => (

diff --git a/components/Layout/Header.tsx b/components/Layout/Header.tsx
@@ -14,7 +14,7 @@ export function Header(): ReactElement {
   useEffect(() => {
     const isLoggedIn = isValidToken(localStorage.getItem('token'));
     setIsLoggedIn(isLoggedIn);
-  }, [setIsLoggedIn])
+  }, [setIsLoggedIn]);
 
   // TODO(hackerwins): Remove examples condition when examples are ready.
   return (
@@ -39,15 +39,13 @@ export function Header(): ReactElement {
                 Documentation
               </Link>
             </li>
-            {
-              process.env.NODE_ENV === 'development' && (
-                <li className={`gnb_item ${pathname == '/examples' ? 'is_active' : ''}`}>
-                  <Link href="/examples" className="link">
-                    Examples
-                  </Link>
-                </li>
-              )
-            }
+            {process.env.NODE_ENV === 'development' && (
+              <li className={`gnb_item ${pathname == '/examples' ? 'is_active' : ''}`}>
+                <Link href="/examples" className="link">
+                  Examples
+                </Link>
+              </li>
+            )}
             <li className={`gnb_item ${pathname == '/community' ? 'is_active' : ''}`}>
               <Link href="/community" className="link">
                 Community
@@ -56,22 +54,25 @@ export function Header(): ReactElement {
           </ul>
         </nav>
         <div className="header_util">
-          {
-            isLoggedIn ? (
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`} outline className="gray50">
-                  Dashboard
-                </Button>
-            ) : (
-              <>
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`} outline className="gray50">
-                  Sign in
-                </Button>
-                <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`} className="orange_0" icon={<Icon type="star" />}>
-                  Start for free
-                </Button>
-              </>
-            )
-          }
+          {isLoggedIn ? (
+            <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`} outline className="gray50">
+              Dashboard
+            </Button>
+          ) : (
+            <>
+              <Button as="a" href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`} outline className="gray50">
+                Sign in
+              </Button>
+              <Button
+                as="a"
+                href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
+                className="orange_0"
+                icon={<Icon type="star" />}
+              >
+                Start for free
+              </Button>
+            </>
+          )}
           <MobileGnbDropdown isLoggedIn={isLoggedIn} />
         </div>
       </div>

diff --git a/components/Layout/MobileGnbDropdown.tsx b/components/Layout/MobileGnbDropdown.tsx
@@ -4,9 +4,7 @@ import Link from 'next/link';
 import classNames from 'classnames';
 import { Popover, Icon } from 'components';
 
-export function MobileGnbDropdown({isLoggedIn} : {
-  isLoggedIn: boolean;
-}) {
+export function MobileGnbDropdown({ isLoggedIn }: { isLoggedIn: boolean }) {
   const [gnbOpened, setGnbOpened] = useState(false);
   const [docsMenuOpened, setDocsMenuOpened] = useState(false);
   const { asPath } = useRouter();
@@ -50,7 +48,7 @@ export function MobileGnbDropdown({isLoggedIn} : {
                   setDocsMenuOpened((opened) => !opened);
                 }}
               >
-                <Icon type="arrow" className="icon_toggle"/>
+                <Icon type="arrow" className="icon_toggle" />
                 <span className="dropdown_text">Documentation</span>
               </button>
               <nav
@@ -143,18 +141,16 @@ export function MobileGnbDropdown({isLoggedIn} : {
                 </ul>
               </nav>
             </li>
-            {
-              process.env.NODE_ENV === 'development' && (
-                <li className="dropdown_item">
-                  <Link
-                    href="/examples"
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === '/examples' })}
-                  >
-                    <span className="dropdown_text">Example</span>
-                  </Link>
-                </li>
-              )
-            }
+            {process.env.NODE_ENV === 'development' && (
+              <li className="dropdown_item">
+                <Link
+                  href="/examples"
+                  className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === '/examples' })}
+                >
+                  <span className="dropdown_text">Example</span>
+                </Link>
+              </li>
+            )}
             <li className="dropdown_item">
               <Link
                 href="/community"
@@ -169,7 +165,9 @@ export function MobileGnbDropdown({isLoggedIn} : {
               <li className="dropdown_item">
                 <a
                   href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`}
-                  className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}` })}
+                  className={classNames('dropdown_menu', {
+                    is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}`,
+                  })}
                 >
                   <span className="dropdown_text">Dashboard</span>
                 </a>
@@ -179,15 +177,19 @@ export function MobileGnbDropdown({isLoggedIn} : {
                 <li className="dropdown_item">
                   <a
                     href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`}
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login` })}
+                    className={classNames('dropdown_menu', {
+                      is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/login`,
+                    })}
                   >
                     <span className="dropdown_text">Sign in</span>
                   </a>
                 </li>
                 <li className="dropdown_item">
                   <a
                     href={`${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`}
-                    className={classNames('dropdown_menu', { is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup` })}
+                    className={classNames('dropdown_menu', {
+                      is_active: asPath.split('#')[0] === `${process.env.NEXT_PUBLIC_DASHBOARD_PATH}/signup`,
+                    })}
                   >
                     <span className="dropdown_text">Start for free</span>
                   </a>