From 8f37f093747d80142457ffb9250e611c8fdd9001 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 10 Dec 2022 10:01:32 -0800
Subject: [PATCH] docs: link source code to folder for multiple components

---
 docs/src/layouts/ComponentLayout.svelte | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/docs/src/layouts/ComponentLayout.svelte b/docs/src/layouts/ComponentLayout.svelte
index 7c19bb8f..e099d00a 100644
--- a/docs/src/layouts/ComponentLayout.svelte
+++ b/docs/src/layouts/ComponentLayout.svelte
@@ -22,7 +22,6 @@
 
   export let component = $page.title;
   export let components = [component];
-  export let source = "";
   export let unreleased = false;
   export let unstable = false;
 
@@ -42,10 +41,28 @@
     }
   });
 
+  function formatSourceURL(multiple) {
+    const filePath = api_components[0]?.filePath ?? "";
+
+    if (multiple) {
+      /**
+       * Link to folder for doc with multiple components.
+       * @example "src/Breadcrumb"
+       */
+      return filePath.split("/").slice(0, -1).join("/");
+    }
+
+    /**
+     * Else, link to the component source.
+     * @example "src/Tile/ClickableTile.svelte"
+     */
+    return filePath;
+  }
+
   // TODO: [refactor] read from package.json value
-  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/src/${
-    source || `${$page.title}/${$page.title}.svelte`
-  }`;
+  $: sourceCode = `https://github.com/carbon-design-system/carbon-components-svelte/tree/master/${formatSourceURL(
+    multiple
+  )}`;
 </script>
 
 <Content data-components>