feat: Increase visibility of first day of Gregorian week and month

src/components/RepublicanDay.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { getGregorianDate } from "../utils";
 import type { Day, Month, Calendar } from '../models'
+import { format } from "date-fns";
 
 const { day, month, calendar, republicanYear } = defineProps<{
 	day: Day
@@ -14,18 +15,24 @@ const gregorianDate = getGregorianDate(
 	calendar.findIndex(_month => _month.name === month.name) + 1,
 	republicanYear
 )
+
+const gregorianDateString = format(gregorianDate, 'E. dd/MM/yyyy')
+
+const isStartOfMonth = gregorianDate.getDate() === 1
+const isStartOfWeek = gregorianDate.getDay() === 1
+
 </script>
 
 <template>
-	<div class="day">
+	<div class="day" :class="{ 'start-of-month': isStartOfMonth, 'start-of-week': isStartOfWeek }">
 		<div class="day__day">
 			{{ day.day }}
 		</div>
 		<div class="day__name">
 			{{ day.name }}
 		</div>
 		<small class="day__gregorian">
-			({{ gregorianDate }})
+			({{ gregorianDateString }})
 		</small>
 	</div>
 </template>
@@ -56,4 +63,17 @@ const gregorianDate = getGregorianDate(
 		text-align: right;
 	}
 }
+
+.start-of-month {
+	background-color: rgba($color: #919191, $alpha: 0.3);
+
+	.day__gregorian {
+		text-decoration: underline;
+		font-weight: bold;
+	}
+}
+
+.start-of-week {
+	background-color: rgba($color: #919191, $alpha: 0.1);
+}
 </style>

src/utils.ts

@@ -1,10 +1,10 @@
-import { set, addDays, format } from "date-fns"
+import { set, addDays } from "date-fns"
 
 export function isSextile(republicanYear: number): boolean {
 	return Math.floor((republicanYear - 1) * 0.242222) - Math.floor((republicanYear) * 0.242222) !== 0
 }
 
-export function getGregorianDate(republicanDay: number, republicanMonth: number, republicanYear: number): string {
+export function getGregorianDate(republicanDay: number, republicanMonth: number, republicanYear: number): Date {
 	const sept_21_1792 = set(new Date(), { date: 21, month: 9 - 1, year: 1792, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 })
 
 	const dayCountInCompletedMonths = (republicanMonth - 1) * 30
@@ -13,9 +13,7 @@ export function getGregorianDate(republicanDay: number, republicanMonth: number,
 
 	const daysSince_sept_21_1792 = republicanDay + dayCountInCompletedMonths + dayCountInCompletedYears + nbOfSextileDays
 
-	const gregorianDate = addDays(sept_21_1792, daysSince_sept_21_1792)
-
-	return format(gregorianDate, 'E. dd/MM/yyyy')
+	return addDays(sept_21_1792, daysSince_sept_21_1792)
 }
 
 // 232 => MMXXIV