chore: add prettify svg code

FajarKim · Oct 24, 2024 · 110116f · 110116f
1 parent 4b92c8a
commit 110116f
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/api/index.ts b/api/index.ts
@@ -107,15 +107,15 @@ async function readmeStats(req: any, res: any): Promise<any> {
     if (uiConfig.Format === "json") {
       res.json(fetchStats);
     } else if (uiConfig.Format === "png") {
-      const svgString = card(fetchStats, uiConfig);
+      const svgString = await card(fetchStats, uiConfig);
       const resvg = new Resvg(svgString, { font: { defaultFontFamily: "Segoe UI" }});
       const pngBuffer = await resvg.render().asPng();
 
       res.setHeader("Content-Type", "image/png");
       res.send(pngBuffer);
     } else {
       res.setHeader("Content-Type", "image/svg+xml");
-      const svg = card(fetchStats, uiConfig);
+      const svg = await card(fetchStats, uiConfig);
       res.send(svg);
     }
   } catch (error: any) {

diff --git a/src/card.ts b/src/card.ts
@@ -1,4 +1,5 @@
 import parseBoolean from "@barudakrosul/parse-boolean";
+import prettier from "prettier";
 import type { GetData } from "./getData";
 import type { UiConfig } from "../api/index";
 import { locales, Locales } from "./translations";
@@ -9,9 +10,9 @@ import icons from "./icons";
  *
  * @param {GetData} data - GitHub user data stats.
  * @param {UiConfig} uiConfig - Configuration for the UI card options.
- * @returns {string} - SVG markup for the GitHub stats card.
+ * @returns {Promise<string>} - SVG markup for the GitHub stats card.
  */
-function card(data: GetData, uiConfig: UiConfig): string {
+async function card(data: GetData, uiConfig: UiConfig): Promise<string> {
   const fallbackLocale = "en";
   const defaultLocale: Locales[keyof Locales] = locales[fallbackLocale];
   const selectLocale: Locales[keyof Locales] = locales[uiConfig.Locale] || defaultLocale;
@@ -150,7 +151,7 @@ function card(data: GetData, uiConfig: UiConfig): string {
     }
   }
 
-  return `
+  const svgData = await prettier.format(`
     <svg width="535" height="${Math.max(220, 45 + cardItemsToShow.length * 25)}"  direction="${direction}" viewBox="0 0 535 ${Math.max(220, 45 + cardItemsToShow.length * 25)}" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
       <style>
         ${animations}
@@ -205,7 +206,7 @@ function card(data: GetData, uiConfig: UiConfig): string {
         <g class="image-profile-animation">
           <defs>
             <pattern id="image" x="0%" y="0%" height="100%" width="100%" viewBox="0 0 512 512">
-              <image x="0%" y="0%" width="512" height="512" href="data:image/jpeg;base64,${data.picture}"></image>
+              <image x="0%" y="0%" width="512" height="512" href="data:image/jpeg;base64,{dataPicture}"></image>
             </pattern>
           </defs>
           <circle cx="${angle.imageXAngle}" cy="${angle.imageYAngle}" r="50" fill="url(#image)" ${hideStroke}/>
@@ -217,7 +218,14 @@ function card(data: GetData, uiConfig: UiConfig): string {
         ${cardItemsSVG}
       </g>
     </svg>
-  `;
+  `, {
+    parser: "html",
+    tabWidth: 2,
+    useTabs: false,
+    printWidth: Infinity,
+  });
+
+  return svgData.replace("{dataPicture}", data.picture);
 }
 
 export default card;