Proposes to add in the wild to hosted visx site

packages/visx-demo/src/components/GalleryTile.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
+import classNames from 'classnames';
 import ParentSize from '@visx/responsive/lib/components/ParentSize';
 import { WidthAndHeight } from '../types';
 
@@ -13,6 +14,7 @@
   exampleUrl?: string;
   tileStyles?: React.CSSProperties;
   title?: string;
+  tileShort?: boolean;
 };
 
 const renderLinkWrapper = (url: string | undefined, node: React.ReactNode) =>
@@ -27,12 +29,19 @@
   exampleUrl,
   tileStyles,
   title,
+  tileShort
 }: Props<ExampleProps>) {
+
+  const galleryTileCx = classNames({
+    'gallery-tile': true,
+    '--short': tileShort
+  });
+
   return (
     <>
       {renderLinkWrapper(
         exampleUrl,
-        <div className="gallery-tile" style={tileStyles}>
+        <div className={galleryTileCx} style={tileStyles}>
           <div className="image">
             <ParentSize>
               {({ width, height }) =>
@@ -73,6 +82,9 @@
           border-radius: 14px;
           cursor: pointer;
         }
+        .--short {
+          height: 250px;
+        }
         .image {
           flex: 1;
           display: flex;

packages/visx-demo/src/components/Nav.tsx

@@ -20,6 +20,7 @@ function Nav() {
           </NavItem>
           <NavItem href="/docs">Docs</NavItem>
           <NavItem href="/gallery">Gallery</NavItem>
+          <NavItem href="/showcase">In the Wild</NavItem>
         </ul>
 
         <GithubButton type="stargazers" namespace="airbnb" repo="visx" />

packages/visx-demo/src/components/Showcase.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import Tilt from 'react-tilt';
+import GalleryTile from "../components/GalleryTile"
+import sites from '../showcase/sites'
+
+
+export type TileShowcaseProps = {
+  width: number;
+  height: number;
+  url?: string
+};
+
+function getCardImage(url: string): string {
+  // https://github.com/facebook/docusaurus/blob/main/website/src/pages/showcase/_components/ShowcaseCard/index.tsx
+  // https://www.zachleat.com/web/screenshots/
+  return (
+    `https://slorber-api-screenshot.netlify.app/${encodeURIComponent(
+      url,
+    )}/opengraph/`
+  );
+}
+
+function GenericImage({ url }: TileShowcaseProps){
+  return (
+    <>
+      <img
+        src={getCardImage(url)}
+        className="showcase-image"
+        height="100%"
+        width="100%"
+      />
+      <style jsx>{`
+        .showcase-image {
+          object-fit: cover;
+          object-position: center;
+        }
+      `}</style>
+    </>
+  )
+}
+
+const tileStyles = {
+  background: '#eeeeee',
+  borderRadius: 14,
+  boxShadow: 'rgba(0, 0, 0, 0.1) 0px 1px 6px',
+};
+const detailsStyles = {
+  background: 'white',
+  color: '#000000',
+  borderRadius: '0 0 14px 14px'
+};
+
+const tiltOptions = { max: 8, scale: 1 };
+
+export default function InTheWild() {
+
+  return (
+    <>
+      <div className="in-the-wild">
+        <div className="grid">
+          {sites.map((tile, i) => {
+
+            const GenericImageCoerced = () => {
+              return <GenericImage height={null} width={null} url={tile.url} />
+            }
+            return (
+              <Tilt key={`showcase-tile-${i}`} className="tilt" options={tiltOptions}>
+                <GalleryTile<TileShowcaseProps>
+                  title={tile.title}
+                  description={tile.description}
+                  exampleRenderer={GenericImageCoerced}
+                  exampleUrl={tile.url}
+                  tileStyles={tileStyles}
+                  detailsStyles={detailsStyles}
+                  tileShort={true}
+                />
+              </Tilt>
+            )
+          })}
+        </div>
+      </div>
+      <style jsx>{`
+        .gallery {
+          display: flex;
+          flex-direction: row;
+        }
+        .grid {
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+          overflow-x: hidden;
+          padding-bottom: 40px;
+        }
+        .filters {
+          margin-right: 24px;
+          width: 150px;
+          flex-shrink: 0;
+        }
+        h6 {
+          margin: 0 4px 0 0;
+        }
+        .filter-label {
+          font-size: 16;
+          font-weight: 500;
+        }
+        .filter-button {
+          display: block;
+          cursor: pointer;
+          border: none;
+          outline: none;
+          background: transparent;
+          padding: 0;
+          margin: 4px 4px 12px 0;
+          font-size: 16px;
+          line-height: 1em;
+        }
+        .emphasize {
+          font-weight: bold;
+        }
+        .showcase-image {
+         object-fit: cover;
+         object-position: center;
+        }
+        @media (min-width: 800px) {
+          .emphasize::before {
+            content: '';
+            padding-left: 4px;
+            border-left: 2px solid #fc2e1c;
+          }
+        }
+        @media (max-width: 800px) {
+          .gallery {
+            flex-direction: column;
+            min-width: 90vw;
+            max-width: 90vw;
+            margin: 0;
+          }
+          .filters {
+            display: flex;
+            flex-wrap: wrap;
+            width: 100%;
+            justify-content: center;
+          }
+        }
+      `}</style>
+    </>
+  );
+}

packages/visx-demo/src/pages/showcase.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Page from '../components/Page';
+import Showcase from '../components/Showcase';
+
+function InTheWildPage() {
+  return (
+    <Page wrapper={false} title="in the wild">
+      <Showcase />
+    </Page>
+  );
+}
+
+export default InTheWildPage;

packages/visx-demo/src/showcase/sites.js

@@ -0,0 +1,16 @@
+const sites = [
+  {title:"williaster/data-ui", description: "williaster.github.io/data-ui/", url: "https://williaster.github.io/data-ui/" },
+  {title:"Vercel Analytics", description: "Traffic analytics on Vercel", url: "https://vercel.com/analytics" },
+  {title:"Investment Calculator", description: "An investment calculator tool", url: "https://investmentcalculator.io/"},
+  {title:"The Daily Shot on WSJ", description: "Americans and forbearance", url: "https://finance.shan.io/recessions-bear-markets-compared"},
+  {title:"Data 2 the People", description: "Donation efficacy analysis", url: "https://donate.data2thepeople.org/"},
+  {title:"Pry", description: "Finance for founders", url: "https://pry.co/" },
+  {title:"Fig Stats", description: "Figma community plugin & widget analytics", url: "https://fig-stats.com/"},
+  {title:"WHO Coronavirus", description: "WHO Coronavirus (COVID-19) Dashboard", url: "https://covid19.who.int/"},
+  {title:"physician.fyi", description: "Explore physicians' disciplinary history", url: "https://physician.fyi/"},
+  {title:"Augora", description: "Display information of french deputies", url: "https://augora.fr/"},
+  {title:"Superstardle", description: "Sports data trivia and viz", url: "http://www.superstardle.com"},
+  {title:"Shuffling Propabilities", description: "Ridgeline charts on shuffling probabilities", url: "https://shuffling-probability.vercel.app"}
+];
+
+export default sites;