resources page

README.md

@@ -17,7 +17,7 @@ Website for Penn Labs.
 - [ ] Bio as markdown
 - [ ] Illustrations on about page
 - [ ] Products page
-- [ ] Resources page
+- [x] Resources page
 - [ ] Blog
 - [ ] Apply page
 - [ ] Team page

src/components/Home/Blobs.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import { maxWidth, PHONE, TABLET } from '../../constants/measurements'
 
-const blob1Path = require('../../images/blob1.svg') as string // tslint:disable-line
-const blob2Path = require('../../images/blob2-partial.svg') as string // tslint:disable-line
-const blob3Path = require('../../images/blob3.svg') as string // tslint:disable-line
-const blob4Path = require('../../images/blob4.svg') as string // tslint:disable-line
+const blob1Path = require('../../images/blobs/blob1.svg') as string // tslint:disable-line
+const blob2Path = require('../../images/blobs/blob2-partial.svg') as string // tslint:disable-line
+const blob3Path = require('../../images/blobs/blob3.svg') as string // tslint:disable-line
+const blob4Path = require('../../images/blobs/blob4.svg') as string // tslint:disable-line
 
 const Blob1Tag = styled.img`
   position: absolute;

src/components/Resources/Hero.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { Section, Row, Col, H1, H3, P } from '../../shared'
+import { M2 } from '../../constants/measurements'
+
+const deskPath = require('../../images/hero-resources.svg') as string // tslint:disable-line
+
+const Desk = styled.img`
+  width: 90%;
+  margin-left: 5%;
+  height: auto;
+`
+
+const TextWrapper = styled.div<{}>`
+  align-self: center;
+`
+
+export const Hero = () => (
+  <Section>
+    <Row margin={M2}>
+      <Col sm={12} md={6} margin={M2} flex>
+        <TextWrapper>
+          <H1 mb1>Resources</H1>
+          <H3 style={{ fontWeight: 400 }}>
+            Tutorials and data for building your own products
+          </H3>
+          <P>
+            We're dedicated to giving back to the community—here are some guides
+            and tutorials we've written to help everybody build products like
+            ours. We also maintain free APIs and SDKs with support for
+            Javascript, Python, Ruby and OAuth.
+          </P>
+        </TextWrapper>
+      </Col>
+      <Col sm={12} md={6} margin={M2}>
+        <Desk src={deskPath} />
+      </Col>
+    </Row>
+  </Section>
+)

src/components/Resources/Resource.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import styled from 'styled-components'
+import { IResource } from './types'
+import {
+  Col,
+  Card,
+  H3,
+  Tags,
+  BtnAnchor,
+  EBtnSize,
+  LinkExternalLink,
+  Row,
+  Flex,
+} from '../../shared'
+import { M1, M3, M2 } from '../../constants/measurements'
+
+const Logo = styled.img<{}>`
+  height: 1.5rem;
+  width: auto;
+  margin-bottom: ${M2};
+  margin-right: ${M1};
+`
+
+export const Resource = ({
+  name,
+  demoLink,
+  docsLink,
+  tags,
+  imagePath,
+}: IResource) => (
+  <Col key={name} margin={M1} flex>
+    <Card shaded hoverable bordered style={{ width: '100%' }}>
+      <Flex>
+        <Logo src={imagePath} alt={name} />
+        <H3 mb1>{name}</H3>
+      </Flex>
+      <div style={{ marginBottom: M3 }}>
+        <Tags tags={tags} />
+      </div>
+      <div>
+        <BtnAnchor
+          style={{ marginRight: M2, marginBottom: 0 }}
+          size={EBtnSize.SM}
+          href={docsLink}
+          target="_BLANK"
+        >
+          Docs <LinkExternalLink />
+        </BtnAnchor>
+        <a
+          href={demoLink}
+          target="_BLANK"
+          style={{ marginBottom: 0, fontSize: '80%' }}
+        >
+          Demo <LinkExternalLink />
+        </a>
+      </div>
+    </Card>
+  </Col>
+)

src/components/Resources/index.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { Hero } from './Hero'
+import { IResource } from './types'
+import { Resource } from './Resource'
+import { Section, Row } from '../../shared'
+import { M1 } from '../../constants/measurements'
+
+const pcpLogoPath = require('../../images/resources/pcp-logo.svg') as string // tslint:disable-line
+const pcrLogoPath = require('../../images/resources/pcr-logo.svg') as string // tslint:disable-line
+const pennMobileLogoPath = require('../../images/resources/penn-mobile-logo.svg') as string // tslint:disable-line
+
+const resources: IResource[] = [
+  {
+    name: 'Penn SDK',
+    demoLink: 'https://data.pennlabs.org',
+    docsLink: 'https://penn-sdk.readthedocs.io/en/latest/',
+    tags: ['Python', 'SDK'],
+    imagePath: pcpLogoPath,
+  },
+  {
+    name: 'Penn Mobile',
+    demoLink: 'https://data.pennlabs.org',
+    docsLink: 'https://github.com/pennlabs/labs-api-server',
+    tags: ['JSON', 'REST API'],
+    imagePath: pennMobileLogoPath,
+  },
+  {
+    name: 'Penn Course Review',
+    demoLink: 'https://data.pennlabs.org',
+    docsLink: 'https://github.com/pennlabs/pcr/blob/master/docs/api.md',
+    tags: ['JSON', 'REST API'],
+    imagePath: pcrLogoPath,
+  },
+]
+
+export const Resources = () => (
+  <>
+    <Hero />
+    <Section style={{ paddingTop: 0 }}>
+      <Row margin={M1}>
+        {resources.map(props => (
+          <Resource key={props.name} {...props} />
+        ))}
+      </Row>
+    </Section>
+  </>
+)

src/components/Resources/types.ts

@@ -0,0 +1,7 @@
+export interface IResource {
+  name: string
+  demoLink: string
+  docsLink: string
+  tags: string[]
+  imagePath: string
+}

src/pages/about.tsx

@@ -9,8 +9,8 @@ const AboutPage = (): React.ReactElement => (
     <SEO title="About" />
     <Container>
       <Section>
-        <H6>About Penn Labs</H6>
         <H1>A Story of Building Tools that Matter</H1>
+        <H3 style={{ fontWeight: 400 }}>About Penn Labs</H3>
       </Section>
 
       <Section>

src/pages/apply.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import Layout from '../components/Layout'
 import SEO from '../components/SEO'
 import { Container } from '../shared'
-import { Apply } from '../components/Apply.tsx'
+import { Apply } from '../components/Apply'
 
 const ApplyPage = (): React.ReactElement => (
   <Layout>

src/pages/resources.tsx

@@ -1,116 +1,16 @@
 import React from 'react'
-import styled from 'styled-components'
 
 import Layout from '../components/Layout'
 import SEO from '../components/SEO'
-import {
-  H1,
-  Section,
-  Container,
-  P,
-  Row,
-  Col,
-  H3,
-  BtnAnchor,
-  LinkExternalLink,
-  EBtnSize,
-  Card,
-  Tags,
-} from '../shared'
-import { M2, M3 } from '../constants/measurements'
-
-const deskPath = require('../images/hero-resources.svg') as string // tslint:disable-line
-
-const DeskTag = styled.img`
-  margin-left: 30%;
-  width: 70%;
-  height: auto;
-`
-
-export const Desk = () => <DeskTag src={deskPath} />
-
-interface IResource {
-  name: string
-  demoLink: string
-  docsLink: string
-  tags: string[]
-  // imagePath: string
-}
-
-const resources = [
-  {
-    name: 'Penn SDK',
-    demoLink: 'https://data.pennlabs.org',
-    docsLink: 'https://penn-sdk.readthedocs.io/en/latest/',
-    tags: ['Python', 'SDK'],
-  },
-  {
-    name: 'Penn Mobile',
-    demoLink: 'https://data.pennlabs.org',
-    docsLink: 'https://github.com/pennlabs/labs-api-server',
-    tags: ['JSON', 'REST API'],
-  },
-  {
-    name: 'Penn Course Review',
-    demoLink: 'https://data.pennlabs.org',
-    docsLink: 'https://github.com/pennlabs/pcr/blob/master/docs/api.md',
-    tags: ['JSON', 'REST API'],
-  },
-]
-
-// TODO proper tags
+import { WideContainer } from '../shared'
+import { Resources } from '../components/Resources'
 
 const ResourcesPage = (): React.ReactElement => (
   <Layout>
     <SEO title="Resources" />
-    <Container>
-      <Section>
-        <Row margin={M2}>
-          <Col sm={12} md={6} margin={M2}>
-            <H1 mb1>Resources</H1>
-            <H3 style={{ fontWeight: 400 }}>
-              Tutorials and data for building your own products
-            </H3>
-            <P>
-              We're dedicated to giving back to the community—here are some guides
-              and tutorials we've written to help everybody build products like
-              ours. We also maintain free APIs and SDKs with support for Javascript,
-              Python, Ruby and OAuth.
-            </P>
-          </Col>
-          <Col sm={12} md={6} margin={M2}>
-            <Desk/>
-          </Col>
-        </Row>
-      </Section>
-      <Section>
-        {resources.map(({ name, demoLink, docsLink, tags }) => (
-          <Card key={name} shaded hoverable bordered>
-            <H3 mb1>{name}</H3>
-            <div style={{ marginBottom: M3 }}>
-              <Tags tags={tags} />
-            </div>
-            <div>
-              <BtnAnchor
-                style={{ marginRight: M2, marginBottom: 0 }}
-                size={EBtnSize.SM}
-                href={docsLink}
-                target="_BLANK"
-              >
-                Docs <LinkExternalLink />
-              </BtnAnchor>
-              <a
-                href={demoLink}
-                target="_BLANK"
-                style={{ marginBottom: 0, fontSize: '80%' }}
-              >
-                Demo <LinkExternalLink />
-              </a>
-            </div>
-          </Card>
-        ))}
-      </Section>
-    </Container>
+    <WideContainer>
+      <Resources />
+    </WideContainer>
   </Layout>
 )
 

src/pages/team.tsx

@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 
 import Layout from '../components/Layout'
 import SEO from '../components/SEO'
-import { Container, H3, Section, P, Row, H1, H2 } from '../shared'
+import { Container, H3, Section, P, Row, H1, H2, Col } from '../shared'
 import { M2 } from '../constants/measurements'
 import { TeamMemberPreview } from '../components/Team/TeamMemberPreview'
 import { ITeam, IMember } from '../shared/Icons/types'
@@ -52,7 +52,11 @@ const AboutPage = (): React.ReactElement => {
         {teams.map(({ name, description, children: members }: ITeam) => (
           <Section key={name}>
             <H2 mb2>{name}</H2>
-            <P mb4>{description}</P>
+            <Row>
+              <Col sm={12} md={10} lg={8}>
+                <P mb4>{description}</P>
+              </Col>
+            </Row>
 
             <Row margin={M2}>
               {members.map((props: IMember) => (

src/shared/Grid.tsx

@@ -159,6 +159,19 @@ interface IContainerProps {
   foreground?: string
 }
 
+export const WideContainer = ({
+  children,
+  ...props
+}: IContainerProps): ReactElement => (
+  <Container {...props}>
+    <Row>
+      <Col sm={12} md={11} offsetMd={0.5} lg={10} offsetLg={1}>
+        {children}
+      </Col>
+    </Row>
+  </Container>
+)
+
 export const MediumContainer = ({
   children,
   ...props

tslint.json

@@ -4,7 +4,7 @@
     "member-ordering": false,
     "object-literal-sort-keys": false,
     "ordered-imports": false,
-    "quotemark": [true, "single", "avoid-escape"],
+    "quotemark": [true, "single", "avoid-escape", "jsx-double"],
     "no-consecutive-blank-lines": false,
     "lines-between-class-members": [true, 1],
     "semicolon": [true, "never"],