Started work to migrate to back4app

dufu1991 · Dec 14, 2022 · 70b622b · 70b622b
1 parent 55eee88
commit 70b622b
Show file tree

Hide file tree

Showing 25 changed files with 4,793 additions and 5,908 deletions.
diff --git a/Other/icons/Social/low-res/Thumbnail_2021.jpg b/Other/icons/Social/low-res/Thumbnail_2021.jpg
diff --git a/Other/icons/Social/low-res/icons/Social/low-res/Thumbnail_2021.jpg b/Other/icons/Social/low-res/icons/Social/low-res/Thumbnail_2021.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,46 +3,48 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite --host --https",
+    "dev": "vite --host",
     "build": "vite build",
     "serve": "vite preview --https --host",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore --fix src",
     "deploy": "npm run build; push-dir --dir=dist --branch=gh-pages --cleanup"
   },
   "dependencies": {
-    "@adobe/coral-spectrum": "^4.12.3",
-    "@fullhuman/postcss-purgecss": "^3.1.3",
-    "@spectrum-web-components/accordion": "^0.6.1",
-    "@spectrum-web-components/bundle": "^0.18.0",
-    "@spectrum-web-components/button": "^0.16.1",
-    "@spectrum-web-components/overlay": "^0.9.0",
-    "@tryghost/content-api": "^1.5.15",
-    "@vitejs/plugin-vue": "^1.10.1",
-    "@vue/compat": "^3.1.0",
-    "algoliasearch": "^4.11.0",
+    "@adobe/coral-spectrum": "^4.15.9",
+    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@spectrum-web-components/accordion": "^0.7.6",
+    "@spectrum-web-components/bundle": "^0.28.5",
+    "@spectrum-web-components/button": "^0.19.8",
+    "@spectrum-web-components/overlay": "^0.18.9",
+    "@tryghost/content-api": "^1.11.5",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@vue/compat": "^3.2.45",
+    "algoliasearch": "^4.14.2",
     "confetti-js": "^0.0.18",
-    "dotenv": "^16.0.1",
-    "esbuild": "^0.14.8",
-    "less": "^4.1.2",
-    "less-loader": "^7.3.0",
-    "marked": "^1.2.9",
-    "parse": "^3.4.0",
+    "dotenv": "^16.0.3",
+    "esbuild": "^0.16.5",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "marked": "^4.2.4",
+    "parse": "^3.5.1",
     "push-dir": "^0.4.1",
     "register-service-worker": "^1.7.2",
-    "sass": "^1.45.1",
-    "simple-git": "^2.47.0",
+    "request-promise": "^4.2.6",
+    "sass": "^1.56.2",
+    "simple-git": "^3.15.1",
     "smoothscroll-polyfill": "^0.4.4",
-    "vite": "^2.7.3",
-    "vue": "^3.1.0",
-    "vue-cookies": "^1.7.4",
+    "vite": "^4.0.1",
+    "vite-plugin-mkcert": "^1.10.1",
+    "vue": "^3.2.45",
+    "vue-cookies": "^1.8.2",
     "vue-mobile-detection": "^2.0.1",
-    "vue3-lazyload": "^0.2.5-beta",
-    "vuex": "^4.0.2"
+    "vue3-lazyload": "^0.3.6",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
-    "@vue/compiler-sfc": "^3.1.0",
-    "@vueuse/head": "^0.5.1",
-    "vue-router": "^4.0.12"
+    "@vue/compiler-sfc": "^3.2.45",
+    "@vueuse/head": "^1.0.22",
+    "vue-router": "^4.1.6"
   },
   "browserslist": [
     "> 1%",

diff --git a/public/coral.min.css b/public/coral.min.css
diff --git a/public/coral.min.js b/public/coral.min.js
diff --git a/src/App.vue b/src/App.vue
@@ -1,8 +1,11 @@
 <template>
   <div id="app">
-    <!-- <coral-toast id="toastMessage" variant="success">
-      All icons have been uploaded.
-    </coral-toast> -->
+
+    <Announcement
+      v-if="getHomeDialog.hasOwnProperty('announcementImg') || dummyData.hasOwnProperty('announcementImg')"
+      :getHomeDialog="getHomeDialog.hasOwnProperty('announcementImg') ? getHomeDialog : dummyData"
+      type="topBanner"
+    />
 
     <Header
       :distanceFromTop="distanceFromTop"
@@ -29,7 +32,10 @@
 import Footer from '@/components/Footer.vue'
 import Header from '@/components/Header.vue'
 import StickyBanner from '@/components/StickyBanner.vue'
-import { mapActions } from 'vuex'
+import Announcement from '@/components/Announcement.vue'
+import { mapActions, mapGetters } from 'vuex'
+
+import dummyData from '@/components/announcementDummy.json'
 
 import { Toast } from '@adobe/coral-spectrum/coral-component-toast'
 const appBody = document.getElementById('app')
@@ -51,13 +57,15 @@ export default {
   components: {
     Header,
     Footer,
-    StickyBanner
+    StickyBanner,
+    Announcement
   },
 
   data(){
     return{
       distanceFromTop: true,
-      isBanner: true
+      isBanner: true,
+      dummyData: dummyData
     }
   },
 
@@ -74,7 +82,7 @@ export default {
 
   methods:{
 
-  ...mapActions([
+    ...mapActions([
       'setDataToArr',
       'pushDataToArr',
     ]),
@@ -124,6 +132,12 @@ export default {
     }
   },
 
+  computed:{
+    ...mapGetters([
+      'getHomeDialog',
+    ])
+  }
+
 }
 </script>
 

diff --git a/src/api/strapi.js b/src/api/strapi.js
@@ -22,14 +22,7 @@ export async function getTutorials() {
 
 export async function getLearningHome() { 
     let learningHome = await axios.get('https://api.macosicons.com/api/learn-home?populate=*')
-    console.log('learningHome: ', learningHome.data.data.attributes.H3Description);
-
-    // let introText = {
-    //     h3: learningHome.data.data.attributes.title,
-    //     description: learningHome.data.data.attributes.description,
-    //     isAd: false,
-    //     isCenter: true,
-    //   }
+    console.log('learningHome: ', learningHome.data.data.attributes.H3Description)
 
     return learningHome.data.data.attributes.H3Description
 }

diff --git a/src/components/Announcement.vue b/src/components/Announcement.vue
@@ -1,5 +1,5 @@
 <template>
-  <main>
+  <div class="gitHub-sponsor" v-if="type == 'heroBanner'">
     <a
       aria-label="Support the project on PayPal"
       target="_blank"
@@ -37,15 +37,53 @@
       </div>
     </article>
     </a>
+  </div>
+
+  <main class="announcement-top-banner" v-if="type == 'topBanner'">
+    <a
+      aria-label="Support the project on PayPal"
+      target="_blank"
+      :href="getHomeDialog.announcementUrl"
+      style="color: black"
+    >
+    <article class="Box">
+      <div class="d-flex">
+
+        <img
+          :src="getStrapiImg(getHomeDialog.announcementImg)"
+          class="rounded-1 avatar-user"
+          width="48"
+          height="48"
+          alt="@elrumo"
+        />
+
+        <div class="d-sm-flex flex-auto">
+
+          <div class="flex-sm-auto mr-sm-3">
+            <div class="h3 mb-2 f-w-900">
+            {{getHomeDialog.announcementTitle}}
+              <!-- New project announcement -->
+            </div>
+
+            <div class="mb-2 f-w-400">
+              <p v-html="markItDown(getHomeDialog.announcement)"></p>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </article>
+    </a>
   </main>
+
 </template>
 
 <script>
 import profilePicIcon from "../assets/profilePic.jpg"
-import Marked from 'marked';
+import { marked } from 'marked';
 
 export default {
-  name: "Sponsor",
+  name: "Announcement",
   data() {
     return {
       gitHub: {
@@ -55,7 +93,11 @@ export default {
   },
 
   props:{
-    getHomeDialog: {}
+    getHomeDialog: {},
+    type: {
+      type: String,
+      default: 'heroBanner',
+      }
   },
 
   methods:{
@@ -65,15 +107,17 @@ export default {
       document.getElementById(dialogId).show()
     },
 
-    marked(content){
+    markItDown(content){
       try {
-        return Marked(content);
+        return marked(content);
       } catch (error) {
         return content;
       }
     },
 
     getStrapiImg(strapi){
+      console.log(strapi);
+      
       return 'https://api.macosicons.com/'+strapi.data.attributes.url
     }
   }

diff --git a/src/components/H3Description.vue b/src/components/H3Description.vue
@@ -43,7 +43,7 @@
 
 <script>
 import { mapActions, mapGetters } from 'vuex';
-import Marked from 'marked';
+import { marked } from 'marked';
 import NativeAd from "./NativeAd.vue";
 
 export default {
@@ -77,7 +77,7 @@ export default {
         },
 
         markItDown(text){
-            return Marked(text)
+            return marked(text)
         }
     },
 

diff --git a/src/components/Header.vue b/src/components/Header.vue
@@ -112,6 +112,16 @@
                                     </span>
                                 </router-link>
                             </div>
+
+                            <!-- License -->
+                            <div class="resourcesLink" @click="toggleOverlay">
+                                <coral-status variant="info" class="_coral-StatusLight--info _coral-StatusLight" color=""></coral-status>
+                                <router-link to="/cicense" class="_coral-Button _coral-Button--primary _coral-Button--quiet">
+                                    <span>
+                                        License
+                                    </span>
+                                </router-link>
+                            </div>
 
                             <hr class="coral-Divider--S">
 
@@ -212,6 +222,16 @@
                         </router-link>
                     </div>
 
+                    <!-- License -->
+                    <!-- <div class="resourcesLink"> -->
+                        <!-- <coral-status variant="info"></coral-status> -->
+                        <!-- <router-link to="/license">
+                            <button is="coral-button" variant="quiet">
+                                <span>License</span>
+                            </button>
+                        </router-link>
+                    </div> -->
+
                     <!-- Learn -->
                     <!-- <div class="resourcesLink">
                         <coral-status variant="info"></coral-status>

diff --git a/src/components/Hero.vue b/src/components/Hero.vue
@@ -2,43 +2,36 @@
 <div class="content-wrapper-regular">
   <div id="hero" class="hero-wrapper">
 
-    <div
+    <!-- <div
       v-if="getHomeDialog.showAnnouncement"
       class="PH-badge"
     >
       <Announcement
-        class="gitHub-sponsor"
         :getHomeDialog="getHomeDialog"
+        type="heroBanner"
       />
-    </div>
-    <div class="hero-text-area" v-if="iconsEmpty">    
-
+    </div> -->
 
-        <!-- <div
+    <div class="hero-text-area" v-if="iconsEmpty">
+
+        <div
           class="ad-hero mobile-hidden"
         >
           <NativeAd
             :template="1"
             :adId="'iconbar-js-hero'"
             :key="$route.fullPath + 'ad' + '_hero'"
           />
-        </div> -->
+        </div>
 
         <div class="desktop-hidden m-t-24"></div>
 
-        <p class="coral-Body--S m-b-0 p-b-8">
-          Hosting by
-          <a href="https://fosshost.org/" rel="noopener" target="_blank" class="coral-Link">
-              FossHost
-          </a> 
-        </p>
-
         <h1
           class="main-heading m-t-0 coral-Heading--XL coral-Heading--regular"
         >
-          <span style="display: none;" class="f-w-100 f-s-26">
+          <!-- <span style="display: none;" class="f-w-100 f-s-26">
             macOS Big Sur <span class="coral-Body--XS m-b-0"> &  Monterey </span>
-          </span>
+          </span> -->
           <!-- The Icons Page -->
            macOS App icons
         </h1>