frontend(renderer): remove ugly lines. new embed cards

seed-hypermedia · Oct 17, 2023 · e104481 · e104481
1 parent 239a3f5
commit e104481
Show file tree

Hide file tree

Showing 8 changed files with 1,005 additions and 158 deletions.
diff --git a/frontend/apps/site/publication-page.tsx b/frontend/apps/site/publication-page.tsx
@@ -5,6 +5,7 @@ import {
   HMGroup,
   HMPublication,
   Publication,
+  StaticBlockNode,
   UnpackedHypermediaId,
   createHmDocLink,
   formatBytes,
@@ -13,7 +14,6 @@ import {
   unpackHmId,
 } from '@mintter/shared'
 
-import {StaticBlockNode} from '@mintter/shared'
 import {
   ArrowRight,
   Button,
@@ -30,6 +30,7 @@ import {
   useMedia,
 } from '@mintter/ui'
 import {DehydratedState} from '@tanstack/react-query'
+import {OGImageMeta} from 'head'
 import {NextLink} from 'next-link'
 import Head from 'next/head'
 import {useMemo} from 'react'
@@ -38,7 +39,6 @@ import Footer from './footer'
 import {PublicationMetadata} from './publication-metadata'
 import {SiteHead} from './site-head'
 import {trpc} from './trpc'
-import {OGImageMeta} from 'head'
 
 export type PublicationPageProps = {
   // documentId: string

diff --git a/frontend/packages/app/components/static-embeds.tsx b/frontend/packages/app/components/static-embeds.tsx
@@ -67,6 +67,7 @@ export function StaticBlockPublication(props: StaticEmbedProps) {
               blockNode={bn}
               childrenType="group"
               index={idx}
+              embedDepth={1}
             />
           ))}
         </StaticGroup>
@@ -78,25 +79,80 @@ export function StaticBlockPublication(props: StaticEmbedProps) {
 }
 
 export function StaticBlockGroup(props: StaticEmbedProps) {
-  const groupId = props.type == 'g' ? createHmId('d', props.eid) : undefined
+  const groupId = props.type == 'g' ? createHmId('g', props.eid) : undefined
   const groupQuery = useGroup(groupId, props.version || undefined)
 
-  if (groupQuery.status == 'success') {
-    return <GroupCard group={groupQuery.data} />
-  }
-
-  return null
+  return groupQuery.status == 'success' ? (
+    <YStack
+      flex={1}
+      overflow="hidden"
+      borderRadius="$3"
+      backgroundColor="$backgroundFocus"
+      hoverStyle={{
+        backgroundColor: '$color6',
+      }}
+    >
+      <XStack gap="$3" padding="$4" alignItems="flex-start">
+        <XStack paddingVertical="$3">
+          <Book size={36} />
+        </XStack>
+        <YStack justifyContent="center" flex={1}>
+          <SizableText size="$1" opacity={0.5} flex={0}>
+            Group
+          </SizableText>
+          <YStack gap="$2">
+            <SizableText size="$6" fontWeight="bold">
+              {groupQuery.data?.title}
+            </SizableText>
+            <SizableText size="$2">
+              Some random group description...
+            </SizableText>
+          </YStack>
+        </YStack>
+      </XStack>
+    </YStack>
+  ) : null
 }
 
 export function StaticBlockAccount(props: StaticEmbedProps) {
   const accountId = props.type == 'a' ? props.eid : undefined
   const accountQuery = useAccount(accountId)
 
-  if (accountQuery.status == 'success') {
-    return <AccountCard account={accountQuery.data} />
-  }
-
-  return null
+  return accountQuery.status == 'success' ? (
+    <YStack
+      flex={1}
+      overflow="hidden"
+      borderRadius="$3"
+      backgroundColor="$backgroundFocus"
+      hoverStyle={{
+        backgroundColor: '$color6',
+      }}
+    >
+      <XStack gap="$3" padding="$4" alignItems="flex-start">
+        <XStack paddingVertical="$3">
+          <UIAvatar
+            id={accountQuery.data.id}
+            size={36}
+            label={accountQuery.data.profile?.alias}
+            url={getAvatarUrl(accountQuery.data.profile?.avatar)}
+          />
+        </XStack>
+        <YStack justifyContent="center" flex={1}>
+          <SizableText size="$1" opacity={0.5} flex={0}>
+            Account
+          </SizableText>
+          <YStack gap="$2">
+            <SizableText size="$6" fontWeight="bold">
+              {accountQuery.data?.profile?.alias}
+            </SizableText>
+            <SizableText size="$2">
+              {accountQuery.data.profile?.bio}
+            </SizableText>
+          </YStack>
+        </YStack>
+      </XStack>
+    </YStack>
+  ) : null
 }
 
 function EntityCard({
@@ -111,15 +167,9 @@ function EntityCard({
   route: NavRoute
 }) {
   return (
-    <XStack gap="$3">
-      {icon}
-      <YStack>
-        <SizableText size="$5" fontWeight="bold" fontFamily="$body">
-          {title}
-        </SizableText>
-        <SizableText fontFamily="$body">{description}</SizableText>
-      </YStack>
-    </XStack>
+    <YStack {...blockStyles}>
+      <span>{JSON.stringify({title, description, route})}</span>
+    </YStack>
   )
 }
 function GroupCard({group}: {group: Group}) {

diff --git a/frontend/packages/editor/src/editor.tsx b/frontend/packages/editor/src/editor.tsx
@@ -1,4 +1,5 @@
 import {HyperDocsEditor} from '@mintter/app/models/documents'
+import {useOpenUrl} from '@mintter/app/open-url'
 import {YStack} from '@mintter/ui'
 import {
   BlockNoteView,
@@ -9,13 +10,6 @@ import {
 } from './blocknote'
 import './blocknote/core/style.css'
 import './editor.css'
-import {useOpenUrl} from '@mintter/app/open-url'
-import {
-  DefaultStaticBlockAccount,
-  DefaultStaticBlockGroup,
-  DefaultStaticBlockPublication,
-  StaticPublicationProvider,
-} from '@mintter/shared'
 
 export function HyperMediaEditorView({editor}: {editor: HyperDocsEditor}) {
   const openUrl = useOpenUrl()

diff --git a/frontend/packages/shared/src/index.ts b/frontend/packages/shared/src/index.ts
@@ -2,6 +2,5 @@ export * from './client'
 export * from './constants'
 export * from './grpc-client'
 export * from './hm-documents'
-export * from './json-hm'
 export * from './utils'
 export * from './static'
diff --git a/frontend/packages/shared/src/json-hm.ts b/frontend/packages/shared/src/json-hm.ts