Skip to content

Commit fec4dd9

Browse files
fmontesfmontes
committed
Update docs
1 parent 33665d0 commit fec4dd9

2 files changed

Lines changed: 88 additions & 62 deletions

File tree

‎readme.md‎

Lines changed: 16 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,26 @@
1-
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
1+
# DotCMS Edit Mode Anywhere Elements
22

3-
# Stencil Component Starter
3+
In order to make DotCMS Edit Mode works we need to pass some data-attr in the HTML for containers and contentlets.
44

5-
This is a starter project for building a standalone Web Component using Stencil.
5+
In this repo we provide two Web Components that will help you to pass those attributes very easy.
66

7-
Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
7+
## Elements
88

9-
# Stencil
9+
We have two:
1010

11-
Stencil is a compiler for building fast web apps using Web Components.
12-
13-
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
14-
15-
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
16-
17-
## Getting Started
18-
19-
To start building a new web component using Stencil, clone this repo to a new directory:
20-
21-
```bash
22-
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
23-
cd my-component
24-
git remote rm origin
25-
```
26-
27-
and run:
28-
29-
```bash
30-
npm install
31-
npm start
32-
```
33-
34-
To build the component for production, run:
35-
36-
```bash
37-
npm run build
11+
```html
12+
<dotcms-ema-container container={}>
13+
<dotcms-ema-contentlet contenlet={container={}}>
14+
<!--HERE GOES YOUR CONTENTLET-->
15+
</dotcms-ema-contentlet>
16+
</dotcms-ema-container>
3817
```
3918

40-
To run the unit tests for the components, run:
41-
42-
```bash
43-
npm test
44-
```
45-
46-
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
47-
48-
49-
## Naming Components
50-
51-
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
52-
53-
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
54-
55-
56-
## Using this component
57-
58-
### Script tag
19+
### Full documentation:
5920

60-
- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
61-
- Put a script tag similar to this `<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>` in the head of your index.html
62-
- Then you can use the element anywhere in your template, JSX, html etc
21+
1. [dotcms-ema-container](./src/components/dotcms-ema-container/readme.md)
22+
2. [dotcms-ema-contentlet](./src/components/dotcms-ema-contentlet/readme.md)
6323

64-
### Node Modules
65-
- Run `npm install my-component --save`
66-
- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
67-
- Then you can use the element anywhere in your template, JSX, html etc
24+
## StencilJS
6825

69-
### In a stencil-starter app
70-
- Run `npm install my-component --save`
71-
- Add an import to the npm packages `import my-component;`
72-
- Then you can use the element anywhere in your template, JSX, html etc
26+
This project was built with StencilJS for more information on how to run it check [this readme](./stencil-readme.md).

‎stencil-readme.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)
2+
3+
# Stencil Component Starter
4+
5+
This is a starter project for building a standalone Web Component using Stencil.
6+
7+
Stencil is also great for building entire apps. For that, use the [stencil-app-starter](https://github.com/ionic-team/stencil-app-starter) instead.
8+
9+
# Stencil
10+
11+
Stencil is a compiler for building fast web apps using Web Components.
12+
13+
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements v1 spec.
14+
15+
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
16+
17+
## Getting Started
18+
19+
To start building a new web component using Stencil, clone this repo to a new directory:
20+
21+
```bash
22+
git clone https://github.com/ionic-team/stencil-component-starter.git my-component
23+
cd my-component
24+
git remote rm origin
25+
```
26+
27+
and run:
28+
29+
```bash
30+
npm install
31+
npm start
32+
```
33+
34+
To build the component for production, run:
35+
36+
```bash
37+
npm run build
38+
```
39+
40+
To run the unit tests for the components, run:
41+
42+
```bash
43+
npm test
44+
```
45+
46+
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
47+
48+
## Naming Components
49+
50+
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
51+
52+
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the Ionic generated web components use the prefix `ion`.
53+
54+
## Using this component
55+
56+
### Script tag
57+
58+
- [Publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages)
59+
- Put a script tag similar to this `<script src='https://unpkg.com/my-component@0.0.1/dist/mycomponent.js'></script>` in the head of your index.html
60+
- Then you can use the element anywhere in your template, JSX, html etc
61+
62+
### Node Modules
63+
64+
- Run `npm install my-component --save`
65+
- Put a script tag similar to this `<script src='node_modules/my-component/dist/mycomponent.js'></script>` in the head of your index.html
66+
- Then you can use the element anywhere in your template, JSX, html etc
67+
68+
### In a stencil-starter app
69+
70+
- Run `npm install my-component --save`
71+
- Add an import to the npm packages `import my-component;`
72+
- Then you can use the element anywhere in your template, JSX, html etc

0 commit comments

Comments
 (0)