Added less distracting ad to instructions page

elrumo · Mar 17, 2021 · a99f076 · a99f076 · vercel · Mar 17, 2021
1 parent 0527cea
commit a99f076
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 53 deletions.
diff --git a/website/macos-big-sur-icons/src/components/H3_Description.vue b/website/macos-big-sur-icons/src/components/H3_Description.vue
@@ -1,22 +1,31 @@
 <template>
     <div>
-        <div class="h3-description" v-if="!text.isCenter">
+
+
+
+        <div class="h3-description m-t-20" v-if="!text.isCenter">
             <h1 class="coral-Heading--XL resource-heading">
                <b> {{ text.h3 }}</b>
             </h1>
 
-            <div class="h3-description-body" v-if="!text.isAd">
+            <div class="h3-description-body">
                 <p class="coral-Body--L f-w-500" v-html="markItDown">
                 </p>
             </div>
 
-            <div v-else class="text-and-ad-wrapper">
+            <div v-if="text.isAd" class="m-t-40 m-b-20">
+                <p class="coral-Body--XS">
+                    Sponsored by
+                </p>
+                <div class="" id="iconbar-js"></div>
+            </div>
+            <!-- <div class="text-and-ad-wrapper">
                 <p class="coral-Body--L f-w-500 " v-html="markItDown">
                 </p>
                 <div class="single-ad mobile-ad">
                     <script async type="application/javascript" src="//cdn.carbonads.com/carbon.js?serve=CEBIK27J&placement=macosiconscom" id="_carbonads_js"></script>
                 </div>
-            </div>
+            </div> -->
         </div>
 
         <div v-else class="h3-description h3-description-center">
@@ -41,7 +50,7 @@
 
             <a
                 v-if="text.isButton"
-                href="https://blog.macosicons.com/blog/#subscribe"
+                :href="text.link"
                 rel="noopener"
                 target="_blank"
             >
@@ -68,6 +77,22 @@ export default {
         return{
         }
     },
