cc-archive · brenoferreira · Jul 25, 2019 · Jun 20, 2019 · Jun 20, 2019 · Jun 25, 2019
diff --git a/build/webpack-base-conf.js b/build/webpack-base-conf.js
@@ -23,7 +23,7 @@ const createLintingRule = () => ({
 module.exports = {
   context: path.resolve(__dirname, '../'),
   entry: {
-    app: './src/main.js'
+    app: './src/clientEntry.js'
   },
   output: {
     path: config.build.assetsRoot,

diff --git a/build/webpack-prod-conf.js b/build/webpack-prod-conf.js
@@ -10,6 +10,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin')
 const ExtractTextPlugin = require('extract-text-webpack-plugin')
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const VueSSRClientPlugin = require('vue-server-renderer/client-plugin');
 
 const webpackConfig = merge(baseWebpackConfig, {
   module: {
@@ -110,7 +111,13 @@ const webpackConfig = merge(baseWebpackConfig, {
         from: path.resolve(__dirname, '../src/assets'),
         to: config.build.assetsSubDirectory + '/img',
       }
-    ])
+    ]),
+    // extract webpack runtime & manifest to avoid vendor chunk hash changing
+    // on every build.
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest'
+    }),
+    new VueSSRClientPlugin()
   ]
 })
 

diff --git a/build/webpack-server-conf.js b/build/webpack-server-conf.js
@@ -0,0 +1,43 @@
+const merge = require('webpack-merge');
+const nodeExternals = require('webpack-node-externals');
+const VueSSRServerPlugin = require('vue-server-renderer/server-plugin');
+const baseConfig = require('./webpack-base-conf.js');
+
+module.exports = merge(baseConfig, {
+  // Point entry to your app's server entry file
+  entry: {
+    app: './src/serverEntry.js'
+  },
+  // This allows webpack to handle dynamic imports in a Node-appropriate
+  // fashion, and also tells `vue-loader` to emit server-oriented code when
+  // compiling Vue components.
+  target: 'node',
+
+  // For bundle renderer source map support
+  devtool: 'source-map',
+
+  // This tells the server bundle to use Node-style exports
+  output: {
+    libraryTarget: 'commonjs2'
+  },
+
+  // https://webpack.js.org/configuration/externals/#function
+  // https://github.com/liady/webpack-node-externals
+  // Externalize app dependencies. This makes the server build much faster
+  // and generates a smaller bundle file.
+  externals: nodeExternals({
+    // do not externalize dependencies that need to be processed by webpack.
+    // you can add more file types here e.g. raw *.vue files
+    // you should also whitelist deps that modifies `global` (e.g. polyfills)
+    whitelist: /\.css$/
+  }),
+
+  // This is the plugin that turns the entire output of the server build
+  // into a single JSON file. The default file name will be
+  // `vue-ssr-server-bundle.json`
+  plugins: [
+    new VueSSRServerPlugin({
+      filename: 'server-bundle.json'
+    })
+  ]
+});
diff --git a/index-server.html b/index-server.html
@@ -0,0 +1,47 @@
+<!DOCTYPE HTML>
+<html lang=en>
+    <head>
+      <meta charset="utf-8">
+      <meta name=viewport content="width=device-width,initial-scale=1">
+      <meta name="twitter:card" content="summary_large_image">
+      <meta name=description content="A new Creative Commons search tool for creators seeking to discover and reuse free resources with greater ease.">
+      <meta name="twitter:site" content="@creativecommons">
+      <meta name="og:title" content="Creative Commons">
+      <meta name="og:image" content="{{ state.image && state.image.url ? state.image.url : 'https://ccsearch.creativecommons.org/static/img/cc-logo_large_black.png'}}">
+      <meta name="og:description" content="Empowering the world to share through 6 simple licenses + a global community of advocates for open. ">
+      <meta name="twitter:site" content="https://creativecommons.org">
+      <meta property="og:url" content="https://creativecommons.org">
+      <meta property="og:site_name" content="Creative Commons">
+      <% if (process.env.NODE_ENV == 'production') { %>
+        <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
+      <% } %>
+      <title>CC Search</title>
+      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.min.css">
+      <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-150x150.png" sizes="32x32">
+      <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192">
+      <link rel="apple-touch-icon-precomposed" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png">
+      <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700%7CRoboto+Condensed&amp;ver=4.9.8" type="text/css" media="all">
+    </head>
+    <body>
+      <div data-server-rendered="true">
+        <!--vue-ssr-outlet-->
+        {{{ renderState() }}}
+        {{{ renderScripts() }}}
+      </div>
+      <script>
+        // Use production Google Analytics ID if ccsearch is in the URL, otherwise use development/staging ID
+        // TODO: Refactor this to use environment variables instead of hardcoding IDs here.
+        var gaID = document.location.hostname.indexOf('ccsearch') >= 0 ? 'UA-2010376-36' : 'UA-2010376-33';
+        /* eslint-disable */
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+        /* eslint-enable */
+
+        ga('create', gaID, 'auto');
+        ga('send', 'pageview');
+      </script>
+
+    </body>
+</html>
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
       <meta name=description content="A new Creative Commons search tool for creators seeking to discover and reuse free resources with greater ease.">
       <meta name="twitter:site" content="@creativecommons">
       <meta name="og:title" content="Creative Commons">
+      <meta name="og:image" content="{{ state.image && state.image.url ? state.image.url : 'https://ccsearch.creativecommons.org/static/img/cc-logo_large_black.png'}}">
       <meta name="og:description" content="Empowering the world to share through 6 simple licenses + a global community of advocates for open. ">
       <meta name="twitter:site" content="https://creativecommons.org">
       <meta property="og:url" content="https://creativecommons.org">
@@ -20,45 +21,10 @@
       <link rel="icon" type="image/png" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png" sizes="192x192">
       <link rel="apple-touch-icon-precomposed" href="https://d15omoko64skxi.cloudfront.net/wp-content/uploads/2016/05/cc-site-icon-300x300.png">
       <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700%7CRoboto+Condensed&amp;ver=4.9.8" type="text/css" media="all">
-      <style>
-        .feedback-tab {
-          display: block;
-          position: fixed;
-          right: -20px;
-          top: 50%;
-          background: #049bce;
-          transform: rotate(270deg);
-          transform-origin: top;
-          border-top: 5px solid #fff;
-          border-left: 5px solid #fff;
-          border-right: 5px solid #fff;
-          border-radius: 20px 20px 0 0;
-          box-shadow: 0 0 10px 0 rgba(0,0,0,.8);
-          z-index: 1000;
-          padding: .5rem 1rem;
-          color: #fff;
-          font-size: 20px;
-        }
-
-        .feedback-tab:hover {
-          color: white;
-          text-decoration: underline;
-        }
-
-        .about-page_provider-stats-ctr{
-          overflow-x: auto
-        }
-
-        @media screen and (max-width: 670px) {
-          .feedback-tab {
-            display: none;
-          }
-        }
-      </style>
     </head>
     <body>
-      <div id="app"></div>
-
+      <div id="app">
+      </div>
       <script>
         // Use production Google Analytics ID if ccsearch is in the URL, otherwise use development/staging ID
         // TODO: Refactor this to use environment variables instead of hardcoding IDs here.