Merge pull request #23 from Bouncey/feat/favicons

Feat/favicons

packages/learn/gatsby-ssr.js

@@ -2,6 +2,8 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { renderToString } from 'react-dom/server';
 
+import headComponents from './src/head';
+
 import { createStore } from './src/redux/store';
 
 exports.replaceRenderer = ({
@@ -17,7 +19,8 @@ exports.replaceRenderer = ({
   replaceBodyHTMLString(renderToString(<ConnectedBody />));
 };
 
-exports.onRenderBody = ({ setPostBodyComponents }) =>
+exports.onRenderBody = ({ setHeadComponents, setPostBodyComponents }) => {
+  setHeadComponents([...headComponents]);
   setPostBodyComponents([
     <script
       async='true'
@@ -25,3 +28,4 @@ exports.onRenderBody = ({ setPostBodyComponents }) =>
       src='https://cdnjs.cloudflare.com/ajax/libs/chai/4.1.2/chai.min.js'
     />
   ]);
+};

packages/learn/src/head/favicons.js

@@ -0,0 +1,217 @@
+import React from 'react';
+
+const favicons = [
+  <link
+    href='https://s3.amazonaws.com/freecodecamp/favicons/favicon.ico'
+    rel='icon'
+    type='image/x-icon'
+  />,
+  <link
+    href='https://s3.amazonaws.com/freecodecamp/favicons/favicon.ico'
+    rel='favicon'
+  />,
+  <link
+    href='https://s3.amazonaws.com/freecodecamp/favicons/favicon.ico'
+    rel='shortcut icon'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'favicon-16x16.png'
+    }
+    rel='favion'
+    sizes='16x16'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'favicon-32x32.png'
+    }
+    rel='favicon'
+    sizes='32x32'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'favicon-96x96.png'
+    }
+    rel='favicon'
+    sizes='96x96'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-36x36.png'
+    }
+    rel='android-chrome'
+    sizes='36x36'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-48x48.png'
+    }
+    rel='android-chrome'
+    sizes='48x48'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-72x72.png'
+    }
+    rel='android-chrome'
+    sizes='72x72'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-96x96.png'
+    }
+    rel='android-chrome'
+    sizes='96x96'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-144x144.png'
+    }
+    rel='android-chrome'
+    sizes='144x144'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-192x192.png'
+    }
+    rel='android-chrome'
+    sizes='192x192'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'android-chrome-manifest.json'
+    }
+    rel='android-chrome-manifest'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-precomposed.png'
+    }
+    rel='apple-touch-icon-precomposed'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'apple-touch-icon.png'
+    }
+    rel='apple-touch-icon'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-57x57.png'
+    }
+    rel='apple-touch-icon'
+    sizes='57x57'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-60x60.png'
+    }
+    rel='apple-touch-icon'
+    sizes='60x60'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-72x72.png'
+    }
+    rel='apple-touch-icon'
+    sizes='72x72'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-76x76.png'
+    }
+    rel='apple-touch-icon'
+    sizes='76x76'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-114x114.png'
+    }
+    rel='apple-touch-icon'
+    sizes='114x114'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-120x120.png'
+    }
+    rel='apple-touch-icon'
+    sizes='120x120'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-144x144.png'
+    }
+    rel='apple-touch-icon'
+    sizes='144x144'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-152x152.png'
+    }
+    rel='apple-touch-icon'
+    sizes='152x152'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' +
+      'apple-touch-icon-180x180.png'
+    }
+    rel='apple-touch-icon'
+    sizes='180x180'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'mstile-70x70.png'
+    }
+    rel='mstile'
+    sizes='70x70'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'mstile-144x144.png'
+    }
+    rel='mstile'
+    sizes='144x144'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'mstile-150x150.png'
+    }
+    rel='mstile'
+    sizes='150x150'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'mstile-310x150.png'
+    }
+    rel='mstile'
+    sizes='310x150'
+  />,
+  <link
+    href={
+      'https://s3.amazonaws.com/freecodecamp/favicons/' + 'mstile-310x310.png'
+    }
+    rel='mstile'
+    sizes='310x310'
+  />,
+  <meta content='#FFFFFF' name='msapplication-TileColor' />,
+  <meta content='/' name='msapplication-TileImage' />
+];
+
+export default favicons;

