perf: use raw html for some external links (#1600)

src/routes/_components/InformationalFooter.html

@@ -1,21 +1,26 @@
 <HiddenFromSSR>
   <footer>
+    <!-- Use raw HTML to make the output smaller -->
+    {@html `
       <p>
-      Pinafore is <ExternalLink href="https://github.com/nolanlawson/pinafore">open-source software</ExternalLink>
+        Pinafore is
-      created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
+        <a rel="noopener" target="_blank" href="https://github.com/nolanlawson/pinafore">open-source software</a>
-      <ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">AGPL License</ExternalLink>.
+        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,
+      HiddenFromSSR
-      ExternalLink
     }
   }
 </script>

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
     }
   }

src/routes/_pages/settings/about.html

@@ -1,18 +1,27 @@
 <SettingsLayout page='settings/about' label="About Pinafore">
+  <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>
+        Pinafore is
-    created by <ExternalLink href="https://nolanlawson.com">Nolan Lawson</ExternalLink> and distributed under the
+        <a rel="noopener" target="_blank"
-    <ExternalLink href="https://github.com/nolanlawson/pinafore/blob/master/LICENSE">GNU Affero General Public License</ExternalLink>.
+           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>
 
       <p>
-    Pinafore does not store any personal information on its servers, including but not limited to names, email addresses,
+        Pinafore does not store any personal information on its servers,
+        including but not limited to names, email addresses,
         IP addresses, posts, and photos.
       </p>
 
@@ -24,25 +33,24 @@
       <h2>Credits</h2>
 
       <p>
-    Icons provided by <ExternalLink href="http://fontawesome.io/">Font Awesome</ExternalLink>.
+        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 <ExternalLink href="https://thenounproject.com/">the Noun Project</ExternalLink>.
+        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,
+      SettingsLayout
-      ExternalLink
     },
     data: () => ({
       version

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,

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
     },