Merge pull request #36 from MaddyGuthridge/maddy-fix-card-hydration-issue

Removed nested <a> elements to prevent hydration failure

Author: MaddyGuthridge

package-lock.json

@@ -1,6 +1,6 @@
 {
 	"name": "minifolio",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"private": true,
 	"license": "GPL-3.0-only",
 	"scripts": {

package.json

@@ -31,25 +31,38 @@ A generic card element.
 Children are rendered on a colored card with rounded corners.
 -->
 
-<a
-  href={linkHref}
-  onclick={async (e) => {
-    if (link) {
-      await goto(link.url);
-    } else if (onclick) {
-      onclick(e);
-    }
-  }}
-  target={linkNewTab}
->
+{#snippet content()}
   <div
     class="card"
     style:--base-color={baseColor}
     style:--hover-color={hoverColor}
   >
     {@render children()}
   </div>
-</a>
+{/snippet}
+
+<!--
+  HACK: Workaround for https://github.com/sveltejs/kit/issues/11057
+  Very yucky, but I'll have to live with it since technically this is the only way to get valid HTML
+  :(
+-->
+{#if link}
+  <a
+    href={linkHref}
+    onclick={async (e) => {
+      if (link) {
+        await goto(link.url);
+      } else if (onclick) {
+        onclick(e);
+      }
+    }}
+    target={linkNewTab}
+  >
+    {@render content()}
+  </a>
+{:else}
+  {@render content()}
+{/if}
 
 <style>
   a {

src/components/card/Card.svelte

@@ -27,25 +27,26 @@
   );
 </script>
 
-<Card
-  link={editing ? undefined : { url: `/${groupId}/${itemId}`, newTab: false }}
-  color={item.info.color}
-  {onclick}
->
+<Card color={item.info.color} {onclick}>
   <div class="card-outer">
-    <div class:card-icon={item.info.icon} class:flex-grow={true}>
-      {#if item.info.icon}
-        <img
-          src="/{groupId}/{itemId}/{item.info.icon}"
-          alt="Icon for {item.info.name}"
-          class="label-icon"
-        />
-      {/if}
-      <div>
-        <h3>{item.info.name}</h3>
-        <p>{item.info.description}</p>
+    <a
+      href={editing ? undefined : `/${groupId}/${itemId}`}
+      class:flex-grow={true}
+    >
+      <div class:card-icon={item.info.icon}>
+        {#if item.info.icon}
+          <img
+            src="/{groupId}/{itemId}/{item.info.icon}"
+            alt="Icon for {item.info.name}"
+            class="label-icon"
+          />
+        {/if}
+        <div>
+          <h3>{item.info.name}</h3>
+          <p>{item.info.description}</p>
+        </div>
       </div>
-    </div>
+    </a>
     {#if !editing}
       <div>
         <ItemChipList
@@ -61,6 +62,11 @@
 </Card>
 
 <style>
+  a {
+    color: black;
+    text-decoration: none;
+  }
+
   h3 {
     margin-bottom: 0;
   }