jdormit/looped-in
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Display data about stories, set up fetch item infrastructure

Browse Source
This commit is contained in:
Jeremy Dormitzer 2018-01-19 10:22:35 -05:00
parent 356cffabd3
commit 77fdb84d20
No known key found for this signature in database
GPG Key ID: 04F17C0F5A32C320
7 changed files with 186 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
ext/css/sidebar.css
View File

@ -1,197 +1,197 @@
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Hair.eot');
src: url('../fonts/eot/FiraSans-Hair.eot');
src: local('Fira Sans Hair'),
url('eot/FiraSans-Hair.eot') format('embedded-opentype'),
url('woff/FiraSans-Hair.woff') format('woff'),
url('ttf/FiraSans-Hair.ttf') format('truetype');
url('../fonts/eot/FiraSans-Hair.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Hair.woff') format('woff'),
url('../fonts/ttf/FiraSans-Hair.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-HairItalic.eot');
src: url('../fonts/eot/FiraSans-HairItalic.eot');
src: local('Fira Sans Hair Italic'),
url('eot/FiraSans-HairItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-HairItalic.woff') format('woff'),
url('ttf/FiraSans-HairItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-HairItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-HairItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-HairItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-UltraLight.eot');
src: url('../fonts/eot/FiraSans-UltraLight.eot');
src: local('Fira Sans UltraLight'),
url('eot/FiraSans-UltraLight.eot') format('embedded-opentype'),
url('woff/FiraSans-UltraLight.woff') format('woff'),
url('ttf/FiraSans-UltraLight.ttf') format('truetype');
url('../fonts/eot/FiraSans-UltraLight.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-UltraLight.woff') format('woff'),
url('../fonts/ttf/FiraSans-UltraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-UltraLightItalic.eot');
src: url('../fonts/eot/FiraSans-UltraLightItalic.eot');
src: local('Fira Sans UltraLight Italic'),
url('eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-UltraLightItalic.woff') format('woff'),
url('ttf/FiraSans-UltraLightItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-UltraLightItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-UltraLightItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-UltraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Light.eot');
src: url('../fonts/eot/FiraSans-Light.eot');
src: local('Fira Sans Light'),
url('eot/FiraSans-Light.eot') format('embedded-opentype'),
url('woff/FiraSans-Light.woff') format('woff'),
url('ttf/FiraSans-Light.ttf') format('truetype');
url('../fonts/eot/FiraSans-Light.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Light.woff') format('woff'),
url('../fonts/ttf/FiraSans-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-LightItalic.eot');
src: url('../fonts/eot/FiraSans-LightItalic.eot');
src: local('Fira Sans Light Italic'),
url('eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-LightItalic.woff') format('woff'),
url('ttf/FiraSans-LightItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-LightItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-LightItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Regular.eot');
src: url('../fonts/eot/FiraSans-Regular.eot');
src: local('Fira Sans Regular'),
url('eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('woff/FiraSans-Regular.woff') format('woff'),
url('ttf/FiraSans-Regular.ttf') format('truetype');
url('../fonts/eot/FiraSans-Regular.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Regular.woff') format('woff'),
url('../fonts/ttf/FiraSans-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Italic.eot');
src: url('../fonts/eot/FiraSans-Italic.eot');
src: local('Fira Sans Regular Italic'),
url('eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('woff/FiraSans-Italic.woff') format('woff'),
url('ttf/FiraSans-Italic.ttf') format('truetype');
url('../fonts/eot/FiraSans-Italic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Italic.woff') format('woff'),
url('../fonts/ttf/FiraSans-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Medium.eot');
src: url('../fonts/eot/FiraSans-Medium.eot');
src: local('Fira Sans Medium'),
url('eot/FiraSans-Medium.eot') format('embedded-opentype'),
url('woff/FiraSans-Medium.woff') format('woff'),
url('ttf/FiraSans-Medium.ttf') format('truetype');
url('../fonts/eot/FiraSans-Medium.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Medium.woff') format('woff'),
url('../fonts/ttf/FiraSans-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-MediumItalic.eot');
src: url('../fonts/eot/FiraSans-MediumItalic.eot');
src: local('Fira Sans Medium Italic'),
url('eot/FiraSans-MediumItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-MediumItalic.woff') format('woff'),
url('ttf/FiraSans-MediumItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-MediumItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-MediumItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-SemiBold.eot');
src: url('../fonts/eot/FiraSans-SemiBold.eot');
src: local('Fira Sans SemiBold'),
url('eot/FiraSans-SemiBold.eot') format('embedded-opentype'),
url('woff/FiraSans-SemiBold.woff') format('woff'),
url('ttf/FiraSans-SemiBold.ttf') format('truetype');
url('../fonts/eot/FiraSans-SemiBold.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-SemiBold.woff') format('woff'),
url('../fonts/ttf/FiraSans-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-SemiBoldItalic.eot');
src: url('../fonts/eot/FiraSans-SemiBoldItalic.eot');
src: local('Fira Sans SemiBold Italic'),
url('eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-SemiBoldItalic.woff') format('woff'),
url('ttf/FiraSans-SemiBoldItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-SemiBoldItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-SemiBoldItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Bold.eot');
src: url('../fonts/eot/FiraSans-Bold.eot');
src: local('Fira Sans Bold'),
url('eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('woff/FiraSans-Bold.woff') format('woff'),
url('ttf/FiraSans-Bold.ttf') format('truetype');
url('../fonts/eot/FiraSans-Bold.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Bold.woff') format('woff'),
url('../fonts/ttf/FiraSans-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-BoldItalic.eot');
src: url('../fonts/eot/FiraSans-BoldItalic.eot');
src: local('Fira Sans Bold Italic'),
url('eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-BoldItalic.woff') format('woff'),
url('ttf/FiraSans-BoldItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-BoldItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-BoldItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-ExtraBold.eot');
src: url('../fonts/eot/FiraSans-ExtraBold.eot');
src: local('Fira Sans ExtraBold'),
url('eot/FiraSans-ExtraBold.eot') format('embedded-opentype'),
url('woff/FiraSans-ExtraBold.woff') format('woff'),
url('ttf/FiraSans-ExtraBold.ttf') format('truetype');
url('../fonts/eot/FiraSans-ExtraBold.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-ExtraBold.woff') format('woff'),
url('../fonts/ttf/FiraSans-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-ExtraBoldItalic.eot');
src: url('../fonts/eot/FiraSans-ExtraBoldItalic.eot');
src: local('Fira Sans ExtraBold Italic'),
url('eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-ExtraBoldItalic.woff') format('woff'),
url('ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-ExtraBoldItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-ExtraBoldItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-Heavy.eot');
src: url('../fonts/eot/FiraSans-Heavy.eot');
src: local('Fira Sans Heavy'),
url('eot/FiraSans-Heavy.eot') format('embedded-opentype'),
url('woff/FiraSans-Heavy.woff') format('woff'),
url('ttf/FiraSans-Heavy.ttf') format('truetype');
url('../fonts/eot/FiraSans-Heavy.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-Heavy.woff') format('woff'),
url('../fonts/ttf/FiraSans-Heavy.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face{
font-family: 'Fira Sans';
src: url('eot/FiraSans-HeavyItalic.eot');
src: url('../fonts/eot/FiraSans-HeavyItalic.eot');
src: local('Fira Sans Heavy Italic'),
url('eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'),
url('woff/FiraSans-HeavyItalic.woff') format('woff'),
url('ttf/FiraSans-HeavyItalic.ttf') format('truetype');
url('../fonts/eot/FiraSans-HeavyItalic.eot') format('embedded-opentype'),
url('../fonts/woff/FiraSans-HeavyItalic.woff') format('woff'),
url('../fonts/ttf/FiraSans-HeavyItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@ -199,22 +199,22 @@
@font-face{
font-family: 'Fira Mono';
src: url('eot/FiraMono-Regular.eot');
src: url('../fonts/eot/FiraMono-Regular.eot');
src: local('Fira Mono'),
url('eot/FiraMono-Regular.eot') format('embedded-opentype'),
url('woff/FiraMono-Regular.woff') format('woff'),
url('ttf/FiraMono-Regular.ttf') format('truetype');
url('../fonts/eot/FiraMono-Regular.eot') format('embedded-opentype'),
url('../fonts/woff/FiraMono-Regular.woff') format('woff'),
url('../fonts/ttf/FiraMono-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face{
font-family: 'Fira Mono';
src: url('eot/FiraMono-Bold.eot');
src: url('../fonts/eot/FiraMono-Bold.eot');
src: local('Fira Mono Bold'),
url('eot/FiraMono-Bold.eot') format('embedded-opentype'),
url('woff/FiraMono-Bold.woff') format('woff'),
url('ttf/FiraMono-Bold.ttf') format('truetype');
url('../fonts/eot/FiraMono-Bold.eot') format('embedded-opentype'),
url('../fonts/woff/FiraMono-Bold.woff') format('woff'),
url('../fonts/ttf/FiraMono-Bold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
@ -258,9 +258,21 @@ html, body {
margin-top: 8px;
padding: 8px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: 0 1px 4px rgba(12, 12, 13, 0.1);
}
.card.clickable:hover {
box-shadow: 0 2px 8px rgba(12, 12, 13, 0.1);
}
.commentsIndicator {
margin-top: 8px;
display: flex;
justify-content: center;
}
.title30 {
font-size: 22px;
font-weight: 300;
@ -281,6 +293,24 @@ html, body {
font-weight: 400;
}
.caption20 {
font-size: 13px;
font-weight: 400;
color: #737373;
}
.caption30 {
font-size: 15px;
font-weight: 400;
color: #737373;
}
.caption10 {
font-size: 11px;
font-weight: 400;
color: #737373;
}
.iconButton {
background-color: inherit;
border: none;

1
ext/js/moment-range.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
ext/js/moment.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
ext/sidebar.html
View File

@ -4,6 +4,8 @@
<meta charset="utf-8">
<link rel="stylesheet" href="css/sidebar.css">
<script src="js/browser-polyfill.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/moment-range.min.js"></script>
<script src="js/generated/out/cljs_base.js"></script>
</head>
<body>

5
src/looped_in/background.cljs
View File

@ -64,9 +64,8 @@
(defn handle-message [msg sender respond]
(case (.-type msg)
"hits" (channel->promise (go @hits))
"fetchItems" (do (log/debug "received fetch items message")
(channel->promise
(go (clj->js (<! (hn/fetch-items @object-ids))))))))
"fetchItem" (channel->promise
(go (clj->js (<! (hn/fetch-item (.-id msg))))))))
(-> js/browser
(.-tabs)

49
src/looped_in/components.cljs
View File

@ -1,11 +1,58 @@
(ns looped-in.components
(:require [goog.dom :as dom]
[looped-in.logging :as log]))
[goog.dom.classlist :as classes]
[goog.events :as events]
[goog.object :as gobject]
[clojure.string :as string]
[looped-in.logging :as log])
(:import (goog.date DateTime)))
(def moment (-> (gobject/get js/window "moment-range")
(.extendMoment js/moment)))
(defn card [& children]
(apply dom/createDom "div" "card" children))
(defn body30 [text]
(dom/createDom "span" "body30" text))
(defn caption30 [text]
(dom/createDom "span" "caption30" text))
(defn comments-indicator [num-comments]
(dom/createDom "div"
"commentsIndicator"
(caption30 (str num-comments " comment" (when (not= num-comments 1) "s")))))
(defn get-time-ago-str
"Returns the string '<number> <unit>' based on how long ago `timestamp` was,
for example '3 days' or '5 hours'"
[timestamp]
(let [range (.range moment (moment timestamp) (moment))
years (.diff range "years")]
(if (> years 0)
(str years " year" (when (not= years 1) "s"))
(let [days (.diff range "days")]
(if (> days 0)
(str days " day" (when (not= days 1) "s"))
(let [hours (.diff range "hours")]
(str hours " hour" (when (not= days 1) "s"))))))))
(defn story-caption [points author timestamp]
(dom/createDom "div"
"storyCaption caption10"
(str points " points by " author " " (get-time-ago-str timestamp) " ago")))
(defn loader []
(apply dom/createDom "div" "spinner"
(for [i (range 1 6)]
(dom/createDom "div" (str "rect" i)))))
(defn with-listener [el type listener]
(events/listen el type listener)
el)
(defn with-classes [el & classes]
(doseq [class (filter #(not (string/blank? %)) classes)]
(classes/add el class))
el)

33
src/looped_in/sidebar.cljs
View File

@ -64,7 +64,7 @@
(defn model
"Returns initial sidebar state"
[]
{:items ()
{:item ()
:hits ()
:depth []
:loading false})
@ -73,7 +73,7 @@
"Given a message and the old state, returns the new state"
[msg state]
(case (:type msg)
:items (assoc state :items (:items msg))
:item (assoc state :item (:item msg))
:hits (assoc state :hits (:hits msg))
:loading (assoc state :loading (:loading msg))
state))
@ -84,7 +84,20 @@
(log/debug state)
(if (:loading state)
(components/loader)
(map #(components/card (:title %)) (:hits state))
(map #(-> (components/card
(components/body30 (:title %))
(components/story-caption (:points %)
(:author %)
(* (:created_at_i %) 1000))
(components/comments-indicator (:num_comments %)))
((fn [card]
(if (> (:num_comments %) 0)
(components/with-classes card "clickable")
card)))
(components/with-listener
"click"
(fn [e] (log/debug %))))
(:hits state))
#_(let [current-item (get-in-items (:items state) (:depth state))]
(if (> (count current-item) 1)
(map #(components/card (:title %)) current-item)
@ -132,18 +145,16 @@
(array-seq)
((fn [hits] (map obj->clj hits))))))
(defn fetch-items
"Fetch items matching the URL"
[]
(defn fetch-item
"Fetch the item with id `id`"
[id]
(go (-> js/browser
(.-runtime)
(.sendMessage (clj->js {:type "fetchItems"}))
(.sendMessage (clj->js {:type "fetchItem"
:id id}))
(promise->channel)
(<!)
(array-seq)
((fn [items] (filter #(not (nil? %)) items)))
((fn [items] (map obj->clj items)))
((fn [items] (sort-by :points #(compare %2 %1) items))))))
(obj->clj))))
(defn init
"Initializes the sidebar"