Enhance UI and Configuration:

- Added missing `type="button"` attributes to various toolbar buttons in the rich-input component for better accessibility. - Updated Gengar template to ensure the summary section is only displayed when populated. - Changed boolean values in Docker Compose files from unquoted to quoted strings for consistency and to prevent potential parsing issues.
AmruthPillai · Jan 12, 2025 · d1a5a41 · d1a5a41
1 parent d0a0768
commit d1a5a41
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 42 deletions.
diff --git a/apps/artboard/src/templates/gengar.tsx b/apps/artboard/src/templates/gengar.tsx
@@ -84,6 +84,7 @@ const Header = () => {
 const Summary = () => {
   const section = useArtboardStore((state) => state.resume.sections.summary);
   const primaryColor = useArtboardStore((state) => state.resume.metadata.theme.primary);
+
   if (!section.visible || isEmptyString(section.content)) return null;
 
   return (

diff --git a/libs/ui/src/components/rich-input.tsx b/libs/ui/src/components/rich-input.tsx
@@ -71,12 +71,15 @@ const InsertImageForm = ({ onInsert }: InsertImageProps) => {
 
   return (
     <Form {...form}>
-      <form className="space-y-3" 
-      onSubmit={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        form.handleSubmit(onSubmit)();
-      }}>
+      <form
+        className="space-y-3"
+        onSubmit={async (event) => {
+          event.stopPropagation();
+          event.preventDefault();
+
+          await form.handleSubmit(onSubmit)();
+        }}
+      >
         <p className="prose prose-sm prose-zinc dark:prose-invert">
           Insert an image from an external URL and use it on your resume.
         </p>
@@ -144,6 +147,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Bold">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("bold")}
           disabled={!editor.can().chain().toggleBold().run()}
           onPressedChange={() => editor.chain().focus().toggleBold().run()}
@@ -155,6 +159,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Italic">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("italic")}
           disabled={!editor.can().chain().focus().toggleItalic().run()}
           onPressedChange={() => editor.chain().focus().toggleItalic().run()}
@@ -166,6 +171,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Strikethrough">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("strike")}
           disabled={!editor.can().chain().focus().toggleStrike().run()}
           onPressedChange={() => editor.chain().focus().toggleStrike().run()}
@@ -177,6 +183,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Underline">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("underline")}
           disabled={!editor.can().chain().focus().toggleUnderline().run()}
           onPressedChange={() => editor.chain().focus().toggleUnderline().run()}
@@ -188,6 +195,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Highlight">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("highlight")}
           disabled={!editor.can().chain().focus().toggleHighlight().run()}
           onPressedChange={() => editor.chain().focus().toggleHighlight().run()}
@@ -205,6 +213,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Inline Code">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("code")}
           disabled={!editor.can().chain().focus().toggleCode().run()}
           onPressedChange={() => editor.chain().focus().toggleCode().run()}
@@ -216,6 +225,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Code Block">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("codeBlock")}
           disabled={!editor.can().chain().focus().toggleCodeBlock().run()}
           onPressedChange={() => editor.chain().focus().toggleCodeBlock().run()}
@@ -227,6 +237,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Heading 1">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("heading", { level: 1 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 1 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
@@ -238,6 +249,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Heading 2">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("heading", { level: 2 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 2 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
@@ -249,6 +261,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Heading 3">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("heading", { level: 3 })}
           disabled={!editor.can().chain().focus().toggleHeading({ level: 3 }).run()}
           onPressedChange={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
@@ -260,6 +273,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Paragraph">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("paragraph")}
           onPressedChange={() => editor.chain().focus().setParagraph().run()}
         >
@@ -270,6 +284,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Align Left">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive({ textAlign: "left" })}
           disabled={!editor.can().chain().focus().setTextAlign("left").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("left").run()}
@@ -281,6 +296,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Align Center">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive({ textAlign: "center" })}
           disabled={!editor.can().chain().focus().setTextAlign("center").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("center").run()}
@@ -292,6 +308,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Align Right">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive({ textAlign: "right" })}
           disabled={!editor.can().chain().focus().setTextAlign("right").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("right").run()}
@@ -303,6 +320,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Align Justify">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive({ textAlign: "justify" })}
           disabled={!editor.can().chain().focus().setTextAlign("justify").run()}
           onPressedChange={() => editor.chain().focus().setTextAlign("justify").run()}
@@ -314,6 +332,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Bullet List">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("bulletList")}
           disabled={!editor.can().chain().focus().toggleBulletList().run()}
           onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
@@ -325,6 +344,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Numbered List">
         <Toggle
           size="sm"
+          type="button"
           pressed={editor.isActive("orderedList")}
           disabled={!editor.can().chain().focus().toggleOrderedList().run()}
           onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
@@ -336,6 +356,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Outdent">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
           disabled={!editor.can().chain().focus().liftListItem("listItem").run()}
@@ -348,6 +369,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Indent">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
           disabled={!editor.can().chain().focus().sinkListItem("listItem").run()}
@@ -360,7 +382,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Popover>
         <Tooltip content="Insert Image">
           <PopoverTrigger asChild>
-            <Button size="sm" variant="ghost" className="px-2">
+            <Button type="button" size="sm" variant="ghost" className="px-2">
               <ImageIcon />
             </Button>
           </PopoverTrigger>
@@ -373,9 +395,9 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Insert Break Line">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
-          type="button"
           disabled={!editor.can().chain().focus().setHardBreak().run()}
           onClick={() => editor.chain().focus().setHardBreak().run()}
         >
@@ -386,9 +408,9 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Insert Horizontal Rule">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
-          type="button"
           disabled={!editor.can().chain().focus().setHorizontalRule().run()}
           onClick={() => editor.chain().focus().setHorizontalRule().run()}
         >
@@ -399,6 +421,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Undo">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
           disabled={!editor.can().undo()}
@@ -411,6 +434,7 @@ const Toolbar = ({ editor }: { editor: Editor }) => {
       <Tooltip content="Redo">
         <Button
           size="sm"
+          type="button"
           variant="ghost"
           className="px-2"
           disabled={!editor.can().redo()}

diff --git a/tools/compose/development.yml b/tools/compose/development.yml
@@ -60,8 +60,8 @@ services:
       TIMEOUT: 10000
       CONCURRENT: 10
       TOKEN: ${CHROME_TOKEN:-chrome_token}
-      EXIT_ON_HEALTH_FAILURE: true
-      PRE_REQUEST_HEALTH_CHECK: true
+      EXIT_ON_HEALTH_FAILURE: "true"
+      PRE_REQUEST_HEALTH_CHECK: "true"
 
 volumes:
   minio_data:

diff --git a/tools/compose/nginx-proxy-manager.yml b/tools/compose/nginx-proxy-manager.yml
@@ -45,8 +45,8 @@ services:
       TIMEOUT: 10000
       CONCURRENT: 10
       TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: true
-      PRE_REQUEST_HEALTH_CHECK: true
+      EXIT_ON_HEALTH_FAILURE: "true"
+      PRE_REQUEST_HEALTH_CHECK: "true"
 
   app:
     image: amruthpillai/reactive-resume:latest
@@ -86,16 +86,16 @@ services:
       STORAGE_BUCKET: default
       STORAGE_ACCESS_KEY: minioadmin
       STORAGE_SECRET_KEY: minioadmin
-      STORAGE_USE_SSL: false
-      STORAGE_SKIP_BUCKET_CHECK: false
+      STORAGE_USE_SSL: "false"
+      STORAGE_SKIP_BUCKET_CHECK: "false"
 
       # -- Crowdin (Optional) --
       # CROWDIN_PROJECT_ID:
       # CROWDIN_PERSONAL_TOKEN:
 
       # -- Feature Flags (Optional) --
-      # DISABLE_SIGNUPS: false
-      # DISABLE_EMAIL_AUTH: false
+      # DISABLE_SIGNUPS: "false"
+      # DISABLE_EMAIL_AUTH: "false"
 
       # -- GitHub (Optional) --
       # GITHUB_CLIENT_ID: github_client_id
@@ -118,7 +118,7 @@ services:
       - nginx_data:/data
       - letsencrypt_data:/etc/letsencrypt
     environment:
-      DISABLE_IPV6: true
+      DISABLE_IPV6: "true"
 
 volumes:
   minio_data:

diff --git a/tools/compose/simple.yml b/tools/compose/simple.yml
@@ -42,8 +42,8 @@ services:
       TIMEOUT: 10000
       CONCURRENT: 10
       TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: 'true'
-      PRE_REQUEST_HEALTH_CHECK: 'true'
+      EXIT_ON_HEALTH_FAILURE: "true"
+      PRE_REQUEST_HEALTH_CHECK: "true"
 
   app:
     image: amruthpillai/reactive-resume:latest
@@ -85,16 +85,16 @@ services:
       STORAGE_BUCKET: default
       STORAGE_ACCESS_KEY: minioadmin
       STORAGE_SECRET_KEY: minioadmin
-      STORAGE_USE_SSL: 'false'
-      STORAGE_SKIP_BUCKET_CHECK: 'false'
+      STORAGE_USE_SSL: "false"
+      STORAGE_SKIP_BUCKET_CHECK: "false"
 
       # -- Crowdin (Optional) --
       # CROWDIN_PROJECT_ID:
       # CROWDIN_PERSONAL_TOKEN:
 
       # -- Email (Optional) --
-      # DISABLE_SIGNUPS: 'false'
-      # DISABLE_EMAIL_AUTH: 'false'
+      # DISABLE_SIGNUPS: "false"
+      # DISABLE_EMAIL_AUTH: "false"
 
       # -- GitHub (Optional) --
       # GITHUB_CLIENT_ID: github_client_id

diff --git a/tools/compose/swarm.yml b/tools/compose/swarm.yml
@@ -57,8 +57,8 @@ services:
       TIMEOUT: 10000
       CONCURRENT: 10
       TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: true
-      PRE_REQUEST_HEALTH_CHECK: true
+      EXIT_ON_HEALTH_FAILURE: "true"
+      PRE_REQUEST_HEALTH_CHECK: "true"
     deploy:
       replicas: 2
       restart_policy:
@@ -105,16 +105,16 @@ services:
       STORAGE_BUCKET: default
       STORAGE_ACCESS_KEY: minioadmin
       STORAGE_SECRET_KEY: minioadmin
-      STORAGE_USE_SSL: false
-      STORAGE_SKIP_BUCKET_CHECK: false
+      STORAGE_USE_SSL: "false"
+      STORAGE_SKIP_BUCKET_CHECK: "false"
 
       # -- Crowdin (Optional) --
       # CROWDIN_PROJECT_ID:
       # CROWDIN_PERSONAL_TOKEN:
 
       # -- Feature Flags (Optional) --
-      # DISABLE_SIGNUPS: false
-      # DISABLE_EMAIL_AUTH: false
+      # DISABLE_SIGNUPS: "false"
+      # DISABLE_EMAIL_AUTH: "false"
 
       # -- GitHub (Optional) --
       # GITHUB_CLIENT_ID: github_client_id

diff --git a/tools/compose/traefik-secure.yml b/tools/compose/traefik-secure.yml
@@ -47,8 +47,8 @@ services:
       TIMEOUT: 10000
       CONCURRENT: 10
       TOKEN: chrome_token
-      EXIT_ON_HEALTH_FAILURE: true
-      PRE_REQUEST_HEALTH_CHECK: true
+      EXIT_ON_HEALTH_FAILURE: "true"
+      PRE_REQUEST_HEALTH_CHECK: "true"
     labels:
       - traefik.enable=true
       - traefik.http.routers.printer.rule=Host(`printer.example.com`)
@@ -94,16 +94,16 @@ services:
       STORAGE_BUCKET: default
       STORAGE_ACCESS_KEY: minioadmin
       STORAGE_SECRET_KEY: minioadmin
-      STORAGE_USE_SSL: false
-      STORAGE_SKIP_BUCKET_CHECK: false
+      STORAGE_USE_SSL: "false"
+      STORAGE_SKIP_BUCKET_CHECK: "false"
 
       # -- Crowdin (Optional) --
       # CROWDIN_PROJECT_ID:
       # CROWDIN_PERSONAL_TOKEN:
 
       # -- Feature Flags (Optional) --
-      # DISABLE_SIGNUPS: false
-      # DISABLE_EMAIL_AUTH: false
+      # DISABLE_SIGNUPS: "false"
+      # DISABLE_EMAIL_AUTH: "false"
 
       # -- GitHub (Optional) --
       # GITHUB_CLIENT_ID: github_client_id