Merge branch 'stage'

* stage:
  updates readme roadmap release dates
  creates card toggles

README.md

@@ -4,9 +4,9 @@ A page to check character count and preview meta tags in various scenarios.
 ## Road Map
 ### Release 1.0.0 (2021-07-13)
 Google Search Results Preview
-### Release 2.0.0
+### Release 2.0.0 (2021-07-22)
 Facebook Card Preview
-### Release 2.5.0
+### Release 2.5.0 (2021-07-22)
 Preview Options Toggles
 ### Release 3.0.0
 Twitter Card Preview

pages/index.vue

@@ -32,11 +32,34 @@
               @input="updateMetaURL"
             />
           </v-card>
+          <v-card class="card">
+            Google
+            <div class="inline">
+              OFF
+              <v-switch
+                v-model="googleSwitch"
+                inset
+              />
+              ON
+            </div>
+
+            <v-divider />
+
+            Facebook
+            <div class="inline">
+              OFF
+              <v-switch
+                v-model="facebookSwitch"
+                inset
+              />
+              ON
+            </div>
+          </v-card>
         </v-col>
 
         <v-col md="6">
-          <GoogleCard />
-          <FacebookCard />
+          <GoogleCard v-if="googleSwitch" />
+          <FacebookCard v-if="facebookSwitch" />
         </v-col>
       </v-row>
     </v-container>
@@ -61,7 +84,9 @@ export default {
         url: 'https://meta-tags.morsecodemedia.com'
       },
       metaTitleRules: [v => v.length <= 60 || 'Ideal meta titles are less than 60 characters'],
-      metaDescriptionRules: [v => v.length <= 160 || 'Ideal meta descriptions are less than 160 characters']
+      metaDescriptionRules: [v => v.length <= 160 || 'Ideal meta descriptions are less than 160 characters'],
+      googleSwitch: true,
+      facebookSwitch: true
     }
   },
   created () {
@@ -114,4 +139,13 @@ export default {
     padding: 0 16px 16px 0;
   }
 }
+.inline {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  max-width: 150px;
+}
+.v-divider {
+  margin-bottom: 20px;
+}
 </style>