docs(style): add github star counter to navbar (#2015)

* docs(style): add github star counter to navbar

* chore: cleanup kFormatter logic

package.json

@@ -62,8 +62,8 @@
   "license": "ISC",
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@next-auth/prisma-legacy-adapter": "canary",
-    "@next-auth/typeorm-legacy-adapter": "canary",
+    "@next-auth/prisma-legacy-adapter": "0.0.1-canary.127",
+    "@next-auth/typeorm-legacy-adapter": "0.0.2-canary.129",
     "futoin-hkdf": "^1.3.2",
     "jose": "^1.27.2",
     "jsonwebtoken": "^8.5.1",

src/providers/twitter.js

@@ -15,7 +15,7 @@ export default function Twitter(options) {
         id: profile.id_str,
         name: profile.name,
         email: profile.email,
-        image: profile.profile_image_url_https.replace(/_normal\.jpg$/, ".jpg"),
+        image: profile.profile_image_url_https.replace(/_normal\.(jpg|png|gif)$/, ".$1"),
       }
     },
     ...options,

www/docusaurus.config.js

@@ -1,52 +1,52 @@
 module.exports = {
-  title: 'NextAuth.js',
-  tagline: 'Authentication for Next.js',
-  url: 'https://next-auth.js.org',
-  baseUrl: '/',
-  favicon: 'img/favicon.ico',
-  organizationName: 'nextauthjs',
-  projectName: 'next-auth',
+  title: "NextAuth.js",
+  tagline: "Authentication for Next.js",
+  url: "https://next-auth.js.org",
+  baseUrl: "/",
+  favicon: "img/favicon.ico",
+  organizationName: "nextauthjs",
+  projectName: "next-auth",
   themeConfig: {
     sidebarCollapsible: true,
     prism: {
-      theme: require('prism-react-renderer/themes/vsDark')
+      theme: require("prism-react-renderer/themes/vsDark"),
     },
     navbar: {
-      title: 'NextAuth.js',
+      title: "NextAuth.js",
       logo: {
-        alt: 'NextAuth Logo',
-        src: 'img/logo/logo-xs.png'
+        alt: "NextAuth Logo",
+        src: "img/logo/logo-xs.png",
       },
       items: [
         {
-          to: '/getting-started/introduction',
-          activeBasePath: 'docs',
-          label: 'Documentation',
-          position: 'left'
+          to: "/getting-started/introduction",
+          activeBasePath: "docs",
+          label: "Documentation",
+          position: "left",
         },
         {
-          to: '/tutorials',
-          activeBasePath: 'docs',
-          label: 'Tutorials',
-          position: 'left'
+          to: "/tutorials",
+          activeBasePath: "docs",
+          label: "Tutorials",
+          position: "left",
         },
         {
-          to: '/faq',
-          activeBasePath: 'docs',
-          label: 'FAQ',
-          position: 'left'
+          to: "/faq",
+          activeBasePath: "docs",
+          label: "FAQ",
+          position: "left",
         },
         {
-          href: 'https://www.npmjs.com/package/next-auth',
-          label: 'npm',
-          position: 'right'
+          href: "https://www.npmjs.com/package/next-auth",
+          label: "npm",
+          position: "right",
         },
         {
-          href: 'https://github.com/nextauthjs/next-auth',
-          label: 'GitHub',
-          position: 'right'
-        }
-      ]
+          href: "https://github.com/nextauthjs/next-auth",
+          label: "GitHub",
+          position: "right",
+        },
+      ],
     },
     // announcementBar: {
     //   id: 'release-candiate-announcement',
