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

perf: 🎨 remove fragment imports, optimize templates

Browse Source
This commit is contained in:
Amruth Pillai
2023-11-06 22:37:32 +01:00
parent 2d35057e57
commit fca61543c5
42 changed files with 742 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.github/FUNDING.yml vendored Normal file
View File

@ -0,0 +1 @@
github: AmruthPillai

BIN
apps/client/public/templates/rhyhorn.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 344 KiB

6
apps/client/src/constants/sample-resume.ts
View File

@ -436,9 +436,9 @@ export const sampleResume: ResumeData = {
id: "j69rrkkdf94jqqfe5v726d1n",
visible: true,
name: "QuantRes",
description: "Nassau, Bahamas",
description: "Execution Team Manager",
date: "Jan 2018 - Jul 2020",
level: 0,
location: "Nassau, Bahamas",
summary:
"<p>Proprietary quantitative trading firm and privately-held quantitative futures fund with $1B in AUM and a focus on futures and OTC FX opportunities. 25+ year track record of trading global derivatives markets.</p><h3>Execution Team Manager</h3><p>Led international OTC FX and futures trading desk, software development, compliance, and market data for fund averaging $5B in monthly FX transactions and generating 500K+ futures contracts per month.</p><p>Steered a 12-member team of 4 traders and 8 software engineers. Oversaw co-located trade execution and managed direct market access in 4 data centers globally for exchanges not co-located. Built partnerships with trading technology providers. Point of contact with banks, brokerages, FXSpotStream, and 9 other liquidity providers. Led market data feed agreements with exchanges. Maintained CME and Eurex exchange memberships. Headed fulfillment of regulatory compliance and due diligence requests.</p><ul><li><p><strong>Decreased HFT FX trading costs</strong> by integrating streaming of 1 million NDF prices into co-located servers, coordinating with engineers of the FX pricing engine.</p></li></ul><ul><li><p><strong>Streamlined market data contracts and reduced costs by improving data quality and availability.</strong> Consolidated technology providers (Bloomberg and Reuters) and enhanced data collection for time periods needed, data types, and breadth of data.</p></li></ul><ul><li><p><strong>Scaled capabilities by recruiting to enlarge the team</strong>, hiring 3 traders, 2 software engineers, and a consultant with 85% retention for 2+ years. Sourced top talent by posting jobs, leveraging network of contacts, and outsourcing with recruiters.</p></li></ul><ul><li><p><strong>Reduced bank, vendor, and futures broker fees, expanded access to services</strong>, and maintained open lines of communication by strengthening existing relationships. Contacted sales representatives to facilitate introductions.</p></li></ul>",
keywords: [],
@ -477,7 +477,7 @@ export const sampleResume: ResumeData = {
theme: {
background: "#ffffff",
text: "#000000",
primary: "#000000",
primary: "#222222",
},
typography: {
font: {

2
apps/client/src/pages/builder/layout.tsx
View File

@ -33,7 +33,7 @@ export const BuilderLayout = () => {
if (isDesktop) {
return (
<div className="relative h-full w-full overflow-hidden">
<PanelGroup direction="horizontal">
<PanelGroup direction="horizontal" autoSaveId="builder-layout">
<Panel
collapsible
minSize={20}

18
apps/client/src/pages/builder/page.tsx
View File

@ -6,7 +6,7 @@ import {
PageGrid,
PageNumber,
PageWrapper,
Rhyhorn,
templatesList,
} from "@reactive-resume/templates";
import { pageSizeMap } from "@reactive-resume/utils";
import { AnimatePresence, motion } from "framer-motion";
@ -35,6 +35,15 @@ export const BuilderPage = () => {
};
}, [resume.metadata.page]);
const Template = useMemo(() => {
const Component = templatesList.find((template) => template.id === resume.metadata.template)
?.Component;
if (!Component) return null;
return Component;
}, [resume.metadata.template]);
return (
<>
<Helmet>
@ -64,7 +73,12 @@ export const BuilderPage = () => {
<PageWrapper>
{showPageNumbers && <PageNumber>Page {pageIndex + 1}</PageNumber>}
<Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
{Template !== null && (
<Template
isFirstPage={pageIndex === 0}
columns={columns as SectionKey[][]}
/>
)}
{showBreakLine && <PageBreakLine $pageHeight={pageHeight} />}
</PageWrapper>

26
apps/client/src/pages/builder/sidebars/left/dialogs/custom-section.tsx
View File

@ -12,7 +12,6 @@ import {
FormMessage,
Input,
RichInput,
Slider,
} from "@reactive-resume/ui";
import { AnimatePresence, motion } from "framer-motion";
import { useForm } from "react-hook-form";
@ -88,13 +87,13 @@ export const CustomSectionDialog = () => {
/>
<FormField
name="url"
name="location"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-1">
<FormLabel>Website</FormLabel>
<FormLabel>Location</FormLabel>
<FormControl>
<URLInput {...field} />
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
@ -102,24 +101,13 @@ export const CustomSectionDialog = () => {
/>
<FormField
name="level"
name="url"
control={form.control}
render={({ field }) => (
<FormItem className="col-span-2">
<FormLabel>Level</FormLabel>
<FormControl className="py-2">
<div className="flex items-center gap-x-4">
<Slider
{...field}
min={0}
max={5}
value={[field.value]}
orientation="horizontal"
onValueChange={(value) => field.onChange(value[0])}
/>
<span className="text-base font-bold">{field.value}</span>
</div>
<FormLabel>Website</FormLabel>
<FormControl>
<URLInput {...field} />
</FormControl>
<FormMessage />
</FormItem>

19
apps/client/src/pages/builder/sidebars/left/sections/custom/section.tsx
View File

@ -16,7 +16,7 @@ type CustomFieldProps = {
export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) => {
const controls = useDragControls();
const handleChange = (key: "name" | "value", value: string) =>
const handleChange = (key: "icon" | "name" | "value", value: string) =>
onChange({ ...field, [key]: value });
return (
@ -28,7 +28,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -50 }}
>
<div className="flex items-end justify-between space-x-4">
<div className="flex items-end justify-between space-x-2">
<Button
size="icon"
variant="ghost"
@ -38,9 +38,15 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<DotsSixVertical />
</Button>
<Input
placeholder="Icon"
value={field.icon}
className="!ml-0"
onChange={(event) => handleChange("icon", event.target.value)}
/>
<Input
placeholder="Name"
className="!ml-2"
value={field.name}
onChange={(event) => handleChange("name", event.target.value)}
/>
@ -54,7 +60,7 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<Button
size="icon"
variant="ghost"
className="!ml-2 shrink-0"
className="!ml-0 shrink-0"
onClick={() => onRemove(field.id)}
>
<X />
@ -73,7 +79,10 @@ export const CustomFieldsSection = ({ className }: Props) => {
const customFields = useResumeStore((state) => state.resume.data.basics.customFields);
const onAddCustomField = () => {
setValue("basics.customFields", [...customFields, { id: createId(), name: "", value: "" }]);
setValue("basics.customFields", [
...customFields,
{ id: createId(), icon: "", name: "", value: "" },
]);
};
const onChangeCustomField = (field: ICustomField) => {

45
apps/client/src/pages/builder/sidebars/right/sections/template.tsx
View File

@ -1,4 +1,5 @@
import { Button } from "@reactive-resume/ui";
import { templatesList } from "@reactive-resume/templates";
import { Button, HoverCard, HoverCardContent, HoverCardTrigger } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { useResumeStore } from "@/client/stores/resume";
@ -6,9 +7,6 @@ import { useResumeStore } from "@/client/stores/resume";
import { getSectionIcon } from "../shared/section-icon";
export const TemplateSection = () => {
// TODO: Import templates from @reactive-resume/templates
const templateList = ["rhyhorn"];
const setValue = useResumeStore((state) => state.setValue);
const currentTemplate = useResumeStore((state) => state.resume.data.metadata.template);
@ -21,20 +19,31 @@ export const TemplateSection = () => {
</div>
</header>
<main className="grid grid-cols-2 gap-y-4">
{templateList.map((template) => (
<Button
key={template}
variant="outline"
disabled={template === currentTemplate}
onClick={() => setValue("metadata.template", template)}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
template === currentTemplate && "ring-1",
)}
>
{template}
</Button>
<main className="grid grid-cols-2 gap-4">
{templatesList.map(({ id, name }) => (
<HoverCard key={id} openDelay={0} closeDelay={0}>
<HoverCardTrigger asChild>
<Button
variant="outline"
onClick={() => setValue("metadata.template", id)}
className={cn(
"flex h-12 items-center justify-center overflow-hidden rounded border text-center text-sm capitalize ring-primary transition-colors hover:bg-secondary-accent focus:outline-none focus:ring-1 disabled:opacity-100",
id === currentTemplate && "ring-1",
)}
>
{name}
</Button>
</HoverCardTrigger>
<HoverCardContent className="max-w-xs overflow-hidden border-none bg-white p-0">
<img
alt={name}
loading="lazy"
src={`/templates/${id}.jpg`}
className="aspect-[1/1.4142]"
/>
</HoverCardContent>
</HoverCard>
))}
</main>
</section>

2
apps/client/src/pages/builder/sidebars/right/sections/theme.tsx
View File

@ -48,7 +48,7 @@ export const ThemeSection = () => {
style={{ backgroundColor: theme.primary }}
/>
</PopoverTrigger>
<PopoverContent asChild className="rounded-lg border-none bg-transparent p-0">
<PopoverContent className="rounded-lg border-none bg-transparent p-0">
<HexColorPicker
color={theme.primary}
onChange={(color) => {

4
apps/client/src/pages/dashboard/resumes/_dialogs/resume.tsx
View File

@ -1,5 +1,5 @@
import { zodResolver } from "@hookform/resolvers/zod";
import { CaretDown, MagicWand, Plus, TestTube } from "@phosphor-icons/react";
import { CaretDown, Flask, MagicWand, Plus } from "@phosphor-icons/react";
import { createResumeSchema, ResumeDto } from "@reactive-resume/dto";
import { idSchema } from "@reactive-resume/schema";
import {
@ -265,7 +265,7 @@ export const ResumeDialog = () => {
</DropdownMenuTrigger>
<DropdownMenuContent side="right" align="center">
<DropdownMenuItem onClick={onCreateSample}>
<TestTube className="mr-2" />
<Flask className="mr-2" />
Create Sample Resume
</DropdownMenuItem>
</DropdownMenuContent>

8
apps/client/src/pages/printer/page.tsx
View File

@ -1,10 +1,12 @@
import { useTemplate } from "@reactive-resume/hooks";
import { ResumeData, SectionKey } from "@reactive-resume/schema";
import { Artboard, PageWrapper, Rhyhorn } from "@reactive-resume/templates";
import { Artboard, PageWrapper } from "@reactive-resume/templates";
import { Navigate } from "react-router-dom";
import { useSessionStorage } from "usehooks-ts";
export const PrinterPage = () => {
const [resume] = useSessionStorage<ResumeData | null>("resume", null);
const template = useTemplate(resume?.metadata.template);
if (!resume) return <Navigate to="/" replace />;
@ -12,7 +14,9 @@ export const PrinterPage = () => {
<Artboard resume={resume} style={{ pointerEvents: "auto" }}>
{resume.metadata.layout.map((columns, pageIndex) => (
<PageWrapper key={pageIndex} data-page={pageIndex + 1}>
<Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
{template !== null && (
<template.Component isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
)}
</PageWrapper>
))}
</Artboard>

11
apps/client/src/pages/public/page.tsx
View File

@ -1,6 +1,7 @@
import { ResumeDto } from "@reactive-resume/dto";
import { useTemplate } from "@reactive-resume/hooks";
import { SectionKey } from "@reactive-resume/schema";
import { Artboard, PageWrapper, Rhyhorn } from "@reactive-resume/templates";
import { Artboard, PageWrapper } from "@reactive-resume/templates";
import { Button } from "@reactive-resume/ui";
import { pageSizeMap } from "@reactive-resume/utils";
import { Helmet } from "react-helmet-async";
@ -15,6 +16,7 @@ import { findResumeByUsernameSlug } from "@/client/services/resume";
export const PublicResumePage = () => {
const { title, data: resume } = useLoaderData() as ResumeDto;
const format = resume.metadata.page.format;
const template = useTemplate(resume.metadata.template);
return (
<div>
@ -29,7 +31,12 @@ export const PublicResumePage = () => {
<Artboard resume={resume} style={{ pointerEvents: "auto" }}>
{resume.metadata.layout.map((columns, pageIndex) => (
<PageWrapper key={pageIndex} data-page={pageIndex + 1}>
<Rhyhorn isFirstPage={pageIndex === 0} columns={columns as SectionKey[][]} />
{template !== null && (
<template.Component
isFirstPage={pageIndex === 0}
columns={columns as SectionKey[][]}
/>
)}
</PageWrapper>
))}
</Artboard>

12
libs/hooks/src/hooks/use-template.ts Normal file
View File

@ -0,0 +1,12 @@
import { templatesList } from "@reactive-resume/templates";
import { useMemo } from "react";
export const useTemplate = (templateId?: string) => {
const template = useMemo(() => {
return templatesList.find((template) => template.id === templateId);
}, [templateId]);
if (!template || !template.Component) return null;
return template;
};

1
libs/hooks/src/index.ts
View File

@ -1,4 +1,5 @@
export * from "./hooks/use-breakpoint";
export * from "./hooks/use-form-field";
export * from "./hooks/use-password-toggle";
export * from "./hooks/use-template";
export * from "./hooks/use-theme";

1
libs/schema/src/basics/custom.ts
View File

@ -2,6 +2,7 @@ import { z } from "zod";
export const customFieldSchema = z.object({
id: z.string().cuid2(),
icon: z.string(),
name: z.string(),
value: z.string(),
});

4
libs/schema/src/sections/custom-section.ts
View File

@ -7,7 +7,7 @@ export const customSectionSchema = itemSchema.extend({
name: z.string(),
description: z.string(),
date: z.string(),
level: z.number().min(0).max(5).default(0),
location: z.string(),
summary: z.string(),
keywords: z.array(z.string()).default([]),
url: urlSchema,
@ -22,7 +22,7 @@ export const defaultCustomSection: CustomSection = {
name: "",
description: "",
date: "",
level: 0,
location: "",
summary: "",
keywords: [],
url: defaultUrl,

62
libs/templates/src/shared/frame.tsx
View File

@ -33,34 +33,48 @@ export const FrameWrapper = ({ children, style }: Props) => {
setHeight(`${height}px`);
}, []);
const loadFonts = useCallback(
(frame: HTMLIFrameElement) => {
if (font.family === "CMU Serif") {
return webfontloader.load({
classes: false,
custom: {
families: ["CMU Serif"],
urls: ["https://cdn.jsdelivr.net/npm/computer-modern/cmu-serif.min.css"],
},
context: frame.contentWindow!,
fontactive: () => handleResize(frame!),
});
}
webfontloader.load({
classes: false,
google: { families: [fontString] },
context: frame.contentWindow!,
fontactive: () => handleResize(frame!),
});
},
[font, fontString, handleResize],
);
const loadIconFonts = useCallback((frame: HTMLIFrameElement) => {
const document = frame.contentDocument!;
const link = document.createElement("link");
link.type = "text/css";
link.rel = "stylesheet";
link.href = "https://unpkg.com/@phosphor-icons/web@2.0.3/src/regular/style.css";
document.head.appendChild(link);
}, []);
const onLoad = useCallback(() => {
if (!frameRef.current) return;
handleResize(frameRef.current);
if (font.family === "CMU Serif") {
return webfontloader.load({
classes: false,
custom: {
families: ["CMU Serif"],
urls: ["https://cdn.jsdelivr.net/npm/computer-modern/cmu-serif.min.css"],
},
context: frameRef.current.contentWindow!,
fontactive: () => {
handleResize(frameRef.current!);
},
});
}
webfontloader.load({
classes: false,
google: { families: [fontString] },
context: frameRef.current.contentWindow!,
fontactive: () => {
handleResize(frameRef.current!);
},
});
}, [frameRef, font, fontString, handleResize]);
loadFonts(frameRef.current);
loadIconFonts(frameRef.current);
}, [frameRef, handleResize, loadFonts, loadIconFonts]);
useEffect(() => {
onLoad();

5
libs/templates/src/styles/shared.ts
View File

@ -41,17 +41,14 @@ export const Shared = css<GlobalStyleProps>`
h1 {
font-size: 2rem;
line-height: calc(var(--line-height) + 1.5rem);
}
h2 {
font-size: 1.5rem;
line-height: calc(var(--line-height) + 1rem);
}
h3 {
font-size: 1rem;
line-height: calc(var(--line-height) + 0rem);
}
/* Paragraphs */
@ -67,7 +64,7 @@ export const Shared = css<GlobalStyleProps>`
small {
font-size: calc(var(--font-size) - 2px);
line-height: calc(var(--line-height) - 0.5rem);
line-height: calc(var(--line-height) - 2px);
}
i,

17
libs/templates/src/templates/index.ts
View File

@ -1 +1,16 @@
export * from "./rhyhorn";
import { TemplateProps } from "../shared";
import { Rhyhorn } from "./rhyhorn";
type Template = {
id: string;
name: string;
Component: (props: TemplateProps) => JSX.Element;
};
export const templatesList: Template[] = [
{
id: "rhyhorn",
name: "Rhyhorn",
Component: Rhyhorn,
},
];

6
libs/templates/src/templates/rhyhorn/index.tsx
View File

@ -16,7 +16,7 @@ import { References } from "./sections/references";
import { Skills } from "./sections/skills";
import { Summary } from "./sections/summary";
import { Volunteer } from "./sections/volunteer";
import { RhyhornStyles } from "./style";
import { RhyhornWrapper } from "./style";
const sectionMap: Partial<Record<SectionKey, () => React.ReactNode>> = {
summary: Summary,
@ -44,7 +44,7 @@ const getSection = (id: SectionKey) => {
};
export const Rhyhorn = ({ isFirstPage, columns }: TemplateProps) => (
<RhyhornStyles>
<RhyhornWrapper>
{isFirstPage && <Header />}
{/* Main */}
@ -52,5 +52,5 @@ export const Rhyhorn = ({ isFirstPage, columns }: TemplateProps) => (
{/* Sidebar */}
{columns[1].map(getSection)}
</RhyhornStyles>
</RhyhornWrapper>
);

22
libs/templates/src/templates/rhyhorn/sections/awards.tsx
View File

@ -1,7 +1,6 @@
import { Award as IAward } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,24 +11,27 @@ export const Awards = () => {
<SectionBase<IAward>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.title}</h6>
</a>
) : (
<h6>{item.title}</h6>
)}
<h6>{item.title}</h6>
<p>{item.awarder}</p>
</div>
<div>
<h6>{item.date}</h6>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

22
libs/templates/src/templates/rhyhorn/sections/certifications.tsx
View File

@ -1,7 +1,6 @@
import { Certification as ICertification } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,24 +11,27 @@ export const Certifications = () => {
<SectionBase<ICertification>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.name}</h6>
</a>
) : (
<h6>{item.name}</h6>
)}
<h6>{item.name}</h6>
<p>{item.issuer}</p>
</div>
<div>
<h6>{item.date}</h6>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

33
libs/templates/src/templates/rhyhorn/sections/custom.tsx
View File

@ -6,7 +6,6 @@ import {
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import get from "lodash.get";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -24,30 +23,32 @@ export const CustomSection = ({ id }: Props) => {
<SectionBase<ICustomSection>
section={section}
header={(item: CustomSectionItem) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.name}</h6>
</a>
) : (
<h6>{item.name}</h6>
)}
<h6>{item.name}</h6>
<p>{item.description}</p>
</div>
<div>
<h6>{item.date}</h6>
<div className="rating">
{Array.from({ length: item.level }).map((_, i) => (
<span key={i} />
))}
</div>
<p>{item.location}</p>
</div>
</Fragment>
</>
)}
main={(item: CustomSectionItem) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item: CustomSectionItem) => <small>{item.keywords.join(", ")}</small>}
footer={(item: CustomSectionItem) => (
<>
<small>{item.keywords.join(", ")}</small>
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
</>
)}
/>
);
};

22
libs/templates/src/templates/rhyhorn/sections/education.tsx
View File

@ -1,7 +1,6 @@
import { Education as IEducation } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,15 +11,9 @@ export const Education = () => {
<SectionBase<IEducation>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.institution}</h6>
</a>
) : (
<h6>{item.institution}</h6>
)}
<h6>{item.institution}</h6>
<p>{item.area}</p>
</div>
@ -31,9 +24,18 @@ export const Education = () => {
{item.score ? ` | ${item.score}` : ""}
</p>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

22
libs/templates/src/templates/rhyhorn/sections/experience.tsx
View File

@ -1,7 +1,6 @@
import { Experience as IExperience } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,15 +11,9 @@ export const Experience = () => {
<SectionBase<IExperience>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.company}</h6>
</a>
) : (
<h6>{item.company}</h6>
)}
<h6>{item.company}</h6>
<p>{item.position}</p>
</div>
@ -28,9 +21,18 @@ export const Experience = () => {
<h6>{item.date}</h6>
<p>{item.location}</p>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

3
libs/templates/src/templates/rhyhorn/sections/header.tsx
View File

@ -1,11 +1,12 @@
import { Picture, useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
export const Header = () => {
const basics = useStore((state) => state.basics);
return (
<div className="header">
{basics.picture.url && !basics.picture.effects.hidden && (
{isUrl(basics.picture.url) && !basics.picture.effects.hidden && (
<Picture
alt={basics.name}
src={basics.picture.url}

5
libs/templates/src/templates/rhyhorn/sections/interests.tsx
View File

@ -1,6 +1,5 @@
import { Interest as IInterest } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -11,14 +10,14 @@ export const Interests = () => {
<SectionBase<IInterest>
section={section}
header={(item) => (
<Fragment>
<>
<div>
<h6>{item.name}</h6>
<p>{item.keywords.join(", ")}</p>
</div>
<div />
</Fragment>
</>
)}
/>
);

5
libs/templates/src/templates/rhyhorn/sections/languages.tsx
View File

@ -1,7 +1,6 @@
import { Language as ILanguage } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { getCEFRLevel } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,14 +11,14 @@ export const Languages = () => {
<SectionBase<ILanguage>
section={section}
header={(item) => (
<Fragment>
<>
<div>
<h6>{item.name}</h6>
<p>{item.fluency || getCEFRLevel(item.fluencyLevel)}</p>
</div>
<div />
</Fragment>
</>
)}
/>
);

5
libs/templates/src/templates/rhyhorn/sections/profiles.tsx
View File

@ -1,7 +1,6 @@
import { Profile as IProfile } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import styled from "styled-components";
import { SectionBase } from "../shared/section-base";
@ -18,7 +17,7 @@ export const Profiles = () => {
<SectionBase<IProfile>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{item.icon && (
<i>
@ -42,7 +41,7 @@ export const Profiles = () => {
</div>
<div />
</Fragment>
</>
)}
/>
);

27
libs/templates/src/templates/rhyhorn/sections/projects.tsx
View File

@ -1,7 +1,6 @@
import { Project as IProject } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,25 +11,31 @@ export const Projects = () => {
<SectionBase<IProject>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.name}</h6>
</a>
) : (
<h6>{item.name}</h6>
)}
<h6>{item.name}</h6>
<p>{item.description}</p>
</div>
<div>
<h6>{item.date}</h6>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => <small>{item.keywords.join(", ")}</small>}
footer={(item) => (
<>
<small>{item.keywords.join(", ")}</small>
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
</>
)}
/>
);
};

22
libs/templates/src/templates/rhyhorn/sections/publications.tsx
View File

@ -1,7 +1,6 @@
import { Publication as IPublication } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,24 +11,27 @@ export const Publications = () => {
<SectionBase<IPublication>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.name}</h6>
</a>
) : (
<h6>{item.name}</h6>
)}
<h6>{item.name}</h6>
<p>{item.publisher}</p>
</div>
<div>
<h6>{item.date}</h6>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

22
libs/templates/src/templates/rhyhorn/sections/references.tsx
View File

@ -1,7 +1,6 @@
import { Reference as IReference } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,22 +11,25 @@ export const References = () => {
<SectionBase<IReference>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.name}</h6>
</a>
) : (
<h6>{item.name}</h6>
)}
<h6>{item.name}</h6>
<p>{item.description}</p>
</div>
<div />
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

5
libs/templates/src/templates/rhyhorn/sections/skills.tsx
View File

@ -1,6 +1,5 @@
import { Skill as ISkill } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -11,14 +10,14 @@ export const Skills = () => {
<SectionBase<ISkill>
section={section}
header={(item) => (
<Fragment>
<>
<div>
<h6>{item.name}</h6>
<p>{item.description}</p>
</div>
<div />
</Fragment>
</>
)}
footer={(item) => <small>{item.keywords.join(", ")}</small>}
/>

4
libs/templates/src/templates/rhyhorn/sections/summary.tsx
View File

@ -1,7 +1,5 @@
import { useStore } from "@reactive-resume/templates";
import { Heading } from "../shared/heading";
export const Summary = () => {
const section = useStore((state) => state.sections.summary);
@ -9,7 +7,7 @@ export const Summary = () => {
return (
<section id={section.id} className={`section section__${section.id}`}>
<Heading>{section.name}</Heading>
<h4 className="section__heading">{section.name}</h4>
<main className="section__item-content">
<div

22
libs/templates/src/templates/rhyhorn/sections/volunteer.tsx
View File

@ -1,7 +1,6 @@
import { Volunteer as IVolunteer } from "@reactive-resume/schema";
import { useStore } from "@reactive-resume/templates";
import { isUrl } from "@reactive-resume/utils";
import { Fragment } from "react";
import { SectionBase } from "../shared/section-base";
@ -12,15 +11,9 @@ export const Volunteer = () => {
<SectionBase<IVolunteer>
section={section}
header={(item) => (
<Fragment>
<>
<div>
{isUrl(item.url.href) ? (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.organization}</h6>
</a>
) : (
<h6>{item.organization}</h6>
)}
<h6>{item.organization}</h6>
<p>{item.position}</p>
</div>
@ -28,9 +21,18 @@ export const Volunteer = () => {
<h6>{item.date}</h6>
<p>{item.location}</p>
</div>
</Fragment>
</>
)}
main={(item) => <div dangerouslySetInnerHTML={{ __html: item.summary }} />}
footer={(item) => (
<div>
{isUrl(item.url.href) && (
<a href={item.url.href} target="_blank" rel="noopener noreferrer nofollow">
<h6>{item.url.label || item.url.href}</h6>
</a>
)}
</div>
)}
/>
);
};

10
libs/templates/src/templates/rhyhorn/shared/heading.tsx
View File

@ -1,10 +0,0 @@
import styled from "styled-components";
export const Heading = styled.h4`
font-size: 0.9rem;
line-height: 1.2rem;
padding-bottom: 2px;
margin-bottom: 6px;
text-transform: uppercase;
border-bottom: 1px solid var(--color-text);
`;

4
libs/templates/src/templates/rhyhorn/shared/section-base.tsx
View File

@ -1,8 +1,6 @@
import { Item, SectionItem, SectionWithItem } from "@reactive-resume/schema";
import { ItemGrid } from "@reactive-resume/templates";
import { Heading } from "./heading";
type Props<T extends Item> = {
section: SectionWithItem<T>;
header?: (item: T) => React.ReactNode;
@ -15,7 +13,7 @@ export const SectionBase = <T extends SectionItem>({ section, header, main, foot
return (
<section id={section.id} className={`section section__${section.id}`}>
<Heading>{section.name}</Heading>
<h4 className="section__heading">{section.name}</h4>
<ItemGrid className="section__items" $columns={section.columns}>
{section.items

18
libs/templates/src/templates/rhyhorn/style.ts
View File

@ -1,6 +1,6 @@
import styled from "styled-components";
export const RhyhornStyles = styled.div`
export const RhyhornWrapper = styled.div`
display: grid;
row-gap: 16px;
@ -21,13 +21,17 @@ export const RhyhornStyles = styled.div`
line-height: calc(var(--line-height) + 0.5rem);
}
&__headline {
color: var(--color-primary);
}
&__meta {
font-size: 0.875rem;
line-height: var(--line-height);
span {
padding: 0 6px;
border-right: 1px solid var(--color-primary);
border-right: 1px solid currentColor;
&:first-child {
padding-left: 0;
@ -41,6 +45,16 @@ export const RhyhornStyles = styled.div`
}
.section {
&__heading {
font-size: 0.9rem;
line-height: 1.2rem;
padding-bottom: 2px;
margin-bottom: 6px;
text-transform: uppercase;
color: var(--color-primary);
border-bottom: 1px solid var(--color-text);
}
&__item {
display: flex;
flex-direction: column;

22
libs/ui/src/components/hover-card.tsx
View File

@ -10,16 +10,18 @@ export const HoverCardContent = forwardRef<
React.ElementRef<typeof HoverCardPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
>(({ className, align = "center", sideOffset = 6, ...props }, ref) => (
<HoverCardPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
<HoverCardPrimitive.Portal>
<HoverCardPrimitive.Content
ref={ref}
align={align}
sideOffset={sideOffset}
className={cn(
"z-50 rounded-sm border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
className,
)}
{...props}
/>
</HoverCardPrimitive.Portal>
));
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;

10
libs/utils/src/namespaces/fonts.ts
View File

@ -312,16 +312,6 @@ export const fonts: Font[] = [
"http://fonts.gstatic.com/s/inter/v13/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZhrib2Bg-4.ttf",
},
},
{
family: "Material Icons",
category: "monospace",
subsets: ["latin"],
variants: ["regular"],
files: {
regular:
"http://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZIhI8tIHh.ttf",
},
},
{
family: "Roboto Mono",
category: "monospace",

8
package.json
View File

@ -68,14 +68,14 @@
"@types/passport-github2": "^1.2.8",
"@types/passport-google-oauth20": "^2.0.13",
"@types/passport-local": "^1.0.37",
"@types/react": "18.2.35",
"@types/react": "18.2.36",
"@types/react-dom": "18.2.14",
"@types/react-is": "18.2.3",
"@types/retry": "^0.12.4",
"@types/styled-components": "5.1.29",
"@types/webfontloader": "^1.6.36",
"@typescript-eslint/eslint-plugin": "^6.9.1",
"@typescript-eslint/parser": "^6.9.1",
"@typescript-eslint/eslint-plugin": "^6.10.0",
"@typescript-eslint/parser": "^6.10.0",
"@vitejs/plugin-react": "~4.1.1",
"@vitejs/plugin-react-swc": "~3.4.1",
"@vitest/coverage-v8": "^0.34.6",
@ -201,7 +201,7 @@
"nestjs-prisma": "^0.22.0",
"nestjs-zod": "^3.0.0",
"nodemailer": "^6.9.7",
"openai": "^4.15.4",
"openai": "^4.16.0",
"otplib": "^12.0.1",
"papaparse": "^5.4.1",
"passport": "^0.6.0",

840
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff