Merge branch 'next' into permalink

src/core/build/createWebpackConfig.ts

@@ -0,0 +1,447 @@
+import CaseSensitivePathsPlugin from "case-sensitive-paths-webpack-plugin";
+import ExtractTextPlugin from "extract-text-webpack-plugin";
+import HtmlWebpackPlugin, { Options } from "html-webpack-plugin";
+import path from "path";
+import InterpolateHtmlPlugin from "react-dev-utils/InterpolateHtmlPlugin";
+import WatchMissingNodeModulesPlugin from "react-dev-utils/WatchMissingNodeModulesPlugin";
+import TsconfigPathsPlugin from "tsconfig-paths-webpack-plugin";
+import UglifyJsPlugin from "uglifyjs-webpack-plugin";
+import webpack, { Configuration } from "webpack";
+import ManifestPlugin from "webpack-manifest-plugin";
+import paths from "./paths";
+
+interface CreateWebpackConfig {
+  publicPath?: string;
+  publicURL?: string;
+  env?: Record<string, string>;
+  disableSourcemaps?: boolean;
+  appendPlugins?: any[];
+}
+
+export default function createWebpackConfig({
+  publicPath = "/",
+  publicURL = "",
+  env = process.env as Record<string, string>,
+  appendPlugins = [],
+  disableSourcemaps,
+}: CreateWebpackConfig = {}): Configuration[] {
+  const envStringified = {
+    "process.env": Object.keys(env).reduce<Record<string, string>>(
+      (result, key) => {
+        result[key] = JSON.stringify(env[key]);
+        return result;
+      },
+      {}
+    ),
+  };
+
+  const isProduction = env.NODE_ENV === "production";
+
+  const htmlWebpackConfig: Options = {
+    minify: isProduction && {
+      removeComments: true,
+      collapseWhitespace: true,
+      removeRedundantAttributes: true,
+      useShortDoctype: true,
+      removeEmptyAttributes: true,
+      removeStyleLinkTypeAttributes: true,
+      keepClosingSlash: true,
+      minifyJS: true,
+      minifyCSS: true,
+      minifyURLs: true,
+    },
+  };
+
+  const styleLoader = {
+    loader: require.resolve("style-loader"),
+    options: {
+      hmr: !isProduction,
+    },
+  };
+
+  const cssLoaders = [
+    {
+      loader: require.resolve("css-loader"),
+      options: {
+        modules: true,
+        importLoaders: 1,
+        localIdentName: "[name]-[local]-[hash:base64:5]",
+        minimize: isProduction,
+        sourceMap: isProduction && !disableSourcemaps,
+      },
+    },
+    {
+      loader: require.resolve("postcss-loader"),
+      options: {
+        config: {
+          path: paths.appPostCssConfig,
+        },
+      },
+    },
+  ];
+
+  const additionalPlugins = isProduction
+    ? [
+        // Minify the code.
+        new UglifyJsPlugin({
+          uglifyOptions: {
+            compress: {
+              warnings: false,
+              // Disabled because of an issue with Uglify breaking seemingly valid code:
+              // https://github.com/facebookincubator/create-react-app/issues/2376
+              // Pending further investigation:
+              // https://github.com/mishoo/UglifyJS2/issues/2011
+              comparisons: false,
+            },
+            mangle: {
+              safari10: true,
+            },
+            output: {
+              comments: false,
+              // Turned on because emoji and regex is not minified properly using default
+              // https://github.com/facebookincubator/create-react-app/issues/2488
+              ascii_only: true,
+            },
+          },
+          sourceMap: !disableSourcemaps,
+        }),
+        // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
+        new ExtractTextPlugin({
+          // We use [md5:contenthash:hex:20] instead of [contenthash:8]
+          // because of this bug https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/763.
+          // TODO: Repalce with mini-css-extract-plugin once it supports HMR.
+          // https://github.com/webpack-contrib/mini-css-extract-plugin
+          filename: "assets/css/[name].[md5:contenthash:hex:20].css",
+        }),
+      ]
+    : [
+        // Add module names to factory functions so they appear in browser profiler.
+        new webpack.NamedModulesPlugin(),
+        // This is necessary to emit hot updates (currently CSS only):
+        new webpack.HotModuleReplacementPlugin(),
+        // Watcher doesn't work well if you mistype casing in a path so we use
+        // a plugin that prints an error when you attempt to do this.
+        // See https://github.com/facebookincubator/create-react-app/issues/240
+        new CaseSensitivePathsPlugin(),
+        // If you require a missing module and then `npm install` it, you still have
+        // to restart the development server for Webpack to discover it. This plugin
+        // makes the discovery automatic so you don't have to restart.
+        // See https://github.com/facebookincubator/create-react-app/issues/186
+        new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+      ];
+
+  const baseConfig: Configuration = {
+    // Set webpack mode.
+    mode: isProduction ? "production" : "development",
+
+    devtool:
+      !disableSourcemaps && isProduction
+        ? // We generate sourcemaps in production. This is slow but gives good results.
+          // You can exclude the *.map files from the build during deployment.
+          "source-map"
+        : // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
+          // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
+          "cheap-module-source-map",
+    // These are the "entry points" to our application.
+    // This means they will be the "root" imports that are included in JS bundle.
+    // The first two entry points enable "hot" CSS and auto-refreshes for JS.
+    output: {
+      // Add /* filename */ comments to generated require()s in the output.
+      pathinfo: !isProduction,
+      // The dist folder.
+      path: paths.appDistStatic,
+      // Generated JS file names (with nested folders).
+      // There will be one main bundle, and one file per asynchronous chunk.
+      filename: isProduction
+        ? "assets/js/[name].[chunkhash:8].js"
+        : "assets/js/[name].js",
+      chunkFilename: isProduction
+        ? "assets/js/[name].[chunkhash:8].chunk.js"
+        : "assets/js/[name].chunk.js",
+      // We inferred the "public path" (such as / or /my-project) from homepage.
+      publicPath,
+      // Point sourcemap entries to original disk location (format as URL on Windows)
+      devtoolModuleFilenameTemplate: (info: any) =>
+        path
+          .relative(paths.appSrc, info.absoluteResourcePath)
+          .replace(/\\/g, "/"),
+    },
+    resolve: {
+      extensions: [".js", ".json", ".ts", ".tsx"],
+      plugins: [
+        // Support `tsconfig.json` `path` setting.
+        new TsconfigPathsPlugin({
+          configFile: paths.appTsconfig,
+          extensions: [".js", ".ts", ".tsx"],
+        }),
+      ],
+    },
+    resolveLoader: {
+      // Add path to our own loaders.
+      modules: ["node_modules", paths.appLoaders],
+    },
+    module: {
+      strictExportPresence: true,
+      rules: [
+        // Disable require.ensure as it's not a standard language feature.
+        { parser: { requireEnsure: false } },
+
+        // First, run the linter.
+        // It's important to do this before Babel processes the JS.
+        {
+          test: /\.(js|ts|tsx)$/,
+          enforce: "pre",
+          use: [
+            {
+              options: {
+                tsConfigFile: paths.appTsconfig,
+              },
+              loader: require.resolve("tslint-loader"),
+            },
+          ],
+          include: paths.appSrc,
+        },
+        {
+          // "oneOf" will traverse all following loaders until one will
+          // match the requirements. When no loader matches it will fall
+          // back to the "file" loader at the end of the loader list.
+          oneOf: [
+            {
+              test: paths.appStreamLocalesTemplate,
+              use: [
+                // This is the locales loader that loads available locales
+                // from a particular target.
+                {
+                  loader: "locales-loader",
+                  options: {
+                    pathToLocales: paths.appLocales,
+
+                    // Default locale if non could be negotiated.
+                    defaultLocale: "en-US",
+
+                    // Fallback locale if a translation was not found.
+                    // If not set, will use the text that is already
+                    // in the code base.
+                    fallbackLocale: "en-US",
+
+                    // Common fluent files are always included in the locale bundles.
+                    commonFiles: ["framework.ftl", "common.ftl"],
+
+                    // Locales that come with the main bundle. Others are loaded on demand.
+                    bundled: ["en-US"],
+
+                    // Target specifies the prefix for fluent files to be loaded.
+                    // ${target}-xyz.ftl and ${†arget}.ftl are loaded into the locales.
+                    target: "stream",
+
+                    // All available locales can be loadable on demand.
+                    // To restrict available locales set:
+                    // availableLocales: ["en-US"],
+                  },
+                },
+              ],
+            },
+            // Loader for our fluent files.
+            {
+              test: /\.ftl$/,
+              use: ["raw-loader"],
+            },
+            // "url" loader works like "file" loader except that it embeds assets
+            // smaller than specified limit in bytes as data URLs to avoid requests.
+            // A missing `test` is equivalent to a match.
+            {
+              test: [/\.gif$/, /\.jpe?g$/, /\.png$/],
+              loader: require.resolve("url-loader"),
+              options: {
+                limit: 10000,
+                name: "assets/media/[name].[hash:8].[ext]",
+              },
+            },
+            // Process JS with Babel.
+            {
+              test: /\.(ts|tsx)$/,
+              include: paths.appSrc,
+              use: [
+                {
+                  loader: require.resolve("babel-loader"),
+                  options: {
+                    // This is a feature of `babel-loader` for webpack (not Babel itself).
+                    // It enables caching results in ./node_modules/.cache/babel-loader/
+                    // directory for faster rebuilds.
+                    cacheDirectory: true,
+                  },
+                },
+                {
+                  loader: "ts-loader",
+                  options: {
+                    configFile: paths.appTsconfig,
+                    compilerOptions: {
+                      target: "es2015",
+                      module: "esnext",
+                      jsx: "preserve",
+                      noEmit: false,
+                    },
+
+                    // Overwrites the behavior of `include` and `exclude` to only
+                    // include files that are actually being imported and which
+                    // are necessary to compile the bundle.
+                    onlyCompileBundledFiles: true,
+                  },
+                },
+              ],
+            },
+            // "postcss" loader applies autoprefixer to our CSS.
+            // "css" loader resolves paths in CSS and adds assets as dependencies.
+            // "style" loader turns CSS into JS modules that inject <style> tags.
+            // In production, we use a plugin to extract that CSS to a file, and
+            // in development "style" loader enables hot editing of CSS.
+            {
+              test: /\.css$/,
+              loader:
+                (isProduction &&
+                  ExtractTextPlugin.extract({
+                    fallback: styleLoader,
+                    use: cssLoaders,
+                  })) ||
+                undefined,
+              use:
+                (!isProduction && [
+                  require.resolve("style-loader"),
+                  ...cssLoaders,
+                ]) ||
+                undefined,
+            },
+            // "file" loader makes sure those assets get served by WebpackDevServer.
+            // When you `import` an asset, you get its (virtual) filename.
+            // In production, they would get copied to the `build` folder.
+            // This loader doesn't use a "test" so it will catch all modules
+            // that fall through the other loaders.
+            {
+              // Exclude `js` files to keep "css" loader working as it injects
+              // its runtime that would otherwise processed through "file" loader.
+              // Also exclude `html` and `json` extensions so they get processed
+              // by webpacks internal loaders.
+              exclude: [/\.(js|ts|tsx)$/, /\.html$/, /\.json$/],
+              loader: require.resolve("file-loader"),
+              options: {
+                name: "assets/media/[name].[hash:8].[ext]",
+              },
+            },
+          ],
+        },
+        // ** STOP ** Are you adding a new loader?
+        // Make sure to add the new loader(s) before the "file" loader.
+      ],
+    },
+    plugins: [
+      // Makes some environment variables available to the JS code, for example:
+      // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
+      new webpack.DefinePlugin(envStringified),
+      ...additionalPlugins,
+      ...appendPlugins,
+    ],
+    // Some libraries import Node modules but don't use them in the browser.
+    // Tell Webpack to provide empty mocks for them so importing them works.
+    node: {
+      dgram: "empty",
+      fs: "empty",
+      net: "empty",
+      tls: "empty",
+      child_process: "empty",
+    },
+    // Turn off performance hints during development because we don't do any
+    // splitting or minification in interest of speed. These warnings become
+    // cumbersome.
+    performance: {
+      hints: isProduction && "warning",
+    },
+  };
+
+  return [
+    /* Webpack config for our different target, e.g. stream, admin... */
+    {
+      ...baseConfig,
+      entry: {
+        stream: [
+          // We ship polyfills by default
+          paths.appPolyfill,
+          // Include an alternative client for WebpackDevServer. A client's job is to
+          // connect to WebpackDevServer by a socket and get notified about changes.
+          // When you save a file, the client will either apply hot updates (in case
+          // of CSS changes), or refresh the page (in case of JS changes). When you
+          // make a syntax error, this client will display a syntax error overlay.
+          // Note: instead of the default WebpackDevServer client, we use a custom one
+          // to bring better experience for Create React App users. You can replace
+          // the line below with these two lines if you prefer the stock client:
+          // require.resolve('webpack-dev-server/client') + '?/',
+          // require.resolve('webpack/hot/dev-server'),
+          (isProduction && "") ||
+            require.resolve("react-dev-utils/webpackHotDevClient"),
+          paths.appStreamIndex,
+          // Remove deactivated entries.
+        ].filter(s => s),
+      },
+      plugins: [
+        ...baseConfig.plugins!,
+        // Generates an `stream.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "stream.html",
+          template: paths.appStreamHTML,
+          chunks: ["stream"],
+          inject: "body",
+          ...htmlWebpackConfig,
+        }),
+        // Makes some environment variables available in index.html.
+        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+        // In development, this will be an empty string.
+        new InterpolateHtmlPlugin(env),
+        // Generate a manifest file which contains a mapping of all asset filenames
+        // to their corresponding output file so that tools can pick it up without
+        // having to parse `index.html`.
+        new ManifestPlugin({
+          fileName: "asset-manifest.json",
+        }),
+      ],
+    },
+    /* Webpack config for our embed */
+    {
+      ...baseConfig,
+      entry: [
+        // No polyfills for the embed.
+        (isProduction && "") ||
+          require.resolve("react-dev-utils/webpackHotDevClient"),
+        paths.appEmbedIndex,
+        // Remove deactivated entries.
+      ].filter(s => s),
+      output: {
+        ...baseConfig.output,
+        library: "Talk",
+        // don't hash the embed, cache-busting must be completed by the requester
+        // as this lives in a static template on the embed site.
+        filename: "assets/js/embed.js",
+      },
+      plugins: [
+        ...baseConfig.plugins!,
+        // Generates an `stream.html` file with the <script> injected.
+        new HtmlWebpackPlugin({
+          filename: "embed.html",
+          template: paths.appEmbedHTML,
+          inject: "head",
+          ...htmlWebpackConfig,
+        }),
+        // Makes some environment variables available in index.html.
+        // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
+        // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+        // In development, this will be an empty string.
+        new InterpolateHtmlPlugin(env),
+        // Generate a manifest file which contains a mapping of all asset filenames
+        // to their corresponding output file so that tools can pick it up without
+        // having to parse `index.html`.
+        new ManifestPlugin({
+          fileName: "embed-manifest.json",
+        }),
+      ],
+    },
+  ];
+}

src/core/build/loaders/locales-loader.js

