feat(pubcontent): add debug block

frontend/apps/site/src/site-embeds.tsx

@@ -14,6 +14,9 @@ import {
   getBlockNodeById,
   isHypermediaScheme,
   unpackHmId,
+  usePublicationContentContext,
+  contentLayoutUnit,
+  contentTextUnit,
 } from '@mintter/shared'
 import {Spinner, YStack} from '@mintter/ui'
 import {NextLink} from 'src/next-link'
@@ -32,6 +35,9 @@ export function SitePublicationContentProvider({
   const router = useRouter()
   return (
     <PublicationContentProvider
+      layoutUnit={contentLayoutUnit}
+      textUnit={contentTextUnit}
+      debug={false}
       entityComponents={{
         AccountCard: EmbedAccount,
         GroupCard: EmbedGroup,
@@ -82,6 +88,7 @@ export function SitePublicationContentProvider({
 }
 
 function EmbedWrapper(props: PropsWithChildren<{hmRef: string}>) {
+  const {layoutUnit} = usePublicationContentContext()
   return (
     <NextLink
       href={stripHMLinkPrefix(props.hmRef)}
@@ -95,12 +102,11 @@ function EmbedWrapper(props: PropsWithChildren<{hmRef: string}>) {
           backgroundColor: '$color5',
         }}
         margin={0}
-        marginLeft={-13}
-        width="calc(100% + 13px)"
+        marginHorizontal={(-1 * layoutUnit) / 2}
+        width={`calc(100% + ${layoutUnit})`}
+        padding={layoutUnit / 2}
         overflow="hidden"
-        borderRadius="$3"
-        borderWidth={1}
-        borderColor="$color5"
+        borderRadius={layoutUnit / 4}
       >
         {props.children}
       </YStack>
@@ -145,7 +151,7 @@ export function EmbedPublication(props: StaticEmbedProps) {
   return (
     <EmbedWrapper hmRef={props.id}>
       {embedBlocks?.length ? (
-        <BlockNodeList childrenType="group" marginLeft="-1.5em">
+        <BlockNodeList childrenType="group">
           {embedBlocks.map((bn, idx) => (
             <BlockNodeContent
               key={bn.block?.id}

frontend/packages/app/components/app-embeds.tsx

@@ -20,7 +20,7 @@ import {unpackHmIdWithAppRoute} from '../utils/navigation'
 import {useNavigate} from '../utils/useNavigate'
 
 function EmbedWrapper(props: PropsWithChildren<{hmRef: string}>) {
-  const {disableEmbedClick = false} = usePublicationContentContext()
+  const {disableEmbedClick = false, layoutUnit} = usePublicationContentContext()
   let spawn = useNavigate('spawn')
   return (
     <YStack
@@ -36,13 +36,10 @@ function EmbedWrapper(props: PropsWithChildren<{hmRef: string}>) {
         // borderColor: '$color6',
       }}
       margin={0}
-      marginLeft={-13}
-      width="calc(100% + 13px)"
-      padding="$2"
+      marginHorizontal={(-1 * layoutUnit) / 2}
+      padding={layoutUnit / 2}
       overflow="hidden"
-      borderRadius="$3"
-      borderWidth={2}
-      borderColor="transparent"
+      borderRadius={layoutUnit / 4}
       onPress={
         !disableEmbedClick
           ? () => {

frontend/packages/shared/src/index.ts

@@ -4,3 +4,4 @@ export * from './grpc-client'
 export * from './hm-documents'
 export * from './utils'
 export * from './publication-content'
+export * from './publication-content-constants'

frontend/packages/shared/src/publication-content-constants.ts

@@ -0,0 +1,2 @@
+export const contentTextUnit = 18
+export const contentLayoutUnit = 24

frontend/packages/shared/src/publication-content.css

@@ -1,23 +1,3 @@
 .blocknode-list {
-  /* border: 1px solid gray; */
   -webkit-font-smoothing: antialiased;
 }
-
-/* .content-embed {
-  zoom: 0.9;
-} */
-
-.content-inline {
-  line-height: 1.5;
-}
-
-li.blocknode-content {
-  font-family: 'Courier New', Courier, monospace;
-  position: absolute;
-}
-
-.content-inline code {
-  padding: 0.18rem 0.3rem;
-  border-radius: 6px;
-  font-size: 85%;
-}