align frontend formatting

frontend/rabbi_gerzi/.editorconfig

@@ -5,4 +5,4 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 end_of_line = lf
-max_line_length = 100
+max_line_length = 80

frontend/rabbi_gerzi/.oxfmtrc.json

@@ -1,5 +1,6 @@
 {
   "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "printWidth": 80,
   "semi": false,
   "singleQuote": true
 }

frontend/rabbi_gerzi/src/components/ElementSiblingNavigation.vue

@@ -54,11 +54,8 @@ function siblingElementAtOffset(offset: number): ChildElement | null {
   }
 
   const siblingCount = props.siblingElements.length
-  const targetIndex = (
+  const targetIndex =
-    currentSiblingIndex.value
+    (currentSiblingIndex.value + offset + siblingCount) % siblingCount
-    + offset
-    + siblingCount
-  ) % siblingCount
 
   return props.siblingElements[targetIndex] ?? null
 }
@@ -67,9 +64,7 @@ function siblingElementAtOffset(offset: number): ChildElement | null {
 <template>
   <nav
     v-if="
-      hasSiblingNavigation
+      hasSiblingNavigation && previousSibling !== null && nextSibling !== null
-        && previousSibling !== null
-        && nextSibling !== null
     "
     class="element-sibling-navigation"
     :data-cy="navigationDataCy"

frontend/rabbi_gerzi/src/stores/auth.ts

@@ -73,5 +73,13 @@ export const useAuthStore = defineStore('auth', () => {
     }
   }
 
-  return { user, loginError, isSubmitting, isAuthenticated, login, fetchUser, logout }
+  return {
+    user,
+    loginError,
+    isSubmitting,
+    isAuthenticated,
+    login,
+    fetchUser,
+    logout,
+  }
 })

frontend/rabbi_gerzi/src/stores/elements.ts

