Fixed resources issue

website/macos-big-sur-icons/src/App.vue

@@ -24,6 +24,7 @@ import '@adobe/coral-spectrum/coral-component-icon'
 // import '@adobe/coral-spectrum/coral-component-icon/src/resources/spectrum-icons-color.svg';
 // import '@adobe/coral-spectrum/coral-component-icon/src/resources/spectrum-css-icons.svg';
 
+import '@adobe/coral-spectrum/coral-component-status'
 import '@adobe/coral-spectrum/coral-component-checkbox'
 import '@adobe/coral-spectrum/coral-component-wait'
 import '@adobe/coral-spectrum/coral-component-progress'

website/macos-big-sur-icons/src/api/posts.js

@@ -26,12 +26,17 @@ export async function getBlogPost(postSlug) {
 }
 
 export async function getPages(n) { 
-    let pages = api.pages.browse({limit: n, order: 'published_at DESC'});
-    // console.log(await pages);
-    return await pages
-    .catch(err => {
-        console.error("err: ", err);
-    });
+    let pages = await api.pages.browse({limit: n, order: 'published_at DESC'});
+
+    // Check if page is featured and place it at the front
+    pages.forEach(async page => {
+        if (page.featured) {
+            pages.splice(pages.indexOf(page), 1)
+            pages.unshift(page)
+        }
+    })
+
+    return pages
 }
 
 export async function getSinglePage(resourceSlug) { 

website/macos-big-sur-icons/src/components/ResourcesCard.vue

@@ -1,6 +1,9 @@
 <template>
     <router-link :to="link">
         <div class="coral-Well instructions-item Box">
+            <div class="new-pill" v-if="isNew(step)">
+                <coral-status variant="info">New</coral-status>
+            </div>
             <div class="resources-card-wrapper">
 
             <div v-if="!step.gradient" class="instructions-img-wrapper">
@@ -47,6 +50,21 @@ export default {
 
     mounted: function(){
     },
+
+    methods:{
+        isNew(item){
+            let postDate = new Date(item.created_at)
+            postDate = Date.parse(postDate)
+            postDate = postDate + 172800000 // Ads 48 hours to page date
+            let dateNow = Date.now()
+
+            if (item.created_at == undefined || postDate < dateNow) {
+                return false
+            } else {
+                return true;
+            }
+        }
+    },
     
     computed: {
         markItDown(){

website/macos-big-sur-icons/src/components/app.less

@@ -1119,7 +1119,23 @@ main{
     margin: auto;
 }
 
+.new-pill{
+    z-index: 1;
+    height: 28px;
+    position: absolute;
+    border-radius: 7px;
+    padding-right: 14px;
+    transform: translate(10px, 10px);
+    border: solid 1px;
+    box-shadow: 0px 0px 20px rgb(0 0 0 / 35%);
+}
 
+.coral--dark .new-pill{
+    background: var(--coral-dark-bg);
+}
+.coral--light .new-pill{
+    background: var(--coral-light-bg);
+}
 
 
 

website/macos-big-sur-icons/src/store/store.js

@@ -9,6 +9,7 @@ import localPosts from '@/api/posts.json';
 import icons from '@/api/icons.json';
 import { getPages, getSinglePage } from '@/api/posts';
 
+
 export default new Vuex.Store({
 
   state: {
@@ -18,16 +19,20 @@ export default new Vuex.Store({
     blogPosts: {},
     localPosts: localPosts,
 
-    resourcesData: localPages,
+    resourcesData: getPages(10),
     singleResourceData: {},
-    moreResources: getPages(2)
+    moreResources: getPages(10)
   },
 
   mutations: {   
     pushIconData(store, iconData){
       store.list.push(iconData)
     },
 
+    pushAllPages(){
+      return localPages
+    },
+
     pushDataToArr(store, iconData){
       // console.log("func: ", iconData.func);
       if (Array.isArray(iconData.data)) {
@@ -57,7 +62,7 @@ export default new Vuex.Store({
     showToast(store, dialogId){
       document.getElementById(dialogId.id).show();
     },
-
+    
     getPageData(store){
       console.log(store.resourcesData);
       return "Hi"

website/macos-big-sur-icons/src/views/Dashboard.vue

@@ -90,7 +90,7 @@
 
           <div class="icon-list-area">
             <div v-for="icon in user.icons" class="card-wrapper coral-card" :key="icon.fileName">
-
+              <coral-status v-if="icon.isReupload" variant="success"></coral-status>
               <div class="card-img-wrapper" style="max-width: 120px;">
                 <div v-if="icon.isReview" class="loading-approval-wrapper">
                   <div class="loading-approval">

website/macos-big-sur-icons/src/views/Resources.vue

@@ -36,6 +36,8 @@ import H3Description from '@/components/H3_Description.vue'
 
 import pages from '@/api/pages.json';
 
+import { mapActions } from 'vuex'
+
 export default {
   name: 'Resources',
   
@@ -111,11 +113,18 @@ export default {
   mounted: async function(){
     const parent = this;
     let storeResourcesData = parent.$store.state.resourcesData
-    // console.log("storeResourcesData: ", await storeResourcesData);
+    parent.getPages()
     parent.resourcesData = await storeResourcesData;
   },
 
   methods: {
+    ...mapActions([
+      'getPageData,'  
+    ]),
+
+    async getPages(){
+      console.log(getPageData);
+    }
   }
 
 }