frontend(site): add static renderer

seed-hypermedia · Oct 17, 2023 · 737d86f · 737d86f
1 parent b2aa764
commit 737d86f
Show file tree

Hide file tree

Showing 6 changed files with 213 additions and 23 deletions.
diff --git a/frontend/apps/site/components/site-static-embeds.tsx b/frontend/apps/site/components/site-static-embeds.tsx
@@ -0,0 +1,163 @@
+import {trpc} from '../trpc'
+import {
+  Account,
+  DefaultStaticBlockUnknown,
+  Group,
+  StaticBlockNode,
+  StaticEmbedProps,
+  StaticGroup,
+  blockStyles,
+  createHmId,
+  getBlockNodeById,
+} from '@mintter/shared'
+import {SizableText, UIAvatar, XStack, YStack} from '@mintter/ui'
+import {Book} from '@tamagui/lucide-icons'
+import {cidURL} from 'ipfs'
+import {NextLink} from 'next-link'
+import {useRouter} from 'next/router'
+import {useMemo, PropsWithChildren} from 'react'
+
+function EmbedWrapper(props: PropsWithChildren<{hmRef: string}>) {
+  return (
+    <NextLink href={stripHMLinkPrefix(props.hmRef)}>
+      <YStack
+        {...blockStyles}
+        className="block-static block-embed"
+        hoverStyle={{
+          cursor: 'pointer',
+          backgroundColor: '$color5',
+        }}
+        overflow="hidden"
+        borderRadius="$3"
+        borderWidth={1}
+        borderColor="$color5"
+      >
+        {props.children}
+      </YStack>
+    </NextLink>
+  )
+}
+
+export function StaticBlockPublication(props: StaticEmbedProps) {
+  const docId = props.type == 'd' ? createHmId('d', props.eid) : undefined
+  const pub = trpc.publication.get.useQuery(
+    {
+      documentId: docId,
+      versionId: props.version || undefined,
+    },
+    {
+      enabled: !!docId,
+    },
+  )
+
+  let embedData = useMemo(() => {
+    const {data} = pub
+
+    const selectedBlock =
+      props.blockRef && data?.publication?.document?.children
+        ? getBlockNodeById(data.publication?.document.children, props.blockRef)
+        : null
+
+    const embedBlocks = selectedBlock
+      ? [selectedBlock]
+      : data?.publication?.document?.children
+
+    return {
+      ...pub,
+      data: {
+        publication: pub.data,
+        embedBlocks,
+      },
+    }
+  }, [props.blockRef, pub])
+
+  return (
+    <EmbedWrapper hmRef={props.id}>
+      {embedData.data.embedBlocks?.length ? (
+        <StaticGroup childrenType="group" marginLeft="-1.5em">
+          {embedData.data.embedBlocks.map((bn, idx) => (
+            <StaticBlockNode
+              key={bn.block?.id}
+              depth={1}
+              blockNode={bn}
+              childrenType="group"
+              index={idx}
+              embedDepth={1}
+            />
+          ))}
+        </StaticGroup>
+      ) : (
+        <DefaultStaticBlockUnknown {...props} />
+      )}
+    </EmbedWrapper>
+  )
+}
+
+export function StaticBlockGroup(props: StaticEmbedProps) {
+  const groupId = props.type == 'g' ? createHmId('g', props.eid) : undefined
+  const groupQuery = trpc.group.get.useQuery({groupId, version: ''})
+
+  return groupQuery.status == 'success' ? (
+    <EmbedWrapper hmRef={props.id}>
+      <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?.group?.title}
+            </SizableText>
+            <SizableText size="$2">
+              {groupQuery.data.group?.description}
+            </SizableText>
+          </YStack>
+        </YStack>
+      </XStack>
+    </EmbedWrapper>
+  ) : null
+}
+
+export function StaticBlockAccount(props: StaticEmbedProps) {
+  const accountId = props.type == 'a' ? props.eid : undefined
+  const accountQuery = trpc.account.get.useQuery({accountId})
+
+  return accountQuery.status == 'success' ? (
+    <EmbedWrapper hmRef={props.id}>
+      <XStack gap="$3" padding="$4" alignItems="flex-start">
+        <XStack paddingVertical="$3">
+          <UIAvatar
+            id={accountQuery.data.account?.id}
+            size={36}
+            label={accountQuery.data.account?.profile?.alias}
+            url={
+              accountQuery.data.account?.profile?.avatar
+                ? cidURL(accountQuery.data.account?.profile?.avatar)
+                : undefined
+            }
+          />
+        </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?.account?.profile?.alias}
+            </SizableText>
+            <SizableText size="$2">
+              {accountQuery.data.account?.profile?.bio}
+            </SizableText>
+          </YStack>
+        </YStack>
+      </XStack>
+    </EmbedWrapper>
+  ) : null
+}
+
+function stripHMLinkPrefix(link: string) {
+  return link.replace(/^hm:\//, '')
+}
diff --git a/frontend/apps/site/publication-page.tsx b/frontend/apps/site/publication-page.tsx
@@ -6,6 +6,8 @@ import {
   HMPublication,
   Publication,
   StaticBlockNode,
+  StaticPublication,
+  StaticPublicationProvider,
   UnpackedHypermediaId,
   createHmDocLink,
   formatBytes,
@@ -39,6 +41,12 @@ import Footer from './footer'
 import {PublicationMetadata} from './publication-metadata'
 import {SiteHead} from './site-head'
 import {trpc} from './trpc'
+import {
+  StaticBlockAccount,
+  StaticBlockGroup,
+  StaticBlockPublication,
+} from 'components/site-static-embeds'
+import {useRouter} from 'next/router'
 
 export type PublicationPageProps = {
   // documentId: string
@@ -86,6 +94,7 @@ export default function PublicationPage({
   contextGroup?: HMGroup | null
 }) {
   const media = useMedia()
+  const router = useRouter()
 
   const publication = trpc.publication.get.useQuery({
     documentId: documentId,
@@ -119,7 +128,22 @@ export default function PublicationPage({
 
         <PageSection.Content>
           {pub ? (
-            <PublicationContent publication={pub} />
+            <XStack marginLeft="-1.5em" flex={1}>
+              <StaticPublicationProvider
+                entityComponents={{
+                  StaticAccount: StaticBlockAccount,
+                  StaticGroup: StaticBlockGroup,
+                  StaticPublication: StaticBlockPublication,
+                }}
+                onLinkClick={(href, e) => {
+                  e.preventDefault()
+                  e.stopPropagation()
+                  router.push(href)
+                }}
+              >
+                <StaticPublication publication={pub} />
+              </StaticPublicationProvider>
+            </XStack>
           ) : publication.isLoading ? (
             <PublicationPlaceholder />
           ) : (

diff --git a/frontend/packages/app/components/static-embeds.tsx b/frontend/packages/app/components/static-embeds.tsx
@@ -118,9 +118,7 @@ export function StaticBlockGroup(props: StaticEmbedProps) {
             <SizableText size="$6" fontWeight="bold">
               {groupQuery.data?.title}
             </SizableText>
-            <SizableText size="$2">
-              Some random group description...
-            </SizableText>
+            <SizableText size="$2">{groupQuery.data?.description}</SizableText>
           </YStack>
         </YStack>
       </XStack>

diff --git a/frontend/packages/app/pages/publication.tsx b/frontend/packages/app/pages/publication.tsx
@@ -33,6 +33,7 @@ import {DocumentPlaceholder} from './document-placeholder'
 
 export default function PublicationPage() {
   const route = useNavRoute()
+  const openUrl = useOpenUrl()
   if (route.key !== 'publication')
     throw new Error('Publication page expects publication actor')
 
@@ -57,8 +58,6 @@ export default function PublicationPage() {
     publication.status == 'success' ? docId : undefined,
   )
 
-  const openUrl = useOpenUrl()
-
   if (publication.data) {
     return (
       <ErrorBoundary

diff --git a/frontend/packages/shared/src/static/static-renderer.tsx b/frontend/packages/shared/src/static/static-renderer.tsx
@@ -1,9 +1,12 @@
 import {
   Block,
   BlockNode,
+  HMBlock,
   HMBlockChildrenType,
   HMBlockFile,
+  HMBlockNode,
   HMInlineContent,
+  HMPublication,
   Publication,
   formatBytes,
   getCIDFromIPFSUrl,
@@ -35,8 +38,6 @@ import {
 } from 'react'
 import './static-styles.css'
 
-let blockVerticalPadding: FontSizeTokens = '$4'
-let blockHorizontalPadding: FontSizeTokens = '$4'
 let blockBorderRadius = '$3'
 
 export type EntityComponentsRecord = {
@@ -87,18 +88,23 @@ function debugStyles(color: ColorProp = '$color7') {
   return {}
 }
 
-export function StaticPublication({publication}: {publication: Publication}) {
+export function StaticPublication({
+  publication,
+}: {
+  publication: Publication | HMPublication
+}) {
   return (
     <StaticGroup childrenType={'group'}>
-      {publication.document?.children.map((bn, idx) => (
-        <StaticBlockNode
-          key={bn.block?.id}
-          blockNode={bn}
-          depth={1}
-          childrenType="group"
-          index={idx}
-        />
-      ))}
+      {publication.document?.children?.length &&
+        publication.document?.children?.map((bn, idx) => (
+          <StaticBlockNode
+            key={bn.block?.id}
+            blockNode={bn}
+            depth={1}
+            childrenType="group"
+            index={idx}
+          />
+        ))}
     </StaticGroup>
   )
 }
@@ -172,7 +178,7 @@ export function StaticBlockNode({
   childrenType = 'group',
   ...props
 }: {
-  blockNode: BlockNode
+  blockNode: BlockNode | HMBlockNode
   index: number
   copyBlock?: {
     docId: string
@@ -193,7 +199,7 @@ export function StaticBlockNode({
           depth={depth + 1}
           blockNode={bn}
           childrenType={blockNode.block!.attributes?.childrenType}
-          start={blockNode.block?.attributes.start}
+          start={blockNode.block?.attributes?.start}
           index={index}
           embedDepth={
             props.embedDepth ? props.embedDepth + 1 : props.embedDepth
@@ -282,7 +288,7 @@ let inlineContentProps: SizableTextProps = {
 }
 
 export type StaticBlockProps = {
-  block: Block
+  block: Block | HMBlock
   depth: number
 }
 

diff --git a/frontend/packages/ui/src/page-components.tsx b/frontend/packages/ui/src/page-components.tsx
@@ -92,7 +92,7 @@ const PageSectionContent = styled(YStack, {
   paddingBottom: '$4',
   width: '100%',
   flex: 1,
-  maxWidth: 680,
+  maxWidth: 720,
   $gtLg: {
     flex: 3,
     flexGrow: 1,
@@ -108,7 +108,7 @@ const PageSectionSide = styled(YStack, {
       },
     },
   },
-  maxWidth: 680,
+  maxWidth: 720,
   alignSelf: 'center',
   width: '100%',
   $gtLg: {