docs

Author: saadeghi

packages/docs/src/components/LogoContextMenu.svelte

@@ -1,12 +1,11 @@
 <script>
+  import { goto } from "$app/navigation"
   import TopBanner from "$components/TopBanner.svelte"
   import ThemeChange from "$components/ThemeChange.svelte"
   import LangChange from "$components/LangChange.svelte"
   import Search from "$components/Search.svelte"
-  import LogoContextMenu from "$components/LogoContextMenu.svelte"
   import ChangelogMenu from "$components/ChangelogMenu.svelte"
 
-  let contextMenuEl = $state()
   import { t } from "$lib/i18n.svelte.js"
   let {
     pages,
@@ -76,7 +75,7 @@
           class="btn btn-ghost flex-0 gap-1 px-2 md:gap-2"
           oncontextmenu={(e) => {
             e.preventDefault()
-            contextMenuEl.openContextMenu(e)
+            goto("/brand")
           }}
         >
           <svg
@@ -94,7 +93,6 @@
 
           <span class="font-title text-base-content text-lg md:text-xl">daisyUI</span>
         </a>
-        <LogoContextMenu bind:this={contextMenuEl} />
         {#if showVersion}
           <ChangelogMenu {version} />
         {/if}

packages/docs/src/components/Navbar.svelte

@@ -23,6 +23,19 @@
     if (lang === "zh_hant") return "zh-tw"
     return lang
   }
+
+  const getCanonicalUrl = (pathname) => {
+    const compareRegex = /^\/compare\/(.+)-vs-(.+)\/$/
+    const match = pathname.match(compareRegex)
+
+    if (match) {
+      const [, first, second] = match
+      const [smaller, larger] = [first, second].sort()
+      return `https://daisyui.com/compare/${smaller}-vs-${larger}/`
+    }
+
+    return `https://daisyui.com${pathname}`
+  }
 </script>
 
 <svelte:head>
@@ -38,7 +51,7 @@
   <meta property="og:image" content={img} />
 
   <link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />
-  <link rel="canonical" href={`https://daisyui.com${page.url.pathname}`} />
+  <link rel="canonical" href={getCanonicalUrl(page.url.pathname)} />
 
   {#each langs as lang}
     <link

packages/docs/src/components/SEO.svelte

@@ -1,10 +1,9 @@
 <script>
+  import { goto } from "$app/navigation"
   import { page } from "$app/stores"
   import Search from "$components/Search.svelte"
-  // import LogoContextMenu from "$components/LogoContextMenu.svelte"
   import SidebarMenuItem from "$components/SidebarMenuItem.svelte"
-  // import ChangelogMenu from "$components/ChangelogMenu.svelte"
-  let contextMenuEl
+  import ChangelogMenu from "$components/ChangelogMenu.svelte"
 
   let { closeDrawer, openDrawer, pages, drawerSidebarScrollY, version } = $props()
   let switchNavbarStyle = $derived(drawerSidebarScrollY > 40)
@@ -27,7 +26,7 @@
     class="btn btn-ghost flex-0 px-2"
     oncontextmenu={(e) => {
       e.preventDefault()
-      contextMenuEl.openContextMenu(e)
+      goto("/brand")
     }}
   >
     <svg width="32" height="32" viewBox="0 0 415 415" xmlns="http://www.w3.org/2000/svg">
@@ -39,13 +38,7 @@
 
     <div class="font-title inline-flex text-lg md:text-2xl">daisyUI</div>
   </a>
-
-  {#await import("./LogoContextMenu.svelte") then Module}
-    <Module.default bind:this={contextMenuEl} />
-  {/await}
-  {#await import("./ChangelogMenu.svelte") then Module}
-    <Module.default {version} />
-  {/await}
+  <ChangelogMenu {version} />
 </div>
 
 {#if innerWidth < 1024}