Fixed the appearance of toc in interactive guides

src/main/content/_assets/css/support.scss

@@ -182,7 +182,6 @@ body {
 }
 
 #cards_container {
-    margin-left: 13%;
     text-align: center;
     margin-top: 48px;
 }

src/main/content/_assets/js/guide-common.js

@@ -464,6 +464,10 @@ function getTags(callback) {
 }
 
 $(document).ready(function () {
+    window.scrollTo({
+        top: 1,
+      });
+
     getTags(function () {
         $("#tags_container:empty").prev().hide();
         $(window).trigger("scroll");

src/main/content/_assets/js/tabs.js

@@ -63,7 +63,6 @@ $(document).ready(function() {
     $('.tab_link').on('click', function(event) {
         $(this).parent().find('.tab_content').hide();
         $(this).parent().find('.tab_link').removeClass("active");      
-
         // get class of clicked tab and class of its respective content section
         var class_list = this.classList;
         for (var i = 0; i < class_list.length; i++) {

src/main/content/_i18n/en.yml

@@ -232,7 +232,8 @@ guides:
 blog:
   see_all_blog_posts: See all blog posts
   never_miss_a_post: Never miss a post!
-  be_sure_to_subscribe: Be sure to subscribe to our
+  be_sure_to_follow: Be sure to follow
+  twitter_or_subscribe: on Twitter or subscribe to our
   feed: feed.
   featured_tags: Featured Tags
   no_results_found: No results found.

src/main/content/_i18n/ja.yml

@@ -232,7 +232,8 @@ guides:
 blog:
   see_all_blog_posts: すべてのブログ投稿を表示
   never_miss_a_post: 投稿を見逃すことはありません。
-  be_sure_to_subscribe:  必ず
+  be_sure_to_follow: 必ず Twitter で
+  twitter_or_subscribe: をフォローするか、
   feed: フィードを購読してください。
   featured_tags: フィーチャー・タグ
   no_results_found: No results found.

src/main/content/_i18n/zh-Hans.yml

@@ -232,7 +232,8 @@ guides:
 blog:
   see_all_blog_posts: 查看所有博客帖子
   never_miss_a_post: 永远不要错过帖子 !
-  be_sure_to_subscribe: 请务必订阅我们的
+  be_sure_to_follow: 在 Twitter 上关注
+  twitter_or_subscribe: 或订阅我们的
   feed: 订阅源。
   featured_tags: 特色标签
   no_results_found: 找不到任何结果

src/main/content/_includes/footer.html

@@ -13,6 +13,7 @@
             </div>
             <div id="footer_round_links_container">
                 <a id="footer_github_link" class="footer_round_btn" href="https://github.com/OpenLiberty/" target="_blank" rel="noopener" aria-label="Github"></a>
+                <a id="footer_twitter_link" class="footer_round_btn" href="https://twitter.com/OpenLibertyIO" target="_blank" rel="noopener" aria-label="Twitter"></a>
                 <a id="footer_stackoverflow_link" class="footer_round_btn" href="https://stackoverflow.com/questions/tagged/open-liberty" target="_blank" rel="noopener" aria-label="Open Liberty questions on Stack Overflow"></a>
                 <a id="footer_groupsio_link" class="footer_round_btn" href="https://groups.io/g/openliberty" target="_blank" rel="noopener" aria-label="Open Liberty Groups.io"></a>
                 <a id="footer_gitter_link" class="footer_round_btn" href="https://app.gitter.im/#/room/#OpenLiberty_development:gitter.im" target="_blank" rel="noopener" aria-label="Open Liberty Gitter"></a>
@@ -41,6 +42,7 @@
 <!-- PRE-LOADED IMAGES FOR ON HOVER BEHAVIOR -->
 <div class="d-none hidden">
     <img src="/img/Footer_GitCat_Hover.svg" alt="OpenLiberty Github link">
+    <img src="/img/Footer_TwitterBird_Hover.svg" alt="OpenLibertyIO Twitter link">
     <img src="/img/Footer_StackO_Hover.svg" alt="Open-liberty Stack Overflow link">
     <img src="/img/Footer_GroupsIO_Hover.svg" alt="Openliberty Groups IO link">
     <img src="/img/footer_gitter_hover.svg" alt="Openliberty Gitter link">

src/main/content/_includes/header.html

@@ -35,6 +35,7 @@
                 </li>
             </ul>
             <div id="header_round_links_container"> 
+                <a id="header_twitter_link" class="header_round_button" href="https://twitter.com/OpenLibertyIO" target="_blank" rel="noopener noreferrer" aria-label="Twitter"></a>
                 <a id="header_stackoverflow_link" class="header_round_button" href="https://stackoverflow.com/questions/tagged/open-liberty" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty questions on Stack Overflow"></a>
                 <a id="header_groupsio_link" class="header_round_button" href="https://groups.io/g/openliberty" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty Groups.io"></a>
                 <a id="header_gitter_link" class="header_round_button" href="https://app.gitter.im/#/room/#OpenLiberty_development:gitter.im" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty Gitter"></a>

src/main/content/_layouts/post.html

@@ -23,6 +23,7 @@
                 <a id="blog_link" href="{{baseURL}}/blog"><img class="arrow" src="/img/post_arrow.svg" alt="back to all blogs">{% t blog.see_all_blog_posts %}</a>
                 <div class="share_post_container">
                     {% assign page_title = page.title | replace: "'" , "\\\\'" %}
+                    <a class="twitter_link" href="https://twitter.com/intent" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent('{{ page_title }}') + '&url=' + encodeURIComponent(window.location)); return false" aria-label="Twitter link"></a>
                     <a class="reddit_link" href="https://www.reddit.com/submit" onclick="window.open('https://www.reddit.com/submit?url=' + encodeURIComponent(window.location)); return false" aria-label="Reddit link"></a>
                 </div>
                 <h1 id="post_title">{{ page.title | escape }}</h1>
@@ -101,6 +102,7 @@ <h1 id="post_title">{{ page.title | escape }}</h1>
             {{ content }}
             <div class="share_post_container">
                 {% assign page_title = page.title | replace: "'" , "\\\\'" %}
+                <a class="twitter_link" href="https://twitter.com/intent" onclick="window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent('{{ page_title }}') + '&url=' + encodeURIComponent(window.location)); return false" aria-label="Twitter link"></a>
                 <a class="reddit_link" href="https://www.reddit.com/submit" onclick="window.open('https://www.reddit.com/submit?url=' + encodeURIComponent(window.location)); return false" aria-label="Reddit link"></a>
             </div>
             <div id="blog_link_container">
@@ -116,5 +118,6 @@ <h1 id="post_title">{{ page.title | escape }}</h1>
 </div>
 
 <div class="d-none">
+    <img src="/img/twitter_link_hover.svg">
     <img src="/img/reddit_link_hover.svg">
 </div>

src/main/content/antora_ui/src/partials/footer-content.hbs

@@ -7,6 +7,7 @@
             </div>
             <div id="footer_round_links_container">
                 <a id="footer_github_link" class="footer_round_btn" href="https://github.com/OpenLiberty/" target="_blank" rel="noopener" aria-label="Github"></a>
+                <a id="footer_twitter_link" class="footer_round_btn" href="https://twitter.com/OpenLibertyIO" target="_blank" rel="noopener" aria-label="Twitter"></a>
                 <a id="footer_stackoverflow_link" class="footer_round_btn" href="https://stackoverflow.com/questions/tagged/open-liberty" target="_blank" rel="noopener" aria-label="Open Liberty questions on Stack Overflow"></a>
                 <a id="footer_groupsio_link" class="footer_round_btn" href="https://groups.io/g/openliberty" target="_blank" rel="noopener" aria-label="Open Liberty Groups.io"></a>
                 <a id="footer_gitter_link" class="footer_round_btn" href="https://app.gitter.im/#/room/#OpenLiberty_development:gitter.im" target="_blank" rel="noopener" aria-label="Open Liberty Gitter"></a>
@@ -35,6 +36,7 @@
 <!-- PRE-LOADED IMAGES FOR ON HOVER BEHAVIOR -->
 <div class="d-none hidden">
     <img src="{{uiRootPath}}/img/Footer_GitCat_Hover.svg" alt="OpenLiberty Github link">
+    <img src="{{uiRootPath}}/img/Footer_TwitterBird_Hover.svg" alt="OpenLibertyIO Twitter link">
     <img src="{{uiRootPath}}/img/Footer_StackO_Hover.svg" alt="Open-liberty Stack Overflow link">
     <img src="{{uiRootPath}}/img/Footer_GroupsIO_Hover.svg" alt="Openliberty Groups IO link">    
     <img src="{{uiRootPath}}/img/footer_gitter_hover.svg" alt="Openliberty Gitter link">

src/main/content/antora_ui/src/partials/header-content.hbs

@@ -27,6 +27,7 @@
                 </li>
             </ul>
             <div id="header_round_links_container"> 
+                <a id="header_twitter_link" class="header_round_button" href="https://twitter.com/OpenLibertyIO" target="_blank" rel="noopener noreferrer" aria-label="Twitter"></a>
                 <a id="header_stackoverflow_link" class="header_round_button" href="https://stackoverflow.com/questions/tagged/open-liberty" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty questions on Stack Overflow"></a>
                 <a id="header_groupsio_link" class="header_round_button" href="https://groups.io/g/openliberty" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty Groups.io"></a>
                 <a id="header_gitter_link" class="header_round_button" href="https://app.gitter.im/#/room/#OpenLiberty_development:gitter.im" target="_blank" rel="noopener noreferrer" aria-label="Open Liberty Gitter"></a>

src/main/content/blog.html

@@ -43,7 +43,11 @@ <h2 class="blog_subtitle">
      {% t blog.never_miss_a_post %}
     </h2>
     <p class="blog_subtext">
-     {% t blog.be_sure_to_subscribe %}
+     {% t blog.be_sure_to_follow %}
+     <a class="green_link" href="https://twitter.com/OpenLibertyIO" rel="noopener" target="_blank">
+      @openliberty.io
+     </a>
+     {% t blog.twitter_or_subscribe %}
      <a class="green_link" href='{{ "/feed.xml" | relative_url }}' rel="noopener" target="_blank">
       RSS
      </a>

src/main/content/start.html

@@ -273,7 +273,8 @@ <h2 id="downloads-pkg" class="section_title"><a class="anchor" href="#downloads-
                     <div class="col-sm-12">
                         <p class="download_sentence">
                             {% t start.download_package_section.releases_content1 %}
-                            <a href="{{baseURL}}/blog/?search=release&key=tag" class="blue_link_light_background_external">{% t pages.blog %}</a>.
+                            <a href="{{baseURL}}/blog/?search=release&key=tag" class="blue_link_light_background_external">{% t pages.blog %}</a>
+                            {% t global.and %} <a href="https://twitter.com/OpenLibertyIO" target="_blank" rel="noopener" class="orange_link_light_background">{% t global.twitter %}</a>.
                             <br/>
                             <br/>
                             {% t start.download_package_section.releases_content2 %}

src/main/content/support.html

@@ -60,6 +60,18 @@ <h2>{% t support.paid_support_includes %}</h2>
 
         <div id="cards_container" class="container">
             <div class="row">
+                <div class="col-md-6 col-lg-3 card_column">
+                    <a href="https://twitter.com/OpenLibertyIO" class="card" target="_blank" rel="noopener">
+                        <figure aria-labelledby="twitter_logo" id="twitter_logo_background" class="card_gradient_background">
+                            <img id="twitter_logo" src="/img/twitter_logo.svg" class="d-block mx-auto" alt="twitter">
+                        </figure>
+                        <div class="card-body">
+                            <h5 class="card-title">@{% t global.openlibertyio %}</h5>
+                            <p class="card-text">{% t global.news_and_updates %}</p>
+                        </div>
+                    </a>
+                </div>
+
                 <div class="col-md-6 col-lg-3 card_column">
                     <a href="https://stackoverflow.com/questions/tagged/open-liberty" class="card" target="_blank" rel="noopener">
                         <figure aria-labelledby="stack_overflow_logo" id="stack_overflow_logo_background" class="card_gradient_background">