Overview: Last Month in review will show new badge if it is no older than 1 week since pubDate.

Author: antongit

community-app/frontend/index.html

@@ -57,7 +57,7 @@
     </div>
     <div id="community">
         <div id="Community-app" class="container">
-            <div class="spinner-border" role="status">
+            <div class="spinner-border m-4" role="status">
                 <span class="sr-only">Loading...</span>
             </div>
         </div>    

community-app/frontend/src/components/overview/LastMonth.vue

@@ -9,9 +9,12 @@ import SectionTitle from './SectionTitle.vue'
 
 const loading = ref(false);
 const router = useRouter();
+const isNew = ref(false);
 
 const store = useLastMonthStore();
 
+const oneWeek = 7 * 24 * 60 * 60 * 1000;
+
 onMounted(async ()=>{
  
     try
@@ -26,6 +29,11 @@ onMounted(async ()=>{
     finally{
         loading.value = false;
     }
+
+    console.log (Date.now());
+    console.log (store.date + oneWeek);
+
+    isNew.value = store.date ? Date.now() < store.date + oneWeek : false;
     
 })
 
@@ -35,11 +43,13 @@ onMounted(async ()=>{
     <div v-if="store.link" class="section pr-4 lastMonth">
         <div class="row border-bottom pb-3 align-items-start">
             <div class="col-1 px-0 py-1">
-                <img :src="store.thumb" class="img-fluid"/>
+                <NBadge value="new" type="success" :show="isNew">
+                    <img :src="store.thumb" class="img-fluid"/>
+                </NBadge>
             </div>
             <div class="col-11 py-0 pl-4 no-gutter">
                 <strong><a :href="store.link">{{ store.title }}</a></strong>
-                <div class="text-muted second">Last month in review</div>
+                <div class="text-muted second">{{ store.description }}</div>
             </div>
         </div>
     </div>

community-app/frontend/src/components/overview/LastMonthStore.js

@@ -9,6 +9,8 @@ export const useLastMonthStore = defineStore ('lastMonth',{
             title: "",
             link:"",
             thumb:"",
+            date: null,
+            description:"",
             fetched: false
         }
     },
@@ -23,6 +25,8 @@ export const useLastMonthStore = defineStore ('lastMonth',{
                 this.link = rss.link;
                 this.thumb = rss.thumb;
                 this.fetched = true;
+                this.description = rss.description;
+                this.date = new Date(rss.pubDate).getTime()
             }
             catch (error){
                 this.fetched = false;
@@ -33,9 +37,6 @@ export const useLastMonthStore = defineStore ('lastMonth',{
 })
 
 async function fetchRSS(){
-    
-    // const imageParamsAvatars = "?withoutEnlargement=true&quality=90&fit=cover&height=60&width=60";
-    // const limit = 10;
 
     const url = Constants.OVERVIEW_RSS;
 
@@ -59,8 +60,9 @@ async function fetchRSS(){
                         title: getItem(item, 'title'),
                         link: getItem(item, 'link'),
                         category: getItem(item, 'category'),
+                        thumb: getItem(item, 'thumb'),
                         description: getItem(item, 'description'),
-                        thumb: getItem(item, 'thumb')
+                        pubDate: getItem(item, 'pubDate')
                     }
                 )
             ));
@@ -75,7 +77,9 @@ async function fetchRSS(){
         return {
             title: lastMonth.title,
             link: lastMonth.link,
-            thumb: latestMonthThumb
+            thumb: latestMonthThumb,
+            description: lastMonth.description,
+            pubDate: lastMonth.pubDate
         }
     }
     else {

layouts/community/community.html

@@ -9,7 +9,7 @@
         {{ partial "nav" . }}
 
         <div id="Community-app" class="container {{ .Params.theme }}">
-            <div class="spinner-border" role="status">
+            <div class="spinner-border m-4" role="status">
                 <span class="sr-only">Loading...</span>
             </div>
         </div>