Skip to content

Commit 7a6aae8

Browse files
restructure pages
1 parent 3ac6df3 commit 7a6aae8

File tree

14 files changed

+167
-122
lines changed

14 files changed

+167
-122
lines changed

website/docs/building/index.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
sidebar_position: 0
3+
---
4+
5+
# Building Components
6+
7+
Everything you need to create production-ready micro-frontends.
8+
9+
1. **Getting Started** – scaffold your first component and understand the project layout.
10+
2. **Template System** – pick the right template (ES6, React, Vue, etc.) and learn compilation basics.
11+
3. **package.json Structure** – required fields, `oc` manifest, and best practices.
12+
4. **server.js** – add backend logic, data fetching, and helpers.
13+
5. **CLI** – day-to-day commands for development and testing.
14+
6. **Debugging** – diagnose issues locally and in production.

website/docs/components/client-side-operations.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -796,7 +796,7 @@ Available settings:
796796
| `retryInterval` | `number` (milliseconds) | Retry interval for when component rendering fails | 5000 |
797797
| `retryLimit` | `number` | Max number of retries when component rendering fails | 30 |
798798
| `retrySendNumber` | `boolean` | Appends an `__ocRetry=(number)` to a request to mark the retry number. This is a quite powerful feature that you can handle in the server-side logic in order to make your component even behave differently in case something is going wrong | true |
799-
| `templates` | `array` | The configuration needed for performing client-side rendering of legacy template types. ES6 templates (default) don't require configuration. | `[{"type": "oc-template-jade","externals": [{"global": "jade","url": "https://unpkg.com/[email protected]/runtime.js"}]},{"type": "oc-template-handlebars","externals": [{"global": "Handlebars","url": "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.runtime.min.js"}]}]` |
799+
| `templates` | `array` | The configuration needed for performing client-side rendering of legacy template types. ES6 templates (default) don't require configuration. | `[{"type": "oc-template-jade","externals": [{"global": "jade","url": "https://unpkg.com/[email protected]/runtime.js"}]},{"type": "oc-template-handlebars","externals": [{"global": "Handlebars","url": "https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.runtime.min.js"}]}]` |
800800
| `tag` | `string` | The html tag you want to use for your components in the page | `oc-component` |
801801

