Replace Blog link with Wiki link (#329)

Author: PavelVanecek

src/components/Shared/TargetBlankLink.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import targetBlankSvg from './targetBlank.svg';
+
+type TargetBlankLinkProps = {
+  href: string;
+  children: ReactNode;
+};
+
+export function TargetBlankLink({ href, children }: TargetBlankLinkProps) {
+  return (
+    <a href={href} target="_blank" rel="noopener noreferrer">
+      {children}
+      <img height={20} style={{ verticalAlign: 'text-bottom' }} src={targetBlankSvg} alt="Link opens in new tab" />
+    </a>
+  );
+}

src/components/Shared/targetBlank.svg

@@ -4,8 +4,9 @@ import { RouteComponentProps, withRouter } from 'react-router';
 import Helmet from 'react-helmet';
 import { getLocaleType, localeGet } from '../utils/LocaleUtils.ts';
 import '../styles/app.scss';
+import { TargetBlankLink } from '../components/Shared/TargetBlankLink.tsx';
 
-const modules = ['guide', 'api', 'examples', 'blog', 'storybook'];
+const modules = ['guide', 'api', 'examples', 'storybook'];
 
 const locales = [
   { locale: 'en-US', text: 'En' },
@@ -68,15 +69,11 @@ class Frame extends Component<FrameProps> {
                     </Link>
                   </li>
                 ))}
+                <li className="github-wiki">
+                  <TargetBlankLink href="https://github.com/recharts/recharts/wiki">Wiki</TargetBlankLink>
+                </li>
                 <li className="github-wrapper">
-                  <a
-                    href="https://github.com/recharts/recharts"
-                    target="_blank"
-                    className="nav-github"
-                    rel="noreferrer"
-                  >
-                    GitHub
-                  </a>
+                  <TargetBlankLink href="https://github.com/recharts/recharts">GitHub</TargetBlankLink>
                 </li>
                 <li className="language-switch-wrapper">{this.renderLocaleSwitch(locale)}</li>
               </ul>

src/layouts/Frame.tsx

@@ -1,13 +1,13 @@
 import { Redirect, Route, Switch } from 'react-router-dom';
-import { IndexView, GuideView, APIView, ExamplesView, BlogView, Storybook } from '../views';
+import { IndexView, GuideView, APIView, ExamplesView, Storybook } from '../views';
 import Frame from '../layouts/Frame';
 import { defaultLocale } from '../utils/LocaleUtils.ts';
 
 export type RouteParams = {
   name?: string;
 };
 
-export default function () {
+export default function routes() {
   return (
     <Switch>
       <Route path="/" exact render={() => <Redirect to={`/${defaultLocale}`} />} />
@@ -35,14 +35,6 @@ export default function () {
           </Frame>
         )}
       />
-      <Route
-        path="/*/blog"
-        render={() => (
-          <Frame>
-            <BlogView />
-          </Frame>
-        )}
-      />
       <Route
         path="/*/storybook"
         render={() => (

src/routes/index.tsx

@@ -1,12 +1,12 @@
 import { PureComponent } from 'react';
-import './Storybook.scss';
+import './iframe.scss';
 
 class Storybook extends PureComponent {
   render() {
     return (
       <iframe
         title="Recharts storybook"
-        className="storybook"
+        className="fullscreen"
         src="https://main--63da8268a0da9970db6992aa.chromatic.com/"
       />
     );

src/views/BlogView.js

@@ -1,4 +1,4 @@
-iframe.storybook {
+iframe.fullscreen {
   width: 100%;
   height: calc(100vh - 150px);
   border: 0;

src/views/BlogView.scss

@@ -2,7 +2,6 @@ import IndexView from './IndexView';
 import GuideView from './GuideView';
 import APIView from './APIView';
 import ExamplesView from './ExamplesView';
-import BlogView from './BlogView';
 import Storybook from './Storybook';
 
-export { IndexView, GuideView, APIView, ExamplesView, BlogView, Storybook };
+export { IndexView, GuideView, APIView, ExamplesView, Storybook };