Skip to content

Commit 340dad1

Browse files
author
=
committed
chore: add reset css and a demo example
1 parent 67367e3 commit 340dad1

File tree

8 files changed

+153
-9
lines changed

8 files changed

+153
-9
lines changed

‎build.sh

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
cd example2 && cargo run -- -b && \
2+
cd .. && \
13
rm -rf build/pkg && \
24
cd magic && \
35
wasm-pack build --target web && \

‎build/index.html

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,56 @@
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
77
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
88
<title>Lena - The Great Programming Language</title>
9-
<link rel="stylesheet" href="./style.css" />
9+
<style>
10+
/* http://meyerweb.com/eric/tools/css/reset/
11+
v2.0 | 20110126
12+
License: none (public domain)
13+
*/
14+
15+
html, body, div, span, applet, object, iframe,
16+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
17+
a, abbr, acronym, address, big, cite, code,
18+
del, dfn, em, img, ins, kbd, q, s, samp,
19+
small, strike, strong, sub, sup, tt, var,
20+
b, u, i, center,
21+
dl, dt, dd, ol, ul, li,
22+
fieldset, form, label, legend,
23+
table, caption, tbody, tfoot, thead, tr, th, td,
24+
article, aside, canvas, details, embed,
25+
figure, figcaption, footer, header, hgroup,
26+
menu, nav, output, ruby, section, summary,
27+
time, mark, audio, video {
28+
margin: 0;
29+
padding: 0;
30+
border: 0;
31+
font-size: 100%;
32+
font: inherit;
33+
vertical-align: baseline;
34+
}
35+
/* HTML5 display-role reset for older browsers */
36+
article, aside, details, figcaption, figure,
37+
footer, header, hgroup, menu, nav, section {
38+
display: block;
39+
}
40+
body {
41+
line-height: 1;
42+
}
43+
ol, ul {
44+
list-style: none;
45+
}
46+
blockquote, q {
47+
quotes: none;
48+
}
49+
blockquote:before, blockquote:after,
50+
q:before, q:after {
51+
content: '';
52+
content: none;
53+
}
54+
table {
55+
border-collapse: collapse;
56+
border-spacing: 0;
57+
}
58+
</style>
1059
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
1160
</head>
1261
<body>

‎build/index.js

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@ async function run(ir) {
33
await init();
44
mount(ir);
55
}
6-
let ir = {tag: 'App', value: '', info: { uses: ["./other.ln"],class: "this is my custom class",css: "display: flex;justify-content: center;flex-direction: column",id: "this is my custom id" }, children: [{tag: 'h1', value: '', info: { css: "text-align: center;background: grey;color: green" }, children: [{tag: 'text', value: 'can we parse the component above?', info: { }, children: []}]},
7-
{tag: 'Other', value: '', info: { class: "pretty_component",uses: ["./hello.ln"],css: "width: 100%;height: 100%;background: blue" }, children: [{tag: 'h1', value: '', info: { }, children: [{tag: 'text', value: 'this is another component that i am using', info: { }, children: []}]},
8-
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'Here is some more syntax to parse', info: { }, children: []}]},
9-
{tag: 'Hello', value: '', info: { class: "something" }, children: [{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'something else', info: { }, children: []}]}]}]},
10-
{tag: 'Other', value: '', info: { class: "pretty_component",uses: ["./hello.ln"],css: "width: 100%;height: 100%;background: blue" }, children: [{tag: 'h1', value: '', info: { }, children: [{tag: 'text', value: 'this is another component that i am using', info: { }, children: []}]},
11-
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'Here is some more syntax to parse', info: { }, children: []}]},
12-
{tag: 'Hello', value: '', info: { class: "something" }, children: [{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'something else', info: { }, children: []}]}]}]}]};
6+
let ir = {tag: 'App', value: '', info: { uses: ["./magic.ln"],css: "width: 100vw;height: 100vh;padding: 10px;background: #222;font-size: 16px;color: white" }, children: [{tag: 'h1', value: '', info: { css: "text-align: center" }, children: [{tag: 'text', value: 'this is the header of my app', info: { }, children: []}]},
7+
{tag: 'Magic', value: '', info: { }, children: [{tag: 'div', value: '', info: { css: "display: flex;flex-direction: column;justify-content: center;align-items: center;color: red" }, children: [{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'This is a totally reusable component', info: { }, children: []}]},
8+
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'believe me', info: { }, children: []}]},
9+
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'I promise', info: { }, children: []}]}]}]},
10+
{tag: 'Magic', value: '', info: { }, children: [{tag: 'div', value: '', info: { css: "display: flex;flex-direction: column;justify-content: center;align-items: center;color: red" }, children: [{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'This is a totally reusable component', info: { }, children: []}]},
11+
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'believe me', info: { }, children: []}]},
12+
{tag: 'p', value: '', info: { }, children: [{tag: 'text', value: 'I promise', info: { }, children: []}]}]}]}]};
1313
run(ir);

