src/components/Modal.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-  import CloseIcon from "eva-icons/fill/svg/close.svg";
-
   export let onClose: () => void;
 
   function click(this: Element, event: Event) {
@@ -24,14 +22,9 @@
 
   <div class="content-alignment" on:click={click} on:keydown={keydown}>
     <div class="content shadow-xl">
-      <div class="mb-3 flex items-center justify-between">
+      <h3 class="text-2xl" id="modal-title">
-        <h3 class="text-2xl" id="modal-title">
+        <slot name="title" />
-          <slot name="title" />
+      </h3>
-        </h3>
-        <button on:click={onClose}
-          ><CloseIcon class="h-10 w-10 fill-current" /></button
-        >
-      </div>
       <slot />
       <!--<div
       class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
@@ -130,8 +123,14 @@
 
   .content {
     overflow-y: auto;
+    max-height: 100%;
     background: var(--background);
     padding: 16px 20px;
     border-radius: 16px;
   }
+
+  h3 {
+    margin: 0;
+    margin-bottom: 12px;
+  }
 </style>

src/editor/menubar/Linking.svelte

@@ -75,23 +75,59 @@
   $: links = getLinks(state.selection.$to.parent);
 </script>
 
-<div class="mx-auto w-full max-w-7xl overflow-x-auto">
+<div class="linking">
-  <div class="flex min-w-min">
+  <div class="links">
     {#each links as link}
       <a
-        class="m-1 flex max-w-[45vw] items-center gap-1 rounded-full border border-neutral-200 bg-white px-4 py-3 no-underline dark:border-neutral-500 dark:bg-neutral-800"
         href={"href" in link ? link.href : link.id}
         target={link.type === "external" ? "_blank" : null}
       >
         {#if link.type === "internal"}
-          <InternalLinkIcon class="h-5 w-5 shrink-0 fill-current" />
+          <InternalLinkIcon />
         {:else}
-          <LinkIcon class="h-5 w-5 shrink-0 fill-current" />
+          <LinkIcon />
         {/if}
-        <span class="overflow-hidden text-ellipsis whitespace-nowrap"
+        <span>{link.content}</span>
-          >{link.content}</span
-        >
       </a>
     {/each}
   </div>
 </div>
+
+<style>
+  .linking {
+    max-width: 1280px;
+    width: 100%;
+    margin: 0 auto;
+    overflow-x: auto;
+  }
+  .links {
+    display: flex;
+    min-width: min-content;
+  }
+
+  a {
+    background: ButtonFace;
+    color: ButtonText;
+    padding: 0.7em 1em;
+    margin: 0.3em;
+    display: flex;
+    gap: 0.25em;
+    align-items: center;
+    border-radius: 2em;
+    text-decoration: none;
+    max-width: 45vw;
+  }
+
+  a > span {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  .linking :global(svg) {
+    fill: currentColor;
+    width: 1.25em;
+    height: 1.25em;
+    flex-shrink: 0;
+  }
+</style>

src/lib/breadcrumbs.ts

@@ -26,9 +26,6 @@ class BreadcrumbsStore {
       } else {
         crumbs.push(pageId);
       }
-      if (crumbs.includes("index")) {
-        crumbs = crumbs.slice(crumbs.indexOf("index"));
-      }
       map.set(worldId, crumbs);
       return map;
     });

src/views/Page.svelte

@@ -1,15 +1,34 @@
 <script lang="ts">
   import type { XmlFragment } from "yjs";
   import { inject } from "regexparam";
+  import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
   import Editor from "../editor/Editor.svelte";
   import { getWorldPage, getWorldY, type WorldY } from "../lib/doc";
   import { routes } from "../lib/routes";
   import { loadWorlds } from "../lib/worldStorage";
-  import Breadcrumbs from "./Page/Breadcrumbs.svelte";
+  import breadcrumbs from "../lib/breadcrumbs";
+  import { pageStore } from "../lib/makeYdocStore";
+  import { derived } from "svelte/store";
+  import { getTitle } from "../lib/getTitle";
 
   export let worldId: string;
   export let pageId: string;
 
+  $: pageBreadcrumbs = breadcrumbs.worldStore(worldId);
+  $: crumbsTitles = derived(
+    [pageBreadcrumbs],
+    ([crumbs], set: (val: (string | undefined)[]) => void) => {
+      return derived(
+        crumbs.map((c) => pageStore(worldId, c)),
+        (crumbPages) =>
+          crumbPages.map(
+            (x, index) =>
+              x && x.doc && getTitle(x.doc, `page/${crumbs[index]}`),
+          ),
+      ).subscribe(set);
+    },
+  );
+
   async function loadDoc(
     worldId: string,
     pageId: string,
@@ -48,7 +67,28 @@
     </ul>
   </details>
 
-  <Breadcrumbs {pageId} {worldId} />
+  <!-- https://devdojo.com/pines/docs/breadcrumbs -->
+  <div
+    class="flex justify-between rounded-md border border-neutral-200/60 px-3.5 py-1"
+  >
+    <ol
+      class="inline-flex items-center space-x-1 text-xs text-neutral-500 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600"
+    >
+      {#each $pageBreadcrumbs as crumb, index}
+        <li>
+          <a
+            href={inject(routes.Page, { worldId, pageId: crumb })}
+            class="inline-flex items-center py-1 font-normal hover:text-neutral-900 focus:outline-none"
+            class:active-breadcrumb={crumb === pageId}
+            >{$crumbsTitles[index] || crumb}</a
+          >
+        </li>
+        {#if index !== $pageBreadcrumbs.length - 1}
+          <ChevronRight class="h-5 w-5 fill-current text-gray-400/70" />
+        {/if}
+      {/each}
+    </ol>
+  </div>
 </nav>
 
 {#if state === "loading"}Cargando...{:else if "doc" in state}
@@ -57,3 +97,9 @@
   {state.error}
   <a href={routes.ChooseWorld}>Volver al inicio</a>
 {/if}
+
+<style>
+  nav a {
+    color: inherit;
+  }
+</style>

src/views/Page/Breadcrumbs.svelte

@@ -1,72 +0,0 @@
-<script lang="ts">
-  import { onMount, tick } from "svelte";
-  import ChevronRight from "eva-icons/fill/svg/chevron-right.svg";
-  import { inject } from "regexparam";
-  import breadcrumbs from "../../lib/breadcrumbs";
-  import { pageStore } from "../../lib/makeYdocStore";
-  import { derived } from "svelte/store";
-  import { getTitle } from "../../lib/getTitle";
-  import { routes } from "../../lib/routes";
-
-  export let worldId: string;
-  export let pageId: string;
-
-  $: pageBreadcrumbs = breadcrumbs.worldStore(worldId);
-  $: crumbsTitles = derived(
-    [pageBreadcrumbs],
-    ([crumbs], set: (val: (string | undefined)[]) => void) => {
-      return derived(
-        crumbs.map((c) => pageStore(worldId, c)),
-        (crumbPages) =>
-          crumbPages.map(
-            (x, index) =>
-              x && x.doc && getTitle(x.doc, `page/${crumbs[index]}`),
-          ),
-      ).subscribe(set);
-    },
-  );
-
-  let breadcrumbsEl: HTMLDivElement;
-  const crumbsScrollToEnd = async () => {
-    await tick();
-    breadcrumbsEl?.scroll({
-      left: breadcrumbsEl.scrollWidth,
-      behavior: "smooth",
-    });
-  };
-
-  onMount(() => {
-    crumbsScrollToEnd();
-  });
-  $: {
-    $crumbsTitles;
-    $pageBreadcrumbs;
-    crumbsScrollToEnd();
-  }
-</script>
-
-<!-- https://devdojo.com/pines/docs/breadcrumbs -->
-<div
-  class="flex justify-between overflow-x-auto rounded-md border border-neutral-200/60 px-3.5 py-1 dark:border-neutral-700"
-  bind:this={breadcrumbsEl}
->
-  <ol
-    class="inline-flex items-center space-x-1 text-xs text-neutral-500 dark:text-neutral-300 sm:mb-0 [&_.active-breadcrumb]:font-medium [&_.active-breadcrumb]:text-neutral-600 dark:[&_.active-breadcrumb]:text-neutral-200"
-  >
-    {#each $pageBreadcrumbs as crumb, index}
-      <li>
-        <a
-          href={inject(routes.Page, { worldId, pageId: crumb })}
-          class="font-norma inline-flex items-center text-ellipsis whitespace-nowrap py-1 focus:outline-none"
-          class:active-breadcrumb={crumb === pageId}
-          >{$crumbsTitles[index] || crumb}</a
-        >
-      </li>
-      {#if index !== $pageBreadcrumbs.length - 1}
-        <ChevronRight
-          class="h-5 w-5 fill-current text-gray-400/70 dark:text-gray-500"
-        />
-      {/if}
-    {/each}
-  </ol>
-</div>