From b81fd5078b576b2c8195f7394c9ddc8d220bceb2 Mon Sep 17 00:00:00 2001
From: Emruz Hossain <hossainemruz@gmail.com>
Date: Fri, 29 Jul 2022 23:12:14 +0600
Subject: [PATCH] Add publication section (#620)

* Add publication section

Signed-off-by: hossainemruz <hossainemruz@gmail.com>

* Don't make tags clickable

Signed-off-by: hossainemruz <hossainemruz@gmail.com>
---
 layouts/index.html                          |   1 +
 layouts/partials/cards/publication.html     |  39 ++++++
 layouts/partials/sections/projects.html     |   2 +-
 layouts/partials/sections/publications.html |  30 ++++
 static/css/layouts/main.css                 |   6 +-
 static/css/sections/publications.css        | 147 ++++++++++++++++++++
 static/js/home.js                           |  19 ++-
 7 files changed, 239 insertions(+), 5 deletions(-)
 create mode 100644 layouts/partials/cards/publication.html
 create mode 100644 layouts/partials/sections/publications.html
 create mode 100644 static/css/sections/publications.css

diff --git a/layouts/index.html b/layouts/index.html
index 6b8f29e..4ba24a7 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -25,6 +25,7 @@
     <link rel="stylesheet" href="{{ "/css/sections/recent-posts.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/achievements.css" | relURL }}"/>
     <link rel="stylesheet" href="{{ "/css/sections/accomplishments.css" | relURL }}"/>
+    <link rel="stylesheet" href="{{ "/css/sections/publications.css" | relURL }}"/>
 
     <!--================= custom style overrides =========================-->
     <link rel="stylesheet" href="{{ "/css/style.css" | relURL }}"/>
diff --git a/layouts/partials/cards/publication.html b/layouts/partials/cards/publication.html
new file mode 100644
index 0000000..bdc7b21
--- /dev/null
+++ b/layouts/partials/cards/publication.html
@@ -0,0 +1,39 @@
+{{ $dataCategories:= slice "pub-all"}}
+{{ range .categories}}
+  {{ $dataCategories = $dataCategories | append (printf "pub-%s" .)}}
+{{end}}
+
+<div
+  class="col-12 p-2 pub-filtr-item"
+  data-category='{{ delimit $dataCategories ","}}'
+>
+  <div class="card mt-3">
+    <div class="card-header">
+      <h5 class="card-title mb-0">{{ .title }}</h5>
+      <div class="sub-title">
+        <span><a class="" href="{{.publishedIn.url}}">{{ .publishedIn.name }}</a></span>
+        <span class="ml-2">{{ .publishedIn.date }}</span>
+      </div>
+      <div class="authors">
+        {{ range $index,$author:= .authors }}
+          <span class="mr-2"><a class="" href="{{.url}}">{{ .name }}</a></span>
+        {{ end }}
+      </div>
+    </div>
+    <div class="card-body">
+      <p>{{ .paper.summary | markdownify }}</p>
+    </div>
+    <div class="card-footer">
+      <div class="tags">
+        {{ range $index,$tag:= .tags }}
+            <span class="btn badge btn-info ml-1 p-2">
+              {{ $tag }}
+            </span>
+        {{ end }}
+      </div>
+      <div class="details-btn">
+        <a class="btn btn-outline-info ml-1 pl-2 mb-2" href="{{ .paper.url }}" target="_blank" rel="noopener" role="button">{{ i18n "project_details"}}</a>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html
index c658e2c..34a5e6f 100644
--- a/layouts/partials/sections/projects.html
+++ b/layouts/partials/sections/projects.html
@@ -14,7 +14,7 @@
   <div class="container ml-auto text-center">
     <div class="btn-group flex-wrap" role="group" id="project-filter-buttons">
       {{ range .buttons }}
-      <button type="button" class="btn btn-dark" data-filter="{{ .filter }}">
+      <button type="button" class="btn btn-dark project-filtr-control" data-filter="{{ .filter }}">
         {{ .name }}
       </button>
       {{ end }}
diff --git a/layouts/partials/sections/publications.html b/layouts/partials/sections/publications.html
new file mode 100644
index 0000000..733d578
--- /dev/null
+++ b/layouts/partials/sections/publications.html
@@ -0,0 +1,30 @@
+{{ $sectionID := replace (lower .section.name) " " "-"  }}
+{{ if .section.id }}
+  {{ $sectionID = .section.id }}
+{{ end }}
+
+<div class="container-fluid anchor pb-5 publications-section" id="{{ $sectionID }}">
+  {{ if not (.section.hideTitle) }}
+    <h1 class="text-center">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ else }}
+    <h1 class="text-center" style="display: none">
+        <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
+  {{ end }}
+  <div class="container ml-auto text-center">
+    <div class="btn-group flex-wrap" role="pub-group" id="publication-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark pub-filtr-control" data-filter="pub-{{ .filter }}">
+        {{ .name }}
+      </button>
+      {{ end }}
+    </div>
+  </div>
+  <div class="container filtr-publications">
+    <div class="row" id="publication-card-holder">
+      {{ range .publications }}
+        {{ partial "cards/publication" . }}
+      {{ end }}
+    </div>
+  </div>
+</div>
diff --git a/static/css/layouts/main.css b/static/css/layouts/main.css
index 0303086..ddf9342 100644
--- a/static/css/layouts/main.css
+++ b/static/css/layouts/main.css
@@ -444,7 +444,8 @@ mark {
 
 @media only screen and (max-width: 576px) {
   .skills-section .container,
-  .projects-section .container {
+  .projects-section .container,
+  .publications-section .container {
     padding-left: 0.3rem;
     padding-right: 0.3rem;
   }
@@ -457,7 +458,8 @@ mark {
   .skills-section,
   .projects-section,
   .recent-posts-section,
-  .achievements-section {
+  .achievements-section,
+  .publications-section {
     padding-left: 0;
     padding-right: 0;
   }
diff --git a/static/css/sections/publications.css b/static/css/sections/publications.css
new file mode 100644
index 0000000..f4dcd73
--- /dev/null
+++ b/static/css/sections/publications.css
@@ -0,0 +1,147 @@
+.publications-section h1 > span{
+  margin-top: -55px;  /* Size of fixed header */
+  padding-bottom:55px; 
+  display: block; 
+}
+
+.publications-section .card {
+  background: #fff;
+  border-top: 2px solid #248aaa;
+}
+.publications-section .card .card-header {
+  background: none;
+  border: none;
+  display: flex;
+  flex-direction: column;
+}
+
+.publications-section .card .card-header .sub-title {
+  color: #8392a5;
+  margin-top: 0.4rem;
+}
+
+.publications-section .card .sub-title :nth-child(2) {
+  float: right !important;
+}
+
+.publications-section .card .card-body {
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.publications-section .card .card-footer {
+  background: #fff;
+  border: none;
+  padding: 0;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 0.3rem;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.publications-section .card .card-footer .tags {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.publications-section .card .card-footer .tags .badge {
+  cursor: auto;
+}
+
+.filtr-publications {
+  padding: 1rem !important;
+}
+
+.publications-section .btn-group{
+  justify-content: center;
+}
+
+/* ============= Device specific fixes ======= */
+
+/* Large screens such as TV */
+@media only screen and (min-width: 1824px) {
+}
+
+/* Extra large devices (large desktops, 1200px and up) */
+
+@media (max-width: 1400px) {
+}
+
+@media (max-width: 1200px) {
+}
+
+/* IPad Pro */
+@media (max-width: 1024px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publicationss-section .filtr-publications {
+    padding: 0;
+  }
+  .publicationss-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+  }
+}
+
+/*  Large devices (desktops, 992px and up) */
+
+@media (max-width: 992px) {
+}
+
+/* Medium devices (tablets, 768px and up) */
+
+@media only screen and (max-width: 768px) {
+  .publications-section {
+    padding-left: 0;
+    padding-right: 0;
+    width: 100%;
+  }
+  .publications-section .container {
+    max-width: 100%;
+  }
+  .publications-section .filtr-publications {
+    padding: 0;
+  }
+  .publications-section .pub-filtr-item {
+    padding-left: 0.2rem;
+    padding-right: 0.2rem;
+    flex: 100%;
+  }
+}
+
+/* Small devices (landscape phones, 576px and up) */
+
+@media only screen and (max-width: 576px) {
+  .publications-section .btn {
+    margin-top: 0.3125rem;
+  }
+  .publications-section .pub-filtr-item {
+    flex: 100%;
+    max-width: 100%;
+  }
+  .publications-section .card .card-footer .tags {
+    flex: 100%;
+  }
+}
+
+/* iPhoneX, iPhone 6,7,8 */
+@media only screen and (max-width: 375px) {
+}
+
+/* Galaxy S5, Moto G4 */
+@media only screen and (max-width: 360px) {
+}
+
+/* iPhone 5 or before */
+@media only screen and (max-width: 320px) {
+}
diff --git a/static/js/home.js b/static/js/home.js
index d1c0b5f..614540d 100644
--- a/static/js/home.js
+++ b/static/js/home.js
@@ -1,6 +1,6 @@
 "use strict";
 
-var projectCards;
+var projectCards, publicationCards;
 
 (function ($) {
   jQuery(document).ready(function () {
@@ -79,7 +79,22 @@ var projectCards;
 
     var projectCardHolder = document.getElementById("project-card-holder");
     if (projectCardHolder != null && projectCardHolder.children.length != 0) {
-      projectCards = $(".filtr-projects").filterizr({ layout: 'sameWidth' });
+      projectCards = $(".filtr-projects").filterizr(
+        {
+          layout: 'sameWidth',
+          controlsSelector: '.project-filtr-control',
+        });
+    }
+
+    // ================== Publication cards =====================
+    var publicationCardHolder = document.getElementById("publication-card-holder");
+    if (publicationCardHolder != null && publicationCardHolder.children.length != 0) {
+      publicationCards = $(".filtr-publications").filterizr(
+        {
+          layout: 'sameWidth',
+          gridItemsSelector: '.pub-filtr-item',
+          controlsSelector: '.pub-filtr-control',
+        });
     }
 
     function showGithubStars() {