Site improvements (#3677)

- Added call-to-action buttons in the 1.1 announcements. We can use the same
buttons in future release announcements.

- Fixed broken large warning icon on the 404 error page.

- Fix oerder of blog posts in the side bar.

- Add support to not expand @@ notations in text blocks and use
it for a text blocks that's currently triggering a build failure

- Fixed broken rendering of some text blocks when syntax coloring
is turned off via the menu.

content/blog/2019/announcing-1.0.6/index.md

@@ -3,7 +3,6 @@ title: Announcing Istio 1.0.6
 description: Istio 1.0.6 patch release.
 publishdate: 2019-02-12
 attribution: The Istio Team
-weight: 77
 ---
 
 We're pleased to announce the availability of Istio 1.0.6. Please check out the [release notes](/about/notes/1.0.6/) to learn more and download this update.

content/blog/2019/announcing-1.1/index.md

@@ -4,7 +4,10 @@ description: Istio 1.1 release announcement.
 publishdate: 2019-03-14
 attribution: The Istio Team
 ---
-We are pleased to announce the release of Istio 1.1.
+
+We are pleased to announce the release of Istio 1.1!
+
+{{< announcement_links "1.1" "1.1.0" >}}
 
 Since we released 1.0 back in July, we’ve done a lot of work to help people
 get into production. Not surprisingly, we had to do some patch releases (6 so

content/docs/tasks/telemetry/gateways/index.md

@@ -108,7 +108,7 @@ the [Secret Discovery Service](https://www.envoyproxy.io/docs/envoy/latest/confi
 
 1. Wait until the server certificate is ready.
 
-    {{< text bash >}}
+    {{< text bash "" "" false >}}
     $ JSONPATH='{range .items[*]}{@.metadata.name}:{range @.status.conditions[*]}{@.type}={@.status}{end}{end}' && kubectl -n istio-system get certificates -o jsonpath="$JSONPATH"
     telemetry-gw-cert:Ready=True
     {{< /text >}}

i18n/en.toml

@@ -180,3 +180,9 @@ other = "-"
 
 [syntax_coloring]
 other = "Color Examples"
+
+[announcement_download]
+other = "DOWNLOAD %s"
+
+[announcement_relnotes]
+other = "%s RELEASE NOTES"

i18n/zh.toml

@@ -180,3 +180,9 @@ other = "中文内容由 ServiceMesher 社区维护，部分文档可能稍微
 
 [syntax_coloring]
 other = "Color Examples"
+
+[announcement_download]
+other = "Download %s"
+
+[announcement_relnotes]
+other = "^s Release Notes"

layouts/404.html

@@ -2,7 +2,7 @@
 
 <main class="notfound" role="main">
     <svg class="icon">
-        <use xlink:href="{{ .Site.BaseURL }}img/icons.svg#exclamation-mark"/>
+        <use xlink:href="{{ .Site.BaseURL }}/img/icons.svg#exclamation-mark"/>
     </svg>
 
     <div class="error">

layouts/shortcodes/announcement_links.html

@@ -0,0 +1,19 @@
+{{ $version := .Get 0 }}
+{{ $full_version := .Get 1 }}
+
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        window.setTimeout(function() {
+            document.getElementById('buttons').style.opacity = "1";
+        }, 250);
+    });
+</script>
+
+<div class="call-to-action">
+    <div id="buttons">
+        {{ if not .Site.Data.args.preliminary }}
+            <a class="btn" href="https://github.com/istio/istio/releases/tag/{{ $full_version }}">{{ printf (i18n "announcement_download") $version }}</a>
+        {{ end }}
+        <a class="btn" href="/about/notes/{{ $version }}/">{{ printf (i18n "announcement_relnotes") $version }}</a>
+    </div>
+</div>

layouts/shortcodes/relnote_links.html

@@ -33,7 +33,7 @@
     });
 </script>
 
-<div class="relnote-links">
+<div class="call-to-action">
     <div id="buttons">
         {{ if .Site.Data.args.preliminary }}
             {{ if ne $type_of_note "prelim" }}

layouts/shortcodes/text.html

@@ -4,6 +4,11 @@
     {{- $downloadas = .Get 2 -}}
 {{- end -}}
 
+{{- $expand_links := "true" -}}
+{{- if .Get 3 -}}
+    {{- $expand_links = .Get 3 -}}
+{{- end -}}
+
 {{- $syntax := "" -}}
 {{- $text := "" -}}
 {{- $output := "" -}}
@@ -52,19 +57,21 @@
     {{- end -}}
 {{- end -}}
 
-{{- /* include a dummy link to the special embedded @@ references so the links are statically checked as we build the site */ -}}
-{{- $branch := .Site.Data.args.source_branch_name -}}
-{{- $links := findRE "@(.*?)@" $text -}}
-{{- range $link := $links -}}
+{{- if eq $expand_links "true" -}}
+    {{- /* include a dummy link to the special embedded @@ references so the links are statically checked as we build the site */ -}}
+    {{- $branch := .Site.Data.args.source_branch_name -}}
+    {{- $links := findRE "@(.*?)@" $text -}}
+    {{- range $link := $links -}}
         {{- $target := trim $link "@" -}}
         {{- if gt (len $target) 0 -}}
             {{- $href := printf "https://raw.githubusercontent.com/istio/istio/%s/%s" $branch $target -}}
             <a data-skipendnotes="true" style="display:none" href="{{- $href -}}">Hello</a>
         {{- end -}}
+    {{- end -}}
 {{- end -}}
 
 {{- if $downloadas -}}
-<pre><code class='language-{{- $syntax -}}' data-downloadas='{{- $downloadas -}}'>{{- $text -}}</code></pre>
+<pre><code class='language-{{- $syntax -}}' data-expand='{{ $expand_links }}' data-downloadas='{{- $downloadas -}}'>{{- $text -}}</code></pre>
 {{- else -}}
-<pre><code class='language-{{- $syntax -}}'>{{- $text -}}</code></pre>
+<pre><code class='language-{{- $syntax -}}' data-expand='{{ $expand_links }}'>{{- $text -}}</code></pre>
 {{- end -}}

src/js/codeBlocks.js

@@ -149,7 +149,7 @@ function handleCodeBlocks() {
                         if (syntaxColoring) {
                             cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
                         } else {
-                            cmd += "$ " + tmp + "\n";
+                            cmd += "$ " + Prism.highlight(tmp, Prism.languages["plain"], "plain") + "\n";
                         }
                     }
 
@@ -182,12 +182,14 @@ function handleCodeBlocks() {
                 if (syntaxColoring) {
                     cmd += "$ " + Prism.highlight(tmp, Prism.languages["bash"], "bash") + "\n";
                 } else {
-                    cmd += "$ " + tmp + "\n";
+                    cmd += "$ " + Prism.highlight(tmp, Prism.languages["plain"], "plain") + "\n";
                 }
             }
 
             if (cmd !== "") {
+                if (code.dataset.expand === "true") {
                     cmd = cmd.replace(/@(.*?)@/g, "<a href='https://raw.githubusercontent.com/istio/istio/" + branchName + "/$1'>$1</a>");
+                }
 
                 let html = "<div class='command'>" + cmd + "</div>";
 

src/sass/_all.scss

@@ -13,6 +13,7 @@
 @import "misc/breadcrumbs";
 @import "misc/button";
 @import "misc/callout";
+@import "misc/call-to-action";
 @import "misc/code-blocks";
 @import "misc/community";
 @import "misc/endnotes";
@@ -33,7 +34,6 @@
 @import "misc/popover";
 @import "misc/primary";
 @import "misc/promotion";
-@import "misc/relnote-links";
 @import "misc/search-results";
 @import "misc/section-index";
 @import "misc/see-also";

src/sass/misc/_call-to-action.scss

@@ -1,4 +1,4 @@
-.relnote-links {
+.call-to-action {
     text-align: center;
 
     @media print {