From 508e25b6d6e9a81edb6ddf8738450b79898b446a Mon Sep 17 00:00:00 2001
From: Adin Scannell <ascannell@google.com>
Date: Mon, 27 Apr 2020 22:24:58 -0700
Subject: Adapt website to use g3doc sources and bazel.

This adapts the merged website repository to use the image and bazel
build framework. It explicitly avoids the container_image rules provided
by bazel, opting instead to build with direct docker commands when
necessary.

The relevant build commands are incorporated into the top-level
Makefile.
---
 website/_includes/byline.html         |  18 +++
 website/_includes/footer-links.html   |  37 ++++++
 website/_includes/footer.html         |  71 ++++++++++++
 website/_includes/graph.html          | 205 ++++++++++++++++++++++++++++++++++
 website/_includes/header-links.html   |  19 ++++
 website/_includes/header.html         |  30 +++++
 website/_includes/paginator.html      |  10 ++
 website/_includes/required_linux.html |   2 +
 8 files changed, 392 insertions(+)
 create mode 100644 website/_includes/byline.html
 create mode 100644 website/_includes/footer-links.html
 create mode 100644 website/_includes/footer.html
 create mode 100644 website/_includes/graph.html
 create mode 100644 website/_includes/header-links.html
 create mode 100644 website/_includes/header.html
 create mode 100644 website/_includes/paginator.html
 create mode 100644 website/_includes/required_linux.html

(limited to 'website/_includes')

