Improved docs

Author: FlorianRappl

.vitepress/config.mts

@@ -43,7 +43,7 @@ export default defineConfig({
 
     footer: {
       message: "Released under the MIT License.",
-      copyright: "Copyright © 2024-present smapiot",
+      copyright: "Copyright © 2024-present smapiot GmbH",
     },
 
     nav: [

guide/features.md

@@ -8,28 +8,40 @@ Picard.js is your comprehensive solution for orchestrating micro frontends, prov
 
 Picard.js is designed to be versatile and adaptable across various environments. Whether you're working in a browser, Node.js, Deno, or Electron, Picard.js seamlessly orchestrates micro frontends, ensuring consistent performance and compatibility.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/develop/examples/08-ssr-tractor/package.json)
+
 ## Multi Format
 
 With Picard.js, you can integrate and manage multiple micro frontend formats effortlessly. It supports Module Federation, Native Federation, Pilets, and more, providing flexibility and ease of use for diverse development needs.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/10-dependencies-sharing/index.html)
+
 ## Multi Framework
 
 ![Multi Framework](../images/multi-framework.svg)
 
 Picard.js excels at integrating various frameworks, including single-spa, HTML fragments, and web components. This multi-framework support allows you to choose the best tools for each part of your application, fostering innovation and efficiency.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/develop/examples/06-static-page-single-spa/index.html)
+
 ## Error Handling
 
 Picard.js takes the hassle out of managing errors. It automatically handles errors across your micro frontends, ensuring a smooth and uninterrupted user experience while reducing the need for manual error management.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/06-static-page-single-spa/mfs/red/src/Product.jsx#L87)
+
 ## Loose and Strong Coupling
 
 Picard.js supports both loose and strong coupling of micro frontends. Utilize a micro frontend discovery service for loose coupling or specify script URLs directly for strong coupling, akin to module federation, allowing you to tailor the integration to your specific requirements.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/develop/examples/02-static-page-feed/index.html#L10)
+
 ## Optional Routing
 
 Picard.js provides robust routing capabilities, whether you need client-side or server-side routing. This flexibility enables you to design your application's navigation in the most efficient and effective way possible.
 
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/develop/examples/05-static-page-with-routing/index.html#L11)
+
 ## Debugging
 
 Debugging with Picard.js is straightforward and integrates seamlessly into your existing development workflows. It supports native debugging processes and extends compatibility with micro frontend debugging utilities such as the [Piral Inspector](https://github.com/smapiot/piral-inspector), enhancing your ability to identify and resolve issues quickly.
@@ -39,3 +51,5 @@ Debugging with Picard.js is straightforward and integrates seamlessly into your
 ![Islands Architecture](../images/islands-architecture.svg)
 
 Picard.js facilitates the creation of island architectures, enabling server-side rendered (SSR) applications that can hydrate and continue on the client side. This approach optimizes performance and user experience, combining the best of SSR and client-side rendering.
+
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/develop/examples/09-islands-netflix/package.json)

guide/variants/browser.md

@@ -62,3 +62,11 @@ When Picard.js starts it will look for a script tag with the `type` set to `pi-s
 ```
 
 The provided state must match the format of Picard's internal state. One way to get this is to retrieve an export of the internal state, e.g., using the `readState()` function on `window.picard`.
+
+::: warning
+The provided state is not type-checked. As a result, any wrong or unexpected input here might lead to some undefined behavior later on.
+
+Always just take the state as it was exported via `JSON.stringify(picard.readState())` as input for a `pi-state` script.
+:::
+
+Ideally, you don't use this thing directly, but rely on Picard.js doing it implicitly, e.g., when using SSR with an islands architecture model.

guide/why.md

@@ -14,7 +14,7 @@ One of the reasons why Picard.js might be interesting for you is that it allows
 
 For owners of existing micro frontend solutions the integration of other micro frontends will no longer break due to technology incompatibilities. If two micro frontends have been written - one using Module Federation and another one using Native Federation - you will no longer require some frankenstein solution, but instead can just embed both; and it will just work.
 
-👉 Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/10-dependencies-sharing/index.html)
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/10-dependencies-sharing/index.html)
 
 ### Error Handling
 
@@ -24,7 +24,7 @@ Error handling has been one of the largest problems in solutions like Module Fed
 
 With Picard.js error handling is integrated from the ground up. You reference an invalid component? Nothing bad will happen. The component crashes or does not accept the given inputs? The solution will just continue - if you care you can pick up the error and display something else instead.
 
-👉 Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/06-static-page-single-spa/mfs/red/src/Product.jsx#L87)
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/06-static-page-single-spa/mfs/red/src/Product.jsx#L87)
 
 ### Technology Agnostic
 
@@ -34,7 +34,7 @@ A design goal of Picard.js was to work without any tooling. As such owners of ex
 
 One advantage of this approach is that - out-of-the-box - Picard.js is technology agnostic. While other approaches require specific tooling to work we don't need this here. As a result, Picard.js can also be used with tooling that is rather micro frontend hostile such as the Angular CLI. As long as there is some HTML somewhere you can add the script and use the web components.
 
-👉 Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/01-static-page/index.html)
+:point_right: Want to see this in action? [Example online](https://github.com/picardjs/picard/blob/main/examples/01-static-page/index.html)
 
 ## Why use a Library as Orchestrator?
 

index.md

@@ -29,7 +29,7 @@ features:
     details: Just works with micro frontends using single-spa, Piral, Module Federation, and Native Federation.
 ---
 
-<style>
+<style is:global>
 :root {
   --vp-home-hero-name-color: transparent;
   --vp-home-hero-name-background: linear-gradient(120deg, #ff007f 30%, #41d1ff);