update examples for custom script and html

packages/app/public/static/locales/en_US/admin.json

@@ -498,8 +498,8 @@
     "custom_title_detail_placeholder1": "<code>&#123;&#123;sitename&#125;&#125;</code> - The site name of this wiki.",
     "custom_title_detail_placeholder2": "<code>&#123;&#123;pagename&#125;&#125;</code> - The page name of the current page.",
     "custom_title_detail_placeholder3": "<code>&#123;&#123;pagepath&#125;&#125;</code> - The page path of the current page.",
-    "custom_header": "Custom HTML header",
-    "custom_header_detail": "You can customize HTML header that applies all pages. Your custom script will be inserted in <code>&lt;header&gt;</code> but above other <code>&lt;script&gt;</code> tags.<br>Relaod page to see changes.",
+    "custom_html": "Custom HTML",
+    "custom_html_detail": "You can customize HTML code that applies all pages. Your custom HTML will be inserted into the <code>&lt;noscript&gt;</code> tag that is located as the first element of body.<br>Relaod page to see changes.",
     "custom_css": "Custom CSS",
     "write_css": "You can write CSS that is applied to whole system.",
     "ctrl_space": "Ctrl+Space to autocomplete",

packages/app/public/static/locales/ja_JP/admin.json

@@ -506,8 +506,8 @@
     "custom_title_detail_placeholder1": "<code>&#123;&#123;sitename&#125;&#125;</code> - この Wiki のサイト名",
     "custom_title_detail_placeholder2": "<code>&#123;&#123;pagename&#125;&#125;</code> - 現在表示中のページ名",
     "custom_title_detail_placeholder3": "<code>&#123;&#123;pagepath&#125;&#125;</code> - 現在表示中のページパス",
-    "custom_header": "カスタム HTML Header",
-    "custom_header_detail": "システム全体に適用される HTML を記述できます。<code>&lt;header&gt;</code> タグ内の他の <code>&lt;script&gt;</code> タグ読み込み前に展開されます。<br>変更の反映はページの更新が必要です。",
+    "custom_html": "カスタム HTML",
+    "custom_html_detail": "システム全体に適用される HTML を記述できます。<code>&lt;body&gt;</code> タグ内の最初の <code>&lt;noscript&gt;</code> タグ内に展開されます。<br>変更の反映はページの更新が必要です。",
     "custom_css": "カスタム CSS",
     "write_css": " システム全体に適用されるCSSを記述できます。",
     "ctrl_space": "Ctrl+Space でコード補完",

packages/app/public/static/locales/zh_CN/admin.json

@@ -506,8 +506,8 @@
     "custom_title_detail_placeholder1": "<code>&#123；&#123；站点名称&#125；&#125；</code>-此wiki的站点名称。",
     "custom_title_detail_placeholder2": "<code>&#123；&#123；页名&#125；&#125；</code>-当前页的页名。",
     "custom_title_detail_placeholder3": "<code>&#123；&#123；页面路径&#125；&#125；</code>-当前页面的页面路径。",
-    "custom_header": "自定义HTML标题",
-    "custom_header_detail": "您可以自定义应用所有页面的HTML标题。您的自定义脚本将插入<code>&lt；header&gt；</code>中，但位于其他<code>&lt；script&gt；</code>标记之上。<br>重新链接页面以查看更改。",
+    "custom_html": "自定义HTML标题",
+    "custom_html_detail": "您可以自定义应用所有页面的 HTML 代码。 您的自定义 HTML 将被插入到作为 body 的第一个元素的 <code>&lt；noscript&gt；</code> 标签中。<br>重新链接页面以查看更改。",
     "custom_css": "自定义CSS",
     "write_css": "您可以编写应用于整个系统的CSS。",
     "ctrl_space": "Ctrl+Space 自动完成",

packages/app/src/components/Admin/Customize/Customize.jsx

