Groups Sites 2.0

docs/docs/dev-setup.md

@@ -70,3 +70,24 @@ Eventually we might be able to setup all of this be configured with Nix.
 ## Building On Windows
 
 Internally, none of us uses Windows for development, but we _do_ build _for_ Windows _on_ Windows machines in CI. You can inspect the corresponding GitHub Actions workflow definitions to find out what needs to be installed to compile the project.
+
+
+### Running Web Site
+
+#### 1. Run the Daemon
+
+You can start the daemon go daemon with:
+
+`go run ./backend/cmd/mintter-site "http://localhost:3000" -data-dir=$HOME/.mttsite -p2p.port=57000  -grpc.port=57002 -http.port=57001 -p2p.no-relay`
+
+Alternatively, you can do this in two steps:
+
+`go build -o plz-out/stellar ./backend/cmd/mintter-site`
+
+`./plz-out/stellar "https://mintter.com" -data-dir /root/.mttsite -p2p.port=57000  -grpc.port=57002 -http.port=57001 -p2p.no-relay`
+
+### 2. Start the Next.js Web App
+
+In the Mintter directory, start by running `yarn`. Then:
+
+`HM_BASE_URL="http://localhost:3000" NEXT_PUBLIC_GRPC_HOST="http://localhost:57001" PORT=3000 yarn site`

frontend/apps/site/account-page.tsx