@@ -0,0 +1,206 @@
+const loaderUtils = require("loader-utils");
+const fs = require("fs");
+const path = require("path");
+const memoize = require("lodash/memoize");
+
+/**
+ * Default values for every param that can be passed in the loader query.
+ */
+const DEFAULT_QUERY_VALUES = {
+  // Path to locales.
+  pathToLocales: null,
+
+  // Default locale if non could be negotiated.
+  defaultLocale: "en-US",
+
+  // Fallback locale if a translation was not found.
+  // If not set, will use the text that is already
+  // in the code base.
+  fallbackLocale: "",
+
+  // If set, restrict to this list of available locales.
+  availableLocales: null,
+
+  // Common fluent files are always included in the locale bundles.
+  commonFiles: [],
+
+  // Locales that come with the main bundle. Others are loaded on demand.
+  bundled: [],
+
+  // Target specifies the prefix for fluent files to be loaded. ${target}-xyz.ftl and ${†arget}.ftl are
+  // loaded into the locales.
+  target: "",
+};
+
+function getFiles(target, pathToLocale, context) {
+  const { commonFiles } = context;
+
+  const common = [];
+  const suffixes = [];
+
+  const files = fs.readdirSync(pathToLocale);
+
+  files.forEach(f => {
+    if (commonFiles.includes(f)) {
+      common.push(f);
+      return;
+    }
+    if (f.startsWith(target)) {
+      suffixes.push(f.substr(target.length));
+      return;
+    }
+  });
+
+  return { common, suffixes };
+}
+
+function generateTarget(target, context) {
+  const {
+    defaultLocale,
+    fallbackLocale,
+    pathToLocales,
+    resourcePath,
+    locales,
+    bundled,
+  } = context;
+  const getLocalePath = locale => path.join(pathToLocales, locale);
+  const getLocaleFiles = memoize(locale =>
+    getFiles(target, getLocalePath(locale), context)
+  );
+
+  const loadables = locales.filter(locale => !bundled.includes(locale));
+
+  return `
+    var ret = {
+      defaultLocale: ${JSON.stringify(defaultLocale)},
+      fallbackLocale: ${JSON.stringify(fallbackLocale)},
+      availableLocales: ${JSON.stringify(locales)},
+      bundled: {},
+      loadables: {},
+    };
+
+  // Bundled locales are directly available in the main bundle.
+  ${bundled
+    .map(
+      locale => `
+    {
+      var suffixes = ${JSON.stringify(getLocaleFiles(locale).suffixes)};
+      var contents = [];
+    ${getLocaleFiles(locale)
+      .common.map(
+        file => `
+      contents.push(require(${JSON.stringify(
+        path.join(getLocalePath(locale), file).replace(/\\/g, "/")
+      )}));
+    `
+      )
+      .join("\n")}
+      contents = contents.concat(suffixes.map(function(suffix) { return require(\`${path
+        .join(getLocalePath(locale), target)
+        .replace(/\\/g, "/")}\${suffix}\`); }));
+      ret.bundled[${JSON.stringify(locale)}] = contents.join("\\n");
+    }
+  `
+    )
+    .join("\n")}
+
+  // Loadables are in a separate bundle, that can be easily loaded.
+  ${loadables
+    .map(
+      locale => `
+    ret.loadables[${JSON.stringify(locale)}] = function() {
+      var suffixes = ${JSON.stringify(getLocaleFiles(locale).suffixes)};
+      var promises = [];
+    ${getLocaleFiles(locale)
+      .common.map(
+        file => `
+      promises.push(
+        import(
+          /* webpackChunkName: ${JSON.stringify(
+            `${target}-locale-${locale}`
+          )}, webpackMode: "lazy" */
+          ${JSON.stringify(
+            path.join(getLocalePath(locale), file).replace(/\\/g, "/")
+          )}
+        )
+      );
+    `
+      )
+      .join("\n")}
+      promises = promises.concat(suffixes.map(function(suffix) {
+        return import(
+          /* webpackChunkName: ${JSON.stringify(
+            `${target}-locale-${locale}`
+          )}, webpackMode: "lazy-once" */
+          \`${path
+            .join(getLocalePath(locale), target)
+            .replace(/\\/g, "/")}\${suffix}\`
+        )
+      }));
+      return Promise.all(promises).then(function(modules) {
+        return modules.map(function(m){return m.default}).join("\\n");
+      });
+    };
+  `
+    )
+    .join("\n")}
+    module.exports = ret;
+  `;
+}
+
+module.exports = function(source) {
+  const options = Object.assign(
+    {},
+    DEFAULT_QUERY_VALUES,
+    loaderUtils.getOptions(this)
+  );
+  const {
+    pathToLocales,
+    defaultLocale,
+    fallbackLocale,
+    availableLocales,
+    target,
+    bundled,
+    commonFiles,
+  } = options;
+
+  let locales = fs.readdirSync(pathToLocales);
+  if (availableLocales) {
+    availableLocales.forEach(locale => {
+      if (!locales.includes(locale)) {
+        throw new Error(`locale ${fallbackLocale} not available`);
+      }
+    });
+    locales = availableLocales;
+  }
+
+  if (fallbackLocale && !locales.includes(fallbackLocale)) {
+    throw new Error(
+      `fallbackLocale ${fallbackLocale} not in available locales`
+    );
+  }
+  if (!pathToLocales) {
+    throw new Error(`pathToLocales is required`);
+  }
+  if (!defaultLocale) {
+    throw new Error(`defaultLocale is required`);
+  }
+
+  if (!locales.includes(defaultLocale)) {
+    throw new Error(`defaultLocale ${defaultLocale} not in available locales`);
+  }
+
+  const context = {
+    // Use relative paths because it fails on Windows.
+    pathToLocales,
+    resourcePath: this.resourcePath,
+    defaultLocale,
+    fallbackLocale,
+    commonFiles,
+    locales,
+    bundled,
+  };
+
+  this.cacheable();
+  return generateTarget(target, context);
+};

src/core/build/paths.ts

@@ -0,0 +1,33 @@
+import fs from "fs";
+import path from "path";
+
+// Make sure any symlinks in the project folder are resolved:
+// https://github.com/facebookincubator/create-react-app/issues/637
+const appDirectory = fs.realpathSync(process.cwd());
+
+const resolveApp = (relativePath: string) =>
+  path.resolve(appDirectory, relativePath);
+
+const resolveSrc = (relativePath: string) =>
+  path.resolve(__dirname, "../../", relativePath);
+
+export default {
+  appPostCssConfig: resolveSrc("core/build/postcss.config.js"),
+  appLoaders: resolveSrc("core/build/loaders"),
+  appSrc: resolveSrc("."),
+  appTsconfig: resolveSrc("core/client/tsconfig.json"),
+  appPolyfill: resolveSrc("core/build/polyfills.js"),
+  appLocales: resolveSrc("locales"),
+  appThemeVariables: resolveSrc("core/client/ui/theme/variables.ts"),
+  appThemeVariablesCSS: resolveSrc("core/client/ui/theme/variables.css"),
+  appStreamHTML: resolveSrc("core/client/stream/index.html"),
+  appStreamLocalesTemplate: resolveSrc("core/client/stream/locales.ts"),
+  appStreamIndex: resolveSrc("core/client/stream/index.tsx"),
+  appEmbedIndex: resolveSrc("core/client/embed/index.ts"),
+  appEmbedHTML: resolveSrc("core/client/embed/index.html"),
+
+  appDistStatic: resolveApp("dist/static"),
+  appPublic: resolveApp("public"),
+  appPackageJson: resolveApp("package.json"),
+  appNodeModules: resolveApp("node_modules"),
+};

src/core/build/polyfills.js

@@ -0,0 +1 @@
+require("@babel/polyfill");

src/core/build/postcss.config.js

@@ -0,0 +1,78 @@
+const kebabCase = require("lodash/kebabCase");
+const mapKeys = require("lodash/mapKeys");
+const mapValues = require("lodash/mapValues");
+const pickBy = require("lodash/pickBy");
+const flat = require("flat");
+const paths = require("./paths").default;
+const autoprefixer = require("autoprefixer");
+const postcssFontMagician = require("postcss-font-magician");
+const postcssFlexbugsFixes = require("postcss-flexbugs-fixes");
+const postcssVariables = require("postcss-css-variables");
+const postcssPresetEnv = require("postcss-preset-env");
+const postcssNested = require("postcss-nested");
+const postcssImport = require("postcss-import");
+const postcssPrependImports = require("postcss-prepend-imports");
+const postcssAdvancedVariables = require("postcss-advanced-variables");
+
+delete require.cache[paths.appThemeVariables];
+const variables = require(paths.appThemeVariables).default;
+const flatKebabVariables = mapKeys(
+  mapValues(flat(variables, { delimiter: "-" }), v => v.toString()),
+  (_, k) => kebabCase(k)
+);
+
+// These are the default css standard variables.
+const cssVariables = pickBy(
+  flatKebabVariables,
+  (v, k) => !k.startsWith("breakpoints-")
+);
+
+// These are sass style variables used in media queries.
+const mediaQueryVariables = mapValues(
+  pickBy(flatKebabVariables, (v, k) => k.startsWith("breakpoints-")),
+  // Add unit to breakpoints.
+  // Add 1 to support mobile first approach where we start
+  // with the smallest screen and gradually add styling for the
+  // next bigger screen. This is realized using `min-width` without
+  // ever using `max-width`.
+  v => `${Number.parseInt(v) + 1}px`
+);
+
+module.exports = {
+  // Necessary for external CSS imports to work
+  // https://github.com/facebookincubator/create-react-app/issues/2677
+  ident: "postcss",
+  plugins: [
+    // This allows us to define dynamic css variables.
+    postcssPrependImports({
+      path: "",
+      files: [paths.appThemeVariablesCSS],
+    }),
+    // Needed by above plugin.
+    postcssImport(),
+    // Support nesting.
+    postcssNested(),
+    // Sass style variables to be used in media queries.
+    postcssAdvancedVariables({ variables: mediaQueryVariables }),
+    // CSS standard variables for everything else.
+    postcssVariables({
+      variables: cssVariables,
+    }),
+    // Provides a modern CSS environment.
+    postcssPresetEnv(),
+    // Does all the font handling logic.
+    postcssFontMagician(),
+    // Fix known flexbox bugs.
+    postcssFlexbugsFixes,
+    // Vendor prefixing.
+    autoprefixer({
+      browsers: [
+        ">1%",
+        "last 4 versions",
+        "Firefox ESR",
+        "not ie < 9", // React doesn't support IE8 anyway
+      ],
+      flexbox: "no-2009",
+    }),
+  ],
+};

src/core/client/embed/PymControl.spec.ts

@@ -0,0 +1,55 @@
+import sinon from "sinon";
+
+import { Decorator } from "./decorators";
+import PymControl from "./PymControl";
+
+describe("PymControl", () => {
+  const container: HTMLElement = document.createElement("div");
+  const cleanupDecorator = sinon.mock().once();
+
+  const withMockDecorator: Decorator = sinon
+    .mock()
+    .once()
+    .withArgs(sinon.match.object)
+    .returns(cleanupDecorator);
+
+  let control: PymControl;
+  beforeAll(() => {
+    container.id = "pymcontrol-test-id";
+    document.body.appendChild(container);
+  });
+  afterAll(() => {
+    document.body.removeChild(container);
+  });
+  it("should create iframe", () => {
+    control = new PymControl({
+      decorators: [withMockDecorator],
+      id: container.id,
+      url: "http://coralproject.net",
+      title: "iFrame title",
+    });
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+  it("should send message", done => {
+    const messages: MessageEvent[] = [];
+    const messageRecorder = (e: MessageEvent) => messages.push(e);
+    const contentWindow = (container.firstChild as HTMLIFrameElement)
+      .contentWindow!;
+    contentWindow.addEventListener("message", messageRecorder, false);
+    control.sendMessage("test", "hello world");
+
+    setTimeout(() => {
+      contentWindow.removeEventListener("message", messageRecorder, false);
+      expect(messages).toHaveLength(1);
+      expect(messages[0].data).toMatchSnapshot();
+      done();
+    });
+  });
+  it("should remove iframe", () => {
+    control.remove();
+    expect(container.innerHTML).toBe("");
+  });
+  it("should cleanup decorators", () => {
+    cleanupDecorator.verify();
+  });
+});

src/core/client/embed/PymControl.ts

@@ -0,0 +1,41 @@
+import pym from "pym.js";
+
+import { CleanupCallback, Decorator } from "./decorators";
+
+interface PymControlConfig {
+  id: string;
+  url: string;
+  title: string;
+  decorators?: ReadonlyArray<Decorator>;
+}
+
+export default class PymControl {
+  private pym: pym.Parent;
+  private cleanups: CleanupCallback[];
+
+  constructor(config: PymControlConfig) {
+    const decorators = config.decorators || [];
+
+    this.pym = new pym.Parent(config.id, config.url, {
+      title: config.title,
+      id: `${config.id}_iframe`,
+      name: `${config.id}_iframe`,
+    });
+
+    this.cleanups = decorators
+      .map(enhance => enhance(this.pym))
+      .filter(cb => cb) as CleanupCallback[];
+  }
+
+  public sendMessage(id: string, raw?: string) {
+    this.pym.sendMessage(id, raw || "");
+  }
+
+  public remove() {
+    this.cleanups.forEach(cb => cb());
+    this.cleanups = [];
+
+    // Remove the pym parent.
+    this.pym.remove();
+  }
+}

src/core/client/embed/Stream.spec.ts

@@ -0,0 +1,70 @@
+import sinon from "sinon";
+
+import { createStreamInterface } from "./Stream";
+
+it("should call eventEmitter.on", () => {
+  const control = {};
+  const cb = () => "";
+  const eventEmitter = {
+    on: sinon
+      .mock()
+      .once()
+      .withArgs("eventName", cb),
+  };
+  const stream = createStreamInterface(control as any, eventEmitter as any);
+  stream.on("eventName", cb);
+  eventEmitter.on.verify();
+});
+
+it("should call eventEmitter.off", () => {
+  const control = {};
+  const cb = () => "";
+  const eventEmitter = {
+    off: sinon
+      .mock()
+      .once()
+      .withArgs("eventName", cb),
+  };
+  const stream = createStreamInterface(control as any, eventEmitter as any);
+  stream.off("eventName", cb);
+  eventEmitter.off.verify();
+});
+
+it("should call control.login", () => {
+  const control = {
+    sendMessage: sinon
+      .mock()
+      .once()
+      .withArgs("login", "token"),
+  };
+  const eventEmitter = {};
+  const stream = createStreamInterface(control as any, eventEmitter as any);
+  stream.login("token");
+  control.sendMessage.verify();
+});
+
+it("should call control.logout", () => {
+  const control = {
+    sendMessage: sinon
+      .mock()
+      .once()
+      .withArgs("logout"),
+  };
+  const eventEmitter = {};
+  const stream = createStreamInterface(control as any, eventEmitter as any);
+  stream.logout();
+  control.sendMessage.verify();
+});
+
+it("should call control.remove", () => {
+  const control = {
+    remove: sinon
+      .mock()
+      .once()
+      .withArgs(),
+  };
+  const eventEmitter = {};
+  const stream = createStreamInterface(control as any, eventEmitter as any);
+  stream.remove();
+  control.remove.verify();
+});

src/core/client/embed/Stream.ts

@@ -0,0 +1,83 @@
+import { EventEmitter2 } from "eventemitter2";
+import qs from "query-string";
+
+import {
+  Decorator,
+  withAutoHeight,
+  withClickEvent,
+  withCommentID,
+  withEventEmitter,
+  withIOSSafariWidthWorkaround,
+} from "./decorators";
+import PymControl from "./PymControl";
+import { ensureEndSlash } from "./utils";
+
+interface CreatePymControlConfig {
+  assetID?: string;
+  assetURL?: string;
+  title?: string;
+  eventEmitter: EventEmitter2;
+  id: string;
+  rootURL: string;
+}
+
+export function createPymControl(config: CreatePymControlConfig) {
+  const streamDecorators: ReadonlyArray<Decorator> = [
+    withIOSSafariWidthWorkaround,
+    withAutoHeight,
+    withClickEvent,
+    withCommentID,
+    withEventEmitter(config.eventEmitter),
+  ];
+
+  const query = qs.stringify({
+    assetID: config.assetID,
+    assetURL: config.assetURL,
+  });
+  const url = `${ensureEndSlash(config.rootURL)}stream.html?${query}`;
+  return new PymControl({
+    id: config.id,
+    title: config.title || "Talk Embed Stream",
+    decorators: streamDecorators,
+    url,
+  });
+}
+
+type EventCallback = (data: any) => void;
+
+export function createStreamInterface(
+  control: PymControl,
+  eventEmitter: EventEmitter2
+) {
+  return {
+    on(eventName: string, callback: EventCallback) {
+      return eventEmitter.on(eventName, callback);
+    },
+    off(eventName: string, callback: EventCallback) {
+      return eventEmitter.off(eventName, callback);
+    },
+    login(token: string) {
+      control.sendMessage("login", token);
+    },
+    logout() {
+      control.sendMessage("logout");
+    },
+    remove() {
+      return control.remove();
+    },
+  };
+}
+
+export type StreamInterface = ReturnType<typeof createStreamInterface>;
+
+export interface CreateConfig {
+  assetID?: string;
+  assetURL?: string;
+  title?: string;
+  eventEmitter: EventEmitter2;
+  id: string;
+  rootURL: string;
+}
+export default function create(config: CreateConfig) {
+  return createStreamInterface(createPymControl(config), config.eventEmitter);
+}

src/core/client/embed/__snapshots__/PymControl.spec.ts.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PymControl should create iframe 1`] = `"<iframe src=\\"http://coralproject.net/?initialWidth=0&amp;childId=pymcontrol-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"iFrame title\\" id=\\"pymcontrol-test-id_iframe\\" name=\\"pymcontrol-test-id_iframe\\"></iframe>"`;
+
+exports[`PymControl should send message 1`] = `"pymxPYMxpymcontrol-test-idxPYMxtestxPYMxhello world"`;

src/core/client/embed/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic integration test should render iframe 1`] = `"<iframe src=\\"http://localhost/stream.html?&amp;initialWidth=0&amp;childId=basic-integration-test-id&amp;parentTitle=&amp;parentUrl=http%3A%2F%2Flocalhost%2F\\" width=\\"100%\\" scrolling=\\"no\\" marginheight=\\"0\\" frameborder=\\"0\\" title=\\"Talk Embed Stream\\" id=\\"basic-integration-test-id_iframe\\" name=\\"basic-integration-test-id_iframe\\" style=\\"width: 1px; min-width: 100%;\\"></iframe>"`;

src/core/client/embed/decorators/index.ts

@@ -0,0 +1,11 @@
+import pym from "pym.js";
+
+export type CleanupCallback = () => void;
+export type Decorator = (pym: pym.Parent) => CleanupCallback | void;
+export { default as withAutoHeight } from "./withAutoHeight";
+export { default as withClickEvent } from "./withClickEvent";
+export { default as withCommentID } from "./withCommentID";
+export { default as withEventEmitter } from "./withEventEmitter";
+export {
+  default as withIOSSafariWidthWorkaround,
+} from "./withIOSSafariWidthWorkaround";

src/core/client/embed/decorators/withAutoHeight.spec.ts

@@ -0,0 +1,16 @@
+import withAutoHeight from "./withAutoHeight";
+
+it("should set height", () => {
+  const fakePym = {
+    onMessage: (type: string, callback: (height: string) => void) => {
+      expect(type).toBe("height");
+      callback("100");
+    },
+    el: document.createElement("div"),
+  };
+  fakePym.el.innerHTML = "<span>Hello World </span>";
+  withAutoHeight(fakePym as any);
+  expect(fakePym.el.innerHTML).toBe(
+    '<span style="height: 100px;">Hello World </span>'
+  );
+});

src/core/client/embed/decorators/withAutoHeight.ts

@@ -0,0 +1,14 @@
+import { Decorator } from "./";
+
+const withAutoHeight: Decorator = pym => {
+  // Resize parent iframe height when child height changes
+  let cachedHeight: string;
+  pym.onMessage("height", (height: string) => {
+    if (height !== cachedHeight) {
+      (pym.el.firstChild! as HTMLElement).style.height = `${height}px`;
+      cachedHeight = height;
+    }
+  });
+};
+
+export default withAutoHeight;

src/core/client/embed/decorators/withClickEvent.spec.ts

@@ -0,0 +1,19 @@
+import simulant from "simulant";
+import sinon from "sinon";
+
+import { CleanupCallback } from ".";
+import withClickEvent from "./withClickEvent";
+
+it("should send click events", () => {
+  const pymMock = {
+    sendMessage: sinon
+      .mock()
+      .once()
+      .withArgs("click", ""),
+  };
+  const cleanup = withClickEvent(pymMock as any) as CleanupCallback;
+  simulant.fire(document.body, "click");
+  cleanup();
+  simulant.fire(document.body, "click");
+  pymMock.sendMessage.verify();
+});

src/core/client/embed/decorators/withClickEvent.ts

@@ -0,0 +1,16 @@
+import { Decorator } from "./";
+
+const withClickEvent: Decorator = pym => {
+  const handleClick = () => pym.sendMessage("click", "");
+
+  // If the user clicks outside the embed, then tell the embed.
+  document.addEventListener("click", handleClick, true);
+
+  // Return cleanup callback.
+  return () => {
+    // Remove the event listeners.
+    document.removeEventListener("click", handleClick, true);
+  };
+};
+
+export default withClickEvent;

src/core/client/embed/decorators/withCommentID.spec.ts

@@ -0,0 +1,36 @@
+import withCommentID from "./withCommentID";
+
+it("should add commentID", () => {
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  const fakePym = {
+    onMessage: (type: string, callback: (id: string) => void) => {
+      if (type === "view-comment") {
+        callback("comment-id");
+      }
+    },
+  };
+  withCommentID(fakePym as any);
+  expect(location.toString()).toBe("http://localhost/?commentId=comment-id");
+  window.history.replaceState(previousState, document.title, previousLocation);
+});
+
+it("should remove commentID", () => {
+  const previousLocation = location.toString();
+  const previousState = window.history.state;
+  window.history.replaceState(
+    previousState,
+    document.title,
+    "http://localhost/?commentId=comment-id"
+  );
+  const fakePym = {
+    onMessage: (type: string, callback: () => void) => {
+      if (type === "view-all-comments") {
+        callback();
+      }
+    },
+  };
+  withCommentID(fakePym as any);
+  expect(location.toString()).toBe("http://localhost/");
+  window.history.replaceState(previousState, document.title, previousLocation);
+});

src/core/client/embed/decorators/withCommentID.ts

@@ -0,0 +1,36 @@
+import qs from "query-string";
+
+import { buildURL } from "../utils";
+import { Decorator } from "./";
+
+const withCommentID: Decorator = pym => {
+  // Remove the comment id from the query.
+  pym.onMessage("view-all-comments", () => {
+    const search = qs.stringify({
+      ...qs.parse(location.search),
+      commentId: undefined,
+    });
+
+    // Remove the commentId url param.
+    const url = buildURL({ search });
+
+    // Change the url.
+    window.history.replaceState({}, document.title, url);
+  });
+
+  // Add the permalink comment id to the query.
+  pym.onMessage("view-comment", (id: string) => {
+    const search = qs.stringify({
+      ...qs.parse(location.search),
+      commentId: id,
+    });
+
+    // Remove the commentId url param.
+    const url = buildURL({ search });
+
+    // Change the url.
+    window.history.replaceState({}, document.title, url);
+  });
+};
+
+export default withCommentID;

src/core/client/embed/decorators/withEventEmitter.spec.ts

@@ -0,0 +1,21 @@
+import sinon from "sinon";
+
+import withEventEmitter from "./withEventEmitter";
+
+it("should emit events from pym to eventEmitter", () => {
+  const eventEmitterMock = {
+    emit: sinon
+      .mock()
+      .once()
+      .withArgs("eventName", "value"),
+  };
+  const fakePym = {
+    onMessage: (type: string, callback: (raw: string) => void) => {
+      expect(type).toBe("event");
+      callback(JSON.stringify({ eventName: "eventName", value: "value" }));
+    },
+    el: document.createElement("div"),
+  };
+  withEventEmitter(eventEmitterMock as any)(fakePym as any);
+  eventEmitterMock.emit.verify();
+});

src/core/client/embed/decorators/withEventEmitter.ts

@@ -0,0 +1,13 @@
+import { EventEmitter2 } from "eventemitter2";
+
+import { Decorator } from "./";
+
+const withEventEmitter = (eventEmitter: EventEmitter2): Decorator => pym => {
+  // Pass events from iframe to the event emitter.
+  pym.onMessage("event", (raw: string) => {
+    const { eventName, value } = JSON.parse(raw);
+    eventEmitter.emit(eventName, value);
+  });
+};
+
+export default withEventEmitter;

src/core/client/embed/decorators/withIOSSafariWidthWorkaround.spec.ts

@@ -0,0 +1,12 @@
+import withIOSSafariWidthWorkaround from "./withIOSSafariWidthWorkaround";
+
+it("should set width workaround", () => {
+  const fakePym = {
+    el: document.createElement("div"),
+  };
+  fakePym.el.innerHTML = "<span>Hello World</span>";
+  withIOSSafariWidthWorkaround(fakePym as any);
+  expect(fakePym.el.innerHTML).toBe(
+    '<span style="width: 1px; min-width: 100%;">Hello World</span>'
+  );
+});

src/core/client/embed/decorators/withIOSSafariWidthWorkaround.ts

@@ -0,0 +1,9 @@
+import { Decorator } from "./";
+
+const withIOSSafariWidthWorkaround: Decorator = pym => {
+  // Workaround: IOS Safari ignores `width` but respects `min-width` value.
+  (pym.el.firstChild! as HTMLElement).style.width = "1px";
+  (pym.el.firstChild! as HTMLElement).style.minWidth = "100%";
+};
+
+export default withIOSSafariWidthWorkaround;

src/core/client/embed/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>Talk 5.0 – Embed Stream</title>
+  <meta charset="utf-8">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width, user-scalable=no">
+</head>
+
+<body>
+  <h1 style="text-align: center" }>Talk 5.0 – Embed Stream</h1>
+  <div id="coralStreamEmbed"></div>
+  <script>
+    window.TalkEmbed = Talk.render(document.getElementById('coralStreamEmbed'));
+  </script>
+</body>
+
+</html>

src/core/client/embed/index.spec.ts

@@ -0,0 +1,23 @@
+import * as Talk from "./";
+
+describe("Basic integration test", () => {
+  const container: HTMLElement = document.createElement("div");
+  let streamInterface: ReturnType<typeof Talk.render>;
+  beforeAll(() => {
+    container.id = "basic-integration-test-id";
+    document.body.appendChild(container);
+  });
+  afterAll(() => {
+    document.body.removeChild(container);
+  });
+  it("should render iframe", () => {
+    streamInterface = Talk.render({
+      id: "basic-integration-test-id",
+    });
+    expect(container.innerHTML).toMatchSnapshot();
+  });
+  it("should remove iframe", () => {
+    streamInterface.remove();
+    expect(container.innerHTML).toBe("");
+  });
+});

src/core/client/embed/index.ts

@@ -0,0 +1,30 @@
+import { EventEmitter2 } from "eventemitter2";
+import qs from "query-string";
+
+import createStreamInterface from "./Stream";
+
+export interface Config {
+  assetID?: string;
+  assetURL?: string;
+  rootURL?: string;
+  id?: string;
+  events?: (eventEmitter: EventEmitter2) => void;
+}
+
+export function render(config: Config = {}) {
+  // Parse query params
+  const query = qs.parse(location.search);
+  const eventEmitter = new EventEmitter2({ wildcard: true });
+
+  if (config.events) {
+    config.events(eventEmitter);
+  }
+
+  return createStreamInterface({
+    assetID: config.assetID || query.assetID,
+    assetURL: config.assetURL || query.assetURL,
+    id: config.id || "talk-embed-stream",
+    rootURL: config.rootURL || location.origin,
+    eventEmitter,
+  });
+}

src/core/client/embed/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "lib": ["dom", "es5"],
+    "types": ["jest"],
+    "paths": {}
+  },
+  "include": [
+    "./**/*",
+    "../../../types/pym.d.ts",
+    "../../../types/simulant.d.ts"
+  ],
+  "exclude": ["node_modules"]
+}

