Added assets for the benchmark webpage

static/css/base.css

@@ -0,0 +1,203 @@
+.blog a:link, .blog a:visited,
+.docs a:link, .docs a:visited {
+    color: #f14600;
+    text-decoration: none;
+}
+
+.blog a:hover, .blog a:active,
+.docs a:hover, .docs a:active {
+    text-decoration: underline;
+}
+
+.btn.disabled, .btn:disabled {
+    cursor: default;
+    opacity: 0.4;
+}
+
+.fake-btn {
+    display: inline-block;
+    padding: 0.375rem 0.75rem;
+    text-align: center;
+    font-size: 1rem;
+    line-height: 1.5;
+}
+
+#logo-icon, #docs-logo-icon {
+    width: 64px;
+}
+
+#logo-text {
+    width: 180px;
+    margin-left: 12px;
+}
+
+.display-5 {
+    font-size: 2rem;
+    font-weight: 300;
+    line-height: 1.2;
+}
+
+.display-6 {
+    font-size: 1.75rem;
+    font-weight: 300;
+    line-height: 1.2;
+}
+
+.bg-dark-alt, .bg-dark-alt:focus {
+    background: #36363F;
+}
+
+.bg-secondary-alt, .bg-secondary-alt:focus {
+    background: #444451;
+}
+
+.bg-orange, .bg-orange:focus {
+    background: #f14600;
+}
+
+.text-dark-alt {
+    color: #36363F;
+}
+
+.btn-dark-alt {
+    background: #36363F;
+}
+
+.btn-dark-alt:focus {
+    background: #36363F;
+}
+
+.btn-outline-orange {
+    border-color: #f14600;
+    color: #f14600;
+}
+
+.btn-orange, .btn-outline-orange:hover {
+    background: #f14600;
+    color: #fff;
+}
+
+a.btn-outline-yellow {
+    border-color: #fc0;
+    color: #fc0;
+}
+
+.btn-yellow, .btn-outline-yellow:hover {
+    background: #fc0;
+    color: #000;
+}
+
+.btn-yellow:hover {
+    background: #ffe100;
+}
+
+.btn-yellow:hover, .btn-yellow:link, .btn-yellow:visited {
+    color: #000;
+}
+
+.btn:hover, .btn:active {
+    text-decoration: none;
+}
+
+.text-red {
+    color: #ff3939;
+}
+
+.text-orange {
+    color: #f14600;
+}
+
+.text-yellow {
+    color: #fc0;
+}
+
+.bg-number {
+    position: absolute;
+    font-size: 900%;
+    font-weight: bold;
+    color: rgba(241, 70, 0, 0.1);
+    line-height: 1;
+    margin-top: -1rem;
+}
+
+.dropdown-item {
+  color: #e1e1e1 !important;
+}
+
+.dropdown-item:hover,
+.dropdown-item:focus {
+  background-color: #1e1e1e;
+}
+
+.nav .dropdown-toggle::after {
+    vertical-align: 0 !important;
+}
+.nav .dropdown-toggle[aria-expanded=false]::after {
+    display: inline-block;
+    margin-right: .255em;
+    vertical-align: 0;
+    content: "";
+    border-top: .3em solid transparent;
+    border-right: .3em solid;
+    border-bottom: .3em solid transparent;
+}
+
+.dots-lb {
+    background: #fff url('/images/dots.svg') no-repeat 0 100%;
+}
+
+.dots-cb {
+    background: #fff url('/images/dots.svg') no-repeat 50% 100%;
+}
+
+.dots-rb {
+    background: #fff url('/images/dots.svg') no-repeat 100% 100%;
+}
+
+.dots-rhb {
+    background: #fff url('/images/dots.svg') no-repeat 75% 100%;
+}
+
+.dots-cc {
+    background: #fff url('/images/dots.svg') repeat-y 50% -17.5%;
+}
+
+.benchmark-query-cell {
+    width: 20rem;
+    white-space: pre;
+    overflow-x: hidden;
+}
+
+.benchmark-query-cell:hover {
+    width: auto;
+    background-color: #efefef;
+    position: absolute;
+    padding: 0.5rem;
+    margin: -0.5rem 0 0 -0.5rem;
+    overflow-x: auto;
+    white-space: normal;
+}
+
+.benchmark-query-cell-wrapper {
+    width: 22rem;
+}
+
+.w-15 {
+    width: 15% !important;
+}
+
+#feedback_email {
+    white-space: nowrap;
+}
+
+.height-20 {
+    height: 20px;
+}
+
+ol.default{
+	margin-top: 10px;
+}
+
+ol.default li{
+	margin-bottom: 10px;
+}

