Crb restructure css (#35033)

* Remove greenhouse iframe css

* Edit build to include css, js, and images in /docs

docs/tools/webpack.config.js

@@ -14,7 +14,6 @@ module.exports = {
 
     entry: [
 		path.resolve(scssPath, 'bootstrap.scss'),
-		path.resolve(scssPath, 'greenhouse.scss'),
 		path.resolve(scssPath, 'main.scss'),
 		path.resolve(jsPath, 'main.js'),
 	],

docs/tools/website.py

@@ -151,6 +151,11 @@ def build_website(args):
         )
     )
 
+    shutil.copytree(
+        os.path.join(args.website_dir, 'images'),
+        os.path.join(args.output_dir, 'docs', 'images')
+    )
+
     # This file can be requested to check for available ClickHouse releases.
     shutil.copy2(
         os.path.join(args.src_dir, 'utils', 'list-versions', 'version_date.tsv'),
@@ -231,28 +236,31 @@ def minify_file(path, css_digest, js_digest):
 
 
 def minify_website(args):
-    # Output greenhouse css separately from main bundle to be included via the greenhouse iframe
-    command = f"cat '{args.website_dir}/css/greenhouse.css' > '{args.output_dir}/css/greenhouse.css'"
-    logging.info(command)
-    output = subprocess.check_output(command, shell=True)
-    logging.debug(output)
-
     css_in = ' '.join(get_css_in(args))
-    css_out = f'{args.output_dir}/css/base.css'
+    css_out = f'{args.output_dir}/docs/css/base.css'
-    if args.minify:
+    os.makedirs(f'{args.output_dir}/docs/css')
+
+    if args.minify and False:  # TODO: return closure
         command = f"purifycss -w '*algolia*' --min {css_in} '{args.output_dir}/*.html' " \
             f"'{args.output_dir}/docs/en/**/*.html' '{args.website_dir}/js/**/*.js' > {css_out}"
-    else:
+        logging.info(css_in)
-        command = f'cat {css_in} > {css_out}'
-
         logging.info(command)
         output = subprocess.check_output(command, shell=True)
         logging.debug(output)
+
+    else:
+        command = f"cat {css_in}"
+        output = subprocess.check_output(command, shell=True)
+        with open(css_out, 'wb+') as f:
+            f.write(output)
+
     with open(css_out, 'rb') as f:
         css_digest = hashlib.sha3_224(f.read()).hexdigest()[0:8]
 
-    js_in = get_js_in(args)
+    js_in = ' '.join(get_js_in(args))
-    js_out = f'{args.output_dir}/js/base.js'
+    js_out = f'{args.output_dir}/docs/js/base.js'
+    os.makedirs(f'{args.output_dir}/docs/js')
+
     if args.minify and False:  # TODO: return closure
         js_in = [js[1:-1] for js in js_in]
         closure_args = [
@@ -271,11 +279,11 @@ def minify_website(args):
             f.write(js_content)
 
     else:
-        js_in = ' '.join(js_in)
+        command = f"cat {js_in}"
-        command = f'cat {js_in} > {js_out}'
-        logging.info(command)
         output = subprocess.check_output(command, shell=True)
-        logging.debug(output)
+        with open(js_out, 'wb+') as f:
+            f.write(output)
+
     with open(js_out, 'rb') as f:
         js_digest = hashlib.sha3_224(f.read()).hexdigest()[0:8]
         logging.info(js_digest)

website/benchmark/dbms/index.html

@@ -15,7 +15,7 @@
 <div class="row mb-3">
     <div class="col">
         <a href="/" title="Main page" class="float-left mr-3">
-            <img src="/images/logo.svg" alt="ClickHouse" />
+            <img src="/docs/images/logo.svg" alt="ClickHouse" />
         </a>
         <h1>Performance comparison of analytical DBMS</h1>
     </div>

website/benchmark/hardware/index.html

@@ -15,7 +15,7 @@
 <div class="row mb-3">
     <div class="col d-flex align-items-center">
         <a href="/" title="Main page" class="float-left mr-3">
-            <img src="/images/logo.svg" alt="ClickHouse" />
+            <img src="/docs/images/logo.svg" alt="ClickHouse" />
         </a>
         <h1 class="h2 mb-0">{{ title }}</h1>
     </div>

website/css/greenhouse.css

@@ -1 +0,0 @@
-#main{padding-bottom:0;padding-top:0}#wrapper{max-width:1078px;padding:0}body>#wrapper>#main>#wrapper>#content,body>#wrapper>#main>#wrapper>#logo,body>#wrapper>#main>#wrapper>h1{display:none}body>#wrapper>#main>#wrapper>#board_title{margin-top:0}body>#wrapper>#main>#logo{margin-top:80px}body>#wrapper>#main>:last-child{margin-bottom:120px}

website/js/base.js

@@ -55,7 +55,7 @@
 
         $('pre').each(function(_, element) {
            $(element).prepend(
-               '<img src="/images/mkdocs/copy.svg" alt="Copy" title="Copy" class="code-copy btn float-right m-0 p-0" />'
+               '<img src="/docs/images/mkdocs/copy.svg" alt="Copy" title="Copy" class="code-copy btn float-right m-0 p-0" />'
            );
         });
 

website/src/scss/greenhouse.scss

@@ -1,27 +0,0 @@
-#main {
-	padding-bottom: 0;
-	padding-top: 0;
-}
-
-#wrapper {
-	max-width: 1078px;
-	padding: 0;
-}
-
-body > #wrapper > #main > #wrapper > #logo,
-body > #wrapper > #main > #wrapper > h1,
-body > #wrapper > #main > #wrapper > #content {
-	display: none;
-}
-
-body > #wrapper > #main > #wrapper > #board_title {
-	margin-top: 0;
-}
-
-body > #wrapper > #main > #logo {
-	margin-top: 80px;
-}
-
-body > #wrapper > #main > :last-child {
-	margin-bottom: 120px;
-}

