tutorial/index.html at main · snojs/tutorial · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sno - Docs</title>
    <link rel="icon" type="image/x-icon" href="https://avatars.githubusercontent.com/u/149719209?s=200&v=4"/>
    <link rel="stylesheet" href="./style.css">
</head>
<body data="{count:0}">
    <div incl="./sidebar.html"></div>
    <div class="main">
        <br/><br/><h1>Getting Started</h1>
        <span class="hr"></span>
        <p>
            Building the web <b>{ your way }</b>
        </p>
        <span class="hr" style="opacity: 0;"></span>
        <p>
            Snocrystal <em>(v4)</em>
        </p>
        <span class="hr"></span>
        <em>Declarative UIs and you <b>never</b> touch your javascript.</em><br/>
        <p class="code">
            <!-- >&#62;  &#60; < -->
            &#60;body data='{count:0}'&#62;<br/>
            &nbsp;&nbsp;&#60;button onclick='$("count++")'&#62;Increment&#60;/button&#62;<br/>
            &nbsp;&nbsp;&#60;p react&#62;<br/>
            &nbsp;&nbsp;&nbsp;&nbsp;{{count}}<br/>
            &nbsp;&nbsp;&#60;/p&#62;<br/>
            &#60;/body&#62;
        </p>
        <p class="code">
            <button class="betterButton" onclick="$('count++')">+</button> <span react>{{count}}</span>
        </p>
        <h2>Never leave your HTML</h2>
        <span class="hr"></span>
        Sno is designed with tags that place the power of JS in HTML.<br/>
        Reactive state is as simple as <em>count: 0</em>.<br/><br/>
        <h2>How small?</h2>
        <span class="hr"></span>
        I mean <b>&#60; 300</b> lines of code. A build size of around 4kb!!<br/>
        <b>1 single</b> script tag.
        <p class="code">
            &#60;script src="https://snojs.github.io/sno/crystal.js"&#62;&#60;/script&#62;
        </p>
        <br/>
        <a href="./data.html">[Next]</a><br/><br/>
        <p class="last-update">This page was last update on Dec 5. 2024 by, Weston</p>
    </div>
    <script src='https://snojs.github.io/sno/crystal.js'></script>
</body>
</html>