mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-08-24 23:32:19 +10:00
feat(pdf): roll out shared RTL layout to all templates
Introduce createRtlStyleHelpers and a single rtl flag on RenderProvider, migrate every template page to mirrored layout styles, and rename alignRight to alignEnd. Fix plain rich text rendering via PdfText paragraph renderers and map legacy Times New Roman to Times-Roman. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -12,6 +12,7 @@ import { getTemplateMetrics } from "../shared/metrics";
|
||||
import { getTemplatePageMinHeightStyle, getTemplatePageSize } from "../shared/page-size";
|
||||
import { hasTemplatePicture } from "../shared/picture";
|
||||
import { Heading, Icon, Link, Text } from "../shared/primitives";
|
||||
import { createRtlStyleHelpers } from "../shared/rtl";
|
||||
import { Section } from "../shared/sections";
|
||||
import { composeStyles, headerNameLineHeight } from "../shared/styles";
|
||||
|
||||
@@ -128,9 +129,10 @@ const Header = ({ styles }: { styles: BronzorStyles }) => {
|
||||
};
|
||||
|
||||
const useBronzorTemplate = (): BronzorTemplate => {
|
||||
const { picture, metadata } = useRender();
|
||||
const { picture, metadata, rtl } = useRender();
|
||||
|
||||
return useMemo(() => {
|
||||
const r = createRtlStyleHelpers(rtl);
|
||||
const foreground = rgbaStringToHex(metadata.design.colors.text);
|
||||
const background = rgbaStringToHex(metadata.design.colors.background);
|
||||
const primary = rgbaStringToHex(metadata.design.colors.primary);
|
||||
@@ -143,6 +145,7 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
fontWeight: metadata.typography.body.fontWeights[0] ?? "400",
|
||||
lineHeight: metadata.typography.body.lineHeight,
|
||||
color: foreground,
|
||||
...r.text,
|
||||
} satisfies Style;
|
||||
|
||||
const baseStyles = StyleSheet.create({
|
||||
@@ -156,6 +159,7 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
fontFamily: metadata.typography.body.fontFamily,
|
||||
fontSize: metadata.typography.body.fontSize,
|
||||
lineHeight: metadata.typography.body.lineHeight,
|
||||
direction: r.pageDirection,
|
||||
},
|
||||
text: bodyText,
|
||||
heading: {
|
||||
@@ -164,13 +168,14 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
fontWeight: metadata.typography.heading.fontWeights[0] ?? "500",
|
||||
lineHeight: metadata.typography.heading.lineHeight,
|
||||
color: foreground,
|
||||
...r.text,
|
||||
},
|
||||
div: {
|
||||
rowGap: metrics.gapY(0.125),
|
||||
columnGap: metrics.gapX(1 / 3),
|
||||
},
|
||||
inline: {
|
||||
flexDirection: "row",
|
||||
flexDirection: r.row,
|
||||
alignItems: "center",
|
||||
columnGap: metrics.gapX(1 / 3),
|
||||
},
|
||||
@@ -194,29 +199,26 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
alignItems: "flex-start",
|
||||
},
|
||||
richListItemMarker: {
|
||||
width: metadata.typography.body.fontSize,
|
||||
textAlign: "right",
|
||||
...bodyText,
|
||||
width: metadata.typography.body.fontSize,
|
||||
textAlign: r.listMarkerTextAlign,
|
||||
},
|
||||
richListItemContent: {
|
||||
flex: 1,
|
||||
...bodyText,
|
||||
},
|
||||
splitRow: {
|
||||
flexDirection: "row",
|
||||
flexDirection: r.row,
|
||||
flexWrap: "wrap",
|
||||
alignItems: "flex-start",
|
||||
justifyContent: "space-between",
|
||||
columnGap: metrics.gapX(2 / 3),
|
||||
},
|
||||
alignRight: {
|
||||
textAlign: "right",
|
||||
minWidth: 0,
|
||||
maxWidth: "100%",
|
||||
flexShrink: 1,
|
||||
alignEnd: {
|
||||
...r.alignEnd,
|
||||
},
|
||||
section: {
|
||||
flexDirection: "row",
|
||||
flexDirection: r.row,
|
||||
columnGap: metrics.columnGap,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: primary,
|
||||
@@ -227,6 +229,7 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
flexShrink: 0,
|
||||
fontSize: metadata.typography.heading.fontSize * 0.75,
|
||||
color: primary,
|
||||
textAlign: r.sectionHeadingTextAlign,
|
||||
},
|
||||
sectionItems: {
|
||||
flex: 1,
|
||||
@@ -265,13 +268,13 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
},
|
||||
headerContactRow: {
|
||||
justifyContent: "center",
|
||||
flexDirection: "row",
|
||||
flexDirection: r.row,
|
||||
flexWrap: "wrap",
|
||||
rowGap: metrics.gapY(0.125),
|
||||
columnGap: metrics.gapX(5 / 6),
|
||||
},
|
||||
headerContactItem: {
|
||||
flexDirection: "row",
|
||||
flexDirection: r.row,
|
||||
alignItems: "center",
|
||||
columnGap: metrics.gapX(0.25),
|
||||
},
|
||||
@@ -283,5 +286,5 @@ const useBronzorTemplate = (): BronzorTemplate => {
|
||||
});
|
||||
|
||||
return { colors, styles: baseStyles satisfies BronzorStyles };
|
||||
}, [picture, metadata]);
|
||||
}, [picture, metadata, rtl]);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user