format

.prettierignore

@@ -1 +1,3 @@
 pnpm-lock.yaml
+.github/*
+public/*

.prettierrc

@@ -1,6 +1,6 @@
 {
   "jsxSingleQuote": true,
-  "plugins": ["prettier-plugin-tailwindcss", "prettier-plugin-astro"],
+  "plugins": ["prettier-plugin-astro", "prettier-plugin-tailwindcss"],
   "proseWrap": "always",
   "semi": true,
   "singleQuote": true,

README.md

@@ -1,5 +1,7 @@
 # McGill Student's Anime Club (MSAC) Website
+
 Link to site: https://msac.ssmu.ca/
 
 ## License
+
 [MIT](https://choosealicense.com/licenses/mit/)

astro.config.mjs

@@ -7,5 +7,5 @@ import icon from 'astro-icon';
 // https://astro.build/config
 export default defineConfig({
   integrations: [tailwind(), icon(), preact()],
-  site: 'https://msac.ssmu.ca'
+  site: 'https://msac.ssmu.ca',
 });

src/components/astro/ButtonLink.astro

@@ -10,7 +10,7 @@ const { href, target } = Astro.props;
 <a
   href={href}
   target={target}
-  class='block border border-accent text-accent bg-white px-3 py-2 lg:px-6 lg:py-3 font-medium w-fit rounded-md text-xl hover:bg-accent/80 hover:text-white transition duration-200'
+  class='block w-fit rounded-md border border-accent bg-white px-3 py-2 text-xl font-medium text-accent transition duration-200 hover:bg-accent/80 hover:text-white lg:px-6 lg:py-3'
 >
   <slot />
 </a>

src/components/astro/ContactForm.astro

@@ -51,8 +51,8 @@ import FormInput from './FormInput.astro';
   });
 </script>
 
-<form class='flex flex-col gap-y-2 flex-grow'>
-  <div class='flex gap-x-2 w-full'>
+<form class='flex flex-grow flex-col gap-y-2'>
+  <div class='flex w-full gap-x-2'>
     <FormInput
       class='w-1/2'
       type='text'
@@ -69,12 +69,12 @@ import FormInput from './FormInput.astro';
   </div>
   <FormInput type='text' placeholder='Subject' name='subject' required />
   <textarea
-    class='border border-accent text-accent rounded-md placeholder-accent/70 px-4 py-2 font-medium focus:outline-none focus:outline-accent/50 focus:outline-offset-0 text-sm lg:text-base'
+    class='rounded-md border border-accent px-4 py-2 text-sm font-medium text-accent placeholder-accent/70 focus:outline-none focus:outline-offset-0 focus:outline-accent/50 lg:text-base'
     rows='6'
     required
     placeholder='Message'></textarea>
   <button
-    class='px-5 py-2 bg-accent rounded-md text-white font-medium hover:bg-accent/90 transition duration-200'
+    class='rounded-md bg-accent px-5 py-2 font-medium text-white transition duration-200 hover:bg-accent/90'
   >
     Send Message
   </button>

src/components/astro/Footer.astro

@@ -4,34 +4,34 @@ import NavSocial from './NavSocial.astro';
 import Separator from './Separator.astro';
 ---
 
-<div class='w-screen flex flex-col items-center pt-4 pb-8 px-8'>
+<div class='flex w-screen flex-col items-center px-8 pb-8 pt-4'>
   <Logo />
   <div class='py-1'></div>
   <Separator class='w-full' />
   <div class='py-2'></div>
   <div class='flex gap-x-4'>
     <NavSocial
-      class='bg-accent hover:bg-black w-8 h-8 lg:h-10 lg:w-10'
+      class='h-8 w-8 bg-accent hover:bg-black lg:h-10 lg:w-10'
       iconClass='h-6 w-6 lg:h-[30px] lg:w-[30px]'
       name='discord'
       href='https://discord.gg/gSAz2GC'
     />
     <NavSocial
-      class='bg-accent hover:bg-black w-8 h-8 lg:h-10 lg:w-10'
+      class='h-8 w-8 bg-accent hover:bg-black lg:h-10 lg:w-10'
       iconClass='h-5 w-5 lg:h-7 lg:w-7'
       name='instagram'
       href='https://www.instagram.com/mcgillanime/'
     />
     <NavSocial
-      class='bg-accent hover:bg-black w-8 h-8 lg:h-10 lg:w-10'
+      class='h-8 w-8 bg-accent hover:bg-black lg:h-10 lg:w-10'
       iconClass='h-7 w-7 lg:h-8 lg:w-8'
       name='facebook'
       href='https://www.facebook.com/McGillAnime/'
     />
     <NavSocial
       name='linktree'
       iconClass='h-6 w-6 lg:h-[30px] lg:w-[30px]'
-      class='bg-accent hover:bg-black w-8 h-8 lg:h-10 lg:w-10'
+      class='h-8 w-8 bg-accent hover:bg-black lg:h-10 lg:w-10'
       href='https://linktr.ee/mcgillanimeclub'
     />
   </div>

src/components/astro/FormInput.astro

@@ -7,7 +7,7 @@ const { class: className, ...props } = Astro.props;
 
 <input
   class:list={[
-    'border border-accent text-accent rounded-md placeholder-accent/70 px-4 py-3 font-medium focus:outline-none focus:outline-accent/50 focus:outline-offset-0 text-sm lg:text-base',
+    'rounded-md border border-accent px-4 py-3 text-sm font-medium text-accent placeholder-accent/70 focus:outline-none focus:outline-offset-0 focus:outline-accent/50 lg:text-base',
     className,
   ]}
   {...props}

src/components/astro/GetInvolvedCard.astro

@@ -24,13 +24,13 @@ const {
   <img src={src} height={440} />
   <div class='py-3 lg:py-6'></div>
   <div class='px-4 text-center'>
-    <h3 class='font-bold text-2xl lg:text-4xl'>{title}</h3>
+    <h3 class='text-2xl font-bold lg:text-4xl'>{title}</h3>
     <div class='py-1 lg:py-4'></div>
     <div class='text-xl lg:text-2xl'>
       {description}
     </div>
   </div>
-  <div class='flex-grow mb-8'></div>
+  <div class='mb-8 flex-grow'></div>
   {
     href && (
       <ButtonLink href={href} target={target}>

src/components/astro/Link.astro

@@ -6,6 +6,6 @@ interface Props {
 const { href } = Astro.props;
 ---
 
-<a class='underline hover:text-rose-400 duration-200 text-grey-800' href={href}>
+<a class='text-grey-800 underline duration-200 hover:text-rose-400' href={href}>
   <slot />
 </a>

src/components/astro/Logo.astro

@@ -1,6 +1,6 @@
-<a href='/' class='flex min-w-fit h-16 items-center gap-x-1 cursor-pointer'>
+<a href='/' class='flex h-16 min-w-fit cursor-pointer items-center gap-x-1'>
   <img src='/assets/logo.png' height={40} width={50} />
-  <div id='logo-text' class='font-[Comfortaa] text-sm leading-4 w-24'>
+  <div id='logo-text' class='w-24 font-[Comfortaa] text-sm leading-4'>
     McGill Students' Anime Club
   </div>
 </a>

src/components/astro/MobileMenu.astro

@@ -30,12 +30,12 @@ import Logo from './Logo.astro';
   customElements.define('mobile-menu', MobileMenu);
 </script>
 
-<mobile-menu class='md:hidden block px-4 py-2'>
-  <div class='flex justify-between my-auto'>
+<mobile-menu class='block px-4 py-2 md:hidden'>
+  <div class='my-auto flex justify-between'>
     <Logo />
     <button
       id='open-button'
-      class='hover:text-accent transition duration-200 pr-2'
+      class='pr-2 transition duration-200 hover:text-accent'
     >
       <Menu size={32} />
     </button>
@@ -59,7 +59,7 @@ import Logo from './Logo.astro';
       <!-- <Separator /> -->
       <NavLink mobile href='/#contact-us'>Contact Us</NavLink>
       <Separator />
-      <div class='flex gap-2 items-center justify-center py-2'>
+      <div class='flex items-center justify-center gap-2 py-2'>
         <NavSocial
           name='discord'
           iconClass='h-7 w-7'

src/components/astro/NavLink.astro

@@ -10,7 +10,7 @@ const { href, mobile } = Astro.props;
 <a
   href={href}
   class:list={[
-    'text-accent font-semibold h-full px-1 lg:px-2 xl:px-4 flex items-center',
+    'flex h-full items-center px-1 font-semibold text-accent lg:px-2 xl:px-4',
     mobile ? 'py-1' : 'hover-underline-animation text-sm lg:text-base',
   ]}
 >

src/components/astro/NavSocial.astro

@@ -15,7 +15,7 @@ const { name, size, href, class: className, iconClass } = Astro.props;
 <a
   href={href}
   class:list={[
-    'text-white rounded-full h-10 w-10 flex items-center justify-center transition duration-200',
+    'flex h-10 w-10 items-center justify-center rounded-full text-white transition duration-200',
     className,
   ]}
   target='_blank'

src/components/astro/Navbar.astro

@@ -4,44 +4,44 @@ import NavSocial from './NavSocial.astro';
 import Logo from './Logo.astro';
 ---
 
-<div class='px-4 lg:px-16 border-b md:block hidden'>
-  <div class='h-20 flex items-center'>
+<div class='hidden border-b px-4 md:block lg:px-16'>
+  <div class='flex h-20 items-center'>
     <Logo />
-    <div class='flex items-center gap-x-2 h-full min-w-fit'>
+    <div class='flex h-full min-w-fit items-center gap-x-2'>
       <NavLink href='/#events'>Events</NavLink>
       <NavLink href='/sponsors'>Sponsors</NavLink>
       <NavLink href='/#newsletter'>Newsletter</NavLink>
       <NavLink href='/#execs'>Our Team</NavLink>
       <!-- <NavLink href='/faq'>FAQ</NavLink> -->
     </div>
-    <div class='flex-grow min-w-4'></div>
-    <div class='flex gap-x-1 lg:gap-x-2 items-center'>
+    <div class='min-w-4 flex-grow'></div>
+    <div class='flex items-center gap-x-1 lg:gap-x-2'>
       <NavSocial
-        class='bg-black hover:bg-accent w-8 h-8 lg:h-10 lg:w-10'
+        class='h-8 w-8 bg-black hover:bg-accent lg:h-10 lg:w-10'
         iconClass='h-6 w-6 lg:h-[30px] lg:w-[30px]'
         name='discord'
         href='https://discord.gg/gSAz2GC'
       />
       <NavSocial
-        class='bg-black hover:bg-accent w-8 h-8 lg:h-10 lg:w-10'
+        class='h-8 w-8 bg-black hover:bg-accent lg:h-10 lg:w-10'
         iconClass='h-5 w-5 lg:h-7 lg:w-7'
         name='instagram'
         href='https://www.instagram.com/mcgillanime/'
       />
       <NavSocial
-        class='bg-black hover:bg-accent w-8 h-8 lg:h-10 lg:w-10'
+        class='h-8 w-8 bg-black hover:bg-accent lg:h-10 lg:w-10'
         iconClass='h-7 w-7 lg:h-8 lg:w-8'
         name='facebook'
         href='https://www.facebook.com/McGillAnime/'
       />
       <NavSocial
         name='linktree'
         iconClass='h-6 w-6 lg:h-[30px] lg:w-[30px]'
-        class='bg-black hover:bg-accent w-8 h-8 lg:h-10 lg:w-10'
+        class='h-8 w-8 bg-black hover:bg-accent lg:h-10 lg:w-10'
         href='https://linktr.ee/mcgillanimeclub'
       />
       <a
-        class='px-3 py-2 lg:px-5 lg:py-2 text-sm lg:text-base bg-accent rounded-md text-white font-medium ml-2 lg:ml-4 text-nowrap hover:bg-accent/90 transition duration-200'
+        class='ml-2 text-nowrap rounded-md bg-accent px-3 py-2 text-sm font-medium text-white transition duration-200 hover:bg-accent/90 lg:ml-4 lg:px-5 lg:py-2 lg:text-base'
         href='/contact'
       >
         Contact Us

src/components/astro/Question.astro

@@ -7,8 +7,8 @@ interface Props {
 const { class: className, question } = Astro.props;
 ---
 
-<details class:list={['border p-2 rounded-md cursor-pointer', className]}>
-  <summary class='text-xl font-semibold list-none'
+<details class:list={['cursor-pointer rounded-md border p-2', className]}>
+  <summary class='list-none text-xl font-semibold'
     >🌸&nbsp;&nbsp;{question}</summary
   >
   <div class='py-1'></div>

src/components/astro/Separator.astro

@@ -6,4 +6,4 @@ interface Props {
 const { class: className } = Astro.props;
 ---
 
-<div class:list={['bg-gray-300 h-[1px] mx-auto my-1', className]}></div>
+<div class:list={['mx-auto my-1 h-[1px] bg-gray-300', className]}></div>

src/components/astro/SponsorCard.astro

@@ -12,9 +12,9 @@ const { src, href, alt, description } = Astro.props;
 <a
   href={href}
   target='_blank'
-  class='flex flex-col items-center p-6 shadow-md w-64 rounded-xl border hover:-translate-y-3 hover:shadow-xl transition duration-300'
+  class='flex w-64 flex-col items-center rounded-xl border p-6 shadow-md transition duration-300 hover:-translate-y-3 hover:shadow-xl'
 >
-  <div class='flex-grow flex items-center'>
+  <div class='flex flex-grow items-center'>
     <img src={src} alt={alt} class='rounded-xl' />
   </div>
   <div class='py-2'></div>

src/components/astro/SponsorLogo.astro

@@ -9,5 +9,5 @@ const { src, href, alt } = Astro.props;
 ---
 
 <a href={href} target='_blank'>
-  <img src={src} alt={alt} class='rounded-xl w-56' />
+  <img src={src} alt={alt} class='w-56 rounded-xl' />
 </a>

src/layouts/Layout.astro

@@ -32,7 +32,7 @@ declare global {
     <!--TODO: Setup Google Analytics-->
     <title>MSAC{title ? ` | ${title}` : ''}</title>
   </head>
-  <body class='w-full min-h-screen'>
+  <body class='min-h-screen w-full'>
     <Navbar />
     <MobileMenu />
     <main class=''>

src/pages/contact.astro

@@ -5,10 +5,10 @@ import Layout from '@/layouts/Layout.astro';
 
 <Layout title='Contact Us'>
   <div
-    class='flex flex-col lg:flex-row items-center px-8 sm:py-4 md:py-8 lg:px-16 lg:py-32'
+    class='flex flex-col items-center px-8 sm:py-4 md:py-8 lg:flex-row lg:px-16 lg:py-32'
   >
     <h3
-      class='py-2 sm:py-4 text-xl md:text-2xl lg:text-3xl leading-normal md:max-w-md text-center lg:text-left lg:py-0'
+      class='py-2 text-center text-xl leading-normal sm:py-4 md:max-w-md md:text-2xl lg:py-0 lg:text-left lg:text-3xl'
     >
       Contact us for any feedback, requests, or questions!
     </h3>

src/pages/faq.astro

@@ -22,14 +22,14 @@ import Link from '@/components/astro/Link.astro';
     </Question>
     <div class='py-1'></div>
     <Question question='Do you organize anything else?'>
-      <h3 class='text-lg font-semibold my-2'>Costume Contest</h3>
+      <h3 class='my-2 text-lg font-semibold'>Costume Contest</h3>
       <div>
         In 2021, we hosted our first costume contest. We understand that
         cosplays can be expensive. Thus, the term costume was very open ended.
         We encouraged members to participate even with a simple costume. We are
         hoping to make this event into an annual tradition.
       </div>
-      <h3 class='text-lg font-semibold my-2'>Maid Cafe</h3>
+      <h3 class='my-2 text-lg font-semibold'>Maid Cafe</h3>
       <div>
         In non-covid times, the maid cafe is the biggest MSAC event that we look
         forward to organizing every year. Attendees can enjoy food and drinks