docs(sponsors): update sponsor pack

Author: amen-souissi

docs/package.json

@@ -20,9 +20,12 @@
     "@next/mdx": "^9.5.3",
     "@next/plugin-google-analytics": "^9.5.3",
     "@reactions/component": "^2.0.2",
+    "@visx/hierarchy": "^1.0.0",
+    "@visx/responsive": "^1.3.0",
     "@zeit/fetch": "^6.0.0",
     "@zeit/react-jsx-parser": "^2.0.0",
     "async-sema": "^3.1.0",
+    "axios": "^0.21.1",
     "body-scroll-lock": "^3.1.5",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.3.1",
@@ -38,7 +41,6 @@
     "next-images": "^1.5.0",
     "next-optimized-images": "^2.6.2",
     "node-fetch": "^2.6.1",
-    "prism-svelte": "^0.4.7",
     "prismjs": "^1.21.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -80,4 +82,4 @@
   "engines": {
     "node": ">=12.x"
   }
-}
+}

docs/src/components/LayoutDocs.js

@@ -74,7 +74,7 @@ export const LayoutDocs = props => {
           </Sticky>
         )}
         <Seo
-          title={title || props.meta.title}
+          title={props.meta.title || title}
           description={props.meta.description}
         />
         <div className="block">

docs/src/components/SponsorPack.js

@@ -0,0 +1,117 @@
+import React from 'react'
+import { Pack, hierarchy } from '@visx/hierarchy'
+import { ParentSize } from '@visx/responsive'
+
+export default function SponsorPack({ sponsors, height }) {
+  const pack = React.useMemo(
+    () => ({
+      children: sponsors,
+      name: 'root',
+      radius: 0,
+      distance: 0,
+    }),
+    [sponsors]
+  )
+
+  const root = React.useMemo(
+    () =>
+      hierarchy(pack)
+        .sum(d => 40 + d.monthlyPriceInCents)
+        .sort(
+          (a, b) => b.data.monthlyPriceInCents - a.data.monthlyPriceInCents
+        ),
+    [pack]
+  )
+
+  return (
+    <ParentSize>
+      {({ width }) => {
+        return width < 10 ? null : (
+          <div
+            style={{
+              width,
+              height,
+              position: 'relative',
+            }}
+          >
+            <style
+              dangerouslySetInnerHTML={{
+                __html: `
+
+              .sponsor-link {
+                transition: all .2s ease;
+                transform: translate(-50%, -50%);
+              }
+
+              .sponsor-link:hover {
+                z-index: 10;
+                transform: translate(-50%, -50%) scale(1.1);
+              }
+
+              .sponsor-link:hover .sponsor-tooltip {
+                opacity: 1;
+              }
+            `,
+              }}
+            />
+            <Pack root={root} size={[width, height]} padding={width * 0.005}>
+              {packData => {
+                const circles = packData.descendants().slice(1) // skip first layer
+                return (
+                  <div>
+                    {[...circles].reverse().map((circle, i) => (
+                      <a
+                        key={`circle-${i}`}
+                        href={
+                          circle.data.linkUrl ||
+                          `https://github.com/${circle.data.login}`
+                        }
+                        className="sponsor-link absolute shadow-lg bg-white rounded-full z-0"
+                        style={{
+                          left: circle.x,
+                          top: circle.y,
+                          width: circle.r * 2,
+                          height: circle.r * 2,
+                        }}
+                      >
+                        <div
+                          key={`circle-${i}`}
+                          className="absolute bg-no-repeat bg-center bg-contain rounded-full"
+                          style={{
+                            position: 'absolute',
+                            left: '50%',
+                            top: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            width: '90%',
+                            height: '90%',
+                            backgroundImage: `url(${
+                              circle.data.imageUrl ||
+                              `https://avatars0.githubusercontent.com/${circle.data.login}?v=3&s=200`
+                            })`,
+                          }}
+                        />
+                        {circle.data.name ? (
+                          <div
+                            className="sponsor-tooltip absolute -top-0 left-1/2
+                          text-sm
+                          bg-gray-900 text-white p-2 pointer-events-none
+                          transform -translate-x-1/2 -translate-y-full opacity-0
+                          shadow-xl rounded-lg"
+                          >
+                            <span className="whitespace-no-wrap">
+                              {circle.data.name}
+                            </span>
+                          </div>
+                        ) : null}
+                      </a>
+                    ))}
+                  </div>
+                )
+              }}
+            </Pack>
+          </div>
+        )
+      }}
+    </ParentSize>
+  )
+}