feat: added hide_title option (#88)

api/index.js

@@ -7,6 +7,7 @@ module.exports = async (req, res) => {
   const {
     username,
     hide,
+    hide_title,
     hide_border,
     hide_rank,
     show_icons,
@@ -31,6 +32,7 @@ module.exports = async (req, res) => {
     renderStatsCard(stats, {
       hide: JSON.parse(hide || "[]"),
       show_icons: parseBoolean(show_icons),
+      hide_title: parseBoolean(hide_title),
       hide_border: parseBoolean(hide_border),
       hide_rank: parseBoolean(hide_rank),
       line_height,

readme.md

@@ -63,25 +63,24 @@ To enable icons, you can pass `show_icons=true` in the query param, like so:
 ![Anurag's github stats](https://github-readme-stats.vercel.app/api?username=anuraghazra&show_icons=true)
 ```
 
-Other options:
-
-- `&hide_border=true` hide the border box if you don't like it :D
-- `&line_height=30` control the line-height between text
-- `&hide_rank=true` hides the ranking
-
 ### Customization
 
 You can customize the appearance of your `Stats Card` or `Repo Card` however you want with URL params.
 
 Customization Options:
 
-| Option      | type      | Stats Card (default)   | Repo Card (default)    |
+| Option      | type      | description                          | Stats Card (default)   | Repo Card (default)    |
-| ----------- | --------- | ---------------------- | ---------------------- |
+| ----------- | --------- | ------------------------------------ | ---------------------- | ---------------------- |
-| title_color | hex color | 2F80ED                 | 2F80ED                 |
+| title_color | hex color | title color                          | #2f80ed                | #2f80ed                |
-| text_color  | hex color | 333                    | 333                    |
+| text_color  | hex color | body color                           | #333                   | #333                   |
-| icon_color  | hex color | 4C71F2                 | 586069                 |
+| icon_color  | hex color | icon color                           | #4c71f2                | #586069                |
-| bg_color    | hex color | FFFEFE                 | FFFEFE                 |
+| bg_color    | hex color | card bg color                        | rgba(255, 255, 255, 0) | rgba(255, 255, 255, 0) |
-| show_owner  | boolean   | not applicable         | false                  |
+| line_height | number    | control the line-height between text | 30                     | N/A                    |
+| hide_rank   | boolean   | hides the ranking                    | false                  | N/A                    |
+| hide_title  | boolean   | hides the stats title                | false                  | N/A                    |
+| hide_border | boolean   | hides the stats card border          | false                  | N/A                    |
+| show_owner  | boolean   | shows owner name in repo card        | N/A                    | false                  |
+| show_icons  | boolean   | shows icons                          | false                  | N/A                    |
 
 - You can also customize the cards to be compatible with dark mode
 
@@ -176,7 +175,6 @@ NOTE: Since [#58](https://github.com/anuraghazra/github-readme-stats/pull/58) we
 1. Click deploy, and you're good to go. See your domains to use the API!
 </details>
 
-
 ## :sparkling_heart: Support the project
 
 I open-source almost everything I can, and I try to reply to everyone needing help using these projects. Obviously,
@@ -190,7 +188,7 @@ However, if you are using this project and happy with it or just want to encoura
 
 Thanks! :heart:
 
---------
+---
 
 Contributions are welcomed! <3
 

src/renderStatsCard.js

@@ -47,6 +47,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const {
     hide = [],
     show_icons = false,
+    hide_title = false,
     hide_border = false,
     hide_rank = false,
     line_height = 25,
@@ -63,6 +64,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
   const textColor = fallbackColor(text_color, "#333");
   const bgColor = fallbackColor(bg_color, "#FFFEFE");
 
+  // Meta data for creating text nodes with createTextNode function
   const STATS = {
     stars: {
       icon: icons.star,
@@ -96,6 +98,7 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
     },
   };
 
+  // filter out hidden stats defined by user & create the text nodes
   const statItems = Object.keys(STATS)
     .filter((key) => !hide.includes(key))
     .map((key, index) =>
@@ -110,12 +113,31 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
 
   // Calculate the card height depending on how many items there are
   // but if rank circle is visible clamp the minimum height to `150`
-  const height = Math.max(
+  let height = Math.max(
     45 + (statItems.length + 1) * lheight,
     hide_rank ? 0 : 150
   );
 
-  const border = `
+  // the better user's score the the rank will be closer to zero so
+  // subtracting 100 to get the progress in 100%
+  const progress = 100 - rank.score;
+
+  const styles = getStyles({
+    titleColor,
+    textColor,
+    iconColor,
+    show_icons,
+    progress,
+  });
+
+  // Conditionally rendered elements
+  const title = hide_title
+    ? ""
+    : `<text x="25" y="35" class="header">${name}'s GitHub Stats</text>`;
+
+  const border = hide_border
+    ? ""
+    : `
     <rect 
       data-testid="card-border"
       x="0.5"
@@ -147,17 +169,9 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         </text>
       </g>`;
 
-  // the better user's score the the rank will be closer to zero so
+  if (hide_title) {
-  // subtracting 100 to get the progress in 100%
+    height -= 30;
-  let progress = 100 - rank.score;
+  }
-
-  const styles = getStyles({
-    titleColor,
-    textColor,
-    iconColor,
-    show_icons,
-    progress,
-  });
 
   return `
     <svg width="495" height="${height}" viewBox="0 0 495 ${height}" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -165,15 +179,18 @@ const renderStatsCard = (stats = {}, options = { hide: [] }) => {
         ${styles}
       </style>
       
-      ${hide_border ? "" : border}
+      ${border}
+      ${title}
 
-      ${rankCircle}
+      <g data-testid="card-body-content" transform="translate(0, ${
+        hide_title ? -30 : 0
+      })">
+        ${rankCircle}
 
-      <text x="25" y="35" class="header">${name}'s GitHub Stats</text>
+        <svg x="0" y="45">
-
+          ${statItems.toString().replace(/\,/gm, "")}
-      <svg x="0" y="45">
+        </svg>
-        ${statItems.toString().replace(/\,/gm, "")}
+      </g>
-      </svg>
     </svg>
   `;
 };

tests/renderStatsCard.test.js

@@ -112,9 +112,39 @@ describe("Test renderStatsCard", () => {
     );
   });
 
+  it("should hide the title", () => {
+    document.body.innerHTML = renderStatsCard(stats, {
+      hide_title: true,
+    });
+
+    expect(document.getElementsByClassName("header")[0]).toBeUndefined();
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "165"
+    );
+    expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
+      "transform",
+      "translate(0, -30)"
+    );
+  });
+
+  it("should not hide the title", () => {
+    document.body.innerHTML = renderStatsCard(stats, {});
+
+    expect(document.getElementsByClassName("header")[0]).toBeDefined();
+    expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
+      "height",
+      "195"
+    );
+    expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
+      "transform",
+      "translate(0, 0)"
+    );
+  });
+
   it("should render icons correctly", () => {
     document.body.innerHTML = renderStatsCard(stats, {
-      show_icons: "true",
+      show_icons: true,
     });
 
     expect(queryAllByTestId(document.body, "icon")[0]).toBeDefined();