From bb5907d21f3200a51772a2cc2da8f2b7a85b7952 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Thu, 7 Jan 2021 22:00:27 +0300
Subject: [PATCH] Replacing REMARK_URL, fix remark_config stub, add minify
 html/css in templates

---
 Dockerfile.artifacts                          |   3 +-
 docker-init.sh                                |   2 +-
 frontend/app/__stubs__/remark-config.ts       |   4 +
 frontend/app/common/constants.config.ts       |   2 +-
 frontend/app/common/fetcher.ts                |   7 +-
 .../app/components/list-comments/index.ts     |   1 -
 .../list-comments/list-comments.tsx           |   3 +-
 frontend/app/last-comments.tsx                |  14 +-
 frontend/jest.config.js                       |   1 +
 frontend/package.json                         |   6 +-
 frontend/templates/comments.ejs               |  84 ++++++++
 frontend/templates/deleteme.ejs               |   3 +-
 frontend/tsconfig.json                        |   1 +
 frontend/webpack.config.js                    | 197 ++++++++++--------
 14 files changed, 222 insertions(+), 106 deletions(-)
 create mode 100644 frontend/app/__stubs__/remark-config.ts
 create mode 100644 frontend/templates/comments.ejs

diff --git a/Dockerfile.artifacts b/Dockerfile.artifacts
index 80308ec3..1fc5945d 100644
--- a/Dockerfile.artifacts
+++ b/Dockerfile.artifacts
@@ -42,7 +42,8 @@ COPY --from=build-frontend /srv/frontend/public/ web
 
 RUN \
     export WEB_ROOT=/build/backend/web && \
