tinypine-docs/index.html at main · DigitalCoreHub/tinypine-docs · 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
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TinyPine.js - Minimal Reactive JavaScript Framework</title>
  <meta name="description" content="Official documentation for TinyPine.js - a minimal reactive JavaScript framework">
  <link rel="icon" type="image/svg+xml" href="./favicon.svg">
    <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=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
  <script src="https://cdn.jsdelivr.net/npm/marked@15.0.6/marked.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/tinypine@1.3.0/dist/tinypine.min.js"></script>
</head>
<body class="h-full bg-gradient-to-br from-gray-50 via-pine-50/30 to-gray-50 dark:from-gray-900 dark:via-pine-950/20 dark:to-gray-900 transition-all duration-500">

  <!-- Animated Background -->
  <div class="fixed inset-0 overflow-hidden pointer-events-none">
    <div class="absolute top-0 left-1/4 w-96 h-96 bg-pine-400/10 dark:bg-pine-600/10 rounded-full blur-3xl animate-pulse"></div>
    <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-blue-400/10 dark:bg-blue-600/10 rounded-full blur-3xl animate-pulse" style="animation-delay: 2s;"></div>
  </div>

  <!-- App Container -->
  <div id="app" t-data="app()" class="h-full flex flex-col relative z-10">

    <!-- Header -->
    <header class="sticky top-0 z-50 backdrop-blur-xl bg-white/80 dark:bg-gray-900/80 border-b border-gray-200/50 dark:border-gray-700/50 shadow-lg shadow-pine-500/5">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between h-16">

          <!-- Logo & Title -->
          <div class="flex items-center space-x-4">
            <button
              t-click="window.toggleSidebar()"
              class="lg:hidden p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
              aria-label="Toggle sidebar"
            >
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
              </svg>
            </button>

            <a href="#/" class="flex items-center space-x-3 group">
              <span class="text-3xl group-hover:scale-110 transition-transform duration-300">🌲</span>
              <span class="text-xl font-bold bg-gradient-to-r from-pine-600 to-pine-800 dark:from-pine-400 dark:to-pine-600 bg-clip-text text-transparent">TinyPine<span class="text-gray-900 dark:text-white">.js</span></span>
            </a>
          </div>

          <!-- Search Bar -->
          <div class="hidden md:block flex-1 max-w-lg mx-8">
            <div class="relative">
              <input
                type="text"
                t-model="searchQuery"
                placeholder="Search documentation..."
                class="w-full px-4 py-2 pl-10 pr-4 rounded-xl border border-gray-300/50 dark:border-gray-600/50 bg-white/50 dark:bg-gray-800/50 backdrop-blur-sm text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-pine-500 focus:border-transparent focus:bg-white dark:focus:bg-gray-800 transition-all duration-300 placeholder:text-gray-400"
              >
              <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
          </div>

          <!-- Theme Toggle & GitHub -->
          <div class="flex items-center space-x-2">
            <button
              t-click="window.toggleTheme()"
              class="p-2.5 rounded-xl hover:bg-pine-100 dark:hover:bg-pine-900/30 hover:scale-110 transition-all duration-300"
              aria-label="Toggle theme"
            >
              <svg t-show="!isDark" class="w-5 h-5 text-gray-700 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
              </svg>
              <svg t-show="isDark" class="w-5 h-5 text-gray-700 dark:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
              </svg>
            </button>

            <a
              href="https://github.com/DigitalCoreHub/tinypine"
              target="_blank"
              class="p-2.5 rounded-xl hover:bg-pine-100 dark:hover:bg-pine-900/30 hover:scale-110 transition-all duration-300"
              aria-label="GitHub"
            >
              <svg class="w-5 h-5 text-gray-700 dark:text-white" fill="currentColor" viewBox="0 0 24 24">
                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
              </svg>
            </a>
          </div>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <div class="flex-1 flex overflow-hidden">

      <!-- Sidebar -->
      <aside
        t-show="sidebarOpen"
        class="fixed lg:static inset-y-0 left-0 z-40 w-64 backdrop-blur-xl bg-white/80 dark:bg-gray-900/80 border-r border-gray-200/50 dark:border-gray-700/50 overflow-y-auto transform transition-all duration-300 lg:transform-none shadow-xl lg:shadow-none"
        style="top: 64px;"
      >
        <nav class="p-4 space-y-6">

          <!-- Getting Started -->
          <div>
            <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
              Getting Started
            </h3>
            <a href="#/docs/introduction" class="sidebar-link">Introduction</a>
            <a href="#/docs/installation" class="sidebar-link">Installation</a>
            <a href="#/docs/quick-start" class="sidebar-link">Quick Start</a>
          </div>

          <!-- Directives -->
          <div>
            <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
              Directives
            </h3>
            <a href="#/docs/directives/index" class="sidebar-link">Overview</a>

            <!-- Core -->
            <a href="#/docs/directives/core/t-data" class="sidebar-link">t-data</a>
            <a href="#/docs/directives/core/t-text" class="sidebar-link">t-text</a>
            <a href="#/docs/directives/core/t-html" class="sidebar-link">t-html</a>
            <a href="#/docs/directives/core/t-show" class="sidebar-link">t-show</a>
            <a href="#/docs/directives/core/t-click" class="sidebar-link">t-click</a>
            <a href="#/docs/directives/core/t-model" class="sidebar-link">t-model</a>
            <a href="#/docs/directives/core/t-class" class="sidebar-link">t-class</a>

            <!-- Structural -->
            <a href="#/docs/directives/structural/t-if" class="sidebar-link">t-if</a>
            <a href="#/docs/directives/structural/t-for" class="sidebar-link">t-for</a>
            <a href="#/docs/directives/structural/t-bind" class="sidebar-link">t-bind</a>
            <a href="#/docs/directives/structural/t-ref" class="sidebar-link">t-ref</a>
            <a href="#/docs/directives/structural/t-init" class="sidebar-link">t-init</a>

            <!-- Async -->
            <a href="#/docs/directives/async/t-fetch" class="sidebar-link">t-fetch</a>
            <a href="#/docs/directives/async/t-await" class="sidebar-link">t-await</a>
            <a href="#/docs/directives/async/t-loading" class="sidebar-link">t-loading</a>
            <a href="#/docs/directives/async/t-error" class="sidebar-link">t-error</a>

            <!-- Advanced -->
            <a href="#/docs/directives/advanced/t-transition" class="sidebar-link">t-transition</a>
            <a href="#/docs/directives/advanced/t-route" class="sidebar-link">t-route</a>
            <a href="#/docs/directives/advanced/t-text.lang" class="sidebar-link">t-text.lang</a>
            <a href="#/docs/directives/advanced/event-modifiers" class="sidebar-link">Event Modifiers</a>
            <a href="#/docs/directives/advanced/lifecycle-hooks" class="sidebar-link">Lifecycle Hooks</a>
          </div>

          <!-- Components -->
          <div>
            <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
              Components
            </h3>
            <a href="#/docs/components/tp-button" class="sidebar-link">tp-button</a>
            <a href="#/docs/components/tp-input" class="sidebar-link">tp-input</a>
          </div>

          <!-- Examples -->
          <div>
            <h3 class="px-4 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">
              Examples
            </h3>
            <a href="#/docs/examples/counter" class="sidebar-link">Counter</a>
            <a href="#/docs/examples/todo-list" class="sidebar-link">Todo List</a>
            <a href="#/docs/examples/form" class="sidebar-link">Form Handling</a>
          </div>

        </nav>
      </aside>

      <!-- Overlay for mobile -->
      <div
        t-show="sidebarOpen"
        t-click="window.toggleSidebar()"
        class="fixed inset-0 bg-black/50 z-30 lg:hidden"
      ></div>

      <!-- Content Area -->
      <main class="flex-1 overflow-y-auto">
        <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

          <!-- Loading State -->
          <div t-show="loading" class="flex items-center justify-center py-12">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-pine-600"></div>
          </div>

          <!-- Content -->
          <article
            id="markdown-content"
            class="prose prose-lg dark:prose-invert max-w-none prose-pre:bg-gray-900 prose-pre:text-gray-100"
          >
            <!-- Markdown content will be rendered here -->
          </article>

        </div>
      </main>

    </div>

  </div>

  <!-- Scripts -->
  <script type="module" src="./main.js"></script>

</body>
</html>