normalize discord invite links, remove noreferrer from discord invite links

Author: josefaidt

src/components/ExternalLink/index.tsx

@@ -8,12 +8,17 @@ type ExternalLinkProps = {
   anchorTitle?: string;
   icon?: boolean;
   className?: string;
+  /**
+   * @default 'noopener noreferrer'
+   */
+  rel?: string;
 };
 
 const ExternalLink: React.FC<ExternalLinkProps> = ({
   children,
   href,
-  className
+  className,
+  rel
 }) => {
   const [label, setLabel] = React.useState('');
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -30,7 +35,7 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({
       href={href}
       className={className}
       aria-label={label + ' (opens in new tab)'}
-      rel="noopener noreferrer"
+      rel={rel || 'noopener noreferrer'}
       target="_blank"
       onClick={() => {
         trackLink(href);

src/components/Footer/Footer.tsx

@@ -64,6 +64,7 @@ export const Footer = ({ hasTOC = false }: FooterProps) => {
             <ExternalLink
               href={links.DISCORD}
               className="footer-link footer-link--social"
+              rel={'noopener'}
             >
               <IconDiscord />
               <VisuallyHidden>Discord</VisuallyHidden>

src/components/LinkCard/LinkCard.tsx

@@ -6,19 +6,25 @@ interface LinkCardProps {
   href?: string;
   children: React.ReactNode;
   icon: () => React.ReactNode;
+  /**
+   * @default "noopener noreferrer"
+   */
+  rel?: string;
 }
 
 const LinkCard: React.FC<LinkCardProps> = ({
   isExternal,
   href,
   children,
-  icon
+  icon,
+  rel
 }) => {
   return (
     href && (
       <Link
         href={href}
         isExternal={isExternal}
+        rel={rel || 'noopener noreferrer'}
         className="link-card"
         aria-label={children + ' (opens in new tab)'}
       >

src/components/LinkCards/LinkCards.tsx

@@ -28,6 +28,7 @@ const LinkCards: React.FC<LinkCardsProps> = ({ platform }) => {
       <LinkCard
         isExternal={true}
         href={links.DISCORD}
+        rel={'noopener'}
         icon={() => <IconDiscord fontSize="2rem" />}
       >
         Amplify Discord

src/components/contribute/HowItWorks.tsx

@@ -117,7 +117,7 @@ export default function HowItWorks() {
           <Text>
             If this is your first approved pull request, the Amplify team
             designates you as a Contributor in the{' '}
-            <ExternalLink href="https://discord.com/invite/amplify">
+            <ExternalLink href="https://discord.gg/amplify" rel="noopener">
               Amplify Community Discord server <IconExternalLink />
             </ExternalLink>
             .

src/fragments/lib-v1/flutter.mdx

@@ -1,6 +1,6 @@
 ## Amplify Flutter
 
-Welcome to the Amplify Flutter documentation. To stay up to date with the latest changes and provide feedback, please take a look at our [Github repo](https://github.com/aws-amplify/amplify-flutter) or join us on [Discord](https://discord.gg/jWVbPfC).
+Welcome to the Amplify Flutter documentation. To stay up to date with the latest changes and provide feedback, please take a look at our [Github repo](https://github.com/aws-amplify/amplify-flutter) or join us on [Discord](https://discord.gg/amplify).
 
  Amplify Flutter v0 supports iOS/Android as target platforms.
 

src/fragments/lib/flutter.mdx

@@ -1,6 +1,6 @@
 ## Amplify Flutter
 
-Welcome to the Amplify Flutter documentation. To stay up to date with the latest changes and provide feedback, please take a look at our [GitHub repo](https://github.com/aws-amplify/amplify-flutter) or join us on [Discord](https://discord.gg/jWVbPfC).
+Welcome to the Amplify Flutter documentation. To stay up to date with the latest changes and provide feedback, please take a look at our [GitHub repo](https://github.com/aws-amplify/amplify-flutter) or join us on [Discord](https://discord.gg/amplify).
 
 The stable release of Amplify Flutter currently supports iOS, Android, Web, Windows, macOS, and Linux as target platforms. Currently Push Notifications and DataStore are supported for only iOS and Android.
 

src/pages/contribute/getting-started.tsx

@@ -251,7 +251,7 @@ export default function GettingStarted() {
         <Text>Learn more about the AWS Amplify JS library.</Text>
 
         <Heading level={4}>
-          <ExternalLink href="https://discord.com/invite/amplify">
+          <ExternalLink href="https://discord.gg/amplify">
             Amplify Community Discord server <IconExternalLink />
           </ExternalLink>
         </Heading>
@@ -270,7 +270,7 @@ export default function GettingStarted() {
           Amplify JS.
         </Text>
         <Heading level={4}>
-          <ExternalLink href="https://discord.com/invite/amplify">
+          <ExternalLink href="https://discord.gg/amplify">
             Amplify Discord Office Hours <IconExternalLink />
           </ExternalLink>
         </Heading>

src/pages/gen1/[platform]/tools/cli/project/troubleshooting/index.mdx

@@ -325,4 +325,4 @@ Search for similar issues or open new issues on Github
 
 Connect with [AWS Enterprise support](https://aws.amazon.com/premiumsupport/)
 
-Join our [community Discord Channel](https://discord.com/invite/amplify)
+Join our [community Discord Channel](https://discord.gg/amplify)