-    sed -i "s|https://demo.remark42.com|http://127.0.0.1:8080|g" ${WEB_ROOT}/*.js && \
+    sed -i "s|{% REMARK_URL %}http://127.0.0.1:8080|g" ${WEB_ROOT}/*.js && \
+    sed -i "s|{% REMARK_URL %}http://127.0.0.1:8080|g" ${WEB_ROOT}/*.html && \
     statik --src=${WEB_ROOT} --dest=/build/backend/app/rest -p api -f && \
     statik --src=/build/backend/templates --dest=/build/backend/app -p templates -ns templates -f && \
     ls -la /build/backend/app/templates/statik.go && \
diff --git a/docker-init.sh b/docker-init.sh
index a329c67f..9aad5b4d 100755
--- a/docker-init.sh
+++ b/docker-init.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 echo "prepare environment"
-# replace BASE_URL constant by REMARK_URL
+# replace {% REMARK_URL %} by content of REMARK_URL variable
 sed -i "s|{% REMARK_URL %}|${REMARK_URL}|g" /srv/web/*.html
 sed -i "s|{% REMARK_URL %}|${REMARK_URL}|g" /srv/web/*.js
 
diff --git a/frontend/app/__stubs__/remark-config.ts b/frontend/app/__stubs__/remark-config.ts
new file mode 100644
index 00000000..28545abf
--- /dev/null
+++ b/frontend/app/__stubs__/remark-config.ts
@@ -0,0 +1,4 @@
+window.remark_config = {
+  host: 'http://test.com',
+  site_id: 'remark',
+};
diff --git a/frontend/app/common/constants.config.ts b/frontend/app/common/constants.config.ts
index 6bdbac53..2da61903 100644
--- a/frontend/app/common/constants.config.ts
+++ b/frontend/app/common/constants.config.ts
@@ -1,4 +1,4 @@
-export const BASE_URL = (window.remark_config && window.remark_config.host) || process.env.REMARK_URL!;
+export const BASE_URL = window.remark_config.host;
 export const NODE_ID = process.env.REMARK_NODE!;
 export const API_BASE = '/api/v1';
 export const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
diff --git a/frontend/app/common/fetcher.ts b/frontend/app/common/fetcher.ts
index 45a8194b..9b76992c 100644
--- a/frontend/app/common/fetcher.ts
+++ b/frontend/app/common/fetcher.ts
@@ -43,7 +43,7 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
       contentType = 'application/json',
       logError = true,
     } = typeof data === 'string' ? { url: data } : data;
-    const basename = `${BASE_URL}${overriddenApiBase}`;
+    const baseUrl = `${BASE_URL}${overriddenApiBase}`;
 
     const headers = new Headers({
       Accept: 'application/json',
@@ -54,11 +54,12 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
       headers.append('Content-Type', contentType);
     }
 
+    // Save token in memory and pass it into headers in case if storing cookies is disabled
     if (activeJwtToken) {
       headers.append(HEADER_X_JWT, activeJwtToken);
     }
 
-    let rurl = `${basename}${url}`;
+    let rurl = `${baseUrl}${url}`;
 
     const parameters: RequestInit = {
       method,
@@ -118,7 +119,7 @@ const fetcher = methods.reduce<Partial<FetcherObject>>((acc, method) => {
           });
         }
 
-        if (res.headers.has('Content-Type') && res.headers.get('Content-Type')!.indexOf('application/json') === 0) {
+        if (res.headers.get('Content-Type')?.startsWith('application/json')) {
           return res.json();
         }
 
diff --git a/frontend/app/components/list-comments/index.ts b/frontend/app/components/list-comments/index.ts
index 9293c61d..08d6578b 100644
--- a/frontend/app/components/list-comments/index.ts
+++ b/frontend/app/components/list-comments/index.ts
@@ -1,4 +1,3 @@
-import './list-comments.css';
 import './__item/list-comments__item.css';
 
 export { default } from './list-comments';
diff --git a/frontend/app/components/list-comments/list-comments.tsx b/frontend/app/components/list-comments/list-comments.tsx
index c40de0fc..96c000a9 100644
--- a/frontend/app/components/list-comments/list-comments.tsx
+++ b/frontend/app/components/list-comments/list-comments.tsx
@@ -1,5 +1,6 @@
 import { h, FunctionComponent } from 'preact';
 import { useIntl } from 'react-intl';
+import classnames from 'classnames';
 
 import type { Comment as CommentType } from 'common/types';
 import Comment from 'components/comment';
@@ -14,7 +15,7 @@ const ListComments: FunctionComponent<ListCommentsProps> = ({ comments = [] }) =
   const intl = useIntl();
 
   return (
-    <div className={styles.root}>
+    <div className={classnames('comments-list', styles.root)}>
       {comments.map(comment => (
         <Comment
           intl={intl}
diff --git a/frontend/app/last-comments.tsx b/frontend/app/last-comments.tsx
index fd2ce0b0..7780abe1 100644
--- a/frontend/app/last-comments.tsx
+++ b/frontend/app/last-comments.tsx
@@ -22,27 +22,23 @@ async function init(): Promise<void> {
   const nodes = document.getElementsByClassName(LAST_COMMENTS_NODE_CLASSNAME);
 
   if (!nodes) {
-    console.error("Remark42: Can't find last comments nodes.");
-    return;
+    throw new Error("Remark42: Can't find last comments nodes.");
   }
 
-  try {
-    window.remark_config = window.remark_config || {};
-  } catch (e) {
-    console.error('Remark42: Config object is undefined.');
-    return;
+  if (!window.remark_config) {
+    throw new Error('Remark42: Config object is undefined');
   }
 
   const { site_id, max_last_comments } = window.remark_config;
 
   if (!site_id) {
-    console.error('Remark42: Site ID is undefined.');
-    return;
+    throw new Error('Remark42: Site ID is undefined.');
   }
 
   (Array.from(nodes) as HTMLElement[]).forEach(node => {
     const max = (node.dataset.max && parseInt(node.dataset.max, 10)) || max_last_comments || DEFAULT_LAST_COMMENTS_MAX;
     const locale = getLocale(window.remark_config);
+
     Promise.all([getLastComments(site_id, max), loadLocale(locale)]).then(([comments, messages]) => {
       try {
         render(
diff --git a/frontend/jest.config.js b/frontend/jest.config.js
index 76d1962a..f5ec72f3 100644
--- a/frontend/jest.config.js
+++ b/frontend/jest.config.js
@@ -19,6 +19,7 @@ module.exports = {
   setupFilesAfterEnv: [
     'jest-localstorage-mock',
     '<rootDir>/app/__mocks__/headers.ts',
+    '<rootDir>/app/__stubs__/remark-config.ts',
     '<rootDir>/app/__stubs__/static-config.ts',
   ],
   collectCoverageFrom: ['!**/__mocks__/**', '!**/__stubs__/**', '!app/locales/**'],
diff --git a/frontend/package.json b/frontend/package.json
index 46f87cf6..a764704f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -5,12 +5,12 @@
   "scripts": {
     "build": "webpack --mode production",
     "build:analyze": "webpack --mode production --analyze",
-    "start": "webpack serve --mode development",
-    "dev": "cross-env REMARK_URL=http://127.0.0.1:8080 run-s npm start",
+    "start": "cross-env REMARK_API_BASE_URL=https://demo.remark42.com webpack serve --mode development",
+    "dev": "cross-env REMARK_URL=http://127.0.0.1:8080 webpack serve --mode development",
     "lint": "run-p lint:*",
     "test": "jest",
     "test:coverage": "jest --coverage",
-    "check": "cross-env NODE_ENV=production npm run build && run-p check:*",
+    "check": "cross-env NODE_ENV=production run-s build && run-p check:*",
     "check:types": "tsc -p tsconfig.json --noEmit",
     "check:translation": "run-s translation:extract translation:check",
     "check:size": "size-limit",
diff --git a/frontend/templates/comments.ejs b/frontend/templates/comments.ejs
new file mode 100644
index 00000000..cfdbd8d3
--- /dev/null
+++ b/frontend/templates/comments.ejs
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <title>Remark42 demo</title>
+    <style>
+      /* stylelint-disable mavrin/stylelint-declaration-use-css-custom-properties */
+      body {
+        margin: 0;
+        padding: 20px;
+        text-align: center;
+        font: 18px/24px Helvetica, Arial, sans-serif;
+        color: #333;
+      }
+
+      article {
+        display: block;
+        text-align: left;
+        max-width: 640px;
+        margin: 0 auto;
+      }
+
+      h1 {
+        font-size: 50px;
+        margin-left: -0.05em;
+      }
+
+      ul {
+        color: rgb(23, 67, 78);
+      }
+
+      a {
+        color: rgb(79, 187, 214);
+        text-decoration: none;
+      }
+
+      a:hover {
+        color: rgb(94, 167, 177);
+        text-decoration: underline;
+      }
+    </style>
+  </head>
+  <body>
+    <article>
+      <h1><a href="https://remark42.com/">Remark42</a></h1>
+      <p id="title"></p>
+      <div id="remark42"></div>
+    </article>
+
+    <script>
+      var query = (function() {
+        if (window.location.search.length === 0) return {};
+        return window.location.search
+          .substr(1)
+          .split('&')
+          .map(function(item) {
+            return item.split('=');
+          })
+          .reduce(function(carry, item) {
+            carry[item[0]] = decodeURIComponent(item[1]);
+            return carry;
+          }, {});
+      })();
+      if (query.site_id && query.url) {
+        var titleElement = document.getElementById('title');
+        titleElement.innerHTML = 'Comments for <a href="' + query.url + '">' + query.url + '</a>';
+        var remark_config = {
+          site_id: query.site_id,
+          host: '<%= htmlWebpackPlugin.options.REMARK_URL %>',
+          url: query.url
+        };
+        (function(c) {
+          for(var i = 0; i < c.length; i++){
+            var d = document, s = d.createElement('script');
+            s.src = remark_config.host + '/web/' +c[i] +'.js';
+            (d.head || d.body).appendChild(s);
+          }
+        })(remark_config.components || ['embed']);
+      }
+    </script>
+    <noscript> Please enable JavaScript to view the comments powered by Remark. </noscript>
+  </body>
+</html>
\ No newline at end of file
diff --git a/frontend/templates/deleteme.ejs b/frontend/templates/deleteme.ejs
index 22cdbe36..75465cd6 100644
--- a/frontend/templates/deleteme.ejs
+++ b/frontend/templates/deleteme.ejs
@@ -6,6 +6,7 @@
     <title>Delete Me</title>
     <base target="_blank" />
     <style>
