#250 [calendar] as image

components/Calendar.vue

@@ -15,12 +15,7 @@
                 </div>
                 <div class="card-body">
                     <ul class="list-unstyled mb-0">
-                        <li v-for="event in currentYear.eventsByDate[d.toString()]" class="mb-2">
-                            <Flag v-if="event.flag" name="" alt="" :img="`/flags/${event.flag}.png`"/>
-                            <Icon v-else v="arrow-circle-right"/>
-                            <T v-if="$te(`calendar.events.${event.name}`)">calendar.events.{{event.name}}</T>
-                            <LinkedText v-else :text="event.name"/>
-                        </li>
+                        <CalendarEvent v-for="event in currentYear.eventsByDate[d.toString()]" :event="event"/>
                     </ul>
                 </div>
             </div>

components/CalendarBanner.vue

@@ -5,12 +5,7 @@
             <T>calendar.banner</T>:
         </p>
         <ul class="list-unstyled my-3 ms-3">
-            <li v-for="event in events" class="mb-2">
-                <Flag v-if="event.flag" name="" alt="" :img="`/flags/${event.flag}.png`"/>
-                <Icon v-else v="arrow-circle-right"/>
-                <T v-if="$te(`calendar.events.${event.name}`)"></T>
-                <LinkedText v-else :text="event.name"/>
-            </li>
+            <CalendarEvent v-for="event in events" :event="event"/>
         </ul>
         <nuxt-link v-if="link" :to="`/${config.calendar.route}`" class="small">
             <Icon v="angle-right"/>

components/CalendarEvent.vue

@@ -0,0 +1,19 @@
+<template>
+    <li class="mb-2">
+        <span v-if="range" class="badge bg-primary">{{ event.getRange(range) }}</span>
+        <Flag v-if="event.flag" name="" alt="" :img="`/flags/${event.flag}.png`"/>
+        <Icon v-else v="arrow-circle-right"/>
+        <T v-if="$te(`calendar.events.${event.name}`)">calendar.events.{{event.name}}</T>
+        <LinkedText v-else :text="event.name"/>
+    </li>
+</template>
+
+<script>
+    export default {
+        props: {
+            event: { required: true },
+            range: {},
+        },
+    }
+</script>
+

components/CalendarMonthEvents.vue

@@ -0,0 +1,30 @@
+<template>
+    <ul class="list-unstyled mb-0">
+        <CalendarEvent v-for="event in events" :event="event" :range="year"/>
+    </ul>
+</template>
+
+<script>
+    import { iterateMonth } from '../src/calendar/helpers';
+    import { currentYear } from '../src/calendar/calendar';
+
+    export default {
+        props: {
+            year: { required: true },
+            month: { required: true },
+        },
+        computed: {
+            events() {
+                let events = [];
+                for (let day of iterateMonth(this.year, this.month)) {
+                    for (let event of currentYear.eventsByDate[day.toString()] || []) {
+                        if (event.isFirstDay(day)) {
+                            events.push(event);
+                        }
+                    }
+                }
+                return events;
+            }
+        }
+    }
+</script>

locale/en/translations.suml

@@ -701,3 +701,7 @@ calendar:
         trans_prisoner: '{https://transprisoners.net/about/=Trans Prisoner Day of Action and Solidarity}'
         xenogender_day: '{https://nonbinary.wiki/wiki/Xenogender=Xenogender Visibility Day}'
     banner: 'We''re celebrating'
+    image:
+        header: 'Download an image'
+        overview: 'Overview'
+        labels: 'Labels'

locale/pl/translations.suml

@@ -1332,3 +1332,7 @@ calendar:
         trans_prisoner: '{https://transprisoners.net/about/=Dzień Solidarności z Uwięzionymi Osobami Trans}'
         xenogender_day: 'Dzień widoczności {/slowniki/terminologia#ksenopłciowość=Osób Ksenopłciowych}'
     banner: 'Obchodzimy właśnie'
+    image:
+        header: 'Ściągnij w formie obrazka'
+        overview: 'Przegląd'
+        labels: 'Etykietki'

routes/calendar.vue

@@ -16,7 +16,20 @@
             </div>
         </section>
 
+        <section>
+            <T>calendar.image.header</T>
+            <a :href="`/${imageOverview}`" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm">
+                <Icon v="image"/>
+                <T>calendar.image.overview</T>
+            </a>
+            <a :href="`/${imageLabels}`" target="_blank" rel="noopener" class="btn btn-outline-primary btn-sm">
+                <Icon v="image"/>
+                <T>calendar.image.labels</T>
+            </a>
+        </section>
+
         <Support/>
+
         <section>
             <Share :title="$t('calendar.header')"/>
         </section>
@@ -30,12 +43,14 @@
         data() {
             return {
                 year: new Date().getFullYear(),
+                imageOverview: `calendar/calendar-${process.env.LOCALE}-overview.png`,
+                imageLabels: `calendar/calendar-${process.env.LOCALE}-labels.png`,
             }
         },
         head() {
             return head({
                 title: this.$t('calendar.headerLong'),
-                banner: `calendar/calendar-${process.env.LOCALE}.png`,
+                banner: this.imageOverview,
             });
         },
     };

routes/calendarWide.vue

@@ -8,7 +8,7 @@
             <span class="h4 mt-2">
                 <nuxt-link to="/">
                     <Icon v="tags"/>
-                    <T>title</T>
+                    <T>title</T>/{{ config.calendar.route }}
                 </nuxt-link>
             </span>
         </h2>
@@ -16,7 +16,8 @@
         <section class="row pb-4">
             <div v-for="i in 12" class="col-12 col-lg-3 py-3">
                 <h3 class="text-center"><T>calendar.months.{{i}}</T></h3>
-                <Calendar :year="year" :month="i"/>
+                <CalendarMonthEvents v-if="labels" :year="year" :month="i" class="small my-3"/>
+                <Calendar v-else :year="year" :month="i"/>
             </div>
         </section>
     </div>
@@ -30,6 +31,7 @@
         data() {
             return {
                 year: new Date().getFullYear(),
+                labels: this.$route.query.labels === 'true',
             }
         },
         head() {

server/calendar.js

@@ -4,15 +4,20 @@ const fs  = require('fs');
 const Suml = require('suml');
 const locale = new Suml().parse(fs.readFileSync(`./data/config.suml`).toString()).locale;
 
-(async () => {
+const shoot = async (url, filename) => {
     const pr = new Pageres({
         delay: 3,
+        scale: 2,
     });
-    pr.src(process.env.BASE_URL + '/calendar-wide', ['1500x300']);
-
+    pr.src(process.env.BASE_URL + url, ['1500x300']);
     for (let buffer of await pr.run()) {
-        const target = `${__dirname}/../static/calendar/calendar-${locale}.png`;
+        const target = `${__dirname}/../static/calendar/${filename}.png`;
         console.log(target);
         fs.writeFileSync(target, buffer);
     }
+}
+
+(async () => {
+    await shoot('/calendar-wide', `calendar-${locale}-overview`);
+    await shoot('/calendar-wide?labels=true', `calendar-${locale}-labels`);
 })();

src/calendar/helpers.js

@@ -59,6 +59,19 @@ export class Event {
     length() {
         return [...this.getDays(2021)].length;
     }
+
+    getRange(year) {
+        const days = this.getDays(year);
+        if (days.length === 1) {
+            return days[0].day;
+        }
+
+        return `${days[0].day} – ${days[days.length - 1].day}`;
+    }
+
+    isFirstDay(day) {
+        return this.getDays(day.year)[0].equals(day);
+    }
 }
 
 export function day (dayOfMonth) {