@encores/formatter v0.2.6

Formatter

A simply formatter for any Articles and News

Install

npm i @encores/formatter
# or
yarn add @encores/formatter

Get Started

// Import Formatter Package
import Formatter from "@encores/formatter";

/* Import Formatter Style */
@import url("@encores/formatter");

How to Use ?

1. Initialize

// Set Styles of Formatter
const formatterOption = {
  global: {
    color: `black`
  },
  title: {
    color: `tomato`
  },
  section: {
    color: `dimgray`
  }
};

// Set Custom Template
const formatterTemplate = `
<div class="formatter">\
	{{= it.name }}
	{{? it.title }}
	<h1 class="title">{{= it.title }}</h1>\
	{{? }}
	{{? it.author || it.time }}
	<div>\
		{{? it.author }}
		<span class="author">{{= it.author }}</span>\
		{{? }}
		{{? it.time }}
		<span class="time">{{= it.time }}</span>\
		{{? }}
	</div>\
	{{? }}
	<article class="section">\
		{{~ it.section:item:index }}\
		<p>{{= item }}</p>\
		{{~ }}\
	</article>\
</div>\
`;

// Instantiate Formatter
const formatter = new Formatter(formatterOption, () => formatterTemplate);

2. Compile

// Wrap Necessary Tags -- Plain Text Only
const content = `<h1>${title}</h1><div>${content}</div>`;

// Compile
const article = formatter.compile(content);

or Precise

const article = formatter.compile({
  title: `How to use Formatter ?`,
  content: `This is a manual on how to use Formatter`,
  author: `joenix`,
  time: `0516.2020`,
  name() {
    return `<span>name</span>`;
  }
});