fix: simplify footer and particles init

Author: Abhash-Chakraborty

src/components/particle.tsx

@@ -1,19 +1,30 @@
 import * as React from "react";
-import Particles, { initParticlesEngine } from "@tsparticles/react";
-import { useEffect, useMemo, useState } from "react";
+import * as ParticlesReact from "@tsparticles/react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { loadSlim } from "@tsparticles/slim";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 
 const ParticlesInner = (props) => {
   const [init, setInit] = useState(false);
+  const Particles = (ParticlesReact.default ??
+    ParticlesReact.Particles) as React.ComponentType<Record<string, unknown>>;
+
+  const particlesInit = useCallback(async (engine) => {
+    await loadSlim(engine);
+  }, []);
 
   useEffect(() => {
-    initParticlesEngine(async (engine) => {
-      await loadSlim(engine);
-    }).then(() => {
+    const initParticlesEngine = ParticlesReact.initParticlesEngine;
+
+    if (typeof initParticlesEngine !== "function") {
+      setInit(true);
+      return;
+    }
+
+    initParticlesEngine(particlesInit).then(() => {
       setInit(true);
     });
-  }, []);
+  }, [particlesInit]);
 
   const options = useMemo(
     () => ({
@@ -108,7 +119,7 @@ const ParticlesInner = (props) => {
         pointerEvents: "none",
       }}
     >
-      <Particles id={props.id} options={options} />
+      <Particles id={props.id} init={particlesInit} options={options} />
     </div>
   );
 };

src/theme/Footer/Layout/enhanced-footer.css

@@ -123,8 +123,8 @@
 
 .footer-main {
   display: grid;
-  grid-template-columns: 0.95fr 0.95fr 0.9fr 0.9fr 1.35fr;
-  column-gap: 28px;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  column-gap: 56px;
   row-gap: 40px;
   padding: 70px 56px 54px;
   min-height: 410px;
@@ -210,126 +210,6 @@
   border-color: rgba(0, 212, 164, 0.25);
 }
 
-.newsletter-description {
-  margin: -4px 0 18px;
-  color: var(--footer-steel);
-  font-size: 15px;
-  line-height: 1.5;
-}
-
-.newsletter-form {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
-}
-
-.newsletter-input {
-  width: 100%;
-  min-width: 0;
-  height: 40px;
-  padding: 0 13px;
-  border: 1px solid var(--footer-hairline);
-  border-radius: 8px;
-  background: var(--footer-canvas);
-  color: var(--footer-ink);
-  font: inherit;
-  font-size: 14px;
-  outline: none;
-}
-
-.newsletter-input:focus {
-  border-color: var(--footer-green);
-  box-shadow: 0 0 0 3px rgba(0, 212, 164, 0.12);
-}
-
-.newsletter-input.input-error {
-  border-color: var(--footer-error);
-}
-
-.newsletter-button {
-  height: 40px;
-  padding: 0 16px;
-  border: 0;
-  border-radius: 999px;
-  background: var(--footer-ink);
-  color: var(--footer-canvas);
-  font-size: 14px;
-  font-weight: 600;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.newsletter-button:hover {
-  background: var(--footer-steel);
-}
-
-.newsletter-button.subscribed,
-.newsletter-button:disabled {
-  background: var(--footer-green);
-  color: #0a0a0a;
-  cursor: default;
-}
-
-.error-text {
-  grid-column: 1 / -1;
-  margin: 0;
-  color: var(--footer-error);
-  font-size: 13px;
-}
-
-.newsletter-stats {
-  margin-top: 12px;
-}
-
-.newsletter-stat {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  color: var(--footer-steel);
-  font-size: 13px;
-  line-height: 1.4;
-}
-
-.quick-links-section {
-  margin-top: 26px;
-}
-
-.quick-links-title {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  margin: 0 0 10px;
-  color: var(--footer-stone);
-  font-size: 13px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.quick-links-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-
-.quick-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  min-height: 34px;
-  padding: 7px 11px;
-  border: 1px solid var(--footer-hairline);
-  border-radius: 999px;
-  background: var(--footer-surface-soft);
-  color: var(--footer-charcoal);
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.quick-link:hover {
-  border-color: var(--footer-hairline);
-}
-
 .footer-stats {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -391,20 +271,12 @@
 }
 
 .footer-bottom {
-  min-height: 94px;
+  min-height: 72px;
   display: grid;
-  grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 1fr);
-  align-items: center;
-  gap: 24px;
-  padding: 18px 40px;
-}
-
-.footer-bottom-center {
-  display: flex;
-  flex-direction: column;
+  grid-template-columns: minmax(0, 1fr) auto;
   align-items: center;
-  gap: 10px;
-  min-width: 0;
+  gap: 20px;
+  padding: 14px 40px;
 }
 
 .legal-link {
@@ -415,9 +287,9 @@
 
 .footer-copyright {
   color: var(--footer-steel);
-  font-size: 16px;
+  font-size: 13px;
   line-height: 1.4;
-  text-align: center;
+  text-align: left;
 }
 
 .footer-copyright a {
@@ -428,8 +300,8 @@
 }
 
 .footer-heart-icon {
-  width: 16px;
-  height: 16px;
+  width: 13px;
+  height: 13px;
   display: inline-block;
   vertical-align: -2px;
   color: #e5484d;
@@ -441,31 +313,31 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 38px;
+  min-height: 32px;
   padding: 0;
   border-radius: 999px;
   background: transparent;
 }
 
 .footer-theme-switcher {
-  --theme-option-width: 40px;
+  --theme-option-width: 32px;
   position: relative;
   display: grid;
   grid-template-columns: repeat(3, var(--theme-option-width));
   align-items: center;
-  min-height: 38px;
-  padding: 3px;
+  min-height: 32px;
+  padding: 2px;
   border-radius: 999px;
   background: var(--footer-surface);
 }
 
 .footer-theme-switcher::before {
   content: "";
   position: absolute;
-  top: 3px;
-  left: 3px;
+  top: 2px;
+  left: 2px;
   width: var(--theme-option-width);
-  height: calc(100% - 6px);
+  height: calc(100% - 4px);
   border-radius: 999px;
   background: var(--footer-canvas);
   border: 1px solid var(--footer-hairline);
@@ -484,7 +356,7 @@
 .footer-theme-option {
   position: relative;
   z-index: 1;
-  height: 32px;
+  height: 28px;
   padding: 0;
   display: inline-flex;
   align-items: center;
@@ -499,8 +371,8 @@
 }
 
 .footer-theme-option svg {
-  width: 15px;
-  height: 15px;
+  width: 13px;
+  height: 13px;
   display: block;
 }