Skip to content

Commit

Permalink
add example app
Browse files Browse the repository at this point in the history
  • Loading branch information
lucaong committed Oct 20, 2018
1 parent 484228e commit 36374d9
Show file tree
Hide file tree
Showing 10 changed files with 6,448 additions and 0 deletions.
2 changes: 2 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@
/closet
/tmp
/dist
/examples/dist
/examples/node_modules
12 changes: 12 additions & 0 deletions examples/.babelrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
{
"presets": [
["@babel/preset-env", {
"shippedProposals": true,
"useBuiltIns": 'usage',
"targets": { "browsers": "> 1%" }
}],
["@babel/preset-react", {}]
],
"plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

1 change: 1 addition & 0 deletions examples/billboard_1965-2015.json

Large diffs are not rendered by default.

191 changes: 191 additions & 0 deletions examples/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>
<head>
<title>MiniSearch Example</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet">
<style type='text/css'>
* {
box-sizing: border-box;
}
body {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
text-rendering: geometricPrecision;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #555;
}
a {
color: #0099cc;
}
h1, h2, h3, h4 {
margin: 1em 0 0.5em 0;
color: #333;
}
dl {
margin: 0;
}
dt, dd {
display: inline;
margin: 0;
}
dt {
font-weight: bold;
color: #333;
}
dd:after {
content: '';
display: block;
}
.App {
max-width: 900px;
margin: 0 auto;
padding: 1em;
display: flex;
flex-flow: column;
max-height: 100vh;
}
.Header h1 {
margin-top: 0;
}
.SearchBox {
position: relative;
}
.Search {
position: relative;
}
.Search button.clear {
position: absolute;
top: 0;
right: 0;
font-size: 1.5em;
z-index: 20;
border: none;
background: none;
}
.Search input {
width: 100%;
padding: 0.5em 1em;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 3px;
outline: none;
color: #555;
}
.SongList {
margin: 1em 0 0 0;
padding: 0;
list-style: none;
flex-grow: 1;
overflow-y: auto;
position: relative;
}
.SongList:before {
content: '';
display: block;
position: sticky;
z-index: 10;
left: 0;
right: 0;
top: -1px;
width: 100%;
height: 0.7em;
margin-bottom: -0.7em;
background: linear-gradient(white, rgba(255, 255, 255, 0));
}
.SongList:after {
content: '';
display: block;
position: sticky;
z-index: 10;
left: 0;
right: 0;
bottom: -1px;
width: 100%;
height: 0.7em;
margin-bottom: -0.7em;
background: linear-gradient(rgba(255, 255, 255, 0), white);
}
.Song {
border-bottom: 1px solid #ccc;
padding: 0.7em 0 1em 0;
}
.Song:last-child {
border-bottom: none;
}
.Song h3 {
margin-top: 0;
margin-bottom: 0.15em;
}
.SuggestionList {
list-style: none;
padding: 0;
border: 1px solid #ccc;
border-top: 0;
margin: 0 0 0.2em 0;
border-radius: 3px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
position: absolute;
z-index: 20;
left: 0;
right: 0;
}
.Suggestion {
padding: 0.5em 1em;
border-bottom: 1px solid #eee;
}
.Suggestion:last-child {
border: none;
}
.Suggestion.selected {
background: rgba(240, 240, 240, 0.95);
}
.Loader,
.Loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.Loader {
margin: 5px auto;
font-size: 5px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #0099cc;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div id='app'></div>
<script src='app.js' type='text/javascript'></script>
</body>
</html>
31 changes: 31 additions & 0 deletions examples/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{
"name": "minisearch-example",
"version": "1.0.0",
"description": "Example app for MiniSearch",
"main": "index.js",
"author": "Luca Ongaro",
"license": "MIT",
"scripts": {
"start": "webpack-dev-server",
"build": "webpack && yarn copy-to-docs",
"copy-to-docs": "mkdir -p ../docs/examples && cp ./{dist/app.js,index.html,billboard_1965-2015.json} ../docs/examples"
},
"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.1",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-0",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"regenerator-runtime": "^0.12.1",
"snazzy": "^8.0.0",
"standard": "^12.0.1",
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.9"
}
}
Loading

0 comments on commit 36374d9

Please sign in to comment.