small improvements

Author: ricardo-devis-agullo

website/docs/building/debugging.md

@@ -137,7 +137,7 @@ In this tutorial, we'll see how.
 ### Chrome DevTools (Client-side)
 
 1. **Component Inspection**:
-   ```javascript
+   ```js
    // In browser console, inspect loaded components
    console.log(window.oc.components);
 
@@ -213,7 +213,7 @@ curl -H "Accept: application/vnd.oc.unrendered+json" https://your-registry.com/y
 - Incorrect helper usage
 
 **Debugging**:
-```javascript
+```js
 // In server.js, log the data being passed to template
 export const data = (context, callback) => {
   const result = {
@@ -232,7 +232,7 @@ export const data = (context, callback) => {
 - Incorrect prop types
 
 **Debugging**:
-```javascript
+```js
 // Add console logs in your React component
 const MyComponent = (props) => {
   console.log('Component props:', props);
@@ -260,7 +260,7 @@ tar -tzf _package/package.tar.gz
 
 ### Memory Debugging
 
-```javascript
+```js
 // Monitor memory usage in browser
 console.log('Memory usage:', performance.memory);
 
@@ -284,7 +284,7 @@ time curl -s http://localhost:3030/your-component > /dev/null
 
 ### Client-side Error Handling
 
-```javascript
+```js
 // Global error handler for components
 window.addEventListener('error', (event) => {
   if (event.target.tagName === 'OC-COMPONENT') {
@@ -301,7 +301,7 @@ document.addEventListener('oc:error', (event) => {
 
 ### Server-side Error Handling
 
-```javascript
+```js
 // In server.js, always handle errors gracefully
 export const data = (context, callback) => {
   try {

website/docs/building/template-system.md

@@ -2,7 +2,7 @@
 sidebar_position: 2
 ---
 
-# Template system
+# Template System
 
 ## Introduction
 
@@ -82,7 +82,7 @@ via configuration API:
 via `registerTemplates()` API:
 
 ```js
-cons templates = oc.registerTemplates([{
+const templates = oc.registerTemplates([{
   "type": "custom-react-template",
   "externals": [{
     "global": "React",
@@ -121,7 +121,7 @@ At the moment OC comes with `oc-template-es6` as the default modern template, wi
 
 ### ES6 Template Example
 
-```javascript
+```js
 // template.js - Modern ES6 template
 export default function (model) {
   return `
@@ -244,7 +244,7 @@ const configuration = {
 
 **Issue**: "Component renders but shows blank"
 
-```javascript
+```js
 // ❌ Problem - undefined variables
 export default function(model) {
   return `<div>${model.user.name}</div>`; // Error if user is undefined
@@ -259,7 +259,7 @@ export default function(model) {
 
 **Issue**: "Template externals not loading"
 
-```javascript
+```js
 // Check external dependencies are accessible
 const templates = [
   {
@@ -278,7 +278,7 @@ const templates = [
 
 **Issue**: "Slow template rendering"
 
-```javascript
+```js
 // ❌ Avoid complex logic in templates
 export default function(model) {
   // Don't do heavy processing here
@@ -299,7 +299,7 @@ export default function(model) {
 
 **Issue**: "Migrating from Handlebars to ES6"
 
-```javascript
+```js
 // Before (Handlebars)
 // {{#if user.isActive}}
 //   <span class="active">{{user.name}}</span>
@@ -338,7 +338,7 @@ my-custom-template/
 
 ### Template API Requirements
 
-```javascript
+```js
 // compiler.js - Required methods
 module.exports = {
   compile: (options, callback) => {
@@ -360,7 +360,7 @@ module.exports = {
 
 ### Template Registration
 
-```javascript
+```js
 // Registry configuration
 const configuration = {
   templates: [

website/docs/components/cli.md

@@ -16,7 +16,7 @@ If these are satisfied you can install the CLI as shown below.
 
 To install cli, you should type:
 
-```sh
+```bash
 $ npm install oc -g
 ```
 
@@ -26,19 +26,19 @@ Autocomplete is supported for Mac and Linux.
 
 To enable it in **zsh**, you should type:
 
-```sh
+```bash
 echo '. <(oc completion)' >> .zshrc
 ```
 
 To enable it in **bash**, you should type:
 
-```sh
+```bash
 oc completion >> ~/.bashrc
 ```
 
 or
 
-```sh
+```bash
 oc completion >> ~/.bash_profile
 ```
 
@@ -48,15 +48,15 @@ After enabling autocomplete you should reload the shell.
 
 Basic usage:
 
-```sh
+```bash
 $ oc <command> [options]
 ```
 
 Hint: Run -h with any command to show the help
 
 For a list of all the available commands, type **oc** in your terminal
 
-```sh
+```bash
 $ oc
 ```
 
@@ -161,7 +161,7 @@ Remove the node_modules directory from each component's subfolder
 
 #### Usage:
 
-```sh
+```bash
 $ oc clean <dirPath> [options]
 ```
 
@@ -179,7 +179,7 @@ $ oc clean <dirPath> [options]
 
 #### Example:
 
-```sh
+```bash
 $ oc clean ../all-components --yes
 ```
 
@@ -191,7 +191,7 @@ Runs a local oc test registry **to develop and test components**
 
 #### Usage:
 
-```sh
+```bash
 $ oc dev <dirPath> [port] [baseUrl] [options]
 ```
 
@@ -215,7 +215,7 @@ $ oc dev <dirPath> [port] [baseUrl] [options]
 
 #### Example:
 
-```sh
+```bash
 $ oc dev ../all-components 3001 127.0.0.1:3001 --fallbackRegistryUrl=http://anotherhost:anotherport/
 ```
 
@@ -227,7 +227,7 @@ Creates a new empty component in the current folder
 
 #### Usage:
 
-```sh
+```bash
 $ oc init <componentPath> [templateType]
 ```
 
@@ -240,13 +240,13 @@ $ oc init <componentPath> [templateType]
 
 #### Example:
 
-```sh
+```bash
 $ oc init test-component oc-template-es6
 ```
 
 or with using relative path:
 
-```sh
+```bash
 $ oc init components/test-component oc-template-es6
 ```
 
@@ -260,7 +260,7 @@ Allows **mocking configuration to simplify local development**
 
 #### Usage
 
-```sh
+```bash
 $ oc mock <targetType> <targetName> <targetValue>
 ```
 
@@ -274,15 +274,15 @@ $ oc mock <targetType> <targetName> <targetValue>
 
 #### Example:
 
-```sh
+```bash
 $ oc mock plugin hash "always-returned-value"
 ```
 
 Creates static mock for a "hash" plugin which always returns "always-returned-value" value
 
 To run a dynamic plugin, you can run a plugin locally. This could be the same one running in your registry, or a mock js that behaves differently locally.
 
-```sh
+```bash
 $ oc mock plugin <targetName> <path to mock .js>
 ```
 
@@ -294,7 +294,7 @@ Creates the packaged component ready to be published
 
 #### Usage:
 
-```sh
+```bash
 $ oc package <componentPath> [options]
 ```
 
@@ -325,7 +325,7 @@ Runs a test page consuming a component
 
 #### Usage:
 
-```sh
+```bash
 $ oc preview <componentHref>
 ```
 
@@ -337,7 +337,7 @@ $ oc preview <componentHref>
 
 #### Examples:
 
-```sh
+```bash
 $ oc preview "http://localhost:3000/my-new-component/1.0.0/?param1=hello&name=Arthur"
 ```
 
@@ -349,7 +349,7 @@ Validate a component against registry requirements without publishing
 
 #### Usage:
 
-```sh
+```bash
 $ oc validate <componentPath> [options]
 ```
 
@@ -368,7 +368,7 @@ $ oc validate <componentPath> [options]
 
 #### Examples:
 
-```sh
+```bash
 # Validate component against configured registries
 $ oc validate my-component/
 
@@ -387,7 +387,7 @@ Publish a component
 
 #### Usage:
 
-```sh
+```bash
 $ oc publish <componentPath> [options]
 ```
 
@@ -409,7 +409,7 @@ $ oc publish <componentPath> [options]
 
 #### Examples:
 
-```sh
+```bash
 $ oc publish my-new-component/
 ```
 
@@ -421,7 +421,7 @@ Shows, adds, removes oc registries to the current project
 
 #### Usage:
 
-```sh
+```bash
 $ oc registry <command>
 ```
 

website/docs/components/getting-started.md

@@ -6,20 +6,20 @@ sidebar_position: 1
 
 ## Prerequisites
 
-Before creating your first component, make sure your workstation meets the [CLI installation requirements](cli.md#installation). If you followed the **Quick-Start Tutorial** you can skip this.
+Before creating your first component, make sure your workstation meets the [CLI installation requirements](cli#install-the-cli). If you followed the **Quick-Start Tutorial** you can skip this.
 
 First create the component directory:
 
 ```bash
-$ oc init hello-world
+oc init hello-world
 ```
 
 The above command will create the `hello-world` [directory](#component-structure).
 
 It is also possible to set [template](#template) type during the initialisation as an additional init parameter:
 
 ```bash
-$ oc init hello-world oc-template-es6
+oc init hello-world oc-template-es6
 ```
 
 By default this parameter is set to `oc-template-es6` (modern ES6 templates). Legacy templates like `oc-template-handlebars` are still supported for backwards compatibility.
@@ -72,7 +72,7 @@ The basic package file `package.json` looks as follows:
     }
   },
   "devDependencies": {
-    "oc-template-handlebars-compiler": "6.0.8"
+    "oc-template-es6-compiler": "6.0.8"
   }
 }
 ```
@@ -107,8 +107,8 @@ export const data = (context, callback) => {
 
 You may want to start a local test registry using a components' folder as a library with a watcher. This will allow to consume and debug it:
 
-```sh
-$ oc dev . 3030
+```bash
+oc dev . 3030
 ```
 
 Then you may want to create a blank html page to start playing with it and see how it looks:
@@ -126,8 +126,8 @@ Then you may want to create a blank html page to start playing with it and see h
 
 Or, just use the preview function:
 
-```sh
-$ oc preview http://localhost:3030/hello-world
+```bash
+oc preview http://localhost:3030/hello-world
 ```
 
 That's it. As soon as you make changes on the component, you will be able to refresh this page and see how it looks.