-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
180 lines (158 loc) · 8.57 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stupid Simple React - React-in-HTML from a 21kb bundle</title>
<meta name="description"
content="ssreact uses preact and a tiny JSX compiler and some scaffolding to make it possible to run react directly in HTML with a single script import. The bundle is just 21KB minified, small enough to use in production if you ask me." />
<meta name="robots" content="index, follow" />
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://ssreact.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="React-in-HTML from a 21kb bundle" />
<meta property="og:description"
content="ssreact uses preact and a tiny JSX compiler and some scaffolding to make it possible to run react directly in HTML with a single script import. The bundle is just 21KB minified, small enough to use in production if you ask me." />
<meta property="og:image" content="https://quickog.com/screenshot/ssreact.com" />
<meta property="og:image:alt"
content="ssreact uses preact and a tiny JSX compiler and some scaffolding to make it possible to run react directly in HTML with a single script import. The bundle is just 21KB minified, small enough to use in production if you ask me." />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:domain" content="ssreact.com" />
<meta property="twitter:url" content="https://ssreact.com" />
<meta name="twitter:title" content="React-in-HTML from a 21kb bundle" />
<meta name="twitter:description"
content="ssreact uses preact and a tiny JSX compiler and some scaffolding to make it possible to run react directly in HTML with a single script import. The bundle is just 21KB minified, small enough to use in production if you ask me." />
<meta name="twitter:image" content="https://quickog.com/screenshot/ssreact.com" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css">
<style>
@keyframes float {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(-10px);
}
100% {
transform: translateY(0px);
}
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes fade-in-up {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fade-in-up 0.6s ease-out forwards;
}
.stagger-delay-1 {
animation-delay: 0.2s;
}
.stagger-delay-2 {
animation-delay: 0.4s;
}
.stagger-delay-3 {
animation-delay: 0.6s;
}
</style>
</head>
<body class="min-h-screen flex flex-col bg-gradient-to-br from-gray-50 to-blue-50">
<header class="bg-gradient-to-r from-blue-600 to-blue-700 text-white py-16 px-4 relative overflow-hidden">
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\" 60\" height=\"60\" viewBox=\"0 0 60
60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg
fill=\"%23ffffff\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36
34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6
4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>
<div class="max-w-4xl mx-auto text-center relative">
<h1 class="text-6xl font-bold mb-6 float-animation">Stupid Simple React</h1>
<p class="text-xl text-blue-100 mb-8 fade-in-up opacity-0">Because React doesn't have to be complicated.</p>
<div class="flex justify-center gap-4 fade-in-up opacity-0 stagger-delay-1">
<a href="playground.html"
class="inline-flex items-center bg-white text-blue-600 px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-50 transition-all transform hover:scale-105">
Try Playground
</a>
<a href="https://github.com/janwilmake/ssreact"
class="inline-flex items-center bg-blue-700 text-white px-8 py-3 rounded-lg text-lg font-semibold hover:bg-blue-800 transition-all transform hover:scale-105">
<svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<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>
GitHub
</a>
</div>
</div>
</header>
<main class="flex-grow container mx-auto px-4 py-16 max-w-4xl">
<div id="ssreact.DemoComponent" class="fade-in-up opacity-0 stagger-delay-2"></div>
<section class="mt-20 fade-in-up opacity-0 stagger-delay-3">
<h2 class="text-4xl font-bold mb-8 text-gray-800">Ridiculously Easy to Use</h2>
<div class="bg-gray-900 rounded-xl p-8 overflow-x-auto shadow-xl">
<pre><code class="language-jsx">// 1. Add the script
<script src="https://ssreact.com/min.js"></script>
// 2. Write your component
<script type="text/babel">
function Greeting({ name }) {
const [count, setCount] = React.useState(0);
return (
<div onClick={() => setCount(count + 1)}>
Hello {name}! Clicks: {count}
</div>
);
}
</script>
// 3. Use it with ssreact.ComponentName
<div id="ssreact.Greeting"></div></code></pre>
</div>
</section>
</main>
<footer class="bg-gradient-to-r from-gray-900 to-gray-800 text-white py-12 px-4">
<div class="max-w-4xl mx-auto text-center">
<p class="text-gray-400 font-mono mb-4">keep it simple, stupid!</p>
<div class="flex justify-center space-x-6">
<a href="https://github.com/janwilmake/ssreactr"
class="text-gray-400 hover:text-white transition-colors">
GitHub
</a>
<a href="playground.html" class="text-gray-400 hover:text-white transition-colors">
Playground
</a>
</div>
</div>
</footer>
<script type="text/babel">
function DemoComponent() {
const [count, setCount] = React.useState(0);
return (
<div class="bg-white p-8 rounded-xl shadow-xl text-center transform transition-all hover:shadow-2xl">
<h2 class="text-3xl font-bold mb-6 text-gray-800">Try Me!</h2>
<div
onClick={() => setCount(count + 1)}
class="inline-block cursor-pointer bg-gradient-to-r from-blue-500 to-blue-600 text-white px-8 py-4 rounded-lg hover:from-blue-600 hover:to-blue-700 transition-all transform hover:scale-105"
>
Clicked {count} times
</div>
</div>
);
}
</script>
<script>
// Initialize Prism.js for syntax highlighting
Prism.highlightAll();
</script>
</body>
</html>