src/core/client/embed/utils/buildURL.spec.ts

@@ -0,0 +1,18 @@
+import buildURL from "./buildURL";
+
+it("should default to window.location", () => {
+  const url = buildURL();
+  expect(url).toBe("http://localhost/");
+});
+
+it("should build from parameters", () => {
+  const url = buildURL({
+    protocol: "https",
+    hostname: "hostname",
+    port: "8080",
+    pathname: "/pathname",
+    search: "search",
+    hash: "#hash",
+  });
+  expect(url).toBe("https//hostname:8080/pathname?search#hash");
+});

src/core/client/embed/utils/buildURL.ts

@@ -0,0 +1,17 @@
+export default function buildURL({
+  protocol = window.location.protocol,
+  hostname = window.location.hostname,
+  port = window.location.port,
+  pathname = window.location.pathname,
+  search = window.location.search,
+  hash = window.location.hash,
+} = {}) {
+  if (search && search[0] !== "?") {
+    search = `?${search}`;
+  } else if (search === "?") {
+    search = "";
+  }
+  return `${protocol}//${hostname}${
+    port ? `:${port}` : ""
+  }${pathname}${search}${hash}`;
+}

src/core/client/embed/utils/ensureEndSlash.spec.ts

@@ -0,0 +1,11 @@
+import ensureEndSlash from "./ensureEndSlash";
+
+it("should add slash to the end", () => {
+  const path = ensureEndSlash("/test");
+  expect(path).toBe("/test/");
+});
+
+it("should not add slash to the end if it's already there", () => {
+  const path = ensureEndSlash("/test/");
+  expect(path).toBe("/test/");
+});

src/core/client/embed/utils/ensureEndSlash.ts

@@ -0,0 +1,3 @@
+export default function ensureEndSlash(p: string) {
+  return p.match(/\/$/) ? p : `${p}/`;
+}

src/core/client/embed/utils/index.ts

@@ -0,0 +1,2 @@
+export { default as buildURL } from "./buildURL";
+export { default as ensureEndSlash } from "./ensureEndSlash";

src/core/client/framework/lib/bootstrap/TalkContext.tsx

@@ -1,19 +1,31 @@
 import { LocalizationProvider } from "fluent-react/compat";
 import { MessageContext } from "fluent/compat";
+import { Child as PymChild } from "pym.js";
 import React, { StatelessComponent } from "react";
 import { Formatter } from "react-timeago";
 import { Environment } from "relay-runtime";
+
 import { UIContext } from "talk-ui/components";
+import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
 
 export interface TalkContext {
-  // relayEnvironment for our relay framework.
+  /** relayEnvironment for our relay framework. */
   relayEnvironment: Environment;
 
-  // localMessages for our i18n framework.
+  /** localMessages for our i18n framework. */
   localeMessages: MessageContext[];
 
-  // formatter for timeago.
+  /** formatter for timeago. */
   timeagoFormatter?: Formatter;
+
+  /**
+   * A way to listen for clicks that are e.g. outside of the
+   * current frame for `ClickOutside`
+   */
+  registerClickFarAway?: ClickFarAwayRegister;
+
+  /** A pym child that interacts with the pym parent. */
+  pym?: PymChild;
 }
 
 const { Provider, Consumer } = React.createContext<TalkContext>({} as any);
@@ -32,7 +44,12 @@ export const TalkContextProvider: StatelessComponent<{
 }> = ({ value, children }) => (
   <Provider value={value}>
     <LocalizationProvider messages={value.localeMessages}>
-      <UIContext.Provider value={{ timeagoFormatter: value.timeagoFormatter }}>
+      <UIContext.Provider
+        value={{
+          timeagoFormatter: value.timeagoFormatter,
+          registerClickFarAway: value.registerClickFarAway,
+        }}
+      >
         {children}
       </UIContext.Provider>
     </LocalizationProvider>

src/core/client/framework/lib/bootstrap/createContext.tsx

@@ -1,22 +1,32 @@
+import { EventEmitter2 } from "eventemitter2";
 import { Localized } from "fluent-react/compat";
 import { noop } from "lodash";
+import { Child as PymChild } from "pym.js";
 import React from "react";
 import { Formatter } from "react-timeago";
 import { Environment, Network, RecordSource, Store } from "relay-runtime";
 
+import { ClickFarAwayRegister } from "talk-ui/components/ClickOutside";
+
 import { generateMessages, LocalesData, negotiateLanguages } from "../i18n";
 import { fetchQuery } from "../network";
 import { TalkContext } from "./TalkContext";
 
 interface CreateContextArguments {
-  // Locales that the user accepts, usually `navigator.languages`.
+  /** Locales that the user accepts, usually `navigator.languages`. */
   userLocales: ReadonlyArray<string>;
 
-  // Locales data that is returned by our `locales-loader`.
+  /** Locales data that is returned by our `locales-loader`. */
   localesData: LocalesData;
 
-  // Init will be called after the context has been created.
+  /** Init will be called after the context has been created. */
   init?: ((context: TalkContext) => void | Promise<void>);
+
+  /** A pym child that interacts with the pym parent. */
+  pym?: PymChild;
+
+  /** Supports emitting and listening to events. */
+  eventEmitter?: EventEmitter2;
 }
 
 /**
@@ -47,6 +57,8 @@ export default async function createContext({
   init = noop,
   userLocales,
   localesData,
+  pym,
+  eventEmitter = new EventEmitter2({ wildcard: true }),
 }: CreateContextArguments): Promise<TalkContext> {
   // Initialize Relay.
   const relayEnvironment = new Environment({
@@ -54,6 +66,21 @@ export default async function createContext({
     store: new Store(new RecordSource()),
   });
 
+  // Listen for outside clicks.
+  let registerClickFarAway: ClickFarAwayRegister | undefined;
+  if (pym) {
+    registerClickFarAway = cb => {
+      pym.onMessage("click", cb);
+      // Return unlisten callback.
+      return () => {
+        const index = pym.messageHandlers.click.indexOf(cb);
+        if (index > -1) {
+          pym.messageHandlers.click.splice(index, 1);
+        }
+      };
+    };
+  }
+
   // Initialize i18n.
   const locales = negotiateLanguages(userLocales, localesData);
 
@@ -69,6 +96,9 @@ export default async function createContext({
     relayEnvironment,
     localeMessages,
     timeagoFormatter,
+    pym,
+    eventEmitter,
+    registerClickFarAway,
   };
 
   // Run custom initializations.

src/core/client/stream/index.html

@@ -1,15 +1,15 @@
 <!DOCTYPE html>
-<html prefix="og: http://ogp.me/ns#">
+<html>
 
 <head>
-  <title>Relay Experiments</title>
+  <title>Talk - Stream</title>
   <meta charset="utf-8">
   <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
   <meta name="viewport" content="width=device-width, user-scalable=no">
 </head>
 
 <body>
-  <div id="app" aria-role="application" onclick="void(0)"></div>
+  <div id="app"></div>
 </body>
 
 </html>

src/core/client/stream/index.tsx

@@ -1,3 +1,4 @@
+import pym from "pym.js";
 import React from "react";
 import { StatelessComponent } from "react";
 import ReactDOM from "react-dom";
@@ -23,6 +24,7 @@ async function main() {
     init,
     localesData,
     userLocales: navigator.languages,
+    pym: new pym.Child({ polling: 100 }),
   });
 
   const Index: StatelessComponent = () => (

src/core/client/tsconfig.json

@@ -16,5 +16,5 @@
     }
   },
   "include": ["./**/*", "../../types/**/*.d.ts"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "./embed"]
 }

