AMBARI-26497: Website: Team page avatar can not fetch

.github/workflows/website.yml

@@ -2,7 +2,7 @@ name: Build and Deploy
 
 permissions:
   contents: write
-  
+
 on:
   pull_request:
     branches:
@@ -25,7 +25,7 @@ jobs:
           node-version: 18.12.1
 
       - name: Build Main Document
-        run: yarn && yarn build
+        run: yarn && yarn update-avatar && yarn build && git checkout .
 
       - name: Deploy
         if: ${{ github.event_name == 'push' }}
@@ -54,4 +54,4 @@ jobs:
           git commit -m '.asf.yaml'
           git push origin asf-site
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -13,7 +13,8 @@
     "serve": "docusaurus serve",
     "write-translations": "docusaurus write-translations",
     "write-heading-ids": "docusaurus write-heading-ids",
-    "typecheck": "tsc"
+    "typecheck": "tsc",
+    "update-avatar": "node scripts/updateTeamAvatar.js"
   },
   "config": {
     "commitizen": {

scripts/updateTeamAvatar.js

@@ -0,0 +1,92 @@
+const fs = require('fs');
+const path = require('path');
+const https = require('https');
+const { promisify } = require('util');
+
+const readFile = promisify(fs.readFile);
+const writeFile = promisify(fs.writeFile);
+const mkdir = promisify(fs.mkdir);
+
+const AVATAR_JSON_PATH = path.resolve(__dirname, '../src/pages/team/languages.json');
+const OUTPUT_DIR = './static/img/team';
+const RELATIVE_PATH_PREFIX = '/img/team/';
+
+async function ensureDirectoryExists(dirPath) {
+  try {
+    await mkdir(dirPath, { recursive: true });
+  } catch (err) {
+    if (err.code !== 'EEXIST') throw err;
+  }
+}
+
+async function downloadImage(url, filePath) {
+  return new Promise((resolve, reject) => {
+    const file = fs.createWriteStream(filePath);
+
+    https.get(url, (response) => {
+      if (response.statusCode !== 200) {
+        reject(new Error(`Request error, status code: ${response.statusCode}`));
+        return;
+      }
+
+      const contentType = response.headers['content-type'];
+      if (!contentType || !contentType.startsWith('image/')) {
+        reject(new Error(`Invalid content type: ${contentType}`));
+        return;
+      }
+
+      response.pipe(file);
+
+      file.on('finish', () => {
+        file.close(resolve);
+      });
+    }).on('error', (err) => {
+      fs.unlink(filePath, () => { });
+      reject(err);
+    });
+  });
+}
+
+
+async function processAvatars() {
+  try {
+    await ensureDirectoryExists(OUTPUT_DIR);
+    const data = await readFile(AVATAR_JSON_PATH, 'utf8');
+    const jsonData = JSON.parse(data);
+
+    if (jsonData.en && jsonData.en.pmc) await avatarSectionProcess(jsonData.en.pmc)
+    if (jsonData.en && jsonData.en.committer) await avatarSectionProcess(jsonData.en.committer)
+
+    await writeFile(AVATAR_JSON_PATH, JSON.stringify(jsonData, null, 2));
+    console.log('JSON update!');
+  } catch (err) {
+    console.error('Error cause:', err);
+  }
+}
+
+async function avatarSectionProcess(avatarList) {
+  if (!Array.isArray(avatarList)) {
+    throw new Error('Invalid json');
+  }
+
+  for (let i = 0; i < avatarList.length; i++) {
+    const item = avatarList[i];
+    if (!item.avatarUrl) continue;
+
+    try {
+      const url = item.avatarUrl;
+      const ext = path.extname(url) || '.png';
+      const filename = `avatar_${Date.now()}_${i}${ext}`;
+      const outputPath = path.join(OUTPUT_DIR, filename);
+
+      await downloadImage(url, outputPath);
+
+      item.avatarUrl = RELATIVE_PATH_PREFIX + filename;
+      console.log(`Download success: ${url} -> ${item.avatarUrl}`);
+    } catch (err) {
+      console.error(`Download failed ${item.avatarUrl}: ${err.message}`);
+    }
+  }
+}
+
+processAvatars();

src/pages/team/index.js

@@ -5,53 +5,53 @@ import Layout from '@theme/Layout';
 import './index.less';
 
 export default function () {
-    const isBrowser = useIsBrowser();
-    const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
-    const dataSource = config?.[language];
+  const isBrowser = useIsBrowser();
+  const language = isBrowser && location.pathname.indexOf('/zh-CN/') === 0 ? 'zh-CN' : 'en';
+  const dataSource = config?.[language];
 
-    return (
-        <Layout title="team" description="team page">
-            <div className="container">
-            <div className="block team_page">
-                <h3 className="team_title">Ambari Team</h3>
-                <p className="team_desc" dangerouslySetInnerHTML={ { __html: dataSource.info.desc } }/>
-                <h3 className="team_title">PMC</h3>
-                <p className="team_desc">{dataSource.info.tip}</p>
-                <ul className="character_list">
-                    {
-                        dataSource.pmc.map((item, i) => (
-                            <a href={'https://github.com/' + item.githubId} key={i} target="_blank">
-                                <li className="character_item text_center" style={{'listStyle': 'none'}}>
-                                    <img className="character_avatar" src={item.avatarUrl} alt={item.name}/>
-                                    <div className="character_desc">
-                                        <h3 className="character_name">{item.name}</h3>
-                                        <h3 className="character_id"><span className="githubId">githubId:</span>{item.githubId}</h3>
-                                    </div>
-                                </li>
-                            </a>
-                        ))
-                    }
-                </ul>
+  return (
+    <Layout title="team" description="team page">
+      <div className="container">
+        <div className="block team_page">
+          <h3 className="team_title">Ambari Team</h3>
+          <p className="team_desc" dangerouslySetInnerHTML={{ __html: dataSource.info.desc }} />
+          <h3 className="team_title">PMC</h3>
+          <p className="team_desc">{dataSource.info.tip}</p>
+          <ul className="character_list">
+            {
+              dataSource.pmc.map((item, i) => (
+                <li key={i} className="character_item text_center" style={{ 'listStyle': 'none' }}>
+                  <a href={'https://github.com/' + item.githubId} target="_blank">
+                    <img className="character_avatar" src={item.avatarUrl} alt={item.name} />
+                    <div className="character_desc">
+                      <h3 className="character_name">{item.name}</h3>
+                      <h3 className="character_id"><span class="mdi--github"></span>{item.githubId}</h3>
+                    </div>
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
 
-                <h3 className="team_title">Committers</h3>
-                <p className="team_desc">{dataSource.info.tip}</p>
-                <ul className="character_list">
-                  {
-                    dataSource.committer.map((item, i) => (
-                      <a href={'https://github.com/' + item.githubId} key={i} target="_blank">
-                        <li className="character_item text_center" style={{'listStyle': 'none'}}>
-                          <img className="character_avatar" src={item.avatarUrl} alt={item.name}/>
-                          <div className="character_desc">
-                            <h3 className="character_name">{item.name}</h3>
-                            <h3 className="character_id"><span className="githubId">githubId:</span>{item.githubId}</h3>
-                          </div>
-                        </li>
-                      </a>
-                    ))
-                  }
-                </ul>
-            </div>
-            </div>
-        </Layout>
-    );
+          <h3 className="team_title">Committers</h3>
+          <p className="team_desc">{dataSource.info.tip}</p>
+          <ul className="character_list">
+            {
+              dataSource.committer.map((item, i) => (
+                <li key={i} className="character_item text_center" style={{ 'listStyle': 'none' }}>
+                  <a href={'https://github.com/' + item.githubId} target="_blank">
+                    <img className="character_avatar" src={item.avatarUrl} alt={item.name} />
+                    <div className="character_desc">
+                      <h3 className="character_name">{item.name}</h3>
+                      <h3 className="character_id"><span class="mdi--github"></span>{item.githubId}</h3>
+                    </div>
+                  </a>
+                </li>
+              ))
+            }
+          </ul>
+        </div>
+      </div>
+    </Layout>
+  );
 }