Add links to code in demos (#375)

feliciachang · ellipsis-dev[bot] · web-flow · commit d0927157589b · 2025-01-17T09:39:30.000-08:00
Co-authored-by: ellipsis-dev[bot] &lt;65095814+ellipsis-dev[bot]@users.noreply.github.com&gt;
diff --git a/examples/nextjs/src/app/(demos)/blocknote/BlockNote.tsx b/examples/nextjs/src/app/(demos)/blocknote/BlockNote.tsx
@@ -4,8 +4,7 @@ import { useYDoc, useYjsProvider } from '@y-sweet/react'
 import { useCreateBlockNote } from '@blocknote/react'
 import { BlockNoteView } from '@blocknote/mantine'
 import '@blocknote/mantine/style.css'
-
-import Title from '@/components/Title'
+import Header from '@/components/Header'
 
 export function BlockNote() {
   const provider = useYjsProvider()
@@ -21,7 +20,10 @@ export function BlockNote() {
 
   return (
     <div className="p-4 sm:p-8 flex flex-col gap-y-3 h-full">
-      <Title>BlockNote</Title>
+      <Header
+        title="BlockNote Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/blocknote"
+      />
       <div className="flex-1 bg-white px-2 py-4 rounded-lg">
         <BlockNoteView editor={editor} theme="light" />
       </div>
diff --git a/examples/nextjs/src/app/(demos)/code-editor/CodeEditor.tsx b/examples/nextjs/src/app/(demos)/code-editor/CodeEditor.tsx
@@ -4,7 +4,7 @@ import { useAwareness, useText } from '@y-sweet/react'
 import { useCallback, useRef } from 'react'
 import type { CodemirrorBinding } from 'y-codemirror'
 import type { EditorFromTextArea } from 'codemirror'
-import Title from '@/components/Title'
+import Header from '@/components/Header'
 
 import 'codemirror/lib/codemirror.css'
 if (typeof navigator !== 'undefined') {
@@ -59,7 +59,10 @@ export function CodeEditor() {
 
   return (
     <div className="p-4 lg:p-8 space-y-4">
-      <Title>Code Editor</Title>
+      <Header
+        title="CodeMirror Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/blob/main/examples/nextjs/src/app/(demos)/code-editor"
+      />
       <div>
         <textarea ref={codeMirrorRef} />
       </div>
diff --git a/examples/nextjs/src/app/(demos)/color-grid/ColorGrid.tsx b/examples/nextjs/src/app/(demos)/color-grid/ColorGrid.tsx
@@ -2,7 +2,8 @@
 
 import { useMap } from '@y-sweet/react'
 import { useState } from 'react'
-import Title from '@/components/Title'
+import Header from '@/components/Header'
+import StateIndicator from '@/components/StateIndicator'
 
 const GRID_SIZE = 10
 const COLORS = ['#500724', '#831843', '#9d174d', '#be185d', '#db2777', '#f472b6', '#f9a8d4', null]
@@ -15,7 +16,12 @@ export function ColorGrid() {
 
   return (
     <div className="space-y-3">
-      <Title>Color Grid</Title>
+      <Header
+        title="Color Grid"
+        githubLink="https://github.com/jamsocket/y-sweet/blob/main/examples/nextjs/src/app/(demos)/color-grid"
+      />
+      <StateIndicator />
+
       <div className="space-x-2 flex flex-row">
         {COLORS.map((c) => (
           <div
diff --git a/examples/nextjs/src/app/(demos)/color-grid/page.tsx b/examples/nextjs/src/app/(demos)/color-grid/page.tsx
@@ -1,14 +1,11 @@
 import { YDocProvider } from '@y-sweet/react'
 import { randomId } from '@/lib/utils'
 import { ColorGrid } from './ColorGrid'
-import StateIndicator from '@/components/StateIndicator'
-
 export default function Home({ searchParams }: { searchParams: { doc: string } }) {
   const docId = searchParams.doc ?? randomId()
   return (
     <YDocProvider docId={docId} setQueryParam="doc" authEndpoint="/api/auth" offlineSupport={true}>
       <div className="p-4 lg:p-8">
-        <StateIndicator />
         <ColorGrid />
       </div>
     </YDocProvider>
diff --git a/examples/nextjs/src/app/(demos)/monaco/CodeEditor.tsx b/examples/nextjs/src/app/(demos)/monaco/CodeEditor.tsx
@@ -5,7 +5,7 @@ import { Editor } from '@monaco-editor/react'
 import { MonacoBinding } from 'y-monaco'
 import { useYDoc, useAwareness, useYjsProvider } from '@y-sweet/react'
 import { editor } from 'monaco-editor'
-import Title from '@/components/Title'
+import Header from '@/components/Header'
 
 export function CodeEditor() {
   const yDoc = useYDoc()
@@ -32,7 +32,10 @@ export function CodeEditor() {
 
   return (
     <div className="p-4 lg:p-8 space-y-4">
-      <Title>Monaco Code Editor</Title>
+      <Header
+        title="Monaco Code Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/monaco"
+      />
       <div>
         <Editor
           defaultLanguage="javascript"
diff --git a/examples/nextjs/src/app/(demos)/presence/Presence.tsx b/examples/nextjs/src/app/(demos)/presence/Presence.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import Header from '@/components/Header'
 import { usePresence, usePresenceSetter } from '@y-sweet/react'
 import { useCallback, useRef, useState } from 'react'
 
@@ -65,13 +66,19 @@ export function Presence() {
   )
 
   return (
-    <svg
-      className="relative overflow-hidden w-full h-full cursor-none"
-      onMouseMove={updatePresence}
-    >
-      {Array.from(presence.entries()).map(([key, value]) => (
-        <Cursor key={key} presence={value} />
-      ))}
-    </svg>
+    <div className="w-full h-full">
+      <Header
+        title="Live Cursors"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/presence"
+      />
+      <svg
+        className="relative overflow-hidden w-full h-full cursor-none"
+        onMouseMove={updatePresence}
+      >
+        {Array.from(presence.entries()).map(([key, value]) => (
+          <Cursor key={key} presence={value} />
+        ))}
+      </svg>
+    </div>
   )
 }
diff --git a/examples/nextjs/src/app/(demos)/presence/page.tsx b/examples/nextjs/src/app/(demos)/presence/page.tsx
@@ -6,7 +6,9 @@ export default function Home({ searchParams }: { searchParams: { doc: string } }
   const docId = searchParams.doc ?? randomId()
   return (
     <YDocProvider docId={docId} setQueryParam="doc" authEndpoint="/api/auth" offlineSupport={true}>
-      <Presence />
+      <div className="p-4 lg:p-8">
+        <Presence />
+      </div>
     </YDocProvider>
   )
 }
diff --git a/examples/nextjs/src/app/(demos)/slate/SlateEditor.tsx b/examples/nextjs/src/app/(demos)/slate/SlateEditor.tsx
@@ -2,6 +2,7 @@
 
 import { useYDoc, useYjsProvider, useAwareness } from '@y-sweet/react'
 import { useEffect, useMemo, useState } from 'react'
+import Header from '@/components/Header'
 import * as Y from 'yjs'
 
 import RichtextSlateEditor from './RichtextSlateEditor'
@@ -25,7 +26,11 @@ export function SlateEditor() {
   if (!connected) return 'Loading...'
 
   return (
-    <div className="p-8">
+    <div className="p-4 lg:p-8 space-y-3">
+      <Header
+        title="Slate Rich Text Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/slate"
+      />
       <div className="bg-white rounded-lg">
         <RichtextSlateEditor sharedType={sharedType} awareness={awareness} />
       </div>
diff --git a/examples/nextjs/src/app/(demos)/text-editor/TextEditor.tsx b/examples/nextjs/src/app/(demos)/text-editor/TextEditor.tsx
@@ -3,7 +3,7 @@
 import { useText, useAwareness } from '@y-sweet/react'
 import { useEffect, useRef } from 'react'
 import { QuillBinding } from 'y-quill'
-import Title from '@/components/Title'
+import Header from '@/components/Header'
 
 import 'quill/dist/quill.snow.css'
 
@@ -44,7 +44,10 @@ export function TextEditor() {
 
   return (
     <div className="p-4 sm:p-8 space-y-3">
-      <Title>A Collaborative Text Editor</Title>
+      <Header
+        title="Quill Text Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/text-editor"
+      />
       <div className="bg-white/90">
         <div ref={editorRef} />
       </div>
diff --git a/examples/nextjs/src/app/(demos)/to-do-list/ToDoList.tsx b/examples/nextjs/src/app/(demos)/to-do-list/ToDoList.tsx
@@ -3,7 +3,7 @@
 import { useArray } from '@y-sweet/react'
 import { useCallback, useState } from 'react'
 import * as Y from 'yjs'
-import Title from '@/components/Title'
+import Header from '@/components/Header'
 
 type ToDoItem = {
   text: string
@@ -105,7 +105,11 @@ export function ToDoList() {
 
   return (
     <div className="space-y-4 p-4 lg:p-8">
-      <Title>To-do List</Title>
+      <Header
+        title="To-Do List"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/to-do-list"
+      />
+
       <div className="space-y-1">
         {items && items.map((item, index) => <ToDoItem key={index} item={item} />)}
       </div>
diff --git a/examples/nextjs/src/app/(demos)/tree-crdt/TreeView.tsx b/examples/nextjs/src/app/(demos)/tree-crdt/TreeView.tsx
@@ -7,6 +7,7 @@ import { useMap } from '@y-sweet/react'
 import * as Y from 'yjs'
 import Paragraph from '@/components/Paragraph'
 import { Link } from '@/components/Link'
+import Header from '@/components/Header'
 
 function useDragHelper(callback: (origin: LayoutNode, target: LayoutNode) => void) {
   const [dragOrigin, setDragOrigin] = useState<LayoutNode | null>(null)
@@ -211,6 +212,11 @@ export function TreeView() {
 
   return (
     <div className="p-4 sm:p-8 space-y-3">
+      <Header
+        title="Tree CRDT"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/tree-crdt"
+      />
+
       <Paragraph>
         This is a variation of Evan Wallace’s{' '}
         <Link href="https://madebyevan.com/algos/crdt-mutable-tree-hierarchy/">
diff --git a/examples/nextjs/src/app/(demos)/voxels/VoxelEditor.tsx b/examples/nextjs/src/app/(demos)/voxels/VoxelEditor.tsx
@@ -6,6 +6,7 @@ import { Compact } from '@uiw/react-color'
 import { usePresence, useMap, usePresenceSetter } from '@y-sweet/react'
 import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 import { Vector3, Vector3Tuple } from 'three'
+import Header from '@/components/Header'
 
 const DIM = 15
 const TRANSITION_RATE = 0.08
@@ -203,6 +204,10 @@ export function VoxelEditor() {
 
   return (
     <>
+      <Header
+        title="Voxel Editor"
+        githubLink="https://github.com/jamsocket/y-sweet/tree/main/examples/nextjs/src/app/(demos)/voxels"
+      />
       <div style={{ position: 'absolute', top: 0, right: 0, left: 0, bottom: 0 }}>
         <Canvas shadows>
           <OrbitControls ref={setInitialCameraPosition} />
diff --git a/examples/nextjs/src/components/CopyLink.tsx b/examples/nextjs/src/components/CopyLink.tsx
@@ -5,8 +5,8 @@ import Title from '@/components/Title'
 
 export default function CopyLink() {
   return (
-    <div className="mb-2 text-left items-center text-neutral-500 border-2 border-yellow-200 rounded-lg bg-yellow-50 px-6 py-3">
-      <div className="flex justify-between items-center pb-1">
+    <div className="mb-2 text-left items-center text-neutral-500 border-2 border-yellow-200 rounded-lg bg-yellow-50 px-6 py-4">
+      <div className="flex flex-col md:flex-row justify-between md:items-center gap-y-2 pb-1">
         <Title>Collaborate on this document</Title>
         <div className="flex">
           <button
diff --git a/examples/nextjs/src/components/Header.tsx b/examples/nextjs/src/components/Header.tsx
@@ -0,0 +1,35 @@
+'use client'
+import Title from '@/components/Title'
+
+interface HeaderProps {
+  title: string
+  githubLink: string
+}
+export default function Header(props: HeaderProps) {
+  const { title, githubLink } = props
+  return (
+    <div className="flex flex-col md:flex-row justify-between md:items-center gap-y-2">
+      <Title>{title}</Title>
+      <div className="flex">
+        <a
+          className="text-sm flex gap-2 items-center px-3 py-2 rounded-lg bg-pink-950 text-white border transition-all "
+          href={githubLink}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            className="w-5 h-5 text-white"
+          >
+            <path
+              fillRule="evenodd"
+              d="M12 0C5.373 0 0 5.373 0 12c0 5.302 3.438 9.8 8.205 11.387.6.11.793-.26.793-.577v-2.234c-3.338.726-4.033-1.415-4.033-1.415-.546-1.385-1.333-1.753-1.333-1.753-1.089-.744.083-.729.083-.729 1.205.084 1.838 1.238 1.838 1.238 1.07 1.834 2.809 1.305 3.495.998.108-.774.418-1.305.762-1.604-2.665-.3-5.466-1.333-5.466-5.931 0-1.31.469-2.382 1.236-3.221-.124-.303-.535-1.522.117-3.176 0 0 1.008-.322 3.3 1.23a11.48 11.48 0 013.004-.404c1.019.005 2.047.138 3.004.404 2.292-1.552 3.3-1.23 3.3-1.23.653 1.654.242 2.873.118 3.176.769.839 1.236 1.911 1.236 3.221 0 4.61-2.807 5.628-5.478 5.921.429.372.812 1.102.812 2.222v3.293c0 .319.192.694.801.576C20.565 21.796 24 17.298 24 12c0-6.627-5.373-12-12-12z"
+              clipRule="evenodd"
+            />
+          </svg>
+          <span>See code on Github</span>
+        </a>
+      </div>
+    </div>
+  )
+}

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,9 @@ export default function Home({ searchParams }: { searchParams: { doc: string } }`
`6`	`6`	`const docId = searchParams.doc ?? randomId()`
`7`	`7`	`return (`
`8`	`8`	`<YDocProvider docId={docId} setQueryParam="doc" authEndpoint="/api/auth" offlineSupport={true}>`
`9`		`- <Presence />`
	`9`	`+ <div className="p-4 lg:p-8">`
	`10`	`+ <Presence />`
	`11`	`+ </div>`
`10`	`12`	`</YDocProvider>`
`11`	`13`	`)`
`12`	`14`	`}`