Add blog to site

assets/sass/blog.sass

@@ -0,0 +1,4 @@
+.blog-section
+  .content
+    p
+      text-align: justify;

assets/sass/news-section.sass

@@ -0,0 +1,23 @@
+$news-section-padding: 0.5rem 1.5rem !default
+$news-section-padding-medium: 1.5rem 1.5rem !default
+$news-section-padding-large: 3rem 1.5rem !default
+
+.news-section
+  padding: $news-section-padding
+  // Responsiveness
+  +desktop
+    // Sizes
+    &.is-medium
+      padding: $news-section-padding-medium
+    &.is-large
+      padding: $news-section-padding-large
+  .news-header
+    overflow: hidden;
+    white-space: nowrap;
+    display: flex;
+    .news-title
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    .news-link
+      padding-left: 0.75rem;

assets/sass/style.sass

@@ -56,6 +56,8 @@ $tabs-link-active-border-bottom-color: $dark
 @import "syntax"
 @import "header-link"
 @import "override"
+@import "news-section"
+@import "blog"
 
 .is-borderless
   border: none !important
@@ -122,3 +124,16 @@ img[src*="/img/concepts/enterprise/3x1/"]
 
 img[src*="/img/concepts/"]
   width: 80%;
+
+ul.pagination
+  width: 25%;
+
+.paginator-container
+  padding: 10px;
+  display: flex;
+  justify-content: center;
+
+.rounded-tag
+    width: fit-content;
+    border-radius: 1rem;
+    padding: 0 1rem;

config.toml

@@ -31,12 +31,17 @@ name = "Events"
 url = "/events"
 weight = 3
 
+[[menu.navbar]]
+name = "Blog"
+url = "/blog"
+weight = 4
+
 
 # The site's parameters
 [params]
 twitter = "nservicemesh"
 fontawesomeversion = "5.8.1"
