import { OutgoingLink , RouteLink } from '@47ng/chakra-next' ; import { Badge , BadgeProps , Box , BoxProps , Code , Divider , Image , Kbd , List , ListItem , Text , useColorModeValue } from '@chakra-ui/react' ; import React from 'react' ; import * as Typography from 'src/components/primitives/Typography' ; import { theme , useLinkColor } from 'src/ui/theme' ; import { WideContainer } from '../WideContainer' ; import { Annotation } from './Annotation' ; import { Note , NoteProps } from './Note' ; import { PostReference } from './PostReference' ; import { RepoReference } from './RepoReference' ; import { Tag , TagProps , useTagStyles } from './Tags' ; const linkStyles = { '& code' : { color : 'currentColor' } , '&:hover code' : { textDecoration : 'underline' } } ; const InlineCode = p => ( < Code fontSize = "0.85em" fontWeight = "medium" color = { useColorModeValue ( 'gray.700' , 'gray.300' ) } px = { 1 } rounded = "md" { ... p } />); export const mdxComponents = { h1 : Typography . H1 , h2 : ( p ) => < Typography . H2 linkable { ... p } />, h3 : ( p ) => < Typography . H3 linkable { ... p } />, h4 : ( p ) => < Typography . H4 linkable { ... p } />, h5 : ( p ) => < Typography . H5 linkable { ... p } />, h6 : ( p ) => < Typography . H6 linkable { ... p } />, p : Typography . Paragraph , small : ( p ) => < Text as = "small" { ... p } />, strong : ( p ) => < Text as = "strong" fontWeight = "semibold" { ... p } />, i : ( p ) => < Text as = "i" { ... p } />, blockquote : ( p ) => ( < Box as = "blockquote" position = "relative" mx = { [ - 4 , 0 ] } pl = { 6 } pr = { 8 } py = { 2 } my = { 8 } fontSize = "lg" sx = { { '& p:last-child' : { mb : 0 } } } fontStyle = "italic" borderLeftWidth = { 4 } borderLeftColor = { useColorModeValue ( 'gray.400' , 'gray.600' ) } rounded = { [ 'none' , 'sm' ] } { ... p } _after = { { content : '"”"' , fontFamily : 'serif' , position : 'absolute' , color : useColorModeValue ( 'gray.400' , 'gray.600' ) , fontSize : '5xl' , top : 0 , right : 3 } } />), author : ( { children , ... p } ) => ( < Text as = "div" fontFamily = { theme . fonts . body } fontSize = "xs" fontWeight = "normal" fontStyle = "normal" color = "gray.500" mt = { - 2 } _before = { { content : '"-- "' } } { ... p } > { children } < /Text>), a : ( p ) => { const isInternal = p . href . startsWith ( '#' ) || ( p . href . startsWith ( '/' ) && ! p . href . startsWith ( '/images' ) ) ; const color = useLinkColor ( ) ; if ( isInternal ) { return < RouteLink to = { p . href } color = { color } sx = { linkStyles } { ... p } />; } return < OutgoingLink color = { color } sx = { linkStyles } { ... p } />; } , ul : ( p ) => < List styleType = "disc" spacing = { 1 } { ... p } />, ol : ( p ) => < List as = "ol" styleType = "decimal" spacing = { 1 } { ... p } />, li : ( p ) => < ListItem ml = { 4 } { ... p } />, figure : ( p ) => < Box my = { 12 } { ... p } />, figcaption : ( p ) => ( < Text fontSize = "sm" textAlign = "center" color = { useColorModeValue ( 'gray.600' , 'gray.400' ) } mt = { 2 } { ... p } />), inlineCode : InlineCode , hr : ( p ) => ( < Divider my = { 8 } borderColor = { useColorModeValue ( 'gray.400' , 'gray.600' ) } w = "100%" { ... p } />), kbd : Kbd , mark : Annotation , del : ( p ) => ( < Annotation as = "del" type = "strike-through" color = "black" strokeWidth = { 2 } { ... p } />), RouteLink , OutgoingLink : ( p ) => < OutgoingLink css = { linkStyles } { ... p } />, PostReference , RepoReference , WideContainer , img : ( p ) => < Image mb = { 8 } rounded = "md" { ... p } />, Image : ( p ) => < Image mb = { 8 } rounded = "md" { ... p } />, Badge : ( p ) => < Badge { ... useTagStyles ( ) } { ... p } />, Tag : ( p ) => < Tag { ... p } / > , Note : ( p ) => < Note mb = { 8 } { ... p } /> } ;