Merge pull request #123 from sametcodes/develop

Query: github:getUserSponsorList and fixed bug with SVG images

lib/@dsvgui/components/article/index.tsx

@@ -20,6 +20,7 @@ export type IArticle = {
 };
 
 export const Article: React.FC<IArticle> = ({ articles }) => {
+  const document_id = Math.random().toString(36).substr(2, 9);
   return (
     <Document w={398} h={100 * articles.length} padding={10}>
       <g clipPath="url(#clip_borders)">
@@ -120,33 +121,33 @@ export const Article: React.FC<IArticle> = ({ articles }) => {
                   </g>
                 </g>
 
-                <g clipPath={`url(#clip_image_${key})`}>
+                <g clipPath={`url(#clip_image_${document_id}${key})`}>
                   <rect
                     width={500}
                     height={500}
-                    fill={`url(#pattern_${key})`}
+                    fill={`url(#pattern_${document_id}${key})`}
                   />
                 </g>
               </g>
 
               <defs>
-                <clipPath id={`clip_image_${key}`}>
+                <clipPath id={`clip_image_${document_id}${key}`}>
                   <rect width={100} height={100} fill="white" />
                 </clipPath>
                 <pattern
-                  id={`pattern_${key}`}
+                  id={`pattern_${document_id}${key}`}
                   patternContentUnits="objectBoundingBox"
                   width="1"
                   height="1"
                 >
                   <use
                     xmlnsXlink="http://www.w3.org/1999/xlink"
-                    xlinkHref={`#image_${key}`}
+                    xlinkHref={`#image_${document_id}${key}`}
                     transform={`matrix(0.000837427 0 0 0.000814996 -0.172454 0)`}
                   />
                 </pattern>
                 <image
-                  id={`image_${key}`}
+                  id={`image_${document_id}${key}`}
                   transform={`translate(50 -130)`}
                   width={article.thumbnail.width}
                   height={500}

lib/@dsvgui/components/flock/index.tsx

@@ -35,10 +35,13 @@ export const Flock: React.FC<IFlock> = ({
   };
 
   const titleWidth = title
-    ? getTextWidth(title, { fontSize: titleFontSize })
+    ? getTextWidth(title.trim(), { fontSize: titleFontSize })
     : 0;
   const subtitleWidth = subtitle
-    ? getTextWidth(subtitle, { fontSize: subtitleFontSize })
+    ? getTextWidth(subtitle.trim(), {
+        fontSize: subtitleFontSize,
+        ratio: 0.465
+      })
     : 0;
 
   const documentWidth =
@@ -51,35 +54,32 @@ export const Flock: React.FC<IFlock> = ({
   const documentHeight =
     head_start.y + titleFontSize + subtitleFontSize + numRows * gap;
 
+  const document_id = Math.random().toString(36).substr(2, 9);
   return (
     <Document w={documentWidth} h={documentHeight} padding={10}>
       {title && (
         <text
           xmlns="http://www.w3.org/2000/svg"
           className="title"
-          xmlSpace="preserve"
-          fontFamily="Roboto"
+          fontFamily="Manrope"
           fontSize={titleFontSize}
           fontWeight="500"
-          letterSpacing="-0.02em"
         >
           <tspan x={head_start.x} y={head_start.y}>
-            {title}
+            {title.trim()}
           </tspan>
         </text>
       )}
       {subtitle && (
         <text
           xmlns="http://www.w3.org/2000/svg"
           className="subtitle"
-          xmlSpace="preserve"
-          fontFamily="Roboto"
+          fontFamily="Manrope"
           fontSize={subtitleFontSize}
           fontWeight="400"
-          letterSpacing="-0.02em"
         >
           <tspan x={head_start.x} y={head_start.y + titleFontSize}>
-            {subtitle}
+            {subtitle.trim()}
           </tspan>
         </text>
       )}
@@ -94,26 +94,26 @@ export const Flock: React.FC<IFlock> = ({
               cx={box_start.x + gap * col}
               cy={box_start.y + row * gap}
               r="15.5"
-              fill={`url(#member${index})`}
+              fill={`url(#member${document_id}${index})`}
               stroke="#ddd"
             />
             <defs>
               <pattern
                 xmlns="http://www.w3.org/2000/svg"
-                id={`member${index}`}
+                id={`member${document_id}${index}`}
                 patternContentUnits="objectBoundingBox"
                 width="1"
                 height="1"
               >
                 <use
                   xmlnsXlink="http://www.w3.org/1999/xlink"
-                  xlinkHref={`#image${index}`}
+                  xlinkHref={`#image${document_id}${index}`}
                   transform="scale(0.00217391)"
                 />
               </pattern>
               <image
                 xmlns="http://www.w3.org/2000/svg"
-                id={`image${index}`}
+                id={`image${document_id}${index}`}
                 width="460"
                 height="460"
                 xmlnsXlink="http://www.w3.org/1999/xlink"

lib/@dsvgui/document/style.tsx

@@ -36,17 +36,19 @@ export const Style: React.FC = () => {
             text{ font-family: 'Manrope', 'Open Sans', 'Segoe UI', Ubuntu, 'Helvetica Neue', Sans-Serif; fill: #32373e; }
             text.title{ fill: #32373e; }
             text.subtitle{ fill: #9c9c9c; }
-            .dsvgui-container{
-              fill: #fbfbfb;
-            }
+            .dsvgui-container{ fill: #fbfbfb; }
             stop[offset='0']{ stop-color: #fbfbfb; }
             stop[offset='1']{ stop-color: #fbfbfb; }
+            .border{ stroke: #ddd; }
             @media (prefers-color-scheme: dark) {
               .dsvgui-container { fill: #32373e }
               stop[offset='0']{ stop-color: #32373e; }
               stop[offset='1']{ stop-color: #32373e; }
               text { fill: #eeeeee }
               .icon{ fill: #eeeeee }
+              text.title{ fill: #fff; }
+              text.subtitle{ fill: #9c9c9c; }
+              .border{ stroke: #555; }
             }
         `}</style>
     </defs>

platforms/github/query/index.ts

@@ -202,3 +202,43 @@ export const getContributors: QueryService = async (connection, config) => {
   const response = await request(query, connection);
   return response;
 };
+
+/**
+ * @name getUserSponsorList
+ * @title Get list of sponsors of a user
+ * @query_type Public
+ * @cache_time 3600
+ * @description Get the list of contributors of a repository. Only the most contributed 100 contributors are returned.
+ */
+export const getUserSponsorList: QueryService = async (connection, config) => {
+  const { queryConfig } = config as any;
+  const { username } = queryConfig as { username: string };
+
+  const query = `{
+    user(login: "${username}") {
+      sponsorshipsAsMaintainer(first: 100) {
+        totalCount
+        nodes {
+          sponsorEntity {
+            ... on User {
+              login
+              name
+              avatarUrl
+            }
+            ... on Organization {
+              login
+              name
+              avatarUrl
+            }
+          }
+        }
+      }
+    }
+  }`;
+
+  const response = await request(query, connection);
+  if (response.data.user.sponsorshipsAsMaintainer.totalCount === 0) {
+    throw new Error("You must have at least one sponsor to use this query.");
+  }
+  return response;
+};

platforms/github/query/validations.ts

@@ -66,3 +66,13 @@ export const getContributors = object({
 })
   .required()
   .noUnknown(true);
+
+export const getUserSponsorList = object({
+  username: string().required().meta({
+    label: "Username",
+    placeholder: "Username",
+    description: "The username of the profile, do not include the @ symbol.",
+  }),
+})
+  .required()
+  .noUnknown(true);

platforms/github/view/index.tsx

@@ -351,3 +351,47 @@ export const getContributors: ViewComponent = async (result, config) => {
     />
   );
 };
+
+export const getUserSponsorList: ViewComponent = async (result, config) => {
+  const { title, subtitle, items_per_row } = config.viewConfig as any;
+
+  const { nodes: sponsors } = result.data.user.sponsorshipsAsMaintainer;
+
+  const promise_thumbnails: IFlock["members"] = sponsors.map(
+    async (sponsor: any, key: number) => {
+      const url = new URL(sponsor.sponsorEntity.avatarUrl);
+      let params = qs.parse(url.search, { ignoreQueryPrefix: true });
+      url.search = qs.stringify({ ...params, s: "128" });
+
+      const response = await fetch(url.toString());
+      const arrayBuffer = await response.arrayBuffer();
+
+      const buffer = Buffer.from(arrayBuffer);
+      const imageData = getImageSize(buffer);
+
+      return {
+        value: buffer.toString("base64"),
+        width: imageData.width,
+        height: imageData.height,
+      };
+    }
+  );
+
+  const thumbnails = await Promise.all(promise_thumbnails);
+
+  const members: IFlock["members"] = sponsors.map(
+    (sponsor: any, key: number) => ({
+      image: thumbnails[key],
+      caption: sponsor.sponsorEntity.login,
+    })
+  );
+
+  return (
+    <Flock
+      title={title}
+      subtitle={subtitle}
+      items_per_row={items_per_row}
+      members={members}
+    />
+  );
+};

platforms/github/view/sample.ts

@@ -1123,7 +1123,68 @@ export const getContributors = {
   config: {
     viewConfig: {
       title: "Our contributors",
-      subtitle: "We are grateful to all of our contributors",
+      subtitle: "We are grateful.",
+      items_per_row: 20,
+    },
+  },
+};
+
+export const getUserSponsorList = {
+  result: {
+    data: {
+      user: {
+        sponsorshipsAsMaintainer: {
+          totalCount: 5,
+          nodes: [
+            {
+              sponsorEntity: {
+                login: "eserozvataf",
+                name: "Eser Ozvataf",
+                avatarUrl:
+                  "https://avatars.githubusercontent.com/u/866558?u=b22a39f91f830670029edf4a75a4917d167e3477&v=4",
+              },
+            },
+            {
+              sponsorEntity: {
+                login: "MrPeker",
+                name: "Mehmet Ali Peker",
+                avatarUrl:
+                  "https://avatars.githubusercontent.com/u/23459375?u=a134e27718baa73c41da5534b6d02b10bc88065a&v=4",
+              },
+            },
+            {
+              sponsorEntity: {
+                login: "ImYrS",
+                name: "秋酿",
+                avatarUrl:
+                  "https://avatars.githubusercontent.com/u/44287632?u=9685045ebfa4354c434053ee5e527b106ee59d34&v=4",
+              },
+            },
+            {
+              sponsorEntity: {
+                login: "LydiaMorris",
+                name: "XavierMTest",
+                avatarUrl:
+                  "https://avatars.githubusercontent.com/u/50951276?v=4",
+              },
+            },
+            {
+              sponsorEntity: {
+                login: "frankenslime",
+                name: "Garret",
+                avatarUrl:
+                  "https://avatars.githubusercontent.com/u/124593259?v=4",
+              },
+            },
+          ],
+        },
+      },
+    },
+  },
+  config: {
+    viewConfig: {
+      title: "Sponsors",
+      subtitle: "Thank you for sponsoring me.",
       items_per_row: 20,
     },
   },

platforms/github/view/validations.ts

@@ -27,3 +27,23 @@ export const getContributors = object({
 })
   .required()
   .noUnknown(true);
+
+export const getUserSponsorList = object({
+  title: string().meta({
+    label: "Title",
+    placeholder: "Title",
+    description: "Title of the widget",
+  }),
+  subtitle: string().meta({
+    label: "Subtitle",
+    placeholder: "Subtitle",
+    description: "Subtitle of the widget",
+  }),
+  items_per_row: number().min(5).max(25).default(20).meta({
+    label: "Items per row",
+    placeholder: "Items per row",
+    description: "Number of items per row. Default is 20.",
+  }),
+})
+  .required()
+  .noUnknown(true);