Initial commit

resources/themes/dusk/js/app.js

@@ -0,0 +1,40 @@
+import "./bootstrap";
+import "./external/flowbite";
+
+import "swiper/css";
+import "swiper/css/navigation";
+import "swiper/css/pagination";
+
+import Alpine from "alpinejs";
+import Focus from "@alpinejs/focus";
+
+import ArticleReactions from "./components/ArticleReactions.js";
+
+import Swiper from "swiper";
+import { Navigation, Pagination } from "swiper/modules";
+
+ArticleReactions.init();
+Alpine.plugin(Focus);
+Alpine.start();
+
+Swiper.use([Navigation, Pagination]);
+
+// Swiper Initialization
+document.addEventListener("DOMContentLoaded", function () {
+  const swiper = new Swiper(".swiper", {
+    // Your Swiper options here
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    pagination: {
+      el: ".swiper-pagination",
+    },
+  });
+});
+
+console.log(
+  "%cAtom CMS%c\n\nAtom CMS is a CMS for made for the community to enjoy. You can join our wonderful community at https://discord.gg/rX3aShUHdg\n\n",
+  "color: #14619c; -webkit-text-stroke: 2px black; font-size: 32px; font-weight: bold;",
+  "",
+);

resources/themes/dusk/js/bootstrap.js

@@ -0,0 +1,31 @@
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from "axios";
+window.axios = axios;
+
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+//     broadcaster: 'pusher',
+//     key: import.meta.env.VITE_PUSHER_APP_KEY,
+//     wsHost: import.meta.env.VITE_PUSHER_HOST ?? `ws-${import.meta.env.VITE_PUSHER_CLUSTER}.pusher.com`,
+//     wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+//     wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+//     forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+//     enabledTransports: ['ws', 'wss'],
+// });

resources/themes/dusk/js/components/ArticleReactions.js

@@ -0,0 +1,131 @@
+import Alpine from "alpinejs";
+
+const ArticleReactions = {
+  init() {
+    document.addEventListener("alpine:init", () => this.startComponent());
+  },
+
+  startComponent() {
+    Alpine.data(
+      "reactions",
+      (myReactions = [], articleReactions = [], url = "") => ({
+        url,
+        myReactions,
+        articleReactions,
+        allReactions: [],
+        isAuthenticated: false,
+
+        init() {
+          this.treatArticleReactions();
+          this.allReactions = window.App.defaultReactions;
+          this.isAuthenticated = window.App.isAuthenticated;
+
+          this.dispatchFlowbiteEvent();
+        },
+
+        treatArticleReactions() {
+          let articleReactions = this.articleReactions;
+
+          this.articleReactions = [];
+
+          Object.entries(articleReactions).forEach((reactionData) => {
+            let reactionName = reactionData[0],
+              reactions = Object.values(reactionData[1]);
+
+            this.articleReactions.push({
+              id: this.generateVirtualReactionId(reactionName),
+              name: reactionName,
+              count: reactions.length,
+              users: reactions.map((reaction) => reaction.user?.username ?? ""),
+            });
+          });
+        },
+
+        toggleReaction(reaction) {
+          if (!this.url.length || !this.isAuthenticated) return;
+
+          axios.post(this.url, { reaction }).then((response) => {
+            if (!response.data.success) return;
+
+            if (!response.data.added) {
+              this.removeReaction(reaction, response.data.username);
+              return;
+            }
+
+            this.addReaction(reaction, response.data.username);
+          });
+        },
+
+        addReaction(name, username) {
+          this.myReactions.push(name);
+
+          let existingReaction = this.getReactionDataFromName(name);
+
+          if (existingReaction) {
+            existingReaction.count++;
+            existingReaction.users.push(username);
+            return;
+          }
+
+          this.articleReactions.push({
+            id: this.generateVirtualReactionId(name),
+            name,
+            count: 1,
+            users: [username],
+          });
+
+          this.dispatchFlowbiteEvent();
+        },
+
+        removeReaction(name, username) {
+          this.myReactions.splice(this.myReactions.indexOf(name), 1);
+
+          let reactionData = this.getReactionDataFromName(name);
+
+          if (reactionData.count > 1) {
+            reactionData.count--;
+            reactionData.users.splice(reactionData.users.indexOf(username), 1);
+            return;
+          }
+
+          this.$nextTick(() => {
+            this.articleReactions.splice(
+              this.articleReactions.indexOf(reactionData),
+              1,
+            );
+          });
+        },
+
+        generateVirtualReactionId(name) {
+          return name + Math.floor(Math.random() * 1000);
+        },
+
+        canAddReactionFromModal(name) {
+          return !this.userHasReaction(name) && !this.articleHasReaction(name);
+        },
+
+        userHasReaction(reaction) {
+          return this.myReactions.includes(reaction.name);
+        },
+
+        articleHasReaction(name) {
+          return typeof this.getReactionDataFromName(name) !== "undefined";
+        },
+
+        getReactionDataFromName(name) {
+          return this.articleReactions.find(
+            (reaction) => reaction.name === name,
+          );
+        },
+
+        dispatchFlowbiteEvent() {
+          this.$nextTick(() =>
+            document.dispatchEvent(new CustomEvent("reactions:loaded")),
+          );
+        },
+      }),
+    );
+  },
+};
+
+export { ArticleReactions as default };