feat: Add more documentation pages

src/lib/CollageJsIcon.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import collageJsLogo16 from '@collagejs/core/logo/16';
+    import collageJsLogo48 from '@collagejs/core/logo/48';
+    import collageJsLogo64 from '@collagejs/core/logo/64';
+
+    type Props = {
+        logo?: 16 | 48 | 64;
+        size?: string;
+    };
+
+    let {
+        logo = 16,
+        size = '1.1em'
+    }: Props = $props();
+
+    const logoMap = new Map<Props['logo'], string>([
+        [16, collageJsLogo16],
+        [48, collageJsLogo48],
+        [64, collageJsLogo64]
+    ]);
+
+    const finalLogo = $derived(logoMap.get(logo))
+</script>
+
+<img
+    src={finalLogo}
+    alt="CollageJS"
+    style="width: {size}; height: {size};"
+/>

src/lib/ExternalLink/ExternalLink.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+    let {
+        target,
+        rel,
+        children,
+        ...restProps
+    }: HTMLAnchorAttributes = $props();
+
+    let finalRel = $derived.by(() => {
+        const set = new Set<string>(rel?.split(' ') ?? []);
+        set.add('noreferrer');
+        return Array.from(set).join(' ');
+    });
+</script>
+
+<a target={target ?? '_blank'} rel={finalRel} {...restProps}>
+    {@render children?.()}
+</a>

src/lib/GithubIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    type Props = {
+        size?: string;
+    };
+
+    let {
+        size = '1.1em'
+    }: Props = $props();
+</script>
+
+<img
+    src="https://github.githubassets.com/favicons/favicon-dark.svg"
+    alt="github"
+    style="width: {size}; height: {size};"
+/>

