feat(keep): base pwa

Alwatr · Jun 14, 2023 · 4f7e23b · 4f7e23b
1 parent b672f03
commit 4f7e23b
Show file tree

Hide file tree

Showing 26 changed files with 452 additions and 0 deletions.
diff --git a/tsconfig.json b/tsconfig.json
@@ -52,6 +52,7 @@
     {"path": "./uniquely/soffit-pwa"},
     {"path": "./uniquely/com-api"},
     {"path": "./uniquely/com-pwa"},
+    {"path": "./uniquely/keep-pwa"},
 
     // labs
     {"path": "./labs/zx-example"}

diff --git a/uniquely/keep-pwa/README.md b/uniquely/keep-pwa/README.md
@@ -0,0 +1 @@
+# Keep PWA
diff --git a/uniquely/keep-pwa/esbuild.mjs b/uniquely/keep-pwa/esbuild.mjs
@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import '@alwatr/pwa-helper/esbuild.mjs';
diff --git a/uniquely/keep-pwa/package.json b/uniquely/keep-pwa/package.json
@@ -0,0 +1,57 @@
+{
+  "name": "@alwatr/keep-pwa",
+  "version": "0.30.0",
+  "description": "Alwatr Keep PWA.",
+  "type": "module",
+  "author": "S. Ali Mihandoost <ali.mihandoost@gmail.com> (https://ali.mihandoost.com)",
+  "private": true,
+  "engines": {
+    "node": ">=18.13.0",
+    "npm": ">=8.0.0",
+    "yarn": ">=1.22.0"
+  },
+  "browserslist": "> 0.1%, not dead",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AliMD/alwatr",
+    "directory": "uniquely/keep-pwa"
+  },
+  "scripts": {
+    "b": "yarn build-dev",
+    "cb": "run-s clean build-dev",
+    "s": "yarn start",
+    "w": "yarn watch",
+    "start": "NODE_OPTIONS=--enable-source-maps run-s clean build serve",
+    "clean": "rm -rf dist build .tsbuildinfo",
+    "build": "yarn build:es",
+    "build-dev": "run-s build:root build:tsc \"build:es --debug\"",
+    "build:es": "./esbuild.mjs",
+    "build:tsc": "tsc --build",
+    "build:root": "cd ../../ && yarn build:ts",
+    "serve": "wds",
+    "watch": "run-p watch:root watch:es serve",
+    "watch:es": "yarn build:es --clean --watch --debug",
+    "watch:root": "cd ../../ && yarn watch:ts"
+  },
+  "devDependencies": {
+    "@alwatr/element": "^0.30.0",
+    "@alwatr/fetch": "^0.30.0",
+    "@alwatr/fsm": "^0.30.0",
+    "@alwatr/context": "^0.30.0",
+    "@alwatr/i18n": "^0.30.0",
+    "@alwatr/math": "^0.30.0",
+    "@alwatr/pwa-helper": "^0.30.0",
+    "@alwatr/router": "^0.30.0",
+    "@alwatr/signal": "^0.30.0",
+    "@alwatr/type": "^0.30.0",
+    "@alwatr/ui-kit": "^0.30.0",
+    "@web/dev-server": "^0.1.38",
+    "@webcomponents/webcomponentsjs": "^2.7.0",
+    "esbuild": "^0.17.16",
+    "lit-analyzer": "^1.2.1",
+    "npm-run-all": "^4.1.5",
+    "ts-lit-plugin": "^1.2.1",
+    "tslib": "^2.5.0",
+    "typescript": "^5.0.4"
+  }
+}
diff --git a/uniquely/keep-pwa/res/config.js b/uniquely/keep-pwa/res/config.js
@@ -0,0 +1,6 @@
+window.appConfig = {
+  api: 'https://order.soffit.co/api/v0',
+  cdn: '/cdn/',
+  token: '3584fd6c82b5b76568a7f770846be94af9b7a879eb2274f2c0121ccc58d112ee',
+  productStorageList: ['tile'],
+};
diff --git a/uniquely/keep-pwa/res/index.html b/uniquely/keep-pwa/res/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="fa-IR" dir="rtl">
+<head>
+  <base href="/" />
+
+  <meta charset="utf-8" />
+  <title>تولید‌کننده اسکوپ سنگ‌نما</title>
+
+  <link rel="preload" as="style" href="alwatr-pwa.css" fetchpriority="high" />
+  <link rel="preload" as="script" href="alwatr-pwa.js" fetchpriority="high" crossorigin />
+  <link
+    media="print"
+    rel="stylesheet"
+    href="alwatr-pwa.css"
+    onload="this.media='all';this.onload=null;"
+  />
+
+  <meta name="color-scheme" content="light dark" />
+  <meta name="theme-color" media="(prefers-color-scheme: light)" content="#2b4f9c" />
+  <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#665d4f" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=2, user-scalable=yes, viewport-fit=cover"
+  />
+
+  <link rel="shortcut icon" href="image/favicon.ico" />
+  <link rel="manifest" href="manifest.webmanifest" />
+  <!-- Add to home screen for Chrome on Android. Fallback for manifest.json -->
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="application-name" content="تولید‌کننده اسکوپ سنگ‌نما" />
+  <!-- Add to home screen for Safari on iOS -->
+  <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="تولید‌کننده اسکوپ سنگ‌نما" />
+  <link rel="apple-touch-startup-image" href="image/icon-192.png" />
+  <!-- Home screen icons -->
+  <link rel="apple-touch-icon" href="image/icon-180.png" />
+  <!-- Tile icon for Windows 8 (144x144 + tile color) -->
+  <meta name="msapplication-TileImage" content="image/icon-512.png" />
+  <meta name="msapplication-TileColor" content="#2b4f9c" />
+  <meta name="msapplication-tap-highlight" content="no" />
+
+  <meta name="description" content="نرم‌افزار یکپارچه اسکوپ سنگ‌نما" />
+  <meta property="og:title" content="تولید‌کننده اسکوپ سنگ‌نما" />
+  <meta property="og:type" content="website" />
+  <meta name="og:description" content="نرم‌افزار یکپارچه اسکوپ سنگ‌نما" />
+
+  <link rel="canonical" href="https://keep.soffit.co" />
+
+  <style>
+    html,
+    body {
+      margin: 0 auto;
+      padding: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    [unresolved] {
+      display: block;
+      text-align: center;
+      padding-top: 64px;
+      font-size: 22px;
+    }
+  </style>
+</head>
+<body>
+  <alwatr-pwa unresolved>درحال بارگذاری...</alwatr-pwa>
+
+  <script type="module" src="config.js"></script>
+  <script type="module" src="alwatr-pwa.js"></script>
+
+  <noscript>
+    <div class="noscript">
+      <p dir="ltr">Please enable JavaScript to view this website.</p>
+      <p dir="rtl">لطفا JavaScript را برای مشاهده این وب سایت فعال کنید.</p>
+    </div>
+  </noscript>
+</body>
+</html>
diff --git a/uniquely/keep-pwa/res/manifest.webmanifest b/uniquely/keep-pwa/res/manifest.webmanifest
@@ -0,0 +1,19 @@
+{
+  "short_name": "تولید‌کننده اسکوپ سنگ‌نما",
+  "name": "تولید‌کننده اسکوپ سنگ‌نما",
+  "description": "نرم‌افزار یکپارچه اسکوپ سنگ‌نما",
+  "start_url": "/",
+  "display": "standalone",
+  "theme_color": "#2b4f9c",
+  "background_color": "#faf8ff",
+  "orientation": "portrait",
+  "default_locale": "fa",
+  "icons": [
+    {"src": "/image/icon-192-maskable.png", "type": "image/png", "sizes": "192x192", "purpose": "maskable"},
+    {"src": "/image/icon-512-maskable.png", "type": "image/png", "sizes": "512x512", "purpose": "maskable"},
+    {"src": "/image/favicon.ico", "type": "image/x-icon", "sizes": "32x32"},
+    {"src": "/image/icon-192.png", "type": "image/png", "sizes": "192x192"},
+    {"src": "/image/icon-512.png", "type": "image/png", "sizes": "512x512"}
+  ],
+  "screenshots": []
+}
diff --git a/uniquely/keep-pwa/res/robots.txt b/uniquely/keep-pwa/res/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/uniquely/keep-pwa/res/service-worker.js b/uniquely/keep-pwa/res/service-worker.js
@@ -0,0 +1 @@
+console.log('Service worker not build in development mode.')
diff --git a/uniquely/keep-pwa/src/alwatr-pwa.ts b/uniquely/keep-pwa/src/alwatr-pwa.ts
@@ -0,0 +1,3 @@
+// TODO: rename me to index
+import './manager/index.js';
+import './ui/alwatr-pwa.js';
diff --git a/uniquely/keep-pwa/src/config.ts b/uniquely/keep-pwa/src/config.ts
@@ -0,0 +1,15 @@
+import {FetchOptions} from '@alwatr/fetch';
+import {getConfKey} from '@alwatr/pwa-helper/config.js';
+
+const token = getConfKey<string>('token');
+export const config = {
+  cdn: getConfKey<string>('cdn'),
+  token,
+  fetchContextOptions: <Partial<FetchOptions>> {
+    method: 'GET',
+    token,
+    removeDuplicate: 'auto',
+    retry: 2,
+    retryDelay: 2_000,
+  },
+} as const;
diff --git a/uniquely/keep-pwa/src/content/home-page-fa.ts b/uniquely/keep-pwa/src/content/home-page-fa.ts
@@ -0,0 +1 @@
+/* eslint-disable max-len */
diff --git a/uniquely/keep-pwa/src/content/l18e-fa.json b/uniquely/keep-pwa/src/content/l18e-fa.json
@@ -0,0 +1,11 @@
+{
+  "ok": true,
+  "meta": {
+    "code": "fa-IR",
+    "rev": 0
+  },
+  "data": {
+    "page_404_not_found": "صفحه مورد نظر یافت نشد!",
+    "page_404_not_found_description": "شاید بهتر باشه با استفاده از منو به صفحه مورد نظر بروید!"
+  }
+}
diff --git a/uniquely/keep-pwa/src/manager/buttons.ts b/uniquely/keep-pwa/src/manager/buttons.ts
@@ -0,0 +1 @@
+export const buttons = {} as const;
diff --git a/uniquely/keep-pwa/src/manager/context-provider/home-page-content.ts b/uniquely/keep-pwa/src/manager/context-provider/home-page-content.ts
@@ -0,0 +1,14 @@
+import {localeContextConsumer} from '@alwatr/i18n';
+
+// import {homePageContent} from '../../content/home-page-fa.js'; // for perf
+import {logger} from '../logger.js';
+
+localeContextConsumer.subscribe(async () => {
+  const language = localeContextConsumer.getValue()?.language;
+  logger.logMethodArgs?.('contentProvider', {language});
+  if (language == null) return;
+  // homePageContentContextProvider.setValue(
+  // homePageContent,
+  // (await import('../../content/home-page-fa.js')).homePageContent,
+  // );
+});
diff --git a/uniquely/keep-pwa/src/manager/context-provider/l18e.ts b/uniquely/keep-pwa/src/manager/context-provider/l18e.ts
@@ -0,0 +1,13 @@
+import {setL18eLoader} from '@alwatr/i18n';
+
+import l18eFa from '../../content/l18e-fa.json' assert {type: 'json'}; // for perf
+import {logger} from '../logger.js';
+
+import type {L18eContext} from '@alwatr/type';
+
+setL18eLoader((locale) => {
+  const language = locale.language;
+  logger.logMethodArgs?.('l18eLoader', {language});
+  return l18eFa as unknown as Promise<L18eContext>;
+  // return import('../../content/l18e-fa.json', {assert: {type: 'json'}}) as unknown as Promise<L18eContext>;
+});
diff --git a/uniquely/keep-pwa/src/manager/context.ts b/uniquely/keep-pwa/src/manager/context.ts
@@ -0,0 +1 @@
+export * from '@alwatr/pwa-helper/context.js';
diff --git a/uniquely/keep-pwa/src/manager/index.ts b/uniquely/keep-pwa/src/manager/index.ts
@@ -0,0 +1,2 @@
+import './context-provider/home-page-content.js';
+import './context-provider/l18e.js';
diff --git a/uniquely/keep-pwa/src/manager/logger.ts b/uniquely/keep-pwa/src/manager/logger.ts
@@ -0,0 +1,3 @@
+import {createLogger} from '@alwatr/logger';
+
+export const logger = createLogger('keep-manager');
diff --git a/uniquely/keep-pwa/src/type.ts b/uniquely/keep-pwa/src/type.ts
diff --git a/uniquely/keep-pwa/src/ui/alwatr-pwa.ts b/uniquely/keep-pwa/src/ui/alwatr-pwa.ts
@@ -0,0 +1,41 @@
+import {html, customElement} from '@alwatr/element';
+import '@alwatr/font/vazirmatn.css';
+import {AlwatrPwaElement} from '@alwatr/pwa-helper/pwa-element.js';
+import '@alwatr/ui-kit/style/mobile-only.css';
+import '@alwatr/ui-kit/style/theme/color.css';
+import '@alwatr/ui-kit/style/theme/palette-270.css';
+
+import './page/home.js'; // for perf
+import './stuff/app-footer.js';
+
+import type {RoutesConfig} from '@alwatr/router';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-pwa': AlwatrPwa;
+  }
+}
+
+/**
+ * Alwatr PWA Root Element
+ */
+@customElement('alwatr-pwa')
+class AlwatrPwa extends AlwatrPwaElement {
+  protected override _routesConfig: RoutesConfig = {
+    routeId: (routeContext) => routeContext.sectionList[0]?.toString(),
+    templates: {
+      'home': () => {
+        // import('./page/home.js');
+        return html`<alwatr-page-home unresolved>...</alwatr-page-home>`;
+      },
+      '_404': () => {
+        import('./page/404.js');
+        return html`<alwatr-page-404 unresolved>...</alwatr-page-404>`;
+      },
+    },
+  };
+
+  protected override _navigationBarTemplate(): unknown {
+    return html`<alwatr-app-footer></alwatr-app-footer>`;
+  }
+}
diff --git a/uniquely/keep-pwa/src/ui/page/404.ts b/uniquely/keep-pwa/src/ui/page/404.ts
@@ -0,0 +1,62 @@
+import {
+  customElement,
+  css,
+  html,
+  LocalizeMixin,
+  SignalMixin,
+  AlwatrBaseElement,
+  UnresolvedMixin,
+} from '@alwatr/element';
+import {message} from '@alwatr/i18n';
+import '@alwatr/ui-kit/card/icon-box.js';
+
+import {topAppBarContextProvider} from '../../manager/context.js';
+
+import type {IconBoxContent} from '@alwatr/ui-kit/card/icon-box.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'alwatr-page-404': AlwatrPage404;
+  }
+}
+
+/**
+ * Alwatr Demo Home Page
+ */
+@customElement('alwatr-page-404')
+export class AlwatrPage404 extends UnresolvedMixin(LocalizeMixin(SignalMixin(AlwatrBaseElement))) {
+  static override styles = css`
+    :host {
+      display: block;
+      padding: calc(2 * var(--sys-spacing-track));
+      box-sizing: border-box;
+      min-height: 100%;
+    }
+  `;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    topAppBarContextProvider.setValue({
+      type: 'small',
+      headline: message('page_404_not_found'),
+      startIcon: {icon: 'arrow-back-outline', flipRtl: true, clickSignalId: 'back_to_home_click_event'},
+      tinted: 2,
+    });
+  }
+
+  override render(): unknown {
+    this._logger.logMethod?.('render');
+
+    const box: IconBoxContent = {
+      stated: true,
+      elevated: 1,
+      icon: 'construct-outline',
+      flipRtl: true,
+      headline: message('page_404_not_found'),
+      description: message('page_404_not_found_description'),
+      preLine: true,
+    };
+
+    return html`<alwatr-icon-box .content=${box}></alwatr-icon-box>`;
+  }
+}