Front-end ID reorganization

seed-hypermedia · Sep 13, 2023 · 7b8afb3 · 7b8afb3
1 parent 720f3b3
commit 7b8afb3
Show file tree

Hide file tree

Showing 28 changed files with 646 additions and 595 deletions.
diff --git a/frontend/apps/site/account-page.tsx b/frontend/apps/site/account-page.tsx
@@ -1,4 +1,4 @@
-import {HYPERMEDIA_ACCOUNT_PREFIX} from '@mintter/shared'
+import {createHmId} from '@mintter/shared'
 import {
   Avatar,
   Heading,
@@ -52,10 +52,7 @@ export default function AccountPage({accountId}: {accountId: string}) {
   return (
     <YStack flex={1}>
       <Head>
-        <meta
-          name="hyperdocs-entity-id"
-          content={`${HYPERMEDIA_ACCOUNT_PREFIX}${accountId}`}
-        />
+        <meta name="hyperdocs-entity-id" content={createHmId('a', accountId)} />
       </Head>
       <SiteHead title={account?.profile?.alias} titleHref={`/a/${accountId}`} />
       <PageSection.Root flex={1}>

diff --git a/frontend/apps/site/pages/g/[groupId]/index.tsx b/frontend/apps/site/pages/g/[groupId]/index.tsx
@@ -21,15 +21,11 @@ import {
   View,
   SimpleTooltip,
 } from '@mintter/ui'
-import {HMGroup, HMPublication} from '@mintter/ui'
+import {HMGroup, HMPublication} from '../../../server/json-hm'
 import {ReactElement} from 'react'
 import {GestureResponderEvent} from 'react-native'
 import {Timestamp} from '@bufbuild/protobuf'
-import {
-  HYPERMEDIA_GROUP_PREFIX,
-  entityIdToSitePath,
-  formattedDate,
-} from '@mintter/shared'
+import {formattedDate, unpackHmId, createPublicWebHmUrl} from '@mintter/shared'
 import {AccountAvatarLink, AccountRow} from 'components/account-row'
 import {format} from 'date-fns'
 import {Paragraph} from 'tamagui'
@@ -43,9 +39,9 @@ function GroupOwnerSection({owner}: {owner: string}) {
   )
 }
 
-function GroupEditorsSection({groupEid}: {groupEid: string}) {
+function GroupEditorsSection({groupId}: {groupId: string}) {
   const groupMembers = trpc.group.listMembers.useQuery({
-    groupEid,
+    groupId,
   })
   if (!groupMembers.data) return null
 
@@ -143,6 +139,9 @@ function GroupContentItem({
   item: {pathName: string; publication: null | HMPublication}
   group?: null | HMGroup
 }) {
+  const groupId = group?.id ? unpackHmId(group?.id) : null
+  const groupEid = groupId?.eid
+  if (!groupEid) return null
   return (
     <ContentListItem
       title={item.pathName}
@@ -157,7 +156,9 @@ function GroupContentItem({
           />
         </>
       }
-      href={`${entityIdToSitePath(group?.id)}/${item.pathName}`}
+      href={`${createPublicWebHmUrl('g', groupEid, {hostname: null})}/${
+        item.pathName
+      }`}
     />
   )
 }
@@ -181,10 +182,7 @@ export default function GroupPage({
       <Head>
         {loadedGroup ? (
           <>
-            <meta
-              name="hyperdocs-entity-id"
-              content={`${HYPERMEDIA_GROUP_PREFIX}${loadedGroup.id}`}
-            />
+            <meta name="hyperdocs-entity-id" content={loadedGroup.id} />
             <meta
               name="hyperdocs-entity-version"
               content={loadedGroup.version}

diff --git a/frontend/apps/site/publication-metadata.tsx b/frontend/apps/site/publication-metadata.tsx
@@ -1,16 +1,16 @@
 import {
   abbreviateCid,
+  createPublicWebHmUrl,
   formattedDate,
-  getIdsfromUrl,
   HMTimestamp,
   pluralS,
+  unpackDocId,
 } from '@mintter/shared'
 import {
   Button,
   Paragraph,
   SideSection,
   SideSectionTitle,
-  SimpleTooltip,
   SizableText,
   Text,
   XStack,
@@ -22,7 +22,7 @@ import {format} from 'date-fns'
 import {NextLink} from 'next-link'
 import {ReactElement, useEffect, useMemo, useState} from 'react'
 import {toast} from 'react-hot-toast'
-import {HMBlockNode, HMChangeInfo, HMLink, HMPublication} from '@mintter/ui'
+import {HMBlockNode, HMChangeInfo, HMLink, HMPublication} from 'server/json-hm'
 import {trpc} from './trpc'
 
 function IDLabelRow({id, label}: {id?: string; label: string}) {
@@ -308,20 +308,20 @@ function surfaceEmbedRefs(children?: HMBlockNode[]): EmbedRef[] {
 }
 
 function EmbeddedDocMeta({blockId, url}: {blockId: string; url: string}) {
-  const [docId, versionId, refBlockId] = getIdsfromUrl(url)
+  const urlId = unpackDocId(url)
   const pub = trpc.publication.get.useQuery(
     {
-      documentId: docId,
-      versionId,
+      documentId: urlId?.docId,
+      versionId: urlId?.version,
     },
     {
-      enabled: !!docId,
+      enabled: !!urlId,
     },
   )
-  if (!docId) return null
+  if (!urlId?.eid) return null
   return (
     <NextLink
-      href={getDocUrl(docId, versionId, refBlockId)}
+      href={createPublicWebHmUrl('d', urlId.eid, urlId)}
       style={{textDecoration: 'none'}}
     >
       <XStack

diff --git a/frontend/apps/site/publication-page.tsx b/frontend/apps/site/publication-page.tsx
@@ -2,7 +2,6 @@ import {
   Account,
   EmbedBlock,
   getCIDFromIPFSUrl,
-  getIdsfromUrl,
   extractEntityId,
   HeadingBlock,
   ImageBlock,
@@ -13,9 +12,11 @@ import {
   SiteInfo,
   Block,
   Publication,
-  entityIdToSitePath,
-  HYPERMEDIA_DOCUMENT_PREFIX,
-  matchesHypermediaPattern,
+  isHypermediaScheme,
+  createPublicWebHmUrl,
+  unpackHmId,
+  idToUrl,
+  unpackDocId,
 } from '@mintter/shared'
 import {
   Button,
@@ -35,22 +36,13 @@ import {cidURL} from 'ipfs'
 import Head from 'next/head'
 import {useRouter} from 'next/router'
 import {useMemo, useState} from 'react'
-import {HMBlock, HMBlockNode, HMGroup, HMPublication} from '@mintter/ui'
+import {HMBlock, HMBlockNode, HMGroup, HMPublication} from './server/json-hm'
 import {WebTipping} from 'web-tipping'
 import {PublicationMetadata} from './publication-metadata'
 import {SiteHead} from './site-head'
 import {trpc} from './trpc'
 import Link from 'next/link'
 
-function hmLinkToSitePath(link: string) {
-  const [docId, version, block] = getIdsfromUrl(link)
-  if (!docId) return link
-  let path = `/d/${docId}`
-  if (version) path += `?v=${version}`
-  if (block) path += `#${block}`
-  return path
-}
-
 export type PublicationPageProps = {
   // documentId: string
   // version: string | null
@@ -125,7 +117,9 @@ function GroupSidebarContent({
     docId: string
   }>
 }) {
-  const groupLink = entityIdToSitePath(group?.id)
+  const groupId = group?.id ? unpackHmId(group?.id) : null
+  const groupLink =
+    groupId?.eid && createPublicWebHmUrl('g', groupId.eid, {hostname: null})
   return (
     <>
       {groupLink && (
@@ -209,10 +203,7 @@ export default function PublicationPage({
   return (
     <YStack flex={1}>
       <Head>
-        <meta
-          name="hyperdocs-entity-id"
-          content={`${HYPERMEDIA_DOCUMENT_PREFIX}${pub?.document?.id}`}
-        />
+        <meta name="hyperdocs-entity-id" content={pub?.document?.id} />
         <meta name="hyperdocs-entity-version" content={pub?.version} />
         <meta name="hyperdocs-entity-title" content={pub?.document?.title} />
         {/* legacy mintter metadata */}
@@ -308,19 +299,20 @@ function InlineContentView({
           )
         }
         if (content.type === 'link') {
-          let matchesPattern = matchesHypermediaPattern(content.href)
-          const href = matchesPattern
-            ? hmLinkToSitePath(content.href)
-            : content.href
+          const href = idToUrl(content.href, null)
           return (
-            <a
-              href={href}
-              key={index}
-              className={matchesPattern ? 'hm-link' : 'link'}
-              style={{cursor: 'pointer'}}
-            >
-              <InlineContentView inline={content.content} />
-            </a>
+            href && (
+              <a
+                href={href}
+                key={index}
+                className={
+                  isHypermediaScheme(content.href) ? 'hm-link' : 'link'
+                }
+                style={{cursor: 'pointer'}}
+              >
+                <InlineContentView inline={content.content} />
+              </a>
+            )
           )
         }
         return null
@@ -379,21 +371,21 @@ function stripHMLinkPrefix(link: string) {
 
 function StaticEmbedBlock({block}: {block: EmbedBlock}) {
   const reference = block.ref
-  const [documentId, versionId, blockId] = getIdsfromUrl(reference)
+  const docId = unpackDocId(reference)
   const router = useRouter()
   let embed = trpc.publication.get.useQuery(
     {
-      documentId,
-      versionId,
+      documentId: docId?.docId,
+      versionId: docId?.version,
     },
-    {enabled: !!documentId},
+    {enabled: !!docId},
   )
   let content = <Spinner />
   if (embed.data?.publication?.document?.children) {
-    if (blockId) {
+    if (docId?.blockRef) {
       const blockNode = getBlockNodeById(
         embed.data?.publication?.document?.children,
-        blockId,
+        docId.blockRef,
       )
       content = blockNode ? (
         <StaticBlockNode block={blockNode} />

diff --git a/frontend/apps/site/server/routers/_app.ts b/frontend/apps/site/server/routers/_app.ts
@@ -4,11 +4,11 @@ import {
   Changes,
   ContentGraph,
   Groups,
-  HYPERMEDIA_GROUP_PREFIX,
   Publications,
   Role,
   WebPublishing,
-  getIdsfromUrl,
+  unpackDocId,
+  unpackHmId,
 } from '@mintter/shared'
 import {localWebsiteClient, transport} from 'client'
 import {getSiteInfo} from 'get-site-info'
@@ -244,15 +244,14 @@ const groupRouter = router({
   getGroupPath: procedure
     .input(
       z.object({
-        groupEid: z.string(),
+        groupId: z.string(),
         pathName: z.string(),
         version: z.string().optional(),
       }),
     )
-    .query(async ({input: {pathName, groupEid, version}}) => {
+    .query(async ({input: {pathName, groupId, version}}) => {
       // todo. get current group content and find the pathName, return the corresponding doc
       console.log('getting site info')
-      const groupId = `${HYPERMEDIA_GROUP_PREFIX}${groupEid}`
       const siteInfo = await groupsClient.listContent({
         id: groupId,
         version,
@@ -263,32 +262,31 @@ const groupRouter = router({
       })
       const item = siteInfo.content[pathName]
       if (!item) return null
-      const [documentId, documentVersion] = getIdsfromUrl(item)
-      if (!documentId || !documentVersion) return null // version is required for group content
+      const itemId = unpackDocId(item)
+      if (!itemId?.version) return null // version is required for group content
       const pub = await publicationsClient.getPublication({
-        documentId,
-        version: documentVersion,
+        documentId: itemId.docId,
+        version: itemId.version,
       })
       return {
         publication: hmPublication(pub),
         pathName,
-        documentId,
-        documentVersion,
+        documentId: itemId.docId,
+        documentVersion: itemId.version,
         groupVersion: version,
-        groupEid,
         group: hmGroup(group),
       }
     }),
   get: procedure
     .input(
       z.object({
-        groupEid: z.string(),
+        groupId: z.string(),
       }),
     )
     .query(async ({input}) => {
       console.log('will getGroup with id', input)
       const group = await groupsClient.getGroup({
-        id: `${HYPERMEDIA_GROUP_PREFIX}${input.groupEid}`,
+        id: input.groupId,
       })
       console.log('did get group', hmGroup(group))
       return {
@@ -298,26 +296,26 @@ const groupRouter = router({
   listContent: procedure
     .input(
       z.object({
-        groupEid: z.string(),
+        groupId: z.string(),
       }),
     )
     .query(async ({input}) => {
       const list = await groupsClient.listContent({
-        id: `${HYPERMEDIA_GROUP_PREFIX}${input.groupEid}`,
+        id: input.groupId,
       })
       const listedDocs = await Promise.all(
         Object.entries(list.content).map(async ([pathName, pubUrl]) => {
-          const [docId, version] = getIdsfromUrl(pubUrl)
-          if (!docId || !version) return null // version is required for group content
+          const docId = unpackDocId(pubUrl)
+          if (!docId?.version) return null // version is required for group content
 
           const pub = await publicationsClient.getPublication({
-            documentId: docId,
-            version,
+            documentId: docId.docId,
+            version: docId.version,
           })
           return {
             pathName,
             docId,
-            version,
+            version: docId.version,
             publication: hmPublication(pub),
           }
         }),
@@ -333,12 +331,12 @@ const groupRouter = router({
   listMembers: procedure
     .input(
       z.object({
-        groupEid: z.string(),
+        groupId: z.string(),
       }),
     )
     .query(async ({input}) => {
       const list = await groupsClient.listMembers({
-        id: `${HYPERMEDIA_GROUP_PREFIX}${input.groupEid}`,
+        id: input.groupId,
       })
       return Object.entries(list.members || {}).map(([account, role]) => ({
         account,