feat: news pages and gallery updates

css/news-details-style.css

@@ -0,0 +1,61 @@
+.news-container {
+  padding-bottom: 24px;
+}
+
+.news-image-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.news-image {
+  width: auto;
+  height: 50vh;
+  object-fit: cover;
+  margin-bottom: 16px;
+}
+
+.news-image-caption {
+  font-weight: bold;
+  font-size: 1.2em;
+  margin: 8px 0;
+}
+
+.news-body {
+  margin-top: 8px;
+  font-size: 1.3em;
+  line-height: 1.2em;
+}
+
+.news-date-container {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+}
+
+.news-date-container p {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+  font-size: 1.3em;
+}
+
+.news-date-container i {
+  font-size: 1.3em;
+  padding: 0 8px 0 0;
+}
+
+.copy-news-link-button {
+  background-color: #2e2e2e;
+  color: #eee;
+  padding: 8px 16px;
+  border-radius: 2em;
+  margin-bottom: 8px;
+}
+
+.copy-news-link-button:disabled,
+.copy-news-link-button[disabled="disabled"] {
+  background-color: rgb(0, 156, 60);
+  color: #fff;
+}

data/news.json

@@ -1,46 +1,53 @@
 {
   "news": [
+    {
+      "date": "08/03/2022",
+      "title": "News on Graduate school admissions",
+      "description": "Big congratulations to our RAs who have received admission to graduate program at top universities of USA.",
+      "image": "/images/news/group_photo_mar_2022.jpg",
+      "link": "/news/08_03_2022_news_on_graduate_school_admissions.html"
+    },
     {
       "date": "08/03/2022",
       "title": "AGenCy Lab Meetup",
       "description": "We had the CCDS / AGenCy lab's big meetup today. The new faculty members Dr. M M Mahbubul Sayeed,  Dr. Asm Shihavuddin and Dr. Saadia Binte Alam who joined IUB this year, the current faculty members - Prof Arshad Momen, Prof Ashraful Amin, Dr. Amin Ahsan Ali and Dr. AKM Mahbubur Rahman,  the outgoing RAs, the new RAs, and the undergrads who are doing their senior project with us we present. We had a special session conducted by our outgoing RAs who received PhD admission with RAships/fellowships sharing their research experience and journey towards PhD admission. Special thanks to Amit Roy, Kashob Roy , Saif Mahmud Dhrubo and Tanjid Hasan Tonmoy, Fahim Faisal Niloy for sharing their phd admission experience.",
       "image": "images/news/group_photo_mar_2022.jpg",
-      "link": "news.html"
+      "link": "/news/08_03_2022_agency_lab_meetup.html"
     },
     {
       "date": "25/05/2021",
       "title": "Rehab team visits CRP",
       "description": "Our Rehab team has a successful meeting with the CRP physiotherapy team at Savar, Dhaka. Rehab team has shown demonstration for wearable sensors and  Kinect sensors to track limb movements",
       "image": "images/news/crp.png",
-      "link": "news.html"
+      "link": "/news/25_05_2021_rehab_team_visits_crp.html"
     },
     {
       "date": "20/05/2021",
       "title": "Paper accepted at IEEE ICIP 2021",
       "description": "Our paper 'Attention Toward Neighbors: A Context Aware Framework for High Resolution Image Segmentation', has been accepted in IEEE ICIP 2021. Congratulations to Niloy.",
       "image": "images/news/icip2021.png",
-      "link": "news.html"
+      "link": "/news/20_05_2021_paper_accespted_at_IEEE_ICIP_2021.html"
     },
     {
       "date": "17/04/2021",
       "title": "Presentation on semi-supervised variational interface",
       "description": "We have an online presentation and discussion on semi-supervised variational inference at 22:30 through Google Meet platform.",
       "image": "images/news/semi-vae.png",
-      "link": "news.html"
+      "link": "/news/17_04_2021_presentation_on_semi_supervised_vi.html"
     },
     {
       "date": "10/04/2021",
       "title": "Paper accepted at IJCNN 2021",
       "description": "Our paper 'Structure-Aware Hierarchical Graph Pooling using Information Bottleneck', has been accepted in IJCNN 2021 (Core Rank: A). Congratulations to Kashob and Amit.",
       "image": "images/news/ijcnn2021.png",
-      "link": "news.html"
+      "link": "/news/10_04_2021_struture_aware_hierarchical_graph_pooling_ijcnn_2021.html"
     },
     {
       "date": "10/04/2021",
       "title": "Paper accepted at IJCNN 2021",
       "description": "Our paper 'Node Embedding using Mutual Information and Self-Supervision based Bi-level Aggregation', has been accepted in IJCNN 2021 (Core Rank: A). Congratulations to Kashob and Amit.",
       "image": "images/news/ijcnn2021.png",
-      "link": "news.html"
+      "link": "/news/10_04_2021_node_embedding_using_mi_ijcnn_2021.html"
     },
     {
       "date": "09/02/2021",
@@ -250,4 +257,4 @@
       "description": "We have a online paper presentation session at 11:00 PM via Google Hangouts. Kashob will present on Astrophysics paper (Fast Galaxy)"
     }
   ]
-}
+}