src/lib/GithubRepoLink.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { ComponentProps } from "svelte";
+    import GithubIcon from "./GithubIcon.svelte";
+
+    type Props = ComponentProps<typeof GithubIcon> & {
+        name: string;
+    };
+
+    let {
+        name,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<a
+    href={`https://github.com/collagejs/${name}`}
+    target="_blank"
+    rel="nofollow noreferrer"
+    title={`View ${name} on GitHub`}
+>
+    <GithubIcon {...restProps} />
+</a>

src/lib/NpmJsIcon.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    type Props = {
+        size?: string;
+    };
+
+    let {
+        size = '1.1em'
+    }: Props = $props();
+</script>
+
+<img
+    src="https://static-production.npmjs.com/da3ab40fb0861d15c83854c29f5f2962.png"
+    alt="npmjs"
+    style="width: {size}; height: {size};"
+/>

src/lib/NpmJsPackageLink.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+    import type { ComponentProps } from "svelte";
+    import NpmJsIcon from "./NpmJsIcon.svelte";
+
+    type Props = ComponentProps<typeof NpmJsIcon> & {
+        name: string;
+    };
+
+    let {
+        name,
+        ...restProps
+    }: Props = $props();
+</script>
+
+<a
+    href={`https://npmjs.com/package/${name}`}
+    target="_blank"
+    rel="nofollow noreferrer"
+    title={`View ${name} on npmjs.com`}
+>
+    <NpmJsIcon {...restProps} />
+</a>

src/lib/SingleSpaIcon.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    type Props = {
+        size?: string;
+    };
+
+    let { size = '1.1em' }: Props = $props();
+</script>
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 811.21" style="width: {size}; height: {size};">
+    <defs
+        ><style>
+            .cls-1 {
+                fill: currentColor;
+            }
+        </style></defs
+    ><g id="Layer_2" data-name="Layer 2"
+        ><g id="Layer_1-2" data-name="Layer 1"
+            ><path
+                class="cls-1"
+                d="M108.54,200.33,528.42,470.42,449.27,583.84,59.39,386.22l49.15-185.89M77.4,120.12,0,412.86l465.61,236L600,456.28,77.4,120.12Z"
+            /><polygon class="cls-1" points="284.84 556.34 465.6 648.85 154.69 811.21 284.84 556.34" /><polygon
+                class="cls-1"
+                points="401.06 328.85 77.4 120.12 569.09 0 401.06 328.85"
+            /></g
+        ></g
+    ></svg
+>

src/lib/md-layouts/A.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import { page } from '$app/state';
+    import ExternalLink from '$lib/ExternalLink/ExternalLink.svelte';
+
+    let { href, children, ...restProps }: HTMLAnchorAttributes = $props();
+
+    function isExternalLink(href: string | null | undefined): boolean {
+        if (!href) return false;
+        try {
+            const url = new URL(href);
+            return url.origin !== page.url.origin;
+        } catch {
+            return false;
+        }
+    }
+</script>
+
+{#if isExternalLink(href)}
+    <ExternalLink {href} {children} {...restProps} />
+{:else}
+    <a {href} {...restProps}>
+        {@render children?.()}
+    </a>
+{/if}

src/lib/md-layouts/MdLayout.svelte

@@ -9,13 +9,16 @@
     export { default as li } from './Li.svelte';
     export { default as ol } from './Ol.svelte';
     export { default as blockquote } from './Blockquote.svelte';
+    export { default as a } from './A.svelte';
+    export { default as table } from './table/Table.svelte';
 </script>
 
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import '../../scss/code.css';
     import '../../scss/md-content.css';
     import H1 from './headers/H1.svelte';
+    import { scrollDoc, ScrollDocContext } from '$lib/scrollDocContext.svelte.js';
 
     type Props = {
         title: string;
@@ -31,9 +34,19 @@
         children
     }: Props = $props();
 
+    let scrollDocCtx: ScrollDocContext | undefined;
+    try {
+        scrollDocCtx = scrollDoc();
+    }
+    catch { }
+
     let topEl: HTMLElement | null = null;
+    let scroll = $derived(scrollDocCtx?.value ?? true);
 
     $effect(() => {
+        if (!scroll) {
+            return;
+        }
         topEl?.scrollIntoView({ behavior: 'smooth', block: 'start' });
     });
 </script>

src/lib/md-layouts/table/Table.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { HTMLTableAttributes } from 'svelte/elements';
+
+    let { children, ...restProps }: HTMLTableAttributes = $props();
+</script>
+
+<table {...restProps}>
+    {@render children?.()}
+</table>
+
+<style>
+    table {
+        border: 1px solid var(--cjs-primary);
+        :global {
+            & tbody {
+                tr:nth-child(even) {
+                    background-color: rgba(var(--cjs-white-rgb), 0.05);
+                }
+                tr:hover {
+                    background-color: rgba(var(--cjs-white-rgb), 0.15);
+                }
+            }
+        }
+    }
+</style>

src/lib/scrollDocContext.svelte.ts

@@ -0,0 +1,7 @@
+import { createContext } from "svelte";
+
+export class ScrollDocContext {
+    value = $state<boolean>(true);
+}
+
+export const [scrollDoc, setScrollDoc] = createContext<ScrollDocContext>();

src/routes/(docs-like)/+layout.svelte

@@ -8,6 +8,7 @@
     import { PrimarySidebarContext, setPrimarySidebar } from './PrimarySidebar/context.svelte.js';
     import TopNav from './TopNav.svelte';
     import { isArticleGroupDefinition } from './utils.js';
+    import { ScrollDocContext, setScrollDoc } from '$lib/scrollDocContext.svelte.js';
 
     let { data, children }: LayoutProps = $props();
 
@@ -18,7 +19,6 @@
             const result: ArticleDefinition[] = [];
             for (let ad of ads) {
                 if (isArticleGroupDefinition(ad)) {
-                    console.debug('extracting articles from group: %o', ad.title);
                     result.push(...extract(ad.articles));
                     continue;
                 }
@@ -28,14 +28,15 @@
         };
         return extract(primarySidebarCtx.value);
     });
