105 install prettier tailwind plugin (#141)

* feat(ide): install prettier tailwind plugin * run prettier with tailwind plugin
NTNU-SmallSatLab · Mar 14, 2024 · b3cca61 · b3cca61
1 parent 66472af
commit b3cca61
Show file tree

Hide file tree

Showing 25 changed files with 137 additions and 61 deletions.
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -4,5 +4,6 @@
     "semi": true,
     "singleQuote": false,
     "bracketSpacing": true,
-    "bracketSameLine": false
+    "bracketSameLine": false,
+    "plugins": ["prettier-plugin-tailwindcss"]
 }
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -65,7 +65,8 @@
         "eslint-config-next": "14.1.0",
         "eslint-config-prettier": "^9.1.0",
         "postcss": "^8",
-        "prettier": "3.2.4",
+        "prettier": "^3.2.4",
+        "prettier-plugin-tailwindcss": "^0.5.12",
         "tailwindcss": "^3.3.0",
         "typescript": "^5.3.3"
     }

diff --git a/frontend/src/app/(about)/contact/page.tsx b/frontend/src/app/(about)/contact/page.tsx
@@ -36,8 +36,8 @@ export default async function ContactPage() {
     const content = people?.data?.people?.data ?? [];
 
     return (
-        <div className="flex justify-center items-start h-full">
-            <div className="flex flex-wrap justify-center items-start h-full max-w-7xl mx-auto">
+        <div className="flex h-full items-start justify-center">
+            <div className="mx-auto flex h-full max-w-7xl flex-wrap items-start justify-center">
                 {content.map((person, index) => (
                     <ContactCard
                         key={index}

diff --git a/frontend/src/app/(about)/partners/page.tsx b/frontend/src/app/(about)/partners/page.tsx
@@ -39,7 +39,7 @@ export default async function PartnersPage() {
 
     return (
         <div className="flex flex-col items-center text-center">
-            <h1 className="text-3xl font-bold mb-10 mt-5">
+            <h1 className="mb-10 mt-5 text-3xl font-bold">
                 Partners and Collaborators
             </h1>
             {partnersData.map((partner) => {
@@ -57,7 +57,7 @@ export default async function PartnersPage() {
                         href={websiteUrl}
                         target="_blank"
                         key={partnerName}
-                        className="hover:transform hover:scale-105 transition-transform duration-300 ease-in-out w-full max-w-lg mx-auto"
+                        className="mx-auto w-full max-w-lg transition-transform duration-300 ease-in-out hover:scale-105 hover:transform"
                     >
                         <Card className="mb-6 bg-neutral-50">
                             <CardHeader>

diff --git a/frontend/src/app/(about)/team/page.tsx b/frontend/src/app/(about)/team/page.tsx
@@ -78,7 +78,7 @@ export default async function TeamPage() {
                 <div>There are no team members to show.</div>
             ) : (
                 <div>
-                    <h1 className="col-span-full text-3xl font-bold mb-10 mt-5">
+                    <h1 className="col-span-full mb-10 mt-5 text-3xl font-bold">
                         MEET THE TEAM
                     </h1>
                     {[
@@ -90,11 +90,11 @@ export default async function TeamPage() {
                         <div key={index} className="mb-8">
                             {" "}
                             {/* Add margin bottom */}
-                            <h1 className="mb-2 col-span-full text-xl font-bold">
+                            <h1 className="col-span-full mb-2 text-xl font-bold">
                                 {role}
                             </h1>{" "}
                             {/* Increase margin bottom and adjust font size */}
-                            <div className="grid grid-cols-2 gap-4 lg:max-w-4xl lg:mx-auto">
+                            <div className="grid grid-cols-2 gap-4 lg:mx-auto lg:max-w-4xl">
                                 {filterPeopleByRole(role || "").map(
                                     (person, index) => {
                                         const name =
@@ -113,16 +113,16 @@ export default async function TeamPage() {
                                                 href={employeeLink}
                                                 target="_blank"
                                                 key={name + index}
-                                                className="hover:transform hover:scale-105 transition-transform duration-300 ease-in-out"
+                                                className="transition-transform duration-300 ease-in-out hover:scale-105 hover:transform"
                                             >
-                                                <Card className="bg-neutral-50 w-full">
+                                                <Card className="w-full bg-neutral-50">
                                                     <CardHeader>
                                                         <CardTitle className="text-black">
                                                             <p>{name}</p>
                                                         </CardTitle>
                                                     </CardHeader>
                                                     <CardContent className="flex items-center">
-                                                        <Avatar className="w-16 h-16 mr-4">
+                                                        <Avatar className="mr-4 h-16 w-16">
                                                             <AvatarImage
                                                                 src={
                                                                     profilePictureURL
@@ -152,10 +152,10 @@ export default async function TeamPage() {
                 <div>There are no projects to show.</div>
             ) : (
                 <div className="overflow-x-auto">
-                    <h1 className="text-3xl font-bold mb-10 mt-5">
+                    <h1 className="mb-10 mt-5 text-3xl font-bold">
                         Ongoing PhD Projects
                     </h1>
-                    <Table className="w-full border border-collapse border-gray-400">
+                    <Table className="w-full border-collapse border border-gray-400">
                         <TableCaption>Ongoing PhD Projects</TableCaption>
                         <TableHeader>
                             <TableRow className="border-b">

diff --git a/frontend/src/app/blog/[articleSlug]/page.tsx b/frontend/src/app/blog/[articleSlug]/page.tsx
@@ -84,11 +84,11 @@ export default async function Page({
 
     return (
         <>
-            <div className="flex flex-col gap-4 items-center">
+            <div className="flex flex-col items-center gap-4">
                 <h1 className="text-4xl font-extrabold">
                     {article?.attributes?.title}
                 </h1>
-                <div className="flex flex-row justify-center gap-1 items-center">
+                <div className="flex flex-row items-center justify-center gap-1">
                     {avatarURL && (
                         <Avatar className="">
                             <AvatarImage src={avatarURL} />

diff --git a/frontend/src/app/blog/page.tsx b/frontend/src/app/blog/page.tsx
@@ -70,13 +70,13 @@ export default async function BlogPage() {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col items-center justify-center">
             <h1 className="text-4xl font-extrabold ">Blog</h1>
             <p className="text-sm text-muted-foreground">
                 News and other short stories about our activities are shown
                 here.
             </p>
-            <div className="flex flex-col gap-4 mt-4 justify-center items-center">
+            <div className="mt-4 flex flex-col items-center justify-center gap-4">
                 {graphqlData.data.articles.data.map((article) => {
                     let avatarURL =
                         article?.attributes?.author?.data?.attributes?.avatar
@@ -129,7 +129,7 @@ export default async function BlogPage() {
                                 <BlockRendererClient content={content} />
                             </CardContent>
                             <CardFooter>
-                                <div className="flex flex-row justify-center gap-1 items-center">
+                                <div className="flex flex-row items-center justify-center gap-1">
                                     {avatarURL && (
                                         <Avatar className="">
                                             <AvatarImage src={avatarURL} />

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en" suppressHydrationWarning>
-            <body className={cn("flex flex-col min-h-screen", inter.className)}>
+            <body className={cn("flex min-h-screen flex-col", inter.className)}>
                 <ApolloWrapper>
                     <ThemeProvider
                         attribute="class"

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
@@ -21,22 +21,22 @@ export default function Home() {
 
             <ColoredSection
                 id="about-us"
-                className="flex flex-col items-center py-12 px-8"
+                className="flex flex-col items-center px-8 py-12"
             >
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
                     <h1>
                         Empowering Space Exploration One Satellite at a Time
                     </h1>
 
-                    <div className="relative w-[300px] h-[300px]">
+                    <div className="relative h-[300px] w-[300px]">
                         <Image
                             alt="Satellite in orbit"
                             src="/images/satellite.jpg"
                             className="m-0 object-fill"
                             layout="fill"
                         />
                     </div>
-                    <div className="flex flex-col gap-4 items-center col-span-2 lg:col-span-2 ">
+                    <div className="col-span-2 flex flex-col items-center gap-4 lg:col-span-2 ">
                         <div className=" self-center">
                             <p>
                                 NTNU Small Satellite Lab is an initiative to
@@ -55,7 +55,7 @@ export default function Home() {
                     </div>
                 </div>
             </ColoredSection>
-            <div className="pt-8 items-center text-center flex flex-col py-12 px-8">
+            <div className="flex flex-col items-center px-8 py-12 pt-8 text-center">
                 <div className="prose dark:prose-invert">
                     <h1 className="">Projects</h1>
                     <p className="">
@@ -75,10 +75,10 @@ export default function Home() {
                     </Link>
                 </div>
             </div>
-            <ColoredSection className="flex flex-col items-center py-12 px-8">
-                <div className="flex flex-col items-center text-center prose dark:prose-invert prose-img:rounded-xl">
+            <ColoredSection className="flex flex-col items-center px-8 py-12">
+                <div className="prose flex flex-col items-center text-center dark:prose-invert prose-img:rounded-xl">
                     <h1 className="">Most recent picture</h1>
-                    <div className="relative w-[300px] h-[300px]">
+                    <div className="relative h-[300px] w-[300px]">
                         <Image
                             alt="Satellite image of city"
                             src="/images/recent-image.jpg"

diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -77,7 +77,7 @@ export default async function Page({
     }
 
     return (
-        <div className="flex flex-col gap-4 items-center">
+        <div className="flex flex-col items-center gap-4">
             <h1 className="text-4xl font-extrabold">
                 {projects?.attributes?.title}
             </h1>

diff --git a/frontend/src/app/projects/page.tsx b/frontend/src/app/projects/page.tsx
@@ -55,13 +55,13 @@ export default async function ProjectsPage() {
     }
 
     return (
-        <div className="flex flex-col justify-center items-center">
+        <div className="flex flex-col items-center justify-center">
             <h1 className="text-4xl font-extrabold ">Our Projects</h1>
             <p className="text-sm text-muted-foreground">
                 Information about our various projects are shown here.
             </p>
 
-            <div className="flex flex-col gap-4 mt-4 justify-center items-center">
+            <div className="mt-4 flex flex-col items-center justify-center gap-4">
                 {graphqlData.data.projects.data.map((project) => {
                     let coverImage =
                         project?.attributes?.coverImage?.data?.attributes?.url;

diff --git a/frontend/src/app/satellites/[satelliteSlug]/page.tsx b/frontend/src/app/satellites/[satelliteSlug]/page.tsx
@@ -49,7 +49,7 @@ export default async function SatelliteInfoPage({
 
                 {graphqlData?.data?.satellites?.data.map((satellite) => (
                     <div key={satellite.id} className="w-1/2 text-center">
-                        <h1 className="text-4xl mb-4">
+                        <h1 className="mb-4 text-4xl">
                             {satellite?.attributes?.satelliteName}
                         </h1>
                         <div className="gap-1">

diff --git a/frontend/src/app/satellites/page.tsx b/frontend/src/app/satellites/page.tsx
@@ -50,7 +50,7 @@ export default async function Satellites() {
                     }
                     return (
                         <Card key={satellite.id}>
-                            <CardHeader className="flex flex-col justify-center items-center">
+                            <CardHeader className="flex flex-col items-center justify-center">
                                 <CardTitle>
                                     <Link
                                         href={

diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx
@@ -31,23 +31,23 @@ export default function BlockRendererClient({
                     switch (level) {
                         case 1:
                             return (
-                                <h1 className="text-4xl mb-4">{children}</h1>
+                                <h1 className="mb-4 text-4xl">{children}</h1>
                             );
                         case 2:
                             return (
-                                <h2 className="text-3xl mb-2">{children}</h2>
+                                <h2 className="mb-2 text-3xl">{children}</h2>
                             );
                         case 3:
                             return (
-                                <h3 className="text-2xl mb-2">{children}</h3>
+                                <h3 className="mb-2 text-2xl">{children}</h3>
                             );
                         case 4:
-                            return <h4 className="text-xl mb-2">{children}</h4>;
+                            return <h4 className="mb-2 text-xl">{children}</h4>;
                         case 5:
-                            return <h5 className="text-lg mb-2">{children}</h5>;
+                            return <h5 className="mb-2 text-lg">{children}</h5>;
                         default:
                             return (
-                                <h1 className="text-4xl mb-4">{children}</h1>
+                                <h1 className="mb-4 text-4xl">{children}</h1>
                             );
                     }
                 },

diff --git a/frontend/src/components/ContactCard.tsx b/frontend/src/components/ContactCard.tsx
@@ -25,7 +25,7 @@ export function ContactCard({
     externalUrl,
 }: ContactCardProps) {
     return (
-        <Card className="w-[350px] m-2">
+        <Card className="m-2 w-[350px]">
             <CardHeader>
                 <Avatar>
                     <AvatarImage src={imageUrl} alt={name} />

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -2,13 +2,13 @@ import NTNULogo from "./ntnu/NTNULogo";
 
 export default function Footer() {
     return (
-        <footer className="p-4 bg-background text-foreground flex flex-col items-center">
-            <div className="flex flex-row items-center justify-between w-full">
-                <div className="flex-1 flex justify-start">
+        <footer className="flex flex-col items-center bg-background p-4 text-foreground">
+            <div className="flex w-full flex-row items-center justify-between">
+                <div className="flex flex-1 justify-start">
                     <NTNULogo />
                 </div>
 
-                <div className="flex-1 flex justify-center">
+                <div className="flex flex-1 justify-center">
                     <div className="flex flex-col text-center">
                         <div className="flex flex-row gap-4">
                             <a href="#" className="hover:underline">
@@ -28,7 +28,7 @@ export default function Footer() {
                     </div>
                 </div>
 
-                <div className="flex-1 flex justify-end">
+                <div className="flex flex-1 justify-end">
                     <div className="flex flex-col text-right">
                         <span className="">NTNU Small Satellite Lab</span>
                         <span className="">Trondheim, Norway</span>