src/core/client/ui/components/ClickOutside/ClickOutside.spec.tsx

@@ -3,7 +3,14 @@ import React from "react";
 import simulant from "simulant";
 import sinon from "sinon";
 
-import ClickOutside from "./ClickOutside";
+import UIContext from "../UIContext";
+
+import {
+  ClickFarAwayCallback,
+  ClickFarAwayRegister,
+  ClickOutside,
+  default as ClickOutsideWithContext,
+} from "./ClickOutside";
 
 let container: HTMLElement;
 
@@ -60,3 +67,57 @@ it("should ignore click inside", () => {
   expect(onClickOutside.calledOnce).toEqual(false);
   wrapper.unmount();
 });
+
+it("should detect click far away", () => {
+  let emitFarAwayClick: ClickFarAwayCallback = Function;
+  const unlisten = sinon.spy();
+  const registerClickFarAway: ClickFarAwayRegister = cb => {
+    emitFarAwayClick = cb;
+    return unlisten;
+  };
+  const onClickOutside = sinon.spy();
+  const wrapper = mount(
+    <ClickOutside
+      onClickOutside={onClickOutside}
+      registerClickFarAway={registerClickFarAway}
+    >
+      <button id="click-outside-test-button">Push Me</button>
+    </ClickOutside>,
+    {
+      attachTo: container,
+    }
+  );
+
+  expect(onClickOutside.calledOnce).toEqual(false);
+  emitFarAwayClick();
+  expect(onClickOutside.calledOnce).toEqual(true);
+  expect(unlisten.calledOnce).toEqual(false);
+  wrapper.unmount();
+  expect(unlisten.calledOnce).toEqual(true);
+});
+
+it("should get registerClickFarAway from context", () => {
+  const registerClickFarAway: ClickFarAwayRegister = sinon.spy();
+  const onClickOutside = sinon.spy();
+  const context: any = {
+    registerClickFarAway,
+  };
+  const wrapper = mount(
+    <UIContext.Provider value={context}>
+      <ClickOutsideWithContext
+        onClickOutside={onClickOutside}
+        registerClickFarAway={registerClickFarAway}
+      >
+        <button id="click-outside-test-button">Push Me</button>
+      </ClickOutsideWithContext>
+    </UIContext.Provider>,
+    {
+      attachTo: container,
+    }
+  );
+
+  expect(wrapper.find(ClickOutside).prop("registerClickFarAway")).toEqual(
+    registerClickFarAway
+  );
+  wrapper.unmount();
+});

src/core/client/ui/components/ClickOutside/ClickOutside.tsx

@@ -1,13 +1,30 @@
-import React from "react";
+import React, { StatelessComponent } from "react";
 import { findDOMNode } from "react-dom";
 
+import UIContext from "../UIContext";
+
+export type ClickFarAwayCallback = () => void;
+export type ClickFarAwayUnlistenCallback = () => void;
+
+export type ClickFarAwayRegister = (
+  callback: ClickFarAwayCallback
+) => ClickFarAwayUnlistenCallback;
+
 export interface ClickOutsideProps {
   onClickOutside: (e?: MouseEvent) => void;
+
+  /**
+   * A way to listen for clicks that are e.g. outside of the
+   * current frame for `ClickOutside`
+   */
+  registerClickFarAway?: ClickFarAwayRegister;
+
   children: React.ReactNode;
 }
 
