-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocs.html
More file actions
204 lines (179 loc) · 7.75 KB
/
docs.html
File metadata and controls
204 lines (179 loc) · 7.75 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>FallbackJS Documentation</title>
<!-- Tailwind CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Apple-style font -->
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
"SF Pro Display", Inter, system-ui, sans-serif;
}
a:hover { text-decoration: underline; }
</style>
</head>
<body class="bg-white text-gray-900 antialiased">
<!-- Header -->
<header class="border-b border-gray-200">
<div class="max-w-6xl mx-auto px-6 py-4 flex items-center justify-between">
<a href="index.html" class="font-semibold text-lg tracking-tight">FallbackJS</a>
<nav class="flex gap-6 text-sm text-gray-600">
<a href="index.html" class="hover:text-black">Home</a>
<a href="#installation" class="hover:text-black">Installation</a>
<a href="#failures" class="hover:text-black">Failures</a>
<a href="#accessibility" class="hover:text-black">Accessibility</a>
<a href="#faq" class="hover:text-black">FAQ</a>
</nav>
</div>
</header>
<main class="max-w-6xl mx-auto px-6 py-16 space-y-16">
<!-- Introduction -->
<section id="introduction" class="space-y-4">
<h1 class="text-4xl font-semibold">FallbackJS Documentation</h1>
<p class="text-gray-600 leading-relaxed text-lg">
FallbackJS is a tiny, zero-configuration JavaScript library that provides
clean, user-friendly fallback pages for common frontend failures.
It works automatically by adding a single script tag. No backend. No tracking.
</p>
<p class="text-gray-600 leading-relaxed text-lg">
The goal is simple: make your site usable even when things go wrong.
FallbackJS is about <strong>presentation</strong>, not prevention or verification.
</p>
</section>
<!-- Installation -->
<section id="installation" class="space-y-4">
<h2 class="text-3xl font-semibold">Installation</h2>
<p class="text-gray-600 leading-relaxed">
Adding FallbackJS to your project takes one line. You can choose either the development (readable) version for debugging or the minified production version for faster loading.
</p>
<!-- Development version -->
<div class="relative rounded-xl border border-gray-200 bg-gray-50 p-6">
<h3 class="font-medium mb-2">Development version (readable)</h3>
<button
id="copyDevBtn"
class="absolute top-4 right-4 flex items-center gap-2
text-sm text-gray-600 hover:text-black transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16h8M8 12h8m-2-8H8a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V8l-4-4z"/>
</svg>
<span id="copyDevText">Copy code</span>
</button>
<pre id="codeDev" class="text-sm text-gray-800 overflow-x-auto">
<script src="https://fallbackjs.netlify.app/fallback.js"></script>
</pre>
</div>
<!-- Production version -->
<div class="relative rounded-xl border border-gray-200 bg-gray-50 p-6 mt-6">
<h3 class="font-medium mb-2">Production / Minified version</h3>
<button
id="copyProdBtn"
class="absolute top-4 right-4 flex items-center gap-2
text-sm text-gray-600 hover:text-black transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M8 16h8M8 12h8m-2-8H8a2 2 0 00-2 2v12a2 2 0 002 2h8a2 2 0 002-2V8l-4-4z"/>
</svg>
<span id="copyProdText">Copy code</span>
</button>
<pre id="codeProd" class="text-sm text-gray-800 overflow-x-auto">
<script src="https://fallbackjs.netlify.app/fallback.min.js"></script>
</pre>
</div>
</section>
<!-- Failure Types -->
<section id="failures" class="space-y-6">
<h2 class="text-3xl font-semibold">Handled Failures</h2>
<p class="text-gray-600 leading-relaxed">
FallbackJS automatically detects and handles these failure scenarios:
</p>
<ul class="list-disc pl-6 space-y-2 text-gray-600">
<li><strong>Offline / Network unavailable:</strong> Displays a minimal offline page.</li>
<li><strong>Broken images:</strong> Replaces missing images with clean placeholders.</li>
<li><strong>Runtime JavaScript errors:</strong> Shows a safe fallback message without breaking your page.</li>
</ul>
<p class="text-gray-600 leading-relaxed">
Each fallback is minimal, responsive, and non-intrusive.
</p>
</section>
<!-- Accessibility -->
<section id="accessibility" class="space-y-4">
<h2 class="text-3xl font-semibold">Accessibility</h2>
<p class="text-gray-600 leading-relaxed">
FallbackJS follows basic accessibility principles:
</p>
<ul class="list-disc pl-6 space-y-2 text-gray-600">
<li>Semantic HTML for all fallback pages.</li>
<li>Keyboard interactions are safe.</li>
<li>High contrast, readable typography.</li>
<li>Minimal motion, avoids flashing or animation-induced distractions.</li>
</ul>
</section>
<!-- FAQ -->
<section id="faq" class="space-y-4">
<h2 class="text-3xl font-semibold">FAQ</h2>
<div class="space-y-2">
<p class="font-medium">Q: Why not handle errors myself?</p>
<p class="text-gray-600 leading-relaxed">
FallbackJS is a convenience for common failures. You can still handle errors manually,
but FallbackJS reduces boilerplate and improves UX quickly.
</p>
<p class="font-medium">Q: Does FallbackJS replace monitoring tools?</p>
<p class="text-gray-600 leading-relaxed">
No. FallbackJS only manages presentation of failures, not logging or prevention.
</p>
<p class="font-medium">Q: Can I style it?</p>
<p class="text-gray-600 leading-relaxed">
Yes, the fallback UI is fully customizable with CSS.
</p>
</div>
</section>
</main>
<!-- Back to home -->
<div class="max-w-6xl mx-auto px-6 pb-16 text-center">
<a href="index.html"
class="inline-block rounded-full border border-gray-200 bg-white px-6 py-3
shadow hover:shadow-md transition text-gray-900 font-medium">
← Back to Home
</a>
</div>
<!-- Footer -->
<footer class="border-t border-gray-200">
<div class="max-w-6xl mx-auto px-6 py-10 flex flex-col md:flex-row
items-center justify-between gap-4 text-sm text-gray-600">
<span>© 2026 FallbackJS</span>
<div class="flex gap-4">
<a href="index.html" class="hover:text-black">Home</a>
<a href="README.md" class="hover:text-black">README</a>
<a href="LICENSE" class="hover:text-black">License</a>
</div>
</div>
</footer>
<!-- Scripts -->
<script>
// Copy button logic for development version
const btnDev = document.getElementById("copyDevBtn");
const textDev = document.getElementById("copyDevText");
const codeDev = document.getElementById("codeDev").innerText;
btnDev.onclick = async () => {
await navigator.clipboard.writeText(codeDev);
textDev.textContent = "Copied";
setTimeout(() => (textDev.textContent = "Copy code"), 2000);
};
// Copy button logic for production version
const btnProd = document.getElementById("copyProdBtn");
const textProd = document.getElementById("copyProdText");
const codeProd = document.getElementById("codeProd").innerText;
btnProd.onclick = async () => {
await navigator.clipboard.writeText(codeProd);
textProd.textContent = "Copied";
setTimeout(() => (textProd.textContent = "Copy code"), 2000);
};
</script>
</body>
</html>