Added a dark mode color scheme.
[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     .bodycopy ul > li {
166         line-height: 1;
167     }
168
169     #results .date {
170         display: block;
171         border: none;
172         font-size: 1.4rem;
173         text-transform: uppercase;
174         padding-left: 0;
175         line-height: 3rem;
176         color: hsl(0, 0%, 87%);
177         color: var(--text-color-light);
178     }
179
180     .bodycopy ul {
181         list-style: none;
182         margin: 0;
183         padding: 0;
184     }
185
186     .platform-items li {
187         display: inline-block;
188         flex: 1;
189         min-width: 33%;
190         margin-bottom: 3rem;
191     }
192
193     .bodycopy .search {
194         position: relative;
195         text-align: center;
196     }
197
198     .search {
199         position: relative;
200     }
201
202     .search input {
203         width: 60%;
204         position: relative;
205         left: 2.25rem;
206         padding-right: 4rem;
207     }
208
209     #search-spinner {
210         left: -2.25rem;
211         position: relative;
212         width: 3rem;
213         height: 3rem;
214         padding: 0.5rem;
215         visibility: hidden;
216     }
217
218     #search-spinner.searching {
219         visibility: visible;
220     }
221
222     .tabnav {
223         margin-top: 0px;
224         margin-right: auto;
225         margin-bottom: 3rem;
226         margin-left: auto;
227         padding-top: 0px;
228         padding-right: 0px;
229         padding-bottom: 0px;
230         padding-left: 0px;
231         width: 100%;
232         text-align: center;
233         position: relative;
234         white-space: nowrap;
235         overflow-x: auto;
236         overflow-y: hidden;
237     }
238
239     .tabnav-items {
240         display: inline-block;
241         margin-top: 0px;
242         margin-right: 0px;
243         margin-bottom: 0px;
244         margin-left: 0px;
245     }
246
247     .tabnav-item {
248         padding-left: 60px;
249         border-bottom-width: 1px;
250         border-bottom-style: solid;
251         border-bottom-color: hsl(0, 0%, 86.7%);
252         border-bottom-color: var(--horizontal-rule-color);
253         display: inline-block;
254         list-style-type: none;
255         list-style-position: initial;
256         list-style-image: initial;
257         outline-color: initial;
258         outline-style: none;
259         outline-width: initial;
260     }
261
262     .tabnav-item:first-child {
263         padding-left: 0px;
264     }
265
266     .tabnav-link {
267         font-size: 1.7rem;
268         line-height: 1;
269         font-weight: 400;
270         letter-spacing: -0.021rem;
271         padding-top: 1.1rem;
272         padding-right: 0px;
273         padding-bottom: 1.1rem;
274         padding-left: 0px;
275         color: rgb(102, 102, 102);
276         text-align: left;
277         text-decoration: none;
278         display: block;
279         margin-bottom: 0.4rem;
280         position: relative;
281         z-index: 0;
282     }
283
284     .tabnav-link.current {
285         pointer-events: none;
286         color: hsl(0, 0%, 26.7%);
287         color: var(--text-color-heading);
288         text-decoration: none;
289         cursor: default;
290         z-index: 10;
291     }
292
293     .tabnav-link.current::after {
294         left: 0px;
295         position: absolute;
296         bottom: -5px;
297         width: 100%;
298         border-bottom-width: 1px;
299         border-bottom-style: solid;
300         border-bottom-color: hsl(0, 0%, 26.7%);
301         border-bottom-color: var(--text-color-heading);
302         content: "";
303     }
304
305     .tabnav-link:hover {
306         color: hsl(200, 100%, 40%);
307         color: var(--link-color);
308         text-decoration: none;
309     }
310
311     .platform-items {
312         display: none;
313     }
314
315     .platform-items.current {
316         display: flex;
317         flex-wrap: wrap;
318     }
319
320     .platform-items.current .note {
321         flex-grow: 1;
322     }
323     </style>
324
325     <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
326
327         <article class="page" id="archives">
328
329             <h1><?php before_the_title(); ?><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
330
331             <div class="bodycopy">
332                 <?php the_content(); ?>
333             </div>
334
335         </article>
336
337     <?php endwhile; endif; ?>
338
339 <?php get_footer(); ?>