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

release: v4.3.1

Browse Source
This commit is contained in:
Amruth Pillai
2025-01-11 15:38:26 +01:00
parent 54bace451c
commit 58ef309b68
25 changed files with 303 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/client/src/pages/builder/sidebars/left/dialogs/awards.tsx
View File

@ -104,7 +104,13 @@ export const AwardsDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

8
apps/client/src/pages/builder/sidebars/left/dialogs/certifications.tsx
View File

@ -98,7 +98,13 @@ export const CertificationsDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

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

@ -131,7 +131,13 @@ export const CustomSectionDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

8
apps/client/src/pages/builder/sidebars/left/dialogs/education.tsx
View File

@ -141,7 +141,13 @@ export const EducationDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

8
apps/client/src/pages/builder/sidebars/left/dialogs/experience.tsx
View File

@ -117,7 +117,13 @@ export const ExperienceDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

6
apps/client/src/pages/builder/sidebars/left/dialogs/languages.tsx
View File

@ -74,10 +74,10 @@ export const LanguagesDialog = () => {
}}
/>
{field.value === 0 ? (
<span className="text-base font-bold">{t`Hidden`}</span>
) : (
{field.value > 0 ? (
<span className="text-base font-bold">{field.value}</span>
) : (
<span className="text-base font-bold">{t`Hidden`}</span>
)}
</div>
</FormControl>

6
apps/client/src/pages/builder/sidebars/left/dialogs/profiles.tsx
View File

@ -51,7 +51,7 @@ export const ProfilesDialog = () => {
<FormLabel>{t`Network`}</FormLabel>
<FormControl>
{/* eslint-disable-next-line lingui/no-unlocalized-strings */}
<Input {...field} placeholder="LinkedIn" />
<Input {...field} placeholder="GitHub" />
</FormControl>
<FormMessage />
</FormItem>
@ -79,7 +79,7 @@ export const ProfilesDialog = () => {
<FormItem className="sm:col-span-2">
<FormLabel>{t`Website`}</FormLabel>
<FormControl>
<URLInput {...field} placeholder="https://linkedin.com/in/johndoe" />
<URLInput {...field} placeholder="https://github.com/johndoe" />
</FormControl>
<FormMessage />
</FormItem>
@ -100,7 +100,7 @@ export const ProfilesDialog = () => {
<Input
{...field}
id="iconSlug"
placeholder="linkedin"
placeholder="github"
onChange={(event) => {
field.onChange(event);
handleIconChange(event);

8
apps/client/src/pages/builder/sidebars/left/dialogs/projects.tsx
View File

@ -111,7 +111,13 @@ export const ProjectsDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

8
apps/client/src/pages/builder/sidebars/left/dialogs/publications.tsx
View File

@ -98,7 +98,13 @@ export const PublicationsDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

8
apps/client/src/pages/builder/sidebars/left/dialogs/references.tsx
View File

@ -84,7 +84,13 @@ export const ReferencesDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

6
apps/client/src/pages/builder/sidebars/left/dialogs/skills.tsx
View File

@ -88,10 +88,10 @@ export const SkillsDialog = () => {
}}
/>
{field.value === 0 ? (
<span className="text-base font-bold">{t`Hidden`}</span>
) : (
{field.value > 0 ? (
<span className="text-base font-bold">{field.value}</span>
) : (
<span className="text-base font-bold">{t`Hidden`}</span>
)}
</div>
</FormControl>

8
apps/client/src/pages/builder/sidebars/left/dialogs/volunteer.tsx
View File

@ -112,7 +112,13 @@ export const VolunteerDialog = () => {
{...field}
content={field.value}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
field.onChange(value);
}}
/>
)}
onChange={(value) => {
field.onChange(value);

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

@ -1,4 +1,4 @@
import { t } from "@lingui/macro";
import { t, Trans } from "@lingui/macro";
import { createId } from "@paralleldrive/cuid2";
import { DotsSixVertical, Envelope, Plus, X } from "@phosphor-icons/react";
import { CustomField as ICustomField } from "@reactive-resume/schema";
@ -37,10 +37,10 @@ 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-2">
<div className="flex items-end justify-between">
<Button
size="icon"
variant="link"
variant="ghost"
className="shrink-0"
onPointerDown={(event) => {
controls.start(event);
@ -52,12 +52,12 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<Popover>
<Tooltip content={t`Icon`}>
<PopoverTrigger asChild>
<Button size="icon" variant="ghost">
<Button size="icon" variant="ghost" className="shrink-0">
{field.icon ? <i className={cn(`ph ph-${field.icon}`)} /> : <Envelope />}
</Button>
</PopoverTrigger>
</Tooltip>
<PopoverContent className="p-1.5">
<PopoverContent side="bottom" align="start" className="flex flex-col gap-y-1.5 p-1.5">
<Input
value={field.icon}
placeholder={t`Enter Phosphor Icon`}
@ -65,19 +65,35 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
onChange({ ...field, icon: event.target.value });
}}
/>
<p className="text-xs opacity-80">
<Trans>
Visit{" "}
<a
href="https://phosphoricons.com/"
target="_blank"
className="underline"
rel="noopener noreferrer nofollow"
>
Phosphor Icons
</a>{" "}
for a list of available icons
</Trans>
</p>
</PopoverContent>
</Popover>
<Input
className="mx-2"
placeholder={t`Name`}
value={field.name}
className="!ml-0"
onChange={(event) => {
handleChange("name", event.target.value);
}}
/>
<Input
className="mx-2"
placeholder={t`Value`}
value={field.value}
onChange={(event) => {
@ -87,8 +103,8 @@ export const CustomField = ({ field, onChange, onRemove }: CustomFieldProps) =>
<Button
size="icon"
variant="link"
className="!ml-0 shrink-0"
variant="ghost"
className="shrink-0"
onClick={() => {
onRemove(field.id);
}}
@ -111,7 +127,7 @@ export const CustomFieldsSection = ({ className }: Props) => {
const onAddCustomField = () => {
setValue("basics.customFields", [
...customFields,
{ id: createId(), icon: "", name: "", value: "" },
{ id: createId(), icon: "envelope", name: "", value: "" },
]);
};

3
apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx
View File

@ -70,12 +70,15 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
const onCreate = () => {
open("create", { id });
};
const onUpdate = (item: T) => {
open("update", { id, item });
};
const onDuplicate = (item: T) => {
open("duplicate", { id, item });
};
const onDelete = (item: T) => {
open("delete", { id, item });
};

6
apps/client/src/pages/builder/sidebars/left/sections/shared/section-dialog.tsx
View File

@ -1,6 +1,7 @@
import { t } from "@lingui/macro";
import { createId } from "@paralleldrive/cuid2";
import { CopySimple, PencilSimple, Plus } from "@phosphor-icons/react";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
import { SectionItem, SectionWithItem } from "@reactive-resume/schema";
import {
AlertDialog,
@ -14,6 +15,7 @@ import {
Button,
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
@ -158,6 +160,10 @@ export const SectionDialog = <T extends SectionItem>({
</h2>
</div>
</DialogTitle>
<VisuallyHidden>
<DialogDescription />
</VisuallyHidden>
</DialogHeader>
{children}

40
apps/client/src/pages/builder/sidebars/left/sections/shared/section-list-item.tsx
View File

@ -3,11 +3,12 @@ import { CSS } from "@dnd-kit/utilities";
import { t } from "@lingui/macro";
import { CopySimple, DotsSixVertical, PencilSimple, TrashSimple } from "@phosphor-icons/react";
import {
ContextMenu,
ContextMenuCheckboxItem,
ContextMenuContent,
ContextMenuItem,
ContextMenuTrigger,
DropdownMenu,
DropdownMenuCheckboxItem,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { motion } from "framer-motion";
@ -68,8 +69,8 @@ export const SectionListItem = ({
</div>
{/* List Item */}
<ContextMenu>
<ContextMenuTrigger asChild>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<div
className={cn(
"flex-1 cursor-context-menu p-4 hover:bg-secondary-accent",
@ -80,25 +81,26 @@ export const SectionListItem = ({
<h4 className="font-medium leading-relaxed">{title}</h4>
{description && <p className="text-xs leading-relaxed opacity-50">{description}</p>}
</div>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuCheckboxItem checked={visible} onCheckedChange={onToggleVisibility}>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuCheckboxItem checked={visible} onCheckedChange={onToggleVisibility}>
<span className="-ml-0.5">{t`Visible`}</span>
</ContextMenuCheckboxItem>
<ContextMenuItem onClick={onUpdate}>
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuItem onClick={onUpdate}>
<PencilSimple size={14} />
<span className="ml-2">{t`Edit`}</span>
</ContextMenuItem>
<ContextMenuItem onClick={onDuplicate}>
</DropdownMenuItem>
<DropdownMenuItem onClick={onDuplicate}>
<CopySimple size={14} />
<span className="ml-2">{t`Copy`}</span>
</ContextMenuItem>
<ContextMenuItem className="text-error" onClick={onDelete}>
</DropdownMenuItem>
<DropdownMenuItem className="text-error" onClick={onDelete}>
<TrashSimple size={14} />
<span className="ml-2">{t`Remove`}</span>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</div>
</motion.section>
);

8
apps/client/src/pages/builder/sidebars/left/sections/summary.tsx
View File

@ -32,7 +32,13 @@ export const SummarySection = () => {
<RichInput
content={section.content}
footer={(editor) => (
<AiActions value={editor.getText()} onChange={editor.commands.setContent} />
<AiActions
value={editor.getText()}
onChange={(value) => {
editor.commands.setContent(value, true);
setValue("sections.summary.content", value);
}}
/>
)}
onChange={(value) => {
setValue("sections.summary.content", value);

28
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/base-card.tsx
View File

@ -1,5 +1,6 @@
import { Card } from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { forwardRef } from "react";
import Tilt from "react-parallax-tilt";
import { defaultTiltProps } from "@/client/constants/parallax-tilt";
@ -10,16 +11,19 @@ type Props = {
children?: React.ReactNode;
};
export const BaseCard = ({ children, className, onClick }: Props) => (
<Tilt {...defaultTiltProps}>
<Card
className={cn(
"relative flex aspect-[1/1.4142] scale-100 cursor-pointer items-center justify-center bg-secondary/50 p-0 transition-transform active:scale-95",
className,
)}
onClick={onClick}
>
{children}
</Card>
</Tilt>
export const BaseCard = forwardRef<HTMLDivElement, Props>(
({ children, className, onClick }, ref) => (
<Tilt {...defaultTiltProps}>
<Card
ref={ref}
className={cn(
"relative flex aspect-[1/1.4142] scale-100 cursor-pointer items-center justify-center bg-secondary/50 p-0 transition-transform active:scale-95",
className,
)}
onClick={onClick}
>
{children}
</Card>
</Tilt>
),
);

59
apps/client/src/pages/dashboard/resumes/_layouts/grid/_components/resume-card.tsx
View File

@ -9,11 +9,11 @@ import {
} from "@phosphor-icons/react";
import { ResumeDto } from "@reactive-resume/dto";
import {
ContextMenu,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuTrigger,
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import dayjs from "dayjs";
@ -33,6 +33,7 @@ export const ResumeCard = ({ resume }: Props) => {
const { open } = useDialog<ResumeDto>("resume");
const { open: lockOpen } = useDialog<ResumeDto>("lock");
const template = resume.data.metadata.template;
const lastUpdated = dayjs().to(resume.updatedAt);
const onOpen = () => {
@ -56,9 +57,9 @@ export const ResumeCard = ({ resume }: Props) => {
};
return (
<ContextMenu>
<ContextMenuTrigger>
<BaseCard className="space-y-0" onClick={onOpen}>
<DropdownMenu>
<DropdownMenuTrigger className="text-left">
<BaseCard className="cursor-context-menu space-y-0">
<AnimatePresence>
{resume.locked && (
<motion.div
@ -81,39 +82,45 @@ export const ResumeCard = ({ resume }: Props) => {
<h4 className="line-clamp-2 font-medium">{resume.title}</h4>
<p className="line-clamp-1 text-xs opacity-75">{t`Last updated ${lastUpdated}`}</p>
</div>
</BaseCard>
</ContextMenuTrigger>
<ContextMenuContent>
<ContextMenuItem onClick={onOpen}>
<img
src={`/templates/jpg/${template}.jpg`}
alt={template}
className="rounded-sm opacity-80"
/>
</BaseCard>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem onClick={onOpen}>
<FolderOpen size={14} className="mr-2" />
{t`Open`}
</ContextMenuItem>
<ContextMenuItem onClick={onUpdate}>
</DropdownMenuItem>
<DropdownMenuItem onClick={onUpdate}>
<PencilSimple size={14} className="mr-2" />
{t`Rename`}
</ContextMenuItem>
<ContextMenuItem onClick={onDuplicate}>
</DropdownMenuItem>
<DropdownMenuItem onClick={onDuplicate}>
<CopySimple size={14} className="mr-2" />
{t`Duplicate`}
</ContextMenuItem>
</DropdownMenuItem>
{resume.locked ? (
<ContextMenuItem onClick={onLockChange}>
<DropdownMenuItem onClick={onLockChange}>
<LockOpen size={14} className="mr-2" />
{t`Unlock`}
</ContextMenuItem>
</DropdownMenuItem>
) : (
<ContextMenuItem onClick={onLockChange}>
<DropdownMenuItem onClick={onLockChange}>
<Lock size={14} className="mr-2" />
{t`Lock`}
</ContextMenuItem>
</DropdownMenuItem>
)}
<ContextMenuSeparator />
<ContextMenuItem className="text-error" onClick={onDelete}>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-error" onClick={onDelete}>
<TrashSimple size={14} className="mr-2" />
{t`Delete`}
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
};

27
apps/client/src/pages/dashboard/settings/_sections/openai.tsx
View File

@ -12,7 +12,6 @@ import {
FormMessage,
Input,
} from "@reactive-resume/ui";
import { cn } from "@reactive-resume/utils";
import { useForm } from "react-hook-form";
import { z } from "zod";
@ -29,6 +28,7 @@ const formSchema = z.object({
.string()
// eslint-disable-next-line lingui/no-unlocalized-strings
.regex(/https?:\/\/[^/]+\/?v1$/, "That doesn't look like a valid URL")
.or(z.literal(""))
.default(""),
model: z.string().default(DEFAULT_MODEL),
maxTokens: z.number().default(DEFAULT_MAX_TOKENS),
@ -39,7 +39,8 @@ type FormValues = z.infer<typeof formSchema>;
export const OpenAISettings = () => {
const { apiKey, setApiKey, baseURL, setBaseURL, model, setModel, maxTokens, setMaxTokens } =
useOpenAiStore();
const isEnabled = !!apiKey || !!baseURL || !!model || !!maxTokens;
const isEnabled = !!apiKey;
const form = useForm<FormValues>({
resolver: zodResolver(formSchema),
@ -75,7 +76,7 @@ export const OpenAISettings = () => {
return (
<div className="space-y-6">
<div>
<h3 className="text-2xl font-bold leading-relaxed tracking-tight">{t`OpenAI Integration`}</h3>
<h3 className="text-2xl font-bold leading-relaxed tracking-tight">{t`OpenAI/Ollama Integration`}</h3>
<p className="leading-relaxed opacity-75">
{t`You can make use of the OpenAI API to help you generate content, or improve your writing while composing your resume.`}
</p>
@ -97,16 +98,13 @@ export const OpenAISettings = () => {
from your settings.
</Trans>
</p>
</div>
<h3 className="text-2xl font-bold leading-relaxed tracking-tight">{t`Ollama Integration`}</h3>
<div className="prose prose-sm prose-zinc max-w-full dark:prose-invert">
<p>
<Trans>
You can integrate with Ollama simply by setting the API key to `sk-1234567890abcdef` and
the Base URL to your Ollama URL, i.e. `http://localhost:11434/v1`. You can also pick and
choose models and set the max tokens.
You can also integrate with Ollama simply by setting the API key to
`sk-1234567890abcdef` and the Base URL to your Ollama URL, i.e.
`http://localhost:11434/v1`. You can also pick and choose models and set the max tokens
as per your preference.
</Trans>
</p>
</div>
@ -118,7 +116,7 @@ export const OpenAISettings = () => {
control={form.control}
render={({ field }) => (
<FormItem>
<FormLabel>{t`OpenAI / Ollama API Key`}</FormLabel>
<FormLabel>{t`OpenAI/Ollama API Key`}</FormLabel>
<FormControl>
<Input type="password" placeholder="sk-..." {...field} />
</FormControl>
@ -172,12 +170,7 @@ export const OpenAISettings = () => {
</FormItem>
)}
/>
<div
className={cn(
"flex items-center space-x-2 self-end sm:col-start-2",
!!form.formState.errors.apiKey && "self-center",
)}
>
<div className="flex items-center space-x-2 self-end sm:col-start-2">
<Button type="submit" disabled={!form.formState.isValid}>
{isEnabled && <FloppyDisk className="mr-2" />}
{isEnabled ? t`Saved` : t`Save Locally`}