feat(templates): redesign and add back in the original templates from v3

AmruthPillai · Nov 26, 2023 · 446c5db · 446c5db
1 parent 765bf71
commit 446c5db
Show file tree

Hide file tree

Showing 30 changed files with 2,813 additions and 411 deletions.
diff --git a/apps/artboard/src/components/page.tsx b/apps/artboard/src/components/page.tsx
@@ -23,7 +23,6 @@ export const Page = ({ mode = "preview", pageNumber, children }: Props) => {
       className={cn("relative bg-white", mode === "builder" && "shadow-2xl")}
       style={{
         fontFamily,
-        padding: page.margin,
         width: `${pageSizeMap[page.format].width * MM_TO_PX}px`,
         minHeight: `${pageSizeMap[page.format].height * MM_TO_PX}px`,
       }}

diff --git a/apps/artboard/src/pages/artboard.tsx b/apps/artboard/src/pages/artboard.tsx
@@ -32,6 +32,7 @@ export const ArtboardPage = () => {
     document.documentElement.style.setProperty("font-size", `${metadata.typography.font.size}px`);
     document.documentElement.style.setProperty("line-height", `${metadata.typography.lineHeight}`);
 
+    document.documentElement.style.setProperty("--margin", `${metadata.page.margin}px`);
     document.documentElement.style.setProperty("--font-size", `${metadata.typography.font.size}px`);
     document.documentElement.style.setProperty(
       "--line-height",

diff --git a/apps/artboard/src/templates/azurill.tsx b/apps/artboard/src/templates/azurill.tsx
@@ -486,7 +486,7 @@ export const Azurill = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-3">
+    <div className="p-custom space-y-3">
       {isFirstPage && <Header />}
 
       <div className="grid grid-cols-3 gap-x-4">

diff --git a/apps/artboard/src/templates/bronzor.tsx b/apps/artboard/src/templates/bronzor.tsx
@@ -497,7 +497,7 @@ export const Bronzor = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
+    <div className="p-custom space-y-4">
       {isFirstPage && <Header />}
 
       <div className="space-y-4">

diff --git a/apps/artboard/src/templates/chikorita.tsx b/apps/artboard/src/templates/chikorita.tsx
@@ -29,47 +29,45 @@ const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
 
   return (
-    <div className="grid grid-cols-3">
-      <div className="col-span-2 flex items-center gap-x-4">
-        <Picture />
-
-        <div className="space-y-2">
-          <div>
-            <div className="text-2xl font-bold">{basics.name}</div>
-            <div className="text-base">{basics.headline}</div>
-          </div>
+    <div className="flex items-center space-x-4">
+      <Picture />
 
-          <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
-            {basics.location && (
-              <div className="flex items-center gap-x-1.5">
-                <i className="ph ph-bold ph-map-pin text-primary" />
-                <div>{basics.location}</div>
-              </div>
-            )}
-            {basics.phone && (
-              <div className="flex items-center gap-x-1.5">
-                <i className="ph ph-bold ph-phone text-primary" />
-                <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
-                  {basics.phone}
-                </a>
-              </div>
-            )}
-            {basics.email && (
-              <div className="flex items-center gap-x-1.5">
-                <i className="ph ph-bold ph-at text-primary" />
-                <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
-                  {basics.email}
-                </a>
-              </div>
-            )}
-            <Link url={basics.url} />
-            {basics.customFields.map((item) => (
-              <div key={item.id} className="flex items-center gap-x-1.5">
-                <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
-              </div>
-            ))}
-          </div>
+      <div className="space-y-2">
+        <div>
+          <div className="text-2xl font-bold">{basics.name}</div>
+          <div className="text-base">{basics.headline}</div>
+        </div>
+
+        <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
+          {basics.location && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-map-pin text-primary" />
+              <div>{basics.location}</div>
+            </div>
+          )}
+          {basics.phone && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-phone text-primary" />
+              <a href={`tel:${basics.phone}`} target="_blank" rel="noreferrer">
+                {basics.phone}
+              </a>
+            </div>
+          )}
+          {basics.email && (
+            <div className="flex items-center gap-x-1.5">
+              <i className="ph ph-bold ph-at text-primary" />
+              <a href={`mailto:${basics.email}`} target="_blank" rel="noreferrer">
+                {basics.email}
+              </a>
+            </div>
+          )}
+          <Link url={basics.url} />
+          {basics.customFields.map((item) => (
+            <div key={item.id} className="flex items-center gap-x-1.5">
+              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            </div>
+          ))}
         </div>
       </div>
     </div>
@@ -497,35 +495,23 @@ const mapSectionToComponent = (section: SectionKey) => {
 };
 
 export const Chikorita = ({ columns, isFirstPage = false }: TemplateProps) => {
-  const margin = useArtboardStore((state) => state.resume.metadata.page.margin);
   const [main, sidebar] = columns;
 
   return (
-    <>
-      <div className="space-y-4">
+    <div className="grid h-full grid-cols-3">
+      <div className="main p-custom group col-span-2 space-y-4">
         {isFirstPage && <Header />}
 
-        <div className="relative z-10 grid grid-cols-3 space-x-8">
-          <div className="main group col-span-2 space-y-4">
-            {main.map((section) => (
-              <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-            ))}
-          </div>
-
-          <div className="sidebar group space-y-4 text-background">
-            {sidebar.map((section) => (
-              <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
-            ))}
-          </div>
-        </div>
+        {main.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
       </div>
 
-      <div
-        style={{ columnGap: margin }}
-        className="pointer-events-none absolute inset-0 grid grid-cols-3"
-      >
-        <div className="col-start-3 bg-primary" />
+      <div className="sidebar p-custom group h-full space-y-4 bg-primary text-background">
+        {sidebar.map((section) => (
+          <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
+        ))}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/apps/artboard/src/templates/ditto.tsx b/apps/artboard/src/templates/ditto.tsx
@@ -29,16 +29,16 @@ const Header = () => {
   const basics = useArtboardStore((state) => state.resume.basics);
 
   return (
-    <div className="relative z-20 grid grid-cols-3 space-x-4">
-      <div className="mx-auto">
-        <Picture />
-      </div>
+    <div className="p-custom relative grid grid-cols-3 space-x-4 pb-0">
+      <Picture className="mx-auto" />
 
-      <div className="col-span-2 space-y-0.5 text-background">
-        <h2 className="min-h-[30px] text-4xl font-bold">{basics.name}</h2>
-        <p className="min-h-[24px]">{basics.headline}</p>
+      <div className="relative z-10 col-span-2 text-background">
+        <div className="space-y-0.5">
+          <h2 className="text-3xl font-bold">{basics.name}</h2>
+          <p>{basics.headline}</p>
+        </div>
 
-        <div className="text-text !mt-10">
+        <div className="text-text col-span-2 col-start-2 mt-10">
           <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-sm">
             {basics.location && (
               <>
@@ -524,19 +524,22 @@ export const Ditto = ({ columns, isFirstPage = false }: TemplateProps) => {
   const [main, sidebar] = columns;
 
   return (
-    <div className="space-y-4">
-      {isFirstPage && <div className="absolute inset-x-0 top-0 z-10 h-32 bg-primary" />}
-
-      {isFirstPage && <Header />}
+    <div>
+      {isFirstPage && (
+        <div className="relative">
+          <Header />
+          <div className="absolute inset-x-0 top-0 h-[85px] w-full bg-primary" />
+        </div>
+      )}
 
-      <div className="grid grid-cols-3 space-x-4">
-        <div className="sidebar group space-y-4">
+      <div className="grid grid-cols-3">
+        <div className="sidebar p-custom group space-y-4">
           {sidebar.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}
         </div>
 
-        <div className="main group col-span-2 space-y-4">
+        <div className="main p-custom group col-span-2 space-y-4">
           {main.map((section) => (
             <Fragment key={section}>{mapSectionToComponent(section)}</Fragment>
           ))}