acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

WIP ALFing

Browse Source
This commit is contained in:
Eric Bailey
2025-09-11 13:44:27 -05:00
parent a05c90ae29
commit cc0dfa6cab
6 changed files with 65 additions and 576 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyogcard/package.json
+1
View File
@@ -12,6 +12,7 @@
"dependencies": {
"@atproto/api": "^0.15.14",
"@atproto/common": "^0.4.11",
"@bsky.app/alf": "^0.1.0",
"@resvg/resvg-js": "^2.6.2",
"express": "^4.19.2",
"http-terminator": "^3.2.0",
bskyogcard/src/components/Post/index.tsx
+1 -1
View File
@@ -97,7 +97,7 @@ export function Post({
</Box>
<Box cx={[a.flex_col, a.flex_1]}>
<Box cx={[a.flex_1, a.flex_row]}>
<Text cx={[a.text_md, a.font_heavy, a.pb_2xs, a.line_clamp_1]}>
<Text cx={[a.text_md, a.font_bold, a.pb_2xs, a.line_clamp_1]}>
{post.author.displayName || post.author.handle}
</Text>
{verification.isVerified && (
bskyogcard/src/components/PostEmbed.tsx
+1 -1
View File
@@ -308,7 +308,7 @@ export function LinkEmbed({
right: a.p_md.padding,
},
]}>
<Text cx={[t.atoms.text, a.font_heavy, a.text_sm]}>GIF</Text>
<Text cx={[t.atoms.text, a.font_bold, a.text_sm]}>GIF</Text>
</Box>
</Box>
)
bskyogcard/src/components/Text.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export function Text({
},
a.font_normal,
a.leading_tight,
a.tracking_wide,
// a.tracking_wide, // 0.25
t.atoms.text,
{
fontFamily: FONT_FAMILY_DEF,
bskyogcard/src/theme/atoms.ts
+2 -572
View File
@@ -1,37 +1,10 @@
import * as tokens from './tokens.js'
import {atoms as baseAtoms} from '@bsky.app/alf'
export const atoms = {
block: {
display: 'block',
},
...baseAtoms,
inline_block: {
display: 'inline-block',
},
inline: {
display: 'inline',
},
/*
* Positioning
*/
fixed: {
position: 'absolute',
},
absolute: {
position: 'absolute',
},
relative: {
position: 'relative',
},
inset_0: {
top: 0,
left: 0,
right: 0,
bottom: 0,
},
overflow_hidden: {
overflow: 'hidden',
},
text_overflow_ellipsis: {
textOverflow: 'ellipsis',
},
@@ -54,547 +27,4 @@ export const atoms = {
display: 'block',
lineClamp: 4,
},
/*
* Width
*/
w_full: {
width: '100%',
},
max_w_full: {
maxWidth: '100%',
},
h_full: {
height: '100%',
},
h_full_vh: {
height: '100vh',
},
max_h_full: {
maxHeight: '100%',
},
/*
* Theme-independent bg colors
*/
bg_transparent: {
backgroundColor: 'transparent',
},
/*
* Border radius
*/
rounded_2xs: {
borderRadius: tokens.borderRadius._2xs,
},
rounded_xs: {
borderRadius: tokens.borderRadius.xs,
},
rounded_sm: {
borderRadius: tokens.borderRadius.sm,
},
rounded_md: {
borderRadius: tokens.borderRadius.md,
},
rounded_lg: {
borderRadius: tokens.borderRadius.lg,
},
rounded_full: {
borderRadius: tokens.borderRadius.full,
},
/*
* Flex
*/
gap_2xs: {
gap: tokens.space._2xs,
},
gap_xs: {
gap: tokens.space.xs,
},
gap_sm: {
gap: tokens.space.sm,
},
gap_md: {
gap: tokens.space.md,
},
gap_lg: {
gap: tokens.space.lg,
},
gap_xl: {
gap: tokens.space.xl,
},
gap_2xl: {
gap: tokens.space._2xl,
},
gap_3xl: {
gap: tokens.space._3xl,
},
gap_4xl: {
gap: tokens.space._4xl,
},
gap_5xl: {
gap: tokens.space._5xl,
},
flex: {
display: 'flex',
},
flex_col: {
flexDirection: 'column',
},
flex_row: {
flexDirection: 'row',
},
flex_col_reverse: {
flexDirection: 'column-reverse',
},
flex_row_reverse: {
flexDirection: 'row-reverse',
},
flex_wrap: {
flexWrap: 'wrap',
},
flex_nowrap: {
flexWrap: 'nowrap',
},
flex_0: {
flex: '0 0 auto',
},
flex_1: {
flex: 1,
},
flex_grow: {
flexGrow: 1,
},
flex_shrink: {
flexShrink: 1,
},
flex_shrink_0: {
flexShrink: 0,
},
justify_start: {
justifyContent: 'flex-start',
},
justify_center: {
justifyContent: 'center',
},
justify_between: {
justifyContent: 'space-between',
},
justify_end: {
justifyContent: 'flex-end',
},
align_center: {
alignItems: 'center',
},
align_start: {
alignItems: 'flex-start',
},
align_end: {
alignItems: 'flex-end',
},
align_baseline: {
alignItems: 'baseline',
},
align_stretch: {
alignItems: 'stretch',
},
self_auto: {
alignSelf: 'auto',
},
self_start: {
alignSelf: 'flex-start',
},
self_end: {
alignSelf: 'flex-end',
},
self_center: {
alignSelf: 'center',
},
self_stretch: {
alignSelf: 'stretch',
},
self_baseline: {
alignSelf: 'baseline',
},
/*
* Text
*/
text_left: {
textAlign: 'left',
},
text_center: {
textAlign: 'center',
},
text_right: {
textAlign: 'right',
},
text_2xs: {
fontSize: tokens.fontSize._2xs,
letterSpacing: 0.25,
},
text_xs: {
fontSize: tokens.fontSize.xs,
letterSpacing: 0.25,
},
text_sm: {
fontSize: tokens.fontSize.sm,
letterSpacing: 0.25,
},
text_md: {
fontSize: tokens.fontSize.md,
letterSpacing: 0.25,
},
text_lg: {
fontSize: tokens.fontSize.lg,
letterSpacing: 0.25,
},
text_xl: {
fontSize: tokens.fontSize.xl,
letterSpacing: 0.25,
},
text_2xl: {
fontSize: tokens.fontSize._2xl,
letterSpacing: 0.25,
},
text_3xl: {
fontSize: tokens.fontSize._3xl,
letterSpacing: 0.25,
},
text_4xl: {
fontSize: tokens.fontSize._4xl,
letterSpacing: 0.25,
},
text_5xl: {
fontSize: tokens.fontSize._5xl,
letterSpacing: 0.25,
},
leading_tight: {
lineHeight: '1.15',
},
leading_snug: {
lineHeight: '1.3',
},
leading_normal: {
lineHeight: '1.5',
},
tracking_normal: {
letterSpacing: 0,
},
tracking_wide: {
letterSpacing: 0.25,
},
font_normal: {
fontWeight: tokens.fontWeight.normal,
},
font_semibold: {
fontWeight: tokens.fontWeight.semibold,
},
font_bold: {
fontWeight: tokens.fontWeight.bold,
},
font_heavy: {
fontWeight: tokens.fontWeight.heavy,
},
italic: {
fontStyle: 'italic',
},
mono: {
fontFamily: 'monospace',
},
/*
* Border
*/
border_0: {
borderWidth: '0px',
},
border: {
borderWidth: '1px',
borderStyle: 'solid',
},
border_t: {
borderTopWidth: '1px',
borderStyle: 'solid',
},
border_b: {
borderBottomWidth: '1px',
borderStyle: 'solid',
},
border_l: {
borderLeftWidth: '1px',
borderStyle: 'solid',
},
border_r: {
borderRightWidth: '1px',
borderStyle: 'solid',
},
/*
* Padding
*/
p_0: {
padding: 0,
},
p_2xs: {
padding: tokens.space._2xs,
},
p_xs: {
padding: tokens.space.xs,
},
p_sm: {
padding: tokens.space.sm,
},
p_md: {
padding: tokens.space.md,
},
p_lg: {
padding: tokens.space.lg,
},
p_xl: {
padding: tokens.space.xl,
},
p_2xl: {
padding: tokens.space._2xl,
},
p_3xl: {
padding: tokens.space._3xl,
},
p_4xl: {
padding: tokens.space._4xl,
},
p_5xl: {
padding: tokens.space._5xl,
},
px_0: {
paddingLeft: 0,
paddingRight: 0,
},
px_2xs: {
paddingLeft: tokens.space._2xs,
paddingRight: tokens.space._2xs,
},
px_xs: {
paddingLeft: tokens.space.xs,
paddingRight: tokens.space.xs,
},
px_sm: {
paddingLeft: tokens.space.sm,
paddingRight: tokens.space.sm,
},
px_md: {
paddingLeft: tokens.space.md,
paddingRight: tokens.space.md,
},
px_lg: {
paddingLeft: tokens.space.lg,
paddingRight: tokens.space.lg,
},
px_xl: {
paddingLeft: tokens.space.xl,
paddingRight: tokens.space.xl,
},
px_2xl: {
paddingLeft: tokens.space._2xl,
paddingRight: tokens.space._2xl,
},
px_3xl: {
paddingLeft: tokens.space._3xl,
paddingRight: tokens.space._3xl,
},
px_4xl: {
paddingLeft: tokens.space._4xl,
paddingRight: tokens.space._4xl,
},
px_5xl: {
paddingLeft: tokens.space._5xl,
paddingRight: tokens.space._5xl,
},
py_0: {
paddingTop: 0,
paddingBottom: 0,
},
py_2xs: {
paddingTop: tokens.space._2xs,
paddingBottom: tokens.space._2xs,
},
py_xs: {
paddingTop: tokens.space.xs,
paddingBottom: tokens.space.xs,
},
py_sm: {
paddingTop: tokens.space.sm,
paddingBottom: tokens.space.sm,
},
py_md: {
paddingTop: tokens.space.md,
paddingBottom: tokens.space.md,
},
py_lg: {
paddingTop: tokens.space.lg,
paddingBottom: tokens.space.lg,
},
py_xl: {
paddingTop: tokens.space.xl,
paddingBottom: tokens.space.xl,
},
py_2xl: {
paddingTop: tokens.space._2xl,
paddingBottom: tokens.space._2xl,
},
py_3xl: {
paddingTop: tokens.space._3xl,
paddingBottom: tokens.space._3xl,
},
py_4xl: {
paddingTop: tokens.space._4xl,
paddingBottom: tokens.space._4xl,
},
py_5xl: {
paddingTop: tokens.space._5xl,
paddingBottom: tokens.space._5xl,
},
pt_0: {
paddingTop: 0,
},
pt_2xs: {
paddingTop: tokens.space._2xs,
},
pt_xs: {
paddingTop: tokens.space.xs,
},
pt_sm: {
paddingTop: tokens.space.sm,
},
pt_md: {
paddingTop: tokens.space.md,
},
pt_lg: {
paddingTop: tokens.space.lg,
},
pt_xl: {
paddingTop: tokens.space.xl,
},
pt_2xl: {
paddingTop: tokens.space._2xl,
},
pt_3xl: {
paddingTop: tokens.space._3xl,
},
pt_4xl: {
paddingTop: tokens.space._4xl,
},
pt_5xl: {
paddingTop: tokens.space._5xl,
},
pb_0: {
paddingBottom: 0,
},
pb_2xs: {
paddingBottom: tokens.space._2xs,
},
pb_xs: {
paddingBottom: tokens.space.xs,
},
pb_sm: {
paddingBottom: tokens.space.sm,
},
pb_md: {
paddingBottom: tokens.space.md,
},
pb_lg: {
paddingBottom: tokens.space.lg,
},
pb_xl: {
paddingBottom: tokens.space.xl,
},
pb_2xl: {
paddingBottom: tokens.space._2xl,
},
pb_3xl: {
paddingBottom: tokens.space._3xl,
},
pb_4xl: {
paddingBottom: tokens.space._4xl,
},
pb_5xl: {
paddingBottom: tokens.space._5xl,
},
pl_0: {
paddingLeft: 0,
},
pl_2xs: {
paddingLeft: tokens.space._2xs,
},
pl_xs: {
paddingLeft: tokens.space.xs,
},
pl_sm: {
paddingLeft: tokens.space.sm,
},
pl_md: {
paddingLeft: tokens.space.md,
},
pl_lg: {
paddingLeft: tokens.space.lg,
},
pl_xl: {
paddingLeft: tokens.space.xl,
},
pl_2xl: {
paddingLeft: tokens.space._2xl,
},
pl_3xl: {
paddingLeft: tokens.space._3xl,
},
pl_4xl: {
paddingLeft: tokens.space._4xl,
},
pl_5xl: {
paddingLeft: tokens.space._5xl,
},
pr_0: {
paddingRight: 0,
},
pr_2xs: {
paddingRight: tokens.space._2xs,
},
pr_xs: {
paddingRight: tokens.space.xs,
},
pr_sm: {
paddingRight: tokens.space.sm,
},
pr_md: {
paddingRight: tokens.space.md,
},
pr_lg: {
paddingRight: tokens.space.lg,
},
pr_xl: {
paddingRight: tokens.space.xl,
},
pr_2xl: {
paddingRight: tokens.space._2xl,
},
pr_3xl: {
paddingRight: tokens.space._3xl,
},
pr_4xl: {
paddingRight: tokens.space._4xl,
},
pr_5xl: {
paddingRight: tokens.space._5xl,
},
/*
* Text decoration
*/
underline: {
textDecorationLine: 'underline',
},
strike_through: {
textDecorationLine: 'line-through',
},
} as const
bskyogcard/yarn.lock
+59 -1
View File
@@ -62,6 +62,13 @@
"@atproto/lexicon" "^0.4.11"
zod "^3.23.8"
"@bsky.app/alf@^0.1.0":
version "0.1.0"
resolved "https://registry.yarnpkg.com/@bsky.app/alf/-/alf-0.1.0.tgz#7fcd82fbb961a3cb675892d1d6568105ea879492"
integrity sha512-uw3ga4qfDA+5BijLk1FAJQVBXHIQIwROfLuzvXBTM4oY5gd74cMpvsftvFdwlm7+U+jqsKDqahTAbOM1DXCUiw==
dependencies:
react-responsive "^10.0.1"
"@cbor-extract/cbor-extract-darwin-arm64@2.2.0":
version "2.2.0"
resolved "https://registry.npmjs.org/@cbor-extract/cbor-extract-darwin-arm64/-/cbor-extract-darwin-arm64-2.2.0.tgz"
@@ -633,6 +640,11 @@ css-color-keywords@^1.0.0:
resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
integrity sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==
css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
css-to-react-native@^3.0.0:
version "3.2.0"
resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.2.0.tgz"
@@ -948,6 +960,11 @@ http-terminator@^3.2.0:
roarr "^7.0.4"
type-fest "^2.3.3"
hyphenate-style-name@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
iconv-lite@0.4.24:
version "0.4.24"
resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -1029,7 +1046,7 @@ linebreak@^1.1.0:
base64-js "0.0.8"
unicode-trie "^2.0.0"
loose-envify@^1.1.0:
loose-envify@^1.1.0, loose-envify@^1.4.0:
version "1.4.0"
resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -1041,6 +1058,13 @@ make-error@^1.1.1:
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
matchmediaquery@^0.4.2:
version "0.4.2"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa"
integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==
dependencies:
css-mediaquery "^0.1.2"
media-typer@0.3.0:
version "0.3.0"
resolved "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz"
@@ -1124,6 +1148,11 @@ node-vibrant@^4.0.3:
"@vibrant/image-node" "^4.0.0"
"@vibrant/quantizer-mmcq" "^4.0.0"
object-assign@^4.1.1:
version "4.1.1"
resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
object-inspect@^1.13.1:
version "1.13.1"
resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz"
@@ -1314,6 +1343,15 @@ process@^0.11.10:
resolved "https://registry.npmjs.org/process/-/process-0.11.10.tgz"
integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
prop-types@^15.6.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
dependencies:
loose-envify "^1.4.0"
object-assign "^4.1.1"
react-is "^16.13.1"
proxy-addr@~2.0.7:
version "2.0.7"
resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz"
@@ -1357,6 +1395,21 @@ raw-body@2.5.2:
iconv-lite "0.4.24"
unpipe "1.0.0"
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
react-responsive@^10.0.1:
version "10.0.1"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.1.tgz#293d4d2562da93409861216f0110d146c5676eb3"
integrity sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.4.2"
prop-types "^15.6.1"
shallow-equal "^3.1.0"
react@^18.3.1:
version "18.3.1"
resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
@@ -1499,6 +1552,11 @@ setprototypeof@1.2.0:
resolved "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz"
integrity sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==
shallow-equal@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
side-channel@^1.0.4:
version "1.0.6"
resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.6.tgz"