feat(baseUrl): add new property

felix-berlin · Sep 2, 2023 · 066820e · 066820e
1 parent ada9efa
commit 066820e
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 3 deletions.
diff --git a/demo/src/pages/en/category/astro/page.astro b/demo/src/pages/en/category/astro/page.astro
@@ -111,6 +111,41 @@ const crumbsWithCustomAttributes = [
       mainBemClass="c-breadcrumbs-wrap"
       schemaJsonScript={false}
     />
+
+    <h2>Example 6 - Base URL with Custom index and separator</h2>
+    <Breadcrumbs baseUrl="base">
+      <!-- Add custom element for the first element (home icon?) -->
+      <svg
+        slot="index"
+        aria-label="Home Page"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        ><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"
+        ></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg
+      >
+
+      <!-- Add icon or text here (chevron-right icon?) -->
+      <svg
+        slot="separator"
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        ><polyline points="9 18 15 12 9 6"></polyline></svg
+      >
+    </Breadcrumbs>
   </main>
 </Layout>
 <style lang="scss">

diff --git a/demo/src/pages/mdx-test.mdx b/demo/src/pages/mdx-test.mdx
@@ -1,7 +1,7 @@
 ---
 ---
 
-import { Breadcrumbs } from "astro-breadcrumbs";
+import Breadcrumbs from "../../../src/Breadcrumbs.astro";
 
 # Test MDX
 

diff --git a/src/Breadcrumbs.astro b/src/Breadcrumbs.astro
@@ -5,6 +5,7 @@ interface BreadcrumbsProps {
   ariaLabel?: string;
   crumbs?: Array<BreadcrumbItem>;
   schemaJsonScript?: boolean;
+  baseUrl?: string;
 }
 
 interface BreadcrumbItem {
@@ -19,8 +20,82 @@ const {
   ariaLabel = "breadcrumbs",
   crumbs = [],
   schemaJsonScript = true,
+  baseUrl,
 } = Astro.props as BreadcrumbsProps;
 
+/**
+ * Log a warning message to the console.
+ *
+ * @param message
+ */
+const coloredWarnLog = (message: string) => {
+  console.warn(
+    "\x1b[43m",
+    "Astro Breadcrumbs",
+    "\x1b[0m",
+    "\x1b[33m",
+    message,
+    "\x1b[0m"
+  );
+};
+
+/**
+ * Check if a URL is valid.
+ *
+ * @param url
+ */
+const isValidUrl = (url: string | undefined): boolean => {
+  if (!url) return false;
+
+  let urlToCheck;
+
+
+  try {
+    urlToCheck = new URL(url);
+
+  } catch (e) {
+    return false;
+  }
+
+  const checkProtocal =  urlToCheck.protocol === "http:" || urlToCheck.protocol === "https:";
+
+  if (!checkProtocal) {
+    coloredWarnLog("Astro Breadcrumbs");
+  }
+  return checkProtocal;
+};
+
+/**
+ * Check if a URL ends with a slash.
+ *
+ * @param url
+ */
+const endsWithSlash = (url: string | undefined): boolean => {
+  if (!url) return false;
+
+  return url.endsWith("/");
+};
+
+/**
+ * Get the base URL.
+ * If the base URL is not valid, return a relative URL.
+ *
+ */
+const getBaseUrl = (): string => {
+  if (endsWithSlash(baseUrl)) {
+    coloredWarnLog("Base URL should not end with a slash. Falling back to relative URL.");
+
+    return "/"
+  }
+  if (!isValidUrl(baseUrl)) {
+    coloredWarnLog("Base URL is not valid. Falling back to relative URL.");
+
+    return "/";
+  }
+
+  return  baseUrl ? baseUrl : "/";
+};
+
 let parts: Array<BreadcrumbItem> = [];
 
 /**
@@ -36,15 +111,15 @@ if (crumbs.length === 0) {
   parts = [
     {
       text: indexText,
-      href: "/",
+      href: getBaseUrl(),
     },
   ];
 
   /**
    * Loop through the paths and create a breadcrumb item for each.
    */
   paths.forEach((text: string, index: number) => {
-    const href = `/${paths.slice(0, index + 1).join("/")}`;
+    const href = `${getBaseUrl()}/${paths.slice(0, index + 1).join("/")}`;
 
     // strip out any file extensions
     const matches = text.match(/^(.+?)(\.[a-z0-9]+)?$/i);