UPdating the current state

Author: mohitkhatri89

README.md

@@ -1,118 +1,104 @@
-# Astroship Pro
+# 1FE Documentation
 
-Astroship Pro is a Pro version of Popular Free Astroship Starter Template which was made for startups, marketing websites, landing pages & blog. Built with Astro & TailwindCSS.
+Official documentation repository for 1FE (One Front End) - A configuration-driven front-end platform that enables dynamic widget loading and micro-frontend architecture. Built with [Astro](https://astro.build) and [Starlight](https://starlight.astro.build).
 
-This Pro Template is made by [Web3Templates](https://web3templates.com)
+## About 1FE
 
-## Live Demo
-
-### [Astroship Pro Live Demo](https://astroship-pro.web3templates.com/)
+1FE is a powerful platform that allows organizations to build scalable front-end applications using a micro-frontend approach with dynamic configuration management, widget orchestration, and runtime dependency management.
 
-### [Buy Astroship Pro Template](https://web3templates.com/templates/astroship-pro-astro-saas-website-template)
-
-#### [Get Free Version](https://web3templates.com/templates/astroship-starter-website-template-for-astro)
+## Live Demo
 
-## Preview
+You can view the live documentation at: [1fe.com](https://1fe.com)
 
-![astroship-pro-preview](https://github.com/web3templates/astroship-pro/assets/1884712/17ca044c-c8ce-4a0a-8780-f078c2ef0cc4)
+## Getting Started
 
-## Installation
+### Prerequisites
 
-If you are already have github access, you can click on the "Fork" button above to create a new repository from astroship to your account. Then you can do a `git clone` to clone it to your local system.
+- [Node.js](https://nodejs.org/) (version 22 or higher)
+- [Yarn](https://yarnpkg.com/) package manager
 
-Alternatively, you can clone the project directly from the github repo to your local system. make sure you have github repo access. Send an email to hello@web3templates.com to get github repo access.
+### Installation
 
-### 1. Clone the repo
+1. Clone this repository:
 
 ```bash
-git clone https://github.com/web3templates/astroship-pro.git myProjectName
-# or
-git clone https://github.com/web3templates/astroship-pro.git .
+git clone https://github.com/docusign/1fe-docs.git
+cd 1fe-docs
 ```
 
-The `.` will clone it to the current directory so make sure you are inside your project folder first.
-
-> Note: If you are reading this on a downloaded zip file after purchase, just skip this step and start installing npm from the next step.
-
-### 2. Install Dependencies
+2. Install dependencies:
 
 ```bash
-npm install
-# or
 yarn install
-# or (recommended)
-pnpm install
 ```
 
-### 3. Start development Server
+3. Start the development server:
 
 ```bash
-npm run dev
-# or
 yarn dev
-# or (recommended)
-pnpm dev
 ```
 
-### Preview & Build
+4. Open your browser and navigate to [http://localhost:8432](http://localhost:8432) to view the documentation locally.
 
-```bash
-npm run preview
-npm run build
-# or
-yarn preview
-yarn build
-# or (recommended)
-pnpm preview
-pnpm build
-```
+### Making Changes
 
-We recommend using [pnpm](https://pnpm.io/) to save disk space on your computer.
+1. Edit the documentation files in the `src/content/docs/` directory
+2. The development server will automatically reload your changes
+3. Visit [http://localhost:8432](http://localhost:8432) to see your updates
 
-### Other Commands
+### Build for Production
 
 ```bash
-pnpm astro ...
-pnpm astro add
-pnpm astro --help
+yarn build
 ```
 
 ## Project Structure
 
-Inside of your Astro project, you'll see the following folders and files:
+Inside of this Astro documentation project, you'll see the following folders and files:
 
-```
+```text
 /
 ├── public/
-│   └── ...
+│   ├── favicon.svg
+│   └── robots.txt
 ├── src/
-│   ├── components/
-│   │   └── ...
-│   ├── layouts/
-│   │   └── ...
-│   └── pages/
-│       └── ...
+│   ├── content/
+│   │   ├── docs/           # Documentation content
+│   │   │   ├── getting-started/
+│   │   │   ├── main-concepts/
+│   │   │   ├── api-reference/
+│   │   │   └── ...
+│   │   └── config.ts       # Content collections config
+│   ├── components/         # Reusable Astro components
+│   ├── layouts/           # Page layouts
+│   └── assets/            # Images and other assets
+├── astro.config.mjs       # Astro configuration
 └── package.json
 ```
 
-Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
-
-Any static assets, like images, can be placed in the `public/` directory.
-
-## TailwindCSS
-
-TailwindCSS is already configured in this repo, so you can start using it without any installation.
-
-## Versions
+Documentation content is written in MDX format and stored in the `src/content/docs/` directory. Each file automatically becomes a page based on its file path.
 
-Current version: v2.0.0
+## Built With
 
-## Credits
+- **[Astro](https://astro.build)** - Static site generator with excellent performance
+- **[Starlight](https://starlight.astro.build)** - Documentation theme built on Astro
+- **[TailwindCSS](https://tailwindcss.com)** - Utility-first CSS framework
+- **[MDX](https://mdxjs.com)** - Markdown with JSX support for interactive documentation
+- **[React Icons](https://react-icons.github.io/react-icons/)** - Icon library for UI elements
 
-[Unsplash](https://unsplash.com)
+## Contributing
 
-## 👀 Want to learn more?
+1. Fork the repository
+2. Create a feature branch (`git checkout -b feature/amazing-feature`)
+3. Make your changes to the documentation
+4. Test locally using `yarn dev` and visit [http://localhost:8432](http://localhost:8432)
+5. Commit your changes (`git commit -m 'Add some amazing feature'`)
+6. Push to the branch (`git push origin feature/amazing-feature`)
+7. Open a Pull Request
 
-Feel free to check out [Astro Docs](https://docs.astro.build) or jump into our [Discord Chat](https://web3templates.com/discord).
+## Links
 
-[![Built with Astro](https://astro.badg.es/v1/built-with-astro.svg)](https://astro.build)
+- [1FE Main Repository](https://github.com/docusign/1fe)
+- [Astro Documentation](https://docs.astro.build)
+- [Starlight Documentation](https://starlight.astro.build)
+- [TailwindCSS Documentation](https://tailwindcss.com/docs)

src/content/docs/getting-started/customize.mdx

@@ -8,7 +8,7 @@ sidebar:
 import { SlCloudDownload, SlPencil, SlRocket } from "react-icons/sl";
 import { FcOk } from "react-icons/fc";
 
-Let's customize your new 1FE app by making changes to the default plugin! Since 1FE is powered by CDN, we will update and build the plugin and publicly host the assets.
+Let's customize your new 1FE app by making changes to the default plugin! Since 1FE is powered by CDN, we will update and build the plugin and host the assets.
 
 ## <SlPencil style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Make changes to example plugin
 
@@ -55,13 +55,20 @@ yarn build:widget
   ![dist folder contents](./assets/example-plugin-dist.png)
 
 
-## <SlCloudDownload style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> "Deploy" your plugin to a CDN
+## <SlCloudDownload style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> "Setup" your CDN
 
 To get started quickly, we can use github's mirrored assets on the jsdelivr CDN.
 
 ##### 1. Fork this [mock-cdn-assets](https://github.com/docusign/mock-cdn-assets/tree/main) repository
+This repository contains the Live Configurations and widget assets per environment that power demo.1fe.com. We will use this to host our plugin assets and rely on [jsdelivr](https://www.jsdelivr.com/) to act as a CDN to start powering our application.
 
-##### 2. Upload the new assets to your forked mocked-cdn-assets repository
+##### 2. Update the live configs
+
+One of the key features of 1FE is the ability to dynamically load widgets and plugins via [Live Configurations](../../main-concepts/live-configurations). We will update the Live Configurations to point to our new plugin assets.
+
+## <SlCloudDownload style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> "Deploy" your plugin to CDN
+
+Upload the new assets to your forked mocked-cdn-assets repository
 1. Create a new directory within `development/widgets/@1fe/starter-kit` of your forked repo. The directory name should be the next bumped version. (e.g `1.0.2`).
 
 2. Upload the contents of the `1fe-widget-starter-kit/dist/` directory to the new directory.

src/content/docs/getting-started/familiarize.mdx

@@ -9,14 +9,14 @@ import { SlSocialDropbox, SlAnchor, SlCloudDownload } from "react-icons/sl";
 
 ## <SlSocialDropbox style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Starter Plugin
 
-##### 1. Visit `http://localhost:3001/app1/utils` to view the example starter plugin
+##### 1. Visit `http://localhost:3001/widget-starter-kit/utils` to view the example starter plugin
 
 ##### 2. Click the button `utils.context.get`
   ![A rocketship in space](./assets/example-child-widget.png)
 
 ##### 3. What just happened?
 
-1. 1FE loaded and rendered the *plugin* tied to the `/app1` route.
+1. 1FE loaded and rendered the *plugin* tied to the `/widget-starter-kit` route.
 
 2. When `utils.context.get` was clicked, the plugin loaded a child *widget* via the *platform utilities* provided by 1FE shell.
 

src/content/docs/getting-started/installation.mdx

@@ -17,10 +17,10 @@ import { SlWrench, SlAnchor, SlCloudDownload } from "react-icons/sl";
 
 ## <SlCloudDownload style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Manual Installation
 
-##### 1. Clone the 1FE monorepo (or your fork of it):
+##### 1. Scaffold a starter application:
 
   ```bash
-  git clone https://github.com/docusign/1fe.git
+  npx @1fe/create-1fe-app <test-app-name>
   ```
 
 ##### 2. Clone the 1FE widget starter kit (WSK):
@@ -34,7 +34,7 @@ import { SlWrench, SlAnchor, SlCloudDownload } from "react-icons/sl";
   First you need to build the 1FE monorepo and the starter kit.
 
   ```bash
-  cd 1fe # adjust this to fit your directory structure
+  cd <test-app-name> # adjust this to fit your directory structure
   yarn && yarn build
   ```
 
@@ -48,19 +48,19 @@ import { SlWrench, SlAnchor, SlCloudDownload } from "react-icons/sl";
 ##### 3. Run the starter app development server
 
   ```bash
-  cd 1fe/apps/starter-app # adjust this to fit your directory structure
+  cd <test-app-name> # adjust this to fit your directory structure
   yarn dev
   ```
 
+  You can now visit your application at [http://localhost:3000](http://localhost:3000). You will see this mirror our demo website [here](https://demo.1fe.com/). We will take a look later at how to customize this application.
+
 ##### 4. Run the development server for the WSK
 
   ```bash
   cd 1fe-widget-starter-kit/ # adjust this to fit your directory structure
   yarn dev
   ```
 
-  Now visit `http://localhost:3001/app1` to view your application! 🎉
-
-## <SlWrench style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> Automatic Installation (WIP)
+  This will open WSK at the following [link](http://localhost:3001/bathtub?widgetUrl=http%3A%2F%2F127.0.0.1%3A8080%2Fjs%2F1fe-bundle.js)
 
-Coming Soon!
+  You now have a functioning 1FE application running locally! 🎉

src/content/docs/main-concepts/live-configurations.mdx

@@ -9,6 +9,8 @@ import { FcFlashOn } from 'react-icons/fc';
 
 ## <FcFlashOn style={{ display: 'inline', marginRight: '0.5rem', verticalAlign: 'middle' }} /> What are Live Configurations?
 
+<div className="prose">
+
 Live Configurations are a set of configurations that allows 1FE to provide dynamic features:
 
 1. Dynamically build widgets and other build-time validations
@@ -23,3 +25,5 @@ Live Configurations are a set of configurations that allows 1FE to provide dynam
 
 6. Configuring plugin runtime behaviors
 
+</div>
+