IMPR: GraphQL loading

dist/records.json

@@ -14,7 +14,7 @@
       },
       "modules": {
         "byIdentifier": {
-          "./node_modules/.pnpm/html-loader@1.3.2_webpack@5.19.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/html/meta-lightbox.html": 69,
+          "./node_modules/.pnpm/html-loader@1.3.2_webpack@5.19.0/node_modules/html-loader/dist/cjs.js!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/html/meta-lightbox.html": 346,
           "./node_modules/.pnpm/html-loader@1.3.2_webpack@5.19.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Accordion.html": 484,
           "./node_modules/.pnpm/html-loader@1.3.2_webpack@5.19.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/Content.html": 702,
           "./node_modules/.pnpm/html-loader@1.3.2_webpack@5.19.0/node_modules/html-loader/dist/cjs.js!./src/html/Elements/ElementsList.html": 808,
@@ -29,10 +29,10 @@
           "./node_modules/.pnpm/html-webpack-plugin@4.5.1_webpack@5.19.0/node_modules/html-webpack-plugin/lib/loader.js!./src/index.html": 79
         },
         "usedIds": [
-          69,
           79,
           123,
           246,
+          346,
           372,
           398,
           444,
@@ -86,7 +86,7 @@
       }
     }
   ],
-  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.19.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.19.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": [
+  "mini-css-extract-plugin /mnt/data/srv/dist/repositories/webpack-bootstrap-ui-kit/node_modules/.pnpm/css-loader@5.0.1_webpack@5.19.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.19.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": [
     {
       "chunks": {
         "byName": {
@@ -102,10 +102,10 @@
       "modules": {
         "byIdentifier": {
           "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/css-loader@5.0.1_webpack@5.19.0/node_modules/css-loader/dist/runtime/api.js": 646,
-          "./node_modules/.pnpm/css-loader@5.0.1_webpack@5.19.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.19.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": 470
+          "./node_modules/.pnpm/css-loader@5.0.1_webpack@5.19.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/.pnpm/resolve-url-loader@3.1.2/node_modules/resolve-url-loader/index.js!./node_modules/.pnpm/sass-loader@10.1.1_node-sass@5.0.0+webpack@5.19.0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss": 596
         },
         "usedIds": [
-          470,
+          596,
           646
         ]
       }
@@ -171,7 +171,7 @@
       "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/brace-expansion@2.0.0/node_modules/brace-expansion/index.js": 708,
       "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch/minimatch.js": 158,
       "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./node_modules/.pnpm/react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib/index.js": 555,
-      "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|7aa6ef6d97069f7d79111d7865613bea": 322,
+      "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/app.js|e9f4ffe16b8cdb48b9acc6c77bc1abe3": 569,
       "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/SilverShop.Page.CheckoutPageController.js": 346,
       "./node_modules/.pnpm/babel-loader@8.2.2_cfa6fea171df94783407619dd74e11fe/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[0].use!./src/js/types/Site.Controllers.MapElementController.js": 424,
       "./node_modules/.pnpm/file-loader@6.2.0_webpack@5.19.0/node_modules/file-loader/dist/cjs.js??ruleSet[1].rules[3].use[0]!./node_modules/.pnpm/img-optimize-loader@1.0.7_file-loader@6.2.0+webpack@5.19.0/node_modules/img-optimize-loader/dist/index.js??ruleSet[1].rules[4].use[0]!./node_modules/.pnpm/image-minimizer-webpack-plugin@2.2.0_webpack@5.19.0/node_modules/image-minimizer-webpack-plugin/dist/loader.js??ruleSet[1].rules[5]!./src/img/photo3.svg": 928,
@@ -198,7 +198,6 @@
       310,
       313,
       319,
-      322,
       327,
       346,
       352,
@@ -214,6 +213,7 @@
       513,
       536,
       555,
+      569,
       572,
       619,
       664,

dist/report.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
-    <title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [31 Jan 2021 at 20:25]</title>
+    <title>@a2nt/ss-bootstrap-ui-webpack-boilerplate-react [31 Jan 2021 at 21:00]</title>
     <link rel="shortcut icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAABrVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+O1foceMD///+J0/qK1Pr7/v8Xdr/9///W8P4UdL7L7P0Scr2r4Pyj3vwad8D5/f/2/f+55f3E6f34+/2H0/ojfMKpzOd0rNgQcb3F3O/j9f7c8v6g3Pz0/P/w+v/q+P7n9v6T1/uQ1vuE0vqLut/y+v+Z2fvt+f+15Pzv9fuc2/vR7v2V2Pvd6/bg9P7I6/285/2y4/yp3/zp8vk8i8kqgMT7/P31+fyv4vxGkcz6/P6/6P3j7vfS5PNnpNUxhcbO7f7F6v3O4vHK3/DA2u631Ouy0eqXweKJud5wqthfoNMMbLvY8f73+v2dxeR8sNtTmdDx9/zX6PSjyeaCtd1YnNGX2PuQveCGt95Nls42h8dLlM3F4vBtAAAAM3RSTlMAAyOx0/sKBvik8opWGBMOAe3l1snDm2E9LSb06eHcu5JpHbarfHZCN9CBb08zzkdNS0kYaptYAAAFV0lEQVRYw92X51/aYBDHHS2O2qqttVbrqNq9m+TJIAYIShBkWwqIiCgoWvfeq7Z2/s29hyQNyUcR7LveGwVyXy6XH8/9rqxglLfUPLxVduUor3h0rfp2TYvpivk37929TkG037hffoX0+peVtZQc1589rigVUdXS/ABSAyEmGIO/1XfvldSK8vs3OqB6u3m0nxmIrvgB0dj7rr7Y9IbuF68hnfFaiHA/sxqm0wciIG43P60qKv9WXWc1RXGh/mFESFABTSBi0sNAKzqet17eCtOb3kZIDwxEEU0oAIJGYxNBDhBND29e0rtXXbcpuPmED9IhEAAQ/AXEaF8EPmnrrKsv0LvWR3fg5sWDNAFZOgAgaKvZDogHNU9MFwnnYROkc56RD5CjAbQX9Ow4g7upCsvYu55aSI/Nj0H1akgKQEUM94dwK65hYRmFU9MIcH/fqJYOZYcnuJSU/waKDgTOEVaVKhwrTRP5XzgSpAITYzom7UvkhFX5VutmxeNnWDjjswTKTyfgluNDGbUpWissXhF3s7mlSml+czWkg3D0l1nNjGNjz3myOQOa1KM/jOS6ebdbAVTCi4gljHSFrviza7tOgRWcS0MOUX9zdNgag5w7rRqA44Lzw0hr1WqES36dFliSJFlh2rXIae3FFcDDgKdxrUIDePr8jGcSClV1u7A9xeN0ModY/pHMxmR1EzRh8TJiwqsHmKW0l4FCEZI+jHio+JdPPE9qwQtTRxku2D8sIeRL2LnxWSllANCQGOIiqVHAz2ye2JR0DcH+HoxDkaADLjgxjKQ+AwCX/g0+DNgdG0ukYCONAe+dbc2IAc6fwt1ARoDSezNHxV2Cmzwv3O6lDMV55edBGwGK9n1+x2F8EDfAGCxug8MhpsMEcTEAWf3rx2vZhe/LAmtIn/6apE6PN0ULKgywD9mmdxbmFl3OvD5AS5fW5zLbv/YHmcsBTjf/afDz3MaZTVCfAP9z6/Bw6ycv8EUBWJIn9zYcoAWWlW9+OzO3vkTy8H+RANLmdrpOuYWdZYEXpo+TlCJrW5EARb7fF+bWdqf3hhyZI1nWJQHgznErZhbjoEsWqi8dQNoE294aldzFurwSABL2XXMf9+H1VQGke9exw5P/AnA5Pv5ngMul7LOvO922iwACu8WkCwLCafvM4CeWPxfA8lNHcWZSoi8EwMAIciKX2Z4SWCMAa3snCZ/G4EA8D6CMLNFsGQhkkz/gQNEBbPCbWsxGUpYVu3z8IyNAknwJkfPMEhLyrdi5RTyUVACkw4GSFRNWJNEW+fgPGwHD8/JxnRuLabN4CGNRkAE23na2+VmEAUmrYymSGjMAYqH84YUIyzgzs3XC7gNgH36Vcc4zKY9o9fgPBXUAiHHwVboBHGLiX6Zcjp1f2wu4tvzZKo0ecPnDtQYDQvJXaBeNzce45Fp28ZQLrEZVuFqgBwOalArKXnW1UzlnSusQKJqKYNuz4tOnI6sZG4zanpemv+7ySU2jbA9h6uhcgpfy6G2PahirDZ6zvq6zDduMVFTKvzw8wgyEdelwY9in3XkEPs3osJuwRQ4qTkfzifndg9Gfc4pdsu82+tTnHZTBa2EAMrqr2t43pguc8tNm7JQVQ2S0ukj2d22dhXYP0/veWtwKrCkNoNimAN5+Xr/oLrxswKbVJjteWrX7eR63o4j9q0GxnaBdWgGA5VStpanIjQmEhV0/nVt5VOFUvix6awJhPcAaTEShgrG+iGyvb5a0Ndb1YGHFPEwoqAinoaykaID1o1pdPNu7XsnCKQ3R+hwWIIhGvORcJUBYXe3Xa3vq/mF/N9V13ugufMkfXn+KHsRD0B8AAAAASUVORK5CYII=" type="image/x-icon" />
 
     <script>
@@ -30,7 +30,7 @@
   <body>
     <div id="app"></div>
     <script>
-      window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":108501,"parsedSize":47908,"gzipSize":15104,"groups":[{"label":"node_modules","path":"./node_modules","statSize":88629,"groups":[{"label":".pnpm","path":"./node_modules/.pnpm","statSize":88469,"groups":[{"label":"axios@0.21.1/node_modules/axios","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios","statSize":42138,"groups":[{"id":313,"label":"index.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/index.js","statSize":40,"parsedSize":33,"gzipSize":53},{"label":"lib","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib","statSize":42098,"groups":[{"label":"adapters","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters","statSize":5769,"groups":[{"id":161,"label":"xhr.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters/xhr.js","statSize":5769,"parsedSize":2021,"gzipSize":1015}],"parsedSize":2021,"gzipSize":1015},{"id":906,"label":"axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/axios.js","statSize":1504,"parsedSize":463,"gzipSize":284},{"label":"cancel","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel","statSize":1725,"groups":[{"id":619,"label":"Cancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/Cancel.js","statSize":383,"parsedSize":205,"gzipSize":153},{"id":801,"label":"CancelToken.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/CancelToken.js","statSize":1241,"parsedSize":523,"gzipSize":287},{"id":327,"label":"isCancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/isCancel.js","statSize":101,"parsedSize":84,"gzipSize":97}],"parsedSize":812,"gzipSize":383},{"label":"core","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core","statSize":12130,"groups":[{"id":160,"label":"Axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/Axios.js","statSize":2649,"parsedSize":1203,"gzipSize":555},{"id":664,"label":"InterceptorManager.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/InterceptorManager.js","statSize":1253,"parsedSize":469,"gzipSize":242},{"id":66,"label":"buildFullPath.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/buildFullPath.js","statSize":697,"parsedSize":114,"gzipSize":122},{"id":536,"label":"createError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/createError.js","statSize":625,"parsedSize":124,"gzipSize":117},{"id":457,"label":"dispatchRequest.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/dispatchRequest.js","statSize":1806,"parsedSize":843,"gzipSize":383},{"id":706,"label":"enhanceError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/enhanceError.js","statSize":1050,"parsedSize":398,"gzipSize":234},{"id":32,"label":"mergeConfig.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/mergeConfig.js","statSize":2830,"parsedSize":1414,"gzipSize":648},{"id":969,"label":"settle.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/settle.js","statSize":671,"parsedSize":213,"gzipSize":169},{"id":427,"label":"transformData.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/transformData.js","statSize":549,"parsedSize":139,"gzipSize":125}],"parsedSize":4917,"gzipSize":1742},{"id":178,"label":"defaults.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/defaults.js","statSize":2541,"parsedSize":1383,"gzipSize":691},{"label":"helpers","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers","statSize":9191,"groups":[{"id":202,"label":"bind.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/bind.js","statSize":257,"parsedSize":174,"gzipSize":147},{"id":67,"label":"buildURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/buildURL.js","statSize":1615,"parsedSize":694,"gzipSize":435},{"id":431,"label":"combineURLs.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/combineURLs.js","statSize":371,"parsedSize":119,"gzipSize":121},{"id":352,"label":"cookies.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/cookies.js","statSize":1284,"parsedSize":659,"gzipSize":377},{"id":96,"label":"isAbsoluteURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAbsoluteURL.js","statSize":562,"parsedSize":108,"gzipSize":117},{"id":513,"label":"isAxiosError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAxiosError.js","statSize":720,"parsedSize":370,"gzipSize":190},{"id":954,"label":"isURLSameOrigin.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isURLSameOrigin.js","statSize":2074,"parsedSize":742,"gzipSize":397},{"id":418,"label":"normalizeHeaderName.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/normalizeHeaderName.js","statSize":356,"parsedSize":194,"gzipSize":166},{"id":109,"label":"parseHeaders.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/parseHeaders.js","statSize":1389,"parsedSize":573,"gzipSize":366},{"id":428,"label":"spread.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/spread.js","statSize":563,"parsedSize":103,"gzipSize":99}],"parsedSize":3736,"gzipSize":1554},{"id":572,"label":"utils.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/utils.js","statSize":9238,"parsedSize":2885,"gzipSize":974}],"parsedSize":16217,"gzipSize":5309}],"parsedSize":16250,"gzipSize":5318},{"label":"balanced-match@1.0.0/node_modules/balanced-match","path":"./node_modules/.pnpm/balanced-match@1.0.0/node_modules/balanced-match","statSize":1171,"groups":[{"id":417,"label":"index.js","path":"./node_modules/.pnpm/balanced-match@1.0.0/node_modules/balanced-match/index.js","statSize":1171,"parsedSize":636,"gzipSize":368}],"parsedSize":636,"gzipSize":368},{"label":"brace-expansion@2.0.0/node_modules/brace-expansion","path":"./node_modules/.pnpm/brace-expansion@2.0.0/node_modules/brace-expansion","statSize":4555,"groups":[{"id":708,"label":"index.js","path":"./node_modules/.pnpm/brace-expansion@2.0.0/node_modules/brace-expansion/index.js","statSize":4555,"parsedSize":2181,"gzipSize":1000}],"parsedSize":2181,"gzipSize":1000},{"label":"minimatch@3.0.4/node_modules/minimatch","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch","statSize":25440,"groups":[{"id":158,"label":"minimatch.js","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch/minimatch.js","statSize":25440,"parsedSize":7940,"gzipSize":3054}],"parsedSize":7940,"gzipSize":3054},{"label":"react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib","path":"./node_modules/.pnpm/react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib","statSize":11706,"groups":[{"id":555,"label":"index.js","path":"./node_modules/.pnpm/react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib/index.js","statSize":11706,"parsedSize":7423,"gzipSize":2846}],"parsedSize":7423,"gzipSize":2846},{"label":"@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss","path":"./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss","statSize":3459,"groups":[{"id":null,"label":"_window.scss","path":"./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss","statSize":3459}],"parsedSize":0,"gzipSize":0}],"parsedSize":34430,"gzipSize":11711},{"label":"font-awesome","path":"./node_modules/font-awesome","statSize":160,"groups":[{"id":761,"label":" sync nonrecursive \\.(otf|eot|svg|ttf|woff|woff2)$","path":"./node_modules/font-awesome/ sync nonrecursive \\.(otf|eot|svg|ttf|woff|woff2)$","statSize":160,"parsedSize":275,"gzipSize":183}],"parsedSize":275,"gzipSize":183}],"parsedSize":34705,"gzipSize":11814},{"label":"src","path":"./src","statSize":19872,"groups":[{"label":"img","path":"./src/img","statSize":685,"groups":[{"id":310,"label":" sync nonrecursive \\.(png|jpe?g|svg)$","path":"./src/img/ sync nonrecursive \\.(png|jpe?g|svg)$","statSize":506,"parsedSize":785,"gzipSize":335},{"id":319,"label":"bg.png","path":"./src/img/bg.png","statSize":33,"parsedSize":38,"gzipSize":58},{"id":690,"label":"logo.png","path":"./src/img/logo.png","statSize":35,"parsedSize":40,"gzipSize":60},{"id":475,"label":"photo1.png","path":"./src/img/photo1.png","statSize":37,"parsedSize":42,"gzipSize":62},{"id":921,"label":"photo2.jpg","path":"./src/img/photo2.jpg","statSize":37,"parsedSize":42,"gzipSize":62},{"id":928,"label":"photo3.svg","path":"./src/img/photo3.svg","statSize":37,"parsedSize":68,"gzipSize":88}],"parsedSize":1015,"gzipSize":394},{"label":"js","path":"./src/js","statSize":19187,"groups":[{"id":322,"label":"app.js + 3 modules (concatenated)","path":"./src/js/app.js + 3 modules (concatenated)","statSize":19187,"parsedSize":12135,"gzipSize":3562,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 3 modules (concatenated)/src/js","statSize":2384,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 3 modules (concatenated)/src/js/app.js","statSize":2384,"parsedSize":1507,"gzipSize":442,"inaccurateSizes":true}],"parsedSize":1507,"gzipSize":442,"inaccurateSizes":true},{"label":"node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js","statSize":16761,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js/app.js","statSize":399,"parsedSize":252,"gzipSize":74,"inaccurateSizes":true},{"id":null,"label":"_window.jsx","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.1_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js/_window.jsx","statSize":16362,"parsedSize":10348,"gzipSize":3037,"inaccurateSizes":true}],"parsedSize":10600,"gzipSize":3111,"inaccurateSizes":true}]}],"parsedSize":12135,"gzipSize":3562}],"parsedSize":13150,"gzipSize":3859}]},{"label":"js/app_SilverShop.Page.CheckoutPageController.js","isAsset":true,"statSize":79,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/js/types","path":"./src/js/types","statSize":79,"groups":[{"id":346,"label":"SilverShop.Page.CheckoutPageController.js","path":"./src/js/types/SilverShop.Page.CheckoutPageController.js","statSize":79}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_Site.Controllers.MapElementController.js","isAsset":true,"statSize":1385,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/js/types","path":"./src/js/types","statSize":1385,"groups":[{"id":424,"label":"Site.Controllers.MapElementController.js","path":"./src/js/types/Site.Controllers.MapElementController.js","statSize":1385}],"parsedSize":0,"gzipSize":0}]}];
+      window.chartData = [{"label":"js/app.js","isAsset":true,"statSize":108533,"parsedSize":47908,"gzipSize":15104,"groups":[{"label":"node_modules","path":"./node_modules","statSize":88661,"groups":[{"label":".pnpm","path":"./node_modules/.pnpm","statSize":88501,"groups":[{"label":"axios@0.21.1/node_modules/axios","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios","statSize":42138,"groups":[{"id":313,"label":"index.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/index.js","statSize":40,"parsedSize":33,"gzipSize":53},{"label":"lib","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib","statSize":42098,"groups":[{"label":"adapters","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters","statSize":5769,"groups":[{"id":161,"label":"xhr.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/adapters/xhr.js","statSize":5769,"parsedSize":2021,"gzipSize":1015}],"parsedSize":2021,"gzipSize":1015},{"id":906,"label":"axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/axios.js","statSize":1504,"parsedSize":463,"gzipSize":284},{"label":"cancel","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel","statSize":1725,"groups":[{"id":619,"label":"Cancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/Cancel.js","statSize":383,"parsedSize":205,"gzipSize":153},{"id":801,"label":"CancelToken.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/CancelToken.js","statSize":1241,"parsedSize":523,"gzipSize":287},{"id":327,"label":"isCancel.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/cancel/isCancel.js","statSize":101,"parsedSize":84,"gzipSize":97}],"parsedSize":812,"gzipSize":383},{"label":"core","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core","statSize":12130,"groups":[{"id":160,"label":"Axios.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/Axios.js","statSize":2649,"parsedSize":1203,"gzipSize":555},{"id":664,"label":"InterceptorManager.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/InterceptorManager.js","statSize":1253,"parsedSize":469,"gzipSize":242},{"id":66,"label":"buildFullPath.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/buildFullPath.js","statSize":697,"parsedSize":114,"gzipSize":122},{"id":536,"label":"createError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/createError.js","statSize":625,"parsedSize":124,"gzipSize":117},{"id":457,"label":"dispatchRequest.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/dispatchRequest.js","statSize":1806,"parsedSize":843,"gzipSize":383},{"id":706,"label":"enhanceError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/enhanceError.js","statSize":1050,"parsedSize":398,"gzipSize":234},{"id":32,"label":"mergeConfig.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/mergeConfig.js","statSize":2830,"parsedSize":1414,"gzipSize":648},{"id":969,"label":"settle.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/settle.js","statSize":671,"parsedSize":213,"gzipSize":169},{"id":427,"label":"transformData.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/core/transformData.js","statSize":549,"parsedSize":139,"gzipSize":125}],"parsedSize":4917,"gzipSize":1742},{"id":178,"label":"defaults.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/defaults.js","statSize":2541,"parsedSize":1383,"gzipSize":691},{"label":"helpers","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers","statSize":9191,"groups":[{"id":202,"label":"bind.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/bind.js","statSize":257,"parsedSize":174,"gzipSize":147},{"id":67,"label":"buildURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/buildURL.js","statSize":1615,"parsedSize":694,"gzipSize":435},{"id":431,"label":"combineURLs.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/combineURLs.js","statSize":371,"parsedSize":119,"gzipSize":121},{"id":352,"label":"cookies.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/cookies.js","statSize":1284,"parsedSize":659,"gzipSize":377},{"id":96,"label":"isAbsoluteURL.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAbsoluteURL.js","statSize":562,"parsedSize":108,"gzipSize":117},{"id":513,"label":"isAxiosError.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isAxiosError.js","statSize":720,"parsedSize":370,"gzipSize":190},{"id":954,"label":"isURLSameOrigin.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/isURLSameOrigin.js","statSize":2074,"parsedSize":742,"gzipSize":397},{"id":418,"label":"normalizeHeaderName.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/normalizeHeaderName.js","statSize":356,"parsedSize":194,"gzipSize":166},{"id":109,"label":"parseHeaders.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/parseHeaders.js","statSize":1389,"parsedSize":573,"gzipSize":366},{"id":428,"label":"spread.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/helpers/spread.js","statSize":563,"parsedSize":103,"gzipSize":99}],"parsedSize":3736,"gzipSize":1554},{"id":572,"label":"utils.js","path":"./node_modules/.pnpm/axios@0.21.1/node_modules/axios/lib/utils.js","statSize":9238,"parsedSize":2885,"gzipSize":974}],"parsedSize":16217,"gzipSize":5309}],"parsedSize":16250,"gzipSize":5318},{"label":"balanced-match@1.0.0/node_modules/balanced-match","path":"./node_modules/.pnpm/balanced-match@1.0.0/node_modules/balanced-match","statSize":1171,"groups":[{"id":417,"label":"index.js","path":"./node_modules/.pnpm/balanced-match@1.0.0/node_modules/balanced-match/index.js","statSize":1171,"parsedSize":636,"gzipSize":368}],"parsedSize":636,"gzipSize":368},{"label":"brace-expansion@2.0.0/node_modules/brace-expansion","path":"./node_modules/.pnpm/brace-expansion@2.0.0/node_modules/brace-expansion","statSize":4555,"groups":[{"id":708,"label":"index.js","path":"./node_modules/.pnpm/brace-expansion@2.0.0/node_modules/brace-expansion/index.js","statSize":4555,"parsedSize":2181,"gzipSize":1000}],"parsedSize":2181,"gzipSize":1000},{"label":"minimatch@3.0.4/node_modules/minimatch","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch","statSize":25440,"groups":[{"id":158,"label":"minimatch.js","path":"./node_modules/.pnpm/minimatch@3.0.4/node_modules/minimatch/minimatch.js","statSize":25440,"parsedSize":7940,"gzipSize":3054}],"parsedSize":7940,"gzipSize":3054},{"label":"react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib","path":"./node_modules/.pnpm/react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib","statSize":11706,"groups":[{"id":555,"label":"index.js","path":"./node_modules/.pnpm/react-tiny-oembed@1.0.1_react-dom@17.0.1+react@17.0.1/node_modules/react-tiny-oembed/lib/index.js","statSize":11706,"parsedSize":7423,"gzipSize":2846}],"parsedSize":7423,"gzipSize":2846},{"label":"@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss","path":"./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss","statSize":3491,"groups":[{"id":null,"label":"_window.scss","path":"./node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/scss/_window.scss","statSize":3491}],"parsedSize":0,"gzipSize":0}],"parsedSize":34430,"gzipSize":11711},{"label":"font-awesome","path":"./node_modules/font-awesome","statSize":160,"groups":[{"id":761,"label":" sync nonrecursive \\.(otf|eot|svg|ttf|woff|woff2)$","path":"./node_modules/font-awesome/ sync nonrecursive \\.(otf|eot|svg|ttf|woff|woff2)$","statSize":160,"parsedSize":275,"gzipSize":183}],"parsedSize":275,"gzipSize":183}],"parsedSize":34705,"gzipSize":11814},{"label":"src","path":"./src","statSize":19872,"groups":[{"label":"img","path":"./src/img","statSize":685,"groups":[{"id":310,"label":" sync nonrecursive \\.(png|jpe?g|svg)$","path":"./src/img/ sync nonrecursive \\.(png|jpe?g|svg)$","statSize":506,"parsedSize":785,"gzipSize":335},{"id":319,"label":"bg.png","path":"./src/img/bg.png","statSize":33,"parsedSize":38,"gzipSize":58},{"id":690,"label":"logo.png","path":"./src/img/logo.png","statSize":35,"parsedSize":40,"gzipSize":60},{"id":475,"label":"photo1.png","path":"./src/img/photo1.png","statSize":37,"parsedSize":42,"gzipSize":62},{"id":921,"label":"photo2.jpg","path":"./src/img/photo2.jpg","statSize":37,"parsedSize":42,"gzipSize":62},{"id":928,"label":"photo3.svg","path":"./src/img/photo3.svg","statSize":37,"parsedSize":68,"gzipSize":88}],"parsedSize":1015,"gzipSize":394},{"label":"js","path":"./src/js","statSize":19187,"groups":[{"id":569,"label":"app.js + 3 modules (concatenated)","path":"./src/js/app.js + 3 modules (concatenated)","statSize":19187,"parsedSize":12135,"gzipSize":3562,"concatenated":true,"groups":[{"label":"src/js","path":"./src/js/app.js + 3 modules (concatenated)/src/js","statSize":2384,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 3 modules (concatenated)/src/js/app.js","statSize":2384,"parsedSize":1507,"gzipSize":442,"inaccurateSizes":true}],"parsedSize":1507,"gzipSize":442,"inaccurateSizes":true},{"label":"node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js","statSize":16761,"groups":[{"id":null,"label":"app.js","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js/app.js","statSize":399,"parsedSize":252,"gzipSize":74,"inaccurateSizes":true},{"id":null,"label":"_window.jsx","path":"./src/js/app.js + 3 modules (concatenated)/node_modules/.pnpm/@a2nt/meta-lightbox-react@3.0.3_jquery@3.5.1/node_modules/@a2nt/meta-lightbox-react/src/js/_window.jsx","statSize":16362,"parsedSize":10348,"gzipSize":3037,"inaccurateSizes":true}],"parsedSize":10600,"gzipSize":3111,"inaccurateSizes":true}]}],"parsedSize":12135,"gzipSize":3562}],"parsedSize":13150,"gzipSize":3859}]},{"label":"js/app_SilverShop.Page.CheckoutPageController.js","isAsset":true,"statSize":79,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/js/types","path":"./src/js/types","statSize":79,"groups":[{"id":346,"label":"SilverShop.Page.CheckoutPageController.js","path":"./src/js/types/SilverShop.Page.CheckoutPageController.js","statSize":79}],"parsedSize":0,"gzipSize":0}]},{"label":"js/app_Site.Controllers.MapElementController.js","isAsset":true,"statSize":1385,"parsedSize":0,"gzipSize":20,"groups":[{"label":"src/js/types","path":"./src/js/types","statSize":1385,"groups":[{"id":424,"label":"Site.Controllers.MapElementController.js","path":"./src/js/types/Site.Controllers.MapElementController.js","statSize":1385}],"parsedSize":0,"gzipSize":0}]}];
       window.defaultSizes = "parsed";
     </script>
   </body>

package.json

@@ -48,7 +48,7 @@
 		"ie>=11"
 	],
 	"dependencies": {
-		"@a2nt/meta-lightbox-react": "^3.0.1",
+		"@a2nt/meta-lightbox-react": "^3.0.3",
 		"aos": "^2.3.4",
 		"axios": "^0.21.1",
 		"balanced-match": "^1.0.0",

src/_graphql/readPages.json

@@ -0,0 +1,49 @@
+{
+  "data": {
+    "readPages": {
+      "edges": [
+        {
+          "node": {
+            "ID": "1",
+            "Title": "Home",
+            "Elements": {
+              "edges": [
+                {
+                  "node": {
+                    "ID": "3",
+                    "Title": "Slider",
+                    "Render": "<div\nid="e3"\nclass="element site__elements__sliderelement\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n\n\n    <div id="Carousel3" class="carousel slide js-carousel">\n        <div class="carousel-inner">\n            \n                <div class="carousel-item carousel-item-Video carousel-item-nocontrols active">\n                    <div class="carousel-slide">\n                        \n    \n        <div class="video">\n            <iframe width="200" height="113" src="https://www.youtube.com/embed/IF1F_es1SaU?feature=oembed&wmode=transparent&enablejsapi=1&disablekb=1&iv_load_policy=3&modestbranding=1&rel=0&showinfo=0&autoplay=1&mute=1&loop=1&playlist=IF1F_es1SaU" allow="autoplay" allow="autoplay" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>\n        </div>\n    \n\n\n\n\n                    </div>\n                </div>\n            \n        </div>\n    </div>\n\n\n\t</div>\n</div>\n"
+                  }
+                },
+                {
+                  "node": {
+                    "ID": "7",
+                    "Title": "Categories List",
+                    "Render": "<div\nid="e7"\nclass="element dnadesign__elementallist__model__elementlist\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t\n<div class="list-element__container row" data-listelement-count="3">\n    \n    \n\t   <div\nid="e9"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t  col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n    <div class="image-element__image height400 width400">\n        <img\n            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n            data-lazy-src="/assets/Uploads/ElementImage/1609765749853__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Aquascaping"\n        />\n    </div>\n\n\n\n<div class="image-element__caption img-content">\n    <h3 class="image-element__title title">Aquascaping</h3>\n\n    \n</div>\n\n\n\n    <a href="/en/aquascaping/" class="stretched-link">\n        <b class="sr-only">Aquascaping</b>\n    </a>\n\n\n\t</div>\n</div>\n\n    \n\t   <div\nid="e10"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t  col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n    <div class="image-element__image height400 width400">\n        <img\n            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n            data-lazy-src="/assets/Uploads/ElementImage/1609766816754__FillWzQwMCw0MDBd.jpg" class="img-responsive" alt="Car Projects"\n        />\n    </div>\n\n\n\n<div class="image-element__caption img-content">\n    <h3 class="image-element__title title">Car Projects</h3>\n\n    \n</div>\n\n\n\n    <a href="/en/car/" class="stretched-link">\n        <b class="sr-only">Car Projects</b>\n    </a>\n\n\n\t</div>\n</div>\n\n    \n\t   <div\nid="e12"\nclass="element dynamic__elements__image__elements__elementimage\n\t\n\t  col-block col-md"\n>\n\t<div class="element-container">\n\t\t\n    <div class="image-element__image height400 width400">\n        <img\n            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"\n            data-lazy-src="/assets/Uploads/ElementImage/Screenshot-from-2021-01-04-20-30-19__FillWzQwMCw0MDBd.png" class="img-responsive" alt="Programming"\n        />\n    </div>\n\n\n\n<div class="image-element__caption img-content">\n    <h3 class="image-element__title title">Programming</h3>\n\n    \n</div>\n\n\n\n    <a href="/en/development/" class="stretched-link">\n        <b class="sr-only">Programming</b>\n    </a>\n\n\n\t</div>\n</div>\n\n    \n\n\n</div>\n\n\t</div>\n</div>\n"
+                  }
+                },
+                {
+                  "node": {
+                    "ID": "4",
+                    "Title": "Hello, I'm Tony Air",
+                    "Render": "<div\nid="e4"\nclass="element dnadesign__elemental__models__elementcontent\n\t\n\t"\n>\n\t<div class="element-container container">\n\t\t<div\nclass="content-element__content"\n>\n    \n\t\n        <h2 class="content-element__title">Hello, I'm Tony Air</h2>\n    \n\n    <div class="typography">\n        <p>That's my personal website, I'm full-stack developer mostly specializing on SilverStipe backend projects and share some of my hobbies at this website.<br><br>As for the things I do for work:<br><br>Here's front-end UI kit: <a rel="noopener" href="https://github.com/a2nt/webpack-bootstrap-ui-kit" target="_blank">https://github.com/a2nt/webpack-bootstrap-ui-kit</a><br>Here's SilverStipe quick start template: <a rel="noopener" href="https://github.com/a2nt/silverstripe-webpack" target="_blank">https://github.com/a2nt/silverstripe-webpack</a><br><br>More at my github: <a rel="noopener" href="https://github.com/a2nt" target="_blank">https://github.com/a2nt</a></p>\n    </div>\n\n    \n</div>\n\n\t</div>\n</div>\n"
+                  }
+                }
+              ],
+              "pageInfo": {
+                "hasNextPage": false,
+                "hasPreviousPage": false,
+                "totalCount": 3
+              }
+            }
+          }
+        }
+      ],
+      "pageInfo": {
+        "hasNextPage": false,
+        "hasPreviousPage": false,
+        "totalCount": 1
+      }
+    }
+  }
+}

src/html/Navigation.html

@@ -1,16 +1,25 @@
-<nav id="Navigation" class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover">
+<nav
+	id="Navigation"
+	class="fixed-top navbar-dark bg-dark navbar navbar-expand-lg dropdown-hover"
+>
 	<a class="navbar-brand" href="#">UI Kit</a>
 	<button
-	data-target="#NavbarResponsive" aria-controls="NavbarResponsive"
+		data-target="#NavbarResponsive"
+		aria-controls="NavbarResponsive"
 		class="navbar-toggler navbar-toggler-right"
-	type="button" data-toggle="collapse" aria-expanded="false" aria-label="Toggle navigation"
+		type="button"
+		data-toggle="collapse"
+		aria-expanded="false"
+		aria-label="Toggle navigation"
 	>
 		<span class="navbar-toggler-icon"></span>
 	</button>
 	<div id="NavbarResponsive" class="collapse navbar-collapse">
 		<ul class="navbar-nav mr-auto nav-fill w-100">
 			<li class="nav-item active">
-				<a class="nav-link js-scrollTo" href="#PageTopAnchor">Home <span class="sr-only">(current)</span></a>
+				<a class="nav-link js-scrollTo" href="#PageTopAnchor"
+					>Home <span class="sr-only">(current)</span></a
+				>
 			</li>
 			<li class="nav-item">
 				<a class="nav-link js-scrollTo" href="#Slider">Slider</a>
@@ -22,30 +31,57 @@
 					href="#"
 					role="button"
 					data-toggle="dropdown"
-					aria-haspopup="true" aria-expanded="false"
+					aria-haspopup="true"
+					aria-expanded="false"
 				>
 					Dropdown
 				</a>
-				<div class="dropdown-menu bg-dark" aria-labelledby="NavbarDropdown">
+				<div
+					class="dropdown-menu bg-dark"
+					aria-labelledby="NavbarDropdown"
+				>
 					<a class="dropdown-item" href="#">Action</a>
-					<a class="dropdown-item js-scrollTo" href="#AccordionList">Scroll to AccordionList</a>
+					<a class="dropdown-item js-scrollTo" href="#AccordionList"
+						>Scroll to AccordionList</a
+					>
 					<div class="dropdown-divider"></div>
-					<a class="dropdown-item" href="https://google.com" target="_blank" rel="nofollow">Go to Google.com</a>
+					<a
+						class="dropdown-item"
+						href="https://google.com"
+						target="_blank"
+						rel="nofollow"
+						>Go to Google.com</a
+					>
 				</div>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link js-scrollTo" href="#Content">Content</a>
+				<a
+					id="LoadGraphQL"
+					class="nav-link js-scrollTo graphql"
+					href="../src/_graphql/readPages.json"
+					>Load GraphQL</a
+				>
 			</li>
 			<li class="nav-item">
 				<a class="nav-link js-scrollTo" href="#List">List</a>
 			</li>
 			<li class="nav-item">
-				<a class="nav-link js-scrollTo" href="#AccordionList">Accordion List</a>
+				<a class="nav-link js-scrollTo" href="#AccordionList"
+					>Accordion List</a
+				>
 			</li>
 			<li>
 				<form class="form-inline my-2 my-lg-0">
-					<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+					<input
-					<button class="btn btn-outline-success my-2 my-sm-0" type="submit">
+						class="form-control mr-sm-2"
+						type="search"
+						placeholder="Search"
+						aria-label="Search"
+					/>
+					<button
+						class="btn btn-outline-success my-2 my-sm-0"
+						type="submit"
+					>
 						<i class="fas fa-search"></i>
 						<span class="sr-only">Search</span>
 					</button>

src/js/_components/_page.jsx

@@ -0,0 +1,142 @@
+/*
+ * Lightbox window
+ */
+import { Component } from 'react';
+const axios = require('axios');
+
+class Page extends Component {
+	state = {
+		type: [],
+		shown: false,
+		loading: false,
+		error: false,
+		current: null,
+		ID: null,
+		ClassName: 'Page',
+		Title: null,
+		Elements: [],
+	};
+
+	constructor(props) {
+		super(props);
+
+		const ui = this;
+		ui.name = ui.constructor.name;
+		console.log(`${ui.name}: init`);
+
+		ui.axios = axios;
+
+		document.querySelectorAll('.graphql').forEach((el) => {
+			el.addEventListener('click', (e) => {
+				e.preventDefault();
+
+				const el = e.currentTarget;
+				const link =
+					el.getAttribute('href') || el.getAttribute('data-href');
+
+				ui.state.current = el;
+
+				ui.load(link);
+			});
+		});
+	}
+
+	reset = () => {
+		const ui = this;
+
+		ui.setState({
+			type: [],
+			shown: false,
+			loading: false,
+			error: false,
+			ID: null,
+			Title: null,
+			Elements: [],
+		});
+	};
+
+	load = (link) => {
+		const ui = this;
+		const axios = ui.axios;
+
+		ui.reset();
+		ui.setState({ loading: true });
+
+		axios
+			.get(link)
+			.then((resp) => {
+				// handle success
+				console.log(
+					`${ui.name}: response content-type: ${resp.headers['content-type']}`,
+				);
+
+				const page = resp.data.data.readPages.edges[0].node;
+				console.log(page);
+				ui.setState({
+					ID: page.ID,
+					Title: page.Title,
+					Elements: page.Elements.edges,
+				});
+			})
+			.catch((error) => {
+				console.error(error);
+
+				let msg = '';
+
+				if (error.response) {
+					switch (error.response.status) {
+						case 404:
+							msg = 'Not Found.';
+							break;
+						case 500:
+							msg = 'Server issue, please try again latter.';
+							break;
+						default:
+							msg = 'Something went wrong.';
+							break;
+					}
+				} else if (error.request) {
+					msg = 'No response received';
+				} else {
+					console.warn('Error', error.message);
+				}
+
+				ui.setState({ error: msg });
+			})
+			.then(() => {
+				ui.setState({ loading: false });
+			});
+	};
+
+	getHtml = (html) => {
+		const decodeHtmlEntity = (input) => {
+			var doc = new DOMParser().parseFromString(input, 'text/html');
+			return doc.documentElement.textContent;
+		};
+
+		return { __html: decodeHtmlEntity(html) };
+	};
+
+	render() {
+		const ui = this;
+		const name = ui.name;
+
+		const ElementItem = (props) => (
+			<div dangerouslySetInnerHTML={props.html}></div>
+		);
+
+		let html = '';
+		ui.state.Elements.map((el) => {
+			html += el.node.Render;
+		});
+
+		return (
+			<div
+				className="elemental-area"
+				dangerouslySetInnerHTML={ui.getHtml(html)}
+			></div>
+		);
+	}
+}
+
+export default Page;

src/js/app.js

@@ -3,7 +3,12 @@
 //import $ from 'jquery';
 import '../scss/app.scss';
 
-import Button from 'react-bootstrap/Button';
+import Page from './_components/_page.jsx';
+
+const GraphPage = ReactDOM.render(
+	<Page />,
+	document.getElementById('MainContent'),
+);
 
 //import 'hammerjs/hammer';
 //import 'jquery-hammerjs/jquery.hammer';