@underpostnet/underpost 2.7.9

package/src/client/ssr/components/head/Css.js

@@ -0,0 +1,241 @@
+// https://css-loaders.com/pulsing/
+
+SrrComponent = () => html`
+  <style>
+    body {
+      margin: 0;
+      padding: 0;
+    }
+
+    .ssr-fl {
+      position: relative;
+      display: flow-root;
+    }
+
+    .ssr-abs,
+    .ssr-in {
+      display: block;
+    }
+
+    .ssr-fll {
+      float: left;
+    }
+
+    .ssr-flr {
+      float: right;
+    }
+
+    .ssr-abs {
+      position: absolute;
+    }
+
+    .ssr-in,
+    .ssr-inl {
+      position: relative;
+    }
+
+    .ssr-inl {
+      display: inline-table;
+      display: -webkit-inline-table;
+      display: -moz-inline-table;
+      display: -ms-inline-table;
+      display: -o-inline-table;
+    }
+
+    .ssr-fix {
+      position: fixed;
+      display: block;
+    }
+
+    .ssr-stq {
+      position: sticky;
+      /* require defined at least top, bottom, left o right */
+    }
+
+    .ssr-wfa {
+      width: fill-available;
+      width: -webkit-fill-available;
+      width: -moz-fill-available;
+      width: -ms-fill-available;
+      width: -o-fill-available;
+    }
+
+    .ssr-wft {
+      width: fit-content;
+      width: -webkit-fit-content;
+      width: -moz-fit-content;
+      width: -ms-fit-content;
+      width: -o-fit-content;
+    }
+
+    .ssr-wfm {
+      width: max-content;
+      width: -webkit-max-content;
+      width: -moz-max-content;
+      width: -ms-max-content;
+      width: -o-max-content;
+    }
+
+    .ssr-negative-color {
+      filter: invert(1);
+      -webkit-filter: invert(1);
+      -moz-filter: invert(1);
+      -ms-filter: invert(1);
+      -o-filter: invert(1);
+    }
+
+    .ssr-no-drag {
+      user-drag: none;
+      -webkit-user-drag: none;
+      -moz-user-drag: none;
+      -ms-user-drag: none;
+      -o-user-drag: none;
+      user-select: none;
+      -webkit-user-select: none;
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -o-user-select: none;
+    }
+
+    .ssr-center {
+      transform: translate(-50%, -50%);
+      top: 50%;
+      left: 50%;
+      width: 100%;
+      text-align: center;
+    }
+    .ssr-gray {
+      filter: grayscale(1);
+    }
+  </style>
+  <style>
+    .ssr-background-image {
+      background-size: cover;
+      background-position: center;
+      height: 100vh;
+      width: 100vw;
+      object-fit: cover;
+      z-index: -1;
+      top: 0px;
+      left: 0px;
+      pointer-events: none;
+    }
+    .ssr-background {
+      top: 0px;
+      left: 0px;
+      height: 100%;
+      width: 100%;
+      z-index: 11;
+    }
+    .ssr-shimmer {
+      height: 100%;
+      background-image: linear-gradient(
+        to right,
+        rgb(255, 255, 255, 0.5) 0%,
+        rgba(200, 200, 200, 0.5) 30%,
+        rgba(220, 220, 220, 0.5) 50%,
+        rgba(255, 255, 255, 0.5) 100%
+      );
+      animation: ssr-shimmer 3s linear infinite;
+    }
+    @keyframes ssr-shimmer {
+      0% {
+        background-position: -30px 0;
+      }
+      100% {
+        background-position: 80px 0;
+      }
+    }
+    .ssr-shimmer-dark {
+      height: 100%;
+      background-image: linear-gradient(
+        to right,
+        rgb(5, 5, 5, 0.5) 0%,
+        rgba(10, 10, 10, 0.5) 30%,
+        rgba(15, 15, 15, 0.5) 40%,
+        rgba(10, 10, 10, 0.5) 70%,
+        rgba(5, 5, 5, 0.5) 100%
+      );
+      animation: ssr-shimmer-dark 3s linear infinite;
+    }
+    @keyframes ssr-shimmer-dark {
+      0% {
+        background-position: -30px 0;
+      }
+      100% {
+        background-position: 80px 0;
+      }
+    }
+    .ssr-shimmer-dark-search-box {
+      height: 100%;
+      background-image: linear-gradient(
+        to right,
+        rgb(5, 5, 5, 0.5) 0%,
+        rgba(10, 10, 10, 0.5) 30%,
+        rgba(15, 15, 15, 0.5) 40%,
+        rgba(10, 10, 10, 0.5) 70%,
+        rgba(5, 5, 5, 0.5) 100%
+      );
+      animation: ssr-shimmer-dark-search-box 3s linear infinite;
+    }
+    @keyframes ssr-shimmer-dark-search-box {
+      0% {
+        background-position: -290px 0;
+      }
+      100% {
+        background-position: 400px 0;
+      }
+    }
+    .ssr-shimmer-search-box {
+      height: 100%;
+      background-image: linear-gradient(
+        to right,
+        rgb(255, 255, 255, 0.5) 0%,
+        rgba(200, 200, 200, 0.5) 30%,
+        rgba(220, 220, 220, 0.5) 50%,
+        rgba(255, 255, 255, 0.5) 100%
+      );
+      animation: ssr-shimmer-search-box 3s linear infinite;
+    }
+    @keyframes ssr-shimmer-search-box {
+      0% {
+        background-position: -290px 0;
+      }
+      100% {
+        background-position: 400px 0;
+      }
+    }
+    .ssr-search-box {
+      width: 290px;
+      height: 33.3px;
+      top: 8.5px;
+      left: 100px;
+      border-radius: 8px;
+    }
+
+    .ssr-btn {
+      border-radius: 8px;
+      overflow: hidden;
+      /* box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); */
+      color: #606060;
+      /* box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3); */
+    }
+    .ssr-sub-shimmer-loader {
+      background: linear-gradient(
+          90deg,
+          rgba(190, 190, 190, 0.5) 33%,
+          rgba(150, 150, 150, 0.5) 50%,
+          rgba(190, 190, 190, 0.5) 66%
+        )
+        rgba(220, 220, 220, 0.5);
+      background-size: 300% 100%;
+      animation: ssr-sub-shimmer-l1 1s infinite linear;
+      border-radius: 5px;
+    }
+    @keyframes ssr-sub-shimmer-l1 {
+      0% {
+        background-position: right;
+      }
+    }
+  </style>
+`;