‎example/lena.toml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# define entry point and build directory
12
entry = "./main.ln"
23

34
[build]

‎example2/lena.toml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# define entry point and build directory
2+
entry = "./main.ln"
3+
4+
[build]
5+
dir = "../build"

‎example2/magic.ln

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
Magic {
2+
div {
3+
css: {
4+
display: "flex"
5+
flex-direction: "column"
6+
justify-content: "center"
7+
align-items: "center"
8+
color: "red"
9+
}
10+
11+
p { "This is a totally reusable component" }
12+
p { "believe me" }
13+
p { "I promise" }
14+
}
15+
}

‎example2/main.ln

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
App {
2+
uses: [
3+
"./magic.ln"
4+
],
5+
css: {
6+
width: "100vw"
7+
height: "100vh"
8+
padding: "10px"
9+
background: "#222"
10+
font-size: "16px"
11+
color: "white"
12+
}
13+
14+
15+
h1 {
16+
css: {
17+
text-align: "center"
18+
}
19+
"this is the header of my app"
20+
}
21+
Magic {}
22+
Magic {}
23+
}

‎src/main.rs

Lines changed: 50 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,56 @@ fn scaffold_build_dir(path: PathBuf, js_obj_str: String) {
3636
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
3737
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
3838
<title>Lena - The Great Programming Language</title>
39-
<link rel="stylesheet" href="./style.css" />
39+
<style>
40+
/* http://meyerweb.com/eric/tools/css/reset/
41+
v2.0 | 20110126
42+
License: none (public domain)
43+
*/
44+
45+
html, body, div, span, applet, object, iframe,
46+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
47+
a, abbr, acronym, address, big, cite, code,
48+
del, dfn, em, img, ins, kbd, q, s, samp,
49+
small, strike, strong, sub, sup, tt, var,
50+
b, u, i, center,
51+
dl, dt, dd, ol, ul, li,
52+
fieldset, form, label, legend,
53+
table, caption, tbody, tfoot, thead, tr, th, td,
54+
article, aside, canvas, details, embed,
55+
figure, figcaption, footer, header, hgroup,
56+
menu, nav, output, ruby, section, summary,
57+
time, mark, audio, video {
58+
margin: 0;
59+
padding: 0;
60+
border: 0;
61+
font-size: 100%;
62+
font: inherit;
63+
vertical-align: baseline;
64+
}
65+
/* HTML5 display-role reset for older browsers */
66+
article, aside, details, figcaption, figure,
67+
footer, header, hgroup, menu, nav, section {
68+
display: block;
69+
}
70+
body {
71+
line-height: 1;
72+
}
73+
ol, ul {
74+
list-style: none;
75+
}
76+
blockquote, q {
77+
quotes: none;
78+
}
79+
blockquote:before, blockquote:after,
80+
q:before, q:after {
81+
content: '';
82+
content: none;
83+
}
84+
table {
85+
border-collapse: collapse;
86+
border-spacing: 0;
87+
}
88+
</style>
4089
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
4190
</head>
4291
<body>

0 commit comments

Comments
 (0)