+      /* stylelint-disable mavrin/stylelint-declaration-use-css-custom-properties */
       html,
       body {
         -webkit-font-smoothing: antialiased;
@@ -35,7 +36,7 @@
       }
 
       .preloader {
-        color: #fff; /* stylelint-disable */
+        color: #fff;
         position: relative;
         transform: translateZ(0);
         animation-delay: -0.16s;
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 28b771cc..42c8166b 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -15,6 +15,7 @@
     "baseUrl": "app" ,
     "esModuleInterop": true,
     "skipLibCheck": true,
+    "sourceMap": true
   },
   "include": ["app/typings", "app/**/*.tsx", "app/**/*.ts"],
   "exclude": ["node_modules"]
diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
index 3fdb843a..eaeb36df 100644
--- a/frontend/webpack.config.js
+++ b/frontend/webpack.config.js
@@ -11,11 +11,20 @@ const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 const babelConfig = require('./.babelrc.js');
 
 const NODE_ID = 'remark42';
-const REMARK_URL = '{% REMARK_URL %}';
 const PUBLIC_PATH = '/web';
+const PORT = process.env.PORT || 9000;
+const REMARK_API_BASE_URL = process.env.REMARK_API_BASE_URL || 'http://127.0.0.1:8080';
+const DEVSERVER_BASE_PATH = process.env.DEVSERVER_BASE_PATH || 'http://127.0.0.1:9000';
 const PUBLIC_FOLDER_PATH = path.resolve(__dirname, 'public');
 const CUSTOM_PROPERTIES_PATH = path.resolve(__dirname, './app/custom-properties.css');
 
