feat: add calendar page with private-url generator widget

client/src/App.vue

@@ -164,6 +164,7 @@ export default Vue.extend({
 
 @import '@openlab/deconf-ui-toolkit/theme.scss';
 @import '@fortawesome/fontawesome-svg-core/styles.css';
+@import './scss/hacks.scss';
 
 //
 // Misc styles
@@ -199,25 +200,4 @@ export default Vue.extend({
     @include title-font;
   }
 }
-
-//
-// Hacks
-//
-.sideTabs {
-  overflow-y: auto;
-}
-
-.addToCalendar {
-  display: none !important;
-}
-
-.atriumLayout {
-  flex: 1; // Fill AppLayout
-  overflow-x: hidden;
-}
-
-.sessionLayout-main {
-  // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
-  min-width: 0;
-}
 </style>

client/src/components/MozContentLayout.vue

@@ -40,5 +40,10 @@ export default Vue.extend({
 <style lang="scss">
 .contentLayout {
   background: $background;
+
+  .boxContent {
+    max-width: 720px;
+    margin-inline: auto;
+  }
 }
 </style>

client/src/i18n/en.yml

@@ -74,6 +74,13 @@ deconf:
   addToCalendar:
     action: Add to calendar
 
+  addUserCalendar:
+    title: Private calendar
+    generate: Generate url
+    info: Use this link to subscribe to "My Schedule" in your own calendar. Your calendar will refresh periodically to fetch the latest information and show you the events you have added to "My Schedule".
+    copy: copy
+    copied: copied
+
   sessionLink:
     copy: copy
     copied: copied
@@ -246,6 +253,7 @@ mozfest:
     houseEvents: HouseEvents
     misinfoCon: MisinfoCon # TODO - new
     emergentSessions: Emergent Sessions # TODO - new
+    calendar: My Calendar # TODO - new
 
   whatsOn:
     title: Sneak Peek
@@ -290,13 +298,6 @@ mozfest:
     title: Page Not Found
     info: We can't find the page you're looking for
 
-  addUserCalendar:
-    title: Private calendar
-    generate: Generate url
-    info: Use this link to subscribe to "My Schedule" in your own calendar. Your calendar will refresh periodically to fetch the latest information and show you the events you have added to "My Schedule".
-    copy: copy
-    copied: copied
-
   appLayout:
     atrium: Plaza
     whatsOn: Sneak Peek

client/src/lib/constants.ts

@@ -21,6 +21,7 @@ export enum ExtraRoutes {
   MisinfoCon = 'misinfoCon',
   EmergentInfo = 'emergentInfo',
   EmergentSessions = 'emergentSessions',
+  Calendar = 'calendar',
 }
 
 export const themeAllowlist = new Set([

client/src/router/module.ts

@@ -190,6 +190,15 @@ const routes: Array<RouteConfig> = [
       pageTitle: 'mozfest.pageTitles.emergentSessions',
     },
   },
+  {
+    path: '/calendar',
+    name: ExtraRoutes.Calendar,
+    component: () =>
+      import(/* webpackChunkName: "static" */ '../views/CalendarView.vue'),
+    meta: {
+      pageTitle: 'mozfest.pageTitles.calendar',
+    },
+  },
 
   //
   // Errors

client/src/scss/hacks.scss

@@ -0,0 +1,20 @@
+//
+// Hacks
+//
+.sideTabs {
+  overflow-y: auto;
+}
+
+.addToCalendar {
+  display: none !important;
+}
+
+.atriumLayout {
+  flex: 1; // Fill AppLayout
+  overflow-x: hidden;
+}
+
+.sessionLayout-main {
+  // https://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
+  min-width: 0;
+}

client/src/views/CalendarView.vue

@@ -0,0 +1,35 @@
+<template>
+  <ContentLayout class="calendarView">
+    <ApiContent slug="calendar">
+      <section slot="calendar" class="calendarWidget block">
+        <PrivateCalendarCreator api-module="api" />
+      </section>
+    </ApiContent>
+  </ContentLayout>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import ContentLayout from '@/components/MozContentLayout.vue'
+import { ApiContent, PrivateCalendarCreator } from '@openlab/deconf-ui-toolkit'
+
+export default Vue.extend({
+  components: { ApiContent, ContentLayout, PrivateCalendarCreator },
+})
+</script>
+
+<style lang="scss">
+.calendarView {
+  .calendarWidget {
+    border: 1px solid $border;
+    border-radius: $radius;
+    padding: 1rem;
+  }
+  .calendarWidget > * {
+    margin-bottom: 0;
+  }
+  p:has(img) {
+    text-align: center;
+  }
+}
+</style>

content/calendar/en.md

@@ -0,0 +1,43 @@
+# Private calendar
+
+You can subscribe to your MozFest **My Schedule** using your own calendar app, follow these instructions to get it up.
+
+Use the widget below to generate a private calendar URL and copy it to your clipboard. The next step depends on which calendar you use, we have guides for Apple’s Calendar, Google and Outlook.com.
+
+%calendar%
+
+> Please note, your **Private Calendar** URL will only be active during the conference and 90 days after, after that it will expire.
+
+---
+
+## Apple Calendar
+
+On macOS, open the Calendar app and use **File → New Calendar Subscription…**, then paste in your **Private Calendar** URL into the popup.
+
+![macOS File menu showing the New Calendar Subscription option](/calendar/macos-01.png)
+
+On the iOS Calendar app press the **Calendars** button at the bottom, then press **Add Subscription Calendar** and paste in your your **Private Calendar** URL.
+
+![iOS Add Calendar menu](/calendar/ios-01.png)
+
+---
+
+## Google Calendar
+
+On your computer, go to [Google Calendar](https://calendar.google.com) website.
+Under “**Other calendars”** click the plus button and choose “From URL” then paste in your **Private Calendar** URL
+
+![Google Calendar list of calendars with plus button](/calendar/google-01.png)
+
+---
+
+## Outlook.com
+
+Go to [outlook.com](https://outlook.com) and navigate to your calendar:
+
+![Outlook calendar list with Add Calendar option](/calendar/outlook-01.png)
+
+Press the **Add calendar** button above My calendars
+and navigate to **Subscribe from web** and paste in your **Private Calendar** URL.
+
+![Outlook's Add Calendar menu showing 'Subscribe from web' option](/calendar/outlook-02.png)