diff --git a/website/_includes/byline.html b/website/_includes/byline.html
new file mode 100644
index 000000000..d8ae22cb0
--- /dev/null
+++ b/website/_includes/byline.html
@@ -0,0 +1,18 @@
+By
+{% assign last_pos=include.authors.size | minus: 1 %}
+{% assign and_pos=include.authors.size | minus: 2 %}
+{% for i in (0..last_pos) %}
+  {% assign author_id=include.authors[i] %}
+  {% assign author=site.authors[author_id] %}
+  {% if author %}
+    <a href="mailto:{{ author.email }}">{{ author.name }}</a>
+  {% else %}
+    {{ author_id }}
+  {% endif %}
+  {% if i == and_pos %}
+    and
+  {% elsif i < and_pos %}
+    ,
+  {% endif %}
+{% endfor %}
+on <span class="text-muted">{{ include.date | date_to_long_string }}</span>
diff --git a/website/_includes/footer-links.html b/website/_includes/footer-links.html
new file mode 100644
index 000000000..b6a9771ca
--- /dev/null
+++ b/website/_includes/footer-links.html
@@ -0,0 +1,37 @@
+<div class="container">
+  <div class="row">
+    <div class="col-sm-4 col-md-2">
+      <p>About</p>
+      <ul class="list-unstyled">
+        <li><a href="/roadmap/">Roadmap</a></li>
+        <li><a href="/contributing/">Contributing</a></li>
+        <li><a href="/security/">Security</a></li>
+        <li><a href="/community/governance/">Governance</a></li>
+        <li><a href="https://policies.google.com/privacy">Privacy Policy</a></li>
+      </ul>
+    </div>
+    <div class="col-sm-4 col-md-2">
+      <p>Support</p>
+      <ul class="list-unstyled">
+        <li><a href="https://github.com/google/gvisor/issues">Issues</a></li>
+        <li><a href="/docs">Documentation</a></li>
+        <li><a href="/docs/user_guide/FAQ">FAQ</a></li>
+      </ul>
+    </div>
+    <div class="col-sm-4 col-md-2">
+      <p>Connect</p>
+      <ul class="list-unstyled">
+        <li><a href="https://github.com/google/gvisor">GitHub</a></li>
+        <li><a href="https://groups.google.com/forum/#!forum/gvisor-users">User Mailing List</a></li>
+        <li><a href="https://groups.google.com/forum/#!forum/gvisor-dev">Developer Mailing List</a></li>
+        <li><a href="https://gitter.im/gvisor/community">Gitter Chat</a></li>
+        <li><a href="/blog">Blog</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="row">
+    <div class="col-lg-12">
+      <p>&copy; {{ 'now' | date: "%Y" }} The gVisor Authors</p>
+    </div>
+  </div>
+</div>
diff --git a/website/_includes/footer.html b/website/_includes/footer.html
new file mode 100644
index 000000000..9946fc592
--- /dev/null
+++ b/website/_includes/footer.html
@@ -0,0 +1,71 @@
+<footer class="footer">
+  {% include footer-links.html %}
+</footer>
+
+<script src="/assets/js/jquery-3.3.1.min.js" integrity="sha384-FZl05tHmJtKNdb6j461opwSK1w4LdKWpehJe28rPTqG2kcPmGzQuvPSLN7q8tsD6" crossorigin="anonymous"></script>
+<script src="/assets/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
+<script src="/assets/js/d3.v4.min.js" integrity="sha384-1EOYqz4UgZkewWm70NbT1JBUXSQpOIS2AaJy6/evZH+lXOrt9ITSJbFctNeyBoIJ" crossorigin="anonymous"></script>
+
+{% if site.analytics %}
+<script type="application/javascript">
+var doNotTrack = false;
+if (!doNotTrack) {
+  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+  ga('create', '{{ site.analytics }}', 'auto');
+  ga('send', 'pageview');
+}
+</script>
+<script async src='https://www.google-analytics.com/analytics.js'></script>
+{% endif %}
+
+<script>
+  var shiftWindow = function() {
+    if (location.hash.length !== 0) {
+      window.scrollBy(0, -50);
+    }
+  };
+  window.addEventListener("hashchange", shiftWindow);
+
+  var highlightCurrentSidebarNav = function() {
+    var href = location.pathname;
+    var item = $('#sidebar-nav [href$="' + href + '"]');
+    if (item) {
+      var li = item.parent();
+      li.addClass("active");
+
+      if (li.parent() && li.parent().is("ul")) {
+        do {
+          var ul = li.parent();
+          if (ul.hasClass("collapse")) {
+            ul.collapse("show");
+          }
+          li = ul.parent();
+        } while (li && li.is("li"));
+      }
+    }
+  };
+
+  $(document).ready(function() {
+    // Scroll to anchor of location hash, adjusted for fixed navbar.
+    window.setTimeout(function() {
+      shiftWindow();
+    }, 1);
+
+    // Flip the caret when submenu toggles are clicked.
+    $(".sidebar-submenu").on("show.bs.collapse", function() {
+      var toggle = $('[href$="#' + $(this).attr('id') + '"]');
+      if (toggle) {
+        toggle.addClass("dropup");
+      }
+    });
+    $(".sidebar-submenu").on("hide.bs.collapse", function() {
+      var toggle = $('[href$="#' + $(this).attr('id') + '"]');
+      if (toggle) {
+        toggle.removeClass("dropup");
+      }
+    });
+
+    // Highlight the current page on the sidebar nav.
+    highlightCurrentSidebarNav();
+  });
+</script>
diff --git a/website/_includes/graph.html b/website/_includes/graph.html
new file mode 100644
index 000000000..f3a999341
--- /dev/null
+++ b/website/_includes/graph.html
@@ -0,0 +1,205 @@
+{::nomarkdown}
+{% assign fn = include.id | remove: " " | remove: "-" | downcase %}
+<figure><a href="{{ include.url }}"><svg id="{{ include.id }}" width=500 height=200 onload="render_{{ fn }}()"><title>{{ include.title }}</title></svg></a></figure>
+<script type="text/javascript">
+function render_{{ fn }}() {
+d3.csv("{{ include.url }}", function(d, i, columns) {
+    return d; // Transformed below.
+}, function(error, data) {
+    if (error) throw(error);
+
+    // Create a new data that pivots on runtime.
+    //
+    // To start, we have:
+    //    runtime, ..., result
+    //    runc,    ..., 1
+    //    runsc,   ..., 2
+    //
+    // In the end we want:
+    //    ..., runsc, runc
+    //    ..., 1,     2
+
+    // Filter by metric, if required.
+    if ("{{ include.metric }}" != "") {
+      orig_columns = data.columns;
+      data = data.filter(d => d.metric == "{{ include.metric }}");
+      data.columns = orig_columns;
+    }
+
+    // Filter by method, if required.
+    if ("{{ include.method }}" != "") {
+      orig_columns = data.columns;
+      data = data.filter(d => d.method == "{{ include.method }}");
+      data.columns = orig_columns.filter(key => key != "method");
+    }
+
+    // Enumerate runtimes.
+    var runtimes = Array.from(new Set(data.map(d => d.runtime)));
+    var metrics = Array.from(new Set(data.map(d => d.metric)));
+    if (metrics.length < 1) {
+        console.log(data);
+        throw("need at least one metric");
+    } else if (metrics.length == 1) {
+        metric = metrics[0];
+        data.columns = data.columns.filter(key => key != "metric");
+    } else {
+        metric = ""; // Used for grouping.
+    }
+
+    var isSubset = function(a, sup) {
+        var ap = Object.getOwnPropertyNames(a);
+        for (var i = 0; i < ap.length; i++) {
+            if (a[ap[i]] !== sup[ap[i]]) {
+                return false;
+            }
+        }
+        return true;
+    };
+
+    // Execute a pivot to include runtimes as attributes.
+    var new_data = data.map(function(data_item) {
+        // Generate a prototype data item.
+        var proto_item = Object.assign({}, data_item);
+        delete proto_item.runtime;
+        delete proto_item.result;
+        var next_item = Object.assign({}, proto_item);
+
+        // Find all matching runtime items.
+        data.forEach(function(d) {
+            if (isSubset(proto_item, d)) {
+                // Add the result result.
+                next_item[d.runtime] = d.result;
+            }
+        });
+        return next_item;
+    });
+
+    // Remove any duplication.
+    new_data = Array.from(new Set(new_data));
+    new_data.columns = data.columns;
+    new_data.columns = new_data.columns.filter(key => key != "runtime" && key != "result");
+    new_data.columns = new_data.columns.concat(runtimes);
+    data = new_data;
+
+    // Slice based on the first key.
+    if (data.columns.length != runtimes.length) {
+        x0_key = new_data.columns[0];
+        var x1_domain = data.columns.slice(1);
+    } else {
+        x0_key = "runtime";
+        var x1_domain = runtimes;
+    }
+
+    // Determine varaible margins.
+    var x0_domain = data.map(d => d[x0_key]);
+    var margin_bottom_pad = 0;
+    if (x0_domain.length > 8) {
+        margin_bottom_pad = 50;
+    }
+
+    // Use log scale if required.
+    var y_min = 0;
+    if ({{ include.log | default: "false" }}) {
+        // Need to cap lower end of the domain at 1.
+        y_min = 1;
+    }
+
+    if ({{ include.y_min | default: "false" }}) {
+        y_min = "{{ include.y_min }}";
+    }
+
+    var svg = d3.select("#{{ include.id }}"),
+        margin = {top: 20, right: 20, bottom: 30 + margin_bottom_pad, left: 50},
+        width = +svg.attr("width") - margin.left - margin.right,
+        height = +svg.attr("height") - margin.top - margin.bottom,
+        g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+    var x0 = d3.scaleBand()
+        .rangeRound([margin.left / 2, width - (4 * margin.right)])
+        .paddingInner(0.1);
+
+    var x1 = d3.scaleBand()
+        .padding(0.05);
+
+    var y = d3.scaleLinear()
+        .rangeRound([height, 0]);
+    if ({{ include.log | default: "false" }}) {
+        y = d3.scaleLog()
+           .rangeRound([height, 0]);
+    }
+
+    var z = d3.scaleOrdinal()
+        .range(["#262362", "#FBB03B", "#286FD7", "#6b486b"]);
+
+    // Set all domains.
+    x0.domain(x0_domain);
+    x1.domain(x1_domain).rangeRound([0, x0.bandwidth()]);
+    y.domain([y_min, d3.max(data, d => d3.max(x1_domain, key => parseFloat(d[key])))]).nice();
+
+    // The data.
+    g.append("g")
+        .selectAll("g")
+        .data(data)
+        .enter().append("g")
+          .attr("transform", function(d) { return "translate(" + x0(d[x0_key]) + ",0)"; })
+        .selectAll("rect")
+        .data(d => x1_domain.map(key => ({key, value: d[key]})))
+        .enter().append("rect")
+          .attr("x", d => x1(d.key))
+          .attr("y", d => y(d.value))
+          .attr("width", x1.bandwidth())
+          .attr("height", d => y(y_min) - y(d.value))
+          .attr("fill", d => z(d.key));
+
+    // X0 ticks and labels.
+    var x0_axis = g.append("g")
+        .attr("class", "axis")
+        .attr("transform", "translate(0," + height + ")")
+        .call(d3.axisBottom(x0));
+    if (x0_domain.length > 8) {
+        x0_axis.selectAll("text")
+            .style("text-anchor", "end")
+            .attr("dx", "-.8em")
+            .attr("dy", ".15em")
+            .attr("transform", "rotate(-65)");
+    }
+
+    // Y ticks and top-label.
+    if (metric == "default") {
+        metric = ""; // Don't display.
+    }
+    g.append("g")
+        .attr("class", "axis")
+        .call(d3.axisLeft(y).ticks(null, "s"))
+        .append("text")
+        .attr("x", -30.0)
+        .attr("y", y(y.ticks().pop()) - 10.0)
+        .attr("dy", "0.32em")
+        .attr("fill", "#000")
+        .attr("font-weight", "bold")
+        .attr("text-anchor", "start")
+        .text(metric);
+
+    // The legend.
+    var legend = g.append("g")
+        .attr("font-family", "sans-serif")
+        .attr("font-size", 10)
+        .attr("text-anchor", "end")
+        .selectAll("g")
+        .data(x1_domain.slice().reverse())
+        .enter().append("g")
+        .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
+    legend.append("rect")
+        .attr("x", width - 19)
+        .attr("width", 19)
+        .attr("height", 19)
+        .attr("fill", z);
+    legend.append("text")
+        .attr("x", width - 24)
+        .attr("y", 9.5)
+        .attr("dy", "0.32em")
+        .text(function(d) { return d; });
+});
+}
+</script>
+{:/}
diff --git a/website/_includes/header-links.html b/website/_includes/header-links.html
new file mode 100644
index 000000000..467bb1e72
--- /dev/null
+++ b/website/_includes/header-links.html
@@ -0,0 +1,19 @@
+<nav class="navbar navbar-expand-sm navbar-inverse navbar-fixed-top">
+  <div class="container">
+    <div class="navbar-brand">
+      <a href="/">
+        <img src="/assets/logos/logo_solo_on_dark.svg" height="25px" class="d-inline-block align-top" style="margin-right: 10px;" alt="logo"/>
+        gVisor
+      </a>
+    </div>
+
+    <div class="collapse navbar-collapse">
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="/docs">Documentation</a></li>
+        <li><a href="/blog">Blog</a></li>
+        <li><a href="/community/">Community</a></li>
+        <li><a href="https://github.com/google/gvisor">GitHub</a></li>
+      </ul>
+    </div>
+  </div>
+</nav>
diff --git a/website/_includes/header.html b/website/_includes/header.html
new file mode 100644
index 000000000..8323c26f8
--- /dev/null
+++ b/website/_includes/header.html
@@ -0,0 +1,30 @@
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    {% if page.title %}
+    <title>{{ page.title }} - gVisor</title>
+    {% else %}
+    <title>gVisor</title>
+    {% endif %}
+    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site_root }}">
+
+    <!-- Dependencies. -->
+    <link href="/assets/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/assets/css/fontawesome.min.css" rel="stylesheet">
+
+    <!-- Our own style sheet. -->
+    <link rel="stylesheet" type="text/css" href="/css/main.css">
+    <link rel="icon" type="image/png" href="/assets/favicons/favicon-32x32.png" sizes="32x32">
+    <link rel="icon" type="image/png" href="/assets/favicons/favicon-16x16.png" sizes="16x16">
+
+    {% if page.title %}
+    <meta name="og:title" content="{{ page.title }}">
+    {% else %}
+    <meta name="og:title" content="gVisor">
+    {% endif %}
+    {% if page.description %}
+    <meta name="og:description" content="{{ page.description }}">
+    {% endif %}
+    <meta name="og:image" content="{{ site.site_url }}/assets/logos/logo_solo_on_white_bordered.svg">
+  </head>
diff --git a/website/_includes/paginator.html b/website/_includes/paginator.html
new file mode 100644
index 000000000..b4ff4c3b1
--- /dev/null
+++ b/website/_includes/paginator.html
@@ -0,0 +1,10 @@
+<nav aria-label="...">
+  <ul class="pager">
+    {% if paginator.previous_page %}
+    <li class="previous"><a href="{{ paginator.previous_page_path }}"><span aria-hidden="true">&larr;</span> Newer</a></li>
+    {% endif %}
+    {% if paginator.next_page %}
+    <li class="next"><a href="{{ paginator.next_page_path }}">Older <span aria-hidden="true">&rarr;</span></a></li>
+    {% endif %}
+  </ul>
+</nav>
diff --git a/website/_includes/required_linux.html b/website/_includes/required_linux.html
new file mode 100644
index 000000000..e9d1b7548
--- /dev/null
+++ b/website/_includes/required_linux.html
@@ -0,0 +1,2 @@
+> Note: gVisor supports only x86\_64 and requires Linux 4.14.77+
+> ([older Linux](/docs/user_guide/networking/#gso)).
-- 
cgit v1.2.3


From cf86ec5e40bd1abf5be45fabbc7591a0452747ea Mon Sep 17 00:00:00 2001
From: Adin Scannell <ascannell@google.com>
Date: Wed, 29 Apr 2020 10:53:25 -0700
Subject: Add powered by gVisor logo.

---
 website/_includes/footer-links.html     |  12 +++++++++---
 website/assets/logos/powered-gvisor.png | Bin 0 -> 5193 bytes
 2 files changed, 9 insertions(+), 3 deletions(-)
 create mode 100644 website/assets/logos/powered-gvisor.png

(limited to 'website/_includes')

diff --git a/website/_includes/footer-links.html b/website/_includes/footer-links.html
index b6a9771ca..10c28ead4 100644
--- a/website/_includes/footer-links.html
+++ b/website/_includes/footer-links.html
@@ -1,6 +1,6 @@
 <div class="container">
   <div class="row">
-    <div class="col-sm-4 col-md-2">
+    <div class="col-sm-3 col-md-2">
       <p>About</p>
       <ul class="list-unstyled">
         <li><a href="/roadmap/">Roadmap</a></li>
@@ -10,7 +10,7 @@
         <li><a href="https://policies.google.com/privacy">Privacy Policy</a></li>
       </ul>
     </div>
-    <div class="col-sm-4 col-md-2">
+    <div class="col-sm-3 col-md-2">
       <p>Support</p>
       <ul class="list-unstyled">
         <li><a href="https://github.com/google/gvisor/issues">Issues</a></li>
@@ -18,7 +18,7 @@
         <li><a href="/docs/user_guide/FAQ">FAQ</a></li>
       </ul>
     </div>
-    <div class="col-sm-4 col-md-2">
+    <div class="col-sm-3 col-md-2">
       <p>Connect</p>
       <ul class="list-unstyled">
         <li><a href="https://github.com/google/gvisor">GitHub</a></li>
@@ -28,6 +28,12 @@
         <li><a href="/blog">Blog</a></li>
       </ul>
     </div>
+    <div class="col-sm-3 col-md-3"></div>
+    <div class="hidden-xs hidden-sm col-md-3">
+      <a href="https://cloud.google.com/run">
+        <img style="float: right;" src="/assets/logos/powered-gvisor.png" alt="Powered by gVisor"/>
+      </a>
+    </div>
   </div>
   <div class="row">
     <div class="col-lg-12">
diff --git a/website/assets/logos/powered-gvisor.png b/website/assets/logos/powered-gvisor.png
new file mode 100644
index 000000000..e00c74a33
Binary files /dev/null and b/website/assets/logos/powered-gvisor.png differ
-- 
cgit v1.2.3