Skip to content

Commit e83351b

Browse files
ru51a4ru51a4
committed
fix
1 parent f1e07f3 commit e83351b

File tree

3 files changed

+133
-113
lines changed

3 files changed

+133
-113
lines changed

‎.DS_Store

0 Bytes
Binary file not shown.

‎demo/.DS_Store

6 KB
Binary file not shown.

‎index.html

Lines changed: 133 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,80 @@
11
<html>
2-
3-
<head>
4-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
5-
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
6-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
7-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
8-
<script src="https://cdn.jsdelivr.net/gh/ru51a4/minimal_react/dist/mreact.js"></script>
9-
<!-- and it's easy to individually load additional languages -->
10-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
11-
<meta charset="utf-8">
12-
<link rel="icon" type="image/png" href="favicon.png" />
13-
<title>rrender</title>
14-
<script>hljs.highlightAll();</script>
15-
</head>
16-
17-
<body>
18-
<div class="container">
19-
<header class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom">
20-
<a href="#" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none">
21-
<svg class="bi me-2" width="40" height="32">
22-
<use xlink:href="#bootstrap"></use>
23-
</svg>
24-
<span class="fs-4">rrender</span>
25-
</a>
26-
</header>
27-
28-
</div>
29-
30-
<div class="container d-flex flex-column align-items-center">
31-
<div class="row d-flex flex-column align-items-center">
32-
<h2><a href="https://github.com/ru51a4/minimal_react">rrender</a> - framework for building user interfaces
33-
</h2>
34-
<br><span style="text-align: center;">https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js</span>
35-
<br>
36-
2+
<head>
3+
<link
4+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
5+
rel="stylesheet"
6+
/>
7+
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
11+
/>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
13+
<script src="https://cdn.jsdelivr.net/gh/ru51a4/minimal_react/dist/mreact.js"></script>
14+
<!-- and it's easy to individually load additional languages -->
15+
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/go.min.js"></script>
16+
<meta charset="utf-8" />
17+
<link rel="icon" type="image/png" href="favicon.png" />
18+
<title>rrender</title>
19+
<script>
20+
hljs.highlightAll();
21+
</script>
22+
</head>
23+
24+
<body>
25+
<div class="container">
26+
<header
27+
class="d-flex flex-wrap justify-content-center py-3 mb-4 border-bottom"
28+
>
29+
<a
30+
href="#"
31+
class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-dark text-decoration-none"
32+
>
33+
<svg class="bi me-2" width="40" height="32">
34+
<use xlink:href="#bootstrap"></use>
35+
</svg>
36+
<span class="fs-4">rrender</span>
37+
</a>
38+
</header>
3739
</div>
38-
<div class="mt-5 row d-flex justify-content-center" style="text-align: center;">
39-
4040