@@ -43,11 +43,10 @@ function isEmptyObject(obj: unknown) {
 }
 
 export default function AccountPage({accountId}: {accountId: string}) {
-  const publication = trpc.account.get.useQuery({
+  const query = trpc.account.get.useQuery({
     accountId,
   })
-
-  const account = publication.data?.account
+  const account = query.data?.account
 
   return (
     <YStack flex={1}>
@@ -58,9 +57,9 @@ export default function AccountPage({accountId}: {accountId: string}) {
       <PageSection.Root flex={1}>
         <PageSection.Side />
         <PageSection.Content tag="main" id="main-content" tabIndex={-1}>
-          {account && publication.isSuccess ? (
+          {account && query.isSuccess ? (
             <AccountContent account={account} />
-          ) : publication.isLoading ? (
+          ) : query.isLoading ? (
             <AccountPlaceholder />
           ) : (
             <AccountNotFound account={account} />

frontend/apps/site/pages/[pathName].tsx

@@ -0,0 +1,21 @@
+import {GetServerSideProps} from 'next'
+import {PubSlugPageProps} from 'publication-slug-page'
+import {EveryPageProps} from './_app'
+import GroupPublicationPage from './g/[groupEid]/[pathName]'
+import {getSiteGroup} from 'server/site-info'
+import {getGroupPathNamePageProps, getGroupView} from 'server/group'
+
+const PathPublicationPage = GroupPublicationPage
+export default PathPublicationPage
+
+export const getServerSideProps: GetServerSideProps<
+  EveryPageProps & PubSlugPageProps
+> = async (context) => {
+  const pathName = (context.params?.pathName as string) || ''
+  const {groupEid} = await getSiteGroup()
+  return await getGroupPathNamePageProps({
+    groupEid,
+    pathName,
+    context,
+  })
+}

frontend/apps/site/pages/d/[docEid].tsx

@@ -9,19 +9,6 @@ import {useRequiredRouteQuery, useRouteQuery} from 'server/router-queries'
 import {getPageProps, serverHelpers} from 'server/ssr-helpers'
 import {createHmId} from '@mintter/shared'
 
-function getDocSlugUrl(
-  pathName: string | undefined,
-  docId: string,
-  versionId?: string,
-  blockRef?: string,
-) {
-  let url = `/d/${docId}`
-  if (pathName) url = pathName === '/' ? '/' : `/${pathName}`
-  if (versionId) url += `?v=${versionId}`
-  if (blockRef) url += `#${blockRef}`
-  return url
-}
-
 export default function IDPublicationPage(
   props: InferGetServerSidePropsType<typeof getServerSideProps>,
 ) {
@@ -47,21 +34,6 @@ export const getServerSideProps: GetServerSideProps = async (
 
   const helpers = serverHelpers({})
 
-  // if (docRecord) {
-  // // old redirect to pretty URL behavior
-  //   return {
-  //     redirect: {
-  //       temporary: true,
-  //       destination: getDocSlugUrl(
-  //         docRecord.path,
-  //         docId,
-  //         version || docRecord.versionId,
-  //       ),
-  //     },
-  //     props: {},
-  //   } as const
-  // }
-
   // await impatiently(
   //   helpers.publication.get.prefetch({
   //     documentId: docId,

frontend/apps/site/pages/g/[groupEid]/[pathName].tsx

@@ -1,12 +1,9 @@
-import {createHmId} from '@mintter/shared'
+import {getGroupPathNamePageProps} from 'server/group'
 import {Heading, Spinner} from '@mintter/ui'
-import {daemonClient, networkingClient} from 'client'
 import {GetServerSideProps} from 'next'
 import {EveryPageProps} from 'pages/_app'
 import PublicationPage from 'publication-page'
-import {setAllowAnyHostGetCORS} from 'server/cors'
 import {useRouteQuery} from 'server/router-queries'
-import {getPageProps, serverHelpers} from 'server/ssr-helpers'
 import {trpc} from 'trpc'
 
 export type GroupPubPageProps = {
@@ -40,23 +37,9 @@ export const getServerSideProps: GetServerSideProps<
 > = async (context) => {
   const pathName = (context.params?.pathName as string) || ''
   const groupEid = (context.params?.groupEid as string) || ''
-  const groupId = createHmId('g', groupEid)
-  const helpers = serverHelpers({})
-
-  setAllowAnyHostGetCORS(context.res)
-
-  const info = await daemonClient.getInfo({})
-  const peerInfo = await networkingClient.getPeerInfo({
-    deviceId: info.deviceId,
+  return await getGroupPathNamePageProps({
+    groupEid,
+    pathName,
+    context,
   })
-  context.res.setHeader(
-    'x-mintter-site-p2p-addresses',
-    peerInfo.addrs.join(','),
-  )
-  const group = await helpers.group.get.fetch({groupId})
-  const groupContent = await helpers.group.listContent.fetch({groupId})
-
-  return {
-    props: await getPageProps(helpers, {pathName, groupId}),
-  }
 }

frontend/apps/site/pages/g/[groupEid]/index.tsx

@@ -10,6 +10,8 @@ import {SiteHead} from '../../../site-head'
 
 import {Timestamp} from '@bufbuild/protobuf'
 import {
+  Publication,
+  UnpackedHypermediaId,
   createHmId,
   createPublicWebHmUrl,
   formattedDate,
@@ -29,11 +31,13 @@ import {
 } from '@mintter/ui'
 import {AccountAvatarLink, AccountRow} from 'components/account-row'
 import {format} from 'date-fns'
-import {ReactElement} from 'react'
+import {ReactElement, ReactNode} from 'react'
 import {GestureResponderEvent} from 'react-native'
 import {Paragraph} from 'tamagui'
 import {HMGroup, HMPublication} from '../../../server/json-hm'
 import {trpc} from '../../../trpc'
+import {GroupView, getGroupPageProps, getGroupView} from '../../../server/group'
+import {PublicationContent} from '../../../publication-page'
 
 function GroupOwnerSection({owner}: {owner: string}) {
   return (
@@ -166,20 +170,77 @@ function GroupContentItem({
   )
 }
 
-export default function GroupPage({
-  groupId,
-  version,
-}: InferGetServerSidePropsType<typeof getServerSideProps>) {
+function FrontDoc({
+  item,
+}: {
+  item:
+    | {
+        version: string
+        pathName: string
+        publication: HMPublication | null
+        docId: UnpackedHypermediaId & {docId: string}
+      }
+    | null
+    | undefined
+}) {
+  if (!item?.publication) return <Text>Not Found</Text>
+  return <PublicationContent publication={item?.publication} />
+}
+
+export type GroupPageProps = {
+  groupId: string
+  version?: string
+  view: GroupView
+}
+
+export default function GroupPage({groupId, version, view}: GroupPageProps) {
   const group = trpc.group.get.useQuery({
     groupId,
-    //version
+    version,
   })
   const groupContent = trpc.group.listContent.useQuery({
     groupId,
   })
 
   const loadedGroup = group.data?.group
 
+  const listView = groupContent.data
+    ? groupContent.data.map((contentItem) => {
+        if (contentItem?.pathName === '/') return null
+        return (
+          contentItem && (
+            <GroupContentItem
+              key={contentItem?.pathName}
+              item={contentItem}
+              group={loadedGroup}
+            />
+          )
+        )
+      })
+    : null
+
+  let mainView: ReactNode = listView
+
+  const frontPageItem = groupContent.data?.find(
+    (item) => item?.pathName === '/',
+  )
+
+  const frontDocView = <FrontDoc item={frontPageItem} />
+
+  if (view === 'front') {
+    mainView = frontDocView
+  } else if (view === 'list') {
+    mainView = listView
+  } else if (frontPageItem) {
+    mainView = (
+      <>
+        {frontDocView}
+        {listView}
+      </>
+    )
+  } else {
+    mainView = listView
+  }
   return (
     <YStack flex={1}>
       <Head>
@@ -234,19 +295,7 @@ export default function GroupPage({
               {loadedGroup?.description}
             </Text>
           ) : null}
-          {groupContent.data
-            ? groupContent.data.map((contentItem) => {
-                return (
-                  contentItem && (
-                    <GroupContentItem
-                      key={contentItem?.pathName}
-                      item={contentItem}
-                      group={loadedGroup}
-                    />
-                  )
-                )
-              })
-            : null}
+          {mainView}
         </PageSection.Content>
         <PageSection.Side>
           <YStack className="publication-sidenav-sticky">
@@ -263,26 +312,8 @@ export const getServerSideProps: GetServerSideProps = async (
   context: GetServerSidePropsContext,
 ) => {
   const {params, query} = context
-  const groupEid = params?.groupId ? String(params.groupId) : undefined
-  const groupId = groupEid ? createHmId('g', groupEid) : undefined
-
-  let version = query.v ? String(query.v) : null
-
-  setAllowAnyHostGetCORS(context.res)
-
-  if (!groupId) return {notFound: true} as const
-
-  const helpers = serverHelpers({})
-
-  const groupRecord = await helpers.group.get.fetch({
-    groupId,
-  })
-
-  await helpers.group.listContent.prefetch({
-    groupId,
-  })
-
-  return {
-    props: await getPageProps(helpers, {groupId, version}),
-  }
+  const groupEid = params?.groupEid ? String(params.groupEid) : undefined
+  if (!groupEid) return {notFound: true}
+  const view = getGroupView(query.view)
+  return await getGroupPageProps({groupEid, context, view})
 }

frontend/apps/site/pages/index.tsx

@@ -1,22 +1,19 @@
 import {GetServerSideProps} from 'next'
-import PublicationSlugPage, {PubSlugPageProps} from 'publication-slug-page'
-import {prepareSlugPage} from 'server/page-slug'
+import {PubSlugPageProps} from 'publication-slug-page'
 import {EveryPageProps} from './_app'
+import {getGroupPageProps, getGroupView} from 'server/group'
+import {getSiteGroup} from 'server/site-info'
+import GroupPage, {GroupPageProps} from './g/[groupEid]'
 
-// // Temp Mintter home screen document:
-// let fallbackDocId = process.env.MINTTER_HOME_PUBID || 'mnoboS11GwRlRAh2dhYlTw'
-// let fallbackVersion =
-//   process.env.MINTTER_HOME_VERSION ||
-//   'bafy2bzacednwllikmc7rittnmz4s7cfpo3p2ldsap3bcmgxp7cdpzhoiu5w'
-
-// //https://mintter.com/p/mnoboS11GwRlRAh2dhYlTw?v=bafy2bzacednwllikmc7rittnmz4s7cfpo3p2ldsap3bcmgxp7cdpzhoiu5w
-
-export default function HomePage(props: {pathName: string}) {
-  return <PublicationSlugPage pathName={props.pathName} />
+export default function HomePage(props: GroupPageProps) {
+  return <GroupPage {...props} />
 }
 
 export const getServerSideProps: GetServerSideProps<
   EveryPageProps & PubSlugPageProps
 > = async (context) => {
-  return await prepareSlugPage(context, '/')
+  const {groupEid} = await getSiteGroup()
+  console.log('serer side', context.query)
+  const view = getGroupView(context.query.view)
+  return await getGroupPageProps({groupEid, context, view})
 }