Add a process to generate html from local md files and create a docs …

…route for zoom (#809)

backend/src/appointment/commands/generate_documentation_pages.py

@@ -0,0 +1,41 @@
+import os
+
+import markupsafe
+import requests
+import markdown
+
+
+def open_or_get(path: str):
+    if path.startswith('http'):
+        return requests.get(path).text
+
+    # Otherwise it's a path
+    with open(path, 'r') as fh:
+        return fh.read()
+
+
+def run():
+    """Helper function to generate documentation/help pages into plain html
+    """
+    print('Fetching documentation...')
+
+    # Attr_List: In-case remote markdown has attributes
+    # TOC: For ids on headers
+    extensions = ['markdown.extensions.attr_list', 'markdown.extensions.toc']
+    # Only english for now. There's no german TB privacy policy?
+    locales = ['en']
+
+    for locale in locales:
+        using_zoom_doc = f'../docs/zoom/{locale}/using-zoom.md'
+
+        os.makedirs(f'{os.path.dirname(__file__)}/../tmp/docs/{locale}', exist_ok=True)
+
+        if using_zoom_doc:
+            print('Using zoom doc found.')
+            contents = open_or_get(using_zoom_doc)
+            html = markupsafe.Markup(markdown.markdown(contents, extensions=extensions))
+
+            with open(f'{os.path.dirname(__file__)}/../tmp/docs/{locale}/using-zoom.html', 'w') as fh:
+                fh.write(html)
+
+    print('Done! Copy them over to the frontend/src/assets/docs!')

backend/src/appointment/routes/commands.py

@@ -4,7 +4,7 @@
 import os
 
 import typer
-from ..commands import update_db, download_legal, create_invite_codes, setup
+from ..commands import update_db, download_legal, create_invite_codes, setup, generate_documentation_pages
 
 router = typer.Typer()
 
@@ -36,6 +36,11 @@ def download_legal_docs():
     download_legal.run()
 
 
+@router.command('generate-docs')
+def generate_docs():
+    generate_documentation_pages.run()
+
+
 @router.command('create-invite-codes')
 def create_app_invite_codes(n: int):
     create_invite_codes.run(n)

docs/zoom/en/using-zoom.md

@@ -0,0 +1,33 @@
+[TOC]
+
+# Using Zoom with Thunderbird Appointment
+
+You can optionally connect your [Zoom](https://www.zoom.com/) account to Thunderbird Appointment to generate one-time meeting links after a booking has been confirmed.
+
+## Connecting your Zoom Account
+
+Connecting your Zoom account is simple! Once you're logged in, navigate to [Settings -> Connected Accounts](https://appointment.day/settings/connectedAccounts). From there simply scroll down until you see the Zoom section. Click the `Connect` button, and you'll be sent over to Zoom's authentication flow and be asked to accept or deny permissions to Thunderbird Appointment. 
+
+If you accept the permissions you'll be sent back to Thunderbird Appointment where your account will be connected. You can confirm that you're good-to-go if you see a red `Disconnect` button instead of a `Connect` button. 
+
+## Disconnecting your Zoom Account
+
+If at any-time you want to disconnect your Zoom account you may do the following:
+
+- Click the red `Disconnect` button on [Settings -> Connected Accounts](https://appointment.day/settings/connectedAccounts).
+- In Zoom's settings you can remove authorization to Thunderbird Appointment.
+- You can delete your Thunderbird Appointment account.
+
+In any of these cases any references to your Zoom account will be removed from Thunderbird Appointment.
+
+## Enabling Meeting Link Generation
+
+Once you've connected your Zoom account you must enable meeting link generation on your schedule. 
+
+Simple navigate to [Dashboard](https://appointment.day/dashboard) and click on the `Meeting Details` tab. Once expanded you should have access to check the `Generate Zoom Meeting` checkbox. Once checked you'll notice the `Video Link` section has been removed as Zoom meeting links will be generated at the time of booking. Finally, click the `Save` button below and you should be good to go!
+
+## Troubleshooting
+
+Having an issue with our Zoom integration? Feel free to [contact us](https://appointment.day/contact) with details and we'll get back to you as soon as we can.
+
+

frontend/src/assets/docs/en/using-zoom.html

@@ -0,0 +1,29 @@
+<div class="toc">
+<ul>
+<li><a href="#using-zoom-with-thunderbird-appointment">Using Zoom with Thunderbird Appointment</a><ul>
+<li><a href="#connecting-your-zoom-account">Connecting your Zoom Account</a></li>
+<li><a href="#disconnecting-your-zoom-account">Disconnecting your Zoom Account</a></li>
+<li><a href="#enabling-meeting-link-generation">Enabling Meeting Link Generation</a></li>
+<li><a href="#troubleshooting">Troubleshooting</a></li>
+</ul>
+</li>
+</ul>
+</div>
+<h1 id="using-zoom-with-thunderbird-appointment">Using Zoom with Thunderbird Appointment</h1>
+<p>You can optionally connect your <a href="https://www.zoom.com/">Zoom</a> account to Thunderbird Appointment to generate one-time meeting links after a booking has been confirmed.</p>
+<h2 id="connecting-your-zoom-account">Connecting your Zoom Account</h2>
+<p>Connecting your Zoom account is simple! Once you're logged in, navigate to <a href="https://appointment.day/settings/connectedAccounts">Settings -&gt; Connected Accounts</a>. From there simply scroll down until you see the Zoom section. Click the <code>Connect</code> button, and you'll be sent over to Zoom's authentication flow and be asked to accept or deny permissions to Thunderbird Appointment. </p>
+<p>If you accept the permissions you'll be sent back to Thunderbird Appointment where your account will be connected. You can confirm that you're good-to-go if you see a red <code>Disconnect</code> button instead of a <code>Connect</code> button. </p>
+<h2 id="disconnecting-your-zoom-account">Disconnecting your Zoom Account</h2>
+<p>If at any-time you want to disconnect your Zoom account you may do the following:</p>
+<ul>
+<li>Click the red <code>Disconnect</code> button on <a href="https://appointment.day/settings/connectedAccounts">Settings -&gt; Connected Accounts</a>.</li>
+<li>In Zoom's settings you can remove authorization to Thunderbird Appointment.</li>
+<li>You can delete your Thunderbird Appointment account.</li>
+</ul>
+<p>In any of these cases any references to your Zoom account will be removed from Thunderbird Appointment.</p>
+<h2 id="enabling-meeting-link-generation">Enabling Meeting Link Generation</h2>
+<p>Once you've connected your Zoom account you must enable meeting link generation on your schedule. </p>
+<p>Simple navigate to <a href="https://appointment.day/dashboard">Dashboard</a> and click on the <code>Meeting Details</code> tab. Once expanded you should have access to check the <code>Generate Zoom Meeting</code> checkbox. Once checked you'll notice the <code>Video Link</code> section has been removed as Zoom meeting links will be generated at the time of booking. Finally, click the <code>Save</code> button below and you should be good to go!</p>
+<h2 id="troubleshooting">Troubleshooting</h2>
+<p>Having an issue with our Zoom integration? Feel free to <a href="https://appointment.day/contact">contact us</a> with details and we'll get back to you as soon as we can.</p>

frontend/src/router.ts

@@ -15,6 +15,7 @@ const AppointmentsView = defineAsyncComponent(() => import('@/views/Appointments
 const SettingsView = defineAsyncComponent(() => import('@/views/SettingsView.vue'));
 const ProfileView = defineAsyncComponent(() => import('@/views/ProfileView.vue'));
 const LegalView = defineAsyncComponent(() => import('@/views/LegalView.vue'));
+const DocsView = defineAsyncComponent(() => import('@/views/DocsView.vue'));
 const WaitingListActionView = defineAsyncComponent(() => import('@/views/WaitingListActionView.vue'));
 const SubscriberPanelView = defineAsyncComponent(() => import('@/views/admin/SubscriberPanelView.vue'));
 const InviteCodePanelView = defineAsyncComponent(() => import('@/views/admin/InviteCodePanelView.vue'));
@@ -154,6 +155,14 @@ const routes: RouteRecordRaw[] = [
       isPublic: true,
     },
   },
+  {
+    path: '/docs/using-zoom',
+    name: 'using-zoom-docs',
+    component: DocsView,
+    meta: {
+      isPublic: true,
+    },
+  },
   {
     path: '/setup',
     name: 'setup',

frontend/src/views/DocsView.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import {
+  computed, onMounted, ref,
+} from 'vue';
+import { useRoute } from 'vue-router';
+import usingZoom from '@/assets/docs/en/using-zoom.html?raw';
+
+const route = useRoute();
+
+const pageContents = ref('');
+
+onMounted(async () => {
+  pageContents.value = usingZoom;
+});
+</script>
+
+<template>
+  <div class="page-contents px-4 md:px-20" v-html="pageContents"></div>
+</template>
+
+<style scoped>
+@import '@/assets/styles/custom-media.pcss';
+
+.page-contents {
+
+  @media (--lg) {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    max-width: 70%;
+    margin-bottom: 10%;
+  }
+}
+
+/* Needed for v-html */
+:deep {
+  h1 {
+    @apply py-8 text-3xl text-teal-600 dark:text-teal-400;
+  }
+
+  h2 {
+    @apply py-8 text-2xl text-teal-600 dark:text-teal-400;
+  }
+
+  h3 {
+    @apply py-4 text-xl text-teal-600 dark:text-teal-400;
+  }
+
+  h4 {
+    @apply py-4 text-lg text-teal-600 dark:text-teal-400;
+  }
+
+  p {
+    @apply py-2 leading-relaxed;
+  }
+
+  a {
+    @apply underline;
+  }
+
+  .toc {
+    @media (--lg) {
+      display: flex;
+      flex-direction: column;
+      right: 5%;
+      position: fixed;
+      margin-top: 3%;
+    }
+  }
+
+  .toc ul:first-child {
+    font-weight: 600;
+    margin-left: 0.5rem;
+  }
+
+  .toc ul ul {
+    font-weight: 400;
+    margin-top: 0.5rem;
+    margin-left: 2rem;
+    list-style: decimal;
+  }
+
+}
+</style>