Add a WebKit Build Archives page
authorjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Oct 2017 17:26:38 +0000 (17:26 +0000)
committerjond@apple.com <jond@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 2 Oct 2017 17:26:38 +0000 (17:26 +0000)
https://bugs.webkit.org/show_bug.cgi?id=177654

Reviewed by Alexey Proskuryakov.

* wp-content/themes/webkit/build-archives.php: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@222717 268f45cc-cd09-0410-ab3c-d52691b4dbfc

Websites/webkit.org/ChangeLog
Websites/webkit.org/wp-content/themes/webkit/build-archives.php [new file with mode: 0644]

index c5bc74d..f7cae82 100644 (file)
@@ -1,3 +1,12 @@
+2017-10-02  Jon Davis  <jond@apple.com>
+
+        Add a WebKit Build Archives page
+        https://bugs.webkit.org/show_bug.cgi?id=177654
+
+        Reviewed by Alexey Proskuryakov.
+
+        * wp-content/themes/webkit/build-archives.php: Added.
+
 2017-09-22  Timothy Horton  <timothy_horton@apple.com>
 
         Update some links in demos
diff --git a/Websites/webkit.org/wp-content/themes/webkit/build-archives.php b/Websites/webkit.org/wp-content/themes/webkit/build-archives.php
new file mode 100644 (file)
index 0000000..1022bf3
--- /dev/null
@@ -0,0 +1,354 @@
+<?php
+/**
+ * Template Name: Build Archives
+ **/
+
+WebKitBuildArchives::object();
+
+class WebKitBuildArchives {
+
+    private static $object = null;
+
+    public static $platforms = array(
+        'mac-highsierra-x86_64' => 'High Sierra',
+        'mac-sierra-x86_64'     => 'Sierra',
+        'mac-elcapitan-x86_64'  => 'El Capitan',
+    );
+
+    public static function object() {
+        if (self::$object === null)
+            self::$object = new self();
+        return self::$object;
+    }
+
+    private function call ($endpoint, $params = array()) {
+        $url = add_query_arg($params, 'https://q1tzqfy48e.execute-api.us-west-2.amazonaws.com/v2/' . $endpoint);
+        $api = wp_remote_get($url);
+        $response = wp_remote_retrieve_body($api);
+
+        if (is_wp_error($response))
+            return $response;
+
+        return json_decode($response);
+    }
+
+    public function get_latest($platform_key) {
+        $latest = array();
+        $cachekey = 'webkit_build_archives_latest_' . $platform_key;
+
+        if (false !== ($cached = get_transient($cachekey)))
+                    return unserialize($cached);
+
+        $data = $this->call("latest/$platform_key-release");
+
+        $latest[$platform_key] = array();
+
+        foreach ($data->Items as &$entry) {
+            $revision = new stdClass();
+            $revision->url = $entry->s3_url->S;
+            $revision->creationTime = $entry->creationTime->N;
+            $latest[$platform_key]["r" . $entry->revision->N] = $revision;
+        }
+
+        set_transient($cachekey, serialize($latest), 600); // expire cache every 10 minutes
+
+        return $latest;
+    }
+
+} // class WebKitBuildArchives
+
+add_action('wp_head', function() { ?>
+    <script type="text/javascript">
+    (function(document) {
+        document.addEventListener("DOMContentLoaded", function () {
+
+            var creationTimeNodes = document.getElementsByClassName("date");
+            for (var timestamp of creationTimeNodes) {
+                var date = new Date(parseInt(timestamp.textContent));
+                timestamp.textContent = date.toLocaleDateString("en", {
+                    "timeZoneName": "short",
+                    "minute":       "2-digit",
+                    "hour":         "2-digit",
+                    "day":          "numeric",
+                    "month":        "long",
+                    "year":         "numeric"
+                })
+            }
+
+            var tabnav = document.getElementsByClassName("tabnav-link"),
+                currentTab = function(e) {
+                    var target = e.target ? e.target : e,
+                        currentLink = document.getElementsByClassName("tabnav-link current")
+                    if (currentLink.length)
+                        currentLink[0].classList.remove("current");
+                    target.classList.add("current");
+
+                    var results = document.getElementById("results"),
+                        currentList = results.getElementsByClassName("current");
+                    if (currentList.length)
+                        currentList[0].classList.remove("current");
+
+                    var list = results.getElementsByClassName(target.classList.item(1))[0];
+                    list.classList.add("current");
+                };
+
+            var currentHash = window.location.hash.length ? window.location.hash.replace("#", "") : "mac-highsierra-x86_64";
+            for (var link of tabnav) {
+                link.addEventListener("click", currentTab);
+                if (link.className.indexOf(currentHash) !== -1)
+                    currentTab(link);
+            }
+
+        });
+    }(document))
+    </script>
+<?php
+});
+
+add_action('wp_head', function() {
+    echo '<meta name="robots" content="nofollow">';
+});
+
+add_filter('the_content', function ($content) {
+    $API = WebKitBuildArchives::object();
+
+    $error_markup = '<div class="note"><h2>Error</h2> <p>There was an problem loading the build archives data.</p></div>';
+
+    $archives = array();
+    $tabs = '<nav class="tabnav"><ul class="tabnav-items">';
+    foreach (WebKitBuildArchives::$platforms as $platform => $label) {
+        $platform_latest = $API->get_latest($platform);
+        if (!empty($platform_latest)) {
+            $archives = array_merge($archives, $platform_latest);
+            $tabs .= '<li class="tabnav-item"><a href="#' . esc_attr($platform) . '" class="tabnav-link ' . esc_attr($platform) . '">' . $label . '</a></li>';
+        }
+    }
+
+    $tabs .= '</ul></nav>';
+
+    if (empty($archives))
+        return $error_markup;
+
+    $lists = '';
+    ob_start();
+    foreach ($archives as $platform => $revisions):
+
+        if (empty($revisions)) {
+            echo '<div class="platform-items ' . esc_attr($platform) . '">' . $error_markup . '</div>';
+            continue;
+        }
+    ?>
+
+    <ul class="platform-items <?php echo esc_attr($platform); ?>">
+        <?php foreach ($revisions as $revision => $entry): ?>
+        <li>
+            <h6><a href="<?php echo esc_url($entry->url); ?>"><?php echo $revision; ?></a></h6>
+            <span class="date"><?php echo intval($entry->creationTime) * 1000; ?></span>
+        </li>
+        <?php endforeach?>
+    </ul>
+<?php endforeach;
+    $lists .= ob_get_clean();
+
+    $content = $tabs . "<div id=\"search-errors\"></div><div id=\"results\">$lists</div>";
+
+    return $content;
+});
+
+get_header();
+?>
+    <style>
+    #archives h1 {
+        text-align: center;
+    }
+
+    #downloads blockquote:first-child {
+        color: #8E8E93;
+        text-align: center;
+        font-size: 4rem;
+        line-height: 6rem;
+        font-weight: 200;
+    }
+
+    #downloads .bodycopy > div {
+        box-sizing: border-box;
+        padding: 0 1.5rem 3rem;
+        width: 50%;
+        text-align: center;
+        float: left;
+    }
+
+    #downloads h2 {
+        font-size: 3.2rem;
+    }
+
+    .bodycopy ul > li {
+        line-height: 1;
+    }
+
+    #results .date {
+        display: block;
+        border: none;
+        font-size: 1.4rem;
+        text-transform: uppercase;
+        padding-left: 0;
+        line-height: 3rem;
+        color: #8E8E93;
+    }
+
+    .bodycopy ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    .platform-items li {
+        display: inline-block;
+        flex: 1;
+        min-width: 33%;
+        margin-bottom: 3rem;
+    }
+
+    .bodycopy .search {
+        position: relative;
+        text-align: center;
+    }
+
+    .search {
+        position: relative;
+    }
+
+    .search input {
+        width: 60%;
+        position: relative;
+        left: 2.25rem;
+        padding-right: 4rem;
+    }
+
+    #search-spinner {
+        left: -2.25rem;
+        position: relative;
+        width: 3rem;
+        height: 3rem;
+        padding: 0.5rem;
+        visibility: hidden;
+    }
+
+    #search-spinner.searching {
+        visibility: visible;
+    }
+
+    .tabnav {
+        margin-top: 0px;
+        margin-right: auto;
+        margin-bottom: 3rem;
+        margin-left: auto;
+        padding-top: 0px;
+        padding-right: 0px;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        width: 100%;
+        text-align: center;
+        position: relative;
+        white-space: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+    }
+
+    .tabnav-items {
+        display: inline-block;
+        margin-top: 0px;
+        margin-right: 0px;
+        margin-bottom: 0px;
+        margin-left: 0px;
+    }
+
+    .tabnav-item {
+        padding-left: 60px;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: rgb(214, 214, 214);
+        display: inline-block;
+        list-style-type: none;
+        list-style-position: initial;
+        list-style-image: initial;
+        outline-color: initial;
+        outline-style: none;
+        outline-width: initial;
+    }
+
+    .tabnav-item:first-child {
+        padding-left: 0px;
+    }
+
+    .tabnav-link {
+        font-size: 1.7rem;
+        line-height: 1;
+        font-weight: 400;
+        letter-spacing: -0.021rem;
+        padding-top: 1.1rem;
+        padding-right: 0px;
+        padding-bottom: 1.1rem;
+        padding-left: 0px;
+        color: rgb(102, 102, 102);
+        text-align: left;
+        text-decoration: none;
+        display: block;
+        margin-bottom: 0.4rem;
+        position: relative;
+        z-index: 0;
+    }
+
+    .tabnav-link.current {
+        pointer-events: none;
+        color: rgb(51, 51, 51);
+        text-decoration: none;
+        cursor: default;
+        z-index: 10;
+    }
+
+    .tabnav-link.current::after {
+        left: 0px;
+        position: absolute;
+        bottom: -5px;
+        width: 100%;
+        border-bottom-width: 1px;
+        border-bottom-style: solid;
+        border-bottom-color: rgb(102, 102, 102);
+        content: "";
+    }
+
+    .tabnav-link:hover {
+        color: rgb(0, 112, 201);
+        text-decoration: none;
+    }
+
+    .platform-items {
+        display: none;
+    }
+
+    .platform-items.current {
+        display: flex;
+        flex-wrap: wrap;
+    }
+
+    .platform-items.current .note {
+        flex-grow: 1;
+    }
+    </style>
+
+    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
+
+        <article class="page" id="archives">
+
+            <h1><?php before_the_title(); ?><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>
+
+            <div class="bodycopy">
+                <?php the_content(); ?>
+            </div>
+
+        </article>
+
+    <?php endwhile; endif; ?>
+
+<?php get_footer(); ?>
\ No newline at end of file