add a href to website field (#2181)

* add a href to websitefield

* make email field clickable

Author: lucaslyl

packages/experiments-realm/email.gts

@@ -69,6 +69,11 @@ export class EmailField extends StringField {
     <template>
       {{#if @model}}
         <EntityDisplayWithIcon @title={{@model}} @underline={{false}}>
+          <:title>
+            <a href='mailto:{{@model}}' rel='noopener noreferrer'>
+              {{@model}}
+            </a>
+          </:title>
           <:icon>
             <MailIcon class='icon' />
           </:icon>
@@ -78,6 +83,10 @@ export class EmailField extends StringField {
         .icon {
           color: var(--boxel-400);
         }
+        a:hover {
+          text-decoration: underline;
+          color: inherit;
+        }
       </style>
     </template>
   };

packages/experiments-realm/website.gts

@@ -18,17 +18,59 @@ export class WebsiteField extends UrlField {
 
   static atom = class Atom extends Component<typeof WebsiteField> {
     <template>
-      <EntityDisplayWithIcon @title={{domainWithPath @model}}>
+      <EntityDisplayWithIcon>
+        <:title>
+          {{! Display only domain and path, unlike URLField's full URL representation }}
+          {{! Custom atom implementation for handling URL interactions }}
+          {{#if @model}}
+            {{#if (isValidUrl @model)}}
+              <a href={{@model}} target='_blank' rel='noopener noreferrer'>
+                {{domainWithPath @model}}
+              </a>
+            {{else}}
+              Invalid URL
+            {{/if}}
+          {{/if}}
+        </:title>
         <:icon>
           <WorldWwwIcon />
         </:icon>
       </EntityDisplayWithIcon>
+      <style scoped>
+        a:hover {
+          text-decoration: underline;
+          color: inherit;
+        }
+      </style>
     </template>
   };
 
   static embedded = class Embedded extends Component<typeof WebsiteField> {
     <template>
-      {{domainWithPath @model}}
+      {{#if @model}}
+        {{#if (isValidUrl @model)}}
+          <a href={{@model}} target='_blank' rel='noopener noreferrer'>
+            {{domainWithPath @model}}
+          </a>
+        {{else}}
+          Invalid URL
+        {{/if}}
+      {{/if}}
+      <style scoped>
+        a:hover {
+          text-decoration: underline;
+          color: inherit;
+        }
+      </style>
     </template>
   };
 }
+
+function isValidUrl(urlString: string): boolean {
+  try {
+    new URL(urlString);
+    return true;
+  } catch (err) {
+    return false;
+  }
+}