Initial commitHEADmain

1 files changed, 138 insertions, 0 deletions

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>
+    `;
+  }
+}