From 131cc6d3293b2ade7e366349c6219961431087b8 Mon Sep 17 00:00:00 2001 From: mcioffi Date: Thu, 22 Feb 2024 17:52:09 -0500 Subject: [PATCH 1/2] Adds in the wild to hosted visx site --- .../visx-demo/src/components/GalleryTile.tsx | 14 +- packages/visx-demo/src/components/Nav.tsx | 1 + .../visx-demo/src/components/Showcase.tsx | 148 ++++++++++++++++++ packages/visx-demo/src/pages/showcase.tsx | 13 ++ packages/visx-demo/src/showcase/sites.js | 15 ++ 5 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 packages/visx-demo/src/components/Showcase.tsx create mode 100644 packages/visx-demo/src/pages/showcase.tsx create mode 100644 packages/visx-demo/src/showcase/sites.js diff --git a/packages/visx-demo/src/components/GalleryTile.tsx b/packages/visx-demo/src/components/GalleryTile.tsx index d563981a5..38e059763 100644 --- a/packages/visx-demo/src/components/GalleryTile.tsx +++ b/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 @@ type Props = { exampleUrl?: string; tileStyles?: React.CSSProperties; title?: string; + tileShort?: boolean; }; const renderLinkWrapper = (url: string | undefined, node: React.ReactNode) => @@ -27,12 +29,19 @@ export default function GalleryTile({ exampleUrl, tileStyles, title, + tileShort }: Props) { + + const galleryTileCx = classNames({ + 'gallery-tile': true, + '--short': tileShort + }); + return ( <> {renderLinkWrapper( exampleUrl, -
+
{({ width, height }) => @@ -73,6 +82,9 @@ export default function GalleryTile({ border-radius: 14px; cursor: pointer; } + .--short { + height: 250px; + } .image { flex: 1; display: flex; diff --git a/packages/visx-demo/src/components/Nav.tsx b/packages/visx-demo/src/components/Nav.tsx index 4f5df6e99..ebcdcedce 100644 --- a/packages/visx-demo/src/components/Nav.tsx +++ b/packages/visx-demo/src/components/Nav.tsx @@ -20,6 +20,7 @@ function Nav() { Docs Gallery + In the Wild diff --git a/packages/visx-demo/src/components/Showcase.tsx b/packages/visx-demo/src/components/Showcase.tsx new file mode 100644 index 000000000..b78c13106 --- /dev/null +++ b/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 ( + <> + + + + ) +} + +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 ( + <> +
+
+ {sites.map((tile, i) => { + + const GenericImageCoerced = () => { + return + } + return ( + + + title={tile.title} + description={tile.description} + exampleRenderer={GenericImageCoerced} + exampleUrl={tile.url} + tileStyles={tileStyles} + detailsStyles={detailsStyles} + tileShort={true} + /> + + ) + })} +
+
+ + + ); +} diff --git a/packages/visx-demo/src/pages/showcase.tsx b/packages/visx-demo/src/pages/showcase.tsx new file mode 100644 index 000000000..2ef78da00 --- /dev/null +++ b/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 ( + + + + ); +} + +export default InTheWildPage; diff --git a/packages/visx-demo/src/showcase/sites.js b/packages/visx-demo/src/showcase/sites.js new file mode 100644 index 000000000..5db5401df --- /dev/null +++ b/packages/visx-demo/src/showcase/sites.js @@ -0,0 +1,15 @@ +const sites = [ + {title:"williaster/data-ui", description: "williaster.github.io/data-ui/", url: "https://williaster.github.io/data-ui/" }, + {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; From 56ef9dd213199cdbc2f16c8495dc2755b2b7f980 Mon Sep 17 00:00:00 2001 From: mcioffi Date: Tue, 27 Feb 2024 13:55:29 -0500 Subject: [PATCH 2/2] Per vercel See https://github.com/vercel/vercel/discussions/9232 --- packages/visx-demo/src/showcase/sites.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/visx-demo/src/showcase/sites.js b/packages/visx-demo/src/showcase/sites.js index 5db5401df..ed71d89be 100644 --- a/packages/visx-demo/src/showcase/sites.js +++ b/packages/visx-demo/src/showcase/sites.js @@ -1,5 +1,6 @@ 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/"},