gallery.html

@@ -55,7 +55,8 @@ <h3 class="title">Gallery</h3>
           >
             <li><a href="#root_workshop"> Root System Workshop </a></li>
             <li><a href="#segmentation"> Semantic Segmentation </a></li>
-            <li><a href="#rehab"> Rehabilitation </a></li>
+            <li><a href="#get_together"> Meetups </a></li>
+            <!-- <li><a href="#rehab"> Rehabilitation </a></li> -->
           </ul>
         </div>
 
@@ -156,7 +157,146 @@ <h3>Semantic Segmentation of Satellite Images of Bangladesh</h3>
               </ul>
             </div>
           </section>
-          <section id="rehab">
+          <section id="get_together">
+            <div class="page-header">
+              <h3>Meetups</h3>
+              <div class="row-fluid">
+                <ul class="thumbnails da-thumbs">
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_1.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_1.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_2.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_2.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_3.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_3.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_4.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_4.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_4_2.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_4_2.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_5.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_5.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_6.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_6.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_8.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_8.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_9.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_9.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                  <li class="span4">
+                    <a
+                      title="Meetup, March 08, 2022"
+                      href="images/meetups/meetup_march_08_2022_10.JPG"
+                      class="thumbnail"
+                    >
+                      <img
+                        alt=""
+                        src="images/meetups/meetup_march_08_2022_10.JPG"
+                        style="width: 187px; height: 125px"
+                      />
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </section>
+          <!-- <section id="rehab">
             <div class="page-header">
               <h3>Rehabilitation Exercise Evaluation</h3>
             </div>
@@ -167,7 +307,7 @@ <h3>Rehabilitation Exercise Evaluation</h3>
                 </li>
               </ul>
             </div>
-          </section>
+          </section> -->
         </div>
       </div>
     </div>

js/load-news.js

@@ -25,7 +25,7 @@ function loadNews() {
         const html = `<featured-news
                       date="${formatDate(date)}"
                       title="${title}"
-                      description="${description}"
+                      description="${description.slice(0, 240)}"
                       image=${image}
                       link=${link}
                     >

js/web-components/FeaturedNews.js

@@ -48,7 +48,7 @@ class FeaturedNews extends HTMLElement {
 
     if (featureDescription) {
       this.shadowRoot.querySelector(".feature-description").innerHTML =
-        featureDescription;
+        featureDescription + "...";
     }
 
     if (featureImage) {

js/web-components/NewsDetails.js

@@ -0,0 +1,72 @@
+const newsDetailsTemplate = document.createElement("template");
+newsDetailsTemplate.innerHTML = `
+  <link href="/css/theme.css" rel="stylesheet" />
+  <link href="/css/news-details-style.css" rel="stylesheet" />
+  <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
+      integrity="sha512-SfTiTlX6kk+qitfevl/7LibUOeJWlt9rbyDn92a1DqWOw9vWG2MFoays0sgObmWazO5BQPiFucnnEAjpAB+/Sw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+  ></link>
+
+  <div class="news-container">
+    <h1 class="news-title">
+      <slot name="news-title"></slot>
+    </h1>
+    <div class="news-date-container">
+      <i class="fa fa-calendar-o" aria-hidden="true"></i>
+      <p class="news-date">
+        <slot name="news-date"></slot>
+      </p>
+    </div>
+    <button class="copy-news-link-button">Share News Link</button>
+    <div class="news-image-container">
+      <slot name="news-image"></slot>
+      <em class="news-image-caption">
+        <slot name="news-image-caption">
+        </slot>
+      </em>
+    </div>
+    <p class="news-body">
+      <slot name="news-body"></slot>
+    </p>
+  </div>
+`;
+
+class NewsDetails extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(newsDetailsTemplate.content.cloneNode(true));
+  }
+
+  setNewsDate(date) {
+    if (date) {
+      const dateNode = this.shadowRoot.querySelector(".news-date");
+      dateNode.innerHTML = formatDate(date);
+    }
+  }
+
+  connectedCallback() {
+    const newsDate = this.getAttribute("date");
+    this.setNewsDate(newsDate);
+
+    const copyNewsLinkButton = this.shadowRoot.querySelector(
+      ".copy-news-link-button"
+    );
+
+    copyNewsLinkButton.addEventListener("click", function (event) {
+      navigator.clipboard.writeText(window.location.href);
+      copyNewsLinkButton.innerHTML = "Link Copied!";
+      copyNewsLinkButton.disabled = true;
+
+      setTimeout(() => {
+        copyNewsLinkButton.innerHTML = "Share News Link";
+        copyNewsLinkButton.disabled = false;
+      }, 10 * 1000);
+    });
+  }
+}
+
+window.customElements.define("news-details", NewsDetails);