@the-vcsi/msgraph 0.0.1 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@the-vcsi/msgraph",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "description": "sv CLI add-on for Microsoft Graph / SharePoint integration",
   "type": "module",
   "exports": {
@@ -8,8 +8,9 @@
   },
   "files": ["src"],
   "keywords": ["sv-add", "svelte", "sveltekit", "microsoft-graph", "sharepoint"],
-  "dependencies": {
-    "sv": "^0.11.0"
+  "dependencies": {},
+  "peerDependencies": {
+    "sv": "^0.13.0"
   },
   "repository": {
     "type": "git",

package/src/index.js

@@ -1,4 +1,4 @@
-import { defineAddon, defineAddonOptions } from 'sv/core';
+import { defineAddon, defineAddonOptions } from 'sv';
 import { readFileSync } from 'fs';
 import { dirname, join } from 'path';
 import { fileURLToPath } from 'url';
@@ -8,6 +8,7 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 // Read templates from files (testable, lintable)
 const FETCH_SCRIPT = readFileSync(join(__dirname, 'templates/fetch-msgraph.js'), 'utf8');
 const APP_SETTINGS = readFileSync(join(__dirname, 'templates/appSettings.js'), 'utf8');
+const ASSETS_SCRIPT = readFileSync(join(__dirname, 'templates/fetch-assets.js'), 'utf8');
 const ENV_EXAMPLE = readFileSync(join(__dirname, 'templates/.env.example'), 'utf8');
 
 const options = defineAddonOptions()
@@ -19,12 +20,16 @@ const options = defineAddonOptions()
 
 export default defineAddon({
   id: '@the-vcsi/msgraph',
+  shortDescription: 'Microsoft Graph / SharePoint integration for fetching story content',
   options,
 
   run: ({ sv, options: opts }) => {
     // Create the fetch script
     sv.file('scripts/fetch-msgraph.js', () => FETCH_SCRIPT);
 
+    // Pull binary assets (headshots, logos) out of the same SharePoint site
+    sv.file('scripts/fetch-assets.js', () => ASSETS_SCRIPT);
+
     // Create app settings config with user-provided siteId
     const appSettings = APP_SETTINGS.replace(/__SITE_ID__/g, opts.siteId || 'YOUR_SITE_ID');
     sv.file('src/appSettings.js', () => appSettings);
@@ -42,23 +47,26 @@ export default defineAddon({
       const pkg = JSON.parse(content);
       pkg.scripts = pkg.scripts || {};
       pkg.scripts['fetch:sharepoint'] = 'node scripts/fetch-msgraph.js';
+      pkg.scripts['fetch:headshots'] = 'node scripts/fetch-assets.js';
 
       // Add required dependencies
       pkg.dependencies = pkg.dependencies || {};
       pkg.dependencies['@azure/identity'] = '^4.0.0';
       pkg.dependencies['@microsoft/microsoft-graph-client'] = '^3.0.0';
       pkg.dependencies['dotenv'] = '^16.0.0';
+      // fetch-assets.js converts SharePoint's .webp to the .jpg the templates request
+      pkg.dependencies['sharp'] = '^0.34.5';
 
       return JSON.stringify(pkg, null, 2);
     });
 
-    console.log('\n  Microsoft Graph integration added!');
-    console.log('  1. Copy .env.example to .env');
-    console.log('  2. Get credentials from Azure Portal > App registrations:');
-    console.log('     - tenantId: Directory (tenant) ID');
-    console.log('     - clientId: Application (client) ID');
-    console.log('     - clientSecret: Certificates & secrets > New client secret');
-    console.log('  3. Run: npm install');
-    console.log('  4. Run: npm run fetch:sharepoint');
-  }
+  },
+
+  nextSteps: () => [
+    'Copy .env.example to .env',
+    'Get credentials from Azure Portal > App registrations',
+    'Run npm install',
+    'Run npm run fetch:sharepoint to pull story copy',
+    'Run npm run fetch:headshots to pull images (edit ASSET_FOLDERS first)'
+  ]
 });

package/src/templates/fetch-assets.js

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+
+import 'dotenv/config';
+import { mkdirSync } from 'fs';
+import { writeFile } from 'fs/promises';
+import { join, dirname, extname, basename } from 'path';
+import { fileURLToPath } from 'url';
+import { ClientSecretCredential } from '@azure/identity';
+import { Client } from '@microsoft/microsoft-graph-client';
+import { TokenCredentialAuthenticationProvider } from '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';
+import sharp from 'sharp';
+import settings from '../src/appSettings.js';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const STATIC_DIR = join(__dirname, '..', 'static');
+
+// Which SharePoint folders to pull, as { remotePath: localPathUnderStatic }.
+// Edit this for your site: remotePath is relative to the document library root,
+// localPath is relative to static/.
+//
+// Filenames become the local filenames, and .webp is converted to .jpg (the
+// templates' member components request `<member id>.jpg`). So a headshot is
+// only picked up if its filename matches the person's id in members.csv;
+// rename it in SharePoint rather than guessing here.
+const ASSET_FOLDERS = {
+  'assets/headshots': 'common/assets/members',
+};
+
+function createClient() {
+  const credential = new ClientSecretCredential(
+    settings.tenantId || process.env.tenantId,
+    settings.clientId || process.env.clientId,
+    settings.clientSecret || process.env.clientSecret
+  );
+
+  const authProvider = new TokenCredentialAuthenticationProvider(credential, {
+    scopes: settings.scopes,
+  });
+
+  return Client.initWithMiddleware({ authProvider });
+}
+
+async function downloadFile(client, driveId, itemId) {
+  // Get the download URL and fetch content
+  const response = await client
+    .api(`/drives/${driveId}/items/${itemId}/content`)
+    .responseType('arraybuffer')
+    .get();
+
+  return Buffer.from(response);
+}
+
+async function main() {
+  const client = createClient();
+
+  // Get site info
+  let site;
+  try {
+    site = await client.api(`/sites/${settings.siteId}`).get();
+  } catch (error) {
+    console.error(`Error: ${error.code} - ${error.message}`);
+    throw error;
+  }
+
+  console.log(`Site: ${site.webUrl}`);
+
+  // Get drives
+  const drives = await client.api(`/sites/${site.id}/drives`).get();
+  const driveId = drives.value[0].id;
+
+  for (const [remotePath, localPath] of Object.entries(ASSET_FOLDERS)) {
+    console.log(`\nSyncing: ${remotePath} -> ${localPath}`);
+
+    const outputDir = join(STATIC_DIR, localPath);
+    mkdirSync(outputDir, { recursive: true });
+
+    try {
+      // Get items in the folder
+      const items = await client
+        .api(`/drives/${driveId}/root:/${remotePath}:/children`)
+        .get();
+
+      const files = items.value.filter((item) => item.file);
+      console.log(`Found ${files.length} file(s)`);
+
+      for (const file of files) {
+        console.log(`  Downloading: ${file.name}`);
+
+        try {
+          const content = await downloadFile(client, driveId, file.id);
+          const ext = extname(file.name).toLowerCase();
+          const name = basename(file.name, ext);
+
+          // Convert webp to jpg, keep other formats as-is
+          if (ext === '.webp') {
+            const jpgBuffer = await sharp(content).jpeg({ quality: 90 }).toBuffer();
+            const outputName = `${name}.jpg`;
+            await writeFile(join(outputDir, outputName), jpgBuffer);
+            console.log(`    -> ${localPath}/${outputName} (converted from webp)`);
+          } else {
+            await writeFile(join(outputDir, file.name), content);
+            console.log(`    -> ${localPath}/${file.name}`);
+          }
+        } catch (error) {
+          console.error(`    Error downloading: ${error.message}`);
+        }
+      }
+    } catch (error) {
+      console.error(`Error accessing folder: ${error.message}`);
+    }
+  }
+
+  console.log('\nDone!');
+}
+
+main().catch(console.error);