From df52915806db050a8e0cfab2d686acfdbf5e0c5c Mon Sep 17 00:00:00 2001
From: Alex <i@neonxp.dev>
Date: Wed, 8 Mar 2023 19:27:35 +0300
Subject: Initial commit

---
 src/pages/app-about/about-styles.ts |  11 +++
 src/pages/app-about/app-about.ts    |  45 ++++++++++++
 src/pages/app-home.ts               | 138 ++++++++++++++++++++++++++++++++++++
 3 files changed, 194 insertions(+)
 create mode 100644 src/pages/app-about/about-styles.ts
 create mode 100644 src/pages/app-about/app-about.ts
 create mode 100644 src/pages/app-home.ts

(limited to 'src/pages')

diff --git a/src/pages/app-about/about-styles.ts b/src/pages/app-about/about-styles.ts
new file mode 100644
index 0000000..001bd3f
--- /dev/null
+++ b/src/pages/app-about/about-styles.ts
@@ -0,0 +1,11 @@
+import { css } from 'lit';
+
+// these styles can be imported from any component
+// for an example of how to use this, check /pages/about-about.ts
+export const styles = css`
+  @media(min-width: 1000px) {
+    sl-card {
+      max-width: 70vw;
+    }
+  }
+`;
\ No newline at end of file
diff --git a/src/pages/app-about/app-about.ts b/src/pages/app-about/app-about.ts
new file mode 100644
index 0000000..1e148d8
--- /dev/null
+++ b/src/pages/app-about/app-about.ts
@@ -0,0 +1,45 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+// You can also import styles from another file
+// if you prefer to keep your CSS seperate from your component
+import { styles } from './about-styles';
+
+import { styles as sharedStyles } from '../../styles/shared-styles'
+
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+
+@customElement('app-about')
+export class AppAbout extends LitElement {
+  static styles = [
+    sharedStyles,
+    styles
+  ]
+
+  constructor() {
+    super();
+  }
+
+  render() {
+    return html`
+      <app-header ?enableBack="${true}"></app-header>
+
+      <main>
+        <h2>About Page</h2>
+
+        <sl-card>
+          <h2>Did you know?</h2>
+
+          <p>PWAs have access to many useful APIs in modern browsers! These
+            APIs have enabled many new types of apps that can be built as PWAs, such as advanced graphics editing apps, games,
+            apps that use machine learning and more!
+          </p>
+
+          <p>Check out <a
+              href="https://docs.microsoft.com/en-us/microsoft-edge/progressive-web-apps-chromium/how-to/handle-files">these
+              docs</a> to learn more about the advanced features that you can use in your PWA</p>
+        </sl-card>
+  </main>
+    `;
+  }
+}
diff --git a/src/pages/app-home.ts b/src/pages/app-home.ts
new file mode 100644
index 0000000..748e276
--- /dev/null
+++ b/src/pages/app-home.ts
@@ -0,0 +1,138 @@
+import { LitElement, css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/button/button.js';
+
+import { styles } from '../styles/shared-styles';
+
+@customElement('app-home')
+export class AppHome extends LitElement {
+
+  // For more information on using properties and state in lit
+  // check out this link https://lit.dev/docs/components/properties/
+  @property() message = 'Welcome!';
+
+  static get styles() {
+    return [
+      styles,
+      css`
+      #welcomeBar {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+      }
+
+      #welcomeCard,
+      #infoCard {
+        padding: 18px;
+        padding-top: 0px;
+      }
+
+      sl-card::part(footer) {
+        display: flex;
+        justify-content: flex-end;
+      }
+
+      @media(min-width: 750px) {
+        sl-card {
+          width: 70vw;
+        }
+      }
+
+
+      @media (horizontal-viewport-segments: 2) {
+        #welcomeBar {
+          flex-direction: row;
+          align-items: flex-start;
+          justify-content: space-between;
+        }
+
+        #welcomeCard {
+          margin-right: 64px;
+        }
+      }
+    `];
+  }
+
+  constructor() {
+    super();
+  }
+
+  async firstUpdated() {
+    // this method is a lifecycle even in lit
+    // for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
+    console.log('This is your home page');
+  }
+
+  share() {
+    if ((navigator as any).share) {
+      (navigator as any).share({
+        title: 'PWABuilder pwa-starter',
+        text: 'Check out the PWABuilder pwa-starter!',
+        url: 'https://github.com/pwa-builder/pwa-starter',
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <app-header></app-header>
+
+      <main>
+        <div id="welcomeBar">
+          <sl-card id="welcomeCard">
+            <div slot="header">
+              <h2>${this.message}</h2>
+            </div>
+
+            <p>
+              For more information on the PWABuilder pwa-starter, check out the
+              <a href="https://github.com/pwa-builder/pwa-starter/wiki/Getting-Started">
+                Documentation on Github</a>.
+            </p>
+
+            <p id="mainInfo">
+              Welcome to the
+              <a href="https://pwabuilder.com">PWABuilder</a>
+              pwa-starter! Be sure to head back to
+              <a href="https://pwabuilder.com">PWABuilder</a>
+              when you are ready to ship this PWA to the Microsoft Store, Google Play
+              and the Apple App Store!
+            </p>
+
+            ${'share' in navigator
+              ? html`<sl-button slot="footer" variant="primary" @click="${this.share}">Share this Starter!</sl-button>`
+              : null}
+          </sl-card>
+
+          <sl-card id="infoCard">
+            <h2>Technology Used</h2>
+
+            <ul>
+              <li>
+                <a href="https://www.typescriptlang.org/">TypeScript</a>
+              </li>
+
+              <li>
+                <a href="https://lit.dev">lit</a>
+              </li>
+
+              <li>
+                <a href="https://shoelace.style/">Shoelace</a>
+              </li>
+
+              <li>
+                <a href="https://vaadin.github.io/vaadin-router/vaadin-router/demo/#vaadin-router-getting-started-demos"
+                  >Vaadin Router</a>
+              </li>
+            </ul>
+          </sl-card>
+
+          <sl-button href="${(import.meta as any).env.BASE_URL}about" variant="primary">Navigate to About</sl-button>
+        </div>
+      </main>
+    `;
+  }
+}
-- 
cgit v1.2.3