Experience Brand Kit 1.0

packages/web/package.json

@@ -28,6 +28,7 @@
     "apollo-boost": "^0.3.1",
     "big-integer": "^1.6.31",
     "body-parser": "^1.18.3",
+    "colortranslator": "^1.1.1",
     "compression": "^1.7.4",
     "connect-slashes": "^1.4.0",
     "cross-fetch": "^3.0.2",
@@ -74,12 +75,14 @@
     "shuffle-seed": "^1.1.6",
     "stickyfilljs": "^2.0.5",
     "svgs": "^4.1.0",
-    "tls": "^0.0.1"
+    "tls": "^0.0.1",
+    "yiq": "^3.0.1"
   },
   "devDependencies": {
     "@firebase/app-types": "^0.4.6",
     "@sentry/types": "^5.6.1",
     "@types/airtable": "^0.5.6",
+    "@types/hex-rgba": "^1.0.0",
     "@types/i18next": "^12.1.0",
     "@types/mailgun-js": "^0.16.3",
     "@types/next": "^8.0.3",

packages/web/pages/_app.tsx

@@ -29,10 +29,14 @@ class MyApp extends App {
     }
   }
 
-  // there are a few pages we dont want the header on for artistic reasons
-  // currently this is just the animation demo pages
+  // there are a few pages we dont want the header on
+  // currently this is just the animation demo pages and brand kit
   skipHeader() {
-    return this.props.router.asPath.startsWith('/animation')
+    return this.props.router.asPath.startsWith('/animation') || this.isBrand()
+  }
+
+  isBrand = () => {
+    return this.props.router.asPath.startsWith('/experience')
   }
 
   componentDidCatch = (error: Error, info: object) => {
@@ -76,5 +80,5 @@ function checkH1Count() {
 function hashScroller(id: string) {
   const element = document.getElementById(id.replace('#', ''))
 
-  scrollIntoView(element, { time: 200, align: { top: 0.2, topOffset: HEADER_HEIGHT } })
+  scrollIntoView(element, { time: 100, align: { top: 0, topOffset: HEADER_HEIGHT + 100 } })
 }

packages/web/pages/_document.tsx

@@ -54,8 +54,15 @@ export default class MyDocument extends Document {
           <meta name="viewport" content="width=device-width, initial-scale=1.0" />
           <link rel="stylesheet" href={'/static/normalize.css'} />
 
-          <link rel="preconnect" href="https://use.typekit.net" />
-          <link rel="stylesheet" href="https://use.typekit.net/dki6jkb.css" />
+          <link
+            rel="stylesheet"
+            href="https://indestructibletype.com/fonts/Jost.css"
+            type="text/css"
+          />
+          <link
+            href="https://fonts.googleapis.com/css?family=EB+Garamond:400,500,500i,700&display=swap"
+            rel="stylesheet"
+          />
 
           <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico" />
         </Head>

packages/web/pages/experience/brand/color.tsx

@@ -0,0 +1,3 @@
+import Color from 'src/brandkit/Color'
+
+export default Color

packages/web/pages/experience/brand/icons.tsx

@@ -0,0 +1,3 @@
+import IconsPage from 'src/brandkit/IconsPage'
+
+export default IconsPage

packages/web/pages/experience/brand/index.tsx

@@ -0,0 +1,3 @@
+import Intro from 'src/brandkit/Intro'
+
+export default Intro

packages/web/pages/experience/brand/key-imagery.tsx

@@ -0,0 +1,2 @@
+import KeyImagery from 'src/brandkit/KeyImagery'
+export default KeyImagery

packages/web/pages/experience/brand/logo.tsx

@@ -0,0 +1,3 @@
+import Logo from 'src/brandkit/Logo'
+
+export default Logo

packages/web/pages/experience/brand/typography.tsx

@@ -0,0 +1,3 @@
+import Typography from 'src/brandkit/Typography'
+
+export default Typography

packages/web/server/AssetBase.ts

@@ -0,0 +1,66 @@
+import { Attachment, FieldSet, Table } from 'airtable'
+import getConfig from 'next/config'
+import airtableInit from './airtable'
+
+const ASSSET_FIELD_LIGHT = 'Assets (on light bg)'
+const ASSSET_FIELD_DARK = 'Assets (on dark bg)'
+
+interface Fields extends FieldSet {
+  Name: string
+  Description: string
+  [ASSSET_FIELD_LIGHT]: Attachment[]
+  [ASSSET_FIELD_DARK]: Attachment[]
+  Zip: Attachment[]
+  Terms: boolean
+  Tags: string[]
+}
+
+enum AssetSheet {
+  Icons = 'Icons',
+  Illustrations = 'Illustrations',
+  AbstractGraphics = 'Abstract Graphics',
+}
+
+export default function getAssets(sheet: AssetSheet) {
+  return getAirtable(sheet)
+    .select({
+      filterByFormula: `AND(${IS_APROVED}, ${TERMS_SIGNED})`,
+      sort: [{ field: 'Name', direction: 'desc' }],
+    })
+    .all()
+    .then((records) => {
+      return records.map((r) => normalize(r.fields))
+    })
+}
+
+function getAirtable(sheet: AssetSheet): Table<Fields> {
+  return airtableInit(getConfig().serverRuntimeConfig.AIRTABLE_BRANDKIT_ID)(sheet)
+}
+
+const IS_APROVED = 'Approved=1'
+const TERMS_SIGNED = 'Terms=1'
+
+function normalize(asset: Fields) {
+  return {
+    name: asset.Name,
+    description: asset.Description,
+    preview: getPreview(asset),
+    uri: getURI(asset),
+  }
+}
+
+function getPreview(asset: Fields) {
+  const previewField = asset[ASSSET_FIELD_LIGHT]
+
+  return (
+    (previewField &&
+      previewField[0] &&
+      previewField[0].thumbnails &&
+      previewField[0].thumbnails.large.url) ||
+    ''
+  )
+}
+
+function getURI(asset: Fields) {
+  return (asset.Zip && asset.Zip[0] && asset.Zip[0].url) || ''
+}

packages/web/server/index.ts

@@ -13,6 +13,7 @@ import ecoFundSubmission from '../server/EcoFundApp'
 import { RequestType } from '../src/fauceting/FaucetInterfaces'
 import nextI18next from '../src/i18n'
 import latestAnnouncements from './Announcement'
+import getAssets from './AssetBase'
 import { faucetOrInviteController } from './controllers'
 import getFormattedEvents from './EventHelpers'
 import { submitFellowApp } from './FellowshipApp'
@@ -74,9 +75,14 @@ function wwwRedirect(req, res, nextAction) {
     })
   })
 
