Initial commitHEADmain

1 files changed, 93 insertions, 0 deletions

diff --git a/src/app-index.ts b/src/app-index.ts
new file mode 100644
index 0000000..7f381fb
--- /dev/null
+++ b/src/app-index.ts
@@ -0,0 +1,93 @@
+import { LitElement, css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { Router } from '@vaadin/router';
+
+import './pages/app-home';
+import './components/header';
+import './styles/global.css';
+
+const BASE_URL: string = (import.meta.env.BASE_URL).length > 2 ? (import.meta.env.BASE_URL).slice(1,-1) : (import.meta.env.BASE_URL);
+
+@customElement('app-index')
+export class AppIndex extends LitElement {
+  static get styles() {
+    return css`
+      main {
+        padding-left: 16px;
+        padding-right: 16px;
+        padding-bottom: 16px;
+      }
+
+      #routerOutlet > * {
+        width: 100% !important;
+      }
+
+      #routerOutlet > .leaving {
+        animation: 160ms fadeOut ease-in-out;
+      }
+
+      #routerOutlet > .entering {
+        animation: 160ms fadeIn linear;
+      }
+
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+
+        to {
+          opacity: 0;
+        }
+      }
+
+      @keyframes fadeIn {
+        from {
+          opacity: 0.2;
+        }
+
+        to {
+          opacity: 1;
+        }
+      }
+    `;
+  }
+
+  constructor() {
+    super();
+  }
+
+  firstUpdated() {
+    // this method is a lifecycle even in lit
+    // for more info check out the lit docs https://lit.dev/docs/components/lifecycle/
+
+    // For more info on using the @vaadin/router check here https://vaadin.com/router
+    const router = new Router(this.shadowRoot?.querySelector('#routerOutlet'));
+    router.setRoutes([
+      // temporarily cast to any because of a Type bug with the router
+      {
+        path: BASE_URL,
+        animate: true,
+        children: [
+          { path: '', component: 'app-home' },
+          {
+            path: 'about',
+            component: 'app-about',
+            action: async () => {
+              await import('./pages/app-about/app-about.js');
+            },
+          }
+        ],
+      } as any,
+    ]);
+  }
+
+  render() {
+    return html`
+      <div>
+        <main>
+          <div id="routerOutlet"></div>
+        </main>
+      </div>
+    `;
+  }
+}