Add articles page (#167)

Signed-off-by: mohin7 <mohin@appscode.com>
kubedb · Jul 27, 2023 · 6046152 · 6046152
1 parent ccdbc91
commit 6046152
Show file tree

Hide file tree

Showing 12 changed files with 801 additions and 47 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,4 @@
 .DS_Store
 .hugo_build.lock
 *.css.map
-
+main.css.map
diff --git a/content/articles/_index.md b/content/articles/_index.md
@@ -0,0 +1,8 @@
+---
+title: Articles
+menu:
+  main:
+    identifier: articles
+    name: Articles
+    weight: 20
+---
diff --git a/...ticles/how-to-deploy-postgres-via-kubernetes-postgresql-operator final/hero.jpg b/...ticles/how-to-deploy-postgres-via-kubernetes-postgresql-operator final/hero.jpg
diff --git a/...ticles/how-to-deploy-postgres-via-kubernetes-postgresql-operator final/index.md b/...ticles/how-to-deploy-postgres-via-kubernetes-postgresql-operator final/index.md
diff --git a/layouts/articles/list.html b/layouts/articles/list.html
@@ -0,0 +1,42 @@
+{{ define "main" }}
+
+{{- $pctx := . -}}
+{{- $pages := $pctx.RegularPages -}}
+
+<!-- articles area for page start -->
+<section class="articles-area">
+  <div class="container">
+    <div class="columns is-multiline">
+      <div class="column is-12">
+        <h4>All Articles</h4>
+      </div>
+      {{ range $idx, $p := $pages.ByDate.Reverse }}
+      <div class="column is-3">
+        <a href="{{ $p.RelPermalink }}" class="single-article-card">
+
+          <div class="thumbnail">
+            {{ $original := $p.Resources.GetMatch "hero.jpg" }}
+            {{ $cropped := $original.Resize "x220" }}
+            <img src="{{ $cropped.RelPermalink }}" alt="{{ $p.Title }}" loading="lazy" decoding="async">
+          </div>
+          <div class="p-16">
+            <h2 class="is-ellipsis-2" title="Monitor MongoDB with Grafana Dashboard in Azure Kubernetes Service (AKS)">{{ $p.Title }}</h2>
+            <p class="is-ellipsis-2">{{$p.Description }}</p>
+            <div class="card-bottom is-flex is-justify-content-space-between">
+              <div class="date-meta">{{ .Date.Format "2-Jan-2006" }}</div>
+              <div class="arrow-icon width-15">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentcolor" class="w-5 h-5">
+                  <path fill-rule="evenodd" d="M3 10a.75.75.0 01.75-.75h10.638L10.23 5.29a.75.75.0 111.04-1.08l5.5 5.25a.75.75.0 010 1.08l-5.5 5.25a.75.75.0 11-1.04-1.08l4.158-3.96H3.75A.75.75.0 013 10z" clip-rule="evenodd"></path>
+                </svg>
+              </div>
+            </div>
+          </div>
+        </a>
+      </div>
+      {{end}}
+    </div>
+  </div>
+</section>
+<!-- articles area for page end -->
+
+{{ end }}
diff --git a/layouts/articles/single.html b/layouts/articles/single.html
@@ -0,0 +1,62 @@
+{{ define "main" }}
+
+
+
+<section class="article-details-area">
+  <div class="container">
+    <!-- is-centered -->
+    <div class="columns is-multiline">
+      <div class="column is-9">
+        <div class="full-info">
+          {{ .Content }}
+        </div>
+
+        <h5 class="mb-16">Share on social media</h5>
+        <!-- sticky social menu start  -->
+
+        <div class="sticky-social-menu">
+          <div class="social-share">
+            <ul class="social-share-button">
+              <li>
+                <a title="Share with Twitter" href="http://twitter.com/share?url={{ .Permalink }}&text={{ .Title | htmlEscape }}"
+                  class="twitter" aria-label="share on Twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
+              </li>
+              <li>
+                <a title="Share with Linkedin"
+                  href="https://www.linkedin.com/shareArticle?mini=true&url={{ .Permalink }}&title={{ .Title | htmlEscape }}&summary={{ .Summary | htmlEscape }}&source=LinkedIn"
+                  class="linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
+              </li>
+              <li>
+                <a title="Share with Facebook" href="http://www.facebook.com/sharer.php?u={{ .Permalink }}"
+                  class="facebook"
+                  aria-label="share on Facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
+              </li>
+              <li>
+                <a title="Share with Email"
+                  href="mailto:?&subject={{ .Title | htmlEscape }}&body={{ .Permalink | htmlEscape }}"><i
+                    class="fa fa-envelope-o" aria-hidden="true"></i></a>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <!--sticky  social menu end -->
+      </div>
+
+      <div class="column is-3">
+        <div class="right-sidebar">
+          <div class="right-sidebar-area">
+            <div class="tbl-of-contents">
+              <button class="button ac-button inline-button back-button pl-15 is-hidden-desktop"><span class="material-icons-outlined">arrow_back</span>Back</button>
+              <h4>What's on this Page</h4>
+              {{ .TableOfContents }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </div>
+</section>
+
+{{ end }}
diff --git a/static/assets/sass/base/_global.scss b/static/assets/sass/base/_global.scss
@@ -314,6 +314,30 @@
   }
 }
 
