[add]: bmc widget

README.md

@@ -92,8 +92,9 @@ npm start
 </p>
 
 <p align="left">
-  <a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator" width="180"/>
+  <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
   </a>
+  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
 </p>
 
 <hr>

gatsby-config.js

@@ -66,6 +66,7 @@ module.exports = {
         tailwind: true,
       }
     },
+    `gatsby-plugin-twitter`
   ],
   // this (optional) plugin enables Progressive Web App + Offline functionality
   // To learn more, visit: https://gatsby.dev/offline

package-lock.json

@@ -7400,6 +7400,12 @@
         "pend": "~1.2.0"
       }
     },
+    "fetch-retry": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/fetch-retry/-/fetch-retry-4.0.1.tgz",
+      "integrity": "sha512-EhIeVBkq9T2z1ANDr2kmLujoHOTdLvR9t/nzLSdX4PMIFinLyyZFYX9T6Fb3LrbiHQEhujq1O7ElsqjuqYIsEA==",
+      "dev": true
+    },
     "figgy-pudding": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz",
@@ -8222,6 +8228,15 @@
         }
       }
     },
+    "gatsby-plugin-twitter": {
+      "version": "2.3.10",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-twitter/-/gatsby-plugin-twitter-2.3.10.tgz",
+      "integrity": "sha512-WQzjGpeKCdxujzAWE2yFOKaI494J/Qb6vhDdLvtevOAZVXSaMdTSfwSSUr17jsu8TV5s47fasKox+h/0uRlJUw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.3"
+      }
+    },
     "gatsby-plugin-typescript": {
       "version": "2.4.8",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-typescript/-/gatsby-plugin-typescript-2.4.8.tgz",
@@ -8471,6 +8486,52 @@
         }
       }
     },
