Add frontend

This commit is contained in:
Daoud Clarke 2021-03-14 13:28:32 +00:00
parent d7baa1f232
commit 980f084c08
6 changed files with 164 additions and 0 deletions

24
app.py Normal file
View file

@ -0,0 +1,24 @@
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from starlette.responses import FileResponse, RedirectResponse
app = FastAPI()
@app.get("/search")
def search(s: str):
return RedirectResponse(f'https://www.google.com/search?q={s}')
@app.get("/complete")
def complete(q: str):
all_titles = ['some', 'nice results', 'here']
return [q, all_titles]
@app.get('/')
def index():
return FileResponse('static/index.html')
app.mount('/', StaticFiles(directory="static"), name="static")

16
static/index.html Normal file
View file

@ -0,0 +1,16 @@
<html>
<head>
<title>Stoatally Different</title>
<link rel="search"
type="application/opensearchdescription+xml"
title="Stoatally Different"
href="http://localhost:8000/plugin.xml">
</head>
<body>
Stoatally different.
<form action="/search">
<input type="search" name="s" />
</form>
</body>
</html>

48
static/landing.html Normal file
View file

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>%s</title>
<link rel="search"
type="application/opensearchdescription+xml"
title="Stoatally Different"
href="https://stoatally-different.appspot.com/plugin.xml">
<!--BOOTSTRAP-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link href="typeaheadjs.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
%s
<div id="remote">
<form action="/search">
<input class="typeahead" type="search" placeholder="Search" name="s">
<!--<input type="search" name="s" />-->
</form>
</div>
<!--BOOTSTRAP-->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="typeahead.js"></script>
<script>
var bestPictures = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
remote: {
url: '/complete?q=%%QUERY',
wildcard: '%%QUERY'
}
});
$('#remote .typeahead').typeahead(null, {
name: 'best-pictures',
display: 'value',
source: bestPictures
});
</script>
</body>
</html>

10
static/plugin.xml Normal file

File diff suppressed because one or more lines are too long

58
static/typeahead.css Normal file
View file

@ -0,0 +1,58 @@
span.twitter-typeahead .tt-menu {
cursor: pointer;
}
.dropdown-menu, span.twitter-typeahead .tt-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 1rem;
color: #373a3c;
text-align: left;
list-style: none;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: 0.25rem; }
span.twitter-typeahead .tt-suggestion {
display: block;
width: 100%;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.5;
color: #373a3c;
text-align: inherit;
white-space: nowrap;
background: none;
border: 0; }
span.twitter-typeahead .tt-suggestion:focus, .dropdown-item:hover, span.twitter-typeahead .tt-suggestion:hover {
color: #2b2d2f;
text-decoration: none;
background-color: #f5f5f5; }
span.twitter-typeahead .active.tt-suggestion, span.twitter-typeahead .tt-suggestion.tt-cursor, span.twitter-typeahead .active.tt-suggestion:focus, span.twitter-typeahead .tt-suggestion.tt-cursor:focus, span.twitter-typeahead .active.tt-suggestion:hover, span.twitter-typeahead .tt-suggestion.tt-cursor:hover {
color: #fff;
text-decoration: none;
background-color: #0275d8;
outline: 0; }
span.twitter-typeahead .disabled.tt-suggestion, span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover {
color: #818a91; }
span.twitter-typeahead .disabled.tt-suggestion:focus, span.twitter-typeahead .disabled.tt-suggestion:hover {
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
background-image: none;
filter: "progid:DXImageTransform.Microsoft.gradient(enabled = false)"; }
span.twitter-typeahead {
width: 100%; }
.input-group span.twitter-typeahead {
display: block !important; }
.input-group span.twitter-typeahead .tt-menu {
top: 2.375rem !important; }

8
static/typeahead.js Normal file

File diff suppressed because one or more lines are too long