Proper doy stylization in name links

1 files changed, 26 insertions, 9 deletions

diff --git a/src/components/NameLink.astro b/src/components/NameLink.astro
index 35f2916..976baa4 100644
--- a/src/components/NameLink.astro
+++ b/src/components/NameLink.astro
@@ -9,12 +9,15 @@ interface Props {
     };
   };
   size?: 'large' | 'small';
+  showAsLink?: boolean;
 }
 
-const { name, size = 'large' } = Astro.props;
+const { name, size = 'large', showAsLink = true } = Astro.props;
 const nameParts = name.data.name.toLowerCase().split(" ");
 const domain = name.data.domain.replace(".", "");
 const url = name.data.url || `https://${name.data.domain}`;
+const domainExtension = name.data.domain.split('.')[1];
+const domainBase = name.data.domain.split('.')[0];
 
 const sizeClasses = {
   large: 'text-2xl',
@@ -27,16 +30,30 @@ const sizeClasses = {
     <>
       {index > 0 && " "}
       {part === domain ? (
-        <a 
-          href={url} 
-          class="text-blue-600 hover:text-blue-800 hover:underline"
-          rel={name.data.candidate ? "nofollow" : undefined}
-        >
-          {name.data.domain}
-        </a>
+        showAsLink ? (
+          <a 
+            href={url} 
+            class="text-blue-600 hover:text-blue-800 hover:underline domain-link"
+            rel={name.data.candidate ? "nofollow" : undefined}
+            data-extension={domainExtension}
+          >
+            <span class="domain-base">{domainBase}</span><span class="domain-extension">{domainExtension}</span>
+          </a>
+        ) : (
+          <span class="text-blue-600 domain-link" data-extension={domainExtension}>
+            <span class="domain-base">{domainBase}</span><span class="domain-extension">{domainExtension}</span>
+          </span>
+        )
       ) : (
         <span>{part}</span>
       )}
     </>
   ))}
-</span> 
\ No newline at end of file
+</span>
+
+<style>
+  .domain-base::after {
+    content: ".";
+    opacity: 0.7;
+  }
+</style> 
\ No newline at end of file