@@ -158,8 +158,8 @@ export const useElementsStore = defineStore('elements', () => {
         childElementId.toString(),
       )
       const response = await fetch(
-        `${ELEMENTS_URL}/${encodedParentElementId}`
+        `${ELEMENTS_URL}/${encodedParentElementId}` +
-          + `/children/${encodedChildElementId}`,
+          `/children/${encodedChildElementId}`,
         {
           method: 'DELETE',
           credentials: 'include',

frontend/rabbi_gerzi/src/views/AboutPage.vue

@@ -73,7 +73,8 @@ const teachers: Teacher[] = [
   },
   {
     name: 'Rabbi Efraim Greenblatt',
-    description: 'Halachic authority and loyal student of Rabbi Moshe Feinstein.',
+    description:
+      'Halachic authority and loyal student of Rabbi Moshe Feinstein.',
   },
   {
     name: 'The Sassover Rebbe, The Biala Rebbe, and Rabbi Mordechai Zukerman',
@@ -230,8 +231,8 @@ function submitNewsletter(submitEvent: Event): void {
             <p class="about-hero__eyebrow">Pilzno Institute</p>
             <h1 class="about-hero__heading">About Rabbi Gerzi</h1>
             <p class="about-hero__lede">
-              Healthy, Integrated and Balanced Torah living, rooted in mesorah and made practical
+              Healthy, Integrated and Balanced Torah living, rooted in mesorah
-              for real people building real lives.
+              and made practical for real people building real lives.
             </p>
           </div>
           <img
@@ -261,25 +262,32 @@ function submitNewsletter(submitEvent: Event): void {
         </div>
       </section>
 
-      <section class="about-section about-section--slate" data-cy="about-vision">
+      <section
+        class="about-section about-section--slate"
+        data-cy="about-vision"
+      >
         <div class="about-section__inner about-section__inner--narrow">
           <p class="about-section__kicker">Vision</p>
           <h2 class="about-section__heading">Rabbi Gerzi's Vision</h2>
           <p class="about-section__paragraph">
-            Rabbi Gerzi guides individuals from vagueness to clarity, from surviving to thriving,
+            Rabbi Gerzi guides individuals from vagueness to clarity, from
-            from a galut to a geula mindset. Through profound teachings rooted in Torah wisdom,
+            surviving to thriving, from a galut to a geula mindset. Through
-            Rabbi Gerzi aims to connect students with their divine purpose, discover balance, and
+            profound teachings rooted in Torah wisdom, Rabbi Gerzi aims to
+            connect students with their divine purpose, discover balance, and
             live a life of authentic joy and fulfillment.
           </p>
           <p class="about-section__paragraph">
-            As spiritual growth can only be accomplished within a fertile social framework, Rabbi
+            As spiritual growth can only be accomplished within a fertile social
-            Gerzi hosts regular weekly chaburot and various events that create the conditions for
+            framework, Rabbi Gerzi hosts regular weekly chaburot and various
-            authentic life transformation.
+            events that create the conditions for authentic life transformation.
           </p>
         </div>
       </section>
 
-      <section class="about-section about-section--cream" data-cy="about-mission">
+      <section
+        class="about-section about-section--cream"
+        data-cy="about-mission"
+      >
         <div class="about-section__inner">
           <div class="about-section__header">
             <p class="about-section__kicker">Mission</p>
@@ -287,9 +295,10 @@ function submitNewsletter(submitEvent: Event): void {
               The Mission: To Provide a Clear Path to Wholesome Living
             </h2>
             <p class="about-section__intro">
-              Rabbi Gerzi provides a structured path to wisdom, personal growth, and transformation.
+              Rabbi Gerzi provides a structured path to wisdom, personal growth,
-              His educational system is designed to guide individuals through essential life areas,
+              and transformation. His educational system is designed to guide
-              creating not just intellectual understanding but genuine change.
+              individuals through essential life areas, creating not just
+              intellectual understanding but genuine change.
             </p>
           </div>
 
@@ -318,27 +327,35 @@ function submitNewsletter(submitEvent: Event): void {
           </div>
           <div class="about-section__body">
             <p class="about-section__paragraph">
-              Rabbi Gerzi's teachings are deeply influenced by his mentor, Rabbi Yosef Singer, the
+              Rabbi Gerzi's teachings are deeply influenced by his mentor, Rabbi
-              Pilzno Rav. Under Rabbi Singer's guidance, Rabbi Gerzi absorbed the teachings of the
+              Yosef Singer, the Pilzno Rav. Under Rabbi Singer's guidance, Rabbi
-              Baal Shem Tov, Chassidut, Kabbalah, and Halacha.
+              Gerzi absorbed the teachings of the Baal Shem Tov, Chassidut,
+              Kabbalah, and Halacha.
             </p>
             <p class="about-section__paragraph">
-              In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his legacy by building a
+              In 2005, the Pilzno Rav instructed Rabbi Gerzi to continue his
-              community in Eretz Yisrael dedicated to this unique form of Healthy, Integrated and
+              legacy by building a community in Eretz Yisrael dedicated to this
-              Balanced Torah living.
+              unique form of Healthy, Integrated and Balanced Torah living.
             </p>
           </div>
         </div>
       </section>
 
-      <section class="about-section about-section--cream" data-cy="about-teachers">
+      <section
+        class="about-section about-section--cream"
+        data-cy="about-teachers"
+      >
         <div class="about-section__inner">
           <div class="about-section__header">
             <p class="about-section__kicker">Teachers</p>
             <h2 class="about-section__heading">Rabbi Gerzi's Teachers</h2>
           </div>
           <ol class="teacher-list">
-            <li v-for="teacher in teachers" :key="teacher.name" class="teacher-list__item">
+            <li
+              v-for="teacher in teachers"
+              :key="teacher.name"
+              class="teacher-list__item"
+            >
               <span class="teacher-list__name">{{ teacher.name }}</span>
               <span class="teacher-list__description">
                 {{ teacher.description }}
@@ -397,7 +414,8 @@ function submitNewsletter(submitEvent: Event): void {
           <div class="get-involved__copy">
             <h2 class="get-involved__heading">Get Involved</h2>
             <p class="get-involved__subtext">
-              Subscribe for updates as we release new content, chaburot and events.
+              Subscribe for updates as we release new content, chaburot and
+              events.
             </p>
           </div>
           <form class="get-involved__form" @submit="submitNewsletter">

frontend/rabbi_gerzi/src/views/ContactPage.vue

@@ -40,15 +40,20 @@ function submitNewsletter(submitEvent: Event): void {
           <p class="contact-hero__eyebrow">Contact</p>
           <h1 class="contact-hero__heading">Contact</h1>
           <p class="contact-hero__body">
-            Rabbi Gerzi receives numerous messages each week. It may take some time to get back to
+            Rabbi Gerzi receives numerous messages each week. It may take some
-            you, but we will do our best to respond in a timely manner.
+            time to get back to you, but we will do our best to respond in a
+            timely manner.
           </p>
         </div>
       </section>
 
       <section class="contact-main">
         <div class="contact-main__inner">
-          <form class="contact-form" data-cy="contact-form" @submit="submitContact">
+          <form
+            class="contact-form"
+            data-cy="contact-form"
+            @submit="submitContact"
+          >
             <h2 class="contact-form__heading">Send Rabbi Gerzi a Message</h2>
             <div class="contact-form__grid">
               <label class="contact-form__field">
@@ -121,7 +126,9 @@ function submitNewsletter(submitEvent: Event): void {
           </form>
 
           <aside class="contact-social" data-cy="contact-social">
-            <h2 class="contact-social__heading">Follow Rabbi Gerzi on Social Media</h2>
+            <h2 class="contact-social__heading">
+              Follow Rabbi Gerzi on Social Media
+            </h2>
             <div class="contact-social__links">
               <a
                 v-for="socialLink in socialLinks"
@@ -143,7 +150,8 @@ function submitNewsletter(submitEvent: Event): void {
           <div class="get-involved__copy">
             <h2 class="get-involved__heading">Get Involved</h2>
             <p class="get-involved__subtext">
-              Subscribe for updates as we release new content, chaburot and events.
+              Subscribe for updates as we release new content, chaburot and
+              events.
             </p>
           </div>
           <form class="get-involved__form" @submit="submitNewsletter">

frontend/rabbi_gerzi/src/views/HomePage.vue

@@ -42,7 +42,9 @@ const testimonials: Testimonial[] = [
   },
   {
     name: 'Anonymous Student',
-    quote: 'My understanding of Torah has been profoundly improved through ' + 'his teachings.',
+    quote:
+      'My understanding of Torah has been profoundly improved through ' +
+      'his teachings.',
   },
   {
     name: 'Placeholder Student 1',
@@ -267,7 +269,8 @@ function projectCardStyle(project: Project): string {
         <div class="hero__text">
           <h1 class="hero__headline">
             Let&rsquo;s upgrade our lives to a
-            <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah existence.
+            <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah
+            existence.
           </h1>
           <p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
         </div>
@@ -297,23 +300,29 @@ function projectCardStyle(project: Project): string {
           <path d="M10 65 L40 25 L55 45 L70 15 L90 45 L110 65" />
           <path d="M30 65 C45 55, 60 60, 75 50 S100 55, 110 65" />
         </svg>
-        <h2 class="discover-path__heading">Discover a Path to a Holistically Engaged Life</h2>
+        <h2 class="discover-path__heading">
+          Discover a Path to a Holistically Engaged Life
+        </h2>
         <p class="discover-path__paragraph">
-          Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals to achieve a state
+          Rabbi Yehoshua Gerzi has dedicated his life to empowering individuals
-          of &ldquo;Healthy, Integrated and Balanced Torah Living.&rdquo; His teachings weave
+          to achieve a state of &ldquo;Healthy, Integrated and Balanced Torah
-          together timeless Torah wisdom, mystical insights and practical guidance, making ancient
+          Living.&rdquo; His teachings weave together timeless Torah wisdom,
-          wisdom accessible and transformative for modern lives.
+          mystical insights and practical guidance, making ancient wisdom
+          accessible and transformative for modern lives.
         </p>
         <p class="discover-path__paragraph">
-          Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of Kehillas Beis David
+          Rabbi Gerzi is based in Ramat Beit Shemesh, where he serves as Rav of
-          and Director of the Pilzno Institute of Higher Learning.
+          Kehillas Beis David and Director of the Pilzno Institute of Higher
+          Learning.
         </p>
       </div>
     </section>
 
     <section class="core-teachings" data-cy="core-teachings">
       <div class="core-teachings__inner">
-        <h2 class="core-teachings__heading">Baderech HaAvodah (Core Teachings)</h2>
+        <h2 class="core-teachings__heading">
+          Baderech HaAvodah (Core Teachings)
+        </h2>
         <div class="core-teachings__grid">
           <div
             v-for="teaching in coreTeachings"
@@ -323,7 +332,9 @@ function projectCardStyle(project: Project): string {
             <span class="core-teachings__glyph" aria-hidden="true">
               {{ teaching.glyph }}
             </span>
-            <p class="core-teachings__label">{{ teaching.number }}) {{ teaching.title }}</p>
+            <p class="core-teachings__label">
+              {{ teaching.number }}) {{ teaching.title }}
+            </p>
           </div>
         </div>
       </div>
@@ -348,13 +359,18 @@ function projectCardStyle(project: Project): string {
         </svg>
         <h2 class="unique-voice__heading">A Unique Voice for the Generation</h2>
         <p class="unique-voice__paragraph">
-          Rabbi Gerzi provides a wholly unique and much needed perspective to his students. Carrying
+          Rabbi Gerzi provides a wholly unique and much needed perspective to
-          decades of experience guided by a handful of the generations most pre-eminent Rabbanim, he
+          his students. Carrying decades of experience guided by a handful of
-          teaches a message of practically engaged positivity. His Torah is one of unity, bridging
+          the generations most pre-eminent Rabbanim, he teaches a message of
-          hashkafic boundaries and engaging a diverse cadre of Jews who are open minded to embracing
+          practically engaged positivity. His Torah is one of unity, bridging
-          meaningful and experiential Judaism.
+          hashkafic boundaries and engaging a diverse cadre of Jews who are open
+          minded to embracing meaningful and experiential Judaism.
         </p>
-        <button class="unique-voice__cta-button" type="button" @click="goToAbout">
+        <button
+          class="unique-voice__cta-button"
+          type="button"
+          @click="goToAbout"
+        >
           Learn about Rabbi Gerzi&rsquo;s Approach
         </button>
       </div>
@@ -373,7 +389,9 @@ function projectCardStyle(project: Project): string {
             :aria-hidden="testimonialPosition(index) !== 'active'"
           >
             <h3 class="testimonials__name">{{ testimonial.name }}</h3>
-            <p class="testimonials__quote">&ldquo;{{ testimonial.quote }}&rdquo;</p>
+            <p class="testimonials__quote">
+              &ldquo;{{ testimonial.quote }}&rdquo;
+            </p>
           </div>
         </div>
         <div class="testimonials__controls">
@@ -401,7 +419,9 @@ function projectCardStyle(project: Project): string {
 
     <section class="sponsors" data-cy="sponsors">
       <div class="sponsors__inner">
-        <h2 class="sponsors__heading">Organizations Rabbi Gerzi has Worked With</h2>
+        <h2 class="sponsors__heading">
+          Organizations Rabbi Gerzi has Worked With
+        </h2>
         <div class="sponsors__carousel" data-cy="sponsor-carousel">
           <div class="sponsors__track" data-cy="sponsor-track">
             <div
@@ -447,9 +467,15 @@ function projectCardStyle(project: Project): string {
       <div class="journey__inner">
         <h2 class="journey__heading">Start Your Journey</h2>
         <div class="journey__cards">
-          <a class="journey__card journey__card--olive" href="/media" data-cy="journey-media">
+          <a
+            class="journey__card journey__card--olive"
+            href="/media"
+            data-cy="journey-media"
+          >
             <h3 class="journey__card-title">Access<br />Torah Media</h3>
-            <p class="journey__card-body">Explore a wealth of video, audio and written content.</p>
+            <p class="journey__card-body">
+              Explore a wealth of video, audio and written content.
+            </p>
           </a>
           <a
             class="journey__card journey__card--slate"
@@ -470,7 +496,8 @@ function projectCardStyle(project: Project): string {
         <div class="get-involved__copy">
           <h2 class="get-involved__heading">Get Involved</h2>
           <p class="get-involved__subtext">
-            Subscribe for updates as we release new content, chaburot and events.
+            Subscribe for updates as we release new content, chaburot and
+            events.
           </p>
         </div>
         <form class="get-involved__form" @submit="submitNewsletter">

frontend/rabbi_gerzi/src/views/LoginPage.vue

@@ -45,7 +45,11 @@ async function handleSubmit(): Promise<void> {
           />
         </label>
 
-        <p v-if="authStore.loginError" data-cy="login-error" class="login-card__error">
+        <p
+          v-if="authStore.loginError"
+          data-cy="login-error"
+          class="login-card__error"
+        >
           {{ authStore.loginError }}
         </p>