[blog] add integration with HackerNews and Reddit (#11728)

* improve tweet css

* add HN and Reddit share links

* update po

* Add support for HackerNews and Reddit

docs/tools/website.py

@@ -145,10 +145,13 @@ def build_website(args):
             'public',
             'node_modules',
             'templates',
-            'feathericons',
             'locale'
         )
     )
+    shutil.copy2(
+        os.path.join(args.website_dir, 'js', 'embedd.min.js'),
+        os.path.join(args.output_dir, 'js', 'embedd.min.js')
+    )
 
     for root, _, filenames in os.walk(args.output_dir):
         for filename in filenames:

website/css/blog.css

@@ -7,6 +7,18 @@ body.blog .dropdown-item:focus {
   background-color: #efefef;
 }
 
+.blog .social-icon {
+    background: #eee;
+}
+
+.comment-even {
+  background: #fff;
+}
+
+.comment-odd, .comments-bg {
+  background: #f8f9fa;
+}
+
 @media (prefers-color-scheme: dark) {
   body.blog .dropdown-item {
     color: #fff !important;
@@ -17,4 +29,16 @@ body.blog .dropdown-item:focus {
   .blog .tag{
     background-color: #666 !important;
   }
+
+  .blog .social-icon {
+    background: #444451;
+  }
+
+  .comment-even {
+    background: #111;
+  }
+
+  .comment-odd, .comments-bg {
+    background: #333;
+  }
 }

website/images/index/hackernews.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="256px" height="256px" viewBox="0 0 256 256" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid">
+	<g>
+		<rect fill="#FB651E" x="0" y="0" width="256" height="256"></rect>
+		<path d="M119.373653,144.745813 L75.43296,62.4315733 L95.5144533,62.4315733 L121.36192,114.52416 C121.759575,115.452022 122.2235,116.413008 122.753707,117.407147 C123.283914,118.401285 123.747838,119.428546 124.145493,120.48896 C124.410597,120.886615 124.609422,121.251127 124.741973,121.582507 C124.874525,121.913886 125.007075,122.212123 125.139627,122.477227 C125.802386,123.802744 126.39886,125.095105 126.929067,126.354347 C127.459274,127.613589 127.923198,128.773399 128.320853,129.833813 C129.381268,127.580433 130.541078,125.1614 131.80032,122.57664 C133.059562,119.99188 134.351922,117.307747 135.67744,114.52416 L161.92256,62.4315733 L180.612267,62.4315733 L136.27392,145.739947 L136.27392,198.826667 L119.373653,198.826667 L119.373653,144.745813 Z" fill="#FFFFFF"></path>
+	</g>
+</svg>

website/images/index/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M14.238 15.348c.085.084.085.221 0 .306-.465.462-1.194.687-2.231.687l-.008-.002-.008.002c-1.036 0-1.766-.225-2.231-.688-.085-.084-.085-.221 0-.305.084-.084.222-.084.307 0 .379.377 1.008.561 1.924.561l.008.002.008-.002c.915 0 1.544-.184 1.924-.561.085-.084.223-.084.307 0zm-3.44-2.418c0-.507-.414-.919-.922-.919-.509 0-.923.412-.923.919 0 .506.414.918.923.918.508.001.922-.411.922-.918zm13.202-.93c0 6.627-5.373 12-12 12s-12-5.373-12-12 5.373-12 12-12 12 5.373 12 12zm-5-.129c0-.851-.695-1.543-1.55-1.543-.417 0-.795.167-1.074.435-1.056-.695-2.485-1.137-4.066-1.194l.865-2.724 2.343.549-.003.034c0 .696.569 1.262 1.268 1.262.699 0 1.267-.566 1.267-1.262s-.568-1.262-1.267-1.262c-.537 0-.994.335-1.179.804l-2.525-.592c-.11-.027-.223.037-.257.145l-.965 3.038c-1.656.02-3.155.466-4.258 1.181-.277-.255-.644-.415-1.05-.415-.854.001-1.549.693-1.549 1.544 0 .566.311 1.056.768 1.325-.03.164-.05.331-.05.5 0 2.281 2.805 4.137 6.253 4.137s6.253-1.856 6.253-4.137c0-.16-.017-.317-.044-.472.486-.261.82-.766.82-1.353zm-4.872.141c-.509 0-.922.412-.922.919 0 .506.414.918.922.918s.922-.412.922-.918c0-.507-.413-.919-.922-.919z"/></svg>

website/locale/en/LC_MESSAGES/messages.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: en\n"
@@ -77,7 +77,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "Yandex LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "Share on"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "Published date"
 

website/locale/es/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-26 10:19+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: es\n"
@@ -76,7 +76,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "Sistema abierto."
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "Compartir en"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "Fecha de publicación"
 

website/locale/fa/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-26 10:19+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fa\n"
@@ -76,7 +76,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "Yandex, LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "اشتراک در"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "تاریخ انتشار"
 

website/locale/fr/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-30 15:12+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: fr\n"
@@ -76,7 +76,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "Yandex LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "Partager sur"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "Date de publication"
 

website/locale/ja/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-26 10:19+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: ja\n"
@@ -71,7 +71,12 @@ msgstr "ソフトウェアは、明示または黙示を問わず、いかなる
 msgid "Yandex LLC"
 msgstr "Yandex LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "共有"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "公開日"
 

website/locale/messages.pot

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -70,7 +70,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr ""
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr ""
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr ""
 

website/locale/ru/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-26 10:19+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: ru\n"
@@ -78,7 +78,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "ООО «Яндекс»"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "Поделиться в"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "Дата публикации"
 

website/locale/tr/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-04-15 13:17+0000\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: tr\n"
@@ -76,7 +76,12 @@ msgstr ""
 msgid "Yandex LLC"
 msgstr "Yandex LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "Share on"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "Yayım datelandığı tarih"
 

website/locale/zh/LC_MESSAGES/messages.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PROJECT VERSION\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2020-06-16 13:35+0300\n"
+"POT-Creation-Date: 2020-06-17 12:20+0300\n"
 "PO-Revision-Date: 2020-03-26 10:19+0300\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language: zh\n"
@@ -71,7 +71,12 @@ msgstr "软件按\"原样\"分发，不附带任何明示或暗示的担保或
 msgid "Yandex LLC"
 msgstr "Yandex LLC"
 
-#: templates/blog/content.html:16
+#: templates/blog/content.html:20 templates/blog/content.html:25
+#: templates/blog/content.html:30
+msgid "Share on"
+msgstr "分享到"
+
+#: templates/blog/content.html:37
 msgid "Published date"
 msgstr "发布日期"
 

website/templates/blog/content.html

@@ -13,11 +13,21 @@
                 {{ page.content|adjust_markdown_html }}
             </article>
             <section class="d-none d-md-block col-md-1 mh-100">
-                <div class="sticky-top pt-3">
+                <div class="sticky-top pt-2">
-                    <a href="https://twitter.com/intent/tweet?url={{ url }}"
+                    <a class="d-block mb-2" href="https://twitter.com/intent/tweet?url={{ title|urlencode }}+{{ url|urlencode }}"
                        rel="external nofollow noreferrer" target="_blank">
                         <img data-src="/images/index/twitter.svg"
-                             alt="Tweet" title="Tweet" class="bg-secondary-alt rounded-circle img-fluid p-1" />
+                             alt="{{ _('Share on') }} Twitter" title="{{ _('Share on') }} Twitter" class="social-icon rounded-circle img-fluid w-100 p-1" />
+                    </a>
+                    <a class="d-block mb-2" href="https://news.ycombinator.com/submitlink?t={{ title|urlencode }}&u={{ url|urlencode }}"
+                       rel="external nofollow noreferrer" target="_blank">
+                        <img src="/images/index/hackernews.svg"
+                             alt="{{ _('Share on') }} HackerNews" title="{{ _('Share on') }} Hacker News" class="rounded-circle img-fluid w-100 p-1" />
+                    </a>
+                    <a class="d-block mb-2" href="http://www.reddit.com/submit?title={{ title|urlencode }}&url={{ url|urlencode }}"
+                       rel="external nofollow noreferrer" target="_blank">
+                        <img src="/images/index/reddit.svg"
+                             alt="{{ _('Share on') }} Reddit" title="{{ _('Share on') }} Reddit" class="invert-dark rounded-circle img-fluid w-100 p-1" />
                     </a>
                 </div>
             </section>
@@ -33,7 +43,8 @@
                 {% endfor %}
             {% endif %}
         </section>
-        {% include "templates/blog/footer.html" %}
+
+
     </div>
     {% else %}
         {% for post in config.extra.post_meta.values() %}
@@ -52,3 +63,21 @@
         {% endfor %}
     {% endif %}
 </div>
+{% if not page.meta.is_index and language == 'en' %}
+</div> {## end row ##}
+</div> {## end container ##}
+<div class="comments-bg">
+    <div class="container">
+        <div class="row">
+            <section class="col-md-10 offset-md-1 my-5">
+                <div id="embedd-comments"></div>
+            </section>
+        </div>
+    </div>
+</div>
+<div class="container"> {## new container ##}
+<div class="row"> {## new row ##}
+<script async type="text/javascript" src="/js/embedd.min.js?{{ config.extra.rev_short }}"></script>
+{% endif %}
+
+{% include "templates/blog/footer.html" %}

website/templates/blog/nav.html

@@ -4,11 +4,11 @@
             <img id="docs-logo-icon" src="/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">
+            <h2 class="display-6 m-0 p-0 d-inline">
                 <a href="/blog/{{ language }}/" class="text-reset text-decoration-none">
                     {{ config.site_name }}
                 </a>
-            </h1>
+            </h2>
         </div>
 
         <div class="d-none d-md-block">