refactor(components): reorganised the structure of the components keeping things cleaner (nodejs#2921)

Author: ovflowd

gatsby-browser.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementBrowser } from './src/types';
 

gatsby-ssr.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import ReactIntlProvider from './src/containers/ReactIntl';
+import ReactIntlProvider from './src/providers/ReactIntl';
 import { defaultLanguage, defaultMessages } from './locales';
 import type { WrapPageElementSSR } from './src/types';
 

src/components/Alert/index.module.scss renamed to src/components/ArticleComponents/Alert/index.module.scss

@@ -1,6 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Author component does not render without a username 1`] = `<div />`;
+exports[`Author component does not render without a username 1`] = `
+<div>
+  <li>
+    <a
+      aria-label=" Github - opens in new tab"
+      class="link"
+      href="https://github.com/"
+      rel="noopener noreferrer"
+      style="margin-left: 0px;"
+      target="_blank"
+    >
+      <img
+        alt=""
+        src="https://github.com/.png?size="
+      />
+    </a>
+  </li>
+</div>
+`;
 
 exports[`Author component renders correctly 1`] = `
 <div>

src/components/Alert/index.tsx renamed to src/components/ArticleComponents/Alert/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { injectIntl, WrappedComponentProps } from 'react-intl';
+import styles from './index.module.scss';
+
+interface Props {
+  index: number;
+  username: string;
+  size: string;
+}
+
+const Author = ({
+  index,
+  username,
+  size = '64',
+  intl,
+}: Props & WrappedComponentProps) => {
+  // Clean up username and build links.
+  const githubUserName = username.trim();
+  const githubLink = `https://github.com/${githubUserName}`;
+  const githubImgLink = `https://github.com/${githubUserName}.png?size=${size}`;
+
+  // If it's the first author then no margin left.
+  const mleft = index === 0 ? { marginLeft: 0 } : {};
+
+  const translation = intl.formatMessage(
+    { id: 'components.author.githubLinkLabel' },
+    { username }
+  );
+
+  return (
+    <li>
+      <a
+        className={styles.link}
+        href={githubLink}
+        aria-label={translation}
+        key={username}
+        target="_blank"
+        rel="noopener noreferrer"
+        style={mleft}
+      >
+        <img src={githubImgLink} alt="" />
+      </a>
+    </li>
+  );
+};
+
+export default injectIntl(Author);