refactor: clean up imports and improve formatting in layout, particle…

…s, footer, icons, and button components
javaistic · arghyaxcodes · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025 · Aug 1, 2025
commit c04a4a7422df76cd587cf331b3c8b623e7a46ae3
diff --git a/src/app/docs/layout.tsx b/src/app/docs/layout.tsx
@@ -1,14 +1,11 @@
-import { DocsLayout, DocsLayoutProps } from "fumadocs-ui/layouts/notebook";
-import type { ReactNode } from "react";
 import { baseOptions } from "@/app/layout.config";
 import { source } from "@/lib/source";
+import { DocsLayout, DocsLayoutProps } from "fumadocs-ui/layouts/notebook";
+import type { ReactNode } from "react";
 
 const docsLayoutOptions: DocsLayoutProps = {
   tree: source.pageTree,
   ...baseOptions,
-  themeSwitch: {
-    mode: "light-dark",
-  },
 };
 
 export default function Layout({ children }: { children: ReactNode }) {

diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
@@ -21,7 +21,10 @@ const defaultColors: string[] = ["#ffffff", "#ffffff", "#ffffff"];
 const hexToRgb = (hex: string): [number, number, number] => {
   hex = hex.replace(/^#/, "");
   if (hex.length === 3) {
-    hex = hex.split("").map((c) => c + c).join("");
+    hex = hex
+      .split("")
+      .map((c) => c + c)
+      .join("");
   }
   const int = parseInt(hex, 16);
   const r = ((int >> 16) & 255) / 255;
@@ -142,7 +145,10 @@ const Particles: React.FC<ParticlesProps> = ({
     const positions = new Float32Array(count * 3);
     const randoms = new Float32Array(count * 4);
     const colors = new Float32Array(count * 3);
-    const palette = particleColors && particleColors.length > 0 ? particleColors : defaultColors;
+    const palette =
+      particleColors && particleColors.length > 0
+        ? particleColors
+        : defaultColors;
 
     for (let i = 0; i < count; i++) {
       let x: number, y: number, z: number, len: number;
@@ -154,7 +160,10 @@ const Particles: React.FC<ParticlesProps> = ({
       } while (len > 1 || len === 0);
       const r = Math.cbrt(Math.random());
       positions.set([x * r, y * r, z * r], i * 3);
-      randoms.set([Math.random(), Math.random(), Math.random(), Math.random()], i * 4);
+      randoms.set(
+        [Math.random(), Math.random(), Math.random(), Math.random()],
+        i * 4,
+      );
       const col = hexToRgb(palette[Math.floor(Math.random() * palette.length)]);
       colors.set(col, i * 3);
     }
@@ -237,10 +246,7 @@ const Particles: React.FC<ParticlesProps> = ({
   ]);
 
   return (
-    <div
-      ref={containerRef}
-      className={`relative w-full h-full ${className}`}
-    />
+    <div ref={containerRef} className={`relative h-full w-full ${className}`} />
   );
 };
 

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -35,11 +35,11 @@ const footerNav = {
 
 export function Footer() {
   return (
-    <footer className="bg-neutral-100 dark:bg-neutral-900 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28">
+    <footer className="bg-neutral-100 pt-16 pb-10 sm:pt-20 md:pt-24 xl:pt-28 dark:bg-neutral-900">
       <div className="mx-auto max-w-screen-xl px-4 sm:px-6 md:px-8">
         {/* Navigation Links */}
-        <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8 pb-14 sm:pb-20 text-sm font-medium">
-          <div className="flex flex-col items-start col-span-2 sm:col-span-2 gap-y-6">
+        <div className="grid grid-cols-2 gap-8 pb-14 text-sm font-medium sm:grid-cols-2 sm:pb-20 md:grid-cols-3 lg:grid-cols-6">
+          <div className="col-span-2 flex flex-col items-start gap-y-6 sm:col-span-2">
             <Logo className="h-8 w-auto" />
             <p className="text-muted-foreground">
               High quality Java coding education maintained by an open source
@@ -49,34 +49,34 @@ export function Footer() {
               <Link
                 href="https://github.com/javaistic/javaistic"
                 aria-label="GitHub"
-                className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#181717] dark:hover:text-white"
+                className="text-muted-foreground transition-colors duration-200 ease-in-out hover:text-[#181717] dark:hover:text-white"
               >
                 <GitHubIcon className="h-5 w-5" />
               </Link>
               <Link
                 href="/discord"
                 aria-label="Discord"
-                className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#5865F2]"
+                className="text-muted-foreground transition-colors duration-200 ease-in-out hover:text-[#5865F2]"
               >
                 <DiscordIcon className="h-5 w-5" />
               </Link>
               <Link
                 href="https://x.com/javaistic"
                 aria-label="X (formerly Twitter)"
-                className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-foreground"
+                className="text-muted-foreground hover:text-foreground transition-colors duration-200 ease-in-out"
               >
                 <TwitterIcon className="h-5 w-5" />
               </Link>
               <Link
                 href="https://opencollective.com/javaistic"
                 aria-label="Open Collective"
-                className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-[#7FADF2]"
+                className="text-muted-foreground transition-colors duration-200 ease-in-out hover:text-[#7FADF2]"
               >
                 <OpenCollectiveIcon className="h-5 w-5" />
               </Link>
             </div>
 
-            <div className="text-sm text-neutral-500 flex items-center space-x-1">
+            <div className="flex items-center space-x-1 text-sm text-neutral-500">
               <span>Made by</span>
               <Link
                 href="https://arghya.dev?ref=javaistic"
@@ -90,15 +90,15 @@ export function Footer() {
           </div>
           {Object.entries(footerNav).map(([section, items]) => (
             <div key={section}>
-              <h2 className="text-lg font-bold text-foreground mb-4">
+              <h2 className="text-foreground mb-4 text-lg font-bold">
                 {section}
               </h2>
               <ul className="space-y-3">
                 {items.map((item) => (
                   <li key={item.title}>
                     <Link
                       href={item.href}
-                      className="transition-colors duration-200 ease-in-out text-muted-foreground hover:text-foreground"
+                      className="text-muted-foreground hover:text-foreground transition-colors duration-200 ease-in-out"
                     >
                       {item.title}
                     </Link>
@@ -110,7 +110,7 @@ export function Footer() {
         </div>
 
         {/* Legal and Badge */}
-        <div className="flex flex-col gap-y-2 sm:flex-row items-center justify-between text-sm text-neutral-500">
+        <div className="flex flex-col items-center justify-between gap-y-2 text-sm text-neutral-500 sm:flex-row">
           <h4>
             &copy; 2021 - {new Date().getFullYear()} Javaistic. All rights
             reserved.

diff --git a/src/components/icons.tsx b/src/components/icons.tsx
@@ -1,7 +1,7 @@
 import { JSX, SVGProps } from "react";
 
 export function GitHubIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
   return (
     <svg
@@ -20,7 +20,7 @@ export function GitHubIcon(
 }
 
 export function TwitterIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
   return (
     <svg
@@ -39,22 +39,26 @@ export function TwitterIcon(
 }
 
 export function DiscordIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
   return (
-    <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"
-    {...props}
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
     >
       <title>Discord</title>
       <path
-      fill="currentColor"
-      d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z" />
+        fill="currentColor"
+        d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
+      />
     </svg>
   );
 }
 
 export function OpenCollectiveIcon(
-  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>
+  props: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
 ) {
   return (
     <svg

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -32,7 +32,7 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
+  },
 );
 
 function Button({
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,7 +32,7 @@ const buttonVariants = cva( @@
           variant: "default",
           size: "default",
         },
-      }
+      },
     );
     function Button({
@@ Expand Down @@