@@ -12,7 +12,7 @@ import { withUnstatedContainers } from '../../UnstatedUtils';
 
 import CustomizeCssSetting from './CustomizeCssSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
-import CustomizeHeaderSetting from './CustomizeHeaderSetting';
+import CustomizeHtmlSetting from './CustomizeHtmlSetting';
 import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeLogoSetting from './CustomizeLogoSetting';
 import CustomizeScriptSetting from './CustomizeScriptSetting';
@@ -59,13 +59,13 @@ function Customize(props) {
         <CustomizeTitle />
       </div>
       <div className="mb-5">
-        <CustomizeHeaderSetting />
+        <CustomizeScriptSetting />
       </div>
       <div className="mb-5">
         <CustomizeCssSetting />
       </div>
       <div className="mb-5">
-        <CustomizeScriptSetting />
+        <CustomizeHtmlSetting />
       </div>
       <div className="mb-5">
         <CustomizeLogoSetting />

packages/app/src/components/Admin/Customize/CustomizeHeaderSetting.tsx → packages/app/src/components/Admin/Customize/CustomizeHtmlSetting.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
@@ -13,7 +15,7 @@ type Props = {
   adminCustomizeContainer: AdminCustomizeContainer
 }
 
-const CustomizeHeaderSetting = (props: Props): JSX.Element => {
+const CustomizeHtmlSetting = (props: Props): JSX.Element => {
 
   const { adminCustomizeContainer } = props;
   const { t } = useTranslation();
@@ -21,7 +23,7 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
   const onClickSubmit = useCallback(async() => {
     try {
       await adminCustomizeContainer.updateCustomizeHtml();
-      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_header'), ns: 'commons' }));
+      toastSuccess(t('toaster.update_successed', { target: t('admin:customize_settings.custom_html'), ns: 'commons' }));
     }
     catch (err) {
       toastError(err);
@@ -32,25 +34,16 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
     <React.Fragment>
       <div className="row">
         <div className="col-12">
-          <h2 className="admin-setting-header">{t('admin:customize_settings.custom_header')}</h2>
+          <h2 className="admin-setting-header">{t('admin:customize_settings.custom_html')}</h2>
 
           <Card className="card well my-3">
             <CardBody className="px-0 py-2">
               <span
                 // eslint-disable-next-line react/no-danger
-                dangerouslySetInnerHTML={{ __html: t('admin:customize_settings.custom_header_detail') }}
+                dangerouslySetInnerHTML={{ __html: t('admin:customize_settings.custom_html_detail') }}
               />
             </CardBody>
           </Card>
-          <div className="form-text text-muted">
-            { t('Example') }:
-            <pre>
-              {/* eslint-disable-next-line react/no-unescaped-entities */}
-              <code className="text-wrap">&lt;script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.13.0/build/languages/yaml.min.js"
-                defer&gt;&lt;/script&gt;
-              </code>
-            </pre>
-          </div>
 
           <div className="form-group">
             <textarea
@@ -59,11 +52,27 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
               value={adminCustomizeContainer.state.currentCustomizeHtml || ''}
               onChange={(e) => { adminCustomizeContainer.changeCustomizeHtml(e.target.value) }}
             />
-            <p className="form-text text-muted text-right">
+            <span className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
               {t('admin:customize_settings.ctrl_space')}
-            </p>
+            </span>
+          </div>
+
+          <a className="text-muted"
+            data-toggle="collapse" href="#collapseExampleHtml" role="button" aria-expanded="false" aria-controls="collapseExampleHtml">
+            <i className="fa fa-fw fa-chevron-right" aria-hidden="true"></i>
+            Example for Google Tag Manager
+          </a>
+          <div className="collapse" id="collapseExampleHtml">
+            <PrismAsyncLight style={oneDark} language={'javascript'}
+            >
+              {`<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
+  height="0"
+  width="0"
+  style="display:none;visibility:hidden"></iframe>`}
+            </PrismAsyncLight>
           </div>
+
           <AdminUpdateButtonRow onClick={onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />
         </div>
       </div>
@@ -72,6 +81,6 @@ const CustomizeHeaderSetting = (props: Props): JSX.Element => {
 
 };
 
-const CustomizeHeaderSettingWrapper = withUnstatedContainers(CustomizeHeaderSetting, [AdminCustomizeContainer]);
+const CustomizeHtmlSettingWrapper = withUnstatedContainers(CustomizeHtmlSetting, [AdminCustomizeContainer]);
 
-export default CustomizeHeaderSettingWrapper;
+export default CustomizeHtmlSettingWrapper;

packages/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 
 import { useTranslation } from 'next-i18next';
+import { PrismAsyncLight } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { Card, CardBody } from 'reactstrap';
 
 import AdminCustomizeContainer from '~/client/services/AdminCustomizeContainer';
@@ -28,14 +30,6 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
     }
   }, [t, adminCustomizeContainer]);
 
-  const getExampleCode = useCallback(() => {
-    return `console.log($('.main-container'));
-    window.addEventListener('load', (event) => {
-      console.log('config: ', appContainer.config);
-    });
-    `;
-  }, []);
-
   return (
     <React.Fragment>
       <div className="row">
@@ -48,40 +42,6 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
             </CardBody>
           </Card>
 
-          <div className="form-text text-muted">
-            Placeholders:<br />
-            (Available after <code>load</code> event)
-          </div>
-          <table className="table table-borderless table-sm form-text text-muted offset-1 col-11">
-            <tbody>
-              <tr>
-                <th className="text-right"><code>$</code></th>
-                <td>jQuery instance</td>
-              </tr>
-              <tr>
-                <th className="text-right"><code>appContainer</code></th>
-                <td>GROWI App <a href="https://github.com/jamiebuilds/unstated">unstated container</a></td>
-              </tr>
-              <tr>
-                <th className="text-right"><code>growiRenderer</code></th>
-                <td>GROWI Renderer origin instance</td>
-              </tr>
-              <tr>
-                <th className="text-right"><code>growiPlugin</code></th>
-                <td>GROWI Plugin Manager instance</td>
-              </tr>
-              <tr>
-                <th className="text-right"><code>Crowi</code></th>
-                <td>Crowi legacy instance (jQuery based)</td>
-              </tr>
-            </tbody>
-          </table>
-
-          <div className="form-text text-muted">
-            Examples:
-            <pre><code className='language-javascript'>{getExampleCode()}</code></pre>
-          </div>
-
           <div className="form-group">
             <textarea
               className="form-control"
@@ -89,10 +49,30 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
               value={adminCustomizeContainer.state.currentCustomizeScript || ''}
               onChange={(e) => { adminCustomizeContainer.changeCustomizeScript(e.target.value) }}
             />
-            <p className="form-text text-muted text-right">
+            <span className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               {t('admin:customize_settings.ctrl_space')}
-            </p>
+            </span>
+          </div>
+
+          <a className="text-muted"
+            data-toggle="collapse" href="#collapseExampleScript" role="button" aria-expanded="false" aria-controls="collapseExampleScript">
+            <i className="fa fa-fw fa-chevron-right" aria-hidden="true"></i>
+            Example for Google Tag Manager
+          </a>
+          <div className="collapse" id="collapseExampleScript">
+            <PrismAsyncLight style={oneDark} language={'javascript'}
+            >
+              {`(function(w,d,s,l,i){
+w[l]=w[l]||[];
+w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});
+var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),
+  dl=l!='dataLayer'?'&l='+l:'';
+j.async=true;
+j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','GTM-XXXXXX');`}
+            </PrismAsyncLight>
           </div>
 
           <AdminUpdateButtonRow onClick={onClickSubmit} disabled={adminCustomizeContainer.state.retrieveError != null} />