From 97b6de6aa437f7a913a33b9e6aa18a919faf2caf Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 12 Apr 2018 16:31:01 -0400 Subject: a whole bunch of things that should be in their own commits --- frontend/pages/diagram.js | 202 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 202 insertions(+) create mode 100644 frontend/pages/diagram.js (limited to 'frontend/pages/diagram.js') diff --git a/frontend/pages/diagram.js b/frontend/pages/diagram.js new file mode 100644 index 0000000..f7e9a7a --- /dev/null +++ b/frontend/pages/diagram.js @@ -0,0 +1,202 @@ +import Page from '../components/Page'; +import withData from '../lib/withData'; +import styled from 'styled-components'; + +const DiagramStyles = styled.div` + display: grid; + grid-template-columns: repeat(8, 1fr); + grid-column-gap: 20px; + ul { + margin: 0; + padding: 0; + list-style: none; + li { + border-bottom: 1px solid rgba(0, 0, 0, 0.2); + } + } + h2 { + text-align: center; + margin: 0; + background: black; + color: white; + width: calc(40px + 100%); + transform: translateX(-20px); + } + span.for { + font-size: 12px; + text-align: center; + margin-bottom: 2rem; + display: block; + } + .slat { + background: #f7f7f7; + padding: 20px; + min-height: 500px; + grid-column: span 2; + grid-row: 3; + line-height: 1.7; + } + + .location { + grid-column: span 4; + background: red; + padding: 5px; + text-align: center; + color: white; + text-transform: uppercase; + } + + .arrow { + font-size: 50px; + line-height: 1; + transform: translateX(-10px) translateX(-50%); + text-align: center; + grid-row: 2; + margin-bottom: -100%; + background: white; + height: 60px; + } + .arrow1 { + grid-column: 3; + } + .arrow2 { + grid-column: 5; + } + .arrow3 { + grid-column: 7; + } + img { + width: 100%; + height: 125px; + object-fit: contain; + } + .slat2 img { + filter: invert(100%); + } + .slat4 img { + mix-blend-mode: multiply; + } +`; + +const Diagram = () => ( + + Frontend + Backend +
+ React.js +

React.js

+ For Building The Interface along with: +
    +
  • + Next.js for server side rendering, routing and tooling +
    • +
  • + Styled Components for styling +
    • +
  • + React-Apollo for interfacing with Apollo Client +
    • +
+
+
+ React.js +

Apollo Client

+ For Data Management + +
    +
  • + Performing GraphQL Mutations +
    • +
  • + Fetching GraphQL Queries +
    • +
  • + Caching GraphQL Data +
    • +
  • + Managing Local State +
    • +
  • + Error and Loading UI States +
    • +
  • + Apollo-client replaces the need for redux + data fetching libraries +
    • +
+
+
+ React.js +

YOGA Server

+ + An Express GraphQL Server For: +
    +
  • + Implementing Query and Mutation{' '} + Resolvers +
    • +
  • + Custom Server Side Logic +
    • +
  • + Charging Credit Cards +
    • +
  • + Sending Email +
    • +
  • + Performing Authentication +
    • +
  • + Checking Permissions +
    • +
+
+
+ React.js +

Prisma Server

+ + A GraphQL Database Interface +
    +
  • + Provides a set of GraphQL CRUD APIs for our (currently MySQL){' '} + Database +
    • +
  • + Schema Definition +
    • +
  • + Data Relationships +
    • +
  • + Queried Directly from our Yoga Server +
    • +
  • + Self-hosted or as-a-service +
    • +
+
+ ↔ + ↔ + ↔ + +); + +const DiagramPage = () => ( + + + +); + +export default withData(DiagramPage); -- cgit v1.3