package/src/client/ssr/components/head/DefaultScripts.js

@@ -0,0 +1,3 @@
+SrrComponent = ({ ssrPath }) => html`
+  <script type="text/javascript" src="${ssrPath}dist/validator/validator.min.js"></script>
+`;

package/src/client/ssr/components/head/Production.js

@@ -0,0 +1 @@
+SrrComponent = () => html``;

package/src/client/ssr/components/head/Pwa.js

@@ -0,0 +1,146 @@
+SrrComponent = ({
+  title,
+  author,
+  keywords,
+  description,
+  themeColor,
+  canonicalURL,
+  ssrPath,
+  thumbnail,
+  pwaAssetsPath,
+}) => html`
+  <link rel="manifest" href="${ssrPath}site.webmanifest" />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="16x16"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}favicon-16x16.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="32x32"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}favicon-32x32.png"
+  />
+  <!-- <link rel="icon" type="image/png" sizes="194x194" href="${ssrPath}${pwaAssetsPath !== undefined
+    ? pwaAssetsPath
+    : 'assets/splash/'}favicon-194x194.png" /> -->
+  <!-- chrome -->
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="36x36"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-36x36.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="48x48"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-48x48.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="72x72"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-72x72.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="96x96"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-96x96.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="144x144"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-144x144.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="256x256"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-256x256.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="384x384"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-384x384.png"
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    sizes="512x512"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-512x512.png"
+  />
+  <!-- apple -->
+  <link
+    rel="apple-touch-icon"
+    sizes="180x180"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}apple-touch-icon.png"
+  />
+  <link
+    rel="mask-icon"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}safari-pinned-tab.svg"
+    color="${themeColor}"
+  />
+  <meta name="apple-mobile-web-app-title" content="${title}" />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="36x36"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-36x36.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="48x48"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-48x48.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="72x72"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-72x72.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="96x96"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-96x96.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="144x144"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-144x144.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="256x256"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-256x256.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="384x384"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-384x384.png"
+  />
+  <link
+    rel="apple-touch-icon"
+    type="image/png"
+    sizes="512x512"
+    href="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}android-chrome-512x512.png"
+  />
+  <!-- microsoft -->
+  <meta name="msapplication-config" content="${ssrPath}browserconfig.xml" />
+  <meta name="application-name" content="${title}" />
+  <meta name="msapplication-TileColor" content="${themeColor}" />
+  <meta
+    name="msapplication-TileImage"
+    content="${ssrPath}${pwaAssetsPath !== undefined ? pwaAssetsPath : 'assets/splash/'}mstile-144x144.png"
+  />
+  <meta name="theme-color" content="${themeColor}" />
+`;

package/src/client/ssr/components/head/PwaDefault.js

