diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 91a115123c..041dda0934 100644
--- a/client/gatsby-ssr.js
+++ b/client/gatsby-ssr.js
@@ -4,10 +4,9 @@ import { Provider } from 'react-redux';
import { I18nextProvider } from 'react-i18next';
import i18n from './i18n/config';
-import headComponents from './src/head';
import { createStore } from './src/redux/createStore';
-
import layoutSelector from './utils/gatsby/layoutSelector';
+import { getheadTagComponents, getPostBodyComponents } from './utils/tags';
const store = createStore();
@@ -23,26 +22,6 @@ wrapRootElement.propTypes = {
element: PropTypes.any
};
-// TODO: put these in a common utils file.
-const mathJaxCdn = {
- address:
- 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/' +
- '2.7.4/MathJax.js?config=TeX-AMS_HTML',
- id: 'mathjax',
- key: 'mathjax',
- type: 'text/javascript'
-};
-
-const stripeScript = {
- address: 'https://js.stripe.com/v3/',
- id: 'stripe-js',
- key: 'stripe-js',
- type: 'text/javascript'
-};
-
-const challengeRE = new RegExp('/learn/[^/]+/[^/]+/[^/]+/?$');
-const donateRE = new RegExp('/donate/?$');
-
export const wrapPageElement = layoutSelector;
export const onRenderBody = ({
@@ -50,52 +29,6 @@ export const onRenderBody = ({
setHeadComponents,
setPostBodyComponents
}) => {
- setHeadComponents([...headComponents]);
- const scripts = [
- ,
-
- ];
-
- if (
- pathname.includes('/learn/coding-interview-prep/rosetta-code') ||
- pathname.includes('/learn/coding-interview-prep/project-euler')
- ) {
- scripts.push(
-
- );
- }
-
- if (challengeRE.test(pathname) || donateRE.test(pathname)) {
- scripts.push(
-
- );
- }
-
- setPostBodyComponents(scripts.filter(Boolean));
+ setHeadComponents(getheadTagComponents());
+ setPostBodyComponents(getPostBodyComponents(pathname));
};
diff --git a/client/i18n/locales/chinese/translations.json b/client/i18n/locales/chinese/translations.json
index b7053f0a69..427e0ed4ca 100644
--- a/client/i18n/locales/chinese/translations.json
+++ b/client/i18n/locales/chinese/translations.json
@@ -2,6 +2,7 @@
"meta": {
"title": "免费学习编程 – 适合忙碌人士的编程课程",
"description": "在家学习编程，构建项目，获得认证。自 2014 年以来，已有超过 40,000 名 freeCodeCamp 学员入职谷歌、苹果、亚马逊、微软等科技公司。",
+ "social-description": "Learn to Code — For Free",
"keywords": [
"javascript",
"js",
diff --git a/client/i18n/locales/english/translations.json b/client/i18n/locales/english/translations.json
index bfe9c772f9..6003040630 100644
--- a/client/i18n/locales/english/translations.json
+++ b/client/i18n/locales/english/translations.json
@@ -1,7 +1,8 @@
{
"meta": {
"title": "Learn to Code — For Free — Coding Courses for Busy People",
- "description": "Learn to code — for free.",
+ "description": "Learn to Code — For Free",
+ "social-description": "Learn to Code — For Free",
"keywords": [
"javascript",
"js",
diff --git a/client/i18n/locales/espanol/translations.json b/client/i18n/locales/espanol/translations.json
index 28d3fe5081..c8846a07b2 100644
--- a/client/i18n/locales/espanol/translations.json
+++ b/client/i18n/locales/espanol/translations.json
@@ -2,6 +2,7 @@
"meta": {
"title": "Aprende a codificar gratis: cursos de programación para personas ocupadas",
"description": "Aprende a codificar en casa. Construye proyectos. Obtén certificaciones. Desde el 2014, más de 40,000 graduados de freeCodeCamp.org han conseguido trabajos en empresas de tecnología como Google, Apple, Amazon y Microsoft.",
+ "social-description": "Learn to Code — For Free",
"keywords": [
"javascript",
"js",
diff --git a/client/i18n/translations-schema.js b/client/i18n/translations-schema.js
index c17cc56827..e4ea14b1ad 100644
--- a/client/i18n/translations-schema.js
+++ b/client/i18n/translations-schema.js
@@ -4,9 +4,9 @@
*/
const translationsSchema = {
meta: {
- title: 'Learn to Code for Free – Coding Courses for Busy People',
- description:
- 'Learn to code at home. Build projects. Earn certifications. Since 2014, more than 40,000 freeCodeCamp.org graduates have gotten jobs at tech companies including Google, Apple, Amazon, and Microsoft.',
+ title: 'Learn to Code — For Free — Coding Courses for Busy People',
+ description: 'Learn to Code — For Free',
+ 'social-description': 'Learn to Code — For Free',
keywords: [
'javascript',
'js',
diff --git a/client/src/head/index.js b/client/src/head/index.js
deleted file mode 100644
index 70d90294bc..0000000000
--- a/client/src/head/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import meta from './meta';
-
-const metaAndStyleSheets = meta.map((element, i) => ({
- ...element,
- key: `meta-stylesheet-${i}`,
- props: { ...element.props, key: `meta-stylesheet-${i}` }
-}));
-
-export default metaAndStyleSheets;
diff --git a/client/src/head/meta.js b/client/src/head/meta.js
deleted file mode 100644
index c870deea7e..0000000000
--- a/client/src/head/meta.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-
-const meta = [
- ,
- ,
- ,
- ,
- ,
- ,
- ,
-
-];
-
-export default meta;
diff --git a/client/src/head/preloads.js b/client/src/head/preloads.js
deleted file mode 100644
index c38f582a4f..0000000000
--- a/client/src/head/preloads.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import styleSheets from './styleSheets';
-
-const preloads = styleSheets.map(styleSheet => (
-
-
- {styleSheet}
-
-));
-
-export default preloads;
diff --git a/client/src/head/styleSheets.js b/client/src/head/styleSheets.js
deleted file mode 100644
index 0ede0cef81..0000000000
--- a/client/src/head/styleSheets.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const styleSheets = [];
-
-export default styleSheets;
diff --git a/client/src/html.js b/client/src/html.js
index c800a1187a..9dcb9f7b3a 100644
--- a/client/src/html.js
+++ b/client/src/html.js
@@ -12,8 +12,6 @@ export default class HTML extends React.Component {
content='width=device-width, initial-scale=1.0, shrink-to-fit=no'
name='viewport'
/>
-
-
{this.props.headComponents}
diff --git a/client/utils/tags.js b/client/utils/tags.js
new file mode 100644
index 0000000000..d502b11cad
--- /dev/null
+++ b/client/utils/tags.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { withPrefix } from 'gatsby';
+import i18next from 'i18next';
+
+export const getheadTagComponents = () => {
+ const socialImage =
+ 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png';
+ const pathToBootstrap = withPrefix('/css/bootstrap.min.css');
+ return [
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+ ,
+
+ ];
+};
+
+export const getPostBodyComponents = pathname => {
+ let scripts = [];
+ const challengesPathRE = new RegExp('/learn/[^/]+/[^/]+/[^/]+/?$');
+ const donatePathRE = new RegExp('/donate/?$');
+ const mathJaxScriptElement = (
+
+ );
+ const stripeScriptElement = (
+
+ );
+
+ if (
+ pathname.includes('/learn/coding-interview-prep/rosetta-code') ||
+ pathname.includes('/learn/coding-interview-prep/project-euler')
+ ) {
+ scripts.push(mathJaxScriptElement);
+ }
+ if (challengesPathRE.test(pathname) || donatePathRE.test(pathname)) {
+ scripts.push(stripeScriptElement);
+ }
+ return scripts.filter(Boolean);
+};
diff --git a/cypress/integration/tags.js b/cypress/integration/tags.js
new file mode 100644
index 0000000000..113c8433be
--- /dev/null
+++ b/cypress/integration/tags.js
@@ -0,0 +1,115 @@
+/* global cy */
+describe('The Document Metadata', () => {
+ before(() => {
+ cy.visit('/');
+ cy.document();
+ });
+
+ const social = {
+ description: 'Learn to Code — For Free'
+ };
+
+ const challengs = {
+ responsiveWebDesign:
+ '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements',
+ rosetaCode: '/learn/coding-interview-prep/rosetta-code/100-doors',
+ projectEuler:
+ '/learn/coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5'
+ };
+
+ const scripts = {
+ stripe: {
+ selector: 'body script[id="stripe-js"]',
+ src: 'https://js.stripe.com/v3/'
+ },
+ mathjax: {
+ selector: 'body script[id="mathjax"]',
+ src:
+ 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML'
+ }
+ };
+ it('landing page has correct for description', () => {
+ cy.get('head meta[name="description"]').should(
+ 'have.attr',
+ 'content',
+ 'Learn to Code — For Free'
+ );
+ });
+ it('landing page has correct for og title', () => {
+ cy.get('head meta[name="og:title"]').should(
+ 'have.attr',
+ 'content',
+ 'freeCodeCamp.org'
+ );
+ });
+ it('landing page has correct for og description', () => {
+ cy.get('head meta[name="og:description"]').should(
+ 'have.attr',
+ 'content',
+ social.description
+ );
+ });
+ it('landing page has correct for twitter title', () => {
+ cy.get('head meta[name="twitter:title"]').should(
+ 'have.attr',
+ 'content',
+ 'freeCodeCamp.org'
+ );
+ });
+ it('landing page has correct for twitter description', () => {
+ cy.get('head meta[name="twitter:description"]').should(
+ 'have.attr',
+ 'content',
+ social.description
+ );
+ });
+ it('landing page should not have stripe body script', () => {
+ cy.reload();
+ cy.get(scripts.stripe.selector).should('not.exist');
+ });
+ it('landing page should not have mathjax body script', () => {
+ cy.reload();
+ cy.get(scripts.mathjax.selector).should('not.exist');
+ });
+ it('responsive webdesign challenges should not have mathjax body script', () => {
+ cy.visit(challengs.responsiveWebDesign);
+ cy.reload();
+ cy.get(scripts.mathjax.selector).should('not.exist');
+ });
+ it('donate page should have stripe body script', () => {
+ cy.visit('/donate');
+ cy.reload();
+ cy.get(scripts.stripe.selector).should(
+ 'have.attr',
+ 'src',
+ scripts.stripe.src
+ );
+ });
+ it('responsive webdesign challenges should have stripe body script', () => {
+ cy.visit(challengs.responsiveWebDesign);
+ cy.reload();
+ cy.get(scripts.stripe.selector).should(
+ 'have.attr',
+ 'src',
+ scripts.stripe.src
+ );
+ });
+ it('project euler challenges should have mathjax body script', () => {
+ cy.visit(challengs.projectEuler);
+ cy.reload();
+ cy.get(scripts.mathjax.selector).should(
+ 'have.attr',
+ 'src',
+ scripts.mathjax.src
+ );
+ });
+ it('rosetta code challenges should have mathjax body script', () => {
+ cy.visit(challengs.projectEuler);
+ cy.reload();
+ cy.get(scripts.mathjax.selector).should(
+ 'have.attr',
+ 'src',
+ scripts.mathjax.src
+ );
+ });
+});