Fix showAsLink

2 files changed, 62 insertions, 36 deletions

diff --git a/src/components/NameLink.astro b/src/components/NameLink.astro
index 976baa4..10a9a14 100644
--- a/src/components/NameLink.astro
+++ b/src/components/NameLink.astro
@@ -1,5 +1,5 @@
 ---
-interface Props {
+export interface Props {
   name: {
     data: {
       name: string;
@@ -8,47 +8,54 @@ interface Props {
       candidate?: boolean;
     };
   };
-  size?: 'large' | 'small';
+  size?: "large" | "small";
   showAsLink?: boolean;
 }
 
-const { name, size = 'large', showAsLink = true } = 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 domainExtension = name.data.domain.split(".")[1];
+const domainBase = name.data.domain.split(".")[0];
 
 const sizeClasses = {
-  large: 'text-2xl',
-  small: 'text-xl'
+  large: "text-2xl",
+  small: "text-xl",
 };
 ---
 
 <span class={`${sizeClasses[size]} break-words`}>
-  {nameParts.map((part, index) => (
-    <>
-      {index > 0 && " "}
-      {part === domain ? (
-        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>
+  {
+    nameParts.map((part, index) => (
+      <>
+        {index > 0 && " "}
+        {part === domain ? (
+          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 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>{part}</span>
+        )}
+      </>
+    ))
+  }
 </span>
 
 <style>
@@ -56,4 +63,5 @@ const sizeClasses = {
     content: ".";
     opacity: 0.7;
   }
-</style> 
\ No newline at end of file
+</style>
+
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 9e1645e..1a2192f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -60,7 +60,10 @@ const description =
 				class="text-6xl lg:text-7xl font-light tracking-tight mb-6 font-mono"
 				style="letter-spacing: -0.02em;"
 			>
-				<a href="/" class="hover:text-gray-700 transition-colors duration-200">
+				<a
+					href="/"
+					class="hover:text-gray-700 transition-colors duration-200"
+				>
 					Doma<span class="text-gray-400">.</span>in Na<span
 						class="text-gray-400">.</span
 					>me Ha<span class="text-gray-400">.</span>ck Cl<span
@@ -108,13 +111,24 @@ const description =
 					{
 						members.map((name) => (
 							<li>
-								<a 
-									href={name.data.url || `https://${name.data.domain}`}
+								<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}
+									rel={
+										name.data.candidate
+											? "nofollow"
+											: undefined
+									}
 								>
 									<div class="text-lg font-medium mb-1">
-										<NameLink name={name} size="large" showAsLink={false} />
+										<NameLink
+											name={name}
+											size="large"
+											showAsLink={false}
+										/>
 									</div>
 									<div class="text-gray-600 text-sm font-light">
 										{name.data.title}
@@ -139,7 +153,11 @@ const description =
 					{
 						candidates.map((name) => (
 							<li class="p-1 rounded hover:bg-gray-50 transition-colors duration-200 text-center text-xs overflow-hidden">
-								<NameLink name={name} size="small" />
+								<NameLink
+									name={name}
+									size="small"
+									showAsLink={true}
+								/>
 							</li>
 						))
 					}