feat: rebuild the demo; rebuild the structure; update dependencies; s…

…mall fixes

.next/build-manifest.json

@@ -15,18 +15,18 @@
   ],
   "pages": {
     "/": [
-      "static/chunks/main.js",
       "static/chunks/webpack.js",
+      "static/chunks/main.js",
       "static/chunks/pages/index.js"
     ],
     "/_app": [
-      "static/chunks/main.js",
       "static/chunks/webpack.js",
+      "static/chunks/main.js",
       "static/chunks/pages/_app.js"
     ],
     "/_error": [
-      "static/chunks/main.js",
       "static/chunks/webpack.js",
+      "static/chunks/main.js",
       "static/chunks/pages/_error.js"
     ]
   },

.next/cache/next-babel-loader/content-v2/sha512/02/0f/7b7b402ce457fd2b768668e64d64b5778101e9246a3b0e3a09c53a71b8bc91f523cf75c9becb1ffe298b4cb0802c2cf7633986f41b2fd7f97e07c408274d

@@ -0,0 +1 @@
+{"ast":null,"code":"import { Fragment as _Fragment } from \"react/jsx-dev-runtime\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/vg/Frontend/cnax/src/pages/index.js\",\n    _this = this;\n\nimport data from 'lib/pages';\nimport Layout from '@/layout';\nimport Welcome from '@/sections/Welcome';\nimport Footer from '@/sections/Footer';\n\nvar Home = function Home() {\n  var page = data.page,\n      welcome = data.welcome;\n  return /*#__PURE__*/_jsxDEV(_Fragment, {\n    children: /*#__PURE__*/_jsxDEV(Layout, {\n      data: page,\n      children: [/*#__PURE__*/_jsxDEV(Welcome, {\n        data: welcome\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 12,\n        columnNumber: 9\n      }, _this), /*#__PURE__*/_jsxDEV(Footer, {}, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 13,\n        columnNumber: 9\n      }, _this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 11,\n      columnNumber: 7\n    }, _this)\n  }, void 0, false);\n};\n\n_c = Home;\nexport default Home;\n\nvar _c;\n\n$RefreshReg$(_c, \"Home\");","map":{"version":3,"sources":["/home/vg/Frontend/cnax/src/pages/index.js"],"names":["data","Layout","Welcome","Footer","Home","page","welcome"],"mappings":";;;;;;AAAA,OAAOA,IAAP,MAAiB,WAAjB;AACA,OAAOC,MAAP,MAAmB,UAAnB;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;;AAEA,IAAMC,IAAI,GAAG,SAAPA,IAAO,GAAM;AAAA,MACTC,IADS,GACSL,IADT,CACTK,IADS;AAAA,MACHC,OADG,GACSN,IADT,CACHM,OADG;AAGjB,sBACE;AAAA,2BACE,QAAC,MAAD;AAAQ,MAAA,IAAI,EAAED,IAAd;AAAA,8BACE,QAAC,OAAD;AAAS,QAAA,IAAI,EAAEC;AAAf;AAAA;AAAA;AAAA;AAAA,eADF,eAEE,QAAC,MAAD;AAAA;AAAA;AAAA;AAAA,eAFF;AAAA;AAAA;AAAA;AAAA;AAAA;AADF,mBADF;AAQD,CAXD;;KAAMF,I;AAaN,eAAeA,IAAf","sourcesContent":["import data from 'lib/pages';\nimport Layout from '@/layout';\nimport Welcome from '@/sections/Welcome';\nimport Footer from '@/sections/Footer';\n\nconst Home = () => {\n  const { page, welcome } = data;\n\n  return (\n    <>\n      <Layout data={page}>\n        <Welcome data={welcome} />\n        <Footer />\n      </Layout>\n    </>\n  );\n};\n\nexport default Home;\n"]},"metadata":{},"sourceType":"module"}

.next/cache/next-babel-loader/content-v2/sha512/09/41/3eadf1ee85304c4812cd42fd5809e7be0f2e58a8523c1d64563915dff7cce12132bf6cac4e2eba114ed6b740c536b2163a326dc68d7eeaf60e5065f686d6