static/js/base.js

@@ -0,0 +1,105 @@
+(function () {
+    Sentry.init({
+        dsn: 'https://[email protected]/5246103',
+        environment: window.location.hostname === 'clickhouse.com' ? 'prod' : 'test'
+    });
+    $(document).click(function (event) {
+        var target = $(event.target);
+        var target_id = target.attr('id');
+        var selector = target.attr('href');
+        var is_tab = target.attr('role') === 'tab';
+        var is_collapse = target.attr('data-toggle') === 'collapse';
+        var is_rating = target.attr('role') === 'rating';
+        var navbar_toggle = $('#navbar-toggle');
+        navbar_toggle.collapse('hide');
+        $('.algolia-autocomplete .ds-dropdown-menu').hide();
+        if (target_id && target_id.startsWith('logo-')) {
+            selector = '#';
+        }
+    });
+
+    var top_nav = $('#top-nav.sticky-top');
+    if (window.location.hash.length > 1 && top_nav.length) {
+        var hash_destination = $(window.location.hash);
+        if (hash_destination.length) {
+            var offset = hash_destination.offset().top - top_nav.height() * 1.5;
+            $('html, body').animate({
+                scrollTop: offset
+            }, 70);
+        }
+    }
+
+    $('img').each(function() {
+        var src = $(this).attr('data-src');
+        if (src) {
+            $(this).attr('src', src);
+        }
+    });
+
+    if (window.location.hostname.endsWith('clickhouse.com')) {
+        $('a.favicon').each(function () {
+            $(this).css({
+                background: 'url(/favicon/' + this.hostname + ') left center no-repeat',
+                'padding-left': '20px'
+            });
+        });
+
+        function copy_to_clipboard(element) {
+            var temp = $('<textarea></textarea>');
+            $('body').append(temp);
+            temp.val($(element).text());
+            temp.select();
+            document.execCommand('copy');
+            temp.remove();
+        }
+
+        $('pre').each(function(_, element) {
+           $(element).prepend(
+               '<img src="/docs/images/mkdocs/copy.svg" alt="Copy" title="Copy" class="code-copy btn float-right m-0 p-0" />'
+           );
+        });
+
+        $('.code-copy').each(function(_, element) {
+           element = $(element);
+           element.click(function() {
+               copy_to_clipboard(element.parent());
+           })
+        });
+    }
+
+    (function (d, w, c) {
+        (w[c] = w[c] || []).push(function() {
+            var is_single_page = $('html').attr('data-single-page') === 'true';
+
+            if (!is_single_page) {
+                $('head').each(function(_, element) {
+                   $(element).append(
+                       '<script async src="https://www.googletagmanager.com/gtag/js?id=G-KF1LLRTQ5Q"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag(\'js\', new Date());gtag(\'config\', \'G-KF1LLRTQ5Q\');</script>'
+                   );
+                   $(element).append(
+                       '<script>!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="dZuEnmCPmWqDuSEzCvLUSBBRt8Xrh2el";;analytics.SNIPPET_VERSION="4.15.3";analytics.load("dZuEnmCPmWqDuSEzCvLUSBBRt8Xrh2el");analytics.page();}}();</script>'
+                   );
+                });
+            }
+        });
+    })(document, window, "");
+
+    var beforePrint = function() {
+        var details = document.getElementsByTagName("details");
+        for (var i = 0; i < details.length; ++i) {
+            details[i].open = 1;
+        }
+    };
+
+    if (window.matchMedia) {
+        window.matchMedia('print').addListener(function(q) {
+            if (q.matches) {
+                beforePrint();
+            }
+        });
+        if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+            $.fx.off = true;
+        }
+    }
+    window.onbeforeprint = beforePrint;
+})();