add the ability to configure the 'simple_view' parameter from the client,

the parameter is not required, but if set, it will overwrite the one that came from the backend
issues-916

README.md

@@ -463,10 +463,12 @@ Add this snippet to the bottom of web page:
     theme: 'dark', // optional param; if it isn't defined default value ('light') will be used
     page_title: 'Moving to Remark42', // optional param; if it isn't defined `document.title` will be used
     locale: 'en', // set up locale and language, if it isn't defined default value ('en') will be used
-    show_email_subscription: false // optional param; by default it is `true` and you can see email subscription feature
-                                   // in interface when enable it from backend side
-                                   // if you set this param in `false` you will get notifications email notifications as admin
-                                   // but your users won't have interface for subscription
+    show_email_subscription: false, // optional param; by default it is `true` and you can see email subscription feature
+                                    // in interface when enable it from backend side
+                                    // if you set this param in `false` you will get notifications email notifications as admin
+                                    // but your users won't have interface for subscription
+    simple_view: false // optional param; overrides the parameter from the backend
+                       // minimized UI with basic info only
   };
 </script>
 <script>!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);</script>

frontend/app/remark.tsx

@@ -14,6 +14,7 @@ import { getConfig } from 'common/api';
 import { fetchHiddenUsers } from 'store/user/actions';
 import { restoreCollapsedThreads } from 'store/thread/actions';
 import parseQuery from 'utils/parseQuery';
+import { parseBooleansFromDictionary } from 'utils/parse-booleans-from-dictionary';
 
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', init);
@@ -30,7 +31,7 @@ async function init(): Promise<void> {
     throw new Error("Remark42: Can't find root node.");
   }
 
-  const params = parseQuery<{ page?: string; locale?: string }>();
+  const params = parseQuery<{ page?: string; locale?: string; simple_view?: boolean }>();
   const locale = getLocale(params);
   const messages = await loadLocale(locale).catch(() => ({}));
   const boundActions = bindActionCreators({ fetchHiddenUsers, restoreCollapsedThreads }, reduxStore.dispatch);
@@ -38,7 +39,9 @@ async function init(): Promise<void> {
   boundActions.fetchHiddenUsers();
   boundActions.restoreCollapsedThreads();
 
-  StaticStore.config = await getConfig();
+  const config = await getConfig();
+  const optionsParams = parseBooleansFromDictionary(params, 'simple_view');
+  StaticStore.config = { ...config, ...optionsParams };
 
   render(
     <IntlProvider locale={locale} messages={messages}>

frontend/app/typings/global.d.ts

@@ -12,6 +12,7 @@ type RemarkConfig = {
   show_email_subscription?: boolean;
   max_last_comments?: number;
   __colors__?: Record<string, string>;
+  simple_view?: boolean;
 };
 
 declare global {

frontend/app/utils/parse-booleans-from-dictionary.test.ts

@@ -0,0 +1,57 @@
+import { parseBooleansFromDictionary } from './parse-booleans-from-dictionary';
+
+const defaultProps = {
+  components: 'embed,counter',
+  host: 'http://127.0.0.1:9000',
+  locale: 'ru',
+  site_id: 'remark',
+  theme: 'dark',
+};
+
+describe('getConfigMerge', () => {
+  it('when we need to get one field and it is "true"', () => {
+    const params = {
+      ...defaultProps,
+      simple: 'true',
+      simple_view: 'true',
+    };
+    expect(parseBooleansFromDictionary(params, 'simple_view')).toEqual({ simple_view: true });
+  });
+
+  it('when we need to get one field and it is "false"', () => {
+    const params = {
+      ...defaultProps,
+      simple: 'true',
+      simple_view: 'false',
+    };
+    expect(parseBooleansFromDictionary(params, 'simple_view')).toEqual({ simple_view: false });
+  });
+  it('when we need to get one or more fields', () => {
+    const params = {
+      ...defaultProps,
+      simple: 'false',
+      simple_view: 'true',
+    };
+    expect(parseBooleansFromDictionary(params, 'simple_view', 'simple')).toEqual({
+      simple: false,
+      simple_view: true,
+    });
+  });
+
+  it('when the required field does not exist', () => {
+    const params = {
+      ...defaultProps,
+      simple: 'true',
+    };
+    expect(parseBooleansFromDictionary(params, 'simple_view')).toEqual({});
+  });
+
+  it('when the field has the wrong format', () => {
+    const params = {
+      ...defaultProps,
+      simple: 'true',
+      simple_view: 'dark',
+    };
+    expect(parseBooleansFromDictionary(params, 'simple_view', 'simple')).toEqual({ simple: true });
+  });
+});

frontend/app/utils/parse-booleans-from-dictionary.ts

@@ -0,0 +1,15 @@
+export function parseBooleansFromDictionary(input: Record<string, unknown>, ...args: string[]) {
+  const result: Record<string, boolean> = {};
+  for (let key of args) {
+    if (input[key] === undefined) {
+      continue;
+    }
+    if (input[key] === 'true') {
+      result[key] = true;
+    }
+    if (input[key] === 'false') {
+      result[key] = false;
+    }
+  }
+  return result;
+}

frontend/app/utils/parseQuery.ts

@@ -1,4 +1,4 @@
-/** converts widnow.location.search into object */
+/** converts window.location.search into object */
 
 export default function parseQuery<T extends {}>(search: string = window.location.search): T {
   const params: { [key: string]: string } = {};

frontend/templates/demo.ejs

@@ -129,8 +129,9 @@
         // __colors__: {
         //   "--color0": "red",
         // },
-        theme: theme
-        // locale: "ru"
+        theme: theme,
+        // locale: "ru",
+        // simple_view: true,
       };
 
       (function (c, d) {
@@ -143,7 +144,7 @@
             s.type = 'module';
             e = '.mjs';
           }
-          
+
           s.async = true;
           s.defer = true;
           s.src = remark_config.host + '/web/' + c[i] + e;