-    $inspect(flattenedArticleDefinitions).with((t, v) => {
-        console.log('flattenedArticleDefinitions (%s): %o', t, v);
-    });
     const currentArticleDefinitionIndex = $derived(
         flattenedArticleDefinitions.findIndex((ad) => page.url.pathname === ad.href)
     );
     const nextArticleDefinition = $derived(flattenedArticleDefinitions[currentArticleDefinitionIndex + 1]);
     const previousArticleDefinition = $derived(flattenedArticleDefinitions[currentArticleDefinitionIndex - 1]);
+
+    if (import.meta.env.DEV) {
+        setScrollDoc(new ScrollDocContext());
+    }
 </script>
 
 <div class="contents d-flex flex-column gap-3 h-100">

src/routes/(docs-like)/TopNav.svelte

@@ -5,11 +5,20 @@
     import { page } from '$app/state';
     import { MediaQuery } from 'svelte/reactivity';
     import { browser } from '$app/env';
+    import { Scroll } from '@lucide/svelte';
+    import { scrollDoc, ScrollDocContext } from '$lib/scrollDocContext.svelte.js';
 
     const pal = palette();
     let showCollapsible = $state(false);
     const collapseMq = new MediaQuery('(min-width: 768px)');
     const finalShowCollapsible = $derived(browser ? collapseMq.current || showCollapsible : true);
+    let scrollDocCtx: ScrollDocContext | undefined;
+    if (import.meta.env.DEV) {
+        try {
+            scrollDocCtx = scrollDoc();
+        }
+        catch { }
+    }
 
     function isActive(path: string) {
         return page.route.id?.startsWith(`/(docs-like)${path}`) ?? false;
@@ -50,8 +59,17 @@
             ]}
             style={`display: ${finalShowCollapsible ? 'flex' : 'none'} !important;`}
         >
-            <div>
+            <div class="d-flex gap-1">
                 <PaletteToggler bind:name={pal.value} />
