From 54e83406e94927c1e117cc006402faa787c64c6e Mon Sep 17 00:00:00 2001 From: Horacio Herrera Date: Wed, 18 Oct 2023 01:29:05 +0200 Subject: [PATCH] frontend(static): remove duplicate files --- .../packages/shared/src/static-renderer.tsx | 898 ------------------ .../packages/shared/src/static-styles.css | 11 - 2 files changed, 909 deletions(-) delete mode 100644 frontend/packages/shared/src/static-renderer.tsx delete mode 100644 frontend/packages/shared/src/static-styles.css diff --git a/frontend/packages/shared/src/static-renderer.tsx b/frontend/packages/shared/src/static-renderer.tsx deleted file mode 100644 index 02bc8658d2..0000000000 --- a/frontend/packages/shared/src/static-renderer.tsx +++ /dev/null @@ -1,898 +0,0 @@ -import { - BACKEND_FILE_URL, - Block, - BlockNode, - HMBlock, - HMBlockChildrenType, - HMBlockEmbed, - HMBlockFile, - HMBlockImage, - HMBlockNode, - HMBlockVideo, - HMInlineContent, - HMPublication, - Publication, - formatBytes, - getCIDFromIPFSUrl, - idToUrl, - isHypermediaScheme, - toHMInlineContent, - unpackDocId, -} from '@mintter/shared' -import { - ExternalLink, - File, - FontSizeTokens, - SizableText, - SizableTextProps, - Spinner, - Text, - TextProps, - Tooltip, - XStack, - YStack, - YStackProps, -} from '@mintter/ui' - -import {useRouter} from 'next/router' -import {createContext, useMemo, useState} from 'react' -import './static-styles.css' - -let blockVerticalPadding: FontSizeTokens = '$4' -let blockHorizontalPadding: FontSizeTokens = '$4' -let blockBorderRadius = '$3' - -export const staticRendererContext = createContext(null) - -export function StaticPublicationProvider({children}) { - let value = useMemo(() => { - client: undefined - }, []) - - return ( - - {children} - - ) -} - -export function StaticPublication({publication}: {publication: Publication}) { - return ( - - - {publication.document?.children.map((bn, idx) => ( - - ))} - - - ) -} - -export function StaticGroup({ - children, - childrenType = 'group', - start, - ...props -}: YStackProps & { - childrenType?: HMBlockChildrenType - start?: any -}) { - return ( - - {children} - - ) -} - -function BlockNodeMarker({ - block, - childrenType, - index = 0, - start, - headingTextStyles, -}: { - block: Block - childrenType?: string - start?: string - index?: number - headingTextStyles: TextProps -}) { - let styles = useMemo( - () => - childrenType == 'ol' - ? ({ - position: 'absolute', - right: '27%', - marginTop: 6, - } satisfies SizableTextProps) - : {}, - [childrenType], - ) - let marker - - if (childrenType == 'ol') { - marker = `${index + Number(start)}.` - } - - if (childrenType == 'ul') { - marker = '•' - } - - if (!marker) return null - - return ( - - - {marker} - - - ) -} - -export function StaticBlockNode({ - blockNode, - depth = 1, - childrenType = 'group', - ...props -}: { - blockNode: BlockNode - index: number - copyBlock?: { - docId: string - version: string - } - depth?: number - start?: string | number - childrenType?: HMBlockChildrenType | string -}) { - const headingMarginStyles = useHeadingMarginStyles(depth) - const [isHovering, setIsHovering] = useState(false) - - let bnChildren = blockNode.children?.length - ? blockNode.children.map((bn, index) => ( - - )) - : null - - const isList = useMemo( - () => childrenType == 'ol' || childrenType == 'ul', - [childrenType], - ) - - const headingStyles = useMemo(() => { - if (blockNode.block.type == 'heading') { - return headingMarginStyles - } - - return {} - }, [blockNode.block]) - - return ( - setIsHovering(true)} - onHoverOut={() => setIsHovering(false)} - backgroundColor={isHovering ? '$color5' : 'transparent'} - className="blocknode-static" - > - - - - - {bnChildren ? ( - setIsHovering(false)} - onHoverOut={() => setIsHovering(true)} - childrenType={childrenType as HMBlockChildrenType} - start={props.start} - display="block" - > - {bnChildren} - - ) : null} - - ) -} - -let blockStyles: YStackProps = { - width: '100%', - alignSelf: 'center', - overflow: 'hidden', - borderRadius: '$2', - borderWidth: 1, - borderColor: 'blue', - flex: 1, -} - -let inlineContentProps: SizableTextProps = { - className: 'static-inlinecontent', - fontFamily: '$editorBody', - size: '$4', - $gtMd: { - size: '$5', - }, - $gtLg: { - size: '$6', - }, -} - -type StaticBlockProps = { - block: Block - depth: number -} - -function StaticBlock(props: StaticBlockProps) { - if (props.block.type == 'paragraph') { - return - } - - if (props.block.type == 'heading') { - return - } - - if (props.block.type == 'image') { - return - } -} - -function StaticBlockParagraph({block, depth}: StaticBlockProps) { - let inline = useMemo(() => toHMInlineContent(new Block(block)), []) - - return ( - - - - - - ) -} - -function StaticBlockHeading({block, depth}: StaticBlockProps) { - let inline = useMemo(() => toHMInlineContent(new Block(block)), []) - let headingTextStyles = useHeadingTextStyles(depth) - let tag = `h${depth}` - - return ( - - - - - - ) -} - -function useHeadingTextStyles(depth: number) { - function headingFontValues(value: number) { - return { - fontSize: value, - lineHeight: value * 1.25, - } - } - - return useMemo(() => { - if (depth == 1) { - return { - ...headingFontValues(30), - $gtMd: headingFontValues(36), - $gtLg: headingFontValues(42), - } satisfies TextProps - } - - if (depth == 2) { - return { - ...headingFontValues(24), - $gtMd: headingFontValues(30), - $gtLg: headingFontValues(36), - } satisfies TextProps - } - - if (depth == 3) { - return { - ...headingFontValues(20), - $gtMd: headingFontValues(24), - $gtLg: headingFontValues(30), - } satisfies TextProps - } - - return { - ...headingFontValues(18), - $gtMd: headingFontValues(20), - $gtLg: headingFontValues(24), - } satisfies TextProps - }, [depth]) -} - -function useHeadingMarginStyles(depth: number) { - function headingFontValues(value: number) { - return { - marginTop: value, - marginBottom: value / 2, - } - } - - return useMemo(() => { - if (depth == 1) { - return { - ...headingFontValues(30), - $gtMd: headingFontValues(36), - $gtLg: headingFontValues(42), - } satisfies TextProps - } - - if (depth == 2) { - return { - ...headingFontValues(24), - $gtMd: headingFontValues(30), - $gtLg: headingFontValues(36), - } satisfies TextProps - } - - if (depth == 3) { - return { - ...headingFontValues(20), - $gtMd: headingFontValues(24), - $gtLg: headingFontValues(30), - } satisfies TextProps - } - - return { - ...headingFontValues(18), - $gtMd: headingFontValues(20), - $gtLg: headingFontValues(24), - } satisfies TextProps - }, [depth]) -} - -function StaticBlockImage({block, depth}: StaticBlockProps) { - let inline = useMemo(() => toHMInlineContent(new Block(block)), []) - const cid = getCIDFromIPFSUrl(block?.ref) - if (!cid) return null - - return ( - - {block.attributes.alt} - {inline.length ? ( - - - - ) : null} - - ) -} - -function InlineContentView({ - inline, - style, - ...props -}: SizableTextProps & { - inline: HMInlineContent[] -}) { - return ( - - {inline.map((content, index) => { - if (content.type === 'text') { - let textDecorationLine: - | 'none' - | 'line-through' - | 'underline' - | 'underline line-through' - | undefined - if (content.styles.underline) { - if (content.styles.strike) { - textDecorationLine = 'underline line-through' - } else { - textDecorationLine = 'underline' - } - } else if (content.styles.strike) { - textDecorationLine = 'line-through' - } - - let children: any = content.text - - if (content.styles.bold) { - children = {children} - } - - if (content.styles.italic) { - children = {children} - } - - if (content.styles.underline) { - children = {children} - } - - if (content.styles.code) { - children = ( - - {children} - - ) - } - - if (content.styles.backgroundColor) { - children = ( - - {children} - - ) - } - - if (content.styles.strike) { - children = {children} - } - - if (content.styles.textColor) { - children = ( - {children} - ) - } - - return ( - - {children} - - ) - } - if (content.type === 'link') { - const href = isHypermediaScheme(content.href) - ? idToUrl(content.href, null) - : content.href - - const isExternal = isHypermediaScheme(content.href) - return ( - href && ( - - - {isExternal ? : null} - - // - // - // - // - // {isExternal ? : null} - // - // - // - ) - ) - } - return null - })} - - ) -} - -// ==================================================================================================== - -function StaticImageBlock({ - block, - isList, -}: { - block: HMBlockImage - isList?: boolean -}) { - const cid = getCIDFromIPFSUrl(block?.ref) - if (!cid) return null - return ( - - {block.attributes?.alt} { - console.error('image errored', e) - }} - /> - - ) - // return -} - -function stripHMLinkPrefix(link: string) { - return link.replace(/^hm:\//, '') -} - -function StaticEmbedBlock({ - block, - isList, -}: { - block: HMBlockEmbed - isList?: boolean -}) { - const reference = block.ref - const docId = unpackDocId(reference) - const router = useRouter() - let embed = trpc.publication.get.useQuery( - { - documentId: docId?.docId, - versionId: docId?.version || undefined, - }, - {enabled: !!docId}, - ) - let content = - if (embed.data?.publication?.document?.children) { - if (docId?.blockRef) { - const blockNode = getBlockNodeById( - embed.data?.publication?.document?.children, - docId.blockRef, - ) - content = blockNode ? ( - - ) : ( - Block not found. - ) - } else { - content = ( - <> - {embed.data?.publication?.document?.children?.map( - (block: HMBlockNode) => ( - - ), - )} - - ) - } - } - return ( - - { - const ref = stripHMLinkPrefix(block.ref) - router.push(ref) - }} - href={stripHMLinkPrefix(block.ref)} - > - {content} - {/* */} - - - ) -} - -function StaticBlock_({block, isList}: {block: HMBlock; isList?: boolean}) { - let niceBlock = block - - if (niceBlock.type == 'paragraph' || niceBlock.type == 'heading') { - return - } - - if (niceBlock.type == 'image') { - return - } - if (niceBlock.type == 'embed') { - return - } - if (niceBlock.type == 'code') { - let _content = ( - 
-        {block.text}
-
- ) - - return isList ?
  • {_content}
    • : _content - } - - if (niceBlock.type == 'file') { - return - } - - if (niceBlock.type == 'video') { - return - } - // fallback for unknown block types - // return {JSON.stringify(block)} - return ( - - ) -} - -function ErrorMessageBlock({message, id}: {message: string; id: string}) { - return ( - - - {message} - - - ) -} - -export function PublicationContent({ - publication, -}: { - publication: HMPublication | undefined -}) { - // This removes the first block from the document content if it's not a media element (embed, image, video...) - let blocks = useMemo(() => { - let _b = publication?.document?.children - - if ( - !_b?.length || - (_b.length == 1 && - !['embed', 'image', 'video'].includes(_b[0].block?.type)) - ) - return [] - - // check if the first block has content or not. - if ( - _b[0].block?.type && - ['embed', 'image', 'video'].includes(_b[0].block?.type) - ) - return _b - - let [_firstBlock, ...restBlocks] = _b - - if (_firstBlock.children?.length) { - restBlocks = [..._firstBlock.children, ...restBlocks] - } - - return restBlocks - }, [publication?.document?.children]) - return ( - - {blocks.map((block, index) => ( - - ))} - - ) -} - -function getBlockNodeById( - blocks: Array, - blockId: string, -): HMBlockNode | null { - if (!blockId) return null - - let res: HMBlockNode | undefined - blocks.find((bn) => { - if (bn.block?.id == blockId) { - res = bn - return true - } else if (bn.children?.length) { - const foundChild = getBlockNodeById(bn.children, blockId) - if (foundChild) { - res = foundChild - return true - } - } - return false - }) - return res || null -} - -export function StaticFileBlock({block}: {block: HMBlockFile}) { - let cid = useMemo(() => getCIDFromIPFSUrl(block.ref), [block.ref]) - return ( - - console.log('OPEN FILE', cid)} - > - - - - - {block.attributes.name} - - {block.attributes.size && ( - - {formatBytes(parseInt(block.attributes.size))} - - )} - - - - ) -} - -function StaticVideoBlock({ - block, - isList, -}: { - block: HMBlockVideo - isList?: boolean -}) { - const ref = block.ref || '' - return ref ? ( - - {ref.startsWith('ipfs://') ? ( - - - Something is wrong with the video file. - - ) : ( - - )} - - ) : null -} - -function getSourceType(name?: string) { - if (!name) return - const nameArray = name.split('.') - return `video/${nameArray[nameArray.length - 1]}` -} diff --git a/frontend/packages/shared/src/static-styles.css b/frontend/packages/shared/src/static-styles.css deleted file mode 100644 index 4945dae207..0000000000 --- a/frontend/packages/shared/src/static-styles.css +++ /dev/null @@ -1,11 +0,0 @@ -li.blocknode-static { - font-family: 'Courier New', Courier, monospace; - position: absolute; -} - -.static-inlinecontent code { - background-color: red; - padding: 0.18rem 0.3rem; - border-radius: 6px; - font-size: 85%; -}