Add minimal LiveView setup with a /live example page (#258)

* Add minimal LiveView setup with a /live example page

* Format

* Refactor app.js

---------

Co-authored-by: Rémi Prévost <rprevost@mirego.com>

Author: simonprev

assets/css/app.css

@@ -5,6 +5,20 @@
   align-items: center;
   padding: 40px;
   text-align: center;
+  font-family:
+    system-ui,
+    -apple-system,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    'Noto Sans',
+    'Liberation Sans',
+    sans-serif,
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    'Noto Color Emoji';
   line-height: 1.4;
 }
 
@@ -20,3 +34,10 @@
 .home p:last-child {
   margin-bottom: 0;
 }
+
+.flash-messages {
+  position: fixed;
+  top: 0;
+  right: 0;
+  padding: 10px;
+}

assets/js/app.js

@@ -1,2 +1,38 @@
 import 'simple-css-reset/reset.css';
 import '../css/app.css';
+
+import {Socket} from 'phoenix';
+import {LiveSocket} from 'phoenix_live_view';
+
+const FLASH_TTL = 8000;
+const Hooks = {};
+
+Hooks.Flash = {
+  mounted() {
+    this.timer = setTimeout(() => this._hide(), FLASH_TTL);
+
+    this.el.addEventListener('mouseover', () => {
+      clearTimeout(this.timer);
+      this.timer = setTimeout(() => this._hide(), FLASH_TTL);
+    });
+  },
+
+  destroyed() {
+    clearTimeout(this.timer);
+  },
+
+  _hide() {
+    liveSocket.execJS(this.el, this.el.getAttribute('phx-click'));
+  }
+};
+
+const csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute('content');
+
+const liveSocket = new LiveSocket('/live', Socket, {
+  hooks: Hooks,
+  params: {_csrf_token: csrfToken} // eslint-disable-line camelcase
+});
+
+liveSocket.connect();