forked from jlord/sheetsee-pocket
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
82 lines (71 loc) · 3.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<html>
<head>
<title>Pocket Reads</title>
<meta charset="UTF-8">
<script type="text/javascript" src="js/ICanHaz.js"></script>
<script type="text/javascript" src='js/jquery.js '></script>
<script type="text/javascript" src='js/tabletop.js'></script>
<script type="text/javascript" src='js/site.js'></script>
<script type="text/javascript" src='js/sheetsee.js'></script>
<link rel="shortcut icon" href="https://raw.github.com/jlord/sheetsee-pocket/master/favicon-p.png"/>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link media="screen" rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="wrapper">
<div id="title"></div>
<ul class="nav">
<li>ARTICLES READ AND ARCHIVED</li>
<li>POWERED BY <a href="http://jlord.gitub.io/sheetsee.js" target="_blank">SHEETSEE.JS</a> AND <a href="http://www.ifttt.com" target="blank">IFTTT.COM</a> (AND <a href="http://www.getpocket.com/" target="_blank">POCKET</a>)</li>
<li><a class="dim" href="#info" target="_blank">INFO</a><span class="dim"> or</span></li>
<li><a class="dim" href="http://www.github.com/jlord/sheetsee-pocket#hi" target="_blank">SET UP YOUR ARCHIVE</a></li>
</ul>
<div id="filters" class="container">
<input id="articleSearch" type="text" placeholder="Search for.."></input>
<span class="clear sml-button">Clear</span>
<h3>Tags <span id="tags"></span>
</div>
<div id="articleTable"></div>
<div id="info">
<h2>INFO</h2>
<p>This is an open source, easy to replicate project by <a href="http://www.twitter.com/jllord" target="_blank">@jllord</a>. If you use <a href="http://www.getpocket.com" target="_blank">Pocket</a> to save articles for later, you can also use <a href="http://www.ifttt.com" target="_blank">ifttt.com</a> (if this than that) to automate sending the article details to a Google Spreadsheet once you've archived it. Once you have a Google Spreadsheet you can use <a href="http://jlord.github.io/sheetsee.js" target="_blank">sheetsee.js</a> to turn into a website like so. So many possibilities! See the <a href="http://www.github.com/jlord/sheetsee-pocket#hi" target="_blank">documentation</a> to learn how to set up your own or contribute code!</p>
</div>
</div><!-- end wrapper -->
<script id="title" type="text/html">
<h1><span class="highlighted">{{numArticles}}</span> Articles from Pocket</h1>
</script>
<script id="tags" type="text/html">
{{#rows}}
<span href="#" class="tag sml-button">{{.}}</span>
{{/rows}}
</script>
<script id="articleTable" type="text/html">
<table>
<tr><th class="fancy">№</th><th class="date">Date</th><th class="">Article</th><th>Tags</th></tr>
{{#rows}}
<tr class="{{rowNumber}}"><td class="light-type">{{rowNumber}}</td><td class="date">{{date}}</td><td class="article"><a href="{{url}}" target="_blank">{{article}}</a></td>
<td class="tag">{{#tags}}<a href="#">{{tag}}</a> {{/tags}}</td></tr>
{{/rows}}
</table>
</script>
<script>
document.addEventListener('DOMContentLoaded', function() {
var URL = "0Ao5u1U6KYND7dERheVpFZThEUkdPZnFXXzMxTzJ3dEE"
Tabletop.init( { key: URL, callback: showInfo, simpleSheet: true } )
})
function showInfo(data) {
var gData = separateTags(data)
drawTags(gData)
cleanDates(gData)
pageTitle(gData)
Sheetsee.makeTable(gData.reverse(), "#articleTable")
Sheetsee.initiateTableFilter(gData, "#articleSearch", "#articleTable")
$(document).on("click", ".tag", function(event){
var tag = $(event.target).text()
var tagFilter = getTagMatches(gData, tag)
Sheetsee.makeTable(tagFilter.reverse(), "#articleTable")
})
}
</script>
</body>
</html>