Code Monkey home page Code Monkey logo

interactive.2019.overcrowded's Introduction

gatsby-starter-dailybruin

How the Daily Bruin likes using Gatsby. Note this starter combines a couple of other in-house DB tools, like gatsby-source-kerckhoff, which draws from our site manager Kerckhoff, and Lux, our React-based design system.

Overview

What's going on here? Kerckhoff is pulling data from a Google Drive Folder that contains docs written in ArchieML and images and transforming them into parsable JSON via an api. gatsby-source-kerckhoff is then fetching that JSON and makes it available as GraphQL for use in this Gatsby template. In a diagram:

ArchieML  --Kerckhoff-->  JSON ––gatsby-source-kerckhoff--> GraphQL ––gatsby-starter-dailybruin--> HTML

Installation

Make sure you have Yarn the Gatsby CLI installed.

gatsby new <your-project-name> https://github.com/dailybruin/gatsby-starter-dailybruin

Usage

Development

If you haven't already, install yarn.

Install dependencies with:

yarn

To start the development server, run:

yarn start

Then go to localhost:1234!

Deployment

To build:

yarn build

interactive.2019.overcrowded's People

Contributors

ryang72 avatar mindip avatar fzbuzz avatar jhuang739 avatar legitmaxwu avatar huangka97 avatar kevinkassimo avatar

Watchers

James Cloos avatar Hongyi Zhang avatar Carter Bian avatar Sarthak More avatar Michael Zhang avatar  avatar  avatar

interactive.2019.overcrowded's Issues

Navbar (mobile and desktop)

Write a component that will display a mobile and desktop navbar, depending on media query.
Check out whose-campus for a similar implementation.

mobile:
Screen Shot 2019-04-06 at 5 53 23 PM
mobile clicking hamburger menu:
Screen Shot 2019-04-06 at 5 53 27 PM
desktop:
Screen Shot 2019-04-06 at 5 53 40 PM

QA Component

QA component that has alternating colors per question. On mobile answers will be expandable if they are too long.
Desktop:
Screen Shot 2019-04-06 at 6 12 11 PM
Mobile:
Screen Shot 2019-04-06 at 6 12 34 PM

Video Card

video card that can expand to show a video.

Before:
Screen Shot 2019-04-06 at 6 11 41 PM
After (should have an arrow pointing up at the bottom):
Screen Shot 2019-04-06 at 6 11 44 PM

Matrix of Photos

Basically like article grid but with photos and single block caption. Make sure it is responsive!
Screen Shot 2019-04-06 at 6 11 12 PM

Article Card

Acts as navigation in the section to its articles. On hover it will say "READ ARTICLE".

Screen Shot 2019-04-06 at 6 02 30 PM

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource Name Replacement PR?
npm @material-ui/core Unavailable

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • Update material-ui monorepo to v4 (major) (@material-ui/core, @material-ui/icons)
  • Update react monorepo to v18 (major) (@types/react, react, react-dom)
  • 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

Detected dependencies

npm
package.json
  • @dailybruin/gatsby-source-kerckhoff 1.1.1
  • @dailybruin/lux 1.9.3
  • @material-ui/core ^3.9.3
  • @material-ui/icons ^3.0.2
  • @types/react 16.7.18
  • emotion 9.2.12
  • emotion-server 9.2.12
  • gatsby 2.0.89
  • gatsby-plugin-emotion 2.0.7
  • gatsby-plugin-google-analytics 2.0.9
  • gatsby-plugin-manifest 2.0.13
  • gatsby-plugin-react-helmet 3.0.5
  • gatsby-plugin-typescript 2.0.3
  • gatsby-plugin-typography 2.2.5
  • gatsby-source-published-google-sheets 1.0.2
  • normalize.css 8.0.1
  • react 16.7.0
  • react-animate-height ^2.0.8
  • react-dom 16.7.0
  • react-draggable ^3.2.1
  • react-emotion 9.2.12
  • react-hamburger-menu ^1.1.1
  • react-helmet 5.2.0
  • react-resizable ^1.7.5
  • react-sizeme ^2.5.2
  • react-icons ^3.6.1
  • react-typography 0.16.18
  • slugify 1.3.4
  • typography 0.16.18
  • prettier 1.15.3
travis
.travis.yml

  • Check this box to trigger a request for Renovate to run again on this repository

Gif Coverphoto

similar to the Lux coverphoto, but it will be a gif and the clicking the grey arrow should scroll the user down.
Screen Shot 2019-04-06 at 5 56 48 PM

Article Title

Each article will have this as the title, there is a mobile and desktop view depending on media query.

desktop (starts on left side, ends mid way with rounded corners at the right side):
Screen Shot 2019-04-06 at 5 59 33 PM
mobile (bar across the entire screen):
Screen Shot 2019-04-06 at 5 59 40 PM

Bottom Navigation

two links at the bottom of each section that will direct a user to the previous or next section. If the user is at the first or last section, then no arrow will appear.

normal:
Screen Shot 2019-04-06 at 6 05 01 PM

last section example:
Screen Shot 2019-04-06 at 6 05 11 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.