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/lapras/LaprasPage.tsx
+34 -16
View File
@@ -3,8 +3,10 @@ import type { TemplatePageProps } from "../../document";
import type { TemplateColorRoles, TemplateStyleContext, 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";
@@ -43,31 +52,40 @@ type LaprasHeaderProps = {
styles: LaprasStyles;
};
export const LaprasPage = ({ page, pageSize, pageMinHeightStyle, showHeader }: TemplatePageProps) => {
export const LaprasPage = ({ 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 { colors, styles } = useLaprasTemplate();
const metrics = getTemplateMetrics(metadata.page);
const mainSections = filterSections(page.main, data);
const sidebarSections = filterSections(page.sidebar, data);
const mainSections = useRenderedSectionIds(pageNodeKey, filterSections(page.main, data));
const sidebarSections = useRenderedSectionIds(pageNodeKey, filterSections(page.sidebar, data));
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.sectionGroup, { rowGap: metrics.gapY(1.5) })}>
<SemanticRegionView region="main" style={composeStyles(styles.sectionGroup, { rowGap: metrics.gapY(1.5) })}>
{mainSections.map((section) => (
<Section key={section} section={section} placement="main" />
))}
</View>
</SemanticRegionView>
{!page.fullWidth && (
<View style={composeStyles(styles.sectionGroup, { rowGap: metrics.gapY(1.5) })}>
<SemanticRegionView
region="sidebar"
style={composeStyles(styles.sectionGroup, { rowGap: metrics.gapY(1.5) })}
>
{sidebarSections.map((section) => (
<Section key={section} section={section} placement="sidebar" />
))}
</View>
</SemanticRegionView>
)}
</TemplateProvider>
</Page>
@@ -79,8 +97,8 @@ const Header = ({ styles }: LaprasHeaderProps) => {
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}>
@@ -88,7 +106,7 @@ const Header = ({ styles }: LaprasHeaderProps) => {
<Text>{basics.headline}</Text>
</View>
<View style={styles.contactList}>
<SemanticContactListView style={styles.contactList}>
<EmailContactItem email={basics.email} style={styles.contactItem} />
<PhoneContactItem phone={basics.phone} style={styles.contactItem} />
<LocationContactItem location={basics.location} style={styles.contactItem} />
@@ -96,9 +114,9 @@ const Header = ({ styles }: LaprasHeaderProps) => {
{basics.customFields.map((field) => (
<CustomFieldContactItem key={field.id} field={field} style={styles.contactItem} />
))}
</View>
</SemanticContactListView>
</View>
</View>
</SemanticHeaderView>
);
};
packages/pdf/src/templates/lapras/semantic.ts
+13
View File
@@ -0,0 +1,13 @@
import type { TemplateSemanticManifest } from "../../semantic/template-manifest";
export const laprasSemanticManifest = {
template: "lapras",
regions: [
{ name: "header", placement: "main", origins: [] },
{ name: "main", placement: "main", origins: ["main"] },
{ name: "sidebar", placement: "sidebar", origins: ["sidebar"] },
],
header: { region: "header", placement: "main" },
specialSummary: null,
parts: [],
} as const satisfies TemplateSemanticManifest;