chore: add tailwind prettier plugin

.prettierrc

@@ -5,7 +5,11 @@
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",
-  "plugins": ["prettier-plugin-astro"],
+  "plugins": [
+    "prettier-plugin-astro",
+    "prettier-plugin-tailwind-css",
+    "@brown-ccv/prettier-config"
+  ],
   "overrides": [
     {
       "files": "*.astro",

package.json

@@ -18,6 +18,7 @@
     "@astrojs/rss": "^4.0.5",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/tailwind": "^5.1.0",
+    "@brown-ccv/prettier-config": "^0.3.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-form": "^0.0.3",
@@ -43,6 +44,7 @@
     "eslint": "^8.56.0",
     "eslint-plugin-astro": "^0.31.4",
     "prettier": "^3.2.5",
-    "prettier-plugin-astro": "^0.13.0"
+    "prettier-plugin-astro": "^0.13.0",
+    "prettier-plugin-tailwind-css": "^1.5.0"
   }
 }

src/components/ActivityPage.tsx

@@ -24,7 +24,7 @@ const ActivityPage = () => {
       {user && activityData && (
         <section className="space-y-2">
           <h3>
-            <span className="font-bold px-2">{activityData.length}</span> download(s)
+            <span className="px-2 font-bold">{activityData.length}</span> download(s)
           </h3>
           <ActivityTable data={activityData} />
         </section>

src/components/ActivityTable.tsx

@@ -7,10 +7,10 @@ export interface ActivityTableProps {
 
 const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
   return (
-    <div className="w-full overflow-x-scroll no-scrollbar">
-      <table className="table-fixed border-spacing-2 w-full">
+    <div className="no-scrollbar w-full overflow-x-scroll">
+      <table className="border-spacing-2 w-full table-fixed">
         <thead>
-          <tr className="text-xl bg-neutral-100 text-left text-neutral-900">
+          <tr className="bg-neutral-100 text-neutral-900 text-xl text-left">
             <th>Description</th>
             <th className="w-1/4">User</th>
             <th className="w-1/5">Download Date</th>
@@ -28,8 +28,8 @@ const ActivityTable: React.FC<ActivityTableProps> = ({ data }) => {
                   </td>
                   <td>
                     <div>
-                      <p className="text-lg font-semibold text-neutral-900">{name}</p>
-                      <p className="text-neutral-700 italic overflow-hidden overflow-ellipsis ">
+                      <p className="text-neutral-900 text-lg font-semibold">{name}</p>
+                      <p className="text-neutral-700 overflow-ellipsis  overflow-hidden italic">
                         {email}
                       </p>
                       <p className="small">{institution}</p>

src/components/Card.tsx

@@ -14,11 +14,11 @@ const Card: React.FC<CardProps> = ({ link, image, title, name, institution, bio
   // strip 'public/' from the avatar string since astro's public folder is available without this in the link
   const imageURL = image?.replace("/public", "")
   return (
-    <div className="flex flex-col md:flex-row gap-4 md:gap-8">
+    <div className="md:flex-row md:gap-8 flex flex-col gap-4">
       {image && (
         <div className="flex-none">
           <img
-            className="object-cover rounded-full w-40 h-40 md:w-64 md:h-64"
+            className="md:w-64 md:h-64 object-cover w-40 h-40 rounded-full"
             src={imageURL}
             alt={name}
           />
@@ -27,7 +27,7 @@ const Card: React.FC<CardProps> = ({ link, image, title, name, institution, bio
       <div className="space-y-4">
         <div>
           <a
-            className="text-xl font-semibold underline text-neutral-900"
+            className="text-neutral-900 text-xl font-semibold underline"
             href={link}
             target="_blank"
           >

src/components/DataForm.tsx

@@ -23,7 +23,7 @@ const DataForm = () => {
   return (
     <Form.Root
       ref={formRef}
-      className="p-6 rounded outline outline-neutral-100 outline-1 shadow-md space-y-4"
+      className="outline outline-neutral-100 outline-1 p-6 space-y-4 rounded shadow-md"
       onSubmit={handleSubmit(onSubmit)}
       action="https://repository.library.brown.edu/studio/item/bdr:p54c6u36/"
       target="_blank"

src/components/HeaderLink.astro

@@ -15,7 +15,7 @@ const isActive = href === pathname || href === "/" + subpath?.[0]
   class:list={[
     className,
     "hover:underline underline-offset-8",
-      isActive ? "text-neutral-900 font-semibold underline" : "no-underline",
+    isActive ? "text-neutral-900 font-semibold underline" : "no-underline",
   ]}
   {...props}
 >

src/components/Input.tsx

@@ -14,14 +14,14 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <Form.Field name={name} className="flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <div className="flex items-center gap-2 bg-white rounded-full shadow-inner min-w-60 w-max py-3 px-5 focus-within:shadow-inner-focus">
+        <div className="min-w-60 w-max focus-within:shadow-inner-focus flex items-center gap-2 px-5 py-3 bg-white rounded-full shadow-inner">
           {icon && <span className="text-neutral-300 w-5 h-5">{icon}</span>}
 
           <Form.Control asChild>
             <input {...delegated} ref={ref} />
           </Form.Control>
         </div>
-        <Form.Message className="px-2 text-primary-300" match="valueMissing">
+        <Form.Message className="text-primary-300 px-2" match="valueMissing">
           Please enter your {label}
         </Form.Message>
         {match !== undefined && (

src/components/Login.tsx

@@ -34,7 +34,7 @@ const Login: React.FC<LoginProps> = ({ currentUser, setUserFunction }) => {
           <Button onClick={() => login()}>Log In</Button>
         )}
       </div>
-      {message && <p className="font-semibold text-primary-300">{message}</p>}
+      {message && <p className="text-primary-300 font-semibold">{message}</p>}
     </section>
   )
 }

src/components/Publications.tsx

@@ -58,15 +58,15 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
     <>
       <section className="flex flex-col gap-6">
         <h2>Featured Publications</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-2">
+        <div className="md:grid-cols-2 grid grid-cols-1 gap-2">
           {featuredPubs.map((publication, i) => {
             return (
               <div key={i} className="">
                 <div className="flex flex-col gap-8">
                   <p>{publication.citation}</p>
                   {publication.pdf && (
                     <a
-                      className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                      className="bg-neutral-500 text-neutral-50 px-7 w-max py-3 no-underline rounded-full"
                       href={publication.pdf}
                     >
                       View PDF
@@ -78,12 +78,12 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
           })}
         </div>
       </section>
-      <Form className="flex flex-col lg:flex-row gap-4 justify-center my-24">
+      <Form className="lg:flex-row flex flex-col justify-center gap-4 my-24">
         <div>
           <Input
             label="Search for a publication"
             name="pubQuery"
-            icon={<MagnifyingGlassIcon className="h-full w-full" />}
+            icon={<MagnifyingGlassIcon className="w-full h-full" />}
             placeholder="Durand, Jorge..."
             value={searchInput}
             onChange={handleChange}
@@ -144,10 +144,10 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                                 }
                               >
                                 {option.label === "Books" && (
-                                  <div className="flex-none hidden md:block shadow-book-shadow w-40 h-72">
+                                  <div className="md:block shadow-book-shadow h-72 flex-none hidden w-40">
                                     {pub.image ? (
                                       <img
-                                        className="flex-none object-cover h-full w-full"
+                                        className="flex-none object-cover w-full h-full"
                                         src={pub.image}
                                       />
                                     ) : (
@@ -161,7 +161,7 @@ const PublicationSection: React.FC<PubProps> = ({ publications }) => {
                                   {pub.pdf && (
                                     <div className={option.label === "Books" ? "" : "ml-2"}>
                                       <a
-                                        className="no-underline bg-neutral-500 text-neutral-50 rounded-full py-3 px-7 w-max"
+                                        className="bg-neutral-500 text-neutral-50 px-7 w-max py-3 no-underline rounded-full"
                                         href={pub.pdf}
                                       >
                                         View PDF

src/components/Textarea.tsx

@@ -14,14 +14,14 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <Form.Field name={name} className="relative flex flex-col gap-2">
         <Form.Label>{label}</Form.Label>
-        <span className="px-2 py-1 text-xs text-neutral-300 rounded absolute top-9 right-1">
+        <span className="text-neutral-300 top-9 right-1 absolute px-2 py-1 text-xs rounded">
           {characterCount}/{maxLength}
         </span>
         <Form.Control asChild>
           <textarea
             rows={4}
             maxLength={maxLength}
-            className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full py-6"
+            className="w-full py-6 text-sm font-medium text-gray-400 border-b-2 outline-none"
             {...delegated}
             ref={ref}
             onChange={(e) => setCharacterCount(e.target.value.length)}

src/content/news/04-25-2024.md

@@ -1,6 +1,6 @@
 ---
 pubDate: 04.25.2024
-heroImage: /public/images/gettyimages-1389862392.webp
+heroImage: /images/gettyimages-1389862392.webp
 title: Static CCMS
 description: This post was generated from CMS
 ---

src/content/news/first-post.md

@@ -1,8 +1,8 @@
 ---
-title: 'First post'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 02 2022'
-heroImage: '/blog-placeholder-3.jpg'
+title: "First post"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 02 2022"
+heroImage: "/blog-placeholder-3.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna

src/content/news/markdown-style-guide.md

@@ -1,8 +1,8 @@
 ---
-title: 'Markdown Style Guide'
-description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
-pubDate: 'Jul 01 2022'
-heroImage: '/blog-placeholder-1.jpg'
+title: "Markdown Style Guide"
+description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
+pubDate: "Jul 01 2022"
+heroImage: "/blog-placeholder-1.jpg"
 ---
 
 Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
@@ -81,8 +81,9 @@ within a `footer` or `cite` element, and optionally with in-line changes such as
 > Don't communicate by sharing memory, share memory by communicating.<br>
 > — <cite>Rob Pike[^1]</cite>
 
-[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during
-Gopherfest, November 18, 2015.
+[^1]:
+    The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during
+    Gopherfest, November 18, 2015.
 
 ## Tables
 
@@ -97,7 +98,7 @@ Gopherfest, November 18, 2015.
 #### Output
 
 | Italics   | Bold     | Code   |
-|-----------|----------|--------|
+| --------- | -------- | ------ |
 | _italics_ | **bold** | `code` |
 
 ## Code Blocks
@@ -128,13 +129,13 @@ Output
 ```html
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>Example HTML5 Document</title>
-</head>
-<body>
-<p>Test</p>
-</body>
+  <head>
+    <meta charset="utf-8" />
+    <title>Example HTML5 Document</title>
+  </head>
+  <body>
+    <p>Test</p>
+  </body>
 </html>
 ```
 
@@ -178,23 +179,23 @@ Output
 
 ```markdown
 - Fruit
-    - Apple
-    - Orange
-    - Banana
+  - Apple
+  - Orange
+  - Banana
 - Dairy
-    - Milk
-    - Cheese
+  - Milk
+  - Cheese
 ```
 
 #### Output
 
 - Fruit
-    - Apple
-    - Orange
-    - Banana
+  - Apple
+  - Orange
+  - Banana
 - Dairy
-    - Milk
-    - Cheese
+  - Milk
+  - Cheese
 
 ## Other Elements — abbr, sub, sup, kbd, mark
 

src/content/news/second-post.md

@@ -1,8 +1,8 @@
 ---
-title: 'Second post'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 03 2022'
-heroImage: '/blog-placeholder-4.jpg'
+title: "Second post"
+description: "Lorem ipsum dolor sit amet"
+pubDate: "Jul 03 2022"
+heroImage: "/blog-placeholder-4.jpg"
 ---
 
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna