Calendar (#150)

feat(events): add calendar and single event pages

.github/linters/.eslintrc.yml

@@ -2,5 +2,6 @@
 ignorePatterns: ["layouts/page/single.json", "package.json", "package-lock.json", "assets/js/bootstrap.js"]
 parserOptions:
   ecmaVersion: latest
+  sourceType: module
 env:
   es6: true

README.md

@@ -54,3 +54,14 @@ To display up to date information, we fetch and generate some data during the bu
 - activities-mailinglist (activities section)
 - activities-matrix (activities section)
 - activities-github (activities section)
+
+## Events
+
+The events for the calendar are stored in simple markdown files. To create a new event, use the following commands:
+
+```bash
+hugo new content --kind event events/<EVENT_NAME>.de.md
+hugo new content --kind event events/<EVENT_NAME>.en.md
+```
+
+Now you can edit the event at `events/<EVENT_NAME>.de.md` and `events/<EVENT_NAME>.en.md`.

archetypes/event.md

@@ -0,0 +1,13 @@
+---
+outputs:
+- html
+- calendar
+title: "{{ replace .File.ContentBaseName "-" " " | title }}"
+start: "{{ dateFormat "2006-01-02T15:04:05" .Date }}"
+end: "{{ dateFormat "2006-01-02T15:04:05" .Date }}"
+# for recurring events add rrule with https://icalendar.org/rrule-tool.html
+#rrule: ""
+location: "Berlin"
+---
+
+Description of the event ...

assets/js/calendar.js

@@ -0,0 +1,23 @@
+import { Calendar } from '@fullcalendar/core'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import iCalendarPlugin from '@fullcalendar/icalendar'
+import deLocale from '@fullcalendar/core/locales/de'
+
+document.addEventListener('DOMContentLoaded', function () {
+  const calendarEl = document.getElementById('calendar')
+  const calendar = new Calendar(calendarEl, {
+    plugins: [dayGridPlugin, iCalendarPlugin],
+    eventDisplay: 'block',
+    contentHeight: 'auto',
+    eventSources: [
+      {
+        url: 'index.ics',
+        format: 'ics'
+      }
+    ]
+  })
+  if (document.documentElement.lang === 'de') {
+    calendar.setOption('locale', deLocale)
+  }
+  calendar.render()
+})

assets/scss/custom/structure/_general.scss

@@ -1,4 +1,4 @@
-// Overwriting the theme stylesheet to reenable link decoration
+// Overwriting the theme stylesheet to reenable link decoration and fix contrast on bg-soft-primary
 
 body {
     font-family: $font-family-secondary;
@@ -37,4 +37,8 @@ p {
 
 #navigation a {
     text-decoration: none !important;
+}
+
+div.bg-soft-primary {
+    background: rgba($primary, 0.05) !important;
 }

content/events/_index.de.md

@@ -0,0 +1,4 @@
+---
+title: "Events"
+description: "Ein Überblick der Freifunk-Events in der nächsten Zeit. Komm gerne vorbei."
+---

content/events/_index.en.md

@@ -0,0 +1,4 @@
+---
+title: "Events"
+description: "An overview of Freifunk events in the near future. Feel free to drop by."
+---

content/events/communityday-2024-09.de .md

@@ -0,0 +1,11 @@
+---
+outputs:
+- html
+- calendar
+title: "Community Tag"
+start: "2024-09-22T14:00:00"
+end: "2024-09-22T22:00:00"
+location: "Kirchhofstraße 45, 12055 Berlin"
+---
+
+Mehr infos kommen bald.

content/events/communityday-2024-09.en.md

@@ -0,0 +1,11 @@
+---
+outputs:
+- html
+- calendar
+title: "Community day"
+start: "2024-09-22T14:00:00"
+end: "2024-09-22T22:00:00"
+location: "Kirchhofstraße 45, 12055 Berlin"
+---
+
+More infos coming soon.

content/events/freifunktreffen.de.md

@@ -0,0 +1,15 @@
+---
+outputs:
+- html
+- calendar
+title: "Freifunktreffen"
+start: "2024-07-03T20:00:00"
+end: "2024-07-03T23:00:00"
+rrule: "FREQ=MONTHLY;INTERVAL=1;BYDAY=1WE"
+rrule_text: "Jeden ersten Mittwoch im Monat"
+location: "Rungestraße 20, 10179 Berlin"
+---
+
+Hier kannst du viele andere Freifunkende treffen und Kontakte schließen. Wir nutzen dieses Treffen, um Community-Themen zu besprechen und bei einem leckeren Getränk eine schöne Zeit zu haben. Die [c-base](https://www.openstreetmap.org/?mlat=52.51297&mlon=13.42011#map=17/52.51297/13.42011) ist an der Spree, ganz in der Nähe vom Bahnhof Jannowitzbrücke.
+
+Du möchtest ein Thema vorschlagen, dass wir als Community besprechen sollten? Schicke deinen Themenvorschlag über die Mailingliste. Komm gerne einfach vorbei, wir freuen uns immer über neue Menschen.

content/events/freifunktreffen.en.md

@@ -0,0 +1,15 @@
+---
+outputs:
+- html
+- calendar
+title: "Freifunk meet-up"
+start: "2024-07-03T20:00:00"
+end: "2024-07-03T23:00:00"
+rrule: "FREQ=MONTHLY;INTERVAL=1;BYDAY=1WE"
+rrule_text: "Every first Wednesday of the month"
+location: "Rungestraße 20, 10179 Berlin"
+---
+
+Here you can meet many other Freifunkers and make new contacts. We use this meeting to discuss community topics and have a good time over a delicious drink. The [c-base](https://www.openstreetmap.org/?mlat=52.51297&mlon=13.42011#map=17/52.51297/13.42011) is on the Spree, very close to Jannowitzbrücke station.
+
+Would you like to suggest a topic that we should discuss as a community? Send your topic suggestion via the mailing list. Just drop by, we are always happy to meet new people.

hugo.toml

@@ -12,6 +12,9 @@ timeout = "120s"
 
 disableKinds = ['taxonomy', 'term']
 
+[outputs]
+section = ["HTML", "RSS", "Calendar"]
+
 [module]
     replacements = "github.com/colinwilson/lotusdocs -> lotusdocs"
     [[module.imports]]

layouts/events/list.html

@@ -0,0 +1,27 @@
+{{ define "main" }}
+<div class="container mt-100 mt-60">
+  <style>
+    .fc-daygrid-event {
+      white-space: break-spaces;
+    }
+    .fc-event-main-frame {
+      flex-direction: column;
+    }
+  </style>
+  <div class="justify-content-center mx-auto col-sm-6">
+    <div id='calendar' class="mb-4"></div>
+    {{ $js := resources.Get "js/calendar.js" }}
+    {{ $params := dict }}
+    {{ $sourceMap := cond hugo.IsProduction "" "inline" }}
+    {{ $opts := dict "sourceMap" $sourceMap "minify" hugo.IsProduction "target" "es2018" "params" $params }}
+    {{ $js = $js | js.Build $opts }}
+    {{ if hugo.IsProduction }}
+    {{ $js = $js | fingerprint "sha384" }}
+    {{ end }}
+    <script src="{{ $js.RelPermalink }}" defer></script>
+    {{ with  .OutputFormats.Get "calendar" -}}
+    <a href="{{ .Permalink | safeURL }}">ical feed</a>
+    {{- end }}
+  </div>
+</div>
+{{ end }}

layouts/events/list.ics

@@ -0,0 +1,25 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//freifunk berlin//hugo wegbsite generator//EN
+CALSCALE:GREGORIAN
+{{range .Pages -}}
+BEGIN:VEVENT
+DTSTAMP;VALUE=DATE-TIME:{{ dateFormat "20060102T150405Z" .Date }}
+LOCATION:{{ .Params.location }}
+CATEGORIES:{{ .Params.category }}
+SEQUENCE:0
+CLASS:PUBLIC
+SUMMARY:{{ .Title }}
+{{ $description := .Content | plainify }}
+{{ $description :=  replace $description "\n" "" }}
+DESCRIPTION;ENCODING=QUOTED-PRINTABLE:{{ $description }}
+UID:{{.Params.start}}@berlin.freifunk.net
+DTSTART;TZID=Europe/Berlin;VALUE=DATE-TIME:{{dateFormat "20060102T150405" .Params.start}}
+DTEND;TZID=Europe/Berlin;VALUE=DATE-TIME:{{dateFormat "20060102T150405" .Params.end}}
+{{ if .Params.rrule }}
+RRULE:{{ .Params.rrule }}
+{{ end }}
+URL:{{.Permalink}}
+END:VEVENT
+{{end -}}
+END:VCALENDAR

layouts/events/single.html

@@ -0,0 +1,53 @@
+{{ define "main" }}
+<section id="{{ .Title }}" class="container mt-100 mt-60">
+    <div class="justify-content-center mx-auto col-sm-6">
+        <h1 class="title fw-bold mb-4">
+            <span class="material-icons"
+                  style="font-size: inherit;
+                         line-height: inherit;
+                         vertical-align:bottom">calendar_month</span>
+            {{ .Title }}
+            {{ if not .Params.rrule }}
+            <span style="color:grey;white-space:nowrap;">
+                {{ time.Format "02 Jan 2006" .Params.start }}
+            </span>
+            {{ end }}
+        </h1>
+        <div class="d-flex flex-wrap">
+            <p class="text-muted para-desc mb-2 mx-auto">{{ .Content | markdownify }}</p>
+            <div>
+                <div class="p-4 mb-4 bg-soft-primary rounded">
+                    <div class="row">
+                        <span class="material-icons align-middle col-2">location_on</span>
+                        <p class="col-8">{{ .Params.location }}</p>
+                    </div>
+                    {{ if .Params.rrule }}
+                    <div class="row">
+                        <span class="material-icons align-middle col-2">schedule</span>
+                        <p class="col-8">
+                            {{ time.Format "15:04" .Params.start }} - {{ time.Format "15:04" .Params.end }}
+                        </p>
+                    </div>
+                    <div class="row">
+                        <span class="material-icons align-middle col-2">event_repeat</span>
+                        <p class="col-8">{{ .Params.rrule_text }}</p>
+                    </div>
+                    {{ else }}
+                    <div class="row">
+                        <span class="material-icons align-middle col-2">schedule</span>
+                        <p class="col-8">
+                            {{ time.Format "2 Jan 2006 15:04" .Params.start }}
+                            <br>
+                            - {{ time.Format "2 Jan 2006 15:04" .Params.end }}
+                        </p>
+                    </div>
+                    {{ end }}
+                </div>
+                {{ with  .OutputFormats.Get "calendar" -}}
+                <a href="{{ .Permalink | safeURL }}">ical feed</a>
+                {{- end }}
+            </div>
+        </div>
+    </div>
+</section>
+{{ end }}

layouts/events/single.ics

@@ -0,0 +1,23 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//freifunk berlin//hugo wegbsite generator//EN
+CALSCALE:GREGORIAN
+BEGIN:VEVENT
+DTSTAMP;VALUE=DATE-TIME:{{ dateFormat "20060102T150405Z" .Date }}
+LOCATION:{{ .Params.location }}
+CATEGORIES:{{ .Params.category }}
+SEQUENCE:0
+CLASS:PUBLIC
+SUMMARY:{{ .Title }}
+{{ $description := .Content | plainify }}
+{{ $description :=  replace $description "\n" "=0D=0A" }}
+DESCRIPTION;ENCODING=QUOTED-PRINTABLE:{{ $description }}
+UID:{{.Params.start}}@berlin.freifunk.net
+DTSTART;TZID=Europe/Berlin;VALUE=DATE-TIME:{{dateFormat "20060102T150405" .Params.start}}
+DTEND;TZID=Europe/Berlin;VALUE=DATE-TIME:{{dateFormat "20060102T150405" .Params.end}}
+{{ if .Params.rrule }}
+RRULE:{{ .Params.rrule }}
+{{ end }}
+URL:{{.Permalink}}
+END:VEVENT
+END:VCALENDAR