improve style for calendar

Author: emad-elsaid

extensions/date/handlers.go

@@ -37,11 +37,6 @@ func dateHandler(r Request) Output {
 }
 
 func calendarHandler(r Request) Output {
-	type pair struct {
-		Time time.Time
-		Page Page
-	}
-
 	calendar := []pair{}
 
 	EachPage(r.Context(), func(p Page) {
@@ -55,12 +50,92 @@ func calendarHandler(r Request) Output {
 		}
 	})
 
-	slices.SortFunc(calendar, func(a, b pair) int {
-		return int(b.Time.Unix()) - int(a.Time.Unix())
+	cal := organizeCalendar(calendar)
+
+	slices.SortFunc(cal, func(a, b Year) int {
+		return int(b.Year) - int(a.Year)
 	})
 
 	return Render("calendar", Locals{
 		"page":     DynamicPage{NameVal: "Calendar"},
-		"calendar": calendar,
+		"calendar": cal,
 	})
 }
+
+type pair struct {
+	Time time.Time
+	Page Page
+}
+
+type Day struct {
+	Date  time.Time
+	Pages []Page
+}
+
+type Month struct {
+	Name string
+	Days [6][7]*Day // 6 weeks, 7 days per week
+}
+
+type Year struct {
+	Year   int
+	Months []Month
+}
+
+func organizeCalendar(pairs []pair) []Year {
+	grouped := make(map[int]map[time.Month][]pair)
+
+	for _, p := range pairs {
+		year, month := p.Time.Year(), p.Time.Month()
+		if grouped[year] == nil {
+			grouped[year] = make(map[time.Month][]pair)
+		}
+		grouped[year][month] = append(grouped[year][month], p)
+	}
+
+	var years []Year
+	for year, months := range grouped {
+		var yearData Year
+		yearData.Year = year
+
+		for month, pairs := range months {
+			var monthData Month
+			monthData.Name = month.String()
+
+			firstDay := time.Date(year, month, 1, 0, 0, 0, 0, time.UTC)
+			startOffset := int(firstDay.Weekday())
+
+			var days [6][7]*Day
+			for i := range days {
+				for j := range days[i] {
+					days[i][j] = nil
+				}
+			}
+
+			currentDay := firstDay
+			for day := 1; day <= 31; day++ {
+				if currentDay.Month() != month {
+					break
+				}
+				dayOffset := (day + startOffset - 1) / 7
+				weekday := (day + startOffset - 1) % 7
+				if days[dayOffset][weekday] == nil {
+					days[dayOffset][weekday] = &Day{Date: currentDay}
+				}
+				for _, p := range pairs {
+					if p.Time.Day() == currentDay.Day() {
+						days[dayOffset][weekday].Pages = append(days[dayOffset][weekday].Pages, p.Page)
+					}
+				}
+				currentDay = currentDay.AddDate(0, 0, 1)
+			}
+
+			monthData.Days = days
+			yearData.Months = append(yearData.Months, monthData)
+		}
+
+		years = append(years, yearData)
+	}
+
+	return years
+}

extensions/date/templates/calendar.html

@@ -1,39 +1,77 @@
 {{ template "header" . }}
-{{ $year := 0 }}
-{{ $month := 0 }}
-{{ $day := 0 }}
+<style>
+.calendar{
+    td,th {
+        width: calc(100%/7);
+    }
+    td{
+        height: 8em;
+        overflow: hidden;
+        padding: 0 !important;
+        margin: 0 !important;
+    }
+    a .page{
+        font-size: 0.7em;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
+        -webkit-box-orient: vertical;
+    }
+ }
+</style>
 
-<aside class="menu" dir="auto">
-  <div class="menu-list" dir="auto">
-    {{ range .calendar }}
-    {{ if ne $year .Time.Year }}
-    <h1>{{ .Time.Year }}</h1>
-    {{ $year = .Time.Year }}
-    {{ $month = 0 }}
-    {{ $day = 0 }}
-    {{ end }}
+{{range .calendar}}
+<h1>{{.Year}}</h1>
+{{range .Months}}
+<h2>{{.Name}}</h2>
+<table class="calendar table is-bordered is-fullwidth is-hoverable">
+  <thead>
+    <tr>
+      <th>Sun</th>
+      <th>Mon</th>
+      <th>Tue</th>
+      <th>Wed</th>
+      <th>Thu</th>
+      <th>Fri</th>
+      <th>Sat</th>
+    </tr>
+  </thead>
+  <tbody>
+    {{range .Days}}
+    <tr>
+      {{range .}}
+      <td>
+        {{if .}}
+        <span class="tag">{{.Date.Day}}</span>
 
-    {{ if ne $month .Time.Month }}
-    {{ if ne $day .Time.Day }}
-    <h2>{{ .Time.Day }} {{ .Time.Month }}</h2>
-    {{ $month = .Time.Month }}
-    {{ $day = .Time.Day }}
-    {{ end }}
-    {{ end }}
+        {{ if .Pages }}
+        <aside class="menu" dir="auto">
+          <div class="menu-list" dir="auto">
 
-    {{ with .Page }}
+            {{range .Pages}}
+            <a href="/{{.Name}}" dir="auto">
+              <span class="page">
+              {{ emoji . }}
+              {{ $props := properties . }}
+              {{ with $props.title }} {{ .Value }} {{ else }} {{ .Name }} {{ end }}
+              </span>
+            </a>
+            {{end}}
 
-    <a href="/{{.Name}}" dir="auto" class="is-clearfix">
-      <span class="is-block">
-        {{ emoji . }}
-        {{ $props := properties . }}
-        {{ with $props.title }} {{ .Value }} {{ else }} {{ .Name }} {{ end }}
-      </span>
-    </a>
+          </div>
+        </aside>
+        {{end}}
 
-    {{ end }}
+        {{end}}
+      </td>
+      {{end}}
+    </tr>
+    {{end}}
+  </tbody>
+</table>
+{{end}}
+{{end}}
 
-    {{ end }}
-  </div>
-</aside>
 {{ template "footer" . }}