website/templates/common_css.html

@@ -1,4 +1,4 @@
-<link href="/css/base.css?css_digest" media="all" rel="stylesheet" />
+<link href="/docs/css/base.css?css_digest" media="all" rel="stylesheet" />
 
 {% for src in extra_css %}
 <link href="{{ src }}" media="all" rel="stylesheet" />

website/templates/common_js.html

@@ -1,4 +1,4 @@
-<script{% if not extra_js %} async{% endif %} type="text/javascript" src="/js/base.js?js_digest"></script>
+<script{% if not extra_js %} async{% endif %} type="text/javascript" src="/docs/js/base.js?js_digest"></script>
 
 {% for src in extra_js %}
 <script type="text/javascript" src="{{ src }}"></script>

website/templates/common_meta.html

@@ -7,7 +7,7 @@
 <title>{% if title %}{{ title }}{% else %}{{ _('ClickHouse - fast open-source OLAP DBMS') }}{% endif %}</title>
 
 <link rel="shortcut icon" href="/favicon.ico" />
-<link rel="apple-touch-icon" sizes="180x180" href="/images/logo-180x180.png" />
+<link rel="apple-touch-icon" sizes="180x180" href="/docs/images/logo-180x180.png" />
 
 <meta property="og:title" content="{% if title %}{{ title }}{% else %}{{ _('ClickHouse DBMS') }}{% endif %}"/>
 <meta property="og:description" content="{{ description }}" />
@@ -15,7 +15,7 @@
 {% if page and page.meta.image %}
 <meta property="og:image" content="{{ page.meta.image}}" />
 {% else %}
-<meta property="og:image" content="https://clickhouse.com/images/logo.png" />
+<meta property="og:image" content="https://clickhouse.com/docs/images/logo.png" />
 {% endif %}
 <meta property="og:url" content="{{ url or 'https://clickhouse.com/' }}"/>
 <link rel="canonical" href="{{ canonical_url or 'https://clickhouse.com/' }}" />

website/templates/docs/amp.html

@@ -20,7 +20,7 @@
       <div class="row pt-3 mb-3">
         <div class="col">
           <a href="/" class="text-decoration-none">
-            <amp-img class="d-inline-block mr-3" layout="fixed" width="40" height="36" src="/images/logo.svg" alt="ClickHouse logo" title="ClickHouse logo"></amp-img><amp-img class="invert-dark d-inline-block" layout="fixed" width="238" height="36" src="/images/clickhouse-black.svg" alt="ClickHouse" title="ClickHouse"></amp-img>
+            <amp-img class="d-inline-block mr-3" layout="fixed" width="40" height="36" src="/docs/images/logo.svg" alt="ClickHouse logo" title="ClickHouse logo"></amp-img><amp-img class="invert-dark d-inline-block" layout="fixed" width="238" height="36" src="/docs/images/clickhouse-black.svg" alt="ClickHouse" title="ClickHouse"></amp-img>
           </a>
         </div>
       </div>

website/templates/docs/nav.html

@@ -1,7 +1,7 @@
 <nav id="top-nav" class="navbar py-1 navbar-dark navbar-expand-md bg-dark-alt text-white fixed-top">
     <div class="container-fluid justify-content-between">
         <a class="d-block navbar-brand mr-3" href="/">
