dynamic toolbar loading

Author: Abdulhakim Ajetunmobi

.gitignore

@@ -3,6 +3,7 @@
 
 *.zip
 .DS_Store
+*.drawio
 
 ### Node ###
 # Logs

tutorials/messages_api-sms/.astro/astro/content.d.ts

@@ -1,3 +1,12 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdoc': Promise<{
+			Content(props: Record<string, any>): import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+		}>;
+	}
+}
+
 declare module 'astro:content' {
 	interface Render {
 		'.mdx': Promise<{

tutorials/messages_api-sms/astro.config.mjs

@@ -1,17 +1,20 @@
 import { defineConfig } from 'astro/config';
+
+import markdoc from '@astrojs/markdoc';
 import starlight from '@astrojs/starlight';
 import relativeLinks from 'astro-relative-links';
-import myIntegration from './my-toolbar-app/my-integration.ts';
+import vonageIntegration from './vonage-toolbar/integration.ts';
 
 // https://astro.build/config
 export default defineConfig({
   integrations: [
     relativeLinks(),
-    myIntegration,
+    vonageIntegration,
     starlight({
       title: 'Vonage Onboarding',
       tableOfContents: false,
       pagefind: false,
     }),
+    markdoc({ allowHTML: true })
   ],
 });

tutorials/messages_api-sms/download-toolbar.js

@@ -0,0 +1,36 @@
+import fs from 'fs/promises';
+
+async function downloadFile(url, filename) {
+  console.log('downloading: ', filename);
+  try {
+    const response = await fetch(url);
+    const buffer = await response.arrayBuffer();
+
+    await fs.mkdir('./vonage-toolbar', { recursive: true }); // Create the downloads directory if it doesn't exist
+    await fs.writeFile(
+      `./vonage-toolbar/${filename}`,
+      Buffer.from(buffer),
+      (err) => {
+        if (err) {
+          console.error('Error writing file:', err);
+        } else {
+          console.log('File downloaded and written successfully!');
+        }
+      }
+    );
+  } catch (error) {
+    console.error('Error downloading file:', error);
+  }
+}
+
+console.log('download toolbar application files');
+
+downloadFile(
+  'https://raw.githubusercontent.com/conshus/onboarding-tutorials/refs/heads/main/toolbar-app/vonage-toolbar/integration.ts',
+  'integration.ts'
+);
+
+downloadFile(
+  'https://raw.githubusercontent.com/conshus/onboarding-tutorials/refs/heads/main/toolbar-app/vonage-toolbar/app.ts',
+  'app.ts'
+);

tutorials/messages_api-sms/markdoc.config.mjs

@@ -0,0 +1,6 @@
+import { defineMarkdocConfig } from '@astrojs/markdoc/config';
+import starlightMarkdoc from '@astrojs/starlight-markdoc';
+
+export default defineMarkdocConfig({
+  extends: [starlightMarkdoc()],
+});