🌎 Hack Club Bank Climate directory

components/bank/directory/card.js

@@ -0,0 +1,176 @@
+import { Card, Badge as ThemeBadge, Box, Heading, Text, Image } from 'theme-ui'
+import { Organization } from '../../../pages/bank/climate'
+import Tilt from '../../../components/tilt'
+import Icon from '@hackclub/icons'
+
+export const Badge = ({ badge }) =>
+  badge.image ? (
+    <ThemeBadge
+      as="span"
+      sx={{
+        backgroundImage: `url("${badge.image}")`,
+        backgroundSize: 'contain',
+        backgroundColor: 'unset',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center',
+        fontSize: 'inherit',
+        textShadow: 'none',
+        borderRadius: 5,
+        display: 'block',
+        height: 30,
+        width: 38
+      }}
+    >
+      <span style={{ opacity: '0' }}>.</span>
+    </ThemeBadge>
+  ) : (
+    <ThemeBadge
+      as="span"
+      sx={{
+        bg: badge.color,
+        color: 'snow',
+        fontSize: 'inherit',
+        textShadow: 'none',
+        borderRadius: 5,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
+    >
+      <Icon glyph={badge.icon} size={30} />
+    </ThemeBadge>
+  )
+
+const TagRow = ({ category, type, badgeNames }) => {
+  return (
+    <>
+      {badgeNames
+        .map(name => badges[name])
+        .map((Badge, i) => (
+          <Badge key={i} />
+        ))}
+    </>
+  )
+}
+
+/**
+ *
+ * @param {{
+ * organization: Organization,
+ * showTags: boolean
+ * }} props
+ * @returns
+ */
+export const OrganizationCard = ({
+  openModal,
+  badges,
+  organization,
+  showTags = false
+}) => (
+  <Tilt>
+    <Card
+      onClick={() => openModal(organization)}
+      rel="noopener noreferrer"
+      itemScope
+      itemType="http://schema.org/Event"
+      variant="event"
+      sx={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        minHeight: 128,
+        color: 'white',
+        cursor: 'pointer',
+        textShadow: '0 1px 4px rgba(0, 0, 0, 0.375)',
+        textDecoration: 'none',
+        backgroundColor: 'black',
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+        borderRadius: 'extra',
+        overflow: 'hidden',
+        position: 'relative',
+        p: 3,
+        height: '100%',
+        display: 'flex',
+        px: 3,
+        backgroundImage: `linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.375) 75%), url('${organization.branding.backgroundImage}')`,
+        textAlign: 'center',
+        flexDirection: 'column'
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: 'end',
+          alignItems: 'center',
+          width: '100%',
+          gap: 2,
+          flexDirection: 'row',
+          mb: 3
+        }}
+      >
+        {badges.map((badge, i) => (
+          <Badge key={i} badge={badge} />
+        ))}
+      </Box>
+
+      {organization.branding.logo && (
+        <Image
+          src={organization.branding.logo}
+          alt={`${organization.name} logo`}
+          loading="lazy"
+          sx={{
+            minWidth: 64,
+            height: 64,
+            objectFit: 'contain',
+            objectPosition: 'left',
+            borderRadius: 'default',
+            mt: 'auto'
+          }}
+        />
+      )}
+      <Heading
+        as={'h3'}
+        itemProp="name"
+        sx={{
+          fontSize: [3, 4],
+          mt: 2,
+          mb: 3,
+          overflowWrap: 'anywhere',
+          width: '100%',
+          display: 'block'
+        }}
+      >
+        {organization.name}
+      </Heading>
+      <Box
+        as="footer"
+        sx={{
+          mt: 'auto',
+          mb: 0,
+          width: '100%',
+          opacity: 0.875,
+          textTransform: 'none'
+        }}
+      >
+        <>
+          <Text
+            as="span"
+            itemProp="location"
+            itemScope
+            itemType="http://schema.org/Place"
+          >
+            <span itemProp="address">
+              {organization.raw.location.continent}
+            </span>
+          </Text>
+        </>
+      </Box>
+      <Box sx={{ display: 'none' }}>
+        <span itemProp="url">{organization.links.website}</span>
+      </Box>
+    </Card>
+  </Tilt>
+)
+
+export default OrganizationCard

components/bank/landing.js

@@ -4,7 +4,7 @@ import ScrollHint from '../scroll-hint'
 import Image from 'next/image'
 import hero from '../../public/bank/bg.webp'
 
-export default function Landing({ showButton, eventsCount }) {
+export default function Landing({ showButton = true, eventsCount }) {
   return (
     <>
       <Slide>
@@ -144,7 +144,7 @@ function Underline({ children }) {
   return (
     <span
       style={{
-        backgroundImage: 'url(/underline.svg)',
+        backgroundImage: 'url(/underline-red.svg)',
         backgroundRepeat: 'no-repeat',
         backgroundSize: '100% 1rem',
         backgroundPosition: 'bottom center'

components/sparkles/money.js

@@ -26,6 +26,8 @@ const MSparkles = ({
   colors = ['orange', 'yellow', 'green'],
   children,
   sx,
+  path,
+  viewBox,
   props,
   ...delegated
 }) => {
@@ -58,6 +60,8 @@ const MSparkles = ({
           color={sparkle.color}
           size={sparkle.size}
           style={sparkle.style}
+          path={path}
+          viewBox={viewBox}
         />
       ))}
       <ChildWrapper as="strong" sx={sx} {...props}>
@@ -67,12 +71,18 @@ const MSparkles = ({
   )
 }
 
-const Sparkle = ({ size, color, style }) => {
-  const path =
-    'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
+const Sparkle = ({ size, color, style, path, viewBox }) => {
+  if (!path)
+    path =
+      'M27 0H18V7.44119C8.56638 8.96454 2.608 15.2023 2.608 24.168C2.608 34.4553 10.2396 38.3636 18 41.2862V60.3901C14.2364 58.7919 11.8724 55.3359 11.536 50.088H0.591999C0.999374 61.0056 7.97574 68.051 18 69.933V80H27V70.2565C37.6237 69.0685 44.656 62.1891 44.656 51.912C44.656 40.3121 35.4657 36.7574 27 33.8641V16.9739C30.363 18.3007 32.5185 21.3983 32.656 26.76H43.312C43.228 15.2519 36.6759 8.81537 27 7.38614V0ZM18 16.871C14.8637 17.9425 13.072 20.2358 13.072 23.304C13.072 26.6134 15.0429 28.7127 18 30.3352V16.871ZM27 44.7132V61.0707C31.4416 60.1212 34.192 57.2657 34.192 53.16C34.192 48.9744 31.1721 46.6064 27 44.7132Z'
   return (
     <SparkleWrapper style={style}>
-      <SparkleSvg width={size} height={size} viewBox="0 0 82 82" fill="none">
+      <SparkleSvg
+        width={size}
+        height={size}
+        viewBox={viewBox || '0 0 82 82'}
+        fill="none"
+      >
         <path fillRule="evenodd" clipRule="evenodd" d={path} fill={color} />
       </SparkleSvg>
     </SparkleWrapper>

package.json

@@ -33,6 +33,7 @@
     "cursor-effects": "^1.0.11",
     "devtools-detect": "^4.0.1",
     "form-data": "^4.0.0",
+    "fuzzysort": "^2.0.4",
     "geopattern": "^1.2.3",
     "globby": "^11.0.4",
     "graphql": "^16.6.0",

pages/bank/climate/[region].js

@@ -0,0 +1,44 @@
+import ClimateDirectory, {
+  regions,
+  fetchRawClimateOrganizations
+} from './index'
+import { map, find, kebabCase, startCase } from 'lodash'
+
+const regionsWithIds = map(regions, region => ({
+  id: kebabCase(region.label),
+  ...region
+}))
+
+export default function ClimateRegionalPage({ rawOrganizations, pageRegion }) {
+  return (
+    <ClimateDirectory
+      rawOrganizations={rawOrganizations}
+      pageRegion={pageRegion}
+    />
+  )
+}
+
+export const getStaticPaths = () => {
+  const paths = map(map(regionsWithIds, 'id'), id => ({
+    params: { region: `organizations-in-${id}` }
+  }))
+
+  return { paths, fallback: false }
+}
+
+export const getStaticProps = async ({ params }) => {
+  let { region } = params
+  region = find(regionsWithIds, ['id', region.replace('organizations-in-', '')])
+
+  let orgs = (await fetchRawClimateOrganizations()).filter(
+    org => org.location.continent === region.label
+  )
+
+  return {
+    props: {
+      rawOrganizations: orgs,
+      pageRegion: region
+    },
+    revalidate: 60
+  }
+}