Merge pull request #20 from UTDNebula/prettier

Add prettier and a GitHub action lint check

.github/workflows/lint-check.yaml

@@ -0,0 +1,13 @@
+name: lint-check
+on: [push]
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+      - run: npm install next
+      - run: npm run lint:check
+      - run: npm run format:check

.prettierignore

@@ -0,0 +1,6 @@
+.cache
+.next
+.vscode
+package.json
+pnpm-lock.yaml
+public

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 100,
+  tabWidth: 2,
+};

next.config.js

@@ -1,12 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-}
+};
 
 const withNextra = require('nextra')({
   theme: 'nextra-theme-docs',
-  themeConfig: './theme.config.tsx'
-})
-
-module.exports = withNextra(nextConfig)
-
+  themeConfig: './theme.config.tsx',
+});
+
+module.exports = withNextra(nextConfig);

package.json

@@ -6,7 +6,10 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint:check": "next lint",
+    "lint": "next lint --fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
   },
   "dependencies": {
     "@headlessui/react": "^1.7.17",
@@ -25,6 +28,7 @@
     "eslint": "^8.48.0",
     "eslint-config-next": "^13.4.19",
     "postcss": "^8.4.29",
+    "prettier": "^3.0.3",
     "tailwindcss": "^3.3.3",
     "typescript": "5.2.2"
   }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/Blob.tsx

@@ -1,34 +1,36 @@
-import clsx from "clsx"
+import clsx from 'clsx';
 
-const Blob = (props: {className: string, color: keyof typeof colors, size: keyof typeof sizes, animate?: boolean}) => {
-    const colors = {
-        "orange": "bg-[#FDBB59]",
-        "blue-1": "bg-[#687BE8]",
-        "blue-2": "bg-[#5644DC]",
-        "pink": "bg-[#FF6B4A]",
-        "royal": "bg-royal",
-        "4835BC": "bg-[#4835BC]",
-        "926FDB": "bg-[#926FDB]",
-        "periwinkle": "bg-periwinkle"
-    } as const 
-
-    const sizes = {
-        medium: "lg:h-[35vw] lg:w-[35vw]",
-        large: "lg:h-[45vw] lg:w-[45vw]",
-    } as const
+const Blob = (props: {
+  className: string;
+  color: keyof typeof colors;
+  size: keyof typeof sizes;
+  animate?: boolean;
+}) => {
+  const colors = {
+    orange: 'bg-[#FDBB59]',
+    'blue-1': 'bg-[#687BE8]',
+    'blue-2': 'bg-[#5644DC]',
+    pink: 'bg-[#FF6B4A]',
+    royal: 'bg-royal',
+    '4835BC': 'bg-[#4835BC]',
+    '926FDB': 'bg-[#926FDB]',
+    periwinkle: 'bg-periwinkle',
+  } as const;
 
-    const classes = clsx(
-        "absolute rounded-full blur-[120px] mix-blend-multiply",
-        sizes[props.size], 
-        colors[props.color], 
-        "to-transparent bg-gradient-radial",
-        props.className
-    )
+  const sizes = {
+    medium: 'lg:h-[35vw] lg:w-[35vw]',
+    large: 'lg:h-[45vw] lg:w-[45vw]',
+  } as const;
 
-    return (
-        <span
-        className={classes} />
-    )
-}
+  const classes = clsx(
+    'absolute rounded-full blur-[120px] mix-blend-multiply',
+    sizes[props.size],
+    colors[props.color],
+    'to-transparent bg-gradient-radial',
+    props.className,
+  );
 
-export default Blob
+  return <span className={classes} />;
+};
+
+export default Blob;

src/components/CTA.tsx

@@ -1,34 +1,43 @@
-import Circles from "@/../public/circles.svg";
-import Image from "next/image";
-import Blob from "@/components/Blob";
+import Circles from '@/../public/circles.svg';
+import Image from 'next/image';
+import Blob from '@/components/Blob';
 
 const CTA = () => {
-    return ( <div className="relative flex place-content-center my-24 overflow-visible">
-        <div className="absolute top-0 left-0 w-screen h-full overflow-visible">
-            <Blob className="-left-12 -top-[25%] -z-20" color="pink" size="medium" />
-            <Blob className="left-[15%] top-[35%] -z-20" color="royal" size="medium" />
+  return (
+    <div className="relative flex place-content-center my-24 overflow-visible">
+      <div className="absolute top-0 left-0 w-screen h-full overflow-visible">
+        <Blob className="-left-12 -top-[25%] -z-20" color="pink" size="medium" />
+        <Blob className="left-[15%] top-[35%] -z-20" color="royal" size="medium" />
         <Image
-      src={Circles}
-      alt={""}
-      className="absolute -top-48 h-screen w-screen overflow-visible -z-10 object-cover"
-    />
-    <Blob className="left-[70%] -top-16 -z-20" color="periwinkle" size="medium" />
-        </div>
+          src={Circles}
+          alt={''}
+          className="absolute -top-48 h-screen w-screen overflow-visible -z-10 object-cover"
+        />
+        <Blob className="left-[70%] -top-16 -z-20" color="periwinkle" size="medium" />
+      </div>
 
-      <div className="mx-6 md:max-w-5xl md:px-36 py-8 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-3 font-semibold drop-shadow-2xl hover:scale-105 duration-200 scale-100 transition-transform border border-opacity-50 border-white" style={{
-          backgroundColor:'hsla(226,100%,93%,1)',
+      <div
+        className="mx-6 md:max-w-5xl md:px-36 py-8 sm:px-20 px-12 text-white text-center flex flex-col place-items-center rounded-lg gap-3 font-semibold drop-shadow-2xl hover:scale-105 duration-200 scale-100 transition-transform border border-opacity-50 border-white"
+        style={{
+          backgroundColor: 'hsla(226,100%,93%,1)',
           backgroundImage: `radial-gradient(circle at 58% 94%, hsla(43,96%,56%,1) 0px, transparent 50%),
           radial-gradient(circle at 87% 89%, hsla(10,100%,64%,1) 0px, transparent 50%),
           radial-gradient(circle at 20% 50%, hsla(234,89%,73%,1) 0px, transparent 80%),
-          radial-gradient(circle at 41% 0%, hsla(248,100%,61%,1) 0px, transparent 50%)`
-        }}>
-          <Image src={'/icon-white.svg'} alt={'logo'} width={100} height={0} />
-          <h3 className="text-3xl">Ready to explore the stars with us?</h3>
-          <p className="">Join Nebula Labs today and be a part of our mission to innovate and create tools that make a difference in the world.</p>
-          <button className="w-min rounded-full bg-white text-cornflower-500 px-6 py-1 mt-5 whitespace-nowrap font-bold shadow-xl hover:shadow-lg duration-75 transition-shadow">Get Involved</button>
-        </div>
-
-      </div>)
-}
+          radial-gradient(circle at 41% 0%, hsla(248,100%,61%,1) 0px, transparent 50%)`,
+        }}
+      >
+        <Image src={'/icon-white.svg'} alt={'logo'} width={100} height={0} />
+        <h3 className="text-3xl">Ready to explore the stars with us?</h3>
+        <p className="">
+          Join Nebula Labs today and be a part of our mission to innovate and create tools that make
+          a difference in the world.
+        </p>
+        <button className="w-min rounded-full bg-white text-cornflower-500 px-6 py-1 mt-5 whitespace-nowrap font-bold shadow-xl hover:shadow-lg duration-75 transition-shadow">
+          Get Involved
+        </button>
+      </div>
+    </div>
+  );
+};
 
-export default CTA
+export default CTA;