-            <img id="docs-logo-icon" src="/images/logo.svg" alt="ClickHouse logo" title="ClickHouse logo"/>
+            <img id="docs-logo-icon" src="/docs/images/logo.svg" alt="ClickHouse logo" title="ClickHouse logo"/>
         </a>
         <div class="w-100 navbar-text text-left d-none d-md-block">
             <h1 class="h3 m-0 p-0 d-inline">
@@ -24,24 +24,24 @@
                 {% endif %}
                 {% if edit_url %}
                 <li id="edit-wrapper" class="nav-item">
-                    <a id="edit-link" href="{{ edit_url }}" title="Edit this article" class="nav-link" rel="external nofollow noreferrer" target="_blank"><img src="/images/mkdocs/edit.svg" alt="Edit this article" height="60" /></a>
+                    <a id="edit-link" href="{{ edit_url }}" title="Edit this article" class="nav-link" rel="external nofollow noreferrer" target="_blank"><img src="/docs/images/mkdocs/edit.svg" alt="Edit this article" height="60" /></a>
                 </li>
                 {% endif %}
                 <li class="nav-item">
                      <a class="nav-link" href="https://github.com/ClickHouse/ClickHouse" rel="external nofollow noreferrer">
-                        <img src="/images/index/github.svg" alt="GitHub repository" title="Go to GitHub" height="72" />
+                        <img src="/docs/images/index/github.svg" alt="GitHub repository" title="Go to GitHub" height="72" />
                     </a>
                 </li>
                 <li id="languages-wrapper" class="nav-item dropdown mr-3">
                     <div id="languages-dropdown">
                         <a class="nav-link dropdown-toggle d-inline-block mt-1 text-muted" href="#" id="lang-dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                            <img src="/images/flags/{{ language }}.svg" alt="{{ config.extra.languages[language] }}" title="{{ config.extra.languages[language] }}" width="60" class="d-inline-block mt-n1" />
+                            <img src="/docs/images/flags/{{ language }}.svg" alt="{{ config.extra.languages[language] }}" title="{{ config.extra.languages[language] }}" width="60" class="d-inline-block mt-n1" />
                         </a>
                         <div class="dropdown-menu bg-dark" aria-labelledby="lang-dropdown">
                             {% for code, name in config.extra.languages.items() %}
                             <a class="dropdown-item{% if language == code %} disabled{% endif %}"
                                href="/docs/{{ code }}/{{ page.url }}">
-                                <img src="/images/flags/{{ code }}.svg" alt="" title="" width="32" class="d-inline-block mr-2" />{{ name }}
+                                <img src="/docs/images/flags/{{ code }}.svg" alt="" title="" width="32" class="d-inline-block mr-2" />{{ name }}
                             </a>
                             {% endfor %}
                         </div>
@@ -54,7 +54,7 @@
             <div class="input-group">
                 <div class="input-group-prepend w-100">
                     <span class="input-group-text bg-secondary-alt text-muted border-0 mr-n1" id="search-icon">
-                        <img src="/images/mkdocs/search.svg" />
+                        <img src="/docs/images/mkdocs/search.svg" />
                     </span>
                     <input id="docsearch-input" class="form-control bg-secondary-alt text-muted border-0 pl-1" type="search" placeholder="Search" aria-label="Search">
                 </div>

website/templates/docs/sidebar.html

@@ -2,10 +2,10 @@
     <div class="overflow-auto">
         <div id="single-page-switch" class="btn-group mb-2 float-right" role="group" aria-label="{{ _('Multi-page or single-page') }}">
             <a href="{{ base_url }}" role="button" class="btn btn-dark{% if config.extra.single_page %}-alt{% endif %} active" aria-pressed="{% if not config.extra.single_page %}true{% else %}false{% endif %}">
-                <img src="/images/mkdocs/multi.svg" alt="{{ _('Multi-page version') }}" title="{{ _('Multi-page version') }}" />
+                <img src="/docs/images/mkdocs/multi.svg" alt="{{ _('Multi-page version') }}" title="{{ _('Multi-page version') }}" />
             </a>
             <a href="{{ base_url }}/single/" role="button" class="btn btn-dark{% if not config.extra.single_page %}-alt{% endif %} active" aria-pressed="{% if not config.extra.single_page %}true{% else %}false{% endif %}">
-                <img src="/images/mkdocs/single.svg" alt="{{ _('Single-page version') }}" title="{{ _('Single-page version') }}" />
+                <img src="/docs/images/mkdocs/single.svg" alt="{{ _('Single-page version') }}" title="{{ _('Single-page version') }}" />
             </a>
         </div>
         {% if not single_page %}