Proper doy stylization in name links

2 files changed, 39 insertions, 16 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
diff --git a/src/pages/index.astro b/src/pages/index.astro
index d4dde3d..9e1645e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -107,13 +107,19 @@ const description =
 				>
 					{
 						members.map((name) => (
-							<li class="border border-gray-100 rounded-lg p-4 hover:bg-gray-50 hover:border-gray-200 transition-all duration-200">
-								<div class="text-lg font-medium mb-1">
-									<NameLink name={name} size="large" />
-								</div>
-								<div class="text-gray-600 text-sm font-light">
-									{name.data.title}
-								</div>
+							<li>
+								<a 
+									href={name.data.url || `https://${name.data.domain}`}
+									class="block border border-gray-100 rounded-lg p-4 hover:bg-gray-50 hover:border-gray-200 transition-all duration-200"
+									rel={name.data.candidate ? "nofollow" : undefined}
+								>
+									<div class="text-lg font-medium mb-1">
+										<NameLink name={name} size="large" showAsLink={false} />
+									</div>
+									<div class="text-gray-600 text-sm font-light">
+										{name.data.title}
+									</div>
+								</a>
 							</li>
 						))
 					}