Merge pull request #18 from zarathustra323/branding

Robots.txt + sitemap.xml; stitch graph schema; publisher context
cygnusb2b · Aug 13, 2018 · 6a474e1 · 6a474e1
2 parents 09bb4c6 + e1a7899
commit 6a474e1
Show file tree

Hide file tree

Showing 20 changed files with 782 additions and 70 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -15,7 +15,7 @@ services:
     environment:
       NODE_ENV: development
       PORT: ${APP_PORT-3005}
-      ROOT_URI: ${ROOT_URI-http://docker.for.mac.host.internal:8100}
+      GRAPHQL_URI: ${GRAPHQL_URI-http://docker.for.mac.host.internal:8100}
 volumes:
   node_modules: {}
   next:

diff --git a/nodemon.json b/nodemon.json
@@ -1,6 +1,6 @@
 {
   "verbose": true,
   "ignore": ["node_modules", ".next"],
-  "watch": ["src/server/**/*", "server.js"],
+  "watch": ["src/server/**/*.js", "server.js"],
   "ext": "js json"
 }
diff --git a/package.json b/package.json
@@ -26,12 +26,15 @@
     "apollo-link": "^1.2.2",
     "apollo-link-error": "^1.1.0",
     "apollo-link-http": "^1.5.4",
+    "apollo-server-express": "^2.0.0",
     "dotenv": "^5.0.1",
+    "envalid": "^4.1.4",
     "express": "^4.16.3",
     "graphql": "^0.13.2",
     "graphql-tag": "^2.9.2",
+    "graphql-tools": "^3.1.1",
+    "handlebars": "^4.0.11",
     "helmet": "^3.13.0",
-    "http-proxy-middleware": "^0.18.0",
     "isomorphic-unfetch": "^2.1.1",
     "moment": "^2.19.1",
     "next": "6.1.1-canary.4",
@@ -40,7 +43,8 @@
     "react-apollo": "^2.1.9",
     "react-dom": "^16.4.2",
     "react-moment": "^0.7.9",
-    "reactstrap": "^6.3.1"
+    "reactstrap": "^6.3.1",
+    "validator": "^10.5.0"
   },
   "devDependencies": {
     "eslint": "^4.19.1",

diff --git a/src/apollo/config.js b/src/apollo/config.js
@@ -5,7 +5,7 @@ import fetch from 'isomorphic-unfetch';
 
 export default (req) => {
   const headers = req ? req.headers : {};
-  const host = (req) ? req.ROOT_URI : '';
+  const uri = (req) ? `${req.protocol}://${req.get('host')}` : '';
   if (headers.host) {
     headers['x-forwarded-host'] = headers.host;
     delete headers.host;
@@ -21,7 +21,7 @@ export default (req) => {
         if (networkError) console.error(`[Network error]: ${networkError}`);
       }),
       new HttpLink({
-        uri: `${host}/graph`,
+        uri: `${uri}/graph`,
         headers,
         fetch,
       }),

diff --git a/src/gql/fragments/story/view.graphql b/src/gql/fragments/story/view.graphql
@@ -4,6 +4,7 @@ fragment StoryViewFragment on Story {
   id
   title
   teaser
+  url
   publishedAt
   advertiser {
     id

diff --git a/src/gql/queries/pages/story.graphql b/src/gql/queries/pages/story.graphql
@@ -1,7 +1,11 @@
 #import '../../fragments/story/view.graphql'
 
-query StoryPage($input: PublishedStoryInput!) {
+query StoryPage($input: PublishedStoryInput!, $publisherId: String) {
   publishedStory(input: $input) {
     ...StoryViewFragment
+    publisher(contextId: $publisherId) {
+      id
+      name
+    }
   }
 }
diff --git a/src/pages/story.jsx b/src/pages/story.jsx
@@ -2,6 +2,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Query } from 'react-apollo';
 import Head from 'next/head';
+
 import Title from '../components/Title';
 import TrackPageView from '../components/TrackPageView';
 import StoryView from '../components/StoryView';
@@ -10,11 +11,11 @@ import ErrorAlert from '../components/ErrorAlert';
 
 import pageQuery from '../gql/queries/pages/story.graphql';
 
-const Story = ({ id, preview }) => {
+const Story = ({ id, preview, publisherId }) => {
   const input = { id, preview };
   return (
     <Fragment>
-      <Query query={pageQuery} variables={{ input }}>
+      <Query query={pageQuery} variables={{ input, publisherId }}>
         {({ loading, error, data }) => {
           if (loading) {
             return <LoadingBar />;
@@ -23,13 +24,21 @@ const Story = ({ id, preview }) => {
             return <ErrorAlert message={error.message} />;
           }
           const { publishedStory } = data;
-          const { title, teaser } = publishedStory;
+          const {
+            title,
+            teaser,
+            url,
+            publisher,
+          } = publishedStory;
           return (
             <Fragment>
               <TrackPageView params={{ story_id: id, page_title: title }} />
               <Title value={title} />
               <Head>
                 <meta name="description" content={teaser} />
+                {/* @todo Eventually use the publisher context. */}
+                <meta name="native-x:publisher" content={publisher.name} />
+                <link rel="canonical" href={url} />
               </Head>
               <StoryView {...publishedStory} />
             </Fragment>
@@ -42,19 +51,22 @@ const Story = ({ id, preview }) => {
 
 Story.getInitialProps = async ({ req, query }) => {
   let preview = false;
+
   if (req) {
     preview = Boolean(req.query);
   }
-  const { id } = query;
-  return { id, preview };
+  const { id, publisherId } = query;
+  return { id, preview, publisherId };
 };
 
 Story.defaultProps = {
   preview: false,
+  publisherId: null,
 };
 
 Story.propTypes = {
   id: PropTypes.string.isRequired,
+  publisherId: PropTypes.string,
   preview: PropTypes.bool,
 };
 

diff --git a/src/server/env.js b/src/server/env.js
@@ -0,0 +1,18 @@
+const { isURL } = require('validator');
+
+const {
+  port,
+  cleanEnv,
+  makeValidator,
+} = require('envalid');
+
+const url = makeValidator((v) => {
+  const opts = { protocols: ['http', 'https'], require_tld: false, require_protocol: true };
+  if (isURL(v, opts)) return v;
+  throw new Error('Expected a valid URL with http or https');
+});
+
+module.exports = cleanEnv(process.env, {
+  PORT: port({ desc: 'The port that express will run on.', default: 3005 }),
+  GRAPHQL_URI: url({ desc: 'The GraphQL URI for proxying/stitching API requests. Should follow the https://[account_key].[domain].[tld] structure in production.' }),
+});
diff --git a/src/server/graph/client.js b/src/server/graph/client.js
@@ -0,0 +1,7 @@
+const { graphql } = require('graphql');
+const createSchema = require('./schema');
+
+module.exports = async (options = {}, resultKey) => {
+  const schema = await createSchema();
+  return graphql({ ...options, schema }).then(res => (resultKey ? res.data[resultKey] : res.data));
+};
diff --git a/src/server/graph/schema.js b/src/server/graph/schema.js
@@ -0,0 +1,32 @@
+const { HttpLink } = require('apollo-link-http');
+const fetch = require('isomorphic-unfetch');
+const {
+  makeRemoteExecutableSchema,
+  introspectSchema,
+} = require('graphql-tools');
+const env = require('../env');
+
+const { GRAPHQL_URI } = env;
+
+const link = new HttpLink({
+  uri: `${GRAPHQL_URI}/graph`,
+  fetch,
+});
+
+let promise;
+module.exports = async () => {
+  const build = async () => {
+    const schema = await introspectSchema(link);
+    return makeRemoteExecutableSchema({
+      schema,
+      link,
+    });
+  };
+  if (!promise) {
+    // Prevents the introspection from happening more than once.
+    // What happens, though, when the remote schema updates?
+    // This would cache the schema and would require a reload of the app.
+    promise = build();
+  }
+  return promise;
+};
diff --git a/src/server/handlebars.js b/src/server/handlebars.js
@@ -0,0 +1,12 @@
+const handlebars = require('handlebars');
+const { readFileSync } = require('fs');
+
+// Register custom helpers, etc here...
+
+const renderTemplate = (path, data) => {
+  const source = readFileSync(`${__dirname}/templates/${path}`).toString();
+  const template = handlebars.compile(source);
+  return template(data);
+};
+
+module.exports = { handlebars, renderTemplate };
diff --git a/src/server/index.js b/src/server/index.js
@@ -1,16 +1,11 @@
+const env = require('./env');
 const express = require('express');
 const helmet = require('helmet');
 const routes = require('./routes');
 
-const { PORT, ROOT_URI } = process.env;
-
-const applyProxy = (req, res, next) => {
-  req.ROOT_URI = ROOT_URI;
-  next();
-};
+const { PORT } = env;
 
 const server = express();
-server.use(applyProxy)
 server.use(helmet());
 
 module.exports = (client) => {

diff --git a/src/server/routes/graph.js b/src/server/routes/graph.js
@@ -0,0 +1,17 @@
+const helmet = require('helmet');
+const { Router } = require('express');
+const { ApolloServer } = require('apollo-server-express');
+const createSchema = require('../graph/schema');
+
+const router = Router();
+
+const create = async () => {
+  const schema = await createSchema();
+  router.use(helmet.noCache());
+  const server = new ApolloServer({ schema });
+  server.applyMiddleware({ app: router, path: '/' });
+};
+
+create();
+
+module.exports = router;
diff --git a/src/server/routes/index.js b/src/server/routes/index.js
@@ -1,14 +1,9 @@
-const proxy = require('http-proxy-middleware');
 const index = require('./root');
+const graph = require('./graph');
 const story = require('./story');
 
-const { ROOT_URI } = process.env;
-
 module.exports = (server, client) => {
   server.use('/', index(client));
   server.use('/story', story(client));
-  server.use('/graph', proxy({
-    target: `${ROOT_URI}/graph`,
-    changeOrigin: true,
-  }));
+  server.use('/graph', graph);
 };
diff --git a/src/server/routes/root.js b/src/server/routes/root.js
@@ -1,5 +1,8 @@
 const path = require('path');
 const { Router } = require('express');
+const { renderTemplate } = require('../handlebars');
+const asyncRoute = require('../utils/async-route');
+const graphql = require('../graph/client');
 
 const router = Router();
 
@@ -8,5 +11,45 @@ module.exports = (client) => {
     const file = path.resolve(__dirname, '../../static/favicon.ico');
     client.serveStatic(req, res, file);
   });
+
+  router.get('/robots.txt', asyncRoute(async (req, res) => {
+    const source = `
+      query Account {
+        account {
+          id
+          storyUri
+        }
+      }
+    `;
+    const account = await graphql({ source }, 'account');
+    const { storyUri } = account;
+    const txt = renderTemplate('robots.txt.hbs', { uri: storyUri });
+    res.set('Content-Type', 'text/plain; charset=UTF-8');
+    res.send(txt);
+  }));
+
+  router.get('/sitemap.xml', asyncRoute(async (req, res) => {
+    const source = `
+      query Sitemap {
+        storySitemap {
+          id
+          loc
+          lastmod
+          changefreq
+          priority
+          image {
+            id
+            loc
+            caption
+          }
+        }
+      }
+    `;
+    const items = await graphql({ source }, 'storySitemap');
+    const xml = renderTemplate('sitemap.xml.hbs', { items });
+    res.set('Content-Type', 'text/xml; charset=UTF-8');
+    res.send(xml);
+  }));
+
   return router;
 };
diff --git a/src/server/routes/story.js b/src/server/routes/story.js
@@ -11,7 +11,8 @@ module.exports = (client) => {
       client.render(req, res, '_error');
     } else {
       const actualPage = '/story';
-      const props = { id };
+      const publisherId = req.query.pubid || null;
+      const props = { id, publisherId };
       client.render(req, res, actualPage, props);
     }
   });

diff --git a/src/server/templates/robots.txt.hbs b/src/server/templates/robots.txt.hbs
@@ -0,0 +1,7 @@
+# www.robotstxt.org/
+# www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156449
+
+User-agent: *
+Disallow: /graph
+
+Sitemap: {{uri}}/sitemap.xml
diff --git a/src/server/templates/sitemap.xml.hbs b/src/server/templates/sitemap.xml.hbs
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+  {{#each items as |item|}}
+    <url>
+      <loc>{{item.loc}}</loc>
+      {{#if item.lastmod}}<lastmod>{{item.lastmod}}</lastmod>{{/if}}
+      <changefreq>{{item.changefreq}}</changefreq>
+      <priority>{{item.priority}}</priority>
+
+      {{#if item.image.loc}}
+        <image:image>
+          <image:loc>{{item.image.loc}}
+            {{#if item.image.caption}}<image:caption>{{item.image.caption}}</image:caption>{{/if}}
+          </image:loc>
+        </image:image>
+      {{/if}}
+
+    </url>
+  {{/each}}
+</urlset>
diff --git a/src/server/utils/async-route.js b/src/server/utils/async-route.js
@@ -0,0 +1 @@
+module.exports = fn => (req, res, next) => Promise.resolve(fn(req, res, next)).catch(next);
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,6 +4,7 @@ fragment StoryViewFragment on Story { @@
       id
       title
       teaser
+      url
       publishedAt
       advertiser {
         id
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		module.exports = fn => (req, res, next) => Promise.resolve(fn(req, res, next)).catch(next);