Merge pull request #111 from tsparticles/dev

Added prettier for checking files formatting and GA4
tsparticles · Oct 12, 2023 · 77c6ea6 · 77c6ea6
2 parents e8713ed + a26763a
commit 77c6ea6
Show file tree

Hide file tree

Showing 91 changed files with 4,057 additions and 3,264 deletions.
diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml
@@ -5,13 +5,12 @@ name: Node.js CI
 
 on:
   push:
-    branches: [ "main" ]
+    branches: ["main", "dev"]
   pull_request:
-    branches: [ "main" ]
+    branches: ["main", "dev"]
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
 
     strategy:
@@ -20,12 +19,11 @@ jobs:
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
-    - uses: actions/checkout@v4
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run prettier:ci
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -1,9 +1,7 @@
 # Contribution Guideline
 
-
 ## How do I make a contribution to this project?
 
-
 Never made an open source contribution before? Wondering how contributions work in the in our project? Here's a quick rundown!
 
 ## **Here's a quick rundown on how to make a contribution to my project:**
@@ -12,10 +10,8 @@ Never made an open source contribution before? Wondering how contributions work
 
 1. Find an issue that you are interested in addressing or a feature that you would like to add.
 
-
 2. Fork the repository associated with the issue to your local GitHub organization. This means that you will have a copy of the repository `underyour-GitHub-username/repository-name.`
 
-
 3. Clone the repository to your local machine using:
 
    ```
@@ -39,12 +35,11 @@ Never made an open source contribution before? Wondering how contributions work
    ```
    git switch -c branch-name-here
    ```
-7. Make the appropriate changes for the issue you are trying to address or the feature that you want to add
 
+7. Make the appropriate changes for the issue you are trying to address or the feature that you want to add
 
 8. Add the changes to the staging are and commit them to the branch you are working on
 
-
 9. Push the changes to the remote repository using:
 
    ```
@@ -53,10 +48,8 @@ Never made an open source contribution before? Wondering how contributions work
 
 10. Submit a **pull request** to the upstream repository
 
-
 11. Title the **pull request** with a short description of the changes made
 
-
 12. Wait for the pull request to be reviewed by a maintainer
 
 13. Make changes to the pull request if the reviewing maintainer recommends them

diff --git a/autumn/404.html b/autumn/404.html
@@ -1,27 +1,44 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-1752YPLP7H"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+
+      gtag("config", "G-1752YPLP7H");
+    </script>
+
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Autumn | tsParticles 404</title>
     <link type="text/css" rel="stylesheet" href="styles/404.css" />
     <title>Autumn 404</title>
-    <link rel="icon" type="image/x-icon" href="../images/tsParticles-64.png">
-</head>
-<body>
+    <link rel="icon" type="image/x-icon" href="../images/tsParticles-64.png" />
+  </head>
+  <body>
     <div class="container">
-        <div id="tsparticles"></div>
+      <div id="tsparticles"></div>
 
