fix template readme img src (#4426)

* fix template readme img src Signed-off-by: jingyang <3161362058@qq.com> * add cdn env Signed-off-by: jingyang <3161362058@qq.com> --------- Signed-off-by: jingyang <3161362058@qq.com>
labring · Dec 17, 2023 · 0af9b05 · 0af9b05
1 parent 84ab88b
commit 0af9b05
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 13 deletions.
diff --git a/frontend/providers/template/src/pages/api/listTemplate.ts b/frontend/providers/template/src/pages/api/listTemplate.ts
@@ -1,19 +1,43 @@
 import { jsonRes } from '@/services/backend/response';
 import { ApiResp } from '@/services/kubernet';
 import { TemplateType } from '@/types/app';
+import { parseGithubUrl } from '@/utils/tools';
 import fs from 'fs';
 import type { NextApiRequest, NextApiResponse } from 'next';
 import path from 'path';
 
+function replaceRawWithCDN(url: string, cdnUrl: string) {
+  let parsedUrl = parseGithubUrl(url);
+  if (!parsedUrl || !cdnUrl) return url;
+
+  if (parsedUrl.hostname === 'raw.githubusercontent.com') {
+    const newUrl = `https://${cdnUrl}/gh/${parsedUrl.organization}/${parsedUrl.repository}@${parsedUrl.branch}/${parsedUrl.remainingPath}`;
+    return newUrl;
+  }
+
+  return url;
+}
+
 export default async function handler(req: NextApiRequest, res: NextApiResponse<ApiResp>) {
   const originalPath = process.cwd();
   const jsonPath = path.resolve(originalPath, 'fast_deploy_template.json');
+  const cdnUrl = process.env.CDN_URL;
 
   try {
     if (fs.existsSync(jsonPath)) {
       const jsonData = fs.readFileSync(jsonPath, 'utf8');
       const _templates: TemplateType[] = JSON.parse(jsonData);
-      const templates = _templates.filter((item) => item?.spec?.draft !== true);
+
+      const templates = _templates
+        .filter((item) => item?.spec?.draft !== true)
+        .map((item) => {
+          if (!!cdnUrl) {
+            item.spec.readme = replaceRawWithCDN(item.spec.readme, cdnUrl);
+            item.spec.icon = replaceRawWithCDN(item.spec.icon, cdnUrl);
+          }
+          return item;
+        });
+
       return jsonRes(res, { data: templates, code: 200 });
     } else {
       return jsonRes(res, { data: [], code: 200 });

diff --git a/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx b/frontend/providers/template/src/pages/deploy/components/ReadMe.tsx
@@ -50,7 +50,9 @@ const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
   // @ts-ignore
   const myRewrite = (node, index, parent) => {
     if (node.tagName === 'img' && !node.properties.src.startsWith('http')) {
-      node.properties.src = `https://raw.githubusercontent.com/${githubOptions?.organization}/${githubOptions?.repository}/${githubOptions?.branch}/${node.properties.src}`;
+      const imgSrc = node.properties.src.replace(/^\.\/|^\//, '');
+
+      node.properties.src = `https://${githubOptions?.hostname}/${githubOptions?.organization}/${githubOptions?.repository}/${githubOptions?.branch}/${imgSrc}`;
     }
   };
 
@@ -61,17 +63,15 @@ const ReadMe = ({ templateDetail }: { templateDetail: TemplateType }) => {
         borderBottom={'1px solid #DEE0E2'}
         color={'#24282C'}
         fontSize={'18px'}
-        fontWeight={500}
-      >
+        fontWeight={500}>
         <MyIcon name={'markdown'} mr={5} w={'24px'} h={'24px'} ml={'42px'} color={'myGray.500'} />
         README.md
       </Box>
       <Box p={'24px'} className={`markdown-body ${styles.customMarkDownBody}`}>
         <ReactMarkdown
           linkTarget={'_blank'}
           rehypePlugins={[rehypeRaw, [rehypeRewrite, { rewrite: myRewrite }]]}
-          remarkPlugins={[remarkGfm, remarkUnwrapImages]}
-        >
+          remarkPlugins={[remarkGfm, remarkUnwrapImages]}>
           {templateReadMe}
         </ReactMarkdown>
       </Box>

diff --git a/frontend/providers/template/src/utils/tools.ts b/frontend/providers/template/src/utils/tools.ts
@@ -194,12 +194,15 @@ export function downLoadBold(content: BlobPart, type: string, fileName: string)
 
 export const parseGithubUrl = (url: string) => {
   if (!url) return null;
-  var urlObj = new URL(url);
-  var pathParts = urlObj.pathname.split('/');
+  let urlObj = new URL(url);
+  let pathParts = urlObj.pathname.split('/');
+
   return {
+    hostname: urlObj.hostname,
     organization: pathParts[1],
     repository: pathParts[2],
-    branch: pathParts[3]
+    branch: pathParts[3],
+    remainingPath: pathParts.slice(4).join('/') + urlObj.search
   };
 };
 

diff --git a/service/license/src/pages/api/cluster/activeCluster.ts b/service/license/src/pages/api/cluster/activeCluster.ts
@@ -70,7 +70,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
 
       const _token = generateLicenseToken({
         type: 'Account',
-        clusterID: clusterId,
+        clusterID: kubeSystemID,
         data: { amount: payment.amount }
       });
 
@@ -98,7 +98,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const handleStandardAndLicense = async () => {
       const _token = generateLicenseToken({
         type: 'Account',
-        clusterID: clusterId,
+        clusterID: kubeSystemID,
         data: { amount: 299 }
       });
       const record: LicenseRecordPayload = {

diff --git a/service/license/src/services/backend/db/payment.ts b/service/license/src/services/backend/db/payment.ts
@@ -1,6 +1,5 @@
-import { LicenseType, PaymentDB, PaymentStatus, TPayMethod } from '@/types';
+import { PaymentDB, PaymentStatus, TPayMethod } from '@/types';
 import { connectToDatabase } from './mongodb';
-import { createLicenseRecord, generateLicenseToken } from './license';
 
 async function connectPaymentCollection() {
   const client = await connectToDatabase();