@@ -57,45 +57,45 @@ module.exports = {
     footer: {
       links: [
         {
-          title: 'About NextAuth.js',
+          title: "About NextAuth.js",
           items: [
             {
-              label: 'Introduction',
-              to: '/getting-started/introduction'
+              label: "Introduction",
+              to: "/getting-started/introduction",
             },
             {
-              label: 'Contributors',
-              to: '/contributors'
+              label: "Contributors",
+              to: "/contributors",
             },
             {
-              label: 'Canary documentation',
-              to: 'https://next-auth-git-canary.nextauthjs.vercel.app/'
-            }
-          ]
+              label: "Canary documentation",
+              to: "https://next-auth-git-canary.nextauthjs.vercel.app/",
+            },
+          ],
         },
         {
-          title: 'Download',
+          title: "Download",
           items: [
             {
-              label: 'GitHub',
-              to: 'https://github.com/nextauthjs/next-auth'
+              label: "GitHub",
+              to: "https://github.com/nextauthjs/next-auth",
             },
             {
-              label: 'NPM',
-              to: 'https://www.npmjs.com/package/next-auth'
-            }
-          ]
+              label: "NPM",
+              to: "https://www.npmjs.com/package/next-auth",
+            },
+          ],
         },
         {
-          title: 'Acknowledgements',
+          title: "Acknowledgements",
           items: [
             {
-              label: 'Docusaurus',
-              to: 'https://v2.docusaurus.io/'
+              label: "Docusaurus",
+              to: "https://v2.docusaurus.io/",
             },
             {
-              label: 'Images by unDraw',
-              to: 'https://undraw.co/'
+              label: "Images by unDraw",
+              to: "https://undraw.co/",
             },
             {
               html: `
@@ -106,28 +106,28 @@ module.exports = {
                 height="32"
                 src="https://raw.githubusercontent.com/nextauthjs/next-auth/canary/www/static/img/powered-by-vercel.svg"
               />
-            </a>`
-            }
-          ]
-        }
+            </a>`,
+            },
+          ],
+        },
       ],
-      copyright: 'NextAuth.js &copy; Iain Collins 2021'
-    }
+      copyright: "NextAuth.js &copy; Iain Collins 2021",
+    },
   },
   presets: [
     [
-      '@docusaurus/preset-classic',
+      "@docusaurus/preset-classic",
       {
         docs: {
-          routeBasePath: '/',
-          sidebarPath: require.resolve('./sidebars.js'),
-          editUrl: 'https://github.com/nextauthjs/next-auth/edit/main/www'
+          routeBasePath: "/",
+          sidebarPath: require.resolve("./sidebars.js"),
+          editUrl: "https://github.com/nextauthjs/next-auth/edit/main/www",
         },
         theme: {
-          customCss: require.resolve('./src/css/index.css')
-        }
-      }
-    ]
+          customCss: require.resolve("./src/css/index.css"),
+        },
+      },
+    ],
   ],
-  plugins: ['docusaurus-lunr-search']
+  plugins: ["docusaurus-lunr-search"],
 }

www/src/css/index.css

@@ -185,7 +185,7 @@ html[data-theme="dark"] hr {
 
 .navbar__item.navbar__link[href*="github"],
 .navbar__item.navbar__link[href*="npmjs"] {
-  padding: 0 1rem 0 0;
+  padding: 0 1.5rem 0 0;
   display: flex;
   font-size: 0;
 }

www/src/theme/SearchBar/index.js

@@ -12,6 +12,10 @@ import { useHistory } from "@docusaurus/router"
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 import "./styles.css"
 
+const kFormatter = (num) => {
+  return Math.sign(num) * (Math.abs(num) / 1000).toFixed(1) + "k"
+}
+
 let loaded = false
 const Search = (props) => {
   const initialized = useRef(false)
@@ -84,6 +88,17 @@ const Search = (props) => {
         searchBarRef.current.focus()
       }
     })
+    fetch("https://api.github.com/repos/nextauthjs/next-auth")
+      .then((res) => res.json())
+      .then((data) => {
+        const navLinks = document.getElementsByClassName(
+          "navbar__item navbar__link"
+        )
+        const githubStat = document.createElement("span")
+        githubStat.innerHTML = kFormatter(data.stargazers_count)
+        githubStat.className = "github-counter"
+        navLinks[4].appendChild(githubStat)
+      })
     return () => document.removeEventListener("keypress")
   }, [])
 

www/src/theme/SearchBar/styles.css

@@ -33,6 +33,22 @@
   display: none !important;
 }
 
+.github-counter {
+  position: absolute;
+  color: #000;
+  top: -10px;
+  right: 5px;
+  font-size: 9px;
+  background-color: #ccc;
+  padding: 2px 5px;
+  border-radius: 10px;
+  z-index: -1;
+}
+html[data-theme="dark"] .github-counter {
+  background-color: #222;
+  color: #fff;
+}
+
 @media (max-width: 360px) {
   .search-bar {
     width: 0 !important;