Skip to content

Commit

Permalink
Update demo and docs: add slim versions
Browse files Browse the repository at this point in the history
  • Loading branch information
@kbumsik
kbumsik committed Jun 10, 2020
1 parent 4048742 commit dd6dfb5
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 53 deletions.
91 changes: 54 additions & 37 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,39 +30,57 @@ <h1>BlogSearch Demo Page</h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor03" aria-controls="navbarColor03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarColor03">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="https://github.com/kbumsik/blogsearch">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="https://github.com/kbumsik/blogsearch">Features</a>
</li>
</ul>
</div>
</nav>

<div class="container">
Precompiled databases:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active">
<input type="radio" checked="" dbPath="reactjs.org.crawler-example.db.wasm">
reactjs.org (using blogsearch-crawler)
</input>
</label>
<label class="btn btn-primary">
<input type="radio" dbPath="reactjs.org.gatsby-example.db.wasm">
reactjs.org (using gatsby-plugin-blogsearch)
</input>
</label>
<label class="btn btn-primary">
<input type="radio" dbPath="circleci-docs.jekyll-example.db.wasm">
CircleCI documentation (using jekyll-blogsearch)
</input>
</label>
<h2>
Example Index files
</h2>

<div class="row mb-3">
<div class="col-sm">
<a href="https://github.com/reactjs/reactjs.org">React JS Documentation</a>, 255 Pages, Gatsby<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/gatsby-plugin-blogsearch">the gatsby plugin for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.db.wasm">Full<br><small>1.09MB (2.57MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.slim.db.wasm">Slim<br><small>644KB (980KB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm">
<a href="https://github.com/kubernetes/website">Kubernetes Documentation</a>, 626 Pages, Hugo<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/blogsearch-crawler">the generic crawler for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.db.wasm">Full<br><small>3.43MB (8.31MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.slim.db.wasm">Slim<br><small>1.82MB (2.71MB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm">
<a href="https://github.com/circleci/circleci-docs">CircleCI documentation</a>, 645 Pages, Jekyll<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/jekyll-blogsearch">the Jekyll plugin for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.db.wasm">Full<br><small>2.05MB (5.76MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.slim.db.wasm">Slim<br><small>1MB (2.04MB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm input-group">
<label>Your own BlogSearch index file (for testing): <input type='file' id='dbfile' aria-describedby="btnGroupAddon"></label>
</div>
</div>
<label>Your own BlogSearch database file: <input type='file' id='dbfile'></label>
</div>

<script src="https://cdn.jsdelivr.net/npm/blogsearch@latest/dist/blogsearch.umd.js"></script>
Expand All @@ -88,15 +106,14 @@ <h1>BlogSearch Demo Page</h1>
})();

// Update database when clicked
for (const el of document.querySelectorAll('input:not(#q)')) {
el.onchange = function (event) {
for (const el of document.querySelectorAll('input:not(#q), .btn-primary')) {
function changeDB (event) {
const dbPath = getDBPath(this);
if (!dbPath) {
console.log('No file selected.');
return;
}
if (!dbPath) return;
updateDB(dbPath);
}
el.onclick = changeDB;
el.onchange = changeDB;
}

function getDBPath(element) {
Expand All @@ -111,8 +128,8 @@ <h1>BlogSearch Demo Page</h1>
}

// Manually trigger the first button to load the first database
const firstEvent = new Event("change");
const firstElement = document.querySelector('input:not(#q)');
const firstEvent = new Event("click");
const firstElement = document.querySelector('.btn-primary');
firstElement.dispatchEvent(firstEvent);

</script>
Expand Down
43 changes: 27 additions & 16 deletions examples/demo/public/blogsearch.umd.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,41 +39,53 @@ <h2>

<div class="row mb-3">
<div class="col-sm">
reactjs.org (using blogsearch-crawler)
<a href="https://github.com/reactjs/reactjs.org">React JS Documentation</a>, 229 Pages, Gatsby<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/blogsearch-crawler">the generic crawler for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="reactjs.org.crawler-example.db.wasm">Full</button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.crawler-example.slim.db.wasm">Slim</button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.crawler-example.db.wasm">Full<br><small>1.06MB (2.47MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.crawler-example.slim.db.wasm">Slim<br><small>566KB (884KB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm">
kubernetes.io (using blogsearch-crawler)
<a href="https://github.com/kubernetes/website">Kubernetes Documentation</a>, 626 Pages, Hugo<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/blogsearch-crawler">the generic crawler for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.db.wasm">Full</button>
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.slim.db.wasm">Slim</button>
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.db.wasm">Full<br><small>3.43MB (8.31MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="kubernetes.io.crawler-example.slim.db.wasm">Slim<br><small>1.82MB (2.71MB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm">
reactjs.org (using gatsby-plugin-blogsearch)
<a href="https://github.com/reactjs/reactjs.org">React JS Documentation</a>, 255 Pages, Gatsby<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/gatsby-plugin-blogsearch">the gatsby plugin for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.db.wasm">Full</button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.slim.db.wasm">Slim</button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.db.wasm">Full<br><small>1.09MB (2.57MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="reactjs.org.gatsby-example.slim.db.wasm">Slim<br><small>644KB (980KB uncompressed)</small></button>
</div>
</div>

<div class="row mb-3">
<div class="col-sm">
CircleCI documentation (using jekyll-blogsearch)
<a href="https://github.com/circleci/circleci-docs">CircleCI documentation</a>, 645 Pages, Jekyll<br>
<small>
built by <a href="https://github.com/kbumsik/blogsearch/tree/master/jekyll-blogsearch">the Jekyll plugin for BlogSearch</a>
</small>
</div>
<div class="col-sm btn-group">
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.db.wasm">Full</button>
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.slim.db.wasm">Slim</button>
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.db.wasm">Full<br><small>2.05MB (5.76MB uncompressed)</small></button>
<button type="button" class="btn btn-primary" dbPath="circleci-docs.jekyll-example.slim.db.wasm">Slim<br><small>1MB (2.04MB uncompressed)</small></button>
</div>
</div>

Expand Down Expand Up @@ -110,7 +122,7 @@ <h2>
})();

// Update database when clicked
for (const el of document.querySelectorAll('input:not(#q), button')) {
for (const el of document.querySelectorAll('input:not(#q), .btn-primary')) {
function changeDB (event) {
const dbPath = getDBPath(this);
if (!dbPath) return;
Expand All @@ -121,7 +133,6 @@ <h2>
}

function getDBPath(element) {
console.log(element)
if (element.type === 'file') {
// When you select your own db file.
const file = element.files[0];
Expand All @@ -133,8 +144,8 @@ <h2>
}

// Manually trigger the first button to load the first database
const firstEvent = new Event("change");
const firstElement = document.querySelector('input:not(#q)');
const firstEvent = new Event("click");
const firstElement = document.querySelector('input:not(#q), .btn-primary');
firstElement.dispatchEvent(firstEvent);

</script>
Expand Down

0 comments on commit dd6dfb5

Please sign in to comment.