-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (123 loc) · 4.51 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>NiceHTML</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
</head>
<body>
<script type="module" src="https://cdn.jsdelivr.net/gh/JonasLoos/NiceHTML@built/nicehtml.js"></script>
<script type="text/nicehtml">
nav #nav .navbar .navbar-menu .is-active
div .navbar-brand
h1 .title .navbar-item
"NiceHTML"
a .navbar-item href="#"
"Home"
a .navbar-item href="#overview"
"Overview"
a .navbar-item href="#transpilation"
"Transpilation"
a .navbar-item href="#example"
"Example"
div .navbar-item .is-right
a href="https://github.com/JonasLoos/NiceHTML" target="_blank"
"Github"
div .hero .is-primary .is-bold .pt-2 .pb-2
div .mt-1 .tile .is-horizontal .is-parent
div .tile .is-child
div .tile .is-child
pre style="background-color: #00000036; color: white;"
code
"""
div .section
h1 .title
"NiceHTML"
p
"like HTML but nicer!"
"""
div .tile .is-child
div .section .container .is-max-desktop
h2 .title #overview
"Overview"
p
"""
NiceHTML is a language designed for building web pages, very similar to html, but with a cleaner and more intuitive syntax.
It allows the creation of HTML structures using a more readable and maintainable code, improving the developer experience.
"""
p
"As NiceHTML is a small project in it's early stages, it is not recommended for use in production. "
"It should be seen more as a technology demonstration than enything else."
div .section .container .is-max-desktop
h2 .title #transpilation
"Transpilation"
p
"The NiceHTML code is transpiled to HTML using a transpiler built with Rust and WebAssembly (Wasm). Rust is a systems programming language focused on safety, speed, and concurrency, and WebAssembly is a binary instruction format for a stack-based virtual machine. This combination ensures a fast and efficient transpilation process."
div .section .container .is-max-desktop
h2 .title #Usage
"Usage"
p
"Add this line to your HTML file:"
pre
code
"""
<script type="module" src="https://cdn.jsdelivr.net/gh/JonasLoos/NiceHTML@built/nicehtml"></script>
"""
p .mt-4
"""
Then you can write NiceHTML inside script tags with a `type="text/nicehtml"` attribute:
"""
pre
code
"""<script type="text/nicehtml">...</script>"""
p .mt-4
b
"Using a fixed version"
p
"If you want to do more than just testing NiceHTML, it's probably better to fix the version you are using. E.g.:"
pre
code
"""
<script type="module" src="https://cdn.jsdelivr.net/gh/JonasLoos/[email protected]/nicehtml"></script>
"""
p .mt-4
"You can find all available versions as releases on "
a href="https://github.com/JonasLoos/NiceHTML/releases" target="_blank"
"Github"
"."
div .section .container .is-max-desktop
h2 .title #example
"Example"
p
"Below is an example of NiceHTML code:"
pre
code
"""
card(title, content) =
# this creates a card with title and content
div .card
h3 .card-header
$title
div .card-content
$content
div .section
$card("Card 1", "This is the content of card 1")
$card("Card 2", "This is the content of card 2")
"""
p .mt-4
"Another example is the source code of this website (press `ctrl+u` in most browsers to view it)."
div .section .container .is-max-desktop
h2 .title
"Styling"
p
"NiceHTML doesn't prove any styling options by itself. "
"However, to style the webpage, any CSS (framework) can be used. For example, this website uses the "
a href="https://bulma.io/"
"Bulma "
"CSS framework."
div #footer .footer
# TODO
</script>
</body>
</html>