Merge pull request #5 from pantanal-labs/blog

Add Blog

Author: rogerpinho

assets/css/app.scss

@@ -2,4 +2,25 @@
 
 @tailwind components;
 
-@tailwind utilities;
+@tailwind utilities;
+
+@layer components {
+  #menu-toggle:checked + #menu {
+    display: block;
+  }
+  .post-body a {
+    @apply border-b border-black;
+  }
+
+  .post-body h2 {
+    @apply text-2xl font-bold mt-6 mb-4;
+  }
+
+  .post-body > :first-child {
+    margin-top: 0;
+  }
+
+  .post-body p {
+    @apply mt-5 mb-5;
+  }
+}

assets/js/app.js

@@ -1,7 +1,7 @@
 // We need to import the CSS so that webpack will load it.
 // The MiniCssExtractPlugin is used to separate it out into
 // its own CSS file.
-import "../css/app.scss"
+import "../css/app.scss";
 
 // webpack automatically bundles all modules in your
 // entry points. Those entry points can be configured
@@ -12,22 +12,29 @@ import "../css/app.scss"
 //     import {Socket} from "phoenix"
 //     import socket from "./socket"
 //
-import "phoenix_html"
-import {Socket} from "phoenix"
-import NProgress from "nprogress"
-import {LiveSocket} from "phoenix_live_view"
+import "phoenix_html";
+import { Socket } from "phoenix";
+// import NProgress from "nprogress";
+import { LiveSocket } from "phoenix_live_view";
+import Hooks from "./hooks";
 
-let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let csrfToken = document
+  .querySelector("meta[name='csrf-token']")
+  .getAttribute("content");
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  hooks: Hooks,
+});
 
 // Show progress bar on live navigation and form submits
-window.addEventListener("phx:page-loading-start", info => NProgress.start())
-window.addEventListener("phx:page-loading-stop", info => NProgress.done())
+// window.addEventListener("phx:page-loading-start", (info) => NProgress.start());
+// window.addEventListener("phx:page-loading-stop", (info) => NProgress.done());
 
 // connect if there are any LiveViews on the page
-liveSocket.connect()
+liveSocket.connect();
 
 // expose liveSocket on window for web console debug logs and latency simulation:
-// >> liveSocket.enableDebug()
+//liveSocket.enableDebug()
 // >> liveSocket.enableLatencySim(1000)
-window.liveSocket = liveSocket
+window.liveSocket = liveSocket;
+

assets/js/hooks.js

@@ -0,0 +1,9 @@
+import Editor from "./hooks/editor";
+import InfiniteScroll from "./hooks/infinitescroll";
+
+const Hooks = {
+  Editor: Editor,
+  InfiniteScroll: InfiniteScroll,
+};
+
+export default Hooks;

assets/js/hooks/editor.js

@@ -0,0 +1,5 @@
+const Editor = {
+  mounted() {},
+};
+
+export default Editor;

assets/js/hooks/infinitescroll.js

@@ -0,0 +1,22 @@
+const InfiniteScroll = {
+  mounted() {
+    this.observer = new IntersectionObserver((entries) => {
+      const entry = entries[0];
+      if (entry.isIntersecting) {
+        this.pushEvent("load-more");
+      }
+    });
+
+    this.observer.observe(this.el);
+  },
+
+  updated() {
+    const pageNumber = this.el.dataset.pageNumber;
+  },
+
+  destroyed() {
+    this.observer.disconnect();
+  },
+};
+
+export default InfiniteScroll;