+    "gatsby-remark-embedder": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-embedder/-/gatsby-remark-embedder-3.0.0.tgz",
+      "integrity": "sha512-Do0NA09+ehs8mycfGTx0VbA6Ti4ALIILCMLax/zbspXVFaRfgbOoB/CgIEW9Raai98oMpiJtpAr0T6UR76AImA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.10.5",
+        "fetch-retry": "^4.0.1",
+        "node-fetch": "^2.6.0",
+        "unist-util-visit": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.11.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
+          "dev": true,
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "node-fetch": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.0.tgz",
+          "integrity": "sha512-8dG4H5ujfvFiqDmVu9fQ5bOHUC15JMjMY/Zumv26oOvvVJjM67KF8koCWIabKQ1GJIa9r2mMZscBq/TbdOcmNA==",
+          "dev": true
+        },
+        "unist-util-is": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.2.tgz",
+          "integrity": "sha512-Ofx8uf6haexJwI1gxWMGg6I/dLnF2yE+KibhD3/diOqY2TinLcqHXCV6OI5gFVn3xQqDH+u0M625pfKwIwgBKQ==",
+          "dev": true
+        },
+        "unist-util-visit": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz",
+          "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==",
+          "dev": true,
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "unist-util-is": "^4.0.0",
+            "unist-util-visit-parents": "^3.0.0"
+          }
+        }
+      }
+    },
     "gatsby-remark-prismjs": {
       "version": "3.5.10",
       "resolved": "https://registry.npmjs.org/gatsby-remark-prismjs/-/gatsby-remark-prismjs-3.5.10.tgz",

package.json

@@ -27,6 +27,8 @@
   "devDependencies": {
     "gatsby-plugin-postcss": "^2.3.11",
     "gatsby-plugin-purgecss": "^5.0.0",
+    "gatsby-plugin-twitter": "^2.3.10",
+    "gatsby-remark-embedder": "^3.0.0",
     "gh-pages": "^3.1.0",
     "prettier": "2.0.5",
     "tailwindcss": "^1.7.6"

src/html.js

@@ -0,0 +1,37 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+export default function HTML(props) {
+  return (
+    <html {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        {props.headComponents}
+        <script data-name="BMC-Widget" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="rahuldkjain" data-description="Support me on Buy me a coffee!" data-message="Thank you for visiting. You can now buy me a coffee!" data-color="#FF813F" data-position="" data-x_margin="18" data-y_margin="18"></script>
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}

src/markdown-pages/support.md

@@ -10,25 +10,57 @@ title: "💵 Support OSS"
 
 You can come forward to support the developers by making small donations. You will never know what this support mean to them. If you find the tool really helpful, then it will be very grateful to support the tool 🙇.
 
-<p align="center">
-<a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
-</p>
-<p align="center">
-<a href="https://ko-fi.com/A0A81XXSX"><img src="https://www.ko-fi.com/img/githubbutton_sm.svg" alt="sponsor github profile readme generator"/>
+<p align="left">
+  <a href="https://www.paypal.me/rahuldkjain"><img src="https://ionicabizau.github.io/badges/paypal.svg" alt="sponsor github profile readme generator"/>
+  </a>
+
+  <a href='https://ko-fi.com/A0A81XXSX' target='_blank'><img height='23' width="100" src='https://cdn.ko-fi.com/cdn/kofi3.png?v=2' alt='Buy Coffee for rahuldkjain' />
+  </a>
+  
+  <a href="https://www.buymeacoffee.com/rahuldkjain" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" height="23" width="100" style="border-radius:2px" />
   </a>
 </p>
 
-## Social Support
-Let the world know how you feel using this tool. Share with others on twitter.
+## Social Support 🤝
 <a href="https://twitter.com/intent/tweet?text=Wow:&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator">
 <img src="https://img.shields.io/twitter/url?style=social&url=https%3A%2F%2Frahuldkjain.github.io%2Fgithub-profile-readme-generator" alt="tweet github profile readme generator"/>
 </a>
 
-<blockquote class="twitter-tweet"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+Let the world know how you feel using this tool. Share with others on twitter.
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">&quot;How to Use Github&#39;s README Feature to Track Your Stats in One Click&quot; by <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a> <a href="https://t.co/3dxv0G2sBJ">https://t.co/3dxv0G2sBJ</a> <a href="https://twitter.com/hashtag/repositoriesongithub?src=hash&amp;ref_src=twsrc%5Etfw">#repositoriesongithub</a> <a href="https://twitter.com/hashtag/react?src=hash&amp;ref_src=twsrc%5Etfw">#react</a></p>&mdash; Hacker Noon (@hackernoon) <a href="https://twitter.com/hackernoon/status/1301615959107678215?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is a great tool to generate customized GitHub profile README: <a href="https://t.co/dTpnz0iTP2">https://t.co/dTpnz0iTP2</a> <a href="https://t.co/WcEkK2DKz0">pic.twitter.com/WcEkK2DKz0</a></p>&mdash; Alisher Abdulkhaev (@alisher_ai) <a href="https://twitter.com/alisher_ai/status/1298858350885576704?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">github profile readme generator: <a href="https://t.co/fQDUBdE0jz">https://t.co/fQDUBdE0jz</a></p>&mdash; merve (@mervenoyann) <a href="https://twitter.com/mervenoyann/status/1301436574475976706?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This is super cool 😎 A Github Profile README Generator.<br><br>👉 Link: <a href="https://t.co/KHC4M9vSzw">https://t.co/KHC4M9vSzw</a> <a href="https://t.co/JmrQ3P6Wkp">pic.twitter.com/JmrQ3P6Wkp</a></p>&mdash; Dat Tran (@datitran) <a href="https://twitter.com/datitran/status/1298947006371713024?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
 
 
-https://twitter.com/hackernoon/status/1301615959107678215
+<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Nice GitHub Profile generator, for the relatively new account README:<a href="https://t.co/YG3O0Pqy3M">https://t.co/YG3O0Pqy3M</a><a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a></p>&mdash; Steve &quot;ardalis&quot; Smith (@ardalis) <a href="https://twitter.com/ardalis/status/1300953474868314118?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote> 
 
+<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr">Github Profile Readme Generator <a href="https://t.co/p20HK5gGHF">https://t.co/p20HK5gGHF</a> <a href="https://t.co/nFyhrO3XjN">pic.twitter.com/nFyhrO3XjN</a></p>&mdash; Speckyboy (@speckyboy) <a href="https://twitter.com/speckyboy/status/1301233718405869568?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">I finally updated my github readme <a href="https://t.co/8rcyuW1UTM">https://t.co/8rcyuW1UTM</a> <br>thanks to this generator : <a href="https://t.co/c0GHc4n1S6">https://t.co/c0GHc4n1S6</a> plus some changes.<br><br>Thank you <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> for this great generator, saved me a lot of time.</p>&mdash; Abir El Halimi (@abiir07) <a href="https://twitter.com/abiir07/status/1299013498178076673?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">This morning I set up my <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> profile readme, really amazing what great tools the users have already created to make this easier.<br><br>Big shout out to <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@rahuldkjain</a>!<a href="https://t.co/bL0XwfJ78B">https://t.co/bL0XwfJ78B</a> <a href="https://t.co/xBLVFOJegt">pic.twitter.com/xBLVFOJegt</a></p>&mdash; Max Schmitt (@maxibanki) <a href="https://twitter.com/maxibanki/status/1296408691273498624?ref_src=twsrc%5Etfw">August 20, 2020</a></blockquote>
+
+<blockquote class="twitter-tweet" data-dnt="true"><p lang="en" dir="ltr">Special thanks to everyone&#39;s repos that are featured in my latest video:<a href="https://twitter.com/bathtype?ref_src=twsrc%5Etfw">@bathtype</a><a href="https://twitter.com/anuraghazru?ref_src=twsrc%5Etfw">@anuraghazru</a><a href="https://twitter.com/Shields_io?ref_src=twsrc%5Etfw">@Shields_io</a><a href="https://twitter.com/AlexandreSanlim?ref_src=twsrc%5Etfw">@AlexandreSanlim</a><a href="https://twitter.com/Ileriayooo?ref_src=twsrc%5Etfw">@Ileriayooo</a><a href="https://twitter.com/james_madhacks?ref_src=twsrc%5Etfw">@james_madhacks</a><a href="https://twitter.com/misteranmol?ref_src=twsrc%5Etfw">@misteranmol</a><a href="https://twitter.com/n_moore?ref_src=twsrc%5Etfw">@n_moore</a><a href="https://twitter.com/novatorem?ref_src=twsrc%5Etfw">@novatorem</a><a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a><a href="https://twitter.com/geeky_abhiz?ref_src=twsrc%5Etfw">@geeky_abhiz</a><br><br>These developers are making your GitHub Profiles look awesome! 💪</p>&mdash; 𝚌𝚘𝚍𝚎𝚂𝚃𝙰𝙲𝙺𝚛 ⚡👨‍💻 (@codeSTACKr) <a href="https://twitter.com/codeSTACKr/status/1294618297086943232?ref_src=twsrc%5Etfw">August 15, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
+
+
+<blockquote class="twitter-tweet data-dnt="true"" data-theme="light"><p lang="tr" dir="ltr">GitHub Profile Readme Generator ile GitHub profilinizi profesyonelleştirin! <a href="https://t.co/iaZAdGtf9t">https://t.co/iaZAdGtf9t</a></p>&mdash; Yazılım Karavanı (@yazilimkaravani) <a href="https://twitter.com/yazilimkaravani/status/1301467413591007232?ref_src=twsrc%5Etfw">September 3, 2020</a></blockquote>
+
+
+<blockquote class="twitter-tweet data-dnt="true""><p lang="ro" dir="ltr"><a href="https://twitter.com/hashtag/CSS?src=hash&amp;ref_src=twsrc%5Etfw">#CSS</a> <a href="https://twitter.com/hashtag/Automated?src=hash&amp;ref_src=twsrc%5Etfw">#Automated</a> | Github Profile README Generator <a href="https://t.co/CTcrnDuWov">https://t.co/CTcrnDuWov</a></p>&mdash; Yohan J. Rodríguez (@hasdid) <a href="https://twitter.com/hasdid/status/1299070955646586882?ref_src=twsrc%5Etfw">August 27, 2020</a></blockquote>
+
+
+
+<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">If you are unsure or need to spice up your GitHub README page. Check out this cool Github profile readme Generator by ⁦<a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a>⁩. <a href="https://twitter.com/hashtag/rstats?src=hash&amp;ref_src=twsrc%5Etfw">#rstats</a> <a href="https://twitter.com/hashtag/github?src=hash&amp;ref_src=twsrc%5Etfw">#github</a> ⁦<a href="https://twitter.com/github?ref_src=twsrc%5Etfw">@github</a>⁩ <a href="https://twitter.com/hashtag/AcademicTwitter?src=hash&amp;ref_src=twsrc%5Etfw">#AcademicTwitter</a> <a href="https://t.co/OMyYJJYmxR">https://t.co/OMyYJJYmxR</a></p>&mdash; Seevasant Indran (@zeeva85) <a href="https://twitter.com/zeeva85/status/1301213068060438528?ref_src=twsrc%5Etfw">September 2, 2020</a></blockquote>
+
+
+<blockquote class="twitter-tweet data-dnt="true""><p lang="en" dir="ltr">Github Profile README Generator<br>By <a href="https://twitter.com/Rahuldkjain?ref_src=twsrc%5Etfw">@Rahuldkjain</a> <br><br>Pretty way to create GitHub profile README with addons.<br><br>Check out on <a href="https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw">@ProductHunt</a> <a href="https://t.co/qgxhLmUgV2">https://t.co/qgxhLmUgV2</a></p>&mdash; Raj Maurya (@codemaurya) <a href="https://twitter.com/codemaurya/status/1299700992577957888?ref_src=twsrc%5Etfw">August 29, 2020</a></blockquote>
+
+<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> 
 
 ## Sponsors 🙇
 - [Scott C Wilson](https://github.com/scottcwilson) donated the first ever grant to this tool. A big thanks to him.

src/styles/tailwind.css

@@ -81,7 +81,7 @@
 }
 
 .markdown pre code {
-  @apply block bg-transparent p-0 overflow-visible rounded-none;
+  @apply block p-0 rounded-none;
 }
 
 .markdown ul {

src/templates/blogTemplate.js

@@ -2,6 +2,7 @@ import React from "react"
 import { graphql } from "gatsby"
 // import Header from '../components/header'
 // import Footer from '../components/footer'
+import {Helmet} from "react-helmet";
 import Layout from "../components/layout";
 
 export default function Template({
@@ -12,6 +13,11 @@ export default function Template({
     return (
         <Layout>
             {/* <Header heading="GitHub Profile README Generator" /> */}
+            <Helmet>
+              <meta charSet="utf-8" />
+              <title>{frontmatter.title}</title>
+              <link rel="canonical" href={`https://rahuldkjain.github.io/gh-profile-readme-generator`} />
+            </Helmet>
             <div className="m-4 sm:p-10">
                 <div className="blog-post">
                     <h1 className="text-4xl font-bold">{frontmatter.title}</h1>