Serve plugin icons locally (#3768)

Co-authored-by: Anbraten <6918444+anbraten@users.noreply.github.com>

docs/plugins/woodpecker-plugins/src/index.ts

@@ -12,7 +12,7 @@ async function loadContent(): Promise<Content> {
 
   const plugins = (
     await Promise.all(
-      pluginsIndex.plugins.map(async (i) => {
+      pluginsIndex.plugins.map(async (i): Promise<WoodpeckerPlugin | undefined> => {
         let docsContent: string;
         try {
           const response = await axios(i.docs);
@@ -29,7 +29,22 @@ async function loadContent(): Promise<Content> {
           return undefined;
         }
 
-        return <WoodpeckerPlugin>{
+        let pluginIconDataUrl: string | undefined;
+        if (docsHeader.icon) {
+          try {
+            const response = await axios(docsHeader.icon, {
+              responseType: 'arraybuffer',
+            });
+            pluginIconDataUrl = `data:${response.headers['content-type'].toString()};base64,${Buffer.from(
+              response.data,
+              'binary',
+            ).toString('base64')}`;
+          } catch (e) {
+            console.error("Can't fetch plugin icon", docsHeader.icon, (e as AxiosError).message);
+          }
+        }
+
+        return {
           name: docsHeader.name,
           url: docsHeader.url,
           icon: docsHeader.icon,
@@ -40,7 +55,8 @@ async function loadContent(): Promise<Content> {
           containerImage: docsHeader.containerImage,
           containerImageUrl: docsHeader.containerImageUrl,
           verified: i.verified || false,
-        };
+          iconDataUrl: pluginIconDataUrl,
+        } satisfies WoodpeckerPlugin;
       }),
     )
   ).filter<WoodpeckerPlugin>((plugin): plugin is WoodpeckerPlugin => plugin !== undefined);

docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPlugin.tsx

@@ -60,7 +60,9 @@ export function WoodpeckerPlugin({ plugin }: { plugin: WoodpeckerPluginType }) {
 
                 <p style={{ marginTop: '2rem', marginBottom: '1rem' }}>{plugin.description}</p>
               </div>
-              <div className="col col--2">{plugin.icon ? <img src={plugin.icon} width="150" /> : IconPlugin(150)}</div>
+              <div className="col col--2">
+                {plugin.iconDataUrl ? <img src={plugin.iconDataUrl} width="150" /> : IconPlugin(150)}
+              </div>
             </div>
             <hr style={{ margin: '1rem 0' }} />
             <div dangerouslySetInnerHTML={{ __html: plugin.docs }} />

docs/plugins/woodpecker-plugins/src/theme/WoodpeckerPluginList.tsx

@@ -11,7 +11,9 @@ function PluginPanel({ plugin }: { plugin: WoodpeckerPlugin }) {
   return (
     <a href={pluginUrl} className="card shadow--md wp-plugin-card">
       <div className="card__header row">
-        <div className="col col--2 text--left">{plugin.icon ? <img src={plugin.icon} width="50" /> : IconPlugin()}</div>
+        <div className="col col--2 text--left">
+          {plugin.iconDataUrl ? <img src={plugin.iconDataUrl} width="50" /> : IconPlugin()}
+        </div>
         <div className="col col--10">
           <h3>{plugin.name}</h3>
           <p>{plugin.description}</p>

docs/plugins/woodpecker-plugins/src/types.ts

@@ -19,6 +19,7 @@ export type WoodpeckerPlugin = WoodpeckerPluginHeader & {
   name: string;
   docs: string; // body of the docs .md file
   verified: boolean; // we set verified to false when not explicitly set
+  iconDataUrl?: string;
 };
 
 export type Content = {