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

Merge branch 'main' into feat/separate-links

Browse Source
This commit is contained in:
Amruth Pillai
2024-05-20 17:01:16 +02:00
parent 6f2e75f22b 73b29f78ab
commit 6dcbe78730
318 changed files with 36303 additions and 27864 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/artboard/.eslintrc.json
View File

@ -12,6 +12,18 @@
}
},
"rules": {
// react
"react/no-unescaped-entities": "off",
"react/jsx-sort-props": [
"error",
{
"reservedFirst": true,
"callbacksLast": true,
"shorthandFirst": true,
"noSortAlphabetically": true
}
],
// react-hooks
"react-hooks/exhaustive-deps": "off",

4
apps/artboard/postcss.config.js
View File

@ -1,9 +1,9 @@
const { join } = require("path");
const path = require("node:path");
module.exports = {
plugins: {
tailwindcss: {
config: join(__dirname, "tailwind.config.js"),
config: path.join(__dirname, "tailwind.config.js"),
},
autoprefixer: {},
},

2
apps/artboard/src/components/page.tsx
View File

@ -20,7 +20,7 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
return (
<div
data-page={pageNumber}
className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
className={cn("relative bg-background text-foreground", mode === "builder" && "shadow-2xl")}
style={{
fontFamily,
width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,

3
apps/artboard/src/main.tsx
View File

@ -4,7 +4,8 @@ import { RouterProvider } from "react-router-dom";
import { router } from "./router";
const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const root = ReactDOM.createRoot(document.querySelector("#root")!);
root.render(
<StrictMode>

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

@ -39,20 +39,20 @@ export const ArtboardPage = () => {
`${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}`,
);
document.documentElement.style.setProperty("--color-foreground", metadata.theme.text);
document.documentElement.style.setProperty("--color-primary", metadata.theme.primary);
document.documentElement.style.setProperty("--color-background", metadata.theme.background);
}, [metadata]);
// Typography Options
useEffect(() => {
document.querySelectorAll(`[data-page]`).forEach((el) => {
// eslint-disable-next-line unicorn/prefer-spread
const elements = Array.from(document.querySelectorAll(`[data-page]`));
for (const el of elements) {
el.classList.toggle("hide-icons", metadata.typography.hideIcons);
el.classList.toggle("underline-links", metadata.typography.underlineLinks);
});
}
}, [metadata]);
return <Outlet />;

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

@ -38,11 +38,11 @@ export const BuilderLayout = () => {
return (
<TransformWrapper
ref={transformRef}
centerOnInit
maxScale={2}
minScale={0.4}
initialScale={0.8}
ref={transformRef}
limitToBounds={false}
>
<TransformComponent
@ -56,8 +56,8 @@ export const BuilderLayout = () => {
<AnimatePresence>
{layout.map((columns, pageIndex) => (
<motion.div
layout
key={pageIndex}
layout
initial={{ opacity: 0, x: -200, y: 0 }}
animate={{ opacity: 1, x: 0, transition: { delay: pageIndex * 0.3 } }}
exit={{ opacity: 0, x: -200 }}

6
apps/artboard/src/providers/index.tsx
View File

@ -20,7 +20,10 @@ export const Providers = () => {
};
const resumeData = window.localStorage.getItem("resume");
if (resumeData) return setResume(JSON.parse(resumeData));
if (resumeData) {
setResume(JSON.parse(resumeData));
return;
}
window.addEventListener("message", handleMessage);
@ -34,6 +37,7 @@ export const Providers = () => {
// setResume(sampleResume);
// }, [setResume]);
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (!resume) return null;
return <Outlet />;

4
apps/artboard/src/store/artboard.ts
View File

@ -8,5 +8,7 @@ export type ArtboardStore = {
export const useArtboardStore = create<ArtboardStore>()((set) => ({
resume: null as unknown as ResumeData,
setResume: (resume) => set({ resume }),
setResume: (resume) => {
set({ resume });
},
}));

2
apps/artboard/src/styles/main.css
View File

@ -21,5 +21,5 @@
}
.wysiwyg {
@apply prose max-w-none text-current prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
@apply prose max-w-none prose-foreground prose-headings:mt-0 prose-headings:mb-2 prose-p:mt-0 prose-p:mb-2 prose-ul:mt-0 prose-ul:mb-2 prose-li:mt-0 prose-li:mb-2 prose-ol:mt-0 prose-ol:mb-2 prose-img:mt-0 prose-img:mb-2 prose-hr:mt-0 prose-hr:mb-2 prose-p:leading-normal prose-li:leading-normal prose-a:break-all;
}

52
apps/artboard/src/templates/azurill.tsx
View File

@ -93,9 +93,9 @@ const Summary = () => {
<div className="absolute left-[-4.5px] top-[8px] hidden size-[8px] rounded-full bg-primary group-[.main]:block" />
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</main>
</section>
@ -134,7 +134,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -189,7 +189,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -227,7 +227,7 @@ const Section = <T,>({
<div>{children?.(item as T)}</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -272,7 +272,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -480,36 +480,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

52
apps/artboard/src/templates/bronzor.tsx
View File

@ -85,9 +85,9 @@ const Summary = () => {
</div>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg col-span-4"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -126,7 +126,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -181,7 +181,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid grid-cols-5 border-t pt-2.5">
@ -209,7 +209,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -250,7 +250,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -492,36 +492,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

54
apps/artboard/src/templates/chikorita.tsx
View File

@ -84,9 +84,9 @@ const Summary = () => {
<h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -128,7 +128,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -183,7 +183,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -209,7 +209,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -295,7 +295,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -493,36 +493,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};
@ -530,7 +544,7 @@ export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
const [main, sidebar] = columns;
return (
<div className="grid h-full grid-cols-3">
<div className="grid min-h-[inherit] grid-cols-3">
<div className="main p-custom group col-span-2 space-y-4">
{isFirstPage && <Header />}

56
apps/artboard/src/templates/ditto.tsx
View File

@ -38,7 +38,7 @@ const Header = () => {
<p>{basics.headline}</p>
</div>
<div className="text-text col-span-2 col-start-2 mt-10">
<div className="col-span-2 col-start-2 mt-10 text-foreground">
<div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
{basics.location && (
<>
@ -104,9 +104,9 @@ const Summary = () => {
<h4 className="mb-2 text-base font-bold">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -145,7 +145,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -200,7 +200,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -229,11 +229,11 @@ const Section = <T,>({
{url !== undefined && section.separateLinks && <Link url={url} />}
</div>
<div className="absolute inset-y-0 -left-px border-l-[4px] border-primary group-[.sidebar]:hidden" />
<div className="absolute inset-y-0 -left-px border-l-4 border-primary group-[.sidebar]:hidden" />
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -276,7 +276,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -518,36 +518,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

49
apps/artboard/src/templates/gengar.tsx
View File

@ -82,9 +82,9 @@ const Summary = () => {
return (
<section id={section.id}>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -123,7 +123,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-background" />)}
</div>
@ -178,7 +178,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -204,7 +204,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -245,7 +245,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -487,34 +487,47 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

52
apps/artboard/src/templates/glalie.tsx
View File

@ -84,9 +84,9 @@ const Summary = () => {
<h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -131,7 +131,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary group-[.sidebar]:text-primary" />)}
</div>
@ -186,7 +186,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -214,7 +214,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -300,7 +300,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -497,36 +497,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

39
apps/artboard/src/templates/index.tsx
View File

@ -15,31 +15,44 @@ import { Rhyhorn } from "./rhyhorn";
export const getTemplate = (template: Template) => {
switch (template) {
case "azurill":
case "azurill": {
return Azurill;
case "bronzor":
}
case "bronzor": {
return Bronzor;
case "chikorita":
}
case "chikorita": {
return Chikorita;
case "ditto":
}
case "ditto": {
return Ditto;
case "gengar":
}
case "gengar": {
return Gengar;
case "glalie":
}
case "glalie": {
return Glalie;
case "kakuna":
}
case "kakuna": {
return Kakuna;
case "leafish":
}
case "leafish": {
return Leafish;
case "nosepass":
}
case "nosepass": {
return Nosepass;
case "onyx":
}
case "onyx": {
return Onyx;
case "pikachu":
}
case "pikachu": {
return Pikachu;
case "rhyhorn":
}
case "rhyhorn": {
return Rhyhorn;
default:
}
default: {
return Onyx;
}
}
};

47
apps/artboard/src/templates/kakuna.tsx
View File

@ -110,9 +110,9 @@ const Summary = () => {
</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -151,7 +151,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -206,7 +206,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -231,7 +231,7 @@ const Section = <T,>({
<div>{children?.(item as T)}</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -448,34 +448,47 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "summary":
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

44
apps/artboard/src/templates/leafish.tsx
View File

@ -44,9 +44,9 @@ const Header = () => {
</div>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</div>
@ -148,7 +148,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -203,7 +203,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -228,7 +228,7 @@ const Section = <T,>({
<div>{children?.(item as T)}</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -445,32 +445,44 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "experience":
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

56
apps/artboard/src/templates/nosepass.tsx
View File

@ -98,9 +98,9 @@ const Summary = () => {
</div>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</div>
</section>
@ -127,7 +127,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && (icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -181,7 +181,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className={cn("grid", dateKey !== undefined && "gap-y-4")}>
@ -218,7 +218,7 @@ const Section = <T,>({
{url !== undefined && section.separateLinks && <Link url={url} />}
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{keywords !== undefined && keywords.length > 0 && (
@ -253,7 +253,7 @@ const Section = <T,>({
{url !== undefined && section.separateLinks && <Link url={url} />}
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{keywords !== undefined && keywords.length > 0 && (
@ -294,7 +294,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -495,36 +495,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};
@ -536,7 +550,7 @@ export const Nosepass = ({ columns, isFirstPage = false }: TemplateProps) => {
return (
<div className="p-custom space-y-6">
<div className="flex items-center justify-between">
<img alt="Europass Logo" className="h-[42px]" src="https://i.imgur.com/eRK005p.png" />
<img alt="Europass Logo" className="h-[42px]" src="/assets/europass.png" />
<p className="font-medium text-primary">Curriculum Vitae</p>

47
apps/artboard/src/templates/onyx.tsx
View File

@ -113,9 +113,9 @@ const Summary = () => {
<h4 className="font-bold text-primary">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -154,7 +154,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -209,7 +209,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -235,7 +235,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -486,34 +486,47 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "summary":
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

52
apps/artboard/src/templates/pikachu.tsx
View File

@ -105,9 +105,9 @@ const Summary = () => {
<h4 className="mb-2 border-b border-primary text-base font-bold">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -154,7 +154,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary group-[.summary]:text-background" />)}
</div>
@ -209,7 +209,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -235,7 +235,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -276,7 +276,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -518,36 +518,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

52
apps/artboard/src/templates/rhyhorn.tsx
View File

@ -85,9 +85,9 @@ const Summary = () => {
<h4 className="mb-2 border-b pb-0.5 text-sm font-bold">{section.name}</h4>
<div
dangerouslySetInnerHTML={{ __html: section.content }}
className="wysiwyg"
style={{ columns: section.columns }}
dangerouslySetInnerHTML={{ __html: section.content }}
/>
</section>
);
@ -126,7 +126,7 @@ const Link = ({ url, icon, iconOnRight, label, className }: LinkProps) => {
rel="noreferrer noopener nofollow"
className={cn("inline-block", className)}
>
{label || url.label || url.href}
{label ?? (url.label || url.href)}
</a>
{iconOnRight && ( icon ?? <i className="ph ph-bold ph-link text-primary" />)}
</div>
@ -181,7 +181,7 @@ const Section = <T,>({
summaryKey,
keywordsKey,
}: SectionProps<T>) => {
if (!section.visible || !section.items.length) return null;
if (!section.visible || section.items.length === 0) return null;
return (
<section id={section.id} className="grid">
@ -207,7 +207,7 @@ const Section = <T,>({
</div>
{summary !== undefined && !isEmptyString(summary) && (
<div className="wysiwyg" dangerouslySetInnerHTML={{ __html: summary }} />
<div dangerouslySetInnerHTML={{ __html: summary }} className="wysiwyg" />
)}
{level !== undefined && level > 0 && <Rating level={level} />}
@ -248,7 +248,7 @@ const Profiles = () => {
) : (
<p>{item.username}</p>
)}
<p className="text-sm">{item.network}</p>
{!item.icon && <p className="text-sm">{item.network}</p>}
</div>
)}
</Section>
@ -490,36 +490,50 @@ const Custom = ({ id }: { id: string }) => {
const mapSectionToComponent = (section: SectionKey) => {
switch (section) {
case "profiles":
case "profiles": {
return <Profiles />;
case "summary":
}
case "summary": {
return <Summary />;
case "experience":
}
case "experience": {
return <Experience />;
case "education":
}
case "education": {
return <Education />;
case "awards":
}
case "awards": {
return <Awards />;
case "certifications":
}
case "certifications": {
return <Certifications />;
case "skills":
}
case "skills": {
return <Skills />;
case "interests":
}
case "interests": {
return <Interests />;
case "publications":
}
case "publications": {
return <Publications />;
case "volunteer":
}
case "volunteer": {
return <Volunteer />;
case "languages":
}
case "languages": {
return <Languages />;
case "projects":
}
case "projects": {
return <Projects />;
case "references":
}
case "references": {
return <References />;
default:
}
default: {
if (section.startsWith("custom.")) return <Custom id={section.split(".")[1]} />;
return null;
}
}
};

5
apps/artboard/src/types/template.ts
View File

@ -4,8 +4,3 @@ export type TemplateProps = {
columns: SectionKey[][];
isFirstPage?: boolean;
};
export type BaseProps = {
children?: React.ReactNode;
className?: string;
};

24
apps/artboard/tailwind.config.js
View File

@ -11,7 +11,7 @@ module.exports = {
theme: {
extend: {
colors: {
text: "var(--color-text)",
foreground: "var(--color-foreground)",
primary: "var(--color-primary)",
background: "var(--color-background)",
},
@ -23,6 +23,28 @@ module.exports = {
loose: "calc(var(--line-height) + 0.5)",
},
spacing: { custom: "var(--margin)" },
typography: () => ({
foreground: {
css: {
"--tw-prose-body": "var(--color-foreground)",
"--tw-prose-headings": "var(--color-foreground)",
"--tw-prose-lead": "var(--color-foreground)",
"--tw-prose-links": "var(--color-foreground)",
"--tw-prose-bold": "var(--color-foreground)",
"--tw-prose-counters": "var(--color-foreground)",
"--tw-prose-bullets": "var(--color-foreground)",
"--tw-prose-hr": "var(--color-foreground)",
"--tw-prose-quotes": "var(--color-foreground)",
"--tw-prose-quote-borders": "var(--color-foreground)",
"--tw-prose-captions": "var(--color-foreground)",
"--tw-prose-code": "var(--color-foreground)",
"--tw-prose-pre-code": "var(--color-foreground)",
"--tw-prose-pre-bg": "var(--color-background)",
"--tw-prose-th-borders": "var(--color-foreground)",
"--tw-prose-td-borders": "var(--color-foreground)",
},
},
}),
},
},
plugins: [require("@tailwindcss/typography")],

7
apps/artboard/vite.config.ts
View File

@ -2,7 +2,7 @@
import { nxViteTsPaths } from "@nx/vite/plugins/nx-tsconfig-paths.plugin";
import react from "@vitejs/plugin-react-swc";
import { defineConfig, searchForWorkspaceRoot, splitVendorChunkPlugin } from "vite";
import { defineConfig, searchForWorkspaceRoot } from "vite";
export default defineConfig({
base: "/artboard/",
@ -11,15 +11,16 @@ export default defineConfig({
build: {
sourcemap: true,
emptyOutDir: true,
},
server: {
host: true,
port: +(process.env.__DEV__ARTBOARD_PORT ?? 6173),
port: 6173,
fs: { allow: [searchForWorkspaceRoot(process.cwd())] },
},
plugins: [react(), nxViteTsPaths(), splitVendorChunkPlugin()],
plugins: [react(), nxViteTsPaths()],
resolve: {
alias: {