refactor: add rel to links

studio/src/app/components/core/app-footer/app-footer.tsx

@@ -3,7 +3,7 @@ import {Component, h, Prop} from '@stencil/core';
 @Component({
   tag: 'app-footer',
   styleUrl: 'app-footer.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppFooter {
   @Prop()
@@ -81,13 +81,15 @@ export class AppFooter {
         </section>
 
         <div class="social ion-padding-top ion-margin-top">
-          <a href="https://twitter.com/deckdeckgo">
+          <a href="https://twitter.com/deckdeckgo" rel="noopener norefferer">
             <ion-icon name="logo-twitter"></ion-icon>
           </a>
-          <a href="https://github.com/deckgo">
+          <a href="https://github.com/deckgo" rel="noopener noreferrer">
             <ion-icon name="logo-github"></ion-icon>
           </a>
-          <a href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY">
+          <a
+            href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY"
+            rel="noopener noreferrer">
             <ion-icon name="logo-slack"></ion-icon>
           </a>
         </div>

studio/src/app/components/editor/publish/app-publish-done/app-publish-done.tsx

@@ -2,7 +2,7 @@ import {Component, Element, Event, EventEmitter, h, Prop, State} from '@stencil/
 
 @Component({
   tag: 'app-publish-done',
-  styleUrl: 'app-publish-done.scss'
+  styleUrl: 'app-publish-done.scss',
 })
 export class AppPublishDone {
   @Element() el: HTMLElement;
@@ -35,7 +35,7 @@ export class AppPublishDone {
 
         <ion-label class="published-url ion-padding ion-text-center">
           Or{' '}
-          <a href={this.publishedUrl} target="_blank">
+          <a href={this.publishedUrl} target="_blank" rel="noopener noreferrer">
             click here
           </a>{' '}
           to open it.

studio/src/app/components/feed/app-feed/app-feed.tsx

@@ -127,7 +127,7 @@ export class AppFeed {
     if (feedStore.state.decks && feedStore.state.decks.length > 0) {
       return feedStore.state.decks.map((deck: Deck, i: number) => {
         return (
-          <a href={this.presentationUrl + deck.data.meta.pathname} aria-label={deck.data.meta.title} target="_blank">
+          <a href={this.presentationUrl + deck.data.meta.pathname} aria-label={deck.data.meta.title} target="_blank" rel="noopener noreferrer">
             <app-feed-card compact={i > 0} deck={deck}></app-feed-card>
           </a>
         );

studio/src/app/components/feed/app-popular/app-popular.tsx

@@ -3,7 +3,7 @@ import {Component, h, Prop, Host} from '@stencil/core';
 @Component({
   tag: 'app-popular',
   styleUrl: 'app-popular.scss',
-  shadow: false
+  shadow: false,
 })
 export class AppPopular {
   @Prop()
@@ -43,7 +43,7 @@ export class AppPopular {
               your interests and ideas.
             </p>
           </ion-card-content>
-        </ion-card>
+        </ion-card>,
       ];
     } else {
       return undefined;
@@ -62,15 +62,24 @@ export class AppPopular {
               Send us your feedback and ideas on{' '}
               <a
                 href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY"
-                target="_blank">
+                target="_blank"
+                rel="noopener noreferrer">
                 Slack
               </a>
-              , via <a href="mailto:hello@deckdeckgo.com">email</a> or on <a href="https://twitter.com/deckdeckgo">Twitter</a>.
+              , via{' '}
+              <a href="mailto:hello@deckdeckgo.com" rel="noopener noreferrer">
+                email
+              </a>{' '}
+              or on{' '}
+              <a href="https://twitter.com/deckdeckgo" rel="noopener noreferrer">
+                Twitter
+              </a>
+              .
             </p>
 
             <p class="ion-padding-top">You are awesome!</p>
           </ion-card-content>
-        </ion-card>
+        </ion-card>,
       ];
     } else {
       return undefined;

studio/src/app/modals/editor/app-playground/app-playground.tsx

@@ -125,8 +125,8 @@ export class AppPlayground {
         </ion-button>
 
         <p>
-          Embed your best Codepen, JSFiddle or WebComponents.dev. All you need is to enter their full links. Check out this{' '}
-          <a href="https://www.youtube.com/watch?v=nS4A2XSwQrw" target="_blank" aria-label="Demo on Youtube">
+          Embed your best CodePen, JSFiddle or WebComponents.dev. All you need is to enter their full links. Check out this{' '}
+          <a href="https://www.youtube.com/watch?v=nS4A2XSwQrw" target="_blank" aria-label="Demo on YouTube" rel="noopener noreferrer">
             YouTube video
           </a>{' '}
           for a quick tutorial.

studio/src/app/pages/core/about/app-contact/app-contact.tsx

@@ -2,7 +2,7 @@ import {Component, h} from '@stencil/core';
 
 @Component({
   tag: 'app-contact',
-  styleUrl: 'app-contact.scss'
+  styleUrl: 'app-contact.scss',
 })
 export class AppAbout {
   render() {
@@ -15,27 +15,37 @@ export class AppAbout {
           <p>We would love to hear from you, ping us 😃</p>
 
           <p>
-            Email: <a href="mailto:hello@deckdeckgo.com">hello@deckdeckgo.com</a>
+            Email:{' '}
+            <a href="mailto:hello@deckdeckgo.com" rel="noopener noreferrer">
+              hello@deckdeckgo.com
+            </a>
           </p>
 
           <p>
-            Twitter: <a href="https://twitter.com/deckdeckgo">@deckdeckgo</a>
+            Twitter:{' '}
+            <a href="https://twitter.com/deckdeckgo" rel="noopener noreferrer">
+              @deckdeckgo
+            </a>
           </p>
 
           <p>
             Or join us on our dedicated{' '}
-            <a href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY">
+            <a
+              href="https://join.slack.com/t/deckdeckgo/shared_invite/enQtNzM0NjMwOTc3NTI0LTBlNmFhODNhYmRkMWUxZmU4ZTQ2MDJiNjlmYWZiODNjMDU5OGRjYThlZmZjMTc5YmQ3MzUzMDlhMzk0ZDgzMDY"
+              rel="noopener noreferrer">
               Slack
             </a>{' '}
             channel
           </p>
 
           <p>
             If you would like to contribute, that would be really awesome! For feature requests, issues or even better Pull Requests, find us on{' '}
-            <a href="https://github.com/deckgo/deckdeckgo">GitHub</a>
+            <a href="https://github.com/deckgo/deckdeckgo" rel="noopener noreferrer">
+              GitHub
+            </a>
           </p>
         </main>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }

studio/src/app/pages/core/about/app-faq/app-faq.tsx

@@ -2,7 +2,7 @@ import {Component, h} from '@stencil/core';
 
 @Component({
   tag: 'app-faq',
-  styleUrl: 'app-faq.scss'
+  styleUrl: 'app-faq.scss',
 })
 export class AppFaq {
   render() {
@@ -21,7 +21,7 @@ export class AppFaq {
 
           <p>
             Earlier this year (2018) I published an{' '}
-            <a href="https://dev.to/daviddalbusco/we-are-developing-an-open-source-editor-for-presentations-1bng" target="_blank">
+            <a href="https://dev.to/daviddalbusco/we-are-developing-an-open-source-editor-for-presentations-1bng" target="_blank" rel="noopener noreferrer">
               article
             </a>{' '}
             to present our project and ourselves, you might find more answers in it if you wish to have a more concrete answer.
@@ -85,7 +85,7 @@ export class AppFaq {
             updated with their online urls. Alternatively, you could also provide a custom url for their content.
           </p>
         </main>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }

studio/src/app/pages/core/about/app-opensource/app-opensource.tsx

@@ -29,8 +29,8 @@ export class AppAbout {
 
           <p>
             The open source code of DeckDeckGo is available on&nbsp;
-            <a href="http://github.com/deckgo/deckdeckgo">
-              <ion-icon name="logo-github" aria-label="GitHub"></ion-icon> Github
+            <a href="http://github.com/deckgo/deckdeckgo" rel="noopener noreferrer">
+              <ion-icon name="logo-github" area-label="Github"></ion-icon> Github
             </a>
           </p>
         </main>

studio/src/app/pages/core/about/app-services/app-services.tsx

@@ -2,7 +2,7 @@ import {Component, h} from '@stencil/core';
 
 @Component({
   tag: 'app-services',
-  styleUrl: 'app-services.scss'
+  styleUrl: 'app-services.scss',
 })
 export class AppAbout {
   render() {
@@ -13,47 +13,87 @@ export class AppAbout {
           <h1>Services</h1>
 
           <p>
-            We aim to be transparent, therefore, furthermore than open sourcing our all code on <a href="http://github.com/deckgo/deckdeckgo">Github</a>, here
-            are the list of services we are using to provide DeckDeckGo.
+            We aim to be transparent, therefore, furthermore than open sourcing our all code on{' '}
+            <a href="http://github.com/deckgo/deckdeckgo" rel="noopener noreferrer">
+              Github
+            </a>
+            , here are the list of services we are using to provide DeckDeckGo.
           </p>
 
           <h2>Amazon</h2>
 
           <p>
-            We use AWS <a href="https://aws.amazon.com/lambda/">Lambda</a>, <a href="https://aws.amazon.com/rds/">RDS</a>,{' '}
-            <a href="https://aws.amazon.com/s3/">S3</a> and <a href="https://aws.amazon.com/sqs/">SQS</a> to save and publish online the presentations as
-            Progressive Web Apps. The choice behind this is mostly the fact that we thought that the S3 solution was a good one for our purpose but beside that,
-            it was also challenging to run Haskell Webapps on AWS Lambda.
+            We use AWS{' '}
+            <a href="https://aws.amazon.com/lambda/" rel="noopener noreferrer">
+              Lambda
+            </a>
+            ,{' '}
+            <a href="https://aws.amazon.com/rds/" rel="noopener noreferrer">
+              RDS
+            </a>
+            ,{' '}
+            <a href="https://aws.amazon.com/s3/" rel="noopener noreferrer">
+              S3
+            </a>{' '}
+            and{' '}
+            <a href="https://aws.amazon.com/sqs/" rel="noopener noreferrer">
+              SQS
+            </a>{' '}
+            to save and publish online the presentations as Progressive Web Apps. The choice behind this is mostly the fact that we thought that the S3 solution
+            was a good one for our purpose but beside that, it was also challenging to run Haskell Webapps on AWS Lambda.
           </p>
 
           <h2>Google</h2>
 
           <p>
-            We are using <a href="https://firebase.google.com/products/firestore/">Firestore</a> to save your data and the presentations you are editing. We are
-            also using Google Firebase <a href="https://firebase.google.com/products/hosting/">Hosting</a> and{' '}
-            <a href="https://firebase.google.com/products/auth/">Authentication</a>. Both feature are good match to serve and deploy easily Progressive Web
-            Apps. Their Authentication is also interesting as it provides the social login we were looking for (like Email and Github).
+            We are using{' '}
+            <a href="https://firebase.google.com/products/firestore/" rel="noopener noreferrer">
+              Firestore
+            </a>{' '}
+            to save your data and the presentations you are editing. We are also using Google Firebase{' '}
+            <a href="https://firebase.google.com/products/hosting/" rel="noopener noreferrer">
+              Hosting
+            </a>{' '}
+            and{' '}
+            <a href="https://firebase.google.com/products/auth/" rel="noopener noreferrer">
+              Authentication
+            </a>
+            . Both feature are good match to serve and deploy easily Progressive Web Apps. Their Authentication is also interesting as it provides the social
+            login we were looking for (like email and GitHub).
           </p>
 
           <h2>Tenor and Unsplash</h2>
 
           <p>
-            To provide a user friendly gifs and stock photos integration we have integrated the APIs provided by <a href="https://tenor.com/">Tenor</a>, which
-            is owned by Google, and <a href="https://unsplash.com/">Unsplash</a>.
+            To provide a user friendly gifs and stock photos integration we have integrated the APIs provided by{' '}
+            <a href="https://tenor.com/" rel="noopener noreferrer">
+              Tenor
+            </a>
+            , which is owned by Google, and{' '}
+            <a href="https://unsplash.com/" rel="noopener noreferrer">
+              Unsplash
+            </a>
+            .
           </p>
 
           <h2>Font Awesome</h2>
 
           <p>
-            The shapes, which could be integrated in your presentation, are free icons provided by <a href="https://fontawesome.com">Font Awesome</a>. We do not
-            use any APIs to fetch these respectively we are hosting them.
+            The shapes, which could be integrated in your presentation, are free icons provided by{' '}
+            <a href="https://fontawesome.com" rel="noopener noreferrer">
+              Font Awesome
+            </a>
+            . We do not use any APIs to fetch these respectively we are hosting them.
           </p>
 
           <h2>Mailchimp</h2>
 
           <p>
-            In order to send time to time newsletters, mostly when we are releasing new features, we are using <a href="https://mailchimp.com">Mailchimp</a>.
-            Upon creating an account users are opted into it but they can opt out through their account’s “Settings” page and at the link of the footer in any
+            In order to send time to time newsletters, mostly when we are releasing new features, we are using{' '}
+            <a href="https://mailchimp.com" rel="noopener noreferrer">
+              Mailchimp
+            </a>
+            . Upon creating an account users are opted into it but they can opt out through their account’s “Settings” page and at the link of the footer in any
             of these non-administrative emails.
           </p>
 
@@ -69,7 +109,7 @@ export class AppAbout {
             .
           </p>
         </main>
-      </ion-content>
+      </ion-content>,
     ];
   }
 }

studio/src/app/pages/core/about/app-team/app-team.tsx

@@ -35,24 +35,24 @@ export class AppTeam {
               </p>
 
               <div class="social-links">
-                <a href="https://twitter.com/daviddalbusco">
-                  <ion-icon name="logo-twitter" aria-label="David on Twitter"></ion-icon>
+                <a href="https://twitter.com/daviddalbusco" rel="noopener noreferrer">
+                  <ion-icon name="logo-twitter" area-label="Twitter"></ion-icon>
                 </a>
 
-                <a href="https://daviddalbusco.com">
-                  <ion-icon name="globe" aria-label="Personal blog and website"></ion-icon>
+                <a href="https://daviddalbusco.com" rel="noopener noreferrer">
+                  <ion-icon name="globe" area-label="Personal blog and website"></ion-icon>
                 </a>
 
-                <a href="https://dev.to/daviddalbusco">
-                  <ion-icon src="./assets/icons/dev.svg" aria-label="David on Dev"></ion-icon>
+                <a href="https://dev.to/daviddalbusco" rel="noopener noreferrer">
+                  <ion-icon src="./assets/icons/dev.svg" area-label="Dev"></ion-icon>
                 </a>
 
-                <a href="https://medium.com/@david.dalbusco">
-                  <ion-icon src="./assets/icons/medium.svg" aria-label="David on Medium"></ion-icon>
+                <a href="https://medium.com/@david.dalbusco" rel="noopener noreferrer">
+                  <ion-icon src="./assets/icons/medium.svg" area-label="Medium"></ion-icon>
                 </a>
 
-                <a href="http://github.com/peterpeterparker">
-                  <ion-icon name="logo-github" aria-label="David on GitHub"></ion-icon>
+                <a href="http://github.com/peterpeterparker" rel="noopener noreferrer">
+                  <ion-icon name="logo-github" area-label="Github"></ion-icon>
                 </a>
               </div>
             </div>
@@ -67,16 +67,16 @@ export class AppTeam {
               <p class="ion-text-center">Nicolas &hellip; has a bio as soon as he'll send me a PR 😉</p>
 
               <div class="social-links">
-                <a href="https://twitter.com/nasmattia">
-                  <ion-icon name="logo-twitter" aria-label="Nicolas on Twitter"></ion-icon>
+                <a href="https://twitter.com/nasmattia" rel="noopener noreferrer">
+                  <ion-icon name="logo-twitter" area-label="Twitter"></ion-icon>
                 </a>
 
-                <a href="https://nmattia.com">
-                  <ion-icon name="globe" aria-label="Personal blog and website"></ion-icon>
+                <a href="https://nmattia.com" rel="noopener noreferrer">
+                  <ion-icon name="globe" area-label="Personal blog and website"></ion-icon>
                 </a>
 
-                <a href="https://github.com/nmattia">
-                  <ion-icon name="logo-github" aria-label="Nicolas on GitHub"></ion-icon>
+                <a href="https://github.com/nmattia" rel="noopener noreferrer">
+                  <ion-icon name="logo-github" area-label="Github"></ion-icon>
                 </a>
               </div>
             </div>