+  server.get('/brand', (_, res) => {
+    res.redirect('/experience/brand')
+  })
+
   server.get('/connect', (_, res) => {
     res.redirect('/community')
   })
+
   server.get('/tos', (_, res) => {
     res.redirect('/user-agreement')
   })
@@ -141,6 +147,15 @@ function wwwRedirect(req, res, nextAction) {
     }
   })
 
+  server.get('/brand/api/assets/:asset', async (req, res) => {
+    try {
+      const assets = await getAssets(req.params.asset)
+      res.json(assets)
+    } catch (e) {
+      res.status(e.statusCode || 500).json({ message: e.message || 'unknownError' })
+    }
+  })
+
   server.post('/partnerships-email', async (req, res) => {
     const { email } = req.body
     await mailer({

packages/web/src/brandkit/Color.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react'
+import { withNamespaces } from 'react-i18next'
+import { ImageBackground, ImageRequireSource, StyleSheet, Text, View } from 'react-native'
+import Palette from 'src/brandkit/color/Palette'
+import { brandStyles } from 'src/brandkit/common/constants'
+import {
+  ACCENT_PALETTE,
+  BACKGROUND_PALETTE,
+  GRAY_PALETTE,
+  PRIMARY_PALETTE,
+} from 'src/brandkit/common/data'
+import Page from 'src/brandkit/common/Page'
+import PageHeadline from 'src/brandkit/common/PageHeadline'
+import SectionTitle from 'src/brandkit/common/SectionTitle'
+import Judgement, { Value } from 'src/brandkit/logo/Judgement'
+import { I18nProps, NameSpaces } from 'src/i18n'
+import { ScreenProps, ScreenSizes, withScreenSize } from 'src/layout/ScreenSize'
+import { hashNav } from 'src/shared/menu-items'
+import { colors, fonts, standardStyles } from 'src/styles'
+const { brandColor } = hashNav
+
+export default React.memo(function Color() {
+  return (
+    <Page
+      sections={[
+        { id: brandColor.overview, children: <Overview /> },
+        { id: brandColor.backgrounds, children: <Backgrounds /> },
+      ]}
+    />
+  )
+})
+
+const Overview = withNamespaces(NameSpaces.brand)(function _Overview({ t }: I18nProps) {
+  return (
+    <View>
+      <PageHeadline title={t('color.title')} style={standardStyles.blockMarginBottom} />
+      <Palette
+        title={t('color.primaries')}
+        text={t('color.primariesText')}
+        colors={PRIMARY_PALETTE}
+      />
+      <Palette title={t('color.accents')} text={t('color.accentsText')} colors={ACCENT_PALETTE} />
+      <Palette title={t('color.grays')} text={t('color.graysText')} colors={GRAY_PALETTE} />
+    </View>
+  )
+})
+
+const Backgrounds = withNamespaces(NameSpaces.brand)(
+  withScreenSize<I18nProps>(function _Backgrounds({ t, screen }: I18nProps & ScreenProps) {
+    const stylesForJudgemnt = screen === ScreenSizes.DESKTOP ? styles.column : [standardStyles.row]
+
+    return (
+      <View>
+        <SectionTitle containerStyle={brandStyles.gap}>{t('color.backgroundTitle')}</SectionTitle>
+        <Palette text={t('color.backgroundText')} colors={BACKGROUND_PALETTE} />
+        <Text style={[brandStyles.gap, fonts.h5a, standardStyles.elementalMarginBottom]}>
+          {t('color.contrast')}
+        </Text>
+        <Text style={[brandStyles.gap, fonts.p]}>{t('color.contrastText')}</Text>
+        <View style={[standardStyles.elementalMargin, standardStyles.row]}>
+          <Lorem
+            color={colors.dark}
+            backgroundColor={colors.white}
+            withGap={true}
+            hasBorder={true}
+          />
+          <Lorem color={colors.white} backgroundColor={colors.dark} withGap={true} />
+        </View>
+        <Text style={[brandStyles.gap, fonts.p]}>{t('color.contrastText2')}</Text>
+        <View style={screen === ScreenSizes.DESKTOP ? brandStyles.tiling : { width: '100%' }}>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem color={colors.gold} backgroundColor={colors.faintGold} />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem color={colors.dark} backgroundColor={colors.faintGold} />
+            </Judgement>
+          </View>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem
+                color={colors.white}
+                backgroundColor={colors.gray}
+                image={require('src/brandkit/images/lilah.jpg')}
+              />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem
+                color={colors.white}
+                backgroundColor={colors.dark}
+                image={require('src/brandkit/images/lilahOverlay.jpg')}
+              />
+            </Judgement>
+          </View>
+          <View style={stylesForJudgemnt}>
+            <Judgement is={Value.Bad}>
+              <Lorem color={colors.primary} backgroundColor={colors.deepBlue} />
+            </Judgement>
+            <Judgement is={Value.Good}>
+              <Lorem color={colors.white} backgroundColor={colors.deepBlue} />
+            </Judgement>
+          </View>
+        </View>
+      </View>
+    )
+  })
+)
+
+interface LoremProps {
+  backgroundColor: colors
+  color: colors
+  withGap?: boolean
+  hasBorder?: boolean
+  image?: ImageRequireSource
+}
+
+function Lorem({ backgroundColor, color, withGap, hasBorder, image }: LoremProps) {
+  const Component = image ? ImageBackground : View
+
+  return (
+    // @ts-ignore : component does not have call signature?
+    <Component
+      source={image}
+      style={[
+        standardStyles.centered,
+        styles.lorem,
+        hasBorder && brandStyles.fullBorder,
+        withGap && brandStyles.gap,
+        { backgroundColor },
+      ]}
+    >
+      <Text style={[fonts.p, { color }]}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac dignissim purus.
+      </Text>
+    </Component>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { padding: 10 },
+  lorem: {
+    flex: 1,
+    paddingVertical: 20,
+    paddingHorizontal: 20,
+    minHeight: 200,
+  },
+  column: {
+    flex: 1,
+  },
+})