@@ -0,0 +1 @@
+{"ast":null,"code":"import { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nvar _jsxFileName = \"/home/vg/Frontend/cnax/src/pages/_app.js\";\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport 'styles/global/index.scss';\nimport 'styles/index.scss';\n\nconst App = ({\n  Component,\n  pageProps\n}) => /*#__PURE__*/_jsxDEV(Component, _objectSpread({}, pageProps), void 0, false, {\n  fileName: _jsxFileName,\n  lineNumber: 4,\n  columnNumber: 43\n}, this);\n\nexport default App;","map":{"version":3,"sources":["/home/vg/Frontend/cnax/src/pages/_app.js"],"names":["App","Component","pageProps"],"mappings":";;;;;;;;;AAAA,OAAO,0BAAP;AACA,OAAO,mBAAP;;AAEA,MAAMA,GAAG,GAAG,CAAC;AAAEC,EAAAA,SAAF;AAAaC,EAAAA;AAAb,CAAD,kBAA8B,QAAC,SAAD,oBAAeA,SAAf;AAAA;AAAA;AAAA;AAAA,QAA1C;;AAEA,eAAeF,GAAf","sourcesContent":["import 'styles/global/index.scss';\nimport 'styles/index.scss';\n\nconst App = ({ Component, pageProps }) => <Component {...pageProps} />;\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}

.next/cache/next-babel-loader/content-v2/sha512/0b/b0/e1a11442eb5085fb16c1dc26f8c38303320af789c3768e3503d974bcbf05c322cbc4b37c840ae2bcad26415c60bc1e804a406714e76dcd6a0d39f9363f10

@@ -0,0 +1 @@
+{"ast":null,"code":"import _defineProperty from \"/home/vg/Frontend/cnax/node_modules/@babel/runtime/helpers/esm/defineProperty\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\n\nvar _jsxFileName = \"/home/vg/Frontend/cnax/src/pages/_app.js\",\n    _this = this;\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nimport 'styles/global/index.scss';\nimport 'styles/index.scss';\n\nvar App = function App(_ref) {\n  var Component = _ref.Component,\n      pageProps = _ref.pageProps;\n  return /*#__PURE__*/_jsxDEV(Component, _objectSpread({}, pageProps), void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 4,\n    columnNumber: 43\n  }, _this);\n};\n\n_c = App;\nexport default App;\n\nvar _c;\n\n$RefreshReg$(_c, \"App\");","map":{"version":3,"sources":["/home/vg/Frontend/cnax/src/pages/_app.js"],"names":["App","Component","pageProps"],"mappings":";;;;;;;;;;AAAA,OAAO,0BAAP;AACA,OAAO,mBAAP;;AAEA,IAAMA,GAAG,GAAG,SAANA,GAAM;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,MAAcC,SAAd,QAAcA,SAAd;AAAA,sBAA8B,QAAC,SAAD,oBAAeA,SAAf;AAAA;AAAA;AAAA;AAAA,WAA9B;AAAA,CAAZ;;KAAMF,G;AAEN,eAAeA,GAAf","sourcesContent":["import 'styles/global/index.scss';\nimport 'styles/index.scss';\n\nconst App = ({ Component, pageProps }) => <Component {...pageProps} />;\n\nexport default App;\n"]},"metadata":{},"sourceType":"module"}

.next/cache/next-babel-loader/content-v2/sha512/0f/e7/0bbf9df6f7e04c360b6bfa683fdfed4b481fa1141009a8a235dd82155645a0c704d98d114a2b8ec6bb39f39039ed97bf8873f3a54bff66d0371886f96cc9

@@ -0,0 +1 @@
+{"ast":null,"code":"\"use strict\";\n\nvar _slicedToArray = require(\"/home/vg/Frontend/cnax/node_modules/@babel/runtime/helpers/slicedToArray\");\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.default = void 0;\n\nvar _hotDevClient = _interopRequireDefault(require(\"./error-overlay/hot-dev-client\"));\n\nvar _default = function _default(_ref) {\n  var assetPrefix = _ref.assetPrefix;\n  var options = {\n    path: \"\".concat(assetPrefix, \"/_next/webpack-hmr\")\n  };\n  var devClient = (0, _hotDevClient.default)(options);\n  devClient.subscribeToHmrEvent(function (obj) {\n    if (obj.action === 'reloadPage') {\n      return window.location.reload();\n    }\n\n    if (obj.action === 'removedPage') {\n      var _obj$data = _slicedToArray(obj.data, 1),\n          page = _obj$data[0];\n\n      if (page === window.next.router.pathname) {\n        return window.location.reload();\n      }\n\n      return;\n    }\n\n    if (obj.action === 'addedPage') {\n      var _obj$data2 = _slicedToArray(obj.data, 1),\n          _page = _obj$data2[0];\n\n      if (_page === window.next.router.pathname && typeof window.next.router.components[_page] === 'undefined') {\n        return window.location.reload();\n      }\n\n      return;\n    }\n\n    throw new Error('Unexpected action ' + obj.action);\n  });\n  return devClient;\n};\n\nexports.default = _default;","map":{"version":3,"sources":["../../../client/dev/webpack-hot-middleware-client.js"],"names":["options","path","devClient","obj","window","page"],"mappings":";;;;;;;;;AAAA,IAAA,aAAA,GAAA,sBAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,CAAA;;eAEe,S,QAAA,OAAqB;AAAA,MAArB,WAAqB,QAArB,WAAqB;AAClC,MAAMA,OAAO,GAAG;AACdC,IAAAA,IAAI,YADN,WACM;AADU,GAAhB;AAIA,MAAMC,SAAS,GAAG,CAAA,GAAA,aAAA,CAAA,OAAA,EAAlB,OAAkB,CAAlB;AAEAA,EAAAA,SAAS,CAATA,mBAAAA,CAA+BC,UAAAA,GAAD,EAAS;AACrC,QAAIA,GAAG,CAAHA,MAAAA,KAAJ,YAAA,EAAiC;AAC/B,aAAOC,MAAM,CAANA,QAAAA,CAAP,MAAOA,EAAP;AAEF;;AAAA,QAAID,GAAG,CAAHA,MAAAA,KAAJ,aAAA,EAAkC;AAAA,qCACjBA,GAAG,CAAlB,IADgC;AAAA,UAC1B,IAD0B;;AAEhC,UAAIE,IAAI,KAAKD,MAAM,CAANA,IAAAA,CAAAA,MAAAA,CAAb,QAAA,EAA0C;AACxC,eAAOA,MAAM,CAANA,QAAAA,CAAP,MAAOA,EAAP;AAEF;;AAAA;AAEF;;AAAA,QAAID,GAAG,CAAHA,MAAAA,KAAJ,WAAA,EAAgC;AAAA,sCACfA,GAAG,CAAlB,IAD8B;AAAA,UACxB,KADwB;;AAE9B,UACEE,KAAI,KAAKD,MAAM,CAANA,IAAAA,CAAAA,MAAAA,CAATC,QAAAA,IACA,OAAOD,MAAM,CAANA,IAAAA,CAAAA,MAAAA,CAAAA,UAAAA,CAAP,KAAOA,CAAP,KAFF,WAAA,EAGE;AACA,eAAOA,MAAM,CAANA,QAAAA,CAAP,MAAOA,EAAP;AAEF;;AAAA;AAEF;;AAAA,UAAM,IAAA,KAAA,CAAU,uBAAuBD,GAAG,CAA1C,MAAM,CAAN;AArBFD,GAAAA;AAwBA,SAAA,SAAA","sourcesContent":["import connect from './error-overlay/hot-dev-client'\n\nexport default ({ assetPrefix }) => {\n  const options = {\n    path: `${assetPrefix}/_next/webpack-hmr`,\n  }\n\n  const devClient = connect(options)\n\n  devClient.subscribeToHmrEvent((obj) => {\n    if (obj.action === 'reloadPage') {\n      return window.location.reload()\n    }\n    if (obj.action === 'removedPage') {\n      const [page] = obj.data\n      if (page === window.next.router.pathname) {\n        return window.location.reload()\n      }\n      return\n    }\n    if (obj.action === 'addedPage') {\n      const [page] = obj.data\n      if (\n        page === window.next.router.pathname &&\n        typeof window.next.router.components[page] === 'undefined'\n      ) {\n        return window.location.reload()\n      }\n      return\n    }\n    throw new Error('Unexpected action ' + obj.action)\n  })\n\n  return devClient\n}\n"]},"metadata":{},"sourceType":"script"}

.next/cache/next-babel-loader/content-v2/sha512/0f/eb/bb867f691d813f3e91a39ed172add158a9467d299ba671bae0a8a1980cdd3083172477db98fe2d846b915d3cd40d05ad38b9c4bf650e922a0a4675807b2a

@@ -0,0 +1 @@
+{"ast":null,"code":"'use strict';\n\nvar ansiRegex = require('ansi-regex');\n\nmodule.exports = function (string) {\n  return typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n};","map":{"version":3,"sources":["/home/vg/Frontend/cnax/node_modules/strip-ansi/index.js"],"names":["ansiRegex","require","module","exports","string","replace"],"mappings":"AAAA;;AACA,IAAMA,SAAS,GAAGC,OAAO,CAAC,YAAD,CAAzB;;AAEAC,MAAM,CAACC,OAAP,GAAiB,UAAAC,MAAM;AAAA,SAAI,OAAOA,MAAP,KAAkB,QAAlB,GAA6BA,MAAM,CAACC,OAAP,CAAeL,SAAS,EAAxB,EAA4B,EAA5B,CAA7B,GAA+DI,MAAnE;AAAA,CAAvB","sourcesContent":["'use strict';\nconst ansiRegex = require('ansi-regex');\n\nmodule.exports = string => typeof string === 'string' ? string.replace(ansiRegex(), '') : string;\n"]},"metadata":{},"sourceType":"script"}

.next/cache/next-babel-loader/content-v2/sha512/12/f3/f7fe092e61dfc798d6b52891793f9633b7b97ed8b727ac105604526c213edc68fa534e1303bae8d3207812cd7d1a935a987229b6e94ee20fb86c62805091

@@ -0,0 +1 @@
+{"ast":null,"code":"\"use strict\";\n\nvar _slicedToArray = require(\"/home/vg/Frontend/cnax/node_modules/@babel/runtime/helpers/slicedToArray\");\n\nvar _interopRequireWildcard = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nexports.__esModule = true;\nexports.RouteAnnouncer = RouteAnnouncer;\nexports.default = void 0;\n\nvar _react = _interopRequireWildcard(require(\"react\"));\n\nvar _router = require(\"./router\");\n\nfunction RouteAnnouncer() {\n  var _ref = (0, _router.useRouter)(),\n      asPath = _ref.asPath;\n\n  var _ref2 = (0, _react.useState)(''),\n      _ref3 = _slicedToArray(_ref2, 2),\n      routeAnnouncement = _ref3[0],\n      setRouteAnnouncement = _ref3[1]; // Only announce the path change, but not for the first load because screen reader will do that automatically.\n\n\n  var initialPathLoaded = (0, _react.useRef)(false); // Every time the path changes, announce the route change. The announcement will be prioritized by h1, then title\n  // (from metadata), and finally if those don't exist, then the pathName that is in the URL. This methodology is\n  // inspired by Marcy Sutton's accessible client routing user testing. More information can be found here:\n  // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/\n\n  (0, _react.useEffect)(function () {\n    if (!initialPathLoaded.current) {\n      initialPathLoaded.current = true;\n      return;\n    }\n\n    var newRouteAnnouncement;\n    var pageHeader = document.querySelector('h1');\n\n    if (pageHeader) {\n      newRouteAnnouncement = pageHeader.innerText || pageHeader.textContent;\n    }\n\n    if (!newRouteAnnouncement) {\n      if (document.title) {\n        newRouteAnnouncement = document.title;\n      } else {\n        newRouteAnnouncement = asPath;\n      }\n    }\n\n    setRouteAnnouncement(newRouteAnnouncement);\n  }, // TODO: switch to pathname + query object of dynamic route requirements\n  [asPath]);\n  return /*#__PURE__*/_react.default.createElement(\"p\", {\n    \"aria-live\": \"assertive\" // Make the announcement immediately.\n    ,\n    id: \"__next-route-announcer__\",\n    role: \"alert\",\n    style: {\n      border: 0,\n      clip: 'rect(0 0 0 0)',\n      height: '1px',\n      margin: '-1px',\n      overflow: 'hidden',\n      padding: 0,\n      position: 'absolute',\n      width: '1px',\n      // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n      whiteSpace: 'nowrap',\n      wordWrap: 'normal'\n    }\n  }, routeAnnouncement);\n}\n\n_c = RouteAnnouncer;\nvar _default = RouteAnnouncer;\nexports.default = _default;\n\nvar _c;\n\n$RefreshReg$(_c, \"RouteAnnouncer\");","map":{"version":3,"sources":["../../client/route-announcer.tsx"],"names":["initialPathLoaded","pageHeader","document","newRouteAnnouncement","setRouteAnnouncement","border","clip","height","margin","overflow","padding","position","width","whiteSpace","wordWrap","RouteAnnouncer"],"mappings":";;;;;;;;;;AAAA,IAAA,MAAA,GAAA,uBAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA;;AACA,IAAA,OAAA,GAAA,OAAA,CAAA,UAAA,CAAA;;AAEO,SAAA,cAAA,GAA0B;AAAA,aACZ,CAAA,GAAA,OAAA,CAAnB,SAAmB,GADY;AAAA,MACzB,MADyB,QACzB,MADyB;;AAAA,cAEmB,CAAA,GAAA,MAAA,CAAA,QAAA,EAAlD,EAAkD,CAFnB;AAAA;AAAA,MAEzB,iBAFyB;AAAA,MAEzB,oBAFyB,aAI/B;;;AACA,MAAMA,iBAAiB,GAAG,CAAA,GAAA,MAAA,CAAA,MAAA,EAA1B,KAA0B,CAA1B,CAL+B,CAO/B;AACA;AACA;AACA;;AACA,GAAA,GAAA,MAAA,CAAA,SAAA,EACE,YAAM;AACJ,QAAI,CAACA,iBAAiB,CAAtB,OAAA,EAAgC;AAC9BA,MAAAA,iBAAiB,CAAjBA,OAAAA,GAAAA,IAAAA;AACA;AAGF;;AAAA,QAAA,oBAAA;AACA,QAAMC,UAAU,GAAGC,QAAQ,CAARA,aAAAA,CAAnB,IAAmBA,CAAnB;;AAEA,QAAA,UAAA,EAAgB;AACdC,MAAAA,oBAAoB,GAAGF,UAAU,CAAVA,SAAAA,IAAwBA,UAAU,CAAzDE,WAAAA;AAEF;;AAAA,QAAI,CAAJ,oBAAA,EAA2B;AACzB,UAAID,QAAQ,CAAZ,KAAA,EAAoB;AAClBC,QAAAA,oBAAoB,GAAGD,QAAQ,CAA/BC,KAAAA;AADF,OAAA,MAEO;AACLA,QAAAA,oBAAoB,GAApBA,MAAAA;AAEH;AAEDC;;AAAAA,IAAAA,oBAAoB,CAApBA,oBAAoB,CAApBA;AArBJ,GAAA,EAuBE;AACA,GAxBF,MAwBE,CAxBF;AA2BA,SAAA,aACE,MAAA,CAAA,OAAA,CAAA,aAAA,CAAA,GAAA,EAAA;AACE,iBAAU,WADZ,CACwB;AADxB;AAEE,IAAA,EAAE,EAFJ,0BAAA;AAGE,IAAA,IAAI,EAHN,OAAA;AAIE,IAAA,KAAK,EAAE;AACLC,MAAAA,MAAM,EADD,CAAA;AAELC,MAAAA,IAAI,EAFC,eAAA;AAGLC,MAAAA,MAAM,EAHD,KAAA;AAILC,MAAAA,MAAM,EAJD,MAAA;AAKLC,MAAAA,QAAQ,EALH,QAAA;AAMLC,MAAAA,OAAO,EANF,CAAA;AAOLC,MAAAA,QAAQ,EAPH,UAAA;AAQLC,MAAAA,KAAK,EARA,KAAA;AAUL;AACAC,MAAAA,UAAU,EAXL,QAAA;AAYLC,MAAAA,QAAQ,EAhBZ;AAIS;AAJT,GAAA,EADF,iBACE,CADF;;;KAtCK,c;eA+DQC,c","sourcesContent":["import React, { useEffect, useState, useRef } from 'react'\nimport { useRouter } from './router'\n\nexport function RouteAnnouncer() {\n  const { asPath } = useRouter()\n  const [routeAnnouncement, setRouteAnnouncement] = useState('')\n\n  // Only announce the path change, but not for the first load because screen reader will do that automatically.\n  const initialPathLoaded = useRef(false)\n\n  // Every time the path changes, announce the route change. The announcement will be prioritized by h1, then title\n  // (from metadata), and finally if those don't exist, then the pathName that is in the URL. This methodology is\n  // inspired by Marcy Sutton's accessible client routing user testing. More information can be found here:\n  // https://www.gatsbyjs.com/blog/2019-07-11-user-testing-accessible-client-routing/\n  useEffect(\n    () => {\n      if (!initialPathLoaded.current) {\n        initialPathLoaded.current = true\n        return\n      }\n\n      let newRouteAnnouncement\n      const pageHeader = document.querySelector('h1')\n\n      if (pageHeader) {\n        newRouteAnnouncement = pageHeader.innerText || pageHeader.textContent\n      }\n      if (!newRouteAnnouncement) {\n        if (document.title) {\n          newRouteAnnouncement = document.title\n        } else {\n          newRouteAnnouncement = asPath\n        }\n      }\n\n      setRouteAnnouncement(newRouteAnnouncement)\n    },\n    // TODO: switch to pathname + query object of dynamic route requirements\n    [asPath]\n  )\n\n  return (\n    <p\n      aria-live=\"assertive\" // Make the announcement immediately.\n      id=\"__next-route-announcer__\"\n      role=\"alert\"\n      style={{\n        border: 0,\n        clip: 'rect(0 0 0 0)',\n        height: '1px',\n        margin: '-1px',\n        overflow: 'hidden',\n        padding: 0,\n        position: 'absolute',\n        width: '1px',\n\n        // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe\n        whiteSpace: 'nowrap',\n        wordWrap: 'normal',\n      }}\n    >\n      {routeAnnouncement}\n    </p>\n  )\n}\n\nexport default RouteAnnouncer\n"]},"metadata":{},"sourceType":"script"}