+                {#if import.meta.env.DEV}
+                    <button
+                        type="button"
+                        class="cjs-btn cjs-btn-neutral cjs-btn-sm"
+                        onclick={() => scrollDocCtx!.value = !scrollDocCtx?.value}
+                    >
+                        <Scroll />
+                    </button>
+                {/if}
             </div>
             <ul class="items d-flex flex-row gap-3">
                 <li><a href="/docs" class:active={isActive('/docs')}>Docs</a></li>

src/routes/(docs-like)/docs/+page.md

@@ -6,6 +6,7 @@
 
 <script lang="ts">
   import collagejsLogo from '@collagejs/core/logo/512';
+  import SingleSpaIcon from '$lib/SingleSpaIcon.svelte';
 </script>
 
 <div class="d-flex justify-content-center">
@@ -21,5 +22,5 @@ We recommend that you move through the topics in order since the documentation h
 If you are versed in in `single-spa`, maybe you should give the migration guide a try.  *CollageJS* was born from the concept of *single-spa parcels* and you'll find much of *CollageJS* familiar.
 
 <a class="cjs-btn cjs-btn-primary" href="/guides/migration-from-single-spa">
-  Migration Guid for <code>single-spa</code>
-</a>
+  <SingleSpaIcon />Migration Guide for the <code>single-spa</code> savvy
+</a>

src/routes/(docs-like)/docs/collagejs-packages-and-repositories/+page.md

@@ -0,0 +1,36 @@
+---
+  title: CollageJS Packages & Repositories
+  description: |
+    List of all available GitHub repositories and NPM packages at https://npmjs.com.
+---
+
+<script lang="ts">
+    import type { PageProps } from './$types';
+    import GithubRepoLink from '$lib/GithubRepoLink.svelte';
+    import NpmJsPackageLink from '$lib/NpmJsPackageLink.svelte';
+</script>
+
+For general knowledge and future reference, we present here all of the available NPM packages at [npmjs.com](https://npmjs.com/org/collagejs) as well as any other public repository that may be useful to you.
+
+## Packages
+
+| Package | Links | Description |
+| - | - | - |
+| `@collagejs/core` | <GithubRepoLink name="collagejs" />&nbsp;<NpmJsPackageLink name="@collagejs/core" /> | Core functionality.  Provides the general mounting and unmounting logic. |
+| `@collagejs/vite-css` | <GithubRepoLink name="vite" />&nbsp;<NpmJsPackageLink name="@collagejs/vite-css" /> | Vite plug-in that offers a CSS-mounting algorithm that is fully compatible with Vite's CSS bundling, including split CSS.  It also features FOUC prevention, shadow root mounting and relocation. |
+| `@collagejs/vite-im` | <GithubRepoLink name="vite" />&nbsp;<NpmJsPackageLink name="@collagejs/vite-im" /> | Vite plug-in that injects an import map and optionally the `@collagejs/imo` package to define bare module identifiers for easy micro-frontend loading and debugging. |
+| `@collagejs/vite-aim` | <GithubRepoLink name="vite" />&nbsp;<NpmJsPackageLink name="@collagejs/vite-aim" /> | Vite-plugin that auto-externalizes the module identifiers found in the application's import map.  It receives the import map live (and with overrides) from the client.  This enables static imports (no more dynamic `import()` calls). |
+| `@collagejs/imo` | <GithubRepoLink name="imo" />&nbsp;<NpmJsPackageLink name="@collagejs/imo" /> | Our version of `import-map-overrides` that does the usual overriding of import map entries, plus it transmits the final import map to Vite development servers found in it. |
+| `@collagejs/adapter` | <GithubRepoLink name="adapter" />&nbsp;<NpmJsPackageLink name="@collagejs/adapter" /> | NPM package that encapsulates code that is often used to create *CollageJS* framework adapters. |
+| `@collagejs/svelte` | <GithubRepoLink name="svelte" />&nbsp;<NpmJsPackageLink name="@collagejs/svelte" /> | Svelte component library that can be used to create `CorePiece`-compliant objects and to mount `CorePiece` objects (of any technology) by providing the `<Piece>` component. |
+| `@collagejs/react` | <GithubRepoLink name="react" />&nbsp;<NpmJsPackageLink name="@collagejs/react" /> | React component library that can be used to create `CorePiece`-compliant objects and to mount `CorePiece` objects (of any technology) by providing the `<Piece>` component. |
+| `@collagejs/solidjs` | <GithubRepoLink name="solidjs" />&nbsp;<NpmJsPackageLink name="@collagejs/solidjs" /> | SolidJS component library that can be used to create `CorePiece`-compliant objects and to mount `CorePiece` objects (of any technology) by providing the `<Piece>` component. |
+| `@collagejs/vue` | <GithubRepoLink name="vue" />&nbsp;<NpmJsPackageLink name="@collagejs/vue" /> | **Next in line**  VueJS component library that can be used to create `CorePiece`-compliant objects and to mount `CorePiece` objects (of any technology) by providing the `<Piece>` component. |
+| `@collagejs/angular` | | **External help needed.**  We don't have expertise in Angular, nor do we want to acquire it.  If you're an Angular developer, please consider contributing. |
+
+## Other Repositories
+
+| Repository | Description |
+| - | - |
+| [Root Template](https://github.com/collagejs/root-template) | Root template repository that can be used to create new repositories for *CollageJS* root projects, with client-side routing already configured. |
+| [Gallery](https://github.com/collagejs/gallery) | Repository of *CollageJS* pieces made in various front-end technologies for your reference and inspiration. |

src/routes/(docs-like)/docs/primary-sidebar.json

@@ -6,6 +6,10 @@
                 "title": "Introduction",
                 "href": "/docs/introduction"
             },
+            {
+                "title": "CollageJS Packages & Repositories",
+                "href": "/docs/collagejs-packages-and-repositories"
+            },
             {
                 "title": "Project Types",
                 "href": "/docs/project-types"