Merge pull request #1999 from StijnGroenen/feature/custom-field-url

feat(templates): added url support for custom fields
2025-12-06 00:20:04 +01:00 · 2024-07-22 12:04:36 +02:00 · 2024-07-22 12:04:36 +02:00 · df63f4b8a7
commit df63f4b8a7
parent 767573ce6d 29fc7c419b
12 changed files with 87 additions and 13 deletions
--- a/apps/artboard/src/templates/azurill.tsx
+++ b/apps/artboard/src/templates/azurill.tsx
@ -64,7 +64,13 @@ const Header = () => {
        {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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
          </div>
        ))}
      </div>
--- a/apps/artboard/src/templates/bronzor.tsx
+++ b/apps/artboard/src/templates/bronzor.tsx
@ -64,7 +64,13 @@ const Header = () => {
        {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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
          </div>
        ))}
      </div>
--- a/apps/artboard/src/templates/chikorita.tsx
+++ b/apps/artboard/src/templates/chikorita.tsx
@ -65,7 +65,13 @@ const Header = () => {
          {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          ))}
        </div>
--- a/apps/artboard/src/templates/ditto.tsx
+++ b/apps/artboard/src/templates/ditto.tsx
@ -82,7 +82,13 @@ const Header = () => {
              <Fragment key={item.id}>
                <div 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>
+                  {isUrl(item.value) ? (
+                    <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                      {item.name || item.value}
+                    </a>
+                  ) : (
+                    <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                  )}
                </div>
                <div className="bg-text size-1 rounded-full last:hidden" />
              </Fragment>
--- a/apps/artboard/src/templates/gengar.tsx
+++ b/apps/artboard/src/templates/gengar.tsx
@ -65,7 +65,13 @@ const Header = () => {
          <Fragment key={item.id}>
            <div className="flex items-center gap-x-1.5">
              <i className={cn(`ph ph-bold ph-${item.icon}`)} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          </Fragment>
        ))}
--- a/apps/artboard/src/templates/glalie.tsx
+++ b/apps/artboard/src/templates/glalie.tsx
@ -65,7 +65,13 @@ const Header = () => {
          {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          ))}
        </div>
--- a/apps/artboard/src/templates/kakuna.tsx
+++ b/apps/artboard/src/templates/kakuna.tsx
@ -65,7 +65,13 @@ const Header = () => {
        {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>
+            {isUrl(item.value) ? (
+              <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                {item.name || item.value}
+              </a>
+            ) : (
+              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+            )}
          </div>
        ))}
      </div>
--- a/apps/artboard/src/templates/leafish.tsx
+++ b/apps/artboard/src/templates/leafish.tsx
@ -81,7 +81,13 @@ const Header = () => {
          {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          ))}
        </div>
--- a/apps/artboard/src/templates/nosepass.tsx
+++ b/apps/artboard/src/templates/nosepass.tsx
@ -70,8 +70,16 @@ const Header = () => {
          {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 className="text-primary">{item.name}</span>
-              <span>{item.value}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <>
+                  <span className="text-primary">{item.name}</span>
+                  <span>{item.value}</span>
+                </>
+              )}
            </div>
          ))}
        </div>
--- a/apps/artboard/src/templates/onyx.tsx
+++ b/apps/artboard/src/templates/onyx.tsx
@ -66,7 +66,13 @@ const Header = () => {
          {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>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          ))}
        </div>
--- a/apps/artboard/src/templates/pikachu.tsx
+++ b/apps/artboard/src/templates/pikachu.tsx
@ -84,7 +84,13 @@ const Header = () => {
            <Fragment key={item.id}>
              <div className="flex items-center gap-x-1.5">
                <i className={cn(`ph ph-bold ph-${item.icon}`)} />
-                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                {isUrl(item.value) ? (
+                  <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                    {item.name || item.value}
+                  </a>
+                ) : (
+                  <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+                )}
              </div>
              <div className="size-1 rounded-full bg-background last:hidden" />
            </Fragment>
--- a/apps/artboard/src/templates/rhyhorn.tsx
+++ b/apps/artboard/src/templates/rhyhorn.tsx
@ -66,7 +66,13 @@ const Header = () => {
              className="flex items-center gap-x-1.5 border-r pr-2 last:border-r-0 last:pr-0"
            >
              <i className={cn(`ph ph-bold ph-${item.icon}`, "text-primary")} />
-              <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              {isUrl(item.value) ? (
+                <a href={item.value} target="_blank" rel="noreferrer noopener nofollow">
+                  {item.name || item.value}
+                </a>
+              ) : (
+                <span>{[item.name, item.value].filter(Boolean).join(": ")}</span>
+              )}
            </div>
          ))}
        </div>