chore: maintenance (#61)

* Lot of minor documentation improvements

* More docs

* More docs

* Try to fix eslint

* Try to fix build

* Fixing build

* Fix build

* Reintroducing the build issue

* Trying to fix build

* Trying to fix build

* Try to fix build

* Bumped @workleap/eslint-plugin package version

* Updated packages

* Updated packages and license

* Updated to Retype Pro

* Updated contributing guide

.eslintignore

@@ -1,5 +1,6 @@
 **/dist/*
+**/__snapshots__/*
 node_modules
 *.md
-pnpm-lock.yaml
-**/__snapshots__/*
+*.yml
+*.yaml

.eslintrc.json

@@ -2,6 +2,6 @@
     "$schema": "https://json.schemastore.org/eslintrc",
     "root": true,
     "extends": [
-        "plugin:@workleap/monorepo-root"
+        "plugin:@workleap/monorepo-workspace"
     ]
 }

.github/workflows/retype-action.yml

@@ -14,8 +14,12 @@ jobs:
       contents: write
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: retypeapp/action-build@latest
-      - uses: retypeapp/action-github-pages@latest
-        with:
-          update-branch: true
+        - uses: actions/checkout@v2
+
+        - uses: retypeapp/action-build@latest
+          with:
+              license: ${{ secrets.RETYPE_API_KEY }}
+
+        - uses: retypeapp/action-github-pages@latest
+          with:
+            update-branch: true

.vscode/settings.json

@@ -6,8 +6,8 @@
 
     // Formatters settings
     "editor.codeActionsOnSave": {
-        "source.fixAll": true, // this makes sure eslint and stylelint are run on save
-        "source.sortImports": true // we want vscode to handle import sorting. It's snappier and more reliable than eslint
+        "source.fixAll": true, // Makes sure ESLint is runned on save
+        "source.sortImports": true // Let VS Code handle import sorting, it's snappier and more reliable than ESLint
     },
     "editor.formatOnSave": true,
     "[html]": {
@@ -18,21 +18,18 @@
     },
 
     // Languages
-    "typescript.format.enable": false, // disables the default formatter, we use eslint instead
-    "typescript.preferences.useAliasesForRenames": false, // useAliasesForRenames is not the behavior we want from vscode
+    "typescript.format.enable": false, // Disables the default formatter to use ESLint instead
+    "typescript.preferences.useAliasesForRenames": false,
     "typescript.tsdk": "node_modules\\typescript\\lib",
 
-    "javascript.format.enable": false, // disables the default formatter, we use eslint instead
-    "javascript.preferences.useAliasesForRenames": false, // useAliasesForRenames is not the behavior we want from vscode
+    "javascript.format.enable": false, // Disables the default formatter to use ESLint instead
+    "javascript.preferences.useAliasesForRenames": false,
 
-    "json.format.enable": false, // disables the default formatter, we use eslint instead
+    "json.format.enable": false, // Disables the default formatter to use ESLint instead
 
-    "css.validate": false, // disables the default formatter, we use stylelint instead
-    "less.validate": false, // disables the default formatter, we use stylelint instead
-    "scss.validate": false, // disables the default formatter, we use stylelint instead
+    "css.validate": false, // Disables the default formatter to use Stylelint instead
 
-    // Settings for third parties we frequently use
-    // Third party - Jest
+    // Settings for third parties that are frequently used
     "files.associations": {
         "*.snap": "javascriptreact"
     },

CONTRIBUTING.md

@@ -32,7 +32,7 @@ Under [packages/](packages/) are the actual packages composing the federated app
 
 [@squide/react-router](packages/react-router/) is a [React Router](https://reactrouter.com/en/main) implementation of the shell routing capabilities. This implementation is offered as a standalone package because the shell could eventually support alternative routing libraries like [TanStack router](https://tanstack.com/router/v1).
 
-[@squide/webpack-module-federation](packages/webpack-module-federation/) is module federation implementation for [Webpack](https://webpack.js.org/concepts/module-federation/). This implementation is offered as a standalone package because not all application configurations will require module federation and the shell could eventually support alternative module federation application like [Rspack](https://www.rspack.dev/).
+[@squide/webpack-module-federation](packages/webpack-module-federation/) is module federation implementation for [webpack](https://webpack.js.org/concepts/module-federation/). This implementation is offered as a standalone package because not all application configurations will require module federation and the shell could eventually support alternative module federation application like [Rspack](https://www.rspack.dev/).
 
 [@squide/fakes](packages/fakes/) is a collection of fake implementations to facilitate the development of federated modules in isolation.
 
@@ -56,6 +56,18 @@ To install the project, open a terminal at the root of the workspace and execute
 pnpm install
 ```
 
+### Setup Retype
+
+[Retype](https://retype.com/) is the documentation platform that `workleap/web-configs` is using for the documentation. As this project is leveraging a few [Pro features](https://retype.com/pro/) of Retype, you must first setup your [Retype wallet](https://retype.com/guides/cli/#retype-wallet).
+
+To do so, first make sure that you retrieve the Retype license from your Vault (or ask IT).
+
+Then, open a terminal at the root of the workspace and execute the following command:
+
+```bash
+npx retype wallet --add <your-license-key-here>
+```
+
 ## Develop the shell packages
 
 We recommend opening two [VSCode terminals](https://code.visualstudio.com/docs/terminal/basics#_managing-multiple-terminals) to develop the shell packages.
@@ -80,7 +92,7 @@ When you are ready to release the packages, you must follow the following steps:
 1. Run `pnpm changeset` and follow the prompt. For versioning, always follow the [SemVer standard](https://semver.org/).
 2. Commit the newly generated file in your branch and submit a new Pull Request(PR). Changesets will automatically detect the changes and post a message in your pull request telling you that once the PR closes, the versions will be released.
 3. Find someone to review your PR.
-4. Merge the Pull request into `main`. A GitHub action will automatically trigger and update the version of the packages and publish them to [npm]https://www.npmjs.com/). A tag will also be created on GitHub tagging your PR merge commit.
+4. Merge the Pull request into `main`. A GitHub action will automatically trigger and update the version of the packages and publish them to [npm](https://www.npmjs.com/). A tag will also be created on GitHub tagging your PR merge commit.
 
 ### Troubleshooting
 
@@ -170,6 +182,14 @@ Build the sample application for deployment and start a local web server to serv
 pnpm serve-sample
 ```
 
+### dev-docs
+
+Build the [Retype](https://retype.com/) documentation for development and start the Retype dev server. If you are experiencing issue with the license, refer to the [setup Retype section](#setup-retype).
+
+```bash
+pnpm dev-docs
+```
+
 ### test
 
 Run the shell packages unit tests.
@@ -230,17 +250,23 @@ pnpm update-outdated-deps
 
 We use [GitHub Actions](https://github.com/features/actions) for this repository.
 
-You can find the configuration in the [.github/workflows](.github/workflows/) folder and the build results available [here](https://github.com/gsoft-inc/wl-squide/actions).
+You can find the configuration in the [.github/workflows](.github/workflows/) folder and the build results are available [here](https://github.com/gsoft-inc/wl-squide/actions).
 
-We currently have 2 builds configured:
+We currently have 3 builds configured:
 
 ### Changesets
 
-This build runs on a push on the `main` branch, and if theirs a file present in the `.changeset` folder, will publish the new package version on npm.
+This action runs on a push on the `main` branch. If there is a file present in the `.changeset` folder, it will publish the new package version on npm.
 
 ### CI
 
-This build will trigger when a commit is done in a PR to `main` or after a push to `main` and will run `build`, `lint-ci` and `test` commands on the source code.
+This action will trigger when a commit is done in a PR to `main` or after a push to `main` and will run `build`, `lint-ci` and `test` commands on the source code.
+
+### Retype
+
+This action will trigger when a commit is done in a PR to `main` or after a push to `main`. The action will generate the documentation website into the `retype` branch. This repository [Github Pages](https://github.com/gsoft-inc/wl-web-configs/settings/pages) is configured to automatically deploy the website from the `retype` branch.
+
+If you are having issue with the Retype license, make sure the `RETYPE_API_KEY` Github secret contains a valid Retype license.
 
 ## Add a new package to the monorepo
 

README.md

@@ -1,6 +1,6 @@
 # wl-squide
 
-A federated web application shell built on top of [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) and [React Router](https://reactrouter.com/en/main).
+A federated web application shell built on top of [Module Federation](https://webpack.js.org/concepts/module-federation/) and [React Router](https://reactrouter.com/en/main).
 
 [![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](./LICENSE)
 [![CI](https://github.com/gsoft-inc/wl-squide/actions/workflows/ci.yml/badge.svg)](https://github.com/gsoft-inc/wl-squide/actions/workflows/ci.yml)

docs/_includes/head.html

@@ -0,0 +1,5 @@
+<style>
+    .docs-markdown ol, .docs-markdown ul {
+        padding-left: 1rem !important;
+    }
+</style>

docs/about.md

@@ -12,4 +12,4 @@ Have a look at the [contributor's documentation](https://github.com/gsoft-inc/wl
 
 ## License
 
-See the @squide [LICENSE](https://github.com/gsoft-inc/wl-squide/blob/main/LICENSE) on Github.
+See the [LICENSE](https://github.com/gsoft-inc/wl-squide/blob/main/LICENSE) on Github.

docs/default.md

@@ -0,0 +1,4 @@
+---
+redirect: getting-started
+visibility: hidden
+---

docs/getting-started/create-host.md

@@ -7,25 +7,30 @@ label: Create an host app
 
 Let's begin by creating the application that will serve as the entry point for our federated application and host the application modules.
 
-## Install the packages
+## 1. Install the packages
 
-Create a new project (we'll refer to ours as `host`), then open a terminal at the root of the newly created project and install the following packages:
+Create a new project (we'll refer to ours as `host`), then open a terminal at the root of the new solution and install the following packages:
 
 +++ pnpm
 ```bash
-pnpm add @squide/core @squide/react-router @squide/webpack-module-federation webpack react-router-dom
+pnpm add -D webpack
+pnpm add @squide/core @squide/react-router @squide/webpack-module-federation react-router-dom
 ```
 +++ yarn
 ```bash
-yarn add @squide/core @squide/react-router @squide/webpack-module-federation webpack react-router-dom
+yarn add -D webpack
+yarn add @squide/core @squide/react-router @squide/webpack-module-federation react-router-dom
 ```
 +++ npm
 ```bash
-npm install @squide/core @squide/react-router @squide/webpack-module-federation webpack react-router-dom
+npm install -D webpack
+npm install @squide/core @squide/react-router @squide/webpack-module-federation react-router-dom
 ```
 +++
 
-## Setup the application
+## 2. Setup the application
+
+### Application structure
 
 First, create the following files:
 
@@ -40,6 +45,8 @@ host
 ├── webpack.config.js
 ```
 
+### Async boundary
+
 Then, use a dynamic import to add an async boundary:
 
 ```ts host/src/index.ts
@@ -56,6 +63,8 @@ export {};
 To learn more about this async boundary and the `bootstrap.tsx` file, read the following [article](https://dev.to/infoxicator/module-federation-shared-api-ach#using-an-async-boundary).
 !!!
 
+### Module registration
+
 Then, instanciate the shell [Runtime](/references/runtime/runtime-class.md) and [register the remote module](/references/registration/registerRemoteModules.md) (the configuration of the remote module will be covered in the [next section](create-remote-module.md)):
 
 ```tsx !#23,13-15,18-20 host/src/bootstrap.tsx
@@ -92,6 +101,8 @@ root.render(
 );
 ```
 
+### Router instance
+
 Then, [retrieve the routes](/references/runtime/useRoutes.md) that have been registered by the remote module and create a router instance:
 
 ```tsx !#10,13,17 host/src/App.tsx
@@ -149,7 +160,9 @@ export function Home() {
 }
 ```
 
-Then, create a layout component to [render the navigation items](/references/routing/useRenderedNavigationItems.md):
+### Navigation items
+
+FInally, create a layout component to [render the navigation items](/references/routing/useRenderedNavigationItems.md):
 
 ```tsx !#38,41 host/src/RootLayout.tsx
 import type { ReactNode } from "react";
@@ -203,9 +216,9 @@ export default function RootLayout() {
 }
 ```
 
-## Configure Webpack
+## 3. Configure webpack
 
-To include the Webpack [ModuleFederationPlugin](https://webpack.js.org/plugins/module-federation-plugin/) we'll use the [hostTransformer](/references/webpack/hostTransformer.md) function:
+To configure the webpack [ModuleFederationPlugin](https://webpack.js.org/plugins/module-federation-plugin/), use the [hostTransformer](/references/webpack/hostTransformer.md) function:
 
 
 ```js !#8 host/webpack.config.js
@@ -223,6 +236,6 @@ export default federatedConfig;
 
 [!ref icon="mark-github" text="View a full webpack.config.js"](https://github.com/gsoft-inc/wl-squide/blob/main/sample/host/webpack.dev.js)
 
-## Try the application :rocket:
+## 4. Try the application :rocket:
 
 Start the application, and you should see the home page. Even if the remote module application is not yet available, the host application will gracefully load.

docs/getting-started/create-local-module.md

@@ -10,17 +10,17 @@ Local modules are useful when **migrating** from a **monolithic application** to
 
 Let's add a local module to demonstrate how it's done!
 
-> Loading remote modules at runtime with [Webpack Module Federation](https://webpack.js.org/concepts/module-federation/) is the primary focus of this shell and our recommended approach. It empowers teams to be **fully autonomous** by **deploying** their modules **independently** from the other parts of the application.
+> Loading remote modules at runtime with [Module Federation](https://webpack.js.org/concepts/module-federation/) is the primary focus of this shell and our recommended approach. It empowers teams to be **fully autonomous** by **deploying** their modules **independently** from the other parts of the application.
 >
 > However, we recognize that teams working on mature products may prefer to **gradually migrate** to a distributed architecture by first extracting subdomains into independent modules within their current monolithic setup before fully committing to remote modules loaded at runtime.
 >
-> To facilitate this transition, this shell also supports local modules that are loaded at build time.
+> To facilitate this transition, this shell also supports local modules that are loaded at **build time**.
 >
 > Both remote and local modules can be used within same application as this shell supports dual bootstrapping. For example, an application can be configured to load a few remote modules at runtime while also loading a few local modules.
 
-## Install the packages
+## 1. Install the packages
 
-Create a new project (we'll refer to ours as `local-module`), then open a terminal at the root of the newly created project and install the following packages:
+Create a new project (we'll refer to ours as `local-module`), then open a terminal at the root of the new solution and install the following packages:
 
 +++ pnpm
 ```bash
@@ -36,7 +36,9 @@ npm install @squide/core @squide/react-router react-router-dom
 ```
 +++
 
-## Setup the application
+## 2. Setup the application
+
+### Application structure
 
 First, create the following files:
 
@@ -48,6 +50,8 @@ local-modules
 ├── package.json
 ```
 
+### Package configuration
+
 Then, add the following fields to the `package.json` files:
 
 ```json !#2,4 local-module/package.json
@@ -58,6 +62,8 @@ Then, add the following fields to the `package.json` files:
 }
 ```
 
+### Routes and navigation items registration
+
 Then, register the local module [routes](/references/runtime/runtime-class.md#register-routes) and [navigation items](/references/runtime/runtime-class.md#register-navigation-items):
 
 ```tsx !#8-13,15-20 local-module/src/register.tsx
@@ -92,7 +98,7 @@ export default function Page() {
 }
 ```
 
-## Register the local module
+## 3. Register the local module
 
 Go back to the `host` application and [register the local module](/references/registration/registerLocalModules.md). Don't forget to add a dependency in the host application `package.json` file.
 
@@ -134,6 +140,6 @@ root.render(
 );
 ```
 
-## Try the application :rocket:
+## 4. Try the application :rocket:
 
 Start both applications, and you should now notice a third link in the navigation menu. Click on the link to navigate to the page of your new local module!