+.text-underline {
+  font-weight: 500;
+  position: relative;
+  text-decoration: underline;
+
+  &:after {
+    position: absolute;
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 0;
+    height: 2px;
+    background: $ac-primary;
+    border-radius: 50px;
+    transition: 0.3s ease-in-out;
+  }
+
+  &:hover {
+    &:after {
+      width: 100%;
+    }
+  }
+}
+
 /****************************************
 Responsive Classes
 *****************************************/

diff --git a/static/assets/sass/layouts/_articles.scss b/static/assets/sass/layouts/_articles.scss
@@ -0,0 +1,211 @@
+.articles-area {
+  padding-top: 140px;
+  padding-bottom: 40px;
+}
+.single-article-card {
+  background-color: #fff;
+  display: block;
+  min-height: 166px;
+  transition: 0.3s ease-in-out;
+  border: 1px solid #dbdbde;
+  transition: 0.3s ease-in-out;
+
+  &:hover {
+    border: 1px solid $ac-primary;
+
+    h2 {
+      text-decoration: underline;
+      color: $ac-primary;
+    }
+
+    .arrow-icon {
+      color: $ac-primary;
+    }
+  }
+
+  h2 {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 150%;
+    color: #1c1c1c;
+    margin-bottom: 8px;
+    letter-spacing: 0;
+    transition: 0.3s ease-in-out;
+  }
+  p {
+    color: #506070;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  .card-bottom {
+    color: #506070;
+  }
+  .date-meta {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 13px;
+    line-height: 17px;
+  }
+  .width-15 {
+    width: 15px !important;
+  }
+  .thumbnail {
+    display: flex;
+    background-color: #dddddd;
+    img {
+      height: 220px;
+      width: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+// ===================================== articles details  area =====================================
+.article-details-area {
+  margin-top: 140px;
+
+  .full-info {
+    padding-right: 32px;
+    padding-bottom: 32px;
+    h1 {
+      font-size: 48px;
+      max-width: 90%;
+    }
+    p {
+      font-size: 16px;
+      line-height: 170%;
+      color: #506070;
+    }
+
+    a {
+      @extend .text-underline;
+    }
+  }
+  .right-sidebar {
+    position: sticky;
+    top: 70px;
+    border-left: 1px solid #dbdbde;
+    margin-top: -25px;
+    width: 324px;
+    padding-top: 24px;
+    height: 100%;
+  }
+}
+
+// social share 
+.sticky-social-menu {
+  padding-bottom: 80px;
+}
+ul.social-share-button {
+  padding: 0;
+  display: flex;
+  align-items: center;
+
+  li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    margin-right: 1rem;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    a {
+      width: 46px;
+      height: 46px;
+      background: #1da1f2;
+      color: $ac-white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &:hover {
+        i.fa {
+          animation: icon-animation 0.9s both;
+        }
+      }
+
+      &.twitter {
+        background-color: #1da1f2;
+      }
+
+      &.github {
+        background-color: #171516;
+      }
+
+      &.linkedin {
+        background-color: #0a66c2;
+      }
+
+      &.facebook {
+        background-color: #4867aa;
+      }
+
+      &.envelope {
+        background-color: #4285f4;
+      }
+
+      i.fa {
+        font-size: 1rem;
+      }
+    }
+  }
+}
+
+/*=================================================================================================
+                                    Responsive code start
+=================================================================================================*/
+
+@media (max-width: 480px) {
+}
+
+// Extra small devices (portrait phones, less than 768px)
+@media (max-width: 768px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 768px) {
+}
+
+// Medium devices (tablets, 769px and up)
+@media (min-width: 769px) and (max-width: 1023.98px) {
+  .single-article-card {
+    padding: 12px 16px;
+  }
+}
+
+@media (min-width: 850px) and (max-width: 1023px) {
+}
+
+// Large devices (desktops, 1024px and up)
+@media (min-width: 1024px) and (max-width: 1407px) {
+}
+
+// Extra large devices (large desktops, 1216px and up)
+@media (min-width: 1216px) {
+}
+
+@media (min-width: 1408px) and (max-width: 1600px) {
+  .meta {
+    margin-bottom: 10px;
+
+    .author {
+      margin-right: 4px;
+    }
+  }
+
+  .single-article-card {
+    padding: 16px;
+  }
+}
+
+/*=================================================================================================
+                                    Responsive code end
+=================================================================================================*/