Merge pull request #66 from timja/seo-2

[WEBSITE-405] Use plugin-specific title and description in response metadata

Author: oleg-nenashev

app/commons/helper.js

@@ -15,3 +15,6 @@ export function cleanTitle(title) {
     .replace(' for Jenkins','')
     .replace('Hudson ','');
 }
+
+export const defaultPluginSiteTitle = 'Jenkins Plugins';
+export const pluginSiteTitleSuffix = 'Jenkins plugin';

app/components/Main.jsx

@@ -10,6 +10,7 @@ import Views from './Views';
 import { actions } from '../actions';
 import { isFiltered, showFilter, showResults, view } from '../selectors';
 import { createSelector } from 'reselect';
+import { defaultPluginSiteTitle } from '../commons/helper';
 
 class Main extends React.PureComponent {
 
@@ -77,6 +78,10 @@ class Main extends React.PureComponent {
   }
 
   render() {
+    if (typeof document !== 'undefined') {
+      document.title = defaultPluginSiteTitle;
+    }
+
     return (
       <div>
         <div className={classNames(styles.ItemFinder, this.props.view, { showResults: this.props.showResults },

app/components/PluginDetail.jsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import LineChart from './LineChart';
 import NotFound from './NotFound';
 import Spinner from './Spinner';
-import { cleanTitle } from '../commons/helper';
+import { cleanTitle, pluginSiteTitleSuffix } from '../commons/helper';
 import { firstVisit, isFetchingPlugin, labels, plugin } from '../selectors';
 import { actions } from '../actions';
 import { createSelector } from 'reselect';
@@ -314,6 +314,10 @@ class PluginDetail extends React.PureComponent {
         return <NotFound/>;
       }
     }
+
+    if (typeof document !== 'undefined') {
+      document.title = `${cleanTitle(plugin.title)} - ${pluginSiteTitleSuffix}`;
+    }
     const beforeClose = this.closeDialog;
     return (
       <ModalView hideOnOverlayClicked isVisible ignoreEscapeKey {...{beforeClose}}>

server.js

@@ -15,6 +15,7 @@ import fs from 'fs';
 import unirest from 'unirest';
 import cheerio from 'cheerio';
 import schedule from 'node-schedule';
+import { cleanTitle, defaultPluginSiteTitle, pluginSiteTitleSuffix } from './app/commons/helper';
 
 const app = express();
 const port = 5000;
@@ -35,6 +36,10 @@ app.use(jsPath, express.static('./dist/client'));
 app.engine('hbs', exphbs({extname: '.hbs'}));
 app.set('view engine', 'hbs');
 
+
+const defaultPluginSiteDescription = 'Jenkins – an open source automation server which enables developers around the world to reliably build, test, and deploy their software';
+const defaultPluginOpenGraphImage = 'https://jenkins.io/images/logo-title-opengraph.png'
+
 const downloadHeader = () => {
   var headerFile = __HEADER_FILE__;
   if (headerFile !== null && headerFile !== undefined) {
@@ -57,6 +62,8 @@ const downloadHeader = () => {
         $('head').prepend('{{> header }}');
         // Even though we're supplying our own this one still causes a conflict.
         $('link[href="https://jenkins.io/css/font-icons.css"]').remove();
+        // Prevents: Access to resource at 'https://jenkins.io/site.webmanifest' from origin 'https://plugins.jenkins.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
+        $('link[href="https://jenkins.io/site.webmanifest"]').remove();
         $('head').append('<script>window.__REDUX_STATE__ = {{{reduxState}}};</script>');
         $('#grid-box').append('{{{rendered}}}');
         $('#grid-box').after('<script type="text/javascript" src="{{jsPath}}/main.js"></script>');
@@ -113,15 +120,22 @@ app.get('*', (req, res, next) => {
         const pluginSiteApiVersion = store.getState().data.info.commit.substring(0, 7);
         const reduxState = JSON.stringify(store.getState()).replace(/</g, '\\x3c');
         const pluginNotFound = req.url !== '/' && store.getState().ui.plugin === null;
+        const title = store.getState().ui.plugin && store.getState().ui.plugin.title ? `${cleanTitle(store.getState().ui.plugin.title)} - ${pluginSiteTitleSuffix}` : defaultPluginSiteTitle;
+        const description = store.getState().ui.plugin && store.getState().ui.plugin.excerpt ? store.getState().ui.plugin.excerpt : defaultPluginSiteDescription;
+        const opengraphImage = defaultPluginOpenGraphImage; // TODO WEBSITE-645 add support for plugins to provide their own OG imag
+
         res.status(pluginNotFound ? 404 : 200).render('index', {
           rendered,
+          title,
+          description,
           reduxState,
+          opengraphImage,
           jsPath,
           pluginSiteVersion,
           pluginSiteApiVersion
         });
       }).catch((err) => {
-        console.error(chalk.red(error));
+        console.error(chalk.red(err));
         res.sendStatus(404);
       });
     }