Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2026-08-24 07:12:18 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat: add semantic CSS stylesheets (#3274)

Browse Source 
Co-authored-by: Cursor Agent <cursoragent@cursor.com>
This commit is contained in:
Amruth Pillai
2026-07-30 12:39:15 +02:00
committed by GitHub
co-authored by Cursor Agent
parent 4ac19f81b3
commit d2ffbf9618
320 changed files with 78393 additions and 2915 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/pdf/src/templates/bronzor/BronzorPage.tsx
+29 -14
View File
@@ -3,8 +3,10 @@ import type { TemplatePageProps } from "../../document";
import type { TemplateColorRoles, TemplateStyleSlots } from "../shared/types";
import { useMemo } from "react";
import { rgbaStringToHex } from "@reactive-resume/utils/color";
import { Image, Page, StyleSheet, View } from "#react-pdf-renderer";
import { Page, StyleSheet, View } from "#react-pdf-renderer";
import { useRender } from "../../context";
import { useRenderedSectionIds, useResolvedNode } from "../../semantic/context";
import { semanticNodeKeys } from "../../semantic/node-keys";
import { createBaseTemplateStyles } from "../shared/base-template-styles";
import {
CustomFieldContactItem,
@@ -17,7 +19,14 @@ import { TemplateProvider } from "../shared/context";
import { filterSections } from "../shared/filtering";
import { getTemplateMetrics } from "../shared/metrics";
import { hasTemplatePicture } from "../shared/picture";
import { Heading, Text } from "../shared/primitives";
import {
Heading,
SemanticContactListView,
SemanticHeaderPicture,
SemanticHeaderView,
SemanticRegionView,
Text,
} from "../shared/primitives";
import { createRtlStyleHelpers } from "../shared/rtl";
import { Section } from "../shared/sections";
import { composeStyles, headerNameLineHeight } from "../shared/styles";
@@ -68,25 +77,31 @@ const getBronzorSections = ({
return sections;
};
export const BronzorPage = ({ page, pageSize, pageMinHeightStyle, showHeader }: TemplatePageProps) => {
export const BronzorPage = ({ page, pageSize, pageMinHeightStyle, showHeader, pageNumber }: TemplatePageProps) => {
const data = useRender();
const pageNodeKey = semanticNodeKeys.page(pageNumber);
const { style: semanticPageStyle, size: semanticPageSize, ...semanticPageProps } = useResolvedNode(pageNodeKey);
const { metadata } = data;
const { styles, colors } = useBronzorTemplate();
const metrics = getTemplateMetrics(metadata.page);
const sidebarSections = filterSections(page.sidebar, data);
const mainSections = filterSections(page.main, data);
const sidebarSections = useRenderedSectionIds(pageNodeKey, filterSections(page.sidebar, data));
const mainSections = useRenderedSectionIds(pageNodeKey, filterSections(page.main, data));
const sections = getBronzorSections({ mainSections, sidebarSections, fullWidth: page.fullWidth });
return (
<Page size={pageSize} style={composeStyles(styles.page, pageMinHeightStyle)}>
<TemplateProvider styles={styles} colors={colors}>
<Page
{...semanticPageProps}
size={semanticPageSize ?? pageSize}
style={composeStyles(styles.page, pageMinHeightStyle, semanticPageStyle)}
>
<TemplateProvider pageNodeKey={pageNodeKey} styles={styles} colors={colors}>
{showHeader && <Header styles={styles} />}
<View style={composeStyles(styles.sections, { rowGap: metrics.sectionGap })}>
<SemanticRegionView region="main" style={composeStyles(styles.sections, { rowGap: metrics.sectionGap })}>
{sections.map((section) => (
<Section key={section} section={section} placement="main" />
))}
</View>
</SemanticRegionView>
</TemplateProvider>
</Page>
);
@@ -97,8 +112,8 @@ const Header = ({ styles }: BronzorHeaderProps) => {
const hasPicture = hasTemplatePicture(picture);
return (
<View style={styles.header}>
{hasPicture && <Image src={picture.url} style={styles.picture} />}
<SemanticHeaderView style={styles.header}>
{hasPicture && <SemanticHeaderPicture src={picture.url} style={styles.picture} />}
<View style={styles.headerTitle}>
<View style={styles.headerIdentity}>
@@ -107,7 +122,7 @@ const Header = ({ styles }: BronzorHeaderProps) => {
</View>
</View>
<View style={styles.headerContactRow}>
<SemanticContactListView style={styles.headerContactRow}>
<EmailContactItem email={basics.email} style={styles.headerContactItem} />
<PhoneContactItem phone={basics.phone} style={styles.headerContactItem} />
<LocationContactItem location={basics.location} style={styles.headerContactItem} />
@@ -115,8 +130,8 @@ const Header = ({ styles }: BronzorHeaderProps) => {
{basics.customFields.map((field) => (
<CustomFieldContactItem key={field.id} field={field} style={styles.headerContactItem} />
))}
</View>
</View>
</SemanticContactListView>
</SemanticHeaderView>
);
};
packages/pdf/src/templates/bronzor/semantic.ts
+23
View File
@@ -0,0 +1,23 @@
import type { TemplateSemanticManifest } from "../../semantic/template-manifest";
export const bronzorSemanticManifest = {
template: "bronzor",
regions: [
{ name: "header", placement: "main", origins: [] },
{ name: "main", placement: "main", origins: ["sidebar", "main"], flow: "interleaved" },
],
header: { region: "header", placement: "main" },
specialSummary: null,
parts: [
{
name: "interleaved-section-row",
key: "interleaved-section-row",
owner: { kind: "section", key: "section", placement: "main" },
binding: {
type: "alias",
canonicalKind: "section",
token: "interleaved-section-row",
},
},
],
} as const satisfies TemplateSemanticManifest;