b0e014ab95f6bdbb648df1e74f73118de23b71bb
[WebKit-https.git] / Websites / webkit.org / wp-content / themes / webkit / build-archives.php
1 <?php
2 /**
3  * Template Name: Build Archives
4  **/
5
6 WebKitBuildArchives::object();
7
8 class WebKitBuildArchives {
9
10     private static $object = null;
11
12     public static $platforms = array(
13         'mac-highsierra-x86_64' => 'High Sierra',
14         'mac-sierra-x86_64'     => 'Sierra',
15         'mac-elcapitan-x86_64'  => 'El Capitan',
16     );
17
18     public static function object() {
19         if (self::$object === null)
20             self::$object = new self();
21         return self::$object;
22     }
23
24     private function call ($endpoint, $params = array()) {
25         $url = add_query_arg($params, 'https://q1tzqfy48e.execute-api.us-west-2.amazonaws.com/v2/' . $endpoint);
26         $api = wp_remote_get($url);
27         $response = wp_remote_retrieve_body($api);
28
29         if (is_wp_error($response))
30             return $response;
31
32         return json_decode($response);
33     }
34
35     public function get_latest($platform_key) {
36         $latest = array();
37         $cachekey = 'webkit_build_archives_latest_' . $platform_key;
38
39         if (false !== ($cached = get_transient($cachekey)))
40                     return unserialize($cached);
41
42         $data = $this->call("latest/$platform_key-release");
43
44         $latest[$platform_key] = array();
45
46         foreach ($data->Items as &$entry) {
47             $revision = new stdClass();
48             $revision->url = $entry->s3_url->S;
49             $revision->creationTime = $entry->creationTime->N;
50             $latest[$platform_key]["r" . $entry->revision->N] = $revision;
51         }
52
53         set_transient($cachekey, serialize($latest), 600); // expire cache every 10 minutes
54
55         return $latest;
56     }
57
58 } // class WebKitBuildArchives
59
60 add_action('wp_head', function() { ?>
61     <script type="text/javascript">
62     (function(document) {
63         document.addEventListener("DOMContentLoaded", function () {
64
65             var creationTimeNodes = Array.prototype.slice.call(document.getElementsByClassName("date"));
66             for (var timestamp of creationTimeNodes) {
67                 var date = new Date(parseInt(timestamp.textContent));
68                 timestamp.textContent = date.toLocaleDateString("en", {
69                     "timeZoneName": "short",
70                     "minute":       "2-digit",
71                     "hour":         "2-digit",
72                     "day":          "numeric",
73                     "month":        "long",
74                     "year":         "numeric"
75                 })
76             }
77
78             var tabnav = Array.prototype.slice.call(document.getElementsByClassName("tabnav-link")),
79                 currentTab = function(e) {
80                     var target = e.target ? e.target : e,
81                         currentLink = document.getElementsByClassName("tabnav-link current")
82                     if (currentLink.length)
83                         currentLink[0].classList.remove("current");
84                     target.classList.add("current");
85
86                     var results = document.getElementById("results"),
87                         currentList = results.getElementsByClassName("current");
88                     if (currentList.length)
89                         currentList[0].classList.remove("current");
90
91                     var list = results.getElementsByClassName(target.classList.item(1))[0];
92                     list.classList.add("current");
93                 };
94
95             var currentHash = window.location.hash.length ? window.location.hash.replace("#", "") : "mac-highsierra-x86_64";
96             for (var link of tabnav) {
97                 link.addEventListener("click", currentTab);
98                 if (link.className.indexOf(currentHash) !== -1)
99                     currentTab(link);
100             }
101
102         });
103     }(document))
104     </script>
105 <?php
106 });
107
108 add_action('wp_head', function() {
109     echo '<meta name="robots" content="nofollow">';
110 });
111
112 add_filter('the_content', function ($content) {
113     $API = WebKitBuildArchives::object();
114
115     $error_markup = '<div class="note"><h2>Error</h2> <p>There was an problem loading the build archives data.</p></div>';
116
117     $archives = array();
118     $tabs = '<nav class="tabnav"><ul class="tabnav-items">';
119     foreach (WebKitBuildArchives::$platforms as $platform => $label) {
120         $platform_latest = $API->get_latest($platform);
121         if (!empty($platform_latest)) {
122             $archives = array_merge($archives, $platform_latest);
123             $tabs .= '<li class="tabnav-item"><a href="#' . esc_attr($platform) . '" class="tabnav-link ' . esc_attr($platform) . '">' . $label . '</a></li>';
124         }
125     }
126
127     $tabs .= '</ul></nav>';
128
129     if (empty($archives))
130         return $error_markup;
131
132     $lists = '';
133     ob_start();
134     foreach ($archives as $platform => $revisions):
135
136         if (empty($revisions)) {
137             echo '<div class="platform-items ' . esc_attr($platform) . '">' . $error_markup . '</div>';
138             continue;
139         }
140     ?>
141
142     <ul class="platform-items <?php echo esc_attr($platform); ?>">
143         <?php foreach ($revisions as $revision => $entry): ?>
144         <li>
145             <h6><a href="<?php echo esc_url($entry->url); ?>"><?php echo $revision; ?></a></h6>
146             <span class="date"><?php echo intval($entry->creationTime) * 1000; ?></span>
147         </li>
148         <?php endforeach?>
149     </ul>
150 <?php endforeach;
151     $lists .= ob_get_clean();
152
153     $content = $tabs . "<div id=\"search-errors\"></div><div id=\"results\">$lists</div>";
154
155     return $content;
156 });
157
158 get_header();
159 ?>
160     <style>
161     #archives h1 {
162         text-align: center;
163     }
164
165     #downloads blockquote:first-child {
166         color: #8E8E93;
167         text-align: center;
168         font-size: 4rem;
169         line-height: 6rem;
170         font-weight: 200;
171     }
172
173     #downloads .bodycopy > div {
174         box-sizing: border-box;
175         padding: 0 1.5rem 3rem;
176         width: 50%;
177         text-align: center;
178         float: left;
179     }
180
181     #downloads h2 {
182         font-size: 3.2rem;
183     }
184
185     .bodycopy ul > li {
186         line-height: 1;
187     }
188
189     #results .date {
190         display: block;
191         border: none;
192         font-size: 1.4rem;
193         text-transform: uppercase;
194         padding-left: 0;
195         line-height: 3rem;
196         color: #8E8E93;
197     }
198
199     .bodycopy ul {
200         list-style: none;
201         margin: 0;
202         padding: 0;
203     }
204
205     .platform-items li {
206         display: inline-block;
207         flex: 1;
208         min-width: 33%;
209         margin-bottom: 3rem;
210     }
211
212     .bodycopy .search {
213         position: relative;
214         text-align: center;
215     }
216
217     .search {
218         position: relative;
219     }
220
221     .search input {
222         width: 60%;
223         position: relative;
224         left: 2.25rem;
225         padding-right: 4rem;
226     }
227
228     #search-spinner {
229         left: -2.25rem;
230         position: relative;
231         width: 3rem;
232         height: 3rem;
233         padding: 0.5rem;
234         visibility: hidden;
235     }
236
237     #search-spinner.searching {
238         visibility: visible;
239     }
240
241     .tabnav {
242         margin-top: 0px;
243         margin-right: auto;
244         margin-bottom: 3rem;
245         margin-left: auto;
246         padding-top: 0px;
247         padding-right: 0px;
248         padding-bottom: 0px;
249         padding-left: 0px;
250         width: 100%;
251         text-align: center;
252         position: relative;
253         white-space: nowrap;
254         overflow-x: auto;
255         overflow-y: hidden;
256     }
257
258     .tabnav-items {
259         display: inline-block;
260         margin-top: 0px;
261         margin-right: 0px;
262         margin-bottom: 0px;
263         margin-left: 0px;
264     }
265
266     .tabnav-item {
267         padding-left: 60px;
268         border-bottom-width: 1px;
269         border-bottom-style: solid;
270         border-bottom-color: rgb(214, 214, 214);
271         display: inline-block;
272         list-style-type: none;
273         list-style-position: initial;
274         list-style-image: initial;
275         outline-color: initial;
276         outline-style: none;
277         outline-width: initial;
278     }
279
280     .tabnav-item:first-child {
281         padding-left: 0px;
282     }
283
284     .tabnav-link {
285         font-size: 1.7rem;
286         line-height: 1;
287         font-weight: 400;
288         letter-spacing: -0.021rem;
289         padding-top: 1.1rem;
290         padding-right: 0px;
291         padding-bottom: 1.1rem;
292         padding-left: 0px;
293         color: rgb(102, 102, 102);
294         text-align: left;
295         text-decoration: none;
296         display: block;
297         margin-bottom: 0.4rem;
298         position: relative;
299         z-index: 0;
300     }
301
302     .tabnav-link.current {
303         pointer-events: none;
304         color: rgb(51, 51, 51);
305         text-decoration: none;
306         cursor: default;
307         z-index: 10;
308     }
309
310     .tabnav-link.current::after {
311         left: 0px;
312         position: absolute;
313         bottom: -5px;
314         width: 100%;
315         border-bottom-width: 1px;
316         border-bottom-style: solid;
317         border-bottom-color: rgb(102, 102, 102);
318         content: "";
319     }
320
321     .tabnav-link:hover {
322         color: rgb(0, 112, 201);
323         text-decoration: none;
324     }
325
326     .platform-items {
327         display: none;
328     }
329
330     .platform-items.current {
331         display: flex;
332         flex-wrap: wrap;
333     }
334
335     .platform-items.current .note {
336         flex-grow: 1;
337     }
338     </style>
339
340     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
341
342         <article class="page" id="archives">
343
344             <h1><?php before_the_title(); ?><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
345
346             <div class="bodycopy">
347                 <?php the_content(); ?>
348             </div>
349
350         </article>
351
352     <?php endwhile; endif; ?>
353
354 <?php get_footer(); ?>