Revert TypeScript migration - keep JS/JSX

2026-06-18 17:06:54 +02:00
parent e6d92f27b3
commit 7c72ed82b6
41 changed files with 680 additions and 986 deletions
@@ -0,0 +1,25 @@
+import "./bootstrap";
+import "./external/flowbite";
+
+import "swiper/css";
+import "swiper/css/pagination";
+
+import Alpine from "alpinejs";
+import Focus from "@alpinejs/focus";
+
+import ArticleReactions from "./components/ArticleReactions.js";
+
+import ThemeSwitcher from "./components/ThemeSwitcher.js";
+import AtomSliders from "./components/AtomSliders.js";
+
+ThemeSwitcher.init();
+ArticleReactions.init();
+AtomSliders.init();
+Alpine.plugin(Focus);
+Alpine.start();
+
+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;",
+  "",
+);
@@ -1,18 +0,0 @@
-import "./bootstrap";
-import "./external/flowbite";
-
-import "swiper/css";
-import "swiper/css/pagination";
-
-import Alpine from "alpinejs";
-import Focus from "@alpinejs/focus";
-
-import ArticleReactions from "./components/ArticleReactions";
-import ThemeSwitcher from "./components/ThemeSwitcher";
-import AtomSliders from "./components/AtomSliders";
-
-ThemeSwitcher.init();
-ArticleReactions.init();
-AtomSliders.init();
-Alpine.plugin(Focus);
-Alpine.start();
@@ -0,0 +1,34 @@
+/**
+ * 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";
+import Turbolinks from "turbolinks";
+
+window.axios = axios;
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+Turbolinks.start();
+
+/**
+ * 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'],
+// });
@@ -1,7 +0,0 @@
-import axios from "axios";
-import Turbolinks from "turbolinks";
-
-window.axios = axios;
-window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
-
-Turbolinks.start();
@@ -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 };
@@ -1,147 +0,0 @@
-import Alpine from "alpinejs";
-
-interface ReactionData {
-  id: string;
-  name: string;
-  count: number;
-  users: string[];
-}
-
-interface ReactionComponent extends Record<string, unknown> {
-  url: string;
-  myReactions: string[];
-  articleReactions: ReactionData[];
-  allReactions: string[];
-  isAuthenticated: boolean;
-  init(): void;
-  treatArticleReactions(rawReactions: Record<string, { user?: { username: string } }[]>): void;
-  toggleReaction(reaction: string): void;
-  addReaction(name: string, username: string): void;
-  removeReaction(name: string, username: string): void;
-  generateVirtualReactionId(name: string): string;
-  canAddReactionFromModal(name: string): boolean;
-  userHasReaction(reaction: ReactionData | string): boolean;
-  articleHasReaction(name: string): boolean;
-  getReactionDataFromName(name: string): ReactionData | undefined;
-  dispatchFlowbiteEvent(): void;
-  $nextTick: (callback: () => void) => void;
-}
-
-const ArticleReactions = {
-  init() {
-    document.addEventListener("alpine:init", () => this.startComponent());
-  },
-
-  startComponent() {
-    Alpine.data("reactions", (...args: unknown[]) => {
-      const [myReactions = [], , url = ""] = args as [string[], Record<string, { user?: { username: string } }[]>, string];
-      const rawArticleReactions = args[1] as Record<string, { user?: { username: string } }[]> | undefined;
-
-      return {
-        url,
-        myReactions: myReactions as string[],
-        articleReactions: [] as ReactionData[],
-        allReactions: [] as string[],
-        isAuthenticated: false,
-
-        init(this: ReactionComponent) {
-          if (rawArticleReactions) {
-            this.treatArticleReactions(rawArticleReactions);
-          }
-          this.allReactions = window.App.defaultReactions;
-          this.isAuthenticated = window.App.isAuthenticated;
-          this.dispatchFlowbiteEvent();
-        },
-
-        treatArticleReactions(this: ReactionComponent, raw: Record<string, { user?: { username: string } }[]>) {
-          const transformed: ReactionData[] = [];
-
-          Object.entries(raw).forEach(([name, reactions]) => {
-            const values = Object.values(reactions);
-            transformed.push({
-              id: this.generateVirtualReactionId(name),
-              name,
-              count: values.length,
-              users: values.map((r) => r.user?.username ?? ""),
-            });
-          });
-
-          this.articleReactions = transformed;
-        },
-
-        toggleReaction(this: ReactionComponent, reaction: string) {
-          if (!this.url.length || !this.isAuthenticated) return;
-
-          window.axios
-            .post(this.url, { reaction })
-            .then((response: { data: { success: boolean; added: boolean; username: string } }) => {
-              if (!response.data.success) return;
-              if (!response.data.added) {
-                this.removeReaction(reaction, response.data.username);
-                return;
-              }
-              this.addReaction(reaction, response.data.username);
-            });
-        },
-
-        addReaction(this: ReactionComponent, name: string, username: string) {
-          this.myReactions.push(name);
-          const existing = this.getReactionDataFromName(name);
-          if (existing) {
-            existing.count++;
-            existing.users.push(username);
-            return;
-          }
-          this.articleReactions.push({
-            id: this.generateVirtualReactionId(name),
-            name,
-            count: 1,
-            users: [username],
-          });
-          this.dispatchFlowbiteEvent();
-        },
-
-        removeReaction(this: ReactionComponent, name: string, username: string) {
-          this.myReactions.splice(this.myReactions.indexOf(name), 1);
-          const data = this.getReactionDataFromName(name);
-          if (!data) return;
-          if (data.count > 1) {
-            data.count--;
-            data.users.splice(data.users.indexOf(username), 1);
-            return;
-          }
-          this.$nextTick(() => {
-            this.articleReactions.splice(this.articleReactions.indexOf(data), 1);
-          });
-        },
-
-        generateVirtualReactionId(this: ReactionComponent, name: string): string {
-          return name + Math.floor(Math.random() * 1000);
-        },
-
-        canAddReactionFromModal(this: ReactionComponent, name: string): boolean {
-          return !this.userHasReaction(name) && !this.articleHasReaction(name);
-        },
-
-        userHasReaction(this: ReactionComponent, reaction: ReactionData | string): boolean {
-          const name = typeof reaction === "string" ? reaction : reaction.name;
-          return this.myReactions.includes(name);
-        },
-
-        articleHasReaction(this: ReactionComponent, name: string): boolean {
-          return typeof this.getReactionDataFromName(name) !== "undefined";
-        },
-
-        getReactionDataFromName(this: ReactionComponent, name: string): ReactionData | undefined {
-          return this.articleReactions.find((r) => r.name === name);
-        },
-
-        dispatchFlowbiteEvent(this: ReactionComponent) {
-          this.$nextTick(() => document.dispatchEvent(new CustomEvent("reactions:loaded")));
-        },
-      } as ReactionComponent;
-    });
-  },
-};
-
-export { ArticleReactions as default };
@@ -1,11 +1,6 @@
 import Swiper from "swiper";

-interface AtomSlidersStore {
-  init(): void;
-  initArticleSlider(): void;
-}
-
-const AtomSliders: AtomSlidersStore = {
+const AtomSliders = {
  init() {
    document.addEventListener("turbolinks:load", () => {
      this.initArticleSlider();
@@ -1,19 +1,10 @@
-type Theme = "light" | "dark";
-
-interface ThemeSwitcherStore {
-  currentTheme: Theme;
-  init(): void;
-  initButton(): void;
-  toggleTheme(): void;
-}
-
-const ThemeSwitcher: ThemeSwitcherStore = {
+const ThemeSwitcher = {
  currentTheme: "light",

  init() {
    if (
      localStorage.theme === "dark" ||
-      (typeof window.matchMedia !== "undefined" &&
+      (typeof window.matchMedia != "undefined" &&
        window.matchMedia("(prefers-color-scheme: dark)").matches &&
        localStorage.theme !== "light")
    ) {
@@ -24,7 +15,7 @@ const ThemeSwitcher: ThemeSwitcherStore = {
  },

  initButton() {
-    const themeSwitcher = document.getElementById("theme-switcher");
+    let themeSwitcher = document.getElementById("theme-switcher");

    themeSwitcher?.addEventListener("click", () => this.toggleTheme());
  },