41-
42-
43-
44-
<h2>online demo:</h2>
45-
<ul class="d-flex flex-column align-items-center">
46-
<li>
47-
<a href="./demo/todo/">todo app</a>
48-
</li>
49-
<li>
50-
<a href="./demo/iblockcms-frontend/">ajax-catalog</a>
51-
</li>
52-
<li>
53-
<a href="http://188.120.245.72:3000/">chat-app</a>
54-
</li>
55-
</ul>
56-
<br>
57-
</div>
58-
<div style="min-width: 100%;" class="row align-items-center">
59-
<div class="col-6">
60-
<pre>
41+
<div class="container d-flex flex-column align-items-center">
42+
<div class="row d-flex flex-column align-items-center">
43+
<h2>
44+
<a href="https://github.com/ru51a4/minimal_react"
45+
>rrender</a
46+
>
47+
- framework for building user interfaces
48+
</h2>
49+
<br /><span style="text-align: center"
50+
>https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js</span
51+
>
52+
<br />
53+
</div>
54+
<div
55+
class="mt-5 row d-flex justify-content-center"
56+
style="text-align: center"
57+
>
58+
<h2>online demo:</h2>
59+
<ul class="d-flex flex-column align-items-center">
60+
<li>
61+
<a href="./demo/todo/">todo app</a>
62+
</li>
63+
<li>
64+
<a
65+
href="http://188.120.245.72:88/demo/iblockcms-frontend/"
66+
>ajax-catalog</a
67+
>
68+
</li>
69+
<li>
70+
<a href="http://188.120.245.72:3000/">chat-app</a>
71+
</li>
72+
</ul>
73+
<br />
74+
</div>
75+
<div style="min-width: 100%" class="row align-items-center">
76+
<div class="col-6">
77+
<pre>
6178
<code class="language-js">
6279
class component_todo extends component {
6380
state = {
@@ -89,21 +106,30 @@ <h2>online demo:</h2>
89106
}
90107
</code>
91108
</pre>
109+
</div>
92110

111+
<div class="col-6 main d-flex justify-content-center">
112+
<todo />
113+
</div>
93114
</div>
94115

95-
<div class="col-6 main d-flex justify-content-center">
96-
<todo />
97-
</div>
98-
</div>
99-
100-
<div class="row ">
101-
<div class="d-flex flex-column align-items-center">
102-
<h2>fast start:</h2>
103-
<!-- HTML generated using hilite.me -->
104-
<div
105-
style="background: #ffffff; overflow:auto;width:auto;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;">
106-
<pre style="margin: 0; line-height: 125%"><span style="color: #007700">&lt;html&gt;</span>
116+
<div class="row">
117+
<div class="d-flex flex-column align-items-center">
118+
<h2>fast start:</h2>
119+
<!-- HTML generated using hilite.me -->
120+
<div
121+
style="
122+
background: #ffffff;
123+
overflow: auto;
124+
width: auto;
125+
border: solid gray;
126+
border-width: 0.1em 0.1em 0.1em 0.8em;
127+
padding: 0.2em 0.6em;
128+
"
129+
>
130+
<pre
131+
style="margin: 0; line-height: 125%"
132+
><span style="color: #007700">&lt;html&gt;</span>
107133
<span style="color: #007700">&lt;script </span><span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://cdn.jsdelivr.net/gh/ru51a4/rrender/dist/rrender.js&quot;</span><span style="color: #007700">&gt;&lt;/script&gt;</span>
108134

109135
<span style="color: #007700">&lt;body&gt;</span>
@@ -145,67 +171,61 @@ <h2>fast start:</h2>
145171

146172
<span style="color: #007700">&lt;/html&gt;</span>
147173
</pre>
174+
</div>
148175
</div>
149-
150176
</div>
151177
</div>
152-
153-
154-
</div>
155-
</body>
156-
<script>
157-
class component_todo extends component {
158-
state = {
159-
counter: 0,
160-
todos: [
161-
{ title: 'wash the dishes' },
162-
{ title: 'cook lunch' },
163-
{ title: 'cook dinner' }
164-
],
165-
};
166-
167-
body() {
168-
return `
178+
</body>
179+
<script>
180+
class component_todo extends component {
181+
state = {
182+
counter: 0,
183+
todos: [
184+
{ title: "wash the dishes" },
185+
{ title: "cook lunch" },
186+
{ title: "cook dinner" },
187+
],
188+
};
189+
190+
body() {
191+
return `
169192
170193
<div class="card" style="width: 18rem;">
171194
<div class="card-body d-flex flex-column align-items-center">
172195
<ul>
173196
<li r-for="todos">
174-
<span r-bind="title"></span>
197+
<span r-bind="title"></span>
175198
</li>
176-
</ul>
199+
</ul>
177200
<div>
178201
<span r-bind="counter"></span>
179202
<button class="btn btn-primary" r-click="increment">+</button>
180203
</div>
181204
</div>
182205
</div>
183-
184-
`
185-
};
186-
increment() {
187-
this.state.counter++;
188-
Render.renderDom();
189206
207+
`;
208+
}
209+
increment() {
210+
this.state.counter++;
211+
Render.renderDom();
212+
}
190213
}
191-
}
192-
var components = [
193-
{
194-
name: 'todo',
195-
component: component_todo
196-
},
197-
];
214+
var components = [
215+
{
216+
name: "todo",
217+
component: component_todo,
218+
},
219+
];
198220

199-
Render = new render(document.querySelector(".main"), components);
221+
Render = new render(document.querySelector(".main"), components);
200222

201-
function main() {
202-
Render.renderDom();
203-
Render.renderDom();
204-
Render.renderDom();
205-
206-
}
207-
208-
main();
209-
</script>
223+
function main() {
224+
Render.renderDom();
225+
Render.renderDom();
226+
Render.renderDom();
227+
}
210228

211-
</html>
229+
main();
230+
</script>
231+
</html>

0 commit comments

Comments
 (0)