802802
## API
@@ -881,7 +881,7 @@ cons templates = oc.registerTemplates([{
881881
}]);
882882
```
883883

884-
[Learn more about the templates system](/docs/miscellaneous/template-system)
884+
[Learn more about the templates system](/docs/building/template-system)
885885

886886
### oc.renderUnloadedComponents ()
887887

website/docs/components/package.json-structure.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -282,4 +282,4 @@ ls -la public/
282282
- **[Learn server.js structure](the-server.js)** - Add dynamic data to your components
283283
- **[Understand CLI commands](cli)** - Master component development workflow
284284
- **[Publishing guide](publishing-to-a-registry)** - Deploy your components
285-
- **[Template system](../miscellaneous/template-system)** - Choose the right template type
285+
- **[Template system](../building/template-system)** - Choose the right template type

website/docs/concepts/index.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
sidebar_position: 0
3+
---
4+
5+
# Introduction & Concepts
6+
7+
Welcome! In this section you’ll find high-level material that helps you understand _why_ OpenComponents exists and _how_ its pieces fit together. Start here if you want the big picture before diving into tutorials or code.
8+
9+
- **Introduction** – a birds-eye view and quick install.
10+
- **Architecture Overview** – explore the design principles behind the Registry, Templates, and OC-Client.

website/docs/intro.md

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ OpenComponents is a framework for building and deploying **micro frontends** - s
99
## What is OpenComponents?
1010

1111
Think of OpenComponents as a way to break down your frontend into small, manageable pieces that can be:
12+
1213
- **Developed independently** by different teams
1314
- **Deployed separately** without affecting other parts
1415
- **Reused across** multiple applications
@@ -49,19 +50,19 @@ The framework consists mainly of three parts:
4950
- The **[Library](#setup-a-library)** is where the components are stored after publishing. When components depend on static resources (such as images, CSS files, etc.) these are stored, during packaging and publishing, in a publicly-exposed part of the library that serves as CDN.
5051
- The **[Registry](#setup-a-registry)** is a REST API that is used to consume, retrieve, and publish components. Since they are immutable, the registry is the entity that handles the traffic between the library and the consumers.
5152

52-
For a detailed technical overview, see our [Architecture Overview](miscellaneous/architecture-overview).
53+
For a detailed technical overview, see our [Architecture Overview](concepts/architecture-overview).
5354

5455
## Components management
5556

5657
A component is a directory composed by
5758

58-
| File | Description |
59-
| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
60-
| `package` | The component definition, dependencies, and more. |
59+
| File | Description |
60+
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
61+
| `package` | The component definition, dependencies, and more. |
6162
| `view` | The view in charge to output the final markup. OC uses `ES6` templates by default and comes with a powerful template system to support components built with any javascript UI framework like `React`, `Angular`, `Vue`. Legacy `Handlebars` and `Jade` templates are still supported for backwards compatibility. |
62-
| `server` (optional) | If the component need logic, including consuming services, this is the entity that will produce the view-model to compile the view. |
63-
| static assets (optional) | Images, Javascript, and files to be uploaded to the CDN and referenced in the HTML markup. |
64-
| \* | Any other files that will be useful for the development such as tests, docs, etc. |
63+
| `server` (optional) | If the component need logic, including consuming services, this is the entity that will produce the view-model to compile the view. |
64+
| static assets (optional) | Images, Javascript, and files to be uploaded to the CDN and referenced in the HTML markup. |
65+
| \* | Any other files that will be useful for the development such as tests, docs, etc. |
6566

6667
After publishing, components are immutable and semantic versioned.
6768

@@ -117,6 +118,7 @@ You don't need Node.js to consume components on the server-side. The registry ca
117118
When published, components are immutable and semantic versioned. The registry allows consumers to get any version of the component: the latest patch, or minor version, etc.
118119

119120
**When to use OpenComponents:**
121+
120122
- Building micro frontends with multiple teams
121123
- Need for independent deployment of UI components
122124
- Sharing components across different applications
@@ -259,23 +261,28 @@ For the registry configuration's documentation, [look at this page](/docs/regist
259261
**Choose your path based on your role:**
260262

261263
### 🚀 **I'm new to OpenComponents**
264+
262265
Start with the [Quick Start Tutorial](quick-start-tutorial) for a complete hands-on introduction.
263266

264267
### 🔧 **I want to build components**
268+
265269
1. [Components Getting Started](components/getting-started) - Learn component creation
266270
2. [CLI Reference](components/cli) - Master the command-line tools
267271
3. [Server-side Logic](components/the-server.js) - Add dynamic behavior
268272

269273
### 🌐 **I want to consume components**
274+
270275
1. [Client-side Rendering](consumers/client-side-rendering) - Browser integration
271276
2. [Server-side Rendering](consumers/server-side-rendering) - Backend integration
272277
3. [Batch Endpoint](consumers/batch-endpoint) - Efficient multi-component loading
273278

274279
### ⚙️ **I need to set up infrastructure**
280+
275281
1. [Registry Configuration](registry/registry-configuration) - Set up your component registry
276-
2. [Architecture Overview](miscellaneous/architecture-overview) - Understand the system design
282+
2. [Architecture Overview](concepts/architecture-overview) - Understand the system design
277283

278284
### 🔍 **I need help with specific topics**
279-
- [FAQ](miscellaneous/faq) - Common questions and answers
280-
- [Debugging](miscellaneous/debugging) - Troubleshooting guide
281-
- [Template System](miscellaneous/template-system) - Advanced templating options
285+
286+
- [FAQ](reference/faq) - Common questions and answers
287+
- [Debugging](building/debugging) - Troubleshooting guide
288+
- [Template System](building/template-system) - Advanced templating options

website/docs/miscellaneous/_category_.json

Lines changed: 0 additions & 4 deletions
This file was deleted.

website/docs/quick-start-tutorial.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -385,7 +385,7 @@ Now that you've created your first component, explore these advanced topics:
385385
2. **[Server-side Logic](components/the-server.js)** - Add complex data processing
386386
3. **[Client-side Operations](components/client-side-operations)** - Advanced browser integration
387387
4. **[Registry Configuration](registry/registry-configuration)** - Production registry setup
388-
5. **[Template System](miscellaneous/template-system)** - Use React, Vue, or other frameworks
388+
5. **[Template System](building/template-system)** - Use React, Vue, or other frameworks
389389

390390
## Best Practices
391391

0 commit comments

Comments
 (0)