Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-22 12:41:31 +10:00
Code Issues Packages Projects Releases Wiki Activity

feat(artboard): implement 8 new templates

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-09 21:01:01 +01:00
parent 9acf7e8d22
commit 92bb9f96a0
37 changed files with 5422 additions and 1810 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
apps/artboard/src/pages/artboard.tsx
View File

@ -30,6 +30,19 @@ export const ArtboardPage = () => {
useEffect(() => {
document.documentElement.style.setProperty("font-size", `${metadata.typography.font.size}px`);
document.documentElement.style.setProperty("line-height", `${metadata.typography.lineHeight}`);
document.documentElement.style.setProperty("--font-size", `${metadata.typography.font.size}px`);
document.documentElement.style.setProperty(
"--line-height",
`${metadata.typography.lineHeight}`,
);
document.documentElement.style.setProperty("--color-text", `${metadata.theme.text}`);
document.documentElement.style.setProperty("--color-primary", `${metadata.theme.primary}`);
document.documentElement.style.setProperty(
"--color-background",
`${metadata.theme.background}`,
);
}, [metadata]);
// Underline Links

33
apps/artboard/src/pages/builder.tsx
View File

@ -1,17 +1,20 @@
import { SectionKey } from "@reactive-resume/schema";
import { pageSizeMap } from "@reactive-resume/utils";
import { useEffect, useRef } from "react";
import { pageSizeMap, TemplateKey } from "@reactive-resume/utils";
import { AnimatePresence, motion } from "framer-motion";
import { useEffect, useMemo, useRef } from "react";
import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
import { MM_TO_PX, Page } from "../components/page";
import { useArtboardStore } from "../store/artboard";
import { Rhyhorn } from "../templates/rhyhorn";
import { getTemplate } from "../templates";
export const BuilderLayout = () => {
const transformRef = useRef<ReactZoomPanPinchRef>(null);
const format = useArtboardStore((state) => state.resume.metadata.page.format);
const layout = useArtboardStore((state) => state.resume.metadata.layout);
const template = useArtboardStore((state) => state.resume.metadata.template);
const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
const Template = useMemo(() => getTemplate(template), [template]);
useEffect(() => {
const handleMessage = (event: MessageEvent) => {
@ -50,13 +53,21 @@ export const BuilderLayout = () => {
gridTemplateColumns: `repeat(${layout.length}, 1fr)`,
}}
>
{layout.map((columns, pageIndex) => (
<Page key={pageIndex} mode="builder" pageNumber={pageIndex + 1}>
{template === "rhyhorn" && (
<Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
)}
</Page>
))}
<AnimatePresence>
{layout.map((columns, pageIndex) => (
<motion.div
layout
key={pageIndex}
initial={{ opacity: 0, x: -200 }}
animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
exit={{ opacity: 0, x: -200 }}
>
<Page mode="builder" pageNumber={pageIndex + 1}>
<Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
</Page>
</motion.div>
))}
</AnimatePresence>
</TransformComponent>
</TransformWrapper>
);

12
apps/artboard/src/pages/preview.tsx
View File

@ -1,20 +1,22 @@
import { SectionKey } from "@reactive-resume/schema";
import { TemplateKey } from "@reactive-resume/utils";
import { useMemo } from "react";
import { Page } from "../components/page";
import { useArtboardStore } from "../store/artboard";
import { Rhyhorn } from "../templates/rhyhorn";
import { getTemplate } from "../templates";
export const PreviewLayout = () => {
const layout = useArtboardStore((state) => state.resume.metadata.layout);
const template = useArtboardStore((state) => state.resume.metadata.template);
const template = useArtboardStore((state) => state.resume.metadata.template as TemplateKey);
const Template = useMemo(() => getTemplate(template), [template]);
return (
<>
{layout.map((columns, pageIndex) => (
<Page key={pageIndex} mode="preview" pageNumber={pageIndex + 1}>
{template === "rhyhorn" && (
<Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
)}
<Template isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
</Page>
))}
</>