tan-compose/docs.html at main · RA9/tan-compose · 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
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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Tan Compose Documentation" />
        <title>Tan Compose - Documentation</title>
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&display=swap" rel="stylesheet" />
        <style>
            * { margin: 0; padding: 0; box-sizing: border-box; }
            body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #333; background: #f5f5f5; min-height: 100vh; }
            .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
            header { background: #ffffff; padding: 20px 0; border-bottom: 1px solid #e9ecef; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
            .nav { display: flex; justify-content: space-between; align-items: center; }
            .nav h1 { font-size: 1.8rem; font-weight: 700; color: #6c757d; }
            .nav a { color: #6c757d; text-decoration: none; font-weight: 500; transition: color 0.3s; }
            .nav a:hover { color: #333; }
            main { padding: 40px 0; }
            .doc-section { background: #ffffff; border-radius: 12px; padding: 40px; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
            .doc-section h2 { font-size: 2rem; margin-bottom: 20px; color: #555; border-bottom: 2px solid #e9ecef; padding-bottom: 10px; }
            .doc-section h3 { font-size: 1.5rem; margin: 30px 0 15px; color: #6c757d; }
            .code-block { background: #1e1e1e; border-radius: 8px; padding: 20px; margin: 20px 0; overflow-x: auto; }
            .code-block code { color: #d4d4d4; font-family: "Courier New", monospace; font-size: 14px; line-height: 1.6; }
            footer { text-align: center; padding: 20px; background: #e9ecef; color: #333; margin-top: 40px; }
            @media (max-width: 768px) { .nav { flex-direction: column; gap: 15px; } .doc-section { padding: 20px; } .doc-section h2 { font-size: 1.5rem; } .code-block { font-size: 12px; } }
            @media (max-width: 480px) { .container { padding: 0 15px; } .doc-section { padding: 15px; } }
        </style>
    </head>
    <body>
        <header>
            <div class="container">
                <nav class="nav">
                    <h1>Tan Compose</h1>
                    <div>
                        <a href="index.html">Home</a> |
                        <a href="examples.html">Examples<</div>a> |
                        <a href="docs.html">Docs</a>
                    </div>
                </nav>
            </div>
        </header>

        <main class="container">
            <div class="doc-section">
                <h2>Getting Started</h2>
                <p>Welcome to Tan Compose! Build reusable web components with declarative syntax.</p>

                <</h2>h3>Installation</h3>
                <div class="code-block">
                    <code>npm install tan-compose</</code>code>
                </div>

                <h3>Basic Usage</h3>
                <div class="code-block">
                    <code>import { describe, build } from 'tan-compose';

const button = describe({
  tag: 'button',
  template: 'Click me!',
  styles: {
    padding: '10px 20px',
    backgroundColor: '#007bff',
    color: 'white',
    border: 'none',
    borderRadius: '4px'
  },
  action: () => alert('Button clicked!')
});

build('my-button', button);</code>
                </div>
            </div>

            <div class="doc-section">
                <h2>API Reference</h2>

                <h</h2>3>describe(options)</h3>
                <p>Creates a component description object.</p>
                <p</p>><strong>Parameters:</strong></p>
                <ul>
                    <li><</ul>code>tag</code> - HTML element type</li>
                    <li><code></code>template</code> - Inner HTML content</li>
                    <li><code>styles</code> - CSS styles object</li>
                    <li><code>theme</code></code> - CSS custom properties</li></code>
                    <li><code>children</code> - Nested components</li</code>>
                    <li><code>action</code> - Click handler</li>
                    <li><code>attributes</code</code>> - HTML attributes</li></code>
                    <li><code>beforeMount/afterMount</code> - Lifecycle hooks</li>
                    <li><code</code>>emit</code> - Custom events</li>
                </ul>

                <h3>build(tagName, description)</h3</h3>>
                <p>Registers a custom element.</p>
                <p><strong>Parameters:</strong></p>
                <ul>
                    <li><code>tagName</code> - Custom element name</li</p></ul></code>>
                    <li><code>description</code> - Component description</li>
                </ul>
            </div>

            <div class="doc-section">
                <h2>Examples<</code></h2>h2>
                <p>See the <a href="examples.html">examples page</a> for interactive demos.</p>
            </div>
        </main>

        <footer>
            <div class="container">
                <p>&copy; 2024 Tan Compose. MIT License.</p>
            </div>
        </footer>
    </body>
</html>