Skip to content

Commit 9713bd0

Browse files
brsoffbrsoff
authored
[PYT-61] Wire up Twitter timeline on homepage (pytorch#9)
1 parent 788533f commit 9713bd0

File tree

6 files changed

+208
-135
lines changed

6 files changed

+208
-135
lines changed

‎_includes/footer.html

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -79,14 +79,6 @@ <h2>Resources</h2>
7979
<a href="{{ site.external_urls.facebook }}" target="_blank" class="facebook"></a>
8080
<a href="{{ site.external_urls.twitter }}" target="_blank" class="twitter"></a>
8181
</div>
82-
83-
<div class="tweet">
84-
<p>"Pythia: a software suite for Visual Question Answering from FAIR. Includes code for the winning entry to the VQA Challenge 2018 http://"</p>
85-
86-
<div class="tweet-author">
87-
PyTorch, <a href="{{ site.external_urls.twitter }}" target="_blank" class="twitter-handle">@pytorch</a>
88-
</div>
89-
</div>
9082
</div>
9183
</div>
9284
</div>

‎_sass/base_styles.scss

Lines changed: 57 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ a, .btn {
9898
}
9999

100100
&.features-background {
101-
background-image: url("http://via.placeholder.com/2560x1280/f3f4f7");
101+
background-image: url("http://via.placeholder.com/2560x1280/f3f4f7");
102102
}
103103
}
104104

@@ -212,14 +212,64 @@ pre {
212212
background-color: $slate;
213213
}
214214

215+
.tweets-wrapper {
216+
width: 100%;
217+
218+
p {
219+
font-size: rem(16px);
220+
line-height: rem(24px);
221+
letter-spacing: 0.22px;
222+
}
223+
224+
ol {
225+
padding-left: 0;
226+
}
227+
228+
a {
229+
color: $orange;
230+
}
231+
232+
img,
233+
.timeline-Tweet-actions,
234+
.timeline-Tweet-media,
235+
.MediaCard {
236+
display: none !important;
237+
}
238+
}
239+
215240
.tweet {
216241
margin-bottom: 2.5rem;
242+
word-wrap: break-word;
217243

218-
p {
244+
a {
245+
color: $orange;
246+
display: inline;
247+
span {
248+
color: inherit;
249+
}
250+
}
251+
252+
p, span {
219253
font-size: 1rem;
220254
line-height: 1.5rem;
221255
letter-spacing: 0.22px;
222-
color: #939393;
256+
color: $very_dark_grey
257+
}
258+
259+
p {
260+
@include max-width-desktop {
261+
padding-right: 40px;
262+
}
263+
}
264+
265+
span.retweeted,
266+
span.in-reply-to {
267+
font-size: rem(13px);
268+
}
269+
270+
p.tweet-header {
271+
margin-bottom: rem(5px);
272+
line-height: rem(12px);
223273
}
224274

225275
.tweet-author {
@@ -235,10 +285,6 @@ pre {
235285
height: 16px;
236286
}
237287
}
238-
239-
a.twitter-handle {
240-
color: $orange;
241-
}
242288
}
243289

244290
.anchorjs-link {
@@ -408,3 +454,7 @@ pre {
408454
}
409455
}
410456
}
457+
458+
#twitter-widget iframe {
459+
display: none !important;
460+
}

‎_sass/footer.scss

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -42,14 +42,6 @@
4242
}
4343
}
4444

45-
.site-footer .tweet {
46-
color: $very_dark_grey;
47-
48-
p {
49-
font-size: rem(16px);
50-
}
51-
}
52-
5345
.docs-tutorials-resources {
5446
background-color: $slate;
5547
color: $white;

‎_sass/homepage.scss

Lines changed: 29 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -150,78 +150,53 @@
150150
}
151151
}
152152

