zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Merge branch 'loganrosen/heading-elements' of https://github.com/loganrosen/social-app into loganrosen-loganrosen/heading-elements

zio/stable
Paul Frazee 2023-06-12 17:06:39 -05:00
parent abdb4aace6 55cf53cfd5
commit 9c8e0ab33a
3 changed files with 23 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -26,6 +26,7 @@
"@atproto/api": "0.3.8",
"@bam.tech/react-native-image-resizer": "^3.0.4",
"@braintree/sanitize-url": "^6.0.2",
"@expo/html-elements": "^0.4.2",
"@expo/webpack-config": "^18.0.1",
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/free-regular-svg-icons": "^6.1.1",

37
src/view/com/util/Html.tsx
View File

@ -1,9 +1,16 @@
import * as React from 'react'
import {StyleSheet, View} from 'react-native'
import {usePalette} from 'lib/hooks/usePalette'
import {useTheme} from 'lib/ThemeContext'
import {Text} from './text/Text'
import {TextLink} from './Link'
import {isDesktopWeb} from 'platform/detection'
import {
H1 as ExpoH1,
H2 as ExpoH2,
H3 as ExpoH3,
H4 as ExpoH4,
} from '@expo/html-elements'
/**
* These utilities are used to define long documents in an html-like
@ -21,38 +28,26 @@ interface IsChildProps {
export function H1({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
return (
<Text type="title-xl" style={[pal.text, styles.h1]}>
{children}
</Text>
)
const typography = useTheme().typography['title-xl']
return <ExpoH1 style={[typography, pal.text, styles.h1]}>{children}</ExpoH1>
}
export function H2({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
return (
<Text type="title-lg" style={[pal.text, styles.h2]}>
{children}
</Text>
)
const typography = useTheme().typography['title-lg']
return <ExpoH2 style={[typography, pal.text, styles.h2]}>{children}</ExpoH2>
}
export function H3({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
return (
<Text type="title" style={[pal.text, styles.h3]}>
{children}
</Text>
)
const typography = useTheme().typography.title
return <ExpoH3 style={[typography, pal.text, styles.h3]}>{children}</ExpoH3>
}
export function H4({children}: React.PropsWithChildren<{}>) {
const pal = usePalette('default')
return (
<Text type="title-sm" style={[pal.text, styles.h4]}>
{children}
</Text>
)
const typography = useTheme().typography['title-sm']
return <ExpoH4 style={[typography, pal.text, styles.h4]}>{children}</ExpoH4>
}
export function P({children}: React.PropsWithChildren<{}>) {
@ -149,9 +144,11 @@ const styles = StyleSheet.create({
letterSpacing: 0.8,
},
h3: {
marginTop: 0,
marginBottom: 10,
},
h4: {
marginTop: 0,
marginBottom: 10,
fontWeight: 'bold',
},

5
yarn.lock
View File

@ -1927,6 +1927,11 @@
tmp "^0.0.33"
tslib "^2.4.0"
"@expo/html-elements@^0.4.2":
version "0.4.2"
resolved "https://registry.yarnpkg.com/@expo/html-elements/-/html-elements-0.4.2.tgz#4e9f6b9250af8d0befe3242fd42704cca2421e0e"
integrity sha512-lNioCgdtOrCMMqzHY+PCTdyuWBTU4yMBlOzPSkS4YFIWt9bq0zexM2ZJkpybTXmowNdE3zHO93xxAmiA2yDi2w==
"@expo/image-utils@0.3.22":
version "0.3.22"
resolved "https://registry.yarnpkg.com/@expo/image-utils/-/image-utils-0.3.22.tgz#3a45fb2e268d20fcc761c87bca3aca7fd8e24260"