+/**
+ * Generates excludes for babel-loader
+ *
+ * Exclude is a module that has >=es6 code and resides in node_modules.
+ * By defaut babel-loader ignores everything from node_modules,
+ * so we have to exclude from ignore these modules
+ */
 const exclude = [
   '@github/markdown-toolbar-element',
   '@github/text-expander-element',
@@ -24,10 +33,28 @@ const exclude = [
   'intl-messageformat-parser',
 ].map(m => path.resolve(__dirname, 'node_modules', m));
 
-module.exports = (_, { mode, analyze, env }) => {
-  const isDev = mode === 'development';
+const htmlMinifyOptions = {
+  minifyCSS: true,
+  minifyJS: true,
+  removeComments: true,
+  removeRedundantAttributes: true,
+  removeScriptTypeAttributes: true,
+  removeStyleLinkTypeAttributes: true,
+  sortAttributes: true,
+  sortClassName: true,
+  useShortDoctype: true,
+};
 
+module.exports = (_, { mode, analyze }) => {
+  const isDev = mode === 'development';
+  // Use REMARK_URL or predefined host in dev environment
+  // In development: We use `http://127.0.0.1:9000` for access to backend and backend is accessable via dev server proxy
+  // In production: {% REMARK_URL %} will be replaced by `sed` on start of prod
+  const REMARK_URL = isDev ? DEVSERVER_BASE_PATH : '{% REMARK_URL %}';
+
+  // Add debug lib only for developmet throw webpack chuncks and keep code clear
   const preactDebug = isDev ? ['preact/debug'] : [];
+
   const entry = {
     embed: './app/embed.ts',
     counter: './app/counter.ts',
@@ -61,10 +88,12 @@ module.exports = (_, { mode, analyze, env }) => {
   const getTsRule = (babelEnvConfig = {}) => {
     return {
       test: /\.tsx?$/,
+      exclude: /node_modules/,
       use: [
         {
           loader: 'babel-loader',
           options: {
+            exclude,
             cacheDirectory: true,
             ...babelEnvConfig,
           },
@@ -76,20 +105,12 @@ module.exports = (_, { mode, analyze, env }) => {
           },
         },
       ],
-      /**
-       * Generates excludes for babel-loader
-       *
-       * Exclude is a module that has >=es6 code and resides in node_modules.
-       * By defaut babel-loader ignores everything from node_modules,
-       * so we have to exclude from ignore these modules
-       */
-      exclude,
     };
   };
 
   const cssRule = {
     test: /\.css$/,
-    exclude: /\.module\.css$/,
+    exclude: [/\.module\.css$/, /node_modules/],
     use: [
       isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
       'css-loader',
@@ -110,6 +131,7 @@ module.exports = (_, { mode, analyze, env }) => {
 
   const cssModulesRule = {
     test: /\.module\.css$/,
+    exclude: /node_modules/,
     use: [
       isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
       {
@@ -138,81 +160,21 @@ module.exports = (_, { mode, analyze, env }) => {
 
   const fileRule = {
     test: /\.(png|jpg|jpeg|gif|svg)$/,
+    exclude: /node_modules/,
     use: {
       loader: 'file-loader',
       options: {
-        name: isDev ? 'files/[name].[contenthash].[ext]' : 'files/[contenthash:6].[ext]',
+        name: '[name].[ext]',
+        publicPath: PUBLIC_PATH,
       },
     },
   };
 
   const rules = [cssRule, cssModulesRule, fileRule];
 
-  const plugins = [
-    ...(isDev
-      ? [
-          new CleanWebpackPlugin(),
-          new RefreshPlugin(),
-          new webpack.ProgressPlugin(),
-          new webpack.HotModuleReplacementPlugin(),
-        ]
-      : []),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(mode),
-      'process.env.REMARK_NODE': JSON.stringify(NODE_ID),
-      'process.env.REMARK_URL': isDev ? 'window.location.origin' : JSON.stringify(REMARK_URL),
-    }),
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-    }),
-    new ForkTsCheckerWebpackPlugin(),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/iframe.ejs'),
-      filename: 'iframe.html',
-      inject: false,
-      env: mode,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/demo.ejs'),
-      filename: 'index.html',
-      inject: false,
-      REMARK_URL,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/counter.ejs'),
-      filename: 'counter.html',
-      inject: false,
-      REMARK_URL,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/last-comments.ejs'),
-      filename: 'last-comments.html',
-      inject: false,
-      REMARK_URL,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/deleteme.ejs'),
-      filename: 'deleteme.html',
-      inject: false,
-      REMARK_URL,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/markdown-help.html'),
-      filename: 'markdown-help.html',
-      inject: false,
-    }),
-    new HtmlWebpackPlugin({
-      template: path.resolve(__dirname, 'templates/privacy.html'),
-      filename: 'privacy.html',
-      inject: false,
-    }),
-  ];
-
   const devServer = {
-    host: '0.0.0.0',
-    port: process.env.PORT || 9000,
+    port: PORT,
     contentBase: PUBLIC_FOLDER_PATH,
-    publicPath: PUBLIC_PATH,
     disableHostCheck: true,
     historyApiFallback: true,
     quiet: true,
@@ -223,20 +185,31 @@ module.exports = (_, { mode, analyze, env }) => {
     overlay: false,
     stats: 'minimal',
     watchOptions: {
-      ignored: [path.resolve(__dirname, 'build'), path.resolve(__dirname, 'node_modules')],
+      ignored: [PUBLIC_FOLDER_PATH, path.resolve(__dirname, 'node_modules')],
     },
     proxy: [
-      { path: '/api', target: REMARK_URL, changeOrigin: true },
-      { path: '/auth', target: REMARK_URL, changeOrigin: true },
+      { path: '/api', target: REMARK_API_BASE_URL, changeOrigin: true },
+      { path: '/auth', target: REMARK_API_BASE_URL, changeOrigin: true },
     ],
   };
 
+  const plugins = [
+    ...(isDev ? [new CleanWebpackPlugin(), new RefreshPlugin(), new webpack.HotModuleReplacementPlugin()] : []),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(mode),
+      'process.env.REMARK_NODE': JSON.stringify(NODE_ID),
+      'process.env.REMARK_URL': isDev ? 'window.location.origin' : JSON.stringify(REMARK_URL),
+    }),
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    }),
+  ];
+
   const config = {
     entry,
+    devtool: 'source-map',
     resolve,
     optimization,
-    stats: 'minimal',
-    devServer: env.WEBPACK_SERVE && devServer,
   };
 
   const legacyConfig = {
@@ -275,6 +248,63 @@ module.exports = (_, { mode, analyze, env }) => {
     },
     plugins: [
       ...plugins,
+      new ForkTsCheckerWebpackPlugin(),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/iframe.ejs'),
+        filename: 'iframe.html',
+        inject: false,
+        env: mode,
+        minify: htmlMinifyOptions,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/demo.ejs'),
+        filename: 'index.html',
+        inject: false,
+        REMARK_URL,
+        minify: htmlMinifyOptions,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/counter.ejs'),
+        filename: 'counter.html',
+        inject: false,
+        REMARK_URL,
+        minify: htmlMinifyOptions,
+      }),
+      // new HtmlWebpackPlugin({
+      //   template: path.resolve(__dirname, 'templates/comments.ejs'),
+      //   filename: 'comments.html',
+      //   inject: false,
+      //   env: mode,
+      //   REMARK_URL,
+      //   minify: htmlMinifyOptions,
+      // }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/last-comments.ejs'),
+        filename: 'last-comments.html',
+        inject: false,
+        env: mode,
+        REMARK_URL,
+        minify: htmlMinifyOptions,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/deleteme.ejs'),
+        filename: 'deleteme.html',
+        inject: false,
+        REMARK_URL,
+        minify: htmlMinifyOptions,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/markdown-help.html'),
+        filename: 'markdown-help.html',
+        inject: false,
+        minify: htmlMinifyOptions,
+      }),
+      new HtmlWebpackPlugin({
+        template: path.resolve(__dirname, 'templates/privacy.html'),
+        filename: 'privacy.html',
+        inject: false,
+        minify: htmlMinifyOptions,
+      }),
       ...(analyze
         ? [
             new BundleAnalyzerPlugin({
@@ -285,12 +315,9 @@ module.exports = (_, { mode, analyze, env }) => {
           ]
         : []),
     ],
+    devServer,
   };
 
-  if (isDev) {
-    return modernConfig;
-  }
-
   return [legacyConfig, modernConfig];
 };
 module.exports.CUSTOM_PROPERTIES_PATH = CUSTOM_PROPERTIES_PATH;