-class ClickOutside extends React.Component<ClickOutsideProps> {
+export class ClickOutside extends React.Component<ClickOutsideProps> {
   public domNode: Element | null = null;
+  private unlisten?: ClickFarAwayUnlistenCallback;
 
   public handleClick = (e: MouseEvent) => {
     const { onClickOutside } = this.props;
@@ -17,13 +34,30 @@ class ClickOutside extends React.Component<ClickOutsideProps> {
     }
   };
 
+  public handleClickFarAway = () => {
+    const { onClickOutside } = this.props;
+    // tslint:disable-next-line:no-unused-expression
+    onClickOutside && onClickOutside();
+  };
+
   public componentDidMount() {
     this.domNode = findDOMNode(this) as Element;
     document.addEventListener("click", this.handleClick, true);
+
+    // Listen to far away clicks.
+    if (this.props.registerClickFarAway) {
+      this.unlisten = this.props.registerClickFarAway(this.handleClickFarAway);
+    }
   }
 
   public componentWillUnmount() {
     document.removeEventListener("click", this.handleClick, true);
+
+    // Unlisten to far away clicks.
+    if (this.unlisten) {
+      this.unlisten();
+      this.unlisten = undefined;
+    }
   }
 
   public render() {
@@ -31,4 +65,12 @@ class ClickOutside extends React.Component<ClickOutsideProps> {
   }
 }
 
-export default ClickOutside;
+const ClickOutsideWithContext: StatelessComponent<Props> = props => (
+  <UIContext.Consumer>
+    {({ registerClickFarAway }) => (
+      <ClickOutside {...props} registerClickFarAway={registerClickFarAway} />
+    )}
+  </UIContext.Consumer>
+);
+
+export default ClickOutsideWithContext;

src/core/client/ui/components/ClickOutside/index.ts

@@ -1 +1 @@
-export { default } from "./ClickOutside";
+export { default as ClickOutside, ClickFarAwayRegister } from "./ClickOutside";

src/core/client/ui/components/MatchMedia/MatchMedia.spec.tsx

@@ -1,9 +1,11 @@
-import { shallow } from "enzyme";
+import { mount, shallow } from "enzyme";
 import React from "react";
+import { MediaQueryMatchers } from "react-responsive";
 
 import { PropTypesOf } from "talk-ui/types";
 
-import { MatchMedia } from "./MatchMedia";
+import UIContext from "../UIContext";
+import { default as MatchMediaWithContext, MatchMedia } from "./MatchMedia";
 
 it("renders correctly", () => {
   const props: PropTypesOf<typeof MatchMedia> = {
@@ -25,3 +27,20 @@ it("map new speech prop to older aural prop", () => {
   const wrapper = shallow(<MatchMedia {...props} />);
   expect(wrapper).toMatchSnapshot();
 });
+
+it("should get mediaQueryValues from context", () => {
+  const mediaQueryValues: Partial<MediaQueryMatchers> = {
+    width: 100,
+  };
+  const context: any = {
+    mediaQueryValues,
+  };
+  const wrapper = mount(
+    <UIContext.Provider value={context}>
+      <MatchMediaWithContext maxWidth="xs">
+        <span>Hello World</span>
+      </MatchMediaWithContext>
+    </UIContext.Provider>
+  );
+  expect(wrapper.find(MatchMedia).prop("values")).toEqual(mediaQueryValues);
+});

src/core/client/ui/components/UIContext/UIContext.ts

@@ -2,9 +2,18 @@ import React from "react";
 import { MediaQueryMatchers } from "react-responsive";
 import { Formatter } from "react-timeago";
 
+import { ClickFarAwayRegister } from "../ClickOutside";
+
 export interface UIContextProps {
+  /** Allows to integrate translated strings into `RelativeTime` Component */
   timeagoFormatter?: Formatter | null;
+  /** Allows testing `MatchMedia` by setting media query values */
   mediaQueryValues?: Partial<MediaQueryMatchers>;
+  /**
+   * A way to listen for clicks that are e.g. outside of the
+   * current frame for `ClickOutside`
+   */
+  registerClickFarAway?: ClickFarAwayRegister;
 }
 
 const UIContext = React.createContext<UIContextProps>({} as any);

src/core/common/config.ts

@@ -90,5 +90,9 @@ const config = convict({
 
 export type Config = typeof config;
 
+export const createClientEnv = (c: Config) => ({
+  NODE_ENV: c.get("env"),
+});
+
 // Setup the base configuration.
 export default config;

src/core/common/types.ts

@@ -11,3 +11,5 @@ export type Sub<T, U> = Pick<T, Diff<keyof T, keyof U>>;
  * Make all properties in T writeable
  */
 export type Writeable<T> = { -readonly [P in keyof T]: T[P] };
+
+export type Promiseable<T> = Promise<T> | T;

src/core/server/app/index.ts

@@ -3,12 +3,13 @@ import http from "http";
 import { Redis } from "ioredis";
 import { Db } from "mongodb";
 
+import { Config } from "talk-common/config";
 import { notFoundMiddleware } from "talk-server/app/middleware/notFound";
 import { createPassport } from "talk-server/app/middleware/passport";
 import { JWTSigningConfig } from "talk-server/app/middleware/passport/jwt";
-import { Config } from "talk-server/config";
 import { handleSubscriptions } from "talk-server/graph/common/subscriptions/middleware";
 import { Schemas } from "talk-server/graph/schemas";
+import TenantCache from "talk-server/services/tenant/cache";
 
 import { accessLogger, errorLogger } from "./middleware/logging";
 import serveStatic from "./middleware/serveStatic";
@@ -21,6 +22,7 @@ export interface AppOptions {
   redis: Redis;
   schemas: Schemas;
   signingConfig: JWTSigningConfig;
+  tenantCache: TenantCache;
 }
 
 /**
@@ -34,10 +36,7 @@ export async function createApp(options: AppOptions): Promise<Express> {
   parent.use(accessLogger);
 
   // Create some services for the router.
-  const passport = createPassport({
-    db: options.mongo,
-    signingConfig: options.signingConfig,
-  });
+  const passport = createPassport(options);
 
   // Mount the router.
   parent.use(
@@ -76,7 +75,7 @@ export const listenAndServe = (
  * handle websocket traffic by upgrading their http connections to websocket.
  *
  * @param schemas schemas for every schema this application handles
- * @param server the http.Server to attach the websocket upgraders to
+ * @param server the http.Server to attach the websocket upgrader to
  */
 export async function attachSubscriptionHandlers(
   schemas: Schemas,

src/core/server/app/middleware/passport/__snapshots__/jwt.spec.ts.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`createJWTSigningConfig parses a RSA certiciate 1`] = `
+exports[`createJWTSigningConfig parses a RSA certificate 1`] = `
 "-----BEGIN RSA PRIVATE KEY-----
 MIIEpQIBAAKCAQEAyxR2DVlvkQRquggUQTpHN+PxDs2iOiItGgn6u4+faUCdgGEV
 EnmG69//3lAZHnEQN9rkZS3/20zc41mTJnO7dslJbB316vWUSIwYcVY/VC9DTbk+

src/core/server/app/middleware/passport/index.ts

@@ -12,6 +12,7 @@ import { createLocalStrategy } from "talk-server/app/middleware/passport/local";
 import { createOIDCStrategy } from "talk-server/app/middleware/passport/oidc";
 import { createSSOStrategy } from "talk-server/app/middleware/passport/sso";
 import { User } from "talk-server/models/user";
+import TenantCache from "talk-server/services/tenant/cache";
 import { Request } from "talk-server/types/express";
 
 export type VerifyCallback = (
@@ -21,28 +22,28 @@ export type VerifyCallback = (
 ) => void;
 
 export interface PassportOptions {
-  db: Db;
+  mongo: Db;
   signingConfig: JWTSigningConfig;
+  tenantCache: TenantCache;
 }
 
-export function createPassport({
-  db,
-  signingConfig,
-}: PassportOptions): passport.Authenticator {
+export function createPassport(
+  options: PassportOptions
+): passport.Authenticator {
   // Create the authenticator.
   const auth = new Authenticator();
 
   // Use the OIDC Strategy.
-  auth.use(createOIDCStrategy({ db }));
+  auth.use(createOIDCStrategy(options));
 
   // Use the LocalStrategy.
-  auth.use(createLocalStrategy({ db }));
+  auth.use(createLocalStrategy(options));
 
   // Use the SSOStrategy.
-  auth.use(createSSOStrategy({ db }));
+  auth.use(createSSOStrategy(options));
 
   // Use the JWTStrategy.
-  auth.use(createJWTStrategy({ db, signingConfig }));
+  auth.use(createJWTStrategy(options));
 
   return auth;
 }

src/core/server/app/middleware/passport/jwt.spec.ts

@@ -1,11 +1,11 @@
 import sinon from "sinon";
 
+import { Config } from "talk-common/config";
 import {
   createJWTSigningConfig,
   extractJWTFromRequest,
   parseAuthHeader,
 } from "talk-server/app/middleware/passport/jwt";
-import { Config } from "talk-server/config";
 import { Request } from "talk-server/types/express";
 
 describe("parseAuthHeader", () => {
@@ -67,7 +67,7 @@ describe("extractJWTFromRequest", () => {
 });
 
 describe("createJWTSigningConfig", () => {
-  it("parses a RSA certiciate", () => {
+  it("parses a RSA certificate", () => {
     const input = `-----BEGIN RSA PRIVATE KEY-----\\nMIIEpQIBAAKCAQEAyxR2DVlvkQRquggUQTpHN+PxDs2iOiItGgn6u4+faUCdgGEV\\nEnmG69//3lAZHnEQN9rkZS3/20zc41mTJnO7dslJbB316vWUSIwYcVY/VC9DTbk+\\nMHWZd94p5hOB8PoY2vEGA53KiyWLqQC5FWE3u7cz7eYTr9/eRPDTc15IzohLXd5U\\nC9EbO5ebho2CvWrBfrLozM5Kidp8r3Jp+A0o3kfJ/kRDDn/BmG6pM0TohWZFYMs2\\nnQaGg+of9tcafgAs7hZAgBrrcc/jke6+MKxpC8algik79nMk7s7prxF1Z9EbAeQV\\n1ssL2VgsjvGAHIV+Arckl6QJbVDvQXNAM0PqbQIDAQABAoIBAQCoG6D5vf5P8nMS\\n2ltB/6cyyfsjgO/45Y+mTXqERwj0DOwUeMkDyRv6KCxb8LxKade+FPIaG7D/7amw\\nfdcE7qrRUyD3YfnPbUk5oNcfAwFbg+BX969WWBMZmgvfDGj1fWKT4w9ScQ1YkFUD\\nKrkLzLVhK+/N0Dad0VjiguTXTMZCSDFOY9fO8HRF6EA3aewEPeEY62J6rSjGXvWB\\nGdW+FNvf/uRr36xGHNqiOP837pdVUppjgDyVsORnMfFtYMyWyxS2XD5r8gRwcRg7\\n0nz6bLM53DjKweO+Yl+pIVPFAyXL0pwzQDlnjShsCzyzjA9lJftkQwbcMWopeegJ\\nkPLmiq4VAoGBAOqDmySNx8vmWWMOaXKFuH6Gqu/Nd7gBHxZ73wvsEmvV52xwa0oi\\n55h+v6P1YEaNZQWXDFsvILoOUHr2kwZY+Du/MC7tgqpj+Fu3h7UHslulJRE3A+sN\\noLbHjZuwm3wwsatpHdyEYOGg0HIGWXi+9pDT/1gy8g3L2Gf0X6rfkBBXAoGBAN2v\\nlbii0+HvZ2y0D0P6NfUJ6cQDrSyuTe7UW6OVYjBjrVAk8+bhnQ4eKd9edCnUDqu6\\n9C8ZSrqR6VBeItbt8y+5ZCRcrigxd2VdH8rL9g6idD9RPnSbHx7Al8DxSUv25xMK\\n8Z/ZOAvuCmwDfdleycNDoTawKqLtWBzUEntLs5DbAoGAPlTKiJWylAxel8h92HWY\\nSvDqQCChgGOz6prz9sxBPS42e4kJy0OpwMt3jlGqzDXKswipvRayoSEq3PPqshY1\\nrFOtr9trDnTRzzbhuAkaq+ciCghQX0pY/BvgFJCFUyXyIzgmOrVotq+yl4v+fexr\\nxqTCSqQH2AjlNQQr5VPUi7MCgYEAsNbbMXE6YlXug+lS8CANoM3qm4FvSGA3LNhb\\nza9hp0YsP+1qXvgEp/lp35RiR+ewWE+HcHbVhOTWYFTnp9ojDyPtfZAtIUTsgIB7\\n1vNC8kOnRccSckQ32/k4VSJlHOL1S9yECMZnjiSyTZ2va5HQkyJE3PJE4LlCe6S0\\npYQq1tcCgYEAoJDeSeAPqi5NIu+MWNUWzw4vo5raKyHrJi+cTvKyM/2zJFHvBc5f\\nRaxkcIAOmIDoVdFgy6APY/0DnDnpqT1kMagUaxZjG9PLFIDds5DRaL99m+S7l8mt\\nySX/MbmhQHYWpVf2nL6pmfPuP4Ih6tbKIUUGA3wZXYYZ5r+pZFG1IrA=\\n-----END RSA PRIVATE KEY-----`;
     const config = {
       get: sinon.stub(),

src/core/server/app/middleware/passport/jwt.ts

@@ -3,7 +3,7 @@ import uuid from "uuid";
 
 import { Db } from "mongodb";
 import { Strategy } from "passport-strategy";
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 import { retrieveUser, User } from "talk-server/models/user";
 import { Request } from "talk-server/types/express";
 
@@ -67,7 +67,7 @@ export function createAsymmetricSigningConfig(
   secret: string
 ): JWTSigningConfig {
   return {
-    // Secrets have their newlines encoded with newline litterals.
+    // Secrets have their newlines encoded with newline literals.
     secret: Buffer.from(secret.replace(/\\n/g, "\n")),
     algorithm,
   };
@@ -138,21 +138,20 @@ export interface JWTToken {
 
 export interface JWTStrategyOptions {
   signingConfig: JWTSigningConfig;
-  db: Db;
+  mongo: Db;
 }
 
 export class JWTStrategy extends Strategy {
+  public name = "jwt";
+
   private signingConfig: JWTSigningConfig;
-  private db: Db;
+  private mongo: Db;
 
-  public name: string;
-
-  constructor({ signingConfig, db }: JWTStrategyOptions) {
+  constructor({ signingConfig, mongo }: JWTStrategyOptions) {
     super();
 
-    this.name = "jwt";
     this.signingConfig = signingConfig;
-    this.db = db;
+    this.mongo = mongo;
   }
 
   public authenticate(req: Request) {
@@ -160,7 +159,7 @@ export class JWTStrategy extends Strategy {
     const token = extractJWTFromRequest(req);
     if (!token) {
       // There was no token on the request, so there was no user, so let's mark
-      // that the strategy was succesfull.
+      // that the strategy was successful.
       return this.success(null, null);
     }
 
@@ -187,7 +186,7 @@ export class JWTStrategy extends Strategy {
 
         try {
           // Find the user.
-          const user = await retrieveUser(this.db, tenant.id, sub);
+          const user = await retrieveUser(this.mongo, tenant.id, sub);
 
           // Return them! The user may be null, but that's ok here.
           this.success(user, null);

src/core/server/app/middleware/passport/local.ts

@@ -8,7 +8,7 @@ import {
 } from "talk-server/models/user";
 import { Request } from "talk-server/types/express";
 
-const verifyFactory = (db: Db) => async (
+const verifyFactory = (mongo: Db) => async (
   req: Request,
   email: string,
   password: string,
@@ -21,7 +21,7 @@ const verifyFactory = (db: Db) => async (
     const tenant = req.tenant!;
 
     // Get the user from the database.
-    const user = await retrieveUserWithProfile(db, tenant.id, {
+    const user = await retrieveUserWithProfile(mongo, tenant.id, {
       id: email,
       type: "local",
     });
@@ -44,10 +44,10 @@ const verifyFactory = (db: Db) => async (
 };
 
 export interface LocalStrategyOptions {
-  db: Db;
+  mongo: Db;
 }
 
-export function createLocalStrategy({ db }: LocalStrategyOptions) {
+export function createLocalStrategy({ mongo }: LocalStrategyOptions) {
   return new LocalStrategy(
     {
       usernameField: "email",
@@ -55,6 +55,6 @@ export function createLocalStrategy({ db }: LocalStrategyOptions) {
       session: false,
       passReqToCallback: true,
     },
-    verifyFactory(db)
+    verifyFactory(mongo)
   );
 }

src/core/server/app/middleware/passport/oidc.ts

@@ -8,8 +8,10 @@ import { Strategy } from "passport-strategy";
 import { validate } from "talk-server/app/request/body";
 import { reconstructURL } from "talk-server/app/url";
 import { GQLUSER_ROLE } from "talk-server/graph/tenant/schema/__generated__/types";
-import { OIDCAuthIntegration, Tenant } from "talk-server/models/tenant";
+import { OIDCAuthIntegration } from "talk-server/models/settings";
+import { Tenant } from "talk-server/models/tenant";
 import { OIDCProfile, retrieveUserWithProfile } from "talk-server/models/user";
+import TenantCache from "talk-server/services/tenant/cache";
 import { upsert } from "talk-server/services/users";
 import { Request } from "talk-server/types/express";
 
@@ -39,10 +41,6 @@ export interface StrategyItem {
   jwksClient?: JwksClient;
 }
 
-export interface OIDCStrategyOptions {
-  db: Db;
-}
-
 export function isOIDCToken(token: OIDCIDToken | object): token is OIDCIDToken {
   if (
     (token as OIDCIDToken).iss &&
@@ -176,20 +174,28 @@ export async function findOrCreateOIDCUser(
  */
 const OIDC_SCOPE = "openid email profile";
 
-// FIXME: attach strategy to cache updates of the tenants
+export interface OIDCStrategyOptions {
+  mongo: Db;
+  tenantCache: TenantCache;
+}
 
 export default class OIDCStrategy extends Strategy {
-  public name: string;
+  public name = "oidc";
 
-  private db: Db;
-  private cache: Map<string, StrategyItem>;
+  private mongo: Db;
+  private cache = new Map<string, StrategyItem>();
 
-  constructor({ db }: OIDCStrategyOptions) {
+  constructor({ mongo, tenantCache }: OIDCStrategyOptions) {
     super();
 
-    this.name = "oidc";
-    this.cache = new Map();
-    this.db = db;
+    this.mongo = mongo;
+
+    // Subscribe to updates with Tenants.
+    tenantCache.subscribe(tenant => {
+      // Delete the tenant cache item when the tenant changes. The refreshed
+      // Tenant will come in with the request.
+      this.cache.delete(tenant.id);
+    });
   }
 
   private lookupJWKSClient(
@@ -277,7 +283,7 @@ export default class OIDCStrategy extends Strategy {
 
         try {
           const user = await findOrCreateOIDCUser(
-            this.db,
+            this.mongo,
             tenant,
             decoded as OIDCIDToken
           );
@@ -370,6 +376,6 @@ export default class OIDCStrategy extends Strategy {
   }
 }
 
-export function createOIDCStrategy({ db }: OIDCStrategyOptions) {
-  return new OIDCStrategy({ db });
+export function createOIDCStrategy(options: OIDCStrategyOptions) {
+  return new OIDCStrategy(options);
 }

src/core/server/app/middleware/passport/sso.ts

@@ -17,7 +17,7 @@ import { upsert } from "talk-server/services/users";
 import { Request } from "talk-server/types/express";
 
 export interface SSOStrategyOptions {
-  db: Db;
+  mongo: Db;
 }
 
 export interface SSOUserProfile {
@@ -114,15 +114,14 @@ export function isSSOToken(token: SSOToken | object): token is SSOToken {
 }
 
 export default class SSOStrategy extends Strategy {
-  public name: string;
+  public name = "sso";
 
-  private db: Db;
+  private mongo: Db;
 
-  constructor({ db }: SSOStrategyOptions) {
+  constructor({ mongo }: SSOStrategyOptions) {
     super();
 
-    this.name = "sso";
-    this.db = db;
+    this.mongo = mongo;
   }
 
   /**
@@ -162,7 +161,7 @@ export default class SSOStrategy extends Strategy {
     if (isOIDCToken(token)) {
       // The token provided for SSO contains an issuer claim. We're assuming
       // that this request is associated with an OpenID Connect provider.
-      return findOrCreateOIDCUser(this.db, tenant, token);
+      return findOrCreateOIDCUser(this.mongo, tenant, token);
     }
 
     // Check to see if this token is a SSO Token or not, if it isn't error out.
@@ -174,7 +173,7 @@ export default class SSOStrategy extends Strategy {
     // The token provided does not confirm to the OpenID Connect provider
     // spec, but id does conform to a SSOToken so we should expect the token to
     // contain the user profile.
-    return findOrCreateSSOUser(this.db, tenant, token);
+    return findOrCreateSSOUser(this.mongo, tenant, token);
   }
 
   public authenticate(req: Request) {

src/core/server/app/middleware/tenant.ts

@@ -1,11 +1,10 @@
 import { NextFunction, Response } from "express";
-import { Db } from "mongodb";
 
-import { retrieveTenantByDomain } from "talk-server/models/tenant";
+import TenantCache from "talk-server/services/tenant/cache";
 import { Request } from "talk-server/types/express";
 
 export interface MiddlewareOptions {
-  db: Db;
+  cache: TenantCache;
 }
 
 export default (options: MiddlewareOptions) => async (
@@ -14,13 +13,18 @@ export default (options: MiddlewareOptions) => async (
   next: NextFunction
 ) => {
   try {
-    // TODO: replace with shared synced cache instead of direct db access.
-    const tenant = await retrieveTenantByDomain(options.db, req.hostname);
+    const { cache } = options;
+
+    // Attach the tenant to the request.
+    const tenant = await cache.retrieveByDomain(req.hostname);
     if (!tenant) {
       // TODO: send a http.StatusNotFound?
       return next(new Error("tenant not found"));
     }
 
+    // Attach the tenant cache to the request.
+    req.tenantCache = cache;
+
     // Attach the tenant to the request.
     req.tenant = tenant;
 

src/core/server/app/router.ts

@@ -33,7 +33,7 @@ async function createTenantRouter(app: AppOptions, options: RouterOptions) {
   const router = express.Router();
 
   // Tenant identification middleware.
-  router.use(tenantMiddleware({ db: app.mongo }));
+  router.use(tenantMiddleware({ cache: app.tenantCache }));
 
   // Setup Passport middleware.
   router.use(options.passport.initialize());
@@ -48,7 +48,12 @@ async function createTenantRouter(app: AppOptions, options: RouterOptions) {
     // Any users may submit their GraphQL requests with authentication, this
     // middleware will unpack their user into the request.
     options.passport.authenticate("jwt", { session: false }),
-    await tenantGraphMiddleware(app.schemas.tenant, app.config, app.mongo)
+    await tenantGraphMiddleware({
+      schema: app.schemas.tenant,
+      config: app.config,
+      mongo: app.mongo,
+      redis: app.redis,
+    })
   );
 
   return router;

src/core/server/graph/common/context.ts

@@ -1,13 +1,17 @@
 import { User } from "talk-server/models/user";
+import { Request } from "talk-server/types/express";
 
 export interface CommonContextOptions {
   user?: User;
+  req?: Request;
 }
 
 export default class CommonContext {
   public user?: User;
+  public req?: Request;
 
-  constructor({ user }: CommonContextOptions) {
+  constructor({ user, req }: CommonContextOptions) {
     this.user = user;
+    this.req = req;
   }
 }

src/core/server/graph/common/middleware/index.ts

@@ -5,7 +5,7 @@ import {
   GraphQLOptions,
 } from "apollo-server-express";
 import { FieldDefinitionNode, GraphQLError, ValidationContext } from "graphql";
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 
 // Sourced from: https://github.com/apollographql/apollo-server/blob/958846887598491fadea57b3f9373d129300f250/packages/apollo-server-core/src/ApolloServer.ts#L46-L57
 const NoIntrospection = (context: ValidationContext) => ({

src/core/server/graph/common/subscriptions/pubsub.ts

@@ -1,5 +1,5 @@
 import { RedisPubSub } from "graphql-redis-subscriptions";
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 import { createRedisClient } from "talk-server/services/redis";
 
 export async function createPubSub(config: Config): Promise<RedisPubSub> {

src/core/server/graph/management/context.ts

@@ -1,16 +1,19 @@
 import { Db } from "mongodb";
+
 import CommonContext from "talk-server/graph/common/context";
+import { Request } from "talk-server/types/express";
 
 export interface ManagementContextOptions {
-  db: Db;
+  mongo: Db;
+  req?: Request;
 }
 
 export default class ManagementContext extends CommonContext {
-  public db: Db;
+  public mongo: Db;
 
-  constructor({ db }: ManagementContextOptions) {
-    super({});
+  constructor({ req, mongo }: ManagementContextOptions) {
+    super({ req });
 
-    this.db = db;
+    this.mongo = mongo;
   }
 }

src/core/server/graph/management/middleware.ts

@@ -1,13 +1,14 @@
 import { GraphQLSchema } from "graphql";
 import { Db } from "mongodb";
 
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 import { graphqlMiddleware } from "talk-server/graph/common/middleware";
+import { Request } from "talk-server/types/express";
 
-import Context from "./context";
+import ManagementContext from "./context";
 
-export default (schema: GraphQLSchema, config: Config, db: Db) =>
-  graphqlMiddleware(config, async () => ({
+export default (schema: GraphQLSchema, config: Config, mongo: Db) =>
+  graphqlMiddleware(config, async (req: Request) => ({
     schema,
-    context: new Context({ db }),
+    context: new ManagementContext({ req, mongo }),
   }));

src/core/server/graph/tenant/context.ts

@@ -1,30 +1,49 @@
+import { Redis } from "ioredis";
 import { Db } from "mongodb";
+
 import CommonContext from "talk-server/graph/common/context";
 import { Tenant } from "talk-server/models/tenant";
 import { User } from "talk-server/models/user";
+import TenantCache from "talk-server/services/tenant/cache";
+import { Request } from "talk-server/types/express";
+
 import loaders from "./loaders";
 import mutators from "./mutators";
 
 export interface TenantContextOptions {
-  db: Db;
+  mongo: Db;
+  redis: Redis;
   tenant: Tenant;
+  tenantCache: TenantCache;
+  req?: Request;
   user?: User;
 }
 
 export default class TenantContext extends CommonContext {
   public loaders: ReturnType<typeof loaders>;
   public mutators: ReturnType<typeof mutators>;
-  public db: Db;
+  public mongo: Db;
+  public redis: Redis;
   public user?: User;
   public tenant: Tenant;
+  public tenantCache: TenantCache;
 
-  constructor({ user, tenant, db }: TenantContextOptions) {
-    super({ user });
+  constructor({
+    req,
+    user,
+    tenant,
+    mongo,
+    redis,
+    tenantCache,
+  }: TenantContextOptions) {
+    super({ user, req });
 
     this.tenant = tenant;
+    this.tenantCache = tenantCache;
     this.user = user;
+    this.mongo = mongo;
+    this.redis = redis;
     this.loaders = loaders(this);
     this.mutators = mutators(this);
-    this.db = db;
   }
 }

src/core/server/graph/tenant/loaders/assets.ts

@@ -10,8 +10,8 @@ import { findOrCreate } from "talk-server/services/assets";
 
 export default (ctx: TenantContext) => ({
   findOrCreate: (input: FindOrCreateAssetInput) =>
-    findOrCreate(ctx.db, ctx.tenant, input),
+    findOrCreate(ctx.mongo, ctx.tenant, input),
   asset: new DataLoader<string, Asset | null>(ids =>
-    retrieveManyAssets(ctx.db, ctx.tenant.id, ids)
+    retrieveManyAssets(ctx.mongo, ctx.tenant.id, ids)
   ),
 });

src/core/server/graph/tenant/loaders/comments.ts

@@ -14,7 +14,7 @@ import {
 
 export default (ctx: Context) => ({
   comment: new DataLoader((ids: string[]) =>
-    retrieveManyComments(ctx.db, ctx.tenant.id, ids)
+    retrieveManyComments(ctx.mongo, ctx.tenant.id, ids)
   ),
   forAsset: (
     assetID: string,
@@ -25,7 +25,7 @@ export default (ctx: Context) => ({
       after,
     }: AssetToCommentsArgs
   ) =>
-    retrieveCommentAssetConnection(ctx.db, ctx.tenant.id, assetID, {
+    retrieveCommentAssetConnection(ctx.mongo, ctx.tenant.id, assetID, {
       first,
       orderBy,
       after,
@@ -40,9 +40,15 @@ export default (ctx: Context) => ({
       after,
     }: CommentToRepliesArgs
   ) =>
-    retrieveCommentRepliesConnection(ctx.db, ctx.tenant.id, assetID, parentID, {
-      first,
-      orderBy,
-      after,
-    }),
+    retrieveCommentRepliesConnection(
+      ctx.mongo,
+      ctx.tenant.id,
+      assetID,
+      parentID,
+      {
+        first,
+        orderBy,
+        after,
+      }
+    ),
 });

src/core/server/graph/tenant/loaders/users.ts

@@ -4,6 +4,6 @@ import { retrieveManyUsers, User } from "talk-server/models/user";
 
 export default (ctx: Context) => ({
   user: new DataLoader<string, User | null>(ids =>
-    retrieveManyUsers(ctx.db, ctx.tenant.id, ids)
+    retrieveManyUsers(ctx.mongo, ctx.tenant.id, ids)
   ),
 });

src/core/server/graph/tenant/middleware.ts

@@ -1,21 +1,41 @@
 import { GraphQLSchema } from "graphql";
+import { Redis } from "ioredis";
 import { Db } from "mongodb";
 
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 import { graphqlMiddleware } from "talk-server/graph/common/middleware";
 import { Request } from "talk-server/types/express";
 
 import TenantContext from "./context";
 
-export default async (schema: GraphQLSchema, config: Config, db: Db) => {
+export interface TenantGraphQLMiddlewareOptions {
+  schema: GraphQLSchema;
+  config: Config;
+  mongo: Db;
+  redis: Redis;
+}
+
+export default async ({
+  schema,
+  config,
+  mongo,
+  redis,
+}: TenantGraphQLMiddlewareOptions) => {
   return graphqlMiddleware(config, async (req: Request) => {
     // Load the tenant and user from the request.
-    const { tenant, user } = req;
+    const { tenant, user, tenantCache } = req;
 
     // Return the graph options.
     return {
       schema,
-      context: new TenantContext({ db, tenant: tenant!, user }),
+      context: new TenantContext({
+        req,
+        mongo,
+        redis,
+        tenant: tenant!,
+        user,
+        tenantCache,
+      }),
     };
   });
 };

src/core/server/graph/tenant/mutators/comment.ts

@@ -5,12 +5,17 @@ import { create } from "talk-server/services/comments";
 
 export default (ctx: TenantContext) => ({
   create: (input: GQLCreateCommentInput): Promise<Comment> => {
-    // FIXME: remove tenant + user !
-    return create(ctx.db, ctx.tenant, {
-      author_id: ctx.user!.id,
-      asset_id: input.assetID,
-      body: input.body,
-      parent_id: input.parentID,
-    });
+    return create(
+      ctx.mongo,
+      ctx.tenant,
+      ctx.user!,
+      {
+        author_id: ctx.user!.id,
+        asset_id: input.assetID,
+        body: input.body,
+        parent_id: input.parentID,
+      },
+      ctx.req
+    );
   },
 });

src/core/server/graph/tenant/mutators/index.ts

@@ -1,6 +1,9 @@
 import TenantContext from "talk-server/graph/tenant/context";
+
 import Comment from "./comment";
+import Settings from "./settings";
 
 export default (ctx: TenantContext) => ({
   Comment: Comment(ctx),
+  Settings: Settings(ctx),
 });

src/core/server/graph/tenant/mutators/settings.ts

@@ -0,0 +1,11 @@
+import { isNull, omitBy } from "lodash";
+
+import TenantContext from "talk-server/graph/tenant/context";
+import { GQLSettingsInput } from "talk-server/graph/tenant/schema/__generated__/types";
+import { Tenant } from "talk-server/models/tenant";
+import { update } from "talk-server/services/tenant";
+
+export default ({ mongo, redis, tenantCache, tenant }: TenantContext) => ({
+  update: (input: GQLSettingsInput): Promise<Tenant | null> =>
+    update(mongo, redis, tenantCache, tenant, omitBy(input, isNull)),
+});

src/core/server/graph/tenant/resolvers/auth_integrations.ts

@@ -1,5 +1,5 @@
 import { GQLAuthIntegrationsTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { AuthIntegration, AuthIntegrations } from "talk-server/models/tenant";
+import { AuthIntegration, AuthIntegrations } from "talk-server/models/settings";
 
 const disabled: AuthIntegration = { enabled: false };
 

src/core/server/graph/tenant/resolvers/auth_settings.ts

@@ -1,5 +1,5 @@
 import { GQLAuthSettingsTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { Auth } from "talk-server/models/tenant";
+import { Auth } from "talk-server/models/settings";
 
 const AuthSettings: GQLAuthSettingsTypeResolver<Auth> = {
   integrations: auth => auth.integrations,

src/core/server/graph/tenant/resolvers/facebook_auth_integration.ts

@@ -1,5 +1,5 @@
 import { GQLFacebookAuthIntegrationTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { FacebookAuthIntegration } from "talk-server/models/tenant";
+import { FacebookAuthIntegration } from "talk-server/models/settings";
 
 const FacebookAuthIntegration: GQLFacebookAuthIntegrationTypeResolver<
   FacebookAuthIntegration

src/core/server/graph/tenant/resolvers/google_auth_integration.ts

@@ -1,5 +1,5 @@
 import { GQLGoogleAuthIntegrationTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { GoogleAuthIntegration } from "talk-server/models/tenant";
+import { GoogleAuthIntegration } from "talk-server/models/settings";
 
 const GoogleAuthIntegration: GQLGoogleAuthIntegrationTypeResolver<
   GoogleAuthIntegration

src/core/server/graph/tenant/resolvers/local_auth_integration.ts

@@ -1,5 +1,5 @@
 import { GQLLocalAuthIntegrationTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { LocalAuthIntegration } from "talk-server/models/tenant";
+import { LocalAuthIntegration } from "talk-server/models/settings";
 
 const LocalAuthIntegration: GQLLocalAuthIntegrationTypeResolver<
   LocalAuthIntegration

src/core/server/graph/tenant/resolvers/mutation.ts

@@ -5,6 +5,10 @@ const Mutation: GQLMutationTypeResolver<void> = {
     comment: await ctx.mutators.Comment.create(input),
     clientMutationId: input.clientMutationId,
   }),
+  updateSettings: async (source, { input }, ctx) => ({
+    settings: await ctx.mutators.Settings.update(input.settings),
+    clientMutationId: input.clientMutationId,
+  }),
 };
 
 export default Mutation;

src/core/server/graph/tenant/resolvers/oidc_auth_integration.ts

@@ -1,5 +1,5 @@
 import { GQLOIDCAuthIntegrationTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { OIDCAuthIntegration } from "talk-server/models/tenant";
+import { OIDCAuthIntegration } from "talk-server/models/settings";
 
 const OIDCAuthIntegration: GQLOIDCAuthIntegrationTypeResolver<
   OIDCAuthIntegration

src/core/server/graph/tenant/resolvers/sso_auth_integration.ts

@@ -1,5 +1,5 @@
 import { GQLSSOAuthIntegrationTypeResolver } from "talk-server/graph/tenant/schema/__generated__/types";
-import { SSOAuthIntegration } from "talk-server/models/tenant";
+import { SSOAuthIntegration } from "talk-server/models/settings";
 
 const SSOAuthIntegration: GQLSSOAuthIntegrationTypeResolver<
   SSOAuthIntegration

src/core/server/graph/tenant/schema/schema.graphql

@@ -25,6 +25,19 @@ Cursor represents a paginating cursor.
 """
 scalar Cursor
 
+################################################################################
+## Actions
+################################################################################
+
+enum ACTION_TYPE {
+  FLAG
+  DONTAGREE
+}
+
+enum ACTION_ITEM_TYPE {
+  COMMENTS
+}
+
 ################################################################################
 ## Settings
 ################################################################################
@@ -287,7 +300,7 @@ type Settings {
   """
   domains will return a given list of whitelisted domains.
   """
-  domains: [String!] @auth(roles: [ADMIN]) @auth(roles: [ADMIN])
+  domains: [String!] @auth(roles: [ADMIN])
 
   """
   auth contains all the settings related to authentication and authorization.
@@ -301,6 +314,7 @@ type Settings {
 
 enum USER_ROLE {
   COMMENTER
+  STAFF
   MODERATOR
   ADMIN
 }
@@ -390,8 +404,34 @@ type User {
 ################################################################################
 
 enum COMMENT_STATUS {
+  """
+  The comment is not PREMOD, but was not applied a moderation status by a
+  moderator.
+  """
   NONE
+
+  """
+  The comment has been accepted by a moderator.
+  """
   ACCEPTED
+
+  """
+  The comment has been rejected by a moderator.
+  """
+  REJECTED
+
+  """
+  The comment was created while the asset's premoderation option was on, and
+  new comments that haven't been moderated yet are referred to as
+  "premoderated" or "premod" comments.
+  """
+  PREMOD
+
+  """
+  SYSTEM_WITHHELD represents a comment that was withheld by the system because
+  it was flagged by an internal process for further review.
+  """
+  SYSTEM_WITHHELD
 }
 
 """
@@ -661,6 +701,66 @@ type CreateCommentPayload {
   clientMutationId: String!
 }
 
+##################
+## updateSettings
+##################
+
+"""
+SettingsInput is the partial type of the Settings type for performing mutations.
+"""
+input SettingsInput {
+  moderation: MODERATION_MODE
+  requireEmailConfirmation: Boolean
+  infoBoxEnable: Boolean
+  infoBoxContent: String
+  questionBoxEnable: Boolean
+  questionBoxContent: String
+  questionBoxIcon: String
+  premodLinksEnable: Boolean
+  autoCloseStream: Boolean
+  customCssUrl: String
+  closedTimeout: Int
+  closedMessage: String
+  disableCommenting: Boolean
+  disableCommentingMessage: String
+  editCommentWindowLength: Int
+  charCountEnable: Boolean
+  charCount: Int
+  organizationName: String
+  organizationContactEmail: String
+  # wordlist: WordlistSettings @auth(roles: [ADMIN, MODERATOR])
+  domains: [String!]
+  # auth: AuthSettings!
+}
+
+"""
+UpdateSettingsInput provides the input for the updateSettings Mutation.
+"""
+input UpdateSettingsInput {
+  settings: SettingsInput!
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
+"""
+UpdateSettingsPayload contains the updated Settings after the updateSettings
+mutation.
+"""
+type UpdateSettingsPayload {
+  """
+  settings is the updated Settings.
+  """
+  settings: Settings
+
+  """
+  clientMutationId is required for Relay support.
+  """
+  clientMutationId: String!
+}
+
 ##################
 ## Mutation
 ##################
@@ -670,6 +770,11 @@ type Mutation {
   createComment will create a Comment as the current logged in User.
   """
   createComment(input: CreateCommentInput!): CreateCommentPayload @auth
+
+  """
+  updateSettings will update the Settings for the given Tenant.
+  """
+  updateSettings(input: UpdateSettingsInput!): UpdateSettingsPayload @auth(roles: [ADMIN])
 }
 
 ################################################################################

src/core/server/index.ts

@@ -1,13 +1,14 @@
 import express, { Express } from "express";
 import http from "http";
 
+import config, { Config } from "talk-common/config";
 import { createJWTSigningConfig } from "talk-server/app/middleware/passport/jwt";
 import getManagementSchema from "talk-server/graph/management/schema";
 import { Schemas } from "talk-server/graph/schemas";
 import getTenantSchema from "talk-server/graph/tenant/schema";
 
+import TenantCache from "talk-server/services/tenant/cache";
 import { attachSubscriptionHandlers, createApp, listenAndServe } from "./app";
-import config, { Config } from "./config";
 import logger from "./logger";
 import { createMongoDB } from "./services/mongodb";
 import { createRedisClient } from "./services/redis";
@@ -68,6 +69,12 @@ class Server {
     // Create the signing config.
     const signingConfig = createJWTSigningConfig(this.config);
 
+    // Create the TenantCache.
+    const tenantCache = new TenantCache(mongo, await createRedisClient(config));
+
+    // Prime the tenant cache so it'll be ready to serve now.
+    await tenantCache.primeAll();
+
     // Create the Talk App, branching off from the parent app.
     const app: Express = await createApp({
       parent,
@@ -76,6 +83,7 @@ class Server {
       config: this.config,
       schemas: this.schemas,
       signingConfig,
+      tenantCache,
     });
 
     // Start the application and store the resulting http.Server.

src/core/server/logger.ts

@@ -1,8 +1,12 @@
-import bunyan from "bunyan";
+import bunyan, { LogLevelString } from "bunyan";
+
+import config from "talk-common/config";
 
 const logger = bunyan.createLogger({
   name: "talk",
   serializers: bunyan.stdSerializers,
+  // TODO: (wyattjoh) move this into some managed instance?
+  level: config.get("logging_level") as LogLevelString,
 });
 
 export default logger;

src/core/server/models/actions.ts

@@ -1,3 +1,17 @@
-export interface ActionCounts {
-  [_: string]: number;
+import {
+  GQLACTION_ITEM_TYPE,
+  GQLACTION_TYPE,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+
+export type ActionCounts = Record<string, number>;
+
+export interface Action {
+  readonly id: string;
+  action_type: GQLACTION_TYPE;
+  item_type: GQLACTION_ITEM_TYPE;
+  item_id: string;
+  group_id?: string;
+  user_id?: string;
+  created_at: Date;
+  metadata?: Record<string, any>;
 }

src/core/server/models/asset.ts

@@ -4,6 +4,7 @@ import { Db } from "mongodb";
 import uuid from "uuid";
 
 import { Omit } from "talk-common/types";
+import { ModerationSettings } from "talk-server/models/settings";
 import { TenantResource } from "talk-server/models/tenant";
 
 function collection(db: Db) {
@@ -25,6 +26,12 @@ export interface Asset extends TenantResource {
   publication_date?: Date;
   modified_date?: Date;
   created_at: Date;
+
+  /**
+   * settings provides a point where the settings can be overriden for a
+   * specific Asset.
+   */
+  settings?: Partial<ModerationSettings>;
 }
 
 export interface UpsertAssetInput {
@@ -170,7 +177,7 @@ export async function updateAsset(
   const result = await collection(db).findOneAndUpdate(
     { id, tenant_id: tenantID },
     // Only update fields that have been updated.
-    { $set: dotize(update) },
+    { $set: dotize.convert(update) },
     // False to return the updated document instead of the original
     // document.
     { returnOriginal: false }

src/core/server/models/comment.ts

@@ -1,4 +1,3 @@
-import { merge } from "lodash";
 import { Db } from "mongodb";
 import uuid from "uuid";
 
@@ -91,17 +90,14 @@ export async function createComment(
   };
 
   // Merge the defaults and the input together.
-  const comment: Readonly<Comment> = merge({}, defaults, input);
-
-  // TODO: Check for existence of the parent ID before we create the comment.
-
-  // TODO: Check for existence of the asset ID before we create the comment.
+  const comment: Readonly<Comment> = {
+    ...defaults,
+    ...input,
+  };
 
   // Insert it into the database.
   await collection(db).insertOne(comment);
 
-  // TODO: update reply count of parent if exists.
-
   return comment;
 }
 

src/core/server/models/settings.ts

@@ -0,0 +1,246 @@
+import {
+  GQLMODERATION_MODE,
+  GQLUSER_ROLE,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+
+export interface Wordlist {
+  banned: string[];
+  suspect: string[];
+}
+
+export interface EmailDomainRuleCondition {
+  /**
+   * emailDomain is the domain name component of the email addresses that should
+   * match for this condition.
+   */
+  emailDomain: string;
+  /**
+   * emailVerifiedRequired stipulates that this rule only applies when the user
+   * account has been marked as having their email address already verified.
+   */
+  emailVerifiedRequired: boolean;
+}
+
+/**
+ * RoleRule describes the role assignment for when a user logs into Talk, how
+ * they can have their account automatically upgraded to a specific role when
+ * the domain for their email matches the one provided.
+ */
+export interface RoleRule extends Partial<EmailDomainRuleCondition> {
+  /**
+   * role is the specific GQLUSER_ROLE that should be assigned to the newly
+   * created user depending on their email address.
+   */
+  role: GQLUSER_ROLE;
+}
+
+export interface AuthRules {
+  /**
+   * roles allow the configuration of automatic role assignment based on the
+   * user's email address.
+   */
+  roles?: RoleRule[];
+
+  /**
+   * restrictTo when populated, will restrict which users can login using this
+   * integration. If a user successfully logs in using the OIDCStrategy, but
+   * does not match the following rules, the user will not be created.
+   */
+  restrictTo?: EmailDomainRuleCondition[];
+}
+
+export interface AuthIntegration {
+  enabled: boolean;
+}
+
+export interface DisplayNameAuthIntegration {
+  displayNameEnable: boolean;
+}
+
+/**
+ * SSOAuthIntegration is an AuthIntegration that provides a secret to the admins
+ * of a tenant, where they can sign a SSO payload with it to provide to the
+ * embed to allow single sign on.
+ */
+export interface SSOAuthIntegration
+  extends AuthIntegration,
+    DisplayNameAuthIntegration {
+  key: string;
+}
+
+/**
+ * OIDCAuthIntegration provides a way to store Open ID Connect credentials. This
+ * will be used in the admin to provide staff logins for users.
+ */
+export interface OIDCAuthIntegration
+  extends AuthIntegration,
+    DisplayNameAuthIntegration {
+  clientID: string;
+  clientSecret: string;
+  issuer: string;
+  authorizationURL: string;
+  jwksURI: string;
+  tokenURL: string;
+}
+
+export interface FacebookAuthIntegration extends AuthIntegration {
+  clientID: string;
+  clientSecret: string;
+}
+
+export interface GoogleAuthIntegration extends AuthIntegration {
+  clientID: string;
+  clientSecret: string;
+}
+
+export type LocalAuthIntegration = AuthIntegration;
+
+/**
+ * AuthIntegrations describes all of the possible auth integration
+ * configurations.
+ */
+export interface AuthIntegrations {
+  /**
+   * local is the auth integration for the email/password based auth.
+   */
+  local: LocalAuthIntegration;
+
+  /**
+   * sso is the external auth integration for the single sign on auth.
+   */
+  sso?: SSOAuthIntegration;
+
+  /**
+   * sso is the external auth integration for the OpenID Connect auth.
+   */
+  oidc?: OIDCAuthIntegration;
+
+  /**
+   * sso is the external auth integration for the Google auth.
+   */
+  google?: GoogleAuthIntegration;
+
+  /**
+   * sso is the external auth integration for the Facebook auth.
+   */
+  facebook?: FacebookAuthIntegration;
+}
+
+export interface Auth {
+  integrations: AuthIntegrations;
+}
+
+/**
+ * Akismet provides integration with the Akismet Spam detection service.
+ */
+export interface AkismetIntegration {
+  /**
+   * When true, it will enable comments to be checked by Akismet.
+   */
+  enabled: boolean;
+
+  /**
+   * The key for the Akismet integration.
+   */
+  key?: string;
+
+  /**
+   * The site (blog) for the Akismet integration.
+   */
+  site?: string;
+}
+
+export interface ExternalIntegrations {
+  /**
+   * akismet provides integration with the Akismet Spam detection service.
+   */
+  akismet: AkismetIntegration;
+}
+
+export interface ModerationSettings {
+  moderation: GQLMODERATION_MODE;
+  requireEmailConfirmation: boolean;
+  infoBoxEnable: boolean;
+  infoBoxContent?: string;
+  questionBoxEnable: boolean;
+  questionBoxIcon?: string;
+  questionBoxContent?: string;
+  premodLinksEnable: boolean;
+  autoCloseStream: boolean;
+  closedTimeout: number;
+  closedMessage?: string;
+  disableCommenting: boolean;
+  disableCommentingMessage?: string;
+  charCountEnable: boolean;
+  charCount?: number;
+}
+
+/**
+ * KarmaThreshold defines the bounds for which a User will become unreliable or
+ * reliable based on their karma score. If the score is equal or less than the
+ * unreliable value, they are unreliable. If the score is equal or more than the
+ * reliable value, they are reliable. If they are neither reliable or unreliable
+ * then they are neutral.
+ */
+export interface KarmaThreshold {
+  reliable: number;
+  unreliable: number;
+}
+
+export interface KarmaThresholds {
+  /**
+   * flag represents karma settings in relation to how well a User's flagging
+   * ability aligns with the moderation decicions made by moderators.
+   */
+  flag: KarmaThreshold;
+
+  /**
+   * comment represents the karma setting in relation to how well a User's comments are moderated.
+   */
+  comment: KarmaThreshold;
+}
+
+export interface Karma {
+  /**
+   * When true, checks will be completed to ensure that the Karma checks are
+   * completed.
+   */
+  enabled: boolean;
+
+  /**
+   * karmaThresholds contains the currently set thresholds for triggering Trust
+   * beheviour.
+   */
+  thresholds: KarmaThresholds;
+}
+
+export interface Settings extends ModerationSettings {
+  customCssUrl?: string;
+
+  /**
+   * editCommentWindowLength is the length of time (in milliseconds) after a
+   * comment is posted that it can still be edited by the author.
+   */
+  editCommentWindowLength: number;
+
+  /**
+   * karma is the set of settings related to how user Trust and Karma are
+   * handled.
+   */
+  karma: Karma;
+
+  /**
+   * wordlist stores all the banned/suspect words.
+   */
+  wordlist: Wordlist;
+
+  /**
+   * Set of configured authentication integrations.
+   */
+  auth: Auth;
+
+  /**
+   * Various integrations with external services.
+   */
+  integrations: ExternalIntegrations;
+}

src/core/server/models/tenant.ts

@@ -1,13 +1,10 @@
 import dotize from "dotize";
-import { merge } from "lodash";
 import { Db } from "mongodb";
 import uuid from "uuid";
 
-import { Sub } from "talk-common/types";
-import {
-  GQLMODERATION_MODE,
-  GQLUSER_ROLE,
-} from "talk-server/graph/tenant/schema/__generated__/types";
+import { Omit, Sub } from "talk-common/types";
+import { GQLMODERATION_MODE } from "talk-server/graph/tenant/schema/__generated__/types";
+import { Settings } from "talk-server/models/settings";
 
 function collection(db: Db) {
   return db.collection<Readonly<Tenant>>("tenants");
@@ -17,147 +14,21 @@ export interface TenantResource {
   readonly tenant_id: string;
 }
 
-export interface Wordlist {
-  banned: string[];
-  suspect: string[];
-}
-
-// AuthIntegrations.
-
-export interface EmailDomainRuleCondition {
-  // emailDomain is the domain name component of the email addresses that should
-  // match for this condition.
-  emailDomain: string;
-
-  // emailVerifiedRequired stipulates that this rule only applies when the user
-  // account has been marked as having their email address already verified.
-  emailVerifiedRequired: boolean;
-}
-
-// RoleRule describes the role assignment for when a user logs into Talk, how
-// they can have their account automatically upgraded to a specific role when
-// the domain for their email matches the one provided.
-export interface RoleRule extends Partial<EmailDomainRuleCondition> {
-  // role is the specific GQLUSER_ROLE that should be assigned to the newly created
-  // user depending on their email address.
-  role: GQLUSER_ROLE;
-}
-
-export interface AuthRules {
-  // roles allow the configuration of automatic role assignment based on the
-  // user's email address.
-  roles?: RoleRule[];
-
-  // restrictTo when populated, will restrict which users can login using this
-  // integration. If a user successfully logs in using the OIDCStrategy, but
-  // does not match the following rules, the user will not be created.
-  restrictTo?: EmailDomainRuleCondition[];
-}
-
-export interface AuthIntegration {
-  enabled: boolean;
-}
-
-export interface DisplayNameAuthIntegration {
-  displayNameEnable: boolean;
-}
-
-// SSOAuthIntegration is an AuthIntegration that provides a secret to the admins
-// of a tenant, where they can sign a SSO payload with it to provide to the
-// embed to allow single sign on.
-export interface SSOAuthIntegration
-  extends AuthIntegration,
-    DisplayNameAuthIntegration {
-  key: string;
-}
-
-// OIDCAuthIntegration provides a way to store Open ID Connect credentials. This
-// will be used in the admin to provide staff logins for users.
-export interface OIDCAuthIntegration
-  extends AuthIntegration,
-    DisplayNameAuthIntegration {
-  clientID: string;
-  clientSecret: string;
-  issuer: string;
-  authorizationURL: string;
-  jwksURI: string;
-  tokenURL: string;
-}
-
-export interface FacebookAuthIntegration extends AuthIntegration {
-  clientID: string;
-  clientSecret: string;
-}
-
-export interface GoogleAuthIntegration extends AuthIntegration {
-  clientID: string;
-  clientSecret: string;
-}
-
-export type LocalAuthIntegration = AuthIntegration;
-
-// AuthIntegrations describes all of the possible auth integration configurations.
-export interface AuthIntegrations {
-  // local is the auth integration for the local auth.
-  local: LocalAuthIntegration;
-
-  // sso is the external auth integration for the single sign on auth.
-  sso?: SSOAuthIntegration;
-
-  // sso is the external auth integration for the OpenID Connect auth.
-  oidc?: OIDCAuthIntegration;
-
-  // sso is the external auth integration for the Google auth.
-  google?: GoogleAuthIntegration;
-
-  // sso is the external auth integration for the Facebook auth.
-  facebook?: FacebookAuthIntegration;
-}
-
-export interface Auth {
-  integrations: AuthIntegrations;
-}
-
-// Tenant definition.
-
-export interface Tenant {
+/**
+ * Tenant describes a given Tenant on Talk that has Assets, Comments, and Users.
+ */
+export interface Tenant extends Settings {
   readonly id: string;
 
   // Domain is set when the tenant is created, and is used to retrieve the
   // specific tenant that the API request pertains to.
   domain: string;
 
-  moderation: GQLMODERATION_MODE;
-  requireEmailConfirmation: boolean;
-  infoBoxEnable: boolean;
-  infoBoxContent?: string;
-  questionBoxEnable: boolean;
-  questionBoxIcon?: string;
-  questionBoxContent?: string;
-  premodLinksEnable: boolean;
-  autoCloseStream: boolean;
-  closedTimeout: number;
-  closedMessage?: string;
-  customCssUrl?: string;
-  disableCommenting: boolean;
-  disableCommentingMessage?: string;
-
-  // editCommentWindowLength is the length of time (in milliseconds) after a
-  // comment is posted that it can still be edited by the author.
-  editCommentWindowLength: number;
-  charCountEnable: boolean;
-  charCount?: number;
-  organizationName: string;
-  organizationContactEmail: string;
-
-  // wordlist stores all the banned/suspect words.
-  wordlist: Wordlist;
-
-  // domains is the set of whitelisted domains.
+  // domains is the list of domains that are allowed to have the iframe load on.
   domains: string[];
 
-  // Set of configured authentication integrations.
-  auth: Auth;
+  organizationName: string;
+  organizationContactEmail: string;
 }
 
 /**
@@ -207,10 +78,27 @@ export async function createTenant(db: Db, input: CreateTenantInput) {
         },
       },
     },
+    karma: {
+      enabled: true,
+      thresholds: {
+        // By default, flaggers are reliable after one correct flag, and
+        // unreliable if there is an incorrect flag.
+        flag: { reliable: 1, unreliable: -1 },
+        comment: { reliable: 1, unreliable: -1 },
+      },
+    },
+    integrations: {
+      akismet: {
+        enabled: false,
+      },
+    },
   };
 
   // Create the new Tenant by merging it together with the defaults.
-  const tenant: Readonly<Tenant> = merge({}, input, defaults);
+  const tenant: Readonly<Tenant> = {
+    ...defaults,
+    ...input,
+  };
 
   // Insert the Tenant into the database.
   await collection(db).insert(tenant);
@@ -258,16 +146,18 @@ export async function retrieveAllTenants(db: Db) {
     .toArray();
 }
 
+export type UpdateTenantInput = Omit<Partial<Tenant>, "id" | "domain">;
+
 export async function updateTenant(
   db: Db,
   id: string,
-  update: Partial<CreateTenantInput>
+  update: UpdateTenantInput
 ) {
   // Get the tenant from the database.
   const result = await collection(db).findOneAndUpdate(
     { id },
     // Only update fields that have been updated.
-    { $set: dotize(update) },
+    { $set: dotize.convert(update) },
     // False to return the updated document instead of the original
     // document.
     { returnOriginal: false }

src/core/server/models/user.ts

@@ -1,5 +1,4 @@
 import bcrypt from "bcryptjs";
-import { merge } from "lodash";
 import { Db } from "mongodb";
 import uuid from "uuid";
 
@@ -131,11 +130,14 @@ export async function upsertUser(
   }
 
   // Merge the defaults and the input together.
-  const user: Readonly<User> = merge({}, defaults, input, {
+  const user: Readonly<User> = {
+    ...defaults,
+    ...input,
+
     // Specified last in the merge call, it will override any existing password
     // entry if it is defined.
     password: hashedPassword,
-  });
+  };
 
   // Create a query that will utilize a findOneAndUpdate to facilitate an upsert
   // operation to ensure no user has the same profile and/or email address. If

src/core/server/services/comments/index.ts

@@ -1,22 +1,68 @@
 import { Db } from "mongodb";
 
 import { Omit } from "talk-common/types";
-import { GQLCOMMENT_STATUS } from "talk-server/graph/tenant/schema/__generated__/types";
-import { createComment, CreateCommentInput } from "talk-server/models/comment";
+import { retrieveAsset } from "talk-server/models/asset";
+import {
+  createComment,
+  CreateCommentInput,
+  retrieveComment,
+} from "talk-server/models/comment";
 import { Tenant } from "talk-server/models/tenant";
+import { User } from "talk-server/models/user";
+import { processForModeration } from "talk-server/services/comments/moderation";
+import { Request } from "talk-server/types/express";
 
 export type CreateComment = Omit<
   CreateCommentInput,
   "status" | "action_counts"
 >;
 
-export async function create(db: Db, tenant: Tenant, input: CreateComment) {
-  // TODO: run the comment through the moderation phases.
-  const comment = await createComment(db, tenant.id, {
-    status: GQLCOMMENT_STATUS.ACCEPTED,
+export async function create(
+  mongo: Db,
+  tenant: Tenant,
+  author: User,
+  input: CreateComment,
+  req?: Request
+) {
+  const asset = await retrieveAsset(mongo, tenant.id, input.asset_id);
+  if (!asset) {
+    // TODO: (wyattjoh) return better error.
+    throw new Error("asset referenced does not exist");
+  }
+
+  // TODO: (wyattjoh) Check that the asset was visable.
+
+  if (input.parent_id) {
+    // Check to see that the reference parent ID exists.
+    const parent = await retrieveComment(mongo, tenant.id, input.parent_id);
+    if (!parent) {
+      // TODO: (wyattjoh) return better error.
+      throw new Error("parent comment referenced does not exist");
+    }
+
+    // TODO: (wyattjoh) Check that the parent comment was visible.
+  }
+
+  // Run the comment through the moderation phases.
+  const { status } = await processForModeration({
+    asset,
+    tenant,
+    comment: input,
+    author,
+    req,
+  });
+
+  // TODO: (wyattjoh) use the actions somehow.
+
+  const comment = await createComment(mongo, tenant.id, {
+    status,
     action_counts: {},
     ...input,
   });
 
+  if (input.parent_id) {
+    // TODO: update reply count of parent.
+  }
+
   return comment;
 }

src/core/server/services/comments/moderation/index.ts

@@ -0,0 +1,75 @@
+import { Omit, Promiseable } from "talk-common/types";
+import { GQLCOMMENT_STATUS } from "talk-server/graph/tenant/schema/__generated__/types";
+import { Action } from "talk-server/models/actions";
+import { Asset } from "talk-server/models/asset";
+import { Tenant } from "talk-server/models/tenant";
+import { CreateComment } from "talk-server/services/comments";
+
+import { User } from "talk-server/models/user";
+import { Request } from "talk-server/types/express";
+import { moderationPhases } from "./phases";
+
+// TODO: (wyattjoh) move into actions module.
+export type CreateAction = Omit<
+  Action,
+  "id" | "item_type" | "item_id" | "created_at"
+>;
+
+export interface PhaseResult {
+  actions: CreateAction[];
+  status: GQLCOMMENT_STATUS;
+}
+
+export interface ModerationPhaseContext {
+  asset: Asset;
+  tenant: Tenant;
+  comment: CreateComment;
+  author: User;
+  req?: Request;
+}
+
+export type ModerationPhase = (
+  context: ModerationPhaseContext
+) => Promiseable<PhaseResult>;
+
+export type IntermediatePhaseResult = Partial<PhaseResult> | void;
+
+export type IntermediateModerationPhase = (
+  context: ModerationPhaseContext
+) => Promiseable<IntermediatePhaseResult>;
+
+/**
+ * compose will create a moderation pipeline for which is executable with the
+ * passed actions.
+ */
+const compose = (
+  phases: IntermediateModerationPhase[]
+): ModerationPhase => async context => {
+  const actions: CreateAction[] = [];
+
+  // Loop over all the moderation phases and see if we've resolved the status.
+  for (const phase of phases) {
+    const result = await phase(context);
+    if (result) {
+      if (result.actions) {
+        actions.push(...result.actions);
+      }
+
+      // If this result contained a status, then we've finished resolving
+      // phases!
+      const { status } = result;
+      if (status) {
+        return { status, actions };
+      }
+    }
+  }
+
+  // If we didn't determine a different comment from a previous itteration, set
+  // it to 'NONE'.
+  return { status: GQLCOMMENT_STATUS.NONE, actions };
+};
+
+/**
+ * process the comment and return moderation details.
+ */
+export const processForModeration: ModerationPhase = compose(moderationPhases);

src/core/server/services/comments/moderation/phases/assetClosed.spec.ts

@@ -0,0 +1,42 @@
+import { Asset } from "talk-server/models/asset";
+import { Comment } from "talk-server/models/comment";
+import { Tenant } from "talk-server/models/tenant";
+import { User } from "talk-server/models/user";
+import { assetClosed } from "talk-server/services/comments/moderation/phases/assetClosed";
+
+describe("assetClosed", () => {
+  it("throws an error when the asset is closed", () => {
+    const asset = { closedAt: new Date() };
+
+    expect(() =>
+      assetClosed({
+        asset: asset as Asset,
+        tenant: (null as any) as Tenant,
+        comment: (null as any) as Comment,
+        author: (null as any) as User,
+      })
+    ).toThrow();
+  });
+
+  it("does not throw an error when the asset is not closed", () => {
+    const now = new Date();
+
+    expect(
+      assetClosed({
+        asset: { closedAt: new Date(now.getTime() + 60000) } as Asset,
+        tenant: (null as any) as Tenant,
+        comment: (null as any) as Comment,
+        author: (null as any) as User,
+      })
+    ).toBeUndefined();
+
+    expect(
+      assetClosed({
+        asset: {} as Asset,
+        tenant: (null as any) as Tenant,
+        comment: (null as any) as Comment,
+        author: (null as any) as User,
+      })
+    ).toBeUndefined();
+  });
+});

src/core/server/services/comments/moderation/phases/assetClosed.ts

@@ -0,0 +1,12 @@
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+// This phase checks to see if the asset being processed is closed or not.
+export const assetClosed: IntermediateModerationPhase = ({ asset }) => {
+  // Check to see if the asset has closed commenting...
+  if (asset.closedAt && asset.closedAt.valueOf() <= Date.now()) {
+    // TODO: (wyattjoh) return better error.
+    throw new Error("asset is currently closed for commenting");
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/commentLength.ts

@@ -0,0 +1,45 @@
+import {
+  GQLACTION_TYPE,
+  GQLCOMMENT_STATUS,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { ModerationSettings } from "talk-server/models/settings";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+const testCharCount = (settings: Partial<ModerationSettings>, length: number) =>
+  settings.charCountEnable && settings.charCount && length > settings.charCount;
+
+export const commentLength: IntermediateModerationPhase = async ({
+  asset,
+  tenant,
+  comment,
+}) => {
+  const length = comment.body.length;
+
+  // Check to see if the body is too short, if it is, then complain about it!
+  if (length < 2) {
+    // TODO: (wyattjoh) return better error.
+    throw new Error("comment body too short");
+  }
+
+  // Reject if the comment is too long
+  if (
+    testCharCount(tenant, length) ||
+    (asset.settings && testCharCount(asset.settings, length))
+  ) {
+    // Add the flag related to Trust to the comment.
+    return {
+      status: GQLCOMMENT_STATUS.REJECTED,
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "BODY_COUNT",
+          metadata: {
+            count: length,
+          },
+        },
+      ],
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/commentingDisabled.ts

@@ -0,0 +1,19 @@
+import { ModerationSettings } from "talk-server/models/settings";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+const testDisabledCommenting = (settings: Partial<ModerationSettings>) =>
+  settings.disableCommenting;
+
+export const commentingDisabled: IntermediateModerationPhase = ({
+  asset,
+  tenant,
+}) => {
+  // Check to see if the asset has closed commenting.
+  if (
+    testDisabledCommenting(tenant) ||
+    (asset.settings && testDisabledCommenting(asset.settings))
+  ) {
+    // TODO: (wyattjoh) return better error.
+    throw new Error("commenting has been disabled tenant wide");
+  }
+};

src/core/server/services/comments/moderation/phases/index.ts

@@ -0,0 +1,26 @@
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+import { premod } from "talk-server/services/comments/moderation/phases/premod";
+import { assetClosed } from "./assetClosed";
+import { commentingDisabled } from "./commentingDisabled";
+import { commentLength } from "./commentLength";
+import { karma } from "./karma";
+import { links } from "./links";
+import { spam } from "./spam";
+import { staff } from "./staff";
+import { wordlist } from "./wordlist";
+
+/**
+ * The moderation phases to apply for each comment being processed.
+ */
+export const moderationPhases: IntermediateModerationPhase[] = [
+  commentLength,
+  assetClosed,
+  commentingDisabled,
+  wordlist,
+  staff,
+  links,
+  karma,
+  spam,
+  premod,
+];

src/core/server/services/comments/moderation/phases/karma.ts

@@ -0,0 +1,40 @@
+import {
+  GQLACTION_TYPE,
+  GQLCOMMENT_STATUS,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+import {
+  getCommentTrustScore,
+  isReliableCommenter,
+} from "talk-server/services/users/karma";
+
+// This phase checks to see if the user making the comment is allowed to do so
+// considering their reliability (Trust) status.
+export const karma: IntermediateModerationPhase = ({ tenant, author }) => {
+  // If the user is not a reliable commenter (passed the unreliability
+  // threshold by having too many rejected comments) then we can change the
+  // status of the comment to `SYSTEM_WITHHELD`, therefore pushing the user's
+  // comments away from the public eye until a moderator can manage them. This
+  // of course can only be applied if the comment's current status is `NONE`,
+  // we don't want to interfere if the comment was rejected.
+  if (
+    tenant.karma.enabled &&
+    isReliableCommenter(tenant.karma.thresholds, author) === false
+  ) {
+    // Add the flag related to Trust to the comment.
+    return {
+      status: GQLCOMMENT_STATUS.SYSTEM_WITHHELD,
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "TRUST",
+          metadata: {
+            trust: getCommentTrustScore(author),
+          },
+        },
+      ],
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/links.ts

@@ -0,0 +1,49 @@
+import linkify from "linkify-it";
+import tlds from "tlds";
+
+import {
+  GQLACTION_TYPE,
+  GQLCOMMENT_STATUS,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { ModerationSettings } from "talk-server/models/settings";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+/**
+ * The preloaded linkify instance with common tlds.
+ */
+const testForLinks = linkify().tlds(tlds);
+
+const testPremodLinksEnable = (
+  settings: Partial<ModerationSettings>,
+  body: string
+) => settings.premodLinksEnable && testForLinks.test(body);
+
+// This phase checks the comment if it has any links in it if the check is
+// enabled.
+export const links: IntermediateModerationPhase = ({
+  asset,
+  tenant,
+  comment,
+  author,
+}) => {
+  if (
+    testPremodLinksEnable(tenant, comment.body) ||
+    (asset.settings && testPremodLinksEnable(asset.settings, comment.body))
+  ) {
+    // Add the flag related to Trust to the comment.
+    return {
+      status: GQLCOMMENT_STATUS.SYSTEM_WITHHELD,
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "LINKS",
+          metadata: {
+            links: comment.body,
+          },
+        },
+      ],
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/premod.ts

@@ -0,0 +1,28 @@
+import {
+  GQLCOMMENT_STATUS,
+  GQLMODERATION_MODE,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { ModerationSettings } from "talk-server/models/settings";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+const testModerationMode = (settings: Partial<ModerationSettings>) =>
+  settings.moderation === GQLMODERATION_MODE.PRE;
+
+// This phase checks to see if the settings have premod enabled, if they do,
+// the comment is premod, otherwise, it's just none.
+export const premod: IntermediateModerationPhase = ({ asset, tenant }) => {
+  // If the settings say that we're in premod mode, then the comment is in
+  // premod status.
+
+  // TODO: (wyattjoh) pull from the asset settings.
+  if (
+    testModerationMode(tenant) ||
+    (asset.settings && testModerationMode(asset.settings))
+  ) {
+    return {
+      status: GQLCOMMENT_STATUS.PREMOD,
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/spam.ts

@@ -0,0 +1,74 @@
+import { Client } from "akismet-api";
+
+import {
+  GQLACTION_TYPE,
+  GQLCOMMENT_STATUS,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+export const spam: IntermediateModerationPhase = async ({
+  asset,
+  tenant,
+  comment,
+  author,
+  req,
+}) => {
+  const integration = tenant.integrations.akismet;
+
+  // We can only check for spam if this comment originated from a graphql
+  // request via an HTTP call.
+  if (!req || !integration.enabled) {
+    return;
+  }
+
+  if (!integration.key || !integration.site) {
+    return;
+  }
+
+  // Create the Akismet client.
+  const client = new Client({
+    key: integration.key,
+    blog: integration.site,
+  });
+
+  // Grab the properties we need.
+  const userIP = req.ip;
+  if (!userIP) {
+    return;
+  }
+
+  const userAgent = req.get("User-Agent");
+  if (!userAgent || userAgent.length === 0) {
+    return;
+  }
+
+  const referrer = req.get("Referrer");
+  if (!referrer || referrer.length === 0) {
+    return;
+  }
+
+  // Check the comment for spam.
+  const isSpam = await client.checkSpam({
+    user_ip: userIP, // REQUIRED
+    referrer, // REQUIRED
+    user_agent: userAgent, // REQUIRED
+    comment_content: comment.body,
+    permalink: asset.url,
+    comment_author: author.displayName || author.username || "",
+    comment_type: "comment",
+    is_test: false,
+  });
+  if (isSpam) {
+    return {
+      status: GQLCOMMENT_STATUS.SYSTEM_WITHHELD,
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "SPAM_COMMENT",
+        },
+      ],
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/staff.ts

@@ -0,0 +1,21 @@
+import {
+  GQLCOMMENT_STATUS,
+  GQLUSER_ROLE,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+
+// If a given user is a staff member, always approve their comment.
+export const staff: IntermediateModerationPhase = ({
+  asset,
+  tenant,
+  comment,
+  author,
+}) => {
+  if (author.role !== GQLUSER_ROLE.COMMENTER) {
+    return {
+      status: GQLCOMMENT_STATUS.ACCEPTED,
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/phases/wordlist.ts

@@ -0,0 +1,50 @@
+import {
+  GQLACTION_TYPE,
+  GQLCOMMENT_STATUS,
+} from "talk-server/graph/tenant/schema/__generated__/types";
+import { IntermediateModerationPhase } from "talk-server/services/comments/moderation";
+import { containsMatchingPhrase } from "talk-server/services/comments/moderation/wordlist";
+
+// This phase checks the comment against the wordlist.
+export const wordlist: IntermediateModerationPhase = ({
+  asset,
+  tenant,
+  comment,
+  author,
+}) => {
+  // Decide the status based on whether or not the current asset/settings
+  // has pre-mod enabled or not. If the comment was rejected based on the
+  // wordlist, then reject it, otherwise if the moderation setting is
+  // premod, set it to `premod`.
+  if (containsMatchingPhrase(tenant.wordlist.banned, comment.body)) {
+    // Add the flag related to Trust to the comment.
+    return {
+      status: GQLCOMMENT_STATUS.REJECTED,
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "BANNED_WORD",
+        },
+      ],
+    };
+  }
+
+  // If the comment has a suspect word or a link, we need to add a
+  // flag to it to indicate that it needs to be looked at.
+  // Otherwise just return the new comment.
+
+  // If the wordlist has matched the suspect word filter and we haven't disabled
+  // auto-flagging suspect words, then we should flag the comment!
+  if (containsMatchingPhrase(tenant.wordlist.suspect, comment.body)) {
+    return {
+      actions: [
+        {
+          action_type: GQLACTION_TYPE.FLAG,
+          group_id: "SUSPECT_WORD",
+        },
+      ],
+    };
+  }
+
+  return;
+};

src/core/server/services/comments/moderation/wordlist.spec.ts

@@ -0,0 +1,46 @@
+import { containsMatchingPhrase } from "talk-server/services/comments/moderation/wordlist";
+
+const phrases = [
+  "cookies",
+  "how to do bad things",
+  "how to do really bad things",
+  "s h i t",
+  "$hit",
+  "p**ch",
+  "p*ch",
+];
+
+describe("containsMatchingPhrase", () => {
+  it("does match on a word in the list", () => {
+    [
+      "how to do really bad things",
+      "what is cookies",
+      "cookies",
+      "COOKIES.",
+      "how to do bad things",
+      "How To do bad things!",
+      "This stuff is $hit!",
+      "That's a p**ch!",
+    ].forEach(word => {
+      expect(containsMatchingPhrase(phrases, word)).toEqual(true);
+    });
+  });
+
+  it("does not match on a word not in the list", () => {
+    [
+      "how to",
+      "cookie",
+      "how to be a great person?",
+      "how to not do really bad things?",
+      "i have $100 dollars.",
+      "I have bad $ hit lling",
+      "That's a p***ch!",
+    ].forEach(word => {
+      expect(containsMatchingPhrase(phrases, word)).toEqual(false);
+    });
+  });
+
+  it("allows an empty list", () => {
+    expect(containsMatchingPhrase([], "test")).toEqual(false);
+  });
+});

src/core/server/services/comments/moderation/wordlist.ts

@@ -0,0 +1,25 @@
+/**
+ * Escape string for special regular expression characters.
+ */
+export function escapeRegExp(str: string) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+}
+
+/**
+ * Generate a regular expression that catches the `phrases`.
+ */
+export function generateRegExp(phrases: string[]) {
+  const inner = phrases
+    .map(phrase =>
+      phrase
+        .split(/\s+/)
+        .map(word => escapeRegExp(word))
+        .join('[\\s"?!.]+')
+    )
+    .join("|");
+
+  return new RegExp(`(^|[^\\w])(${inner})(?=[^\\w]|$)`, "iu");
+}
+
+export const containsMatchingPhrase = (phrases: string[], testString: string) =>
+  phrases.length > 0 ? generateRegExp(phrases).test(testString) : false;

src/core/server/services/mongodb/index.ts

@@ -1,5 +1,5 @@
 import { Db, MongoClient } from "mongodb";
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 
 /**
  * create will connect to the MongoDB instance identified in the configuration.

src/core/server/services/redis/index.ts

@@ -1,5 +1,5 @@
 import RedisClient, { Redis } from "ioredis";
-import { Config } from "talk-server/config";
+import { Config } from "talk-common/config";
 
 /**
  * create will connect to the Redis instance identified in the configuration.