@@ -0,0 +1,60 @@
+SrrComponent = () => html`<link rel="icon" type="image/x-icon" href="/favicon.ico">
+<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+<link rel="icon" type="image/png" sizes="48x48" href="/favicon-48x48.png">
+<link rel="manifest" href="/manifest.webmanifest" crossOrigin="use-credentials">
+<meta name="mobile-web-app-capable" content="yes">
+<meta name="theme-color" content="#fff">
+<meta name="application-name" content="Default">
+<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
+<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
+<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
+<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
+<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
+<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
+<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
+<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
+<link rel="apple-touch-icon" sizes="167x167" href="/apple-touch-icon-167x167.png">
+<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
+<link rel="apple-touch-icon" sizes="1024x1024" href="/apple-touch-icon-1024x1024.png">
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="Default">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-640x1136.png">
+<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1136x640.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-750x1334.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1334x750.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1125x2436.png">
+<link rel="apple-touch-startup-image" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2436x1125.png">
+<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1170x2532.png">
+<link rel="apple-touch-startup-image" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2532x1170.png">
+<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1179x2556.png">
+<link rel="apple-touch-startup-image" media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2556x1179.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-828x1792.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-1792x828.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2688.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2688x1242.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1242x2208.png">
+<link rel="apple-touch-startup-image" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2208x1242.png">
+<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1284x2778.png">
+<link rel="apple-touch-startup-image" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2778x1284.png">
+<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)" href="/apple-touch-startup-image-1290x2796.png">
+<link rel="apple-touch-startup-image" media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)" href="/apple-touch-startup-image-2796x1290.png">
+<link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1488x2266.png">
+<link rel="apple-touch-startup-image" media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2266x1488.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1536x2048.png">
+<link rel="apple-touch-startup-image" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2048x1536.png">
+<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1620x2160.png">
+<link rel="apple-touch-startup-image" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1620.png">
+<link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1640x2160.png">
+<link rel="apple-touch-startup-image" media="(device-width: 820px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2160x1640.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2388.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2388x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-1668x2224.png">
+<link rel="apple-touch-startup-image" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2224x1668.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)" href="/apple-touch-startup-image-2048x2732.png">
+<link rel="apple-touch-startup-image" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)" href="/apple-touch-startup-image-2732x2048.png">
+<meta name="msapplication-TileColor" content="#fff">
+<meta name="msapplication-TileImage" content="/mstile-144x144.png">
+<meta name="msapplication-config" content="/browserconfig.xml">
+<link rel="yandex-tableau-widget" href="/yandex-browser-manifest.json">`;

package/src/client/ssr/components/head/Seo.js

@@ -0,0 +1,14 @@
+SrrComponent = ({ title, author, keywords, description, themeColor, ssrPath, canonicalURL, thumbnail }) => html`
+  <link rel="canonical" href="${canonicalURL}" />
+
+  <meta name="author" content="${author}" />
+  <meta name="keywords" content="${keywords.join(',')}" />
+  <meta name="description" content="${description}" />
+  <meta name="theme-color" content="${themeColor}" />
+
+  <meta property="og:title" content="${title}" />
+  <meta property="og:description" content="${description}" />
+  <meta property="og:image" content="${thumbnail}" />
+  <meta property="og:url" content="${canonicalURL}" />
+  <meta name="twitter:card" content="summary_large_image" />
+`;

package/src/client/ssr/pages/404.js

@@ -0,0 +1,12 @@
+import { e404 } from '../common/Alert.js';
+import { append } from '../common/SsrCore.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      append('.page-render', await e404({ Translate }));
+    },
+  });

package/src/client/ssr/pages/500.js

@@ -0,0 +1,12 @@
+import { e500 } from '../common/Alert.js';
+import { append } from '../common/SsrCore.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      append('.page-render', await e500({ Translate }));
+    },
+  });

package/src/client/ssr/pages/maintenance.js

@@ -0,0 +1,14 @@
+import { htmls, loggerFactory } from '../common/SsrCore.js';
+import { Alert } from '../common/Alert.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+const logger = loggerFactory({ url: location.toString() });
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      htmls(`.page-render`, html`${await Alert.maintenance({ Translate })}`);
+    },
+  });

package/src/client/ssr/pages/offline.js

@@ -0,0 +1,21 @@
+import { htmls, loggerFactory } from '../common/SsrCore.js';
+import { Alert } from '../common/Alert.js';
+import { Translate } from '../common/Translate.js';
+import { Worker } from '../common/Worker.js';
+/*imports*/
+
+const logger = loggerFactory({ url: location.toString() });
+
+window.onload = () =>
+  Worker.instance({
+    render: async () => {
+      window.ononline = async () => {
+        location.href = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1].split('.')[0]}` : '/';
+      };
+      window.onoffline = async () => {
+        htmls(`.page-render`, html`${await Alert.noInternet({ Translate })}`);
+      };
+      if (navigator.onLine && !location.hostname.match('localhost')) window.ononline();
+      else window.onoffline();
+    },
+  });