Improve plugins index (#1200)

Co-authored-by: qwerty287 <80460567+qwerty287@users.noreply.github.com>

README.md

@@ -1,6 +1,6 @@
 <p align="center">
   <a href="/~https://github.com/woodpecker-ci/woodpecker/">
-    <img alt="Woodpecker" src="docs/static/img/logo-auto-darkmode.svg" width="220"/>
+    <img alt="Woodpecker" src="docs/static/img/logo.svg" width="220"/>
   </a>
 </p>
 <br/>

docs/docs/92-awesome.md

@@ -25,9 +25,15 @@ If you have some missing resources, please feel free to [open a pull-request](ht
 
 ## Templates
 
-## Blogs, guides, videos
+## Posts & tutorials
 
-- [Tutorial about setup of Woodpecker-CI and Gitea](https://containers.fan/posts/setup-gitea-with-woodpecker-ci/)
+- [Setup Gitea with Woodpecker CI](https://containers.fan/posts/setup-gitea-with-woodpecker-ci/)
+- [Step-by-step guide to modern, secure and Open-source CI setup](https://devforth.io/blog/step-by-step-guide-to-modern-secure-ci-setup/)
+- [Using Woodpecker CI for my static sites](https://jan.wildeboer.net/2022/07/Woodpecker-CI-Jekyll/)
+- [Woodpecker CI @ Codeberg](https://www.sarkasti.eu/articles/post/woodpecker/)
+- [Deploy Docker/Compose using Woodpecker CI](https://hinty.io/vverenko/deploy-docker-compose-using-woodpecker-ci/)
+
+## Videos
 
 ## Plugins
 

docs/docusaurus.config.js

@@ -20,7 +20,6 @@ module.exports = {
       logo: {
         alt: 'Woodpecker Logo',
         src: 'img/logo.svg',
-        srcDark: 'img/logo-darkmode.svg',
       },
       items: [
         {
@@ -108,8 +107,8 @@ module.exports = {
           title: 'More',
           items: [
             {
-              label: "Translate",
-              href: 'https://translate.woodpecker-ci.org/engage/woodpecker-ci/'
+              label: 'Translate',
+              href: 'https://translate.woodpecker-ci.org/engage/woodpecker-ci/',
             },
             {
               label: 'GitHub',
@@ -169,7 +168,7 @@ module.exports = {
   themes: [
     path.resolve(__dirname, 'plugins', 'woodpecker-plugins', 'dist'),
     [
-      require.resolve("@easyops-cn/docusaurus-search-local"),
+      require.resolve('@easyops-cn/docusaurus-search-local'),
       {
         hashed: true,
       },
@@ -189,7 +188,7 @@ module.exports = {
               label: 'Next',
               banner: 'unreleased',
             },
-            '0.15': {
+            0.15: {
               label: '0.15.x',
               banner: 'none',
             },
@@ -201,4 +200,13 @@ module.exports = {
       },
     ],
   ],
+  webpack: {
+    jsLoader: (isServer) => ({
+      loader: require.resolve('esbuild-loader'),
+      options: {
+        loader: 'tsx',
+        target: isServer ? 'node12' : 'es2017',
+      },
+    }),
+  },
 };

docs/package.json

@@ -15,12 +15,13 @@
     "write-heading-ids": "docusaurus write-heading-ids"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.0.1",
-    "@docusaurus/preset-classic": "^2.0.1",
-    "@easyops-cn/docusaurus-search-local": "^0.31.0",
+    "@docusaurus/core": "^2.1.0",
+    "@docusaurus/preset-classic": "^2.1.0",
+    "@easyops-cn/docusaurus-search-local": "^0.32.0",
     "@mdx-js/react": "^1.6.22",
     "@svgr/webpack": "^6.3.1",
     "clsx": "^1.2.1",
+    "esbuild-loader": "^2.20.0",
     "file-loader": "^6.2.0",
     "prism-react-renderer": "^1.3.5",
     "react": "^17.0.2",
@@ -42,7 +43,7 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.0.1",
     "@tsconfig/docusaurus": "^1.0.6",
-    "@types/react": "^18.0.17",
+    "@types/react": "^18.0.20",
     "@types/react-helmet": "^6.1.5",
     "@types/react-router-dom": "^5.3.3",
     "typescript": "^4.7.4"

docs/plugins/woodpecker-plugins/package.json

@@ -5,24 +5,27 @@
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "scripts": {
-    "start": "concurrently 'tsc -w' 'tsc -w -p tsconfig.jsx.json'",
-    "build": "tsc && tsc -p tsconfig.jsx.json"
+    "start": "yarn run style && concurrently 'tsc -w' 'tsc -w -p tsconfig.jsx.json'",
+    "build": "yarn run style && tsc && tsc -p tsconfig.jsx.json",
+    "style": "mkdir -p dist/theme/ && cp src/theme/style.css dist/theme/style.css"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.0.0-beta.18",
-    "@docusaurus/theme-classic": "^2.0.0-beta.18",
-    "@docusaurus/types": "^2.0.0-beta.18",
-    "@octokit/openapi-types": "^11.2.0",
-    "@octokit/rest": "^18.12.0",
-    "@tsconfig/docusaurus": "^1.0.5",
-    "@types/marked": "^4.0.3",
-    "clsx": "^1.1.1",
-    "concurrently": "^7.0.0",
-    "marked": "^4.0.12",
-    "typescript": "^4.6.3"
+    "@docusaurus/module-type-aliases": "^2.1.0",
+    "@docusaurus/theme-classic": "^2.1.0",
+    "@docusaurus/types": "^2.1.0",
+    "@tsconfig/docusaurus": "^1.0.6",
+    "@types/marked": "^4.0.7",
+    "axios": "^0.27.2",
+    "concurrently": "^7.4.0",
+    "marked": "^4.1.0",
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "fuse.js": "^6.6.2",
+    "yaml": "^2.1.1"
   }
 }

docs/plugins/woodpecker-plugins/plugins.json

@@ -0,0 +1,53 @@
+{
+  "plugins": [
+    {
+      "name": "Clone plugin",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-git/master/docs.md",
+      "verified": true
+    },
+    {
+      "name": "Docker Buildx",
+      "docs": "https://codeberg.org/woodpecker-plugins/plugin-docker-buildx/raw/branch/main/docs.md",
+      "verified": true
+    },
+    {
+      "name": "Codecov",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-codecov/master/docs.md",
+      "verified": true
+    },
+    {
+      "name": "Surge preview",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-surge-preview/main/docs.md",
+      "verified": true
+    },
+    {
+      "name": "S3 upload",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-s3/master/docs.md",
+      "verified": true
+    },
+    {
+      "// todo": true,
+      "name": "Email",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-email/master/docs.md",
+      "verified": true
+    },
+    {
+      "// todo": true,
+      "name": "Docker",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-docker/master/docs.md",
+      "verified": true
+    },
+    {
+      "// todo": true,
+      "name": "Github release",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-github-release/master/docs.md",
+      "verified": true
+    },
+    {
+      "// todo": true,
+      "name": "Chart releaser",
+      "docs": "https://raw.githubusercontent.com/woodpecker-ci/plugin-chart-releaser/master/docs.md",
+      "verified": true
+    }
+  ]
+}

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

@@ -1,64 +1,53 @@
 import { LoadContext, Plugin, PluginContentLoadedActions } from '@docusaurus/types';
-import { Octokit } from '@octokit/rest';
-import { components as OctokitComponents } from '@octokit/openapi-types';
 import path from 'path';
-import { Content, WoodpeckerPlugin, WoodpeckerPluginHeader } from './types';
+import fs from 'fs';
+import axios, { AxiosError } from 'axios';
+import { Content, WoodpeckerPlugin, WoodpeckerPluginHeader, WoodpeckerPluginIndexEntry } from './types';
 import * as markdown from './markdown';
 
-const octokit = new Octokit();
-
-async function getDocs(repoName: string): Promise<string | undefined> {
-  try {
-    const docsResult = (
-      await octokit.repos.getContent({
-        owner: 'woodpecker-ci',
-        repo: repoName,
-        path: '/docs.md',
-      })
-    ).data as OctokitComponents['schemas']['content-file'];
-
-    return Buffer.from(docsResult.content, 'base64').toString('ascii');
-  } catch (e) {
-    console.error("Can't fetch docs file for repository", repoName, e);
-  }
-
-  return undefined;
-}
-
 async function loadContent(): Promise<Content> {
-  const repositories = (
-    await octokit.rest.search.repos({
-      // search for repos in woodpecker-ci org with the topic: woodpecker-plugin including forks
-      q: 'org:woodpecker-ci topic:woodpecker-plugin fork:true',
-    })
-  ).data.items;
+  const file = path.join(__dirname, '..', 'plugins.json');
 
-  console.log(repositories.map((r) => r.name));
+  const pluginsIndex = JSON.parse(fs.readFileSync(file).toString()) as { plugins: WoodpeckerPluginIndexEntry[] };
 
   const plugins = (
     await Promise.all(
-      repositories.map(async (repo) => {
-        const docs = await getDocs(repo.name);
-        if (!docs) {
+      pluginsIndex.plugins.map(async (i) => {
+        if (i['// todo']) {
+          return undefined;
+        }
+
+        let docsContent: string;
+        try {
+          const response = await axios(i.docs);
+          docsContent = response.data;
+        } catch (e) {
+          console.error("Can't fetch docs file", i.docs, (e as AxiosError).message);
           return undefined;
         }
 
-        const header = markdown.getHeader<WoodpeckerPluginHeader>(docs);
-        const body = markdown.getContent(docs);
+        const docsHeader = markdown.getHeader<WoodpeckerPluginHeader>(docsContent);
+        const docsBody = markdown.getContent(docsContent);
 
-        const plugin: WoodpeckerPlugin = {
-          name: header?.name || repo.name,
-          repoName: repo.name,
-          url: repo.html_url,
-          icon: header?.icon,
-          description: header?.description,
-          docs: body,
-        };
+        if (!docsHeader.name) {
+          return undefined;
+        }
 
-        return plugin;
+        return <WoodpeckerPlugin>{
+          name: docsHeader.name || i.name,
+          url: docsHeader.url,
+          icon: docsHeader.icon,
+          description: docsHeader.description,
+          docs: docsBody,
+          tags: docsHeader.tags || [],
+          author: docsHeader.author,
+          containerImage: docsHeader.containerImage,
+          containerImageUrl: docsHeader.containerImageUrl,
+          verified: i.verified || false,
+        };
       }),
     )
-  ).filter((plugin) => plugin);
+  ).filter<WoodpeckerPlugin>((plugin): plugin is WoodpeckerPlugin => plugin !== undefined);
 
   return {
     plugins,
@@ -77,11 +66,11 @@ async function contentLoaded({
   const pluginsJsonPath = await createData('plugins.json', JSON.stringify(plugins));
 
   await Promise.all(
-    plugins.map(async (plugin) => {
-      const pluginJsonPath = await createData(`plugin-${plugin.repoName}.json`, JSON.stringify(plugin));
+    plugins.map(async (plugin, i) => {
+      const pluginJsonPath = await createData(`plugin-${i}.json`, JSON.stringify(plugin));
 
       addRoute({
-        path: `/plugins/${plugin.repoName}`,
+        path: `/plugins/${plugin.name}`,
         component: '@theme/WoodpeckerPlugin',
         modules: {
           plugin: pluginJsonPath,
@@ -113,7 +102,7 @@ export default function pluginWoodpeckerPluginsIndex(context: LoadContext, optio
       return path.join(__dirname, '..', 'src', 'theme');
     },
     getPathsToWatch() {
-      return [path.join(__dirname, '..', 'dist', '**', '*.{js,jsx}')];
+      return [path.join(__dirname, '..', 'dist', '**', '*.{js,jsx,css}')];
     },
   };
 }

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

@@ -1,32 +1,24 @@
 import { marked } from 'marked';
+import { parse as YAMLParse } from 'yaml';
 
 const tokens = ['---', '---'];
 const regexHeader = new RegExp('^' + tokens[0] + '([\\s|\\S]*?)' + tokens[1]);
 const regexContent = new RegExp('^ *?\\' + tokens[0] + '[^]*?' + tokens[1] + '*');
 
 export function getHeader<T = any>(data: string): T {
   const header = getRawHeader(data);
-
-  const tmpObj = {};
-  const lines = header.trim().split('\n');
-
-  lines.forEach((line, i) => {
-    var arr = line.trim().split(':');
-    tmpObj[arr.shift()] = arr.join(':').trim();
-  });
-
-  return tmpObj as T;
+  return YAMLParse(header) as T;
 }
 
 export function getRawHeader(data: string): string {
   const header = regexHeader.exec(data);
   if (!header) {
-    new Error("Can't get the header");
+    throw new Error("Can't get the header");
   }
   return header[1];
 }
 
-export function getContent(data): string {
+export function getContent(data: string): string {
   const content = data.replace(regexContent, '').replace(/<!--(.*?)-->/gm, '');
   if (!content) {
     throw new Error("Can't get the content");