From 0194a0782316d3c1b37bd64aa8260be6ce0def09 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Thu, 24 Oct 2019 19:03:03 -0700
Subject: [PATCH] perf: use raw html for some external links (#1600)

---
 .../_components/InformationalFooter.html      | 23 ++++---
 src/routes/_components/NotLoggedInHome.html   | 24 +++++--
 src/routes/_pages/settings/about.html         | 64 +++++++++++--------
 src/routes/_pages/settings/instances/add.html |  4 +-
 src/routes/_pages/settings/wellness.html      |  4 +-
 5 files changed, 71 insertions(+), 48 deletions(-)

diff --git a/src/routes/_components/InformationalFooter.html b/src/routes/_components/InformationalFooter.html
index fa790057..5fef7497 100644
--- a/src/routes/_components/InformationalFooter.html
+++ b/src/routes/_components/InformationalFooter.html
@@ -1,21 +1,26 @@
 <HiddenFromSSR>
   <footer>
-    <p>
-      Pinafore is <ExternalLink href="https://github.com/nolanlawson/pinafore">open-source software</ExternalLink>
-      created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
-      <ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">AGPL License</ExternalLink>.
-      Here is the <a href="/settings/about#privacy-policy" rel="prefetch">privacy policy</a>.
-    </p>
+    <!-- Use raw HTML to make the output smaller -->
+    {@html `
+      <p>
+        Pinafore is
+        <a rel="noopener" target="_blank" href="https://github.com/nolanlawson/pinafore">open-source software</a>
+        created by
+        <a rel="noopener" target="_blank" href="https://nolanlawson.com">Nolan Lawson</a>
+        and distributed under the
+        <a rel="noopener" target="_blank"
+           href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">AGPL License</a>.
+        Here is the <a href="/settings/about#privacy-policy" rel="prefetch">privacy policy</a>.
+      </p>
+    `}
   </footer>
 </HiddenFromSSR>
 <script>
   import HiddenFromSSR from './HiddenFromSSR.html'
-  import ExternalLink from './ExternalLink.html'
 
   export default {
     components: {
-      HiddenFromSSR,
-      ExternalLink
+      HiddenFromSSR
     }
   }
 </script>
diff --git a/src/routes/_components/NotLoggedInHome.html b/src/routes/_components/NotLoggedInHome.html
index 03624975..e9df7360 100644
--- a/src/routes/_components/NotLoggedInHome.html
+++ b/src/routes/_components/NotLoggedInHome.html
@@ -5,11 +5,27 @@
         <SvgIcon className="not-logged-in-home-svg" href="#pinafore-logo" />
         <h1>Pinafore</h1>
       </div>
-      <p>Pinafore is a web client for <ExternalLink href="https://joinmastodon.org">Mastodon</ExternalLink>, designed for speed and simplicity.</p>
+      <!-- Use raw HTML to make the output smaller -->
+      {@html `
+        <div>
+          <p>
+            Pinafore is a web client for
+            <a rel="noopener" target="_blank" href="https://joinmastodon.org">Mastodon</a>,
+            designed for speed and simplicity.
+          </p>
 
-      <p>Read the <ExternalLink href="https://nolanlawson.com/2018/04/09/introducing-pinafore-for-mastodon/">introductory blog post</ExternalLink>, or get started by logging in to an instance:</p>
+          <p>
+            Read the
+            <a rel="noopener" target="_blank"
+               href="https://nolanlawson.com/2018/04/09/introducing-pinafore-for-mastodon/">introductory blog post</a>,
+            or get started by logging in to an instance:
+          </p>
 
-      <p style="text-align: right;"><a class="button primary" rel="prefetch" href="/settings/instances/add">Add instance</a></p>
+          <p style="text-align: right;">
+            <a class="button primary" rel="prefetch" href="/settings/instances/add">Add instance</a>
+          </p>
+        </div>
+      `}
     </div>
   </FreeTextLayout>
 </HiddenFromSSR>
@@ -50,14 +66,12 @@
 <script>
   import FreeTextLayout from './FreeTextLayout.html'
   import HiddenFromSSR from './HiddenFromSSR.html'
-  import ExternalLink from './ExternalLink.html'
   import SvgIcon from './SvgIcon.html'
 
   export default {
     components: {
       FreeTextLayout,
       HiddenFromSSR,
-      ExternalLink,
       SvgIcon
     }
   }
diff --git a/src/routes/_pages/settings/about.html b/src/routes/_pages/settings/about.html
index 55327597..bdd87817 100644
--- a/src/routes/_pages/settings/about.html
+++ b/src/routes/_pages/settings/about.html
@@ -1,48 +1,56 @@
 <SettingsLayout page='settings/about' label="About Pinafore">
-  <h1>About Pinafore</h1>
+  <div>
+    <!-- Use raw HTML to make the output smaller -->
+    {@html `
+      <h1>About Pinafore</h1>
 
-  <h2>Version {version}</h2>
+      <h2>Version ${version}</h2>
 
-  <p>
-    Pinafore is <ExternalLink href="https://github.com/nolanlawson/pinafore">free and open-source software</ExternalLink>
-    created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
-    <ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">GNU Affero General Public License</ExternalLink>.
-  </p>
+      <p>
+        Pinafore is
+        <a rel="noopener" target="_blank"
+           href="https://github.com/nolanlawson/pinafore">free and open-source software</a>
+        created by
+        <a rel="noopener" target="_blank" href="https://nolanlawson.com">Nolan Lawson</a>
+        and distributed under the
+        <a rel="noopener" target="_blank"
+           href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">GNU Affero General Public License</a>.
+      </p>
 
-  <h2 id="privacy-policy">Privacy Policy</h2>
+      <h2 id="privacy-policy">Privacy Policy</h2>
 
-  <p>
-    Pinafore does not store any personal information on its servers, including but not limited to names, email addresses,
-    IP addresses, posts, and photos.
-  </p>
+      <p>
+        Pinafore does not store any personal information on its servers,
+        including but not limited to names, email addresses,
+        IP addresses, posts, and photos.
+      </p>
 
-  <p>
-    Pinafore is a static site. All data is stored locally in your browser and shared with the fediverse
-    instance(s) you connect to.
-  </p>
+      <p>
+        Pinafore is a static site. All data is stored locally in your browser and shared with the fediverse
+        instance(s) you connect to.
+      </p>
 
-  <h2>Credits</h2>
-
-  <p>
-    Icons provided by <ExternalLink href="http://fontawesome.io/">Font Awesome</ExternalLink>.
-  </p>
-
-  <p>
-    Logo thanks to "sailboat" by Gregor Cresnar from <ExternalLink href="https://thenounproject.com/">the Noun Project</ExternalLink>.
-  </p>
+      <h2>Credits</h2>
 
+      <p>
+        Icons provided by <a rel="noopener" target="_blank" href="http://fontawesome.io/">Font Awesome</a>.
+      </p>
 
+      <p>
+        Logo thanks to "sailboat" by Gregor Cresnar from
+        <a rel="noopener" target="_blank" href="https://thenounproject.com/">the Noun Project</a>.
+      </p>
+    `}
+  </div>
 </SettingsLayout>
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
-  import ExternalLink from '../../_components/ExternalLink.html'
 
   import { version } from '../../../../package.json'
 
   export default {
     components: {
-      SettingsLayout,
-      ExternalLink
+      SettingsLayout
     },
     data: () => ({
       version
diff --git a/src/routes/_pages/settings/instances/add.html b/src/routes/_pages/settings/instances/add.html
index 9e20a8c0..d6722a16 100644
--- a/src/routes/_pages/settings/instances/add.html
+++ b/src/routes/_pages/settings/instances/add.html
@@ -43,7 +43,7 @@
         tooltipText="An instance is your Mastodon home server, such as mastodon.social or cybre.space."
       />
       ?
-      <ExternalLink href="https://joinmastodon.org">Join Mastodon!</ExternalLink>
+      <a rel="noopener" target="_blank" href="https://joinmastodon.org">Join Mastodon!</a>
     </p>
   {/if}
 </SettingsLayout>
@@ -86,7 +86,6 @@
   import SettingsLayout from '../../../_components/settings/SettingsLayout.html'
   import { store } from '../../../_store/store'
   import { logInToInstance, handleOauthCode } from '../../../_actions/addInstance'
-  import ExternalLink from '../../../_components/ExternalLink.html'
   import { testHasIndexedDB, testHasLocalStorage } from '../../../_utils/testStorage'
   import Tooltip from '../../../_components/Tooltip.html'
 
@@ -103,7 +102,6 @@
     },
     components: {
       SettingsLayout,
-      ExternalLink,
       Tooltip
     },
     store: () => store,
diff --git a/src/routes/_pages/settings/wellness.html b/src/routes/_pages/settings/wellness.html
index 4da39bc2..b2272e62 100644
--- a/src/routes/_pages/settings/wellness.html
+++ b/src/routes/_pages/settings/wellness.html
@@ -60,7 +60,7 @@
   </form>
   <p>
     These settings are partly based on guidelines from the
-    <ExternalLink href="https://humanetech.com">Center for Humane Technology</ExternalLink>.
+    <a rel="noopener" target="_blank" href="https://humanetech.com">Center for Humane Technology</a>.
   </p>
 </SettingsLayout>
 <UISettingsStyles />
@@ -72,7 +72,6 @@
 <script>
   import SettingsLayout from '../../_components/settings/SettingsLayout.html'
   import { store } from '../../_store/store'
-  import ExternalLink from '../../_components/ExternalLink.html'
   import InfoAside from '../../_components/InfoAside.html'
   import UISettingsStyles from '../../_components/settings/UISettingsStyles.html'
 
@@ -82,7 +81,6 @@
     },
     components: {
       SettingsLayout,
-      ExternalLink,
       InfoAside,
       UISettingsStyles
     },