153-
.pytorch-users-module {
154-
h2 {
155-
margin-bottom: rem(20px);
153+
.university-testimonials h2 {
154+
margin-bottom: rem(20px);
155+
@include desktop {
156+
margin-bottom: rem(90px);
156157
}
157158
}
158159

159-
.university-testimonials {
160-
.institution-name {
161-
margin-bottom: rem(20px);
162-
}
163-
164-
.carousel {
165-
width: 100%;
166-
margin: 0 auto;
167-
168-
@include max-width-desktop {
169-
width: 385px;
170-
}
171-
}
172-
173-
.carousel-item {
174-
img {
175-
width: 100%;
176-
margin-bottom: rem(18px);
177-
}
178-
179-
p {
180-
font-size: 1.5rem;
181-
letter-spacing: 0.25px;
182-
line-height: 2.25rem;
183-
color: $not_quite_black;
184-
margin-bottom: 1.625rem;
185-
}
186-
187-
.btn {
188-
padding-left: 0;
189-
}
190-
}
160+
.university-testimonials-content {
161+
margin-top: rem(40px);
162+
margin-bottom: rem(40px);
191163

192-
.carousel-control-prev {
193-
@include max-width-desktop {
194-
left: -65px;
195-
}
164+
@include desktop {
165+
margin-top: 0;
166+
margin-bottom: rem(100px);
196167
}
197168

198-
.carousel-control-next {
199-
@include max-width-desktop {
200-
right: -65px;
169+
.col-md-4 {
170+
margin-bottom: rem(40px);
171+
@include desktop {
172+
margin-bottom: 0;
201173
}
202174
}
203175

204-
.carousel-control-prev-icon {
205-
background-image: url($baseurl + "/assets/images/chevron-left-grey.svg");
206-
}
207-
208-
.carousel-control-next-icon {
209-
background-image: url($baseurl + "/assets/images/chevron-right-grey.svg");
176+
.institution-name {
177+
font-size: rem(24px);
178+
margin-bottom: rem(20px);
210179
}
211180

212-
.btn-link {
213-
color: inherit;
214-
padding-left: 0;
181+
p {
182+
color: $not_quite_black;
183+
font-size: rem(24px);
184+
letter-spacing: 0.25px;
185+
line-height: rem(36px);
215186
}
216187
}
217188

218-
.tweets-wrapper {
219-
margin-top: rem(32px);
189+
.follow-us-on-twitter h2 {
190+
margin-bottom: rem(20px);
220191
@include desktop {
221-
margin-top: rem(120px);
192+
margin-bottom: rem(70px);
222193
}
223194
}
224195

196+
.homepage-feature-module .tweets-wrapper p {
197+
font-size: rem(16px);
198+
}
199+
225200
.homepage .quick-starts {
226201
background: $medium_grey;
227202

‎assets/load-tweets.js

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
var twitter = {
2+
bind: function() {
3+
twitter.waitForIframe();
4+
},
5+
6+
updateInitialText(text) {
7+
$("[data-target='twitter-timeline']").text(text);
8+
},
9+
10+
waitForIframe: function() {
11+
var count = 0;
12+
var interval = setInterval(function() {
13+
var iframe = document.getElementById("twitter-widget-0");
14+
15+
if (iframe !== null) {
16+
clearInterval(interval);
17+
twitter.updateInitialText("");
18+
twitter.copyContent(iframe);
19+
}
20+
21+
// Give up after 5 seconds
22+
if (count >= 5) {
23+
clearInterval(interval);
24+
twitter.updateInitialText("Twitter widget could not be loaded.");
25+
} else {
26+
count += 1;
27+
}
28+
}, 1000);
29+
},
30+
31+
copyContent(iframe) {
32+
var tweets = $(iframe.contentWindow.document).
33+
find("ol.timeline-TweetList > li").
34+
map(function() {
35+
return {
36+
isRetweet: $(this).find('.timeline-Tweet-retweetCredit').length > 0,
37+
tweetAuthor: $(this).find('.tweetAuthor-screenName').text(),
38+
inReplyTo: $(this).find('.timeline-Tweet-inReplyTo').text(),
39+
tweetHTML: $(this).find('p.timeline-tweet-text').html()
40+
}
41+
}).get();
42+
43+
$("#twitter-widget-0").remove();
44+
45+
twitter.populateCustomTweets(tweets);
46+
},
47+
48+
populateCustomTweets(tweets) {
49+
var tweetsWrapper = $("<div class=\"row tweets-wrapper\"></div>");
50+
51+
tweets.forEach(function(tweet) {
52+
var tweetWrapper = $("<div class=\"col-md-4 tweet\"></div>");
53+
var metadata = $("<p class=\"tweet-header\"></p>");
54+
55+
if (tweet.isRetweet) {
56+
metadata.append("<span class=\"retweeted\">PyTorch Retweeted " + tweet.tweetAuthor + "</span><br />");
57+
}
58+
59+
if (tweet.inReplyTo) {
60+
metadata.append("<span class=\"in-reply-to\">" + tweet.inReplyTo + "</span>");
61+
}
62+
63+
tweetWrapper.append(metadata);
64+
65+
tweetWrapper.append("<p>" + tweet.tweetHTML + "</p>");
66+
67+
tweetWrapper.append(
68+
"<div class=\"tweet-author\"> \
69+
PyTorch, <a href=\"https://twitter.com/pytorch\" target=\"_blank\" class=\"twitter-handle\">@pytorch</a> \
70+
</div>"
71+
);
72+
73+
tweetsWrapper.append(tweetWrapper);
74+
});
75+
76+
$("[data-target='twitter-timeline']").append(tweetsWrapper);
77+
}
78+
}

0 commit comments

Comments
 (0)