-        <div class="wrapper">
-            <img src="/autumn/images/pumpkin.png"></img>
-            <h1>404</h1>
-            <h3>Uh-oh, page not found :(</h3>
-            <a href="#"><button class="link">Go Back</button></a>
-        </div>
+      <div class="wrapper">
+        <img src="/autumn/images/pumpkin.png" />
+        <h1>404</h1>
+        <h3>Uh-oh, page not found :(</h3>
+        <a href="#"><button class="link">Go Back</button></a>
+      </div>
     </div>
-    <script type="text/javascript"
-        src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2.3.4/tsparticles.slim.bundle.min.js"></script>
+    <script
+      type="text/javascript"
+      src="https://cdn.jsdelivr.net/npm/tsparticles-slim@2.3.4/tsparticles.slim.bundle.min.js"
+    ></script>
     <script type="text/javascript" defer="defer" src="scripts/404.js"></script>
-</body>
-</html>
+  </body>
+</html>
diff --git a/autumn/scripts/404.js b/autumn/scripts/404.js
@@ -1,82 +1,82 @@
 tsParticles.load("tsparticles", {
-    fpsLimit: 60,
-    fullScreen: {
-        enable: true
+  fpsLimit: 60,
+  fullScreen: {
+    enable: true,
+  },
+  interactivity: {
+    detectsOn: "window",
+    events: {
+      resize: true,
+      onHover: {
+        enable: true,
+        mode: "bubble",
+      },
     },
-    interactivity: {
-        detectsOn: "window",
-        events: {
-            resize: true,
-            onHover: {
-                enable: true,
-                mode: "bubble"
-            }
-        },
-        modes: {
-            bubble: { distance: 100, duration: 2, opacity: 1, size: 40, speed: 3 },
-            grab: { distance: 400, links: { opacity: 1 } },
-            push: { quantity: 4 },
-            remove: { quantity: 2 },
-            repulse: { distance: 200, duration: 0.4 }
-        }
+    modes: {
+      bubble: { distance: 100, duration: 2, opacity: 1, size: 40, speed: 3 },
+      grab: { distance: 400, links: { opacity: 1 } },
+      push: { quantity: 4 },
+      remove: { quantity: 2 },
+      repulse: { distance: 200, duration: 0.4 },
     },
-    particles: {
-        color: { value: "random" },
-        links: {
-            color: "random",
-            distance: 150,
-            enable: false,
-            opacity: 1,
-            width: 1
-        },
-        move: {
-            attract: { enable: false, rotateX: 600, rotateY: 1200 },
-            bounce: false,
-            direction: "none",
-            enable: true,
-            out_mode: "out",
-            random: false,
-            speed: 3,
-            straight: false
-        },
-        rotate: {
-            animation: {
-                enable: true,
-                speed: 10,
-                sync: false
-            }
-        },
-        number: { density: { enable: true, area: 800 }, value: 100 },
-        opacity: {
-            animation: { enable: true, minimumValue: 1, speed: 1, sync: false },
-            random: false,
-            value: 1
-        },
-        shape: {
-            character: [
-                {
-                    fill: true,
-                    font: "Verdana",
-                    value: ["🍂", "🍁"],
-                    style: "",
-                    weight: 400
-                }
-            ],
-            image: {
-                height: 100,
-                replace_color: true,
-                src: "images/github.svg",
-                width: 100
-            },
-            polygon: { nb_sides: 5 },
-            stroke: { color: "random", width: 1 },
-            type: "char"
+  },
+  particles: {
+    color: { value: "random" },
+    links: {
+      color: "random",
+      distance: 150,
+      enable: false,
+      opacity: 1,
+      width: 1,
+    },
+    move: {
+      attract: { enable: false, rotateX: 600, rotateY: 1200 },
+      bounce: false,
+      direction: "none",
+      enable: true,
+      out_mode: "out",
+      random: false,
+      speed: 3,
+      straight: false,
+    },
+    rotate: {
+      animation: {
+        enable: true,
+        speed: 10,
+        sync: false,
+      },
+    },
+    number: { density: { enable: true, area: 800 }, value: 100 },
+    opacity: {
+      animation: { enable: true, minimumValue: 1, speed: 1, sync: false },
+      random: false,
+      value: 1,
+    },
+    shape: {
+      character: [
+        {
+          fill: true,
+          font: "Verdana",
+          value: ["🍂", "🍁"],
+          style: "",
+          weight: 400,
         },
-        size: {
-            anim: { enable: true, minimumValue: 8, speed: 20, sync: false },
-            random: { minimumValue: 8, enable: true },
-            value: 32
-        }
+      ],
+      image: {
+        height: 100,
+        replace_color: true,
+        src: "images/github.svg",
+        width: 100,
+      },
+      polygon: { nb_sides: 5 },
+      stroke: { color: "random", width: 1 },
+      type: "char",
+    },
+    size: {
+      anim: { enable: true, minimumValue: 8, speed: 20, sync: false },
+      random: { minimumValue: 8, enable: true },
+      value: 32,
     },
-    detectRetina: true
+  },
+  detectRetina: true,
 });