From 6aac0f16cf2f965beee5c86c7aefcf1610ebacdf Mon Sep 17 00:00:00 2001
From: Roy <royswinkels@gmail.com>
Date: Thu, 8 Oct 2020 22:13:53 +0200
Subject: [PATCH] refactor: add rel to links

---
 .../app-components-demo.tsx                   | 48 ++++++++++++++---
 .../app-components-drr/app-components-drr.tsx | 30 +++++++++--
 .../app-components-gif/app-components-gif.tsx |  7 ++-
 .../deck/app-deck-pager/app-deck-pager.tsx    | 38 ++++++++++---
 .../edit/app-edit-fonts/app-edit-fonts.tsx    |  7 ++-
 .../app-edit-markdown/app-edit-markdown.tsx   |  5 +-
 .../app-edit-theming/app-edit-theming.tsx     |  5 +-
 .../app-slide-aspect-ratio.tsx                | 38 ++++++++++---
 .../app-slide-author/app-slide-author.tsx     | 42 ++++++++++++---
 .../app-slide-playground.tsx                  | 53 +++++++++++++++----
 webcomponents/inline-editor/src/index.html    |  8 +--
 11 files changed, 230 insertions(+), 51 deletions(-)

diff --git a/docs/src/app/pages/docs/components/app-components-demo/app-components-demo.tsx b/docs/src/app/pages/docs/components/app-components-demo/app-components-demo.tsx
index 652adbf6c..69f309222 100644
--- a/docs/src/app/pages/docs/components/app-components-demo/app-components-demo.tsx
+++ b/docs/src/app/pages/docs/components/app-components-demo/app-components-demo.tsx
@@ -22,8 +22,14 @@ export class AppComponentsDemo {
           <p>Display your apps or websites inside an Android or iOS frame.</p>
           <p>
             It is largely inspired and based on the awesome{' '}
-            <a href="https://github.com/ionic-team/ionic-docs/tree/c5a624ac35d5285b871e7d8513d3849bdea63271/src/components/demo">work</a> of the{' '}
-            <a href="https://ionicframework.com/">Ionic</a> team.
+            <a href="https://github.com/ionic-team/ionic-docs/tree/c5a624ac35d5285b871e7d8513d3849bdea63271/src/components/demo" rel="noopener noreferrer">
+              work
+            </a>{' '}
+            of the{' '}
+            <a href="https://ionicframework.com/" rel="noopener noreferrer">
+              Ionic
+            </a>{' '}
+            team.
           </p>
           <h2 id="app-components-demo-table-of-contents">Table of contents</h2>
           <ul>
@@ -74,8 +80,12 @@ export class AppComponentsDemo {
           <p>This component could be added to your web application using the following methods.</p>
           <h3 id="app-components-demo-using-from-a-cdn">Using from a CDN</h3>
           <p>
-            It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> lazy image component
-            from a CDN. To do so, add the following include script in the main HTML file of your project:
+            It&#39;s recommended to use{' '}
+            <a href="https://unpkg.com/" rel="noopener noreferrer">
+              unpkg
+            </a>{' '}
+            to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> lazy image component from a CDN. To do so, add the following include script in the main
+            HTML file of your project:
           </p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
@@ -87,16 +97,38 @@ export class AppComponentsDemo {
           </deckgo-highlight-code>
           <h3 id="app-components-demo-install-from-npm">Install from NPM</h3>
           <p>
-            Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/demo">npm</a> using the following command:
+            Install it in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/demo" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            using the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;demo</code>
           </deckgo-highlight-code>
           <h3 id="app-components-demo-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
diff --git a/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx b/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx
index 850d73afb..0fc722fba 100644
--- a/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx
+++ b/docs/src/app/pages/docs/components/app-components-drr/app-components-drr.tsx
@@ -87,16 +87,38 @@ export class AppComponentsDrr {
           </deckgo-highlight-code>
           <h3 id="app-components-drr-install-from-npm">Install from NPM</h3>
           <p>
-            Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/qrcode">npm</a> using the following command:
+            Install it in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/qrcode" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            using the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;drag-resize-rotate</code>
           </deckgo-highlight-code>
           <h3 id="app-components-drr-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
diff --git a/docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx b/docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx
index ac5f99cf5..1461b2a0d 100644
--- a/docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx
+++ b/docs/src/app/pages/docs/components/app-components-gif/app-components-gif.tsx
@@ -38,8 +38,11 @@ export class AppComponentsGif {
         <main>
           <h1 id="app-components-gif-gif">GIF</h1>
           <p>
-            The &quot;GIF&quot; component allows you to easily add a GIF, like those provided by <a href="https://giphy.com">Giphy</a>, in almost any slide of
-            your presentation.
+            The &quot;GIF&quot; component allows you to easily add a GIF, like those provided by{' '}
+            <a href="https://giphy.com" rel="noopener noreferrer">
+              Giphy
+            </a>
+            , in almost any slide of your presentation.
           </p>
           <h2 id="app-components-gif-table-of-contents">Table of contents</h2>
           <ul>
diff --git a/docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx b/docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx
index cc2ba10dd..fb63331ba 100644
--- a/docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx
+++ b/docs/src/app/pages/docs/deck/app-deck-pager/app-deck-pager.tsx
@@ -56,8 +56,12 @@ export class AppDeckPager {
           <p>This component could be added to your web application using the following methods.</p>
           <h3 id="app-deck-pager-using-from-a-cdn">Using from a CDN</h3>
           <p>
-            It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> pager from a CDN. To
-            do so, add the following include script in the main HTML file of your project:
+            It&#39;s recommended to use{' '}
+            <a href="https://unpkg.com/" rel="noopener noreferrer">
+              unpkg
+            </a>{' '}
+            to use the <a href="https://deckdeckgo.com">DeckDeckGo</a> pager from a CDN. To do so, add the following include script in the main HTML file of
+            your project:
           </p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
@@ -69,16 +73,38 @@ export class AppDeckPager {
           </deckgo-highlight-code>
           <h3 id="app-deck-pager-install-from-npm">Install from NPM</h3>
           <p>
-            Install it in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/pager">npm</a> using the following command:
+            Install it in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/pager" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            using the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;pager</code>
           </deckgo-highlight-code>
           <h3 id="app-deck-pager-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
diff --git a/docs/src/app/pages/docs/edit/app-edit-fonts/app-edit-fonts.tsx b/docs/src/app/pages/docs/edit/app-edit-fonts/app-edit-fonts.tsx
index ea5668dbc..a01d3a15a 100644
--- a/docs/src/app/pages/docs/edit/app-edit-fonts/app-edit-fonts.tsx
+++ b/docs/src/app/pages/docs/edit/app-edit-fonts/app-edit-fonts.tsx
@@ -13,8 +13,11 @@ export class AppEditFonts {
           <h1 id="app-edit-fonts-fonts">Fonts</h1>
           <p>
             As any web application, the fonts of your presentation could be easily styled, but <a href="https://deckdeckgo.com">DeckDeckGo</a> goes one step
-            further by downloading and installing <strong>automatically</strong> any <a href="https://fonts.google.com">Google Fonts</a> you would like to use
-            during the setup process (if you are using the starter kit).
+            further by downloading and installing <strong>automatically</strong> any{' '}
+            <a href="https://fonts.google.com" rel="noopener noreferrer">
+              Google Fonts
+            </a>{' '}
+            you would like to use during the setup process (if you are using the starter kit).
           </p>
           <h2 id="app-edit-fonts-using-automatically-any-google-fonts">Using automatically any Google Fonts</h2>
           <p>
diff --git a/docs/src/app/pages/docs/edit/app-edit-markdown/app-edit-markdown.tsx b/docs/src/app/pages/docs/edit/app-edit-markdown/app-edit-markdown.tsx
index 850b59112..d89752c17 100644
--- a/docs/src/app/pages/docs/edit/app-edit-markdown/app-edit-markdown.tsx
+++ b/docs/src/app/pages/docs/edit/app-edit-markdown/app-edit-markdown.tsx
@@ -54,7 +54,10 @@ export class AppEditMarkdown {
           </ul>
           <h2 id="app-edit-markdown-introduction">Introduction</h2>
           <p>
-            When you edit your deck with Markdown, the <a href="https://github.com/deckgo/deckdeckgo/tree/master/webpack">DeckDeckGo Webpack Markdown Plugin</a>{' '}
+            When you edit your deck with Markdown, the{' '}
+            <a href="https://github.com/deckgo/deckdeckgo/tree/master/webpack" rel="noopener noreferrer">
+              DeckDeckGo Webpack Markdown Plugin
+            </a>{' '}
             will convert, at bundle time, your code to HTML and will inject the results in the <code>index.html</code> file. Doing so, your{' '}
             <a href="https://deckdeckgo.com">DeckDeckGo</a> presentation will remain SEO friendly even without server side rendering.
           </p>
diff --git a/docs/src/app/pages/docs/edit/app-edit-theming/app-edit-theming.tsx b/docs/src/app/pages/docs/edit/app-edit-theming/app-edit-theming.tsx
index 39fc31976..a60de5e06 100644
--- a/docs/src/app/pages/docs/edit/app-edit-theming/app-edit-theming.tsx
+++ b/docs/src/app/pages/docs/edit/app-edit-theming/app-edit-theming.tsx
@@ -29,7 +29,10 @@ export class AppEditTheming {
           <h2 id="app-edit-theming-theme">Theme</h2>
           <p>
             To create the theme for your deck when you are using the <a href="https://deckdeckgo.com">DeckDeckGo</a> starter kit, use the{' '}
-            <a href="https://ionicframework.com/docs/theming/color-generator">Ionic Color Generator</a> to pick the colors of your choice.
+            <a href="https://ionicframework.com/docs/theming/color-generator" rel="noopener noreferrer">
+              Ionic Color Generator
+            </a>{' '}
+            to pick the colors of your choice.
           </p>
           <p>
             Once done, <code>copy</code> the generated CSS variables and <code>paste</code> them into the <code>src/css/variables.css</code> file of your
diff --git a/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx b/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx
index 77d7620ce..b4216e2de 100644
--- a/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-aspect-ratio/app-slide-aspect-ratio.tsx
@@ -88,8 +88,11 @@ export class AppSlideAspectRatio {
           </blockquote>
           <h3 id="app-slide-aspect-ratio-from-a-cdn">From a CDN</h3>
           <p>
-            It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> if you want to use this template from a CDN. To do so, add the following include
-            script in the main HTML file of your project:
+            It&#39;s recommended to use{' '}
+            <a href="https://unpkg.com/" rel="noopener noreferrer">
+              unpkg
+            </a>{' '}
+            if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
           </p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
@@ -101,17 +104,38 @@ export class AppSlideAspectRatio {
           </deckgo-highlight-code>
           <h3 id="app-slide-aspect-ratio-from-npm">From NPM</h3>
           <p>
-            To install this template in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/slide-aspect-ratio">npm</a> run the following
-            command:
+            To install this template in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/slide-aspect-ratio" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            run the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;slide-aspect-ratio</code>
           </deckgo-highlight-code>
           <h3 id="app-slide-aspect-ratio-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
diff --git a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
index c7b84aa02..dee797b8b 100644
--- a/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-author/app-slide-author.tsx
@@ -103,8 +103,11 @@ export class AppSlideAuthor {
           </blockquote>
           <h3 id="app-slide-author-from-a-cdn">From a CDN</h3>
           <p>
-            It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> if you want to use this template from a CDN. To do so, add the following include
-            script in the main HTML file of your project:
+            It&#39;s recommended to use{' '}
+            <a href="https://unpkg.com/" rel="noopener noreferrer">
+              unpkg
+            </a>{' '}
+            if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
           </p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
@@ -116,16 +119,38 @@ export class AppSlideAuthor {
           </deckgo-highlight-code>
           <h3 id="app-slide-author-from-npm">From NPM</h3>
           <p>
-            To install this template in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/slide-author">npm</a> run the following command:
+            To install this template in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/slide-author" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            run the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;slide-author</code>
           </deckgo-highlight-code>
           <h3 id="app-slide-author-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
@@ -182,7 +207,10 @@ export class AppSlideAuthor {
           <h3 id="app-slide-author-social-components">Social components</h3>
           <p>
             The details of the component <code>&lt;deckgo-social/&gt;</code> is described in the components{' '}
-            <a href="https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md">documentation</a>.
+            <a href="https://github.com/deckgo/deckdeckgo/blob/master/doc/components/components.md" rel="noopener noreferrer">
+              documentation
+            </a>
+            .
           </p>
           <h2 id="app-slide-author-attributes">Attributes</h2>
           <p>This component offers the following options which could be set using attributes:</p>
diff --git a/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx b/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
index 451fab4d6..d36204c6c 100644
--- a/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
+++ b/docs/src/app/pages/docs/slides/app-slide-playground/app-slide-playground.tsx
@@ -28,8 +28,19 @@ export class AppSlidePlayground {
         <main>
           <h1 id="app-slide-playground-slide-playground">Slide: Playground</h1>
           <p>
-            The &quot;Playground&quot; template helps embed easily playgrounds as <a href="https://codepen.io">Codepen</a>,{' '}
-            <a href="https://jsfiddle.net/">JSFiddle</a> and <a href="https://webcomponents.dev">WebComponents.dev</a> in your presentation.
+            The &quot;Playground&quot; template helps embed easily playgrounds as{' '}
+            <a href="https://codepen.io" rel="noopener noreferrer">
+              Codepen
+            </a>
+            ,{' '}
+            <a href="https://jsfiddle.net/" rel="noopener noreferrer">
+              JSFiddle
+            </a>{' '}
+            and{' '}
+            <a href="https://webcomponents.dev" rel="noopener noreferrer">
+              WebComponents.dev
+            </a>{' '}
+            in your presentation.
           </p>
           <h2 id="app-slide-playground-table-of-contents">Table of contents</h2>
           <ul>
@@ -104,8 +115,11 @@ export class AppSlidePlayground {
           </blockquote>
           <h3 id="app-slide-playground-from-a-cdn">From a CDN</h3>
           <p>
-            It&#39;s recommended to use <a href="https://unpkg.com/">unpkg</a> if you want to use this template from a CDN. To do so, add the following include
-            script in the main HTML file of your project:
+            It&#39;s recommended to use{' '}
+            <a href="https://unpkg.com/" rel="noopener noreferrer">
+              unpkg
+            </a>{' '}
+            if you want to use this template from a CDN. To do so, add the following include script in the main HTML file of your project:
           </p>
           <deckgo-highlight-code language="javascript">
             <code slot="code">
@@ -117,17 +131,38 @@ export class AppSlidePlayground {
           </deckgo-highlight-code>
           <h3 id="app-slide-playground-from-npm">From NPM</h3>
           <p>
-            To install this template in your project from <a href="https://www.npmjs.com/package/@deckdeckgo/slide-playground">npm</a> run the following
-            command:
+            To install this template in your project from{' '}
+            <a href="https://www.npmjs.com/package/@deckdeckgo/slide-playground" rel="noopener noreferrer">
+              npm
+            </a>{' '}
+            run the following command:
           </p>
           <deckgo-highlight-code language="bash">
             <code slot="code">npm install @deckdeckgo&#47;slide-playground</code>
           </deckgo-highlight-code>
           <h3 id="app-slide-playground-framework-integration">Framework integration</h3>
           <p>
-            The <a href="https://stenciljs.com/docs/overview">Stencil documentation</a> provide examples of framework integration for{' '}
-            <a href="https://stenciljs.com/docs/angular">Angular</a>, <a href="https://stenciljs.com/docs/react">React</a>,{' '}
-            <a href="https://stenciljs.com/docs/vue">Vue</a> and <a href="https://stenciljs.com/docs/ember">Ember</a>.
+            The{' '}
+            <a href="https://stenciljs.com/docs/overview" rel="noopener noreferrer">
+              Stencil documentation
+            </a>{' '}
+            provide examples of framework integration for{' '}
+            <a href="https://stenciljs.com/docs/angular" rel="noopener noreferrer">
+              Angular
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/react" rel="noopener noreferrer">
+              React
+            </a>
+            ,{' '}
+            <a href="https://stenciljs.com/docs/vue" rel="noopener noreferrer">
+              Vue
+            </a>{' '}
+            and{' '}
+            <a href="https://stenciljs.com/docs/ember" rel="noopener noreferrer">
+              Ember
+            </a>
+            .
           </p>
           <p>
             That being said, commonly, you might either <code>import</code> or <code>load</code> it:
diff --git a/webcomponents/inline-editor/src/index.html b/webcomponents/inline-editor/src/index.html
index 06a2a63ed..ed87f9e7a 100644
--- a/webcomponents/inline-editor/src/index.html
+++ b/webcomponents/inline-editor/src/index.html
@@ -8,7 +8,7 @@
     <script type="module" src="/build/deckdeckgo-inline-editor.esm.js"></script>
     <script nomodule src="/build/deckdeckgo-inline-editor.js"></script>
   </head>
-  <body style="overflow: hidden;">
+  <body style="overflow: hidden">
     <p contenteditable>Bet on the Web</p>
 
     <h2 contenteditable>Environment variables with StencilJS</h2>
@@ -29,13 +29,13 @@ <h3 contenteditable>Credits</h3>
 
     <p contenteditable>
       The following solution was inspired by the one developed in the Ionic core project. One of the entry point for me was discovering the method setupConfig
-      in their source code. Therefore kudos to the awesome <a href="https://ionicframework.com">Ionic</a> team ❤️
+      in their source code. Therefore kudos to the awesome <a href="https://ionicframework.com" rel="noopener noreferrer">Ionic</a> team ❤️
     </p>
 
-    <p contenteditable><img style="width: 100px;" src="https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png" /></p>
+    <p contenteditable><img style="width: 100px" src="https://deckdeckgo.com/assets/favicon/android-chrome-512x512.png" /></p>
 
     <deckgo-inline-editor sticky-mobile="true" containers="h1,h2,h3,h4,h5,h6,p" img-editable="true" custom-actions="my-inline-action">
-      <span style="color: red;" slot="my-inline-action">My</span>
+      <span style="color: red" slot="my-inline-action">My</span>
     </deckgo-inline-editor>
 
     <script type="text/javascript">