mirror of https://github.com/freeCodeCamp/devdocs
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
3.9 KiB
89 lines
3.9 KiB
app.templates.offlinePage = (docs) => `\
|
|
<h1 class="_lined-heading">Offline Documentation</h1>
|
|
|
|
<div class="_docs-tools">
|
|
<label>
|
|
<input type="checkbox" name="autoUpdate" value="1" ${
|
|
app.settings.get("manualUpdate") ? "" : "checked"
|
|
}>Install updates automatically
|
|
</label>
|
|
<div class="_docs-links">
|
|
<button type="button" class="_btn-link" data-action-all="install">Install all</button><button type="button" class="_btn-link" data-action-all="update"><strong>Update all</strong></button><button type="button" class="_btn-link" data-action-all="uninstall">Uninstall all</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="_table">
|
|
<table class="_docs">
|
|
<tr>
|
|
<th>Documentation</th>
|
|
<th class="_docs-size">Size</th>
|
|
<th>Status</th>
|
|
<th>Action</th>
|
|
</tr>
|
|
${docs}
|
|
</table>
|
|
</div>
|
|
<p class="_note"><strong>Note:</strong> your browser may delete DevDocs's offline data if your computer is running low on disk space and you haven't used the app in a while. Load this page before going offline to make sure the data is still there.
|
|
<h2 class="_block-heading">Questions & Answers</h2>
|
|
<dl>
|
|
<dt>How does this work?
|
|
<dd>Each page is cached as a key-value pair in <a href="https://devdocs.io/dom/indexeddb_api">IndexedDB</a> (downloaded from a single file).<br>
|
|
The app also uses <a href="https://devdocs.io/dom/service_worker_api/using_service_workers">Service Workers</a> and <a href="https://devdocs.io/dom/web_storage_api">localStorage</a> to cache the assets and index files.
|
|
<dt>Can I close the tab/browser?
|
|
<dd>${canICloseTheTab()}
|
|
<dt>What if I don't update a documentation?
|
|
<dd>You'll see outdated content and some pages will be missing or broken, because the rest of the app (including data for the search and sidebar) uses a different caching mechanism that's updated automatically.
|
|
<dt>I found a bug, where do I report it?
|
|
<dd>In the <a href="https://github.com/freeCodeCamp/devdocs/issues">issue tracker</a>. Thanks!
|
|
<dt>How do I uninstall/reset the app?
|
|
<dd>Click <a href="#" data-behavior="reset">here</a>.
|
|
<dt>Why aren't all documentations listed above?
|
|
<dd>You have to <a href="/settings">enable</a> them first.
|
|
</dl>\
|
|
`;
|
|
|
|
var canICloseTheTab = function () {
|
|
if (app.ServiceWorker.isEnabled()) {
|
|
return ' Yes! Even offline, you can open a new tab, go to <a href="//devdocs.io">devdocs.io</a>, and everything will work as if you were online (provided you installed all the documentations you want to use beforehand). ';
|
|
} else {
|
|
let reason = "aren't available in your browser (or are disabled)";
|
|
|
|
if (app.config.env !== "production") {
|
|
reason =
|
|
"are disabled in your development instance of DevDocs (enable them by setting the <code>ENABLE_SERVICE_WORKER</code> environment variable to <code>true</code>)";
|
|
}
|
|
|
|
return ` No. Service Workers ${reason}, so loading <a href="//devdocs.io">devdocs.io</a> offline won't work.<br>
|
|
The current tab will continue to function even when you go offline (provided you installed all the documentations beforehand). `;
|
|
}
|
|
};
|
|
|
|
app.templates.offlineDoc = function (doc, status) {
|
|
const outdated = doc.isOutdated(status);
|
|
|
|
let html = `\
|
|
<tr data-slug="${doc.slug}"${outdated ? ' class="_highlight"' : ""}>
|
|
<td class="_docs-name _icon-${doc.icon}">${doc.fullName}</td>
|
|
<td class="_docs-size">${
|
|
Math.ceil(doc.db_size / 100000) / 10
|
|
} <small>MB</small></td>\
|
|
`;
|
|
|
|
html += !(status && status.installed)
|
|
? `\
|
|
<td>-</td>
|
|
<td><button type="button" class="_btn-link" data-action="install">Install</button></td>\
|
|
`
|
|
: outdated
|
|
? `\
|
|
<td><strong>Outdated</strong></td>
|
|
<td><button type="button" class="_btn-link _bold" data-action="update">Update</button> - <button type="button" class="_btn-link" data-action="uninstall">Uninstall</button></td>\
|
|
`
|
|
: `\
|
|
<td>Up‑to‑date</td>
|
|
<td><button type="button" class="_btn-link" data-action="uninstall">Uninstall</button></td>\
|
|
`;
|
|
|
|
return html + "</tr>";
|
|
};
|