lucaspalomodevelop/JSSTE
1
0
Fork 0
mirror of https://github.com/lucaspalomodevelop/JSSTE.git synced 2026-03-12 23:17:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

change readme.md

Browse Source
This commit is contained in:
lucasdevelop 2021-08-08 16:40:09 +02:00
parent cb6843b337
commit 430831bde9
2 changed files with 92 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

132
README.md
View File

@ -1,64 +1,112 @@
# JSSTE
![npm](https://img.shields.io/npm/v/jsste)
![NPM](https://img.shields.io/npm/l/jsste)
[![Downloads](https://img.shields.io/npm/dm/jsste)](https://www.npmjs.com/package/jsste)
[![NPM](https://nodei.co/npm/jsste.png)](https://www.npmjs.com/package/jsste)
## Desciption
JSSTE is a NodeJS-Module for rendering data in static HTML
## Example Page (JSON)
## Usage
```json
{
"_STYLES_": ["Example1", "Example2"],
"_TEMPLATE_": "firstexample",
"TITLE": "app2",
"LINK": "http://www.example.de"
}
### Installation
You can jsste install using [npm](https://www.npmjs.com/package/jsste) or [yarn](https://yarnpkg.com/package/jsste).
```sh
npm install jsste
```
## Example Template (HTML)
```sh
yarn add jsste
```
```html
<!DOCTYPE html>
<html lang="de">
#### including in your project
```javascript
const jsste = require("jsste");
```
### Rendering
```javascript
jsste.render(pagecode, tempaltecode);
```
#### Example
```javascript
const templatecode = `
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><[TITLE]></title>
<title>JSSTE Example</title>
</head>
<body>
<div id="app">
<a id="googlelink" href="<[LINK]>"><[LINK]></a>
</div>
<h1><[VARNAME1]></h1>
<p><[VARNAME2]></p>
</body>
</html>
```
`;
## Result (HTML)
const pagecode = {"VARNAME1":"Hello World", "VARNAME2":"This is a test"};
```html
let result = Jsste.render(pagecode, templatecode);
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>app2</title>
<link href="Example1.css" rel="stylesheet"></link>
<link href="Example2.css" rel="stylesheet"></link>
</head>
<body>
<div id="app">
<a id="googlelink" href="http://www.example.de">http://www.example.de</a>
</div>
</body>
</html>
// result
// <html>
// <head>
// <title>JSSTE Example</title>
// </head>
// <body>
// <h1>Hello World</h1>
// <p>This is a test</p>
// </body>
// </html>
```
## special constants:
### Special Variables
- `_TEMPLATE_` -> Defines the path to the temp file
- `_STYLES_` -> Defines a list of CSS files that will be implemented
#### Example
```javascript
const templatecode = `
<html>
<head>
<title>JSSTE Example</title>
</head>
<body>
<h1><[VARNAME1]></h1>
<p><[VARNAME2]></p>
</body>
</html>
`;
const pagecode = {"_STYLES_":["./main","./othercss"] "VARNAME1":"Hello World", "VARNAME2":"This is a test"};
let result = Jsste.render(pagecode, templatecode);
// result
// <html>
// <head>
// <title>JSSTE Example</title>
// <link rel="stylesheet" href="./main">
// <link rel="stylesheet" href="./othercss">
// </head>
// <body>
// <h1>Hello World</h1>
// <p>This is a test</p>
// </body>
// </html>
```

5
package.json
View File

@ -1,6 +1,6 @@
{
"name": "jsste",
"version": "1.1.1",
"version": "1.1.2",
"description": "A Javascript Static Template Emgine",
"main": "src/index.js",
"directories": {
@ -30,8 +30,7 @@
"url": "https://github.com/lucaspalomodevelop/JSSTE/issues"
},
"homepage": "https://github.com/lucaspalomodevelop/JSSTE#readme",
"dependencies": {
},
"dependencies": {},
"engines": {
"node": ">= 0.10.0"
},