Skip to content

Instantly share code, notes, and snippets.

@ferryzhou

ferryzhou/README.md

Last active July 11, 2022 15:23
Show Gist options
  • Save ferryzhou/5e756f5c558d03adc0c9a3bd235552a1 to your computer and use it in GitHub Desktop.
Save ferryzhou/5e756f5c558d03adc0c9a3bd235552a1 to your computer and use it in GitHub Desktop.
Download ZIP
Use riot and ajax to show data from a restful api using postgrest. also use bootswatch for theme.
Raw
README.md
  1. start restful api server

postgrest "host=localhost dbname=tnews" -a $(whoami) --schema public

  1. serve the html

python -m SimpleHTTPServer 8080

Raw
index.html
<!doctype html>
<html>
<head>
<title>Riot tnews</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/paper/bootstrap.min.css">
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.0.5/es5-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
<script>html5.addElements('todo')</script>
<![endif]-->
</head>
<body>
<tnews></tnews>
<script src="tnews.tag" type="riot/tag"></script>
<script src="https://rawgit.com/riot/riot/master/riot%2Bcompiler.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
riot.mount('tnews', {
title: 'Tnews',
items: ["a", "b"]
})
</script>
</body>
</html>
Raw
tnews.tag
<tnews>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">{ opts.title }</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link1</a></li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</nav>
<ul>
<li each={ item in items }>{ item.title }</li>
</ul>
<!-- this script tag is optional -->
<script>
var self = this
var url = 'http://localhost:3000/articles?link=like.*medium*'
$.ajax({
url: url,
type: "GET",
beforeSend: function(xhr){xhr.setRequestHeader('Range', '0-4');},
success: function(data) {
self.items = data
self.update()
}
});
</script>
</tnews>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment