basic profiles / 3rd party avatars (#356)

* basic profiles / 3rd party avatars

* fix

* improve code block in slash menu

* add react icon to code block

* add forks

* text styles

* misc fixes

* fix

* improve user picker

* fix placeholder

* set window title

* remove markdown-it

* fix gh ci

Author: YousefED

.github/workflows/build.yaml

@@ -20,7 +20,7 @@ jobs:
           node-version: 18.x
 
       # from https://github.com/supabase/supabase-action-example/
-      - run: supabase start -x studio,imgproxy,storage
+      - run: supabase start -x studio,imgproxy,storage,edge-runtime,vector,realtime,storage-api
         working-directory: packages/server
         env:
           TYPECELL_GITHUB_OAUTH_SECRET: ${{ secrets.TYPECELL_GITHUB_OAUTH_SECRET }}

package-lock.json

@@ -44,7 +44,7 @@
     "mobx-react-lite": "^3.2.0",
     "penpal": "^6.1.0",
     "react": "^18.2.0",
-    "react-avatar": "^3.10.0",
+    "react-avatar": "^5.0.3",
     "react-dnd": "^14.0.2",
     "react-dnd-html5-backend": "^14.0.0",
     "react-dom": "^18.2.0",

packages/editor/package.json

@@ -3,4 +3,5 @@
   flex-direction: column;
   width: 100%;
   height: 100%;
+  flex:1;
 }

packages/editor/src/app/documentRenderers/DocumentView.module.css

@@ -136,11 +136,17 @@ const DocumentView = observer((props: Props) => {
     throw new Error("Plugin not implemented");
   } else if (connection.doc.type === "!profile") {
     return (
-      <ProfileRenderer
-        key={connection.doc.id}
-        profile={connection.doc.getSpecificType(ProfileResource)!}
-        subIdentifiers={[]}
-      />
+      <div className={styles.view}>
+        <DocumentMenu
+          document={connection.doc}
+          sessionStore={props.sessionStore}></DocumentMenu>
+        <ProfileRenderer
+          key={connection.doc.id}
+          profile={connection.doc.getSpecificType(ProfileResource)!}
+          subIdentifiers={[]}
+          sessionStore={props.sessionStore}
+        />
+      </div>
     );
   } else if (connection.doc.type.startsWith("!")) {
     throw new Error("invalid built in type");

packages/editor/src/app/documentRenderers/DocumentView.tsx

@@ -0,0 +1,44 @@
+.container {
+    padding: 0 calc((100% - 731px) / 2);
+    padding-top:3em;
+    height: 100%;
+}
+
+.userHeader {
+    display:flex;
+    padding: 2em;
+    border-radius: 20px;
+    border: 1px solid rgba(0, 0, 0, 0.08);
+    box-shadow: rgb(0 0 0 / 25%) 0px 1px 3px -2px;
+    transition: box-shadow 0.16s ease;
+    
+}
+.userHeader:hover {
+    box-shadow: rgb(0 0 0 / 25%) 0px 10px 30px -20px;
+}
+
+.userHeader h1 {
+    flex:auto;
+    align-self: center;
+    margin:0;
+    margin-left:1em;
+    font-size:3em
+}
+
+.userInfo {
+    font-style: italic;
+}
+
+.workspaces, .forks {
+    margin-top:2em
+}
+
+.workspaces button, .forks button {
+    display:block;
+    margin-bottom:1em;
+
+}
+
+.avatar {
+    border: 1px solid rgba(0, 0, 0, 0.08)
+}