first leet codes

static/paper_list.js

@@ -0,0 +1,86 @@
+'use strict';
+
+const UTag = props => {
+    const tag_name = props.tag;
+    const turl = "/?rank=tags&tags=" + tag_name;
+    return (
+        <div class='rel_utag'>
+            <a href={turl}>
+                {tag_name}
+            </a>
+        </div>
+    )
+}
+
+const Paper = props => {
+    const p = props.paper;
+    const adder = () => fetch("/add/" + p.id + "/" + prompt("tag name:"))
+                        .then(response => console.log(response.text()));
+    const utags = p.utags.map((utxt, ix) => <UTag key={ix} tag={utxt} />);
+    const similar_url = "/?rank=tags&pid=" + p.id;
+    return (
+    <div class='rel_paper'>
+        <div class="rel_add" onClick={adder}>+</div>
+        <div class="rel_score">{p.weight.toFixed(2)}</div>
+        <div class='rel_title'><a href={'http://arxiv.org/abs/' + p.id}>{p.title}</a></div>
+        <div class='rel_authors'>{p.authors}</div>
+        <div class="rel_time">{p.time}</div>
+        <div class='rel_tags'>{p.tags}</div>
+        <div class='rel_utags'>{utags}</div>
+        <div class='rel_abs'>{p.summary}</div>
+        <div class='rel_more'><a href={similar_url}>similar</a></div>
+    </div>
+    )
+}
+
+const PaperList = props => {
+    const lst = props.papers;
+    const plst = lst.map((jpaper, ix) => <Paper key={ix} paper={jpaper} />);
+    return (
+        <div>
+            <div id="paperList" class="rel_papers">
+                {plst}
+            </div>
+        </div>
+    )
+}
+
+const Tag = props => {
+    const t = props.tag;
+    const turl = "/?rank=tags&tags=" + t.name;
+    return (
+        <div class='rel_utag'>
+            <a href={turl}>
+                {t.n} {t.name}
+            </a>
+        </div>
+    )
+}
+
+const TagList = props => {
+    const lst = props.tags;
+    const tlst = lst.map((jtag, ix) => <Tag key={ix} tag={jtag} />);
+    const deleter = () => fetch("/del/" + prompt("delete tag name:"))
+                          .then(response => console.log(response.text()));
+    return (
+        <div>
+            <div class="rel_del" onClick={deleter}>-</div>
+            <div id="tagList" class="rel_utags">
+                {tlst}
+            </div>
+        </div>
+    )
+}
+
+const Opts = props => {
+    const g = props.gvars;
+    return (
+        <div>
+             time filter (days): <input type="text" value={g.time_filter} />
+        </div>
+    )
+}
+
+ReactDOM.render(<PaperList papers={papers} />, document.getElementById('wrap'))
+ReactDOM.render(<TagList tags={tags} />, document.getElementById('tagwrap'))
+//ReactDOM.render(<Opts gvars={gvars} />, document.getElementById('cbox'))

static/style.css

@@ -0,0 +1,125 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: sans-serif;
+    line-height: 1.2;
+}
+
+#header {
+    height: 24px;
+    background-color: #844;
+    color: white;
+    padding-top: 8px;
+    padding-left: 10px;
+    border-bottom: 1px solid #622;
+}
+#controls {
+    margin: 10px 40px 0 40px;
+    background-color: #eee;
+}
+#wrap {
+    margin: 10px 40px 0 40px;
+    font-size: 18px;
+}
+#tagwrap {
+    margin: 10px 40px 0 40px;
+    font-size: 18px;
+}
+
+.rel_title {
+    display: inline-block;
+}
+
+.rel_title a {
+    color: #844;
+}
+
+.rel_paper {
+    margin-bottom: 10px;
+    padding: 10px;
+    background-color: #eee;
+    border-radius: 5px;
+}
+
+.rel_score {
+    display: inline-block;
+    margin-right: 6px;
+    font-weight: bold;
+}
+.rel_authors {
+    font-style: italic;
+    font-size: 16px;
+}
+.rel_time {
+    color: #050;
+    display: inline-block;
+    font-size: 16px;
+}
+.rel_abs {
+    color: #333;
+    font-size: 14px;
+}
+.rel_tags {
+    color: #009;
+    font-size: 16px;
+    display: inline-block;
+    margin-left: 5px;
+}
+.rel_utag {
+    background-color: #009;
+    color: #fff;
+    font-size: 16px;
+    display: inline-block;
+    margin-right: 5px;
+    padding: 0 4px 0 4px;
+    border-radius: 4px;
+}
+.rel_add {
+    position: absolute;
+    width: 26px;
+    height: 26px;
+    background-color: #55f;
+    color: white;
+    left: 7px;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 3px;
+}
+.rel_del {
+    position: absolute;
+    width: 22px;
+    height: 22px;
+    background-color: #f55;
+    color: white;
+    left: 7px;
+    cursor: pointer;
+    text-align: center;
+    border-radius: 3px;
+}
+.rel_utag a {
+    color: white;
+    text-decoration: none;
+}
+.rel more {
+    font-size: 10px;
+}
+#sbox {
+    width: 100%;
+}
+#qfield {
+    width: 100%;
+    box-sizing: border-box;
+
+    height: 40px;
+    font-size: 22px;
+
+    border: solid 1px #999;
+    color: "#333";
+
+    padding-left: 50px;
+
+    background-image: url('/static/search.png');
+    background-repeat: no-repeat;
+    background-position: left center;
+    outline: 0;
+  }