+
+    mounted: function(){
+        if (typeof _bsa !== 'undefined' && _bsa) {
+            _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
+            {
+                target: '#iconbar-js',
+                template: `
+                    <a href="##statlink##" target="_blank" rel="noopener sponsored" class="bsa-link">
+                    <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
+                    <div class="bsa-desc">##company## - ##tagline##</div>
+                    </a>
+                `
+                }
+            );
+        }
+    },
     
     computed: {
         markItDown(){

diff --git a/website/macos-big-sur-icons/src/components/Hero.vue b/website/macos-big-sur-icons/src/components/Hero.vue
@@ -9,10 +9,10 @@
 
 
         <div class="ad-hero">
-          <p class="coral-Body--XS p-b-5">
+          <p class="coral-Body--XS">
             Sponsored by
           </p>
-          <div class="opacity-80" id="iconbar-js"></div>
+          <div v-if="ad" class="" id="iconbar-js"></div>
         </div>
 
         <p class="coral-Body--S m-b-0 desktop-hidden">
@@ -27,18 +27,19 @@
         >
           <span class="f-w-100 f-s-26">macOS Big Sur</span>
           <br />
+          <!-- The Icons Page -->
           Free app icons
         </h1>
 
         <p class="coral-Body--L w-100 body-text">
-          To contribute, download free icon templates from the
+          To contribute, download our free icon templates from the
             <router-link to="/resources">
             <span class="underline"> resources page. </span>
             </router-link>
         </p>
 
 
-        <div class="m-auto m-t-35">
+        <div class="m-auto m-t-45">
 
           <div class="d-inline-block mobile-hidden">
             <button
@@ -100,6 +101,7 @@ export default {
 
   data() {
     return {
+      ad: true,
       // imgs:{
       //   heroImg: require("../assets/icons_hero.jpg")
       // }
@@ -148,24 +150,25 @@ export default {
     },
   },
 
+  destroyed: function() {
+  },
+  
   mounted: function() {
-    // let adId = document.getElementById("_custom_")
-
-    (function() {
-      if (typeof _bsa !== 'undefined' && _bsa) {
-        _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
-        {
-          target: '#iconbar-js',
-          template: `
-              <a href="##statlink##" target="_blank" rel="noopener sponsored" class="bsa-link">
-              <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
-              <div class="bsa-desc">##company## - ##tagline##</div>
-              </a>
-            `
-          }
-        );
-      }
-    })();
+    let adId = document.getElementById("iconbar-js")
+
+    if (typeof _bsa !== 'undefined' && _bsa) {
+      _bsa.init('custom', 'CESDC2QN', 'placement:macosiconscom',
+      {
+        target: '#iconbar-js',
+        template: `
+            <a href="##statlink##" target="_blank" rel="noopener sponsored" class="bsa-link">
+            <div class="bsa-icon" style="background-image: url(##image##); background-color: ##backgroundColor##;"></div>
+            <div class="bsa-desc">##company## - ##tagline##</div>
+            </a>
+          `
+        }
+      );
+    }
 
 
   },
@@ -191,17 +194,17 @@ export default {
 
 #iconbar-js{
   transition: 0.3s;
-  height: 40px
+  height: 40px;
 }
-
 #iconbar-js:hover{
   transform: translateY(-3px);
   opacity: 1;
 }
 
 .bsa-link {
+  border: 1px solid rgba(256, 256, 256, 0.3);
   position: relative;
-  top: -6px;
+  /* top: -6px; */
   display: inline-flex;
   height: 40px;
   border-radius: 5px;

diff --git a/website/macos-big-sur-icons/src/router/index.js b/website/macos-big-sur-icons/src/router/index.js
@@ -51,11 +51,12 @@ const routes = [
   {
     path: '/resources',
     name: 'Resources',
-    component: () => import('../views/Resources.vue')
+    component: () => import('../views/Resources.vue'),
+    meta: { requiresAuth: true }
   },
   {
     path: '/resources/:resource',
-    name: 'Resources',
+    name: 'Resource',
     component: () => import('../views/ResourceView.vue')
   },
   {

diff --git a/website/macos-big-sur-icons/src/views/BlogHome.vue b/website/macos-big-sur-icons/src/views/BlogHome.vue
@@ -4,7 +4,7 @@
 
         <!-- <iframe class="subscribe-blog-wrapper" src="https://blog.macosicons.com/blog/#subscribe" frameborder="0"></iframe> -->
 
-        <section class="p-t-50 p-b-50 m-b-50">
+        <section class="p-t-50 p-b-20">
           <H3-Description :text="subscribe"/>
 
           <div class="p-t-20">
@@ -14,25 +14,25 @@
         </section>
 
         <div class="m-t-50 post-wrapper" v-for="post in posts" :key="post.title">
-          <p class="coral-Detail coral-Detail--L opacity-80">
-            {{ getDate(post.published_at) }}
-          </p>
-
-          <h3 class=" coral-Heading--L coral-Heading--heavy m-t-0">
-            {{ post.title }}
-          </h3>
-
-          <h3 class=" coral-Heading--S coral-Heading--light m-t-10">
-            {{ post.excerpt }}
-          </h3>
-
           <router-link :to="'/blog/'+post.slug">
-            <p class="coral-Detail read-more read-more-right coral-Detail--XL m-t-30 coral-Link">
-              Read more
+            <p class="coral-Detail coral-Detail--L opacity-80">
+              {{ getDate(post.published_at) }}
             </p>
-          </router-link>
+
+            <h3 class=" coral-Heading--L coral-Heading--heavy m-t-0">
+                {{ post.title }}
+            </h3>
 
-          <hr class="coral-Divider--S m-t-40">
+            <h3 class=" coral-Heading--S coral-Heading--light m-t-20">
+              {{ post.excerpt }}
+            </h3>
+
+              <p class="coral-Detail read-more read-more-right coral-Detail--XL m-t-30 coral-Link">
+                Read more
+              </p>
+
+            <hr class="coral-Divider--S m-t-50">
+          </router-link>
         </div>
 
         <div class="single-ad mobile-ad m-t-50 m-b-50">
@@ -65,10 +65,11 @@ export default {
       posts: localPosts,
       subscribe:{
         h3: "The Icons Blog",
-        description: "Hi! I'm [Elias](https://eliasruiz.com), and I'm building a platform for all things icons and design. You can support this project and read about this journey on this blog and by subscribing below.",
+        description: "Hi! I'm [Elias](https://eliasruiz.com), and I'm building a platform for all things icons. You can support this project and read about my journey, tips and more by subscribing below.",
+        link: "https://blog.macosicons.com/blog/#/portal",
         isAd: false,
         isCenter: true,
-        isButton: true
+        isButton: true,
       },
     }
   },

diff --git a/website/macos-big-sur-icons/src/views/Resources.vue b/website/macos-big-sur-icons/src/views/Resources.vue
@@ -2,7 +2,7 @@
   <div>
     <main class="content-wrapper-compact">
 
-      <H3-Description :text="introText" class="m-b-50"/>
+      <H3-Description :text="introText" class="m-b-40"/>
 
       <div class="resources-grid card-grid" id="how-to-install">
 
@@ -46,7 +46,7 @@ export default {
     H3Description
   },
 
-     metaInfo: {
+  metaInfo: {
       // if no subcomponents specify a metaInfo.title, this title will be used
       title: 'Free icon templates resources for macOS Big Sur.',
       description:"Resources and templates to help you design and showcase icons for macOS.",
@@ -97,7 +97,7 @@ export default {
       introText:{
         h3: "Resources",
         description: "Here you'll find guides, resources and templates to help you design and showcase icons for macOS.",
-        isAd: false
+        isAd: true
       },
       instructions:{
         title: "How to change app icons",