packages/learn/src/head/index.js

@@ -0,0 +1,9 @@
+import favicons from './favicons';
+import meta from './meta';
+import styleSheets from './styleSheets';
+
+const metaAndStyleSheets = meta
+  .concat(favicons, styleSheets)
+  .map((element, i) => ({ ...element, key: `meta-stylesheet-${i}` }));
+
+export default metaAndStyleSheets;

packages/learn/src/head/meta.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+const meta = [
+  <meta charSet='utf-8' />,
+  <meta content='IE=edge' httpEquiv='X-UA-Compatible' />,
+  <meta content='width=device-width, initial-scale=1.0' name='viewport' />
+];
+
+export default meta;

packages/learn/src/head/preloads.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styleSheets from './styleSheets';
+
+const preloads = styleSheets.map((styleSheet, i) => (
+  <link
+    as='style'
+    href={styleSheet.props.href}
+    key={`preload-${i}`}
+    rel='preload'
+  />
+));
+
+export default preloads;

packages/learn/src/head/styleSheets.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const styleSheets = [
+  // bootstrap v3.3.7
+  <link href='/bootstrap3/css/bootstrap.min.css' rel='stylesheet' />
+];
+
+export default styleSheets;

packages/learn/src/html.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import preloads from './head/preloads';
+
+let stylesStr;
+if (process.env.NODE_ENV === 'production') {
+  try {
+    stylesStr = require('!raw-loader!../public/styles.css');
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+// These props are coming from Gatsby, we shouldn't have to worry about them
+const propTypes = {
+  body: PropTypes.any,
+  bodyAttributes: PropTypes.any,
+  headComponents: PropTypes.any,
+  htmlAttributes: PropTypes.any,
+  postBodyComponents: PropTypes.any,
+  preBodyComponents: PropTypes.any
+};
+
+function HTML(props) {
+  const {
+    htmlAttributes,
+    body,
+    bodyAttributes,
+    headComponents,
+    preBodyComponents,
+    postBodyComponents
+  } = props;
+  let css;
+  if (process.env.NODE_ENV === 'production') {
+    css = (
+      <style
+        dangerouslySetInnerHTML={{ __html: stylesStr }}
+        id='gatsby-inlined-css'
+      />
+    );
+  }
+  return (
+    <html {...htmlAttributes}>
+      <head>
+        {preloads}
+        {headComponents}
+        {css}
+      </head>
+      <body {...bodyAttributes}>
+        {preBodyComponents}
+        <div
+          dangerouslySetInnerHTML={{ __html: body }}
+          id='___gatsby'
+          key={'body'}
+        />
+        {postBodyComponents}
+      </body>
+    </html>
+  );
+}
+
+HTML.displayName = 'HMTL';
+HTML.propTypes = propTypes;
+
+export default HTML;

packages/learn/src/layouts/index.js

@@ -10,7 +10,6 @@ import { AllChallengeNode } from '../redux/propTypes';
 import Header from '../components/Header';
 import Map from '../components/Map';
 
-import '../../static/bootstrap3/css/bootstrap.min.css';
 import './global.css';
 import 'react-reflex/styles.css';
 import './layout.css';

packages/learn/src/templates/Challenges/backend/Show.js

@@ -73,7 +73,7 @@ const options = {
 };
 
 export class BackEnd extends PureComponent {
-componentDidMount() {
+  componentDidMount() {
     const {
       initTests,
       updateChallengeMeta,

packages/learn/src/templates/Challenges/utils/build.js

@@ -61,14 +61,11 @@ export function buildFromFiles(state, shouldProxyConsole) {
 
 export function buildBackendChallenge(state) {
   const { solution: { value: url } } = backendFormValuesSelector(state);
-  return combineLatest(
-    fetchScript(frameRunner),
-    fetchScript(jQuery)
-  ).pipe(
+  return combineLatest(fetchScript(frameRunner), fetchScript(jQuery)).pipe(
     map(([frameRunner, jQuery]) => ({
       build: jQuery + frameRunner,
       sources: { url },
       checkChallengePayload: { solution: url }
-    })
-  ));
+    }))
+  );
 }