Add targets to most of the doc links (#50)

* Add targets to most of the doc links. Should fix #49

* Prettified Code!

Co-authored-by: graywolf336 <graywolf336@users.noreply.github.com>

web/components/config/edit-instance-details.tsx

@@ -104,15 +104,25 @@ export default function EditInstanceDetails() {
         initialValue={instanceDetails.logo}
         onChange={handleFieldChange}
       />
-      {instanceDetails.logo && <img src={'/logo'} alt="uploaded logo" className="logo-preview" />}
+      {instanceDetails.logo && <img src="/logo'" alt="uploaded logo" className="logo-preview" />}
       <br />
 
       <p className="description">
         Increase your audience by appearing in the{' '}
         <a href="https://directory.owncast.online" target="_blank" rel="noreferrer">
           <strong>Owncast Directory</strong>
-        </a>.  This is an external service run by the Owncast project.  <a href="https://owncast.online/docs/directory/">Learn more</a>.
+        </a>
-        {!yp.instanceUrl && <div><br/>You must set your server URL above to enable the directory.</div>}
+        . This is an external service run by the Owncast project.{' '}
+        <a href="https://owncast.online/docs/directory/" target="_blank" rel="noopener noreferrer">
+          Learn more
+        </a>
+        .
+        {!yp.instanceUrl && (
+          <div>
+            <br />
+            You must set your server URL above to enable the directory.
+          </div>
+        )}
       </p>
 
       <div className="config-yp-container">

web/components/config/edit-page-content.tsx

@@ -91,7 +91,14 @@ export default function EditPageContent() {
 
       <p className="description">
         Edit the content of your page by using simple{' '}
-        <a href="https://www.markdownguide.org/basic-syntax/">Markdown syntax</a>.
+        <a
+          href="https://www.markdownguide.org/basic-syntax/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Markdown syntax
+        </a>
+        .
       </p>
 
       <MdEditor

web/components/config/video-latency.tsx

@@ -107,7 +107,13 @@ export default function VideoLatency() {
       <p className="description">
         For interactive live streams you may want to experiment with a lower latency, for
         non-interactive broadcasts you may want to increase it.{' '}
-        <a href="https://owncast.online/docs/encoding#latency-buffer">Read to learn more.</a>
+        <a
+          href="https://owncast.online/docs/encoding#latency-buffer"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Read to learn more.
+        </a>
       </p>
 
       <div className="segment-slider-container">

web/components/config/video-variant-form.tsx

@@ -173,8 +173,10 @@ export default function VideoVariantForm({
   return (
     <div className="config-variant-form">
       <p className="description">
-        <a href="https://owncast.online/docs/video">Learn more</a> about how each of these settings
+        <a href="https://owncast.online/docs/video" target="_blank" rel="noopener noreferrer">
-        can impact the performance of your server.
+          Learn more
+        </a>{' '}
+        about how each of these settings can impact the performance of your server.
       </p>
 
       <Row gutter={16}>
@@ -187,7 +189,13 @@ export default function VideoVariantForm({
               disabled={dataState.videoPassthrough}
             />
             <p className="read-more-subtext">
-              <a href="https://owncast.online/docs/video/#cpu-usage">Read more about CPU usage.</a>
+              <a
+                href="https://owncast.online/docs/video/#cpu-usage"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Read more about CPU usage.
+              </a>
             </p>
           </div>
         </Col>
@@ -216,7 +224,13 @@ export default function VideoVariantForm({
               <p className="selected-value-note">{selectedVideoBRnote()}</p>
             </div>
             <p className="read-more-subtext">
-              <a href="https://owncast.online/docs/video/#bitrate">Read more about bitrates.</a>
+              <a
+                href="https://owncast.online/docs/video/#bitrate"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Read more about bitrates.
+              </a>
             </p>
           </div>
         </Col>
@@ -231,7 +245,11 @@ export default function VideoVariantForm({
                   Resizing your content will take additional resources on your server. If you wish
                   to optionally resize your content for this stream output then you should either
                   set the width <strong>or</strong> the height to keep your aspect ratio.{' '}
-                  <a href="https://owncast.online/docs/video/#resolution">
+                  <a
+                    href="https://owncast.online/docs/video/#resolution"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
                     Read more about resolutions.
                   </a>
                 </p>
@@ -266,7 +284,11 @@ export default function VideoVariantForm({
                     used.
                   </p>
                   <p>
-                    <a href="https://owncast.online/docs/video/#video-passthrough">
+                    <a
+                      href="https://owncast.online/docs/video/#video-passthrough"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
                       Read the documentation before enabling, as it impacts your stream.
                     </a>
                   </p>
@@ -314,7 +336,13 @@ export default function VideoVariantForm({
               <p className="selected-value-note">{selectedFramerateNote()}</p>
             </div>
             <p className="read-more-subtext">
-              <a href="https://owncast.online/docs/video/#framerate">Read more about framerates.</a>
+              <a
+                href="https://owncast.online/docs/video/#framerate"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Read more about framerates.
+              </a>
             </p>
           </div>
         </Panel>

web/components/main-layout.tsx

@@ -204,7 +204,9 @@ export default function MainLayout(props) {
         <Content className="main-content-container">{children}</Content>
 
         <Footer className="footer-container">
-          <a href="https://owncast.online/">About Owncast v{versionNumber}</a>
+          <a href="https://owncast.online/" target="_blank" rel="noopener noreferrer">
+            About Owncast v{versionNumber}
+          </a>
         </Footer>
       </Layout>
     </Layout>

web/pages/access-tokens.tsx

@@ -220,7 +220,14 @@ export default function AccessTokens() {
       </Paragraph>
       <Paragraph>
         Read more about how to use these tokens, with examples, at{' '}
-        <a href="https://owncast.online/docs/integrations/">our documentation</a>.
+        <a
+          href="https://owncast.online/docs/integrations/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          our documentation
+        </a>
+        .
       </Paragraph>
 
       <Table rowKey="token" columns={columns} dataSource={tokens} pagination={false} />

web/pages/config-public-details.tsx

@@ -14,7 +14,9 @@ export default function PublicFacingDetails() {
       <Title>General Settings</Title>
       <p className="description">
         The following are displayed on your site to describe your stream and its content.{' '}
-        <a href="https://owncast.online/docs/website/">Learn more.</a>
+        <a href="https://owncast.online/docs/website/" target="_blank" rel="noopener noreferrer">
+          Learn more.
+        </a>
       </p>
 
       <div className="top-container">

web/pages/config-storage.tsx

@@ -11,7 +11,10 @@ export default function ConfigStorageInfo() {
       <p className="description">
         Owncast supports optionally using external storage providers to distribute your video. Learn
         more about this by visiting our{' '}
-        <a href="https://owncast.online/docs/storage/">Storage Documentation</a>.
+        <a href="https://owncast.online/docs/storage/" target="_blank" rel="noopener noreferrer">
+          Storage Documentation
+        </a>
+        .
       </p>
       <p className="description">
         Configuring this incorrectly will likely cause your video to be unplayable. Double check the

web/pages/config-video.tsx

@@ -12,9 +12,11 @@ export default function ConfigVideoSettings() {
       <Title>Video configuration</Title>
       <p className="description">
         Before changing your video configuration{' '}
-        <a href="https://owncast.online/docs/video">visit the video documentation</a> to learn how
+        <a href="https://owncast.online/docs/video" target="_blank" rel="noopener noreferrer">
-        it impacts your stream performance. The general rule is to start conservatively by having
+          visit the video documentation
-        one middle quality stream output variant and experiment with adding more of varied
+        </a>{' '}
+        to learn how it impacts your stream performance. The general rule is to start conservatively
+        by having one middle quality stream output variant and experiment with adding more of varied
         qualities.
       </p>
 

web/pages/help.tsx

@@ -121,7 +121,14 @@ export default function Help() {
             {' '}
             FAQ
           </a>{' '}
-          or exist in our <a href="https://github.com/owncast/owncast/discussions">discussions</a>
+          or exist in our{' '}
+          <a
+            href="https://github.com/owncast/owncast/discussions"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            discussions
+          </a>
         </div>
       ),
     },

web/pages/offline-notice.tsx

@@ -19,7 +19,11 @@ export default function Offline({ logs = [], config }) {
       title: 'Use your broadcasting software',
       content: (
         <div>
-          <a href="https://owncast.online/docs/broadcasting/">
+          <a
+            href="https://owncast.online/docs/broadcasting/"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             Learn how to point your existing software to your new server and start streaming your
             content.
           </a>
@@ -36,7 +40,7 @@ export default function Offline({ logs = [], config }) {
       title: 'Embed your video onto other sites',
       content: (
         <div>
-          <a href="https://owncast.online/docs/embed">
+          <a href="https://owncast.online/docs/embed" target="_blank" rel="noopener noreferrer">
             Learn how you can add your Owncast stream to other sites you control.
           </a>
         </div>

web/pages/webhooks.tsx

@@ -196,7 +196,14 @@ export default function Webhooks() {
       </Paragraph>
       <Paragraph>
         Read more about how to use webhooks, with examples, at{' '}
-        <a href="https://owncast.online/docs/integrations/">our documentation</a>.
+        <a
+          href="https://owncast.online/docs/integrations/"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          our documentation
+        </a>
+        .
       </Paragraph>
 
       <Table rowKey="id" columns={columns} dataSource={webhooks} pagination={false} />