-dateFormat = "6 January 2006"
+dateFormat = "02.01.2006"
 subtitle = "The Hybrid/Multi-cloud IP Service Mesh"
 
 description = """

content/blog/2024/2024-01-11-testing-service-mesh-performance copy.md

@@ -0,0 +1,12 @@
++++
+title = "Testing Service Mesh Performance in Multi-Cluster Scenario: Istio vs Kuma vs NSM"
+date = 2024-01-11
+announce= "This article may be useful for those who are aware of service meshes and probably trying to improve scalability and connectivity between applications in Kubernetes and other container orchestration systems, e.g., adding encryption and authorization for application connections."
+showToC = false
++++
+
+# Testing Service Mesh Performance in Multi-Cluster Scenario: Istio vs Kuma vs NSM
+
+Have you ever wondered how different service meshes perform in dual cluster scenarios?
+
+Check out the latest assessments from **Pragmagic Inc** in [Testing Service Mesh Performance in Multi-Cluster Scenario: Istio vs Kuma vs NSM](https://dev.to/pragmagic/testing-service-mesh-performance-in-multi-cluster-scenario-istio-vs-kuma-vs-nsm-4agj)

content/blog/2024/2024-01-26-enlightning-understanding-nsm.md

@@ -0,0 +1,12 @@
++++
+title = "Enlightning - Understanding Network Service Mesh"
+date = 2024-01-26
+announce = "Check out how Network Service Mesh enables your workloads to get connectivity, security, and observability amongst each other independent of where they are running!"
+showToC = false
++++
+
+# Enlightning - Understanding Network Service Mesh
+
+Check out how Network Service Mesh enables your workloads to get connectivity, security, and observability amongst each other independent of where they are running!
+
+{{<youtube nyfeysBlO5c>}}

content/blog/_index.md

@@ -0,0 +1,4 @@
+---
+title: Blog
+---
+

layouts/blog/section.en.html

@@ -3,5 +3,6 @@
 {{ end }}
 
 {{ define "main" }}
-<h1>Blog</h1>
+{{ partial "hero.html" . }}
+{{ partial "blog.html" . }}
 {{ end }}

layouts/blog/single.en.html

@@ -0,0 +1,8 @@
+{{ define "title" }}
+Network Service Mesh events
+{{ end }}
+
+{{ define "main" }}
+{{ partial "blog/hero.html" . }}
+{{ partial "blog/article.html" . }}
+{{ end }}

layouts/index.en.html

@@ -1,6 +1,7 @@
 {{ define "main" }}
 {{ $subtitle := site.Params.subtitle }}
 {{ partial "home/hero.html" . }}
+{{ partial "home/news.html" . }}
 {{ partial "home/what-it-is.html" . }}
 {{ partial "home/use-cases.html" . }}
 {{ partial "home/how-it-works.html" . }}

layouts/partials/blog.html

@@ -0,0 +1,21 @@
+{{ $paginator := .Paginate ((where site.RegularPages "Section" "blog").ByDate.Reverse ) }}
+<div class="paginator-container">
+    {{ template "_internal/pagination.html" . }}
+</div>
+<section class="section">
+    <div class="container">
+        {{ range $paginator.Pages }}
+            <a href="{{ .RelPermalink }}"><strong>{{ .Title }}</strong></a>, 
+            {{ .Date.Format site.Params.dateFormat }}
+            {{ if isset .Params "announce" }}
+            </br>
+            {{ .Params.announce }} <a href="{{ .RelPermalink }}"><strong>Read more...</strong></a>
+            {{ end }}
+            <br/><br/>
+        {{ end }}
+
+    </div>
+</section>
+<div class="paginator-container">
+    {{ template "_internal/pagination.html" . }}
+</div>

layouts/partials/blog/article.html

@@ -0,0 +1,30 @@
+{{ $toc := .TableOfContents }}
+
+<section class="section blog-section">
+  <div class="container">
+    <div class="columns">
+      <div class="column{{ if and $toc (eq .Params.showToC true) }} is-three-quarters{{ end }}">
+        {{ if eq .Params.showToC true }}
+          {{ with $toc }}
+          <div class="is-hidden-tablet">
+            {{ partial "blog/toc.html" . }}
+
+            <hr />
+          </div>
+          {{ end }}
+        {{ end }}
+        <div class="content is-narrow-desktop">                
+          {{ .Content }}
+        </div>
+      </div>
+
+      {{ if eq .Params.showToC true  }}
+        {{ with $toc }}
+        <div class="is-hidden-mobile">
+          {{ partial "blog/toc.html" . }}
+        </div>
+        {{ end }}
+      {{ end }}
+    </div>
+  </div>
+</section>

layouts/partials/blog/hero.html

@@ -0,0 +1,9 @@
+<section class="hero is-light">
+  <div class="hero-body">
+    <div class="container">
+        <p class="title has-text-weight-light">
+          {{ .CurrentSection.Title }}
+        </p>
+    </div>
+  </div>
+</section>

layouts/partials/blog/toc.html

@@ -0,0 +1,7 @@
+<div class="toc">
+  <p class="title is-size-4 is-size-5-mobile has-text-weight-medium">
+    Table of contents
+  </p>
+
+  {{ . }}
+</div>

layouts/partials/home/news.html

@@ -0,0 +1,19 @@
+{{ $lastnews := index (where site.RegularPages "Section" "blog").ByDate.Reverse 0 }}
+
+<section class="news-section has-background-light">
+    <div class="container">
+        <div class="columns is-variable is-8">
+            <div class="column is-3">
+                <div class="has-text-weight-bold has-text-white has-background-orange rounded-tag">
+                    Latest news
+                </div>
+            </div>
+
+            <div class="column is-9">
+                <div class="news-header">
+                    <p class="news-title">{{ $lastnews.Title }}</p><a class="news-link" href="/blog">Read more...</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

layouts/partials/home/recent-blog-posts.html

@@ -0,0 +1,32 @@
+{{ $posts := (where site.RegularPages "Section" "blog").ByDate.Reverse }}
+{{ $maxposts := 4 }}
+
+{{ if gt $posts.Len 0 }}
+<section class="section has-background-light">
+  <div class="container">
+    <div class="columns is-variable is-8">
+      <div class="column is-one-quarter">
+        <p class="title is-size-3 is-size-4-mobile has-text-weight-bold">
+          Recent blog posts
+        </p>
+
+        <hr class="thick" />
+
+        <span class="icon is-large has-text-orange">
+          <i class="fas fa-2x fa-project-diagram"></i>
+        </span>
+      </div>
+
+      <div class="column">
+        <div class="content is-size-5 is-size-6-mobile">
+            <ul>
+                {{ range first $maxposts $posts }}
+                   <li><a href="{{ .RelPermalink }}">{{ .Title}}</a>
+                {{ end }}
+            </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+{{ end }}