Skip to content

Commit de37f0e

Browse files
cho45cho45
committed
fix readme.md and index.html
1 parent a01e2be commit de37f0e

File tree

3 files changed

+235
-3
lines changed

3 files changed

+235
-3
lines changed

‎README.md‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ SYNOPSIS
2525
<head>
2626
<title></title>
2727
<meta charset="utf-8"/>
28-
<script type="text/javascript" src="micro-template.js"></script>
29-
<script type="text/javascript" src="foo.js"></script>
3028
</head>
3129
<body>
3230
<script type="application/x-template" id="tmpl1">
@@ -40,6 +38,11 @@ SYNOPSIS
4038
<%=raw html %>
4139
</div>
4240
</script>
41+
<script type="module">
42+
import { extended as template } from './lib/micro-template.js';
43+
console.log('micro-template.js loaded', template);
44+
console.log('Template example:', template('tmpl1', { isFoo: true, foobar: "a", foobaz: "b" }));
45+
</script>
4346
</body>
4447
</html>
4548
```

‎index.html‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>micro-template.js Landing Page</title>
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css">
9+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js" defer></script>
10+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js" defer></script>
11+
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-markup.min.js" defer></script>
12+
<style>
13+
html {
14+
background: #f8fafc;
15+
}
16+
17+
body {
18+
background: #fff;
19+
color: #222;
20+
font-family: 'Fira Mono', 'Menlo', 'Consolas', 'monospace', 'sans-serif';
21+
margin: 0 auto;
22+
max-width: 820px;
23+
padding: 2.5em 1.5em 1.5em 1.5em;
24+
border-radius: 12px;
25+
box-shadow: 0 4px 32px #0001;
26+
}
27+
28+
header {
29+
text-align: center;
30+
margin-bottom: 2.5em;
31+
}
32+
33+
h1 {
34+
font-size: 2.5em;
35+
letter-spacing: -1px;
36+
margin-bottom: 0.2em;
37+
color: #222;
38+
}
39+
40+
.subtitle {
41+
color: #2d8f6f;
42+
font-size: 1.1em;
43+
margin-top: 0;
44+
margin-bottom: 0.5em;
45+
font-family: 'Fira Mono', 'Menlo', 'Consolas', 'monospace', 'sans-serif';
46+
}
47+
48+
h2 {
49+
color: #2d8f6f;
50+
font-size: 1.3em;
51+
margin-top: 2em;
52+
margin-bottom: 0.7em;
53+
border-left: 4px solid #2d8f6f;
54+
padding-left: 0.5em;
55+
letter-spacing: 0.5px;
56+
}
57+
58+
ul {
59+
padding-left: 1.5em;
60+
margin-bottom: 1.5em;
61+
}
62+
63+
li {
64+
margin-bottom: 0.5em;
65+
line-height: 1.7;
66+
}
67+
68+
.usage {
69+
margin-bottom: 2.5em;
70+
}
71+
72+
.usage-blocks {
73+
}
74+
75+
.usage-block {
76+
background: #f6f8fa;
77+
border-radius: 8px;
78+
padding: 1em 1em 0.5em 1em;
79+
margin-bottom: 1em;
80+
box-shadow: 0 2px 8px #0001;
81+
}
82+
83+
.usage-block h3 {
84+
margin-top: 0;
85+
color: #eab308;
86+
font-size: 1.1em;
87+
letter-spacing: 0.2px;
88+
}
89+
90+
pre {
91+
background: #f3f3f3;
92+
color: #2563eb;
93+
border-radius: 6px;
94+
padding: 1em;
95+
font-size: 0.98em;
96+
overflow-x: auto;
97+
margin: 0 0 1em 0;
98+
border: 1px solid #e5e7eb;
99+
}
100+
101+
code {
102+
font-family: inherit;
103+
}
104+
105+
.links {
106+
text-align: center;
107+
margin: 2.5em 0 2em 0;
108+
}
109+
110+
a.button {
111+
display: inline-block;
112+
padding: 0.7em 1.7em;
113+
background: linear-gradient(90deg, #2d8f6f 0%, #38bdf8 100%);
114+
color: #fff;
115+
font-weight: bold;
116+
border-radius: 6px;
117+
text-decoration: none;
118+
margin: 0 0.7em 0.7em 0;
119+
font-size: 1.1em;
120+
letter-spacing: 0.5px;
121+
box-shadow: 0 2px 8px #0001;
122+
transition: background 0.2s, color 0.2s;
123+
}
124+
125+
a.button:hover {
126+
background: linear-gradient(90deg, #eab308 0%, #2d8f6f 100%);
127+
color: #fff;
128+
}
129+
130+
.demo {
131+
margin-bottom: 2.5em;
132+
}
133+
134+
.demo-iframe {
135+
width: 100%;
136+
height: 480px;
137+
border: none;
138+
border-radius: 8px;
139+
box-shadow: 0 2px 16px #0001;
140+
background: #fff;
141+
margin-top: 1em;
142+
}
143+
144+
footer {
145+
text-align: center;
146+
color: #888;
147+
font-size: 0.98em;
148+
margin-top: 2.5em;
149+
padding-bottom: 1em;
150+
}
151+
152+
footer a {
153+
color: #2563eb;
154+
text-decoration: underline;
155+
font-weight: bold;
156+
transition: color 0.2s;
157+
}
158+
159+
footer a:hover {
160+
color: #eab308;
161+
}
162+
</style>
163+
</head>
164+
165+
<body>
166+
<header>
167+
<h1>micro-template.js</h1>
168+
<p class="subtitle">A minimal, blazing fast JavaScript template engine for hackers.</p>
169+
</header>
170+
<section class="features">
171+
<h2>Features</h2>
172+
<ul>
173+
<li>Ultra-lightweight and extremely fast</li>
174+
<li>All output is HTML-escaped by default for security</li>
175+
<li>Shows template line numbers on errors for easy debugging</li>
176+
<li>Supports extensions (<code>include</code> / <code>wrapper</code>)</li>
177+
</ul>
178+
</section>
179+
<section class="usage">
180+
<h2>Usage Example</h2>
181+
<div class="usage-blocks">
182+
<div class="usage-block">
183+
<h3>Basic</h3>
184+
<pre><code class="language-js">import { template } from 'micro-template';
185+
186+
const result = template('&lt;div&gt;&lt;%= message %&gt;&lt;/div&gt;', { message: 'Hello, inline!' });
187+
console.log(result); // &lt;div&gt;Hello, inline!&lt;/div&gt;
188+
</code></pre>
189+
</div>
190+
<div class="usage-block">
191+
<h3>In HTML</h3>
192+
<pre><code class="language-html">&lt;script type="application/x-template" id="tmpl1"&gt;
193+
&lt;div&gt;&lt;%= message %&gt;&lt;/div&gt;
194+
&lt;/script&gt;
195+
&lt;script type="module"&gt;
196+
import { extended as template } from './lib/micro-template.js';
197+
const html = template('tmpl1', { message: 'Hello, world!' });
198+
document.body.innerHTML += html;
199+
&lt;/script&gt;</code></pre>
200+
</div>
201+
<div class="usage-block">
202+
<h3>In Node.js</h3>
203+
<pre><code class="language-js">import { template } from 'micro-template';
204+
template.get = id =&gt; require('fs').readFileSync('tmpl/' + id + '.tmpl', 'utf-8');
205+
206+
const result = template('tmpl1', { message: 'Hello, Node!' });
207+
console.log(result);</code></pre>
208+
</div>
209+
</div>
210+
</section>
211+
<section class="links">
212+
<a class="button" href="https://github.com/cho45/micro-template.js" target="_blank">GitHub</a>
213+
<a class="button" href="https://cho45.github.io/micro-template.js/misc/demo.html" target="_blank">Demo Page</a>
214+
</section>
215+
<footer>
216+
<span>&copy; cho45 / <a href="https://github.com/cho45/micro-template.js" target="_blank">micro-template.js</a>
217+
- MIT License</span>
218+
</footer>
219+
<script type="application/x-template" id="tmpl1">
220+
<div><%= message %></div>
221+
</script>
222+
<script type="module">
223+
import { extended as template } from './lib/micro-template.js';
224+
console.log('micro-template.js loaded', template);
225+
console.log('Template example:', template('tmpl1', { message: 'Hello, world!' }));
226+
</script>
227+
</body>
228+
229+
</html>

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
},
1111
"scripts": {
1212
"test": "node --test",
13-
"serve-demo": "npx serve .",
13+
"serve": "npx serve .",
1414
"bench": "node --expose-gc ./misc/benchmark.js"
1515
},
1616
"keywords": [

0 commit comments

Comments
 (0)