gl2748/hobbes-detroit

hobbes-detroit's Issues

Add JPG support to media.

Add 'Primary color' and 'Secondary Color' fields to the Project entity in Netlify CMS.

This can be a string field - an Hexadecimal reference to a HTML color, choosen using some online tool like:
https://www.google.com/search?q=colorpicker

Primary Color
and
Secondary Color

Footer component.

Footer component per figma design.
Client login, triggers login panel to open.
Other links, navigate user to relevant pages as generated by the CMS.

Set root dir for absolute module paths:

https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

Make root gatsby-node.js typescript, using this pattern:

https://gist.github.com/clarkdave/53cc050fa58d9a70418f8a76982dd6c8

Project header field component.

Add SVG field to Project.

Each project should have an 'main SVG' file-field type that accepts only an SVG image. It's used to represent the project on the front page 'work index' grid.

Create Test content.

In the CMS create Projects so that front end development can happen using real data. Ideally once these projects are created, they can live on a branch that can be pulled in whenever a new feature is being developed, giving a stable and consistent set of Projects to develop against.

• Featured project.
• Protected project.
• Regular Project.

.jpeg / .png / .gif - File media type component.

Given an uploadcare url that refers to a file type of either .Jpeg, .Png or .gif render this image to the page in such a way that it is optimized for the device and even the network speed.

An ideal image component would be ideal:
https://github.com/stereobooster/react-ideal-image/blob/master/introduction.md

Ideally .gif assets will use uploadcare's gif -> video endpoint:
https://uploadcare.com/docs/image_transformations/gif2video/

Ensure all CMS fields are generic file upload fields.

All media fields within the Netlify CMS config.yml definition should be agnostic of the file type being uploaded. With #26, we will instead discover what type a file is at Build time, with that data being available for the front end, and allowing it to decide how they are to be rendered.

.json file type component.

Given an uploadcare URL - this component
Should be able to play a .json file exported from Adobe After Effects 'BodyMovin' plugin.
The Lottie web player is an option, https://codepen.io/MarioD/pen/dybGJaB?&page=1

Project Index Grid

Render a grid of Projects.

• Render the project's main image - a URL that references an SVG hosted by uploadcare.
• background to the SVG is the color of the project's primary color field.
• Protected projects have a 'padlock' icon.
• Project Title displays under the svg.

Add prettier commit hook

Add emotion css

Remove scss

Uploadcare transformer plugin for gatsby.

Write a plugin that looks for Uploadcare URLs in markdown files generated by the CMS, and fetches the metadata for the files / assets that these URLs refer to. The plugin should save this metadata as GraphQL nodes at build time. This will let the front end know how to render the asset at the uploadcare URL, e.g. 'Is this a url for an image? A JSON file? an SVG?.'

Hobbes Logo component.

Render the hobbes logo SVG to the page. At a push expose some of the SVG attributes as props, so that the SVG can be rendered at different sizes, different fills and different strokes.

Icon component

Sizes: small, medium, large

Color: primary, secondary, tertiary, ...

variant: solid, outline

Front page hero Carousel component.

Given an array of Uploadcare Urls, referring to bodymovin .json files, Display a carousel of these animations.
Carousel should have a forward and back control, and a counter to indicate which slide number is currently being viewed. Clicking on the slide should navigate the user to project page for that slide.

• Forward and back controls.
• Current slide number, and total slide count display.
• Current slide's project title display.
• Click to navigate to Project page.
• On Click front page background color should become the 'projectColor' color of the currently displayed featured project.

Studio Info Component.

Display the relevant info from the CMS, including:

• Studio Title.
• Studio Blurb.
• Studio contact, address, tel, email.
• Social media links.

Project large media field component.

• Display media at full screen width.
• bleed prop - optionally display media without any margin or padding.

Rename 'Description' Required field: 'Meta-Description' - to indicate it is to be used in Helmet.

Icon button component

Use hob-button

Nav Bar component.

Render a nav bar that triggers a scroll to relevant anchortag on the front page, or navigates the user to the front page.

• When Nav appears on front page Scroll to Studio section.
• When Nav appears on front page Scroll to Work / Project index section.
• When Nav appears on Project page, clicking Studio will scroll to the bottom of the current project page.
• When Nav appears on Project page, clicking Work will navigate to the front page #Work index anchor tag.
• Nav Bar is a fixed-position element that remains in the upper right of the screen as the user scrolls.

Typography component

Variants:

h{1-6}
subtitle{1,2}
body{1,2}
button
caption
overline

https://material.io/design/typography/the-type-system.html#type-scale

Project gallery component.

• Display an array of media items('Slides') in a 'carousel' with forward and back navigation.
• Next slide visible to the right hand side.

Project text area field component.

• handles multiple columns. (1 thru 3) column layout.
• handles Markdown, e.g. titles, quotes, code, headers etc...

Project Tag field component.

Write a source plugin for uploadcare nodes.

The netlify CMS is configured to manage assets through the service, 'uploadcare'. These uploads appear in the markdown that is parsed by gatsby as URLs. We will need to know about what assets are behind these URLS, so we need to fetch info about these assets at build time, this will let us know how to render the asset at a given url.
To do this write a gatsby source plugin, that parses extant nodes for uploadcare urls, and then queries the uploadcare api for the UUID in the URL, we should store the response as a gatsby-node that can be queried by graphql.

Drawer component

https://material-ui.com/components/drawers/

Add Image to helmet. Add a required JPG image field to project, that goes into helmet meta.

Move all components into their own folder.

In the components directory, follow pattern of:

• ComponentName
  • index.tsx

.svg file type component

Project media grid field component.

• Media grid with optional captions.
• Media grid with captions disabled.
• 1 thru 6 items grids.

Portal component

Stitch together components to make login panel

Add storybook

Figure out low effort way to turn stories into tests

Input component

https://material.io/develop/web/components/input-controls/text-field/

hob-text-field

Ideally - Project Should handle empty modules from CMS so that the build succeeds when no modules are added to a project.

2:47:47 PM: error #95313 TypeError: Cannot read property 'map' of null
2:47:47 PM: Building static HTML failed for path "/project/google_clocks/"
2:47:47 PM: See our docs page for more info on this error: https://gatsby.dev/debug-html
2:47:47 PM:   497 |       {helmet || ""}
2:47:47 PM:   498 |       <ModulesContainer>
2:47:47 PM: > 499 |         {modules.map((module, i) => (
2:47:47 PM:       |                  ^
2:47:47 PM:   500 |           <CMSModule
2:47:47 PM:   501 |             {...module}
2:47:47 PM:   502 |             key={
2:47:47 PM: 
2:47:47 PM:   WebpackError: TypeError: Cannot read property 'map' of null
2:47:47 PM:   
2:47:47 PM:   - index.tsx:499 Project
2:47:47 PM:     src/components/Project/index.tsx:499:18
2:47:47 PM:   
2:47:47 PM: 
2:47:47 PM: npm
2:47:47 PM:  ERR! code ELIFECYCLE

Create Auth flow for users to confirm their accounts, create passwords and reset passwords.

When a user clicks on a link in an email, to either confirm their email address and create a password, or to reset a password. We need to make sure the correct form is presented to them when they navigate to the site. And that netlify handles the form submission correctly. I think there has been a regression in the implementation of the netlify identity widget that we're using:
Basic Wrapper: https://github.com/sw-yx/gatsby-plugin-netlify-identity
and
https://github.com/sw-yx/react-netlify-identity-widget

It might be the case of simply checking for

const identity = useIdentityContext()

And if identity is present, but there is no username, or some other indication that this is not a fully fledged user, show the netlify modal, and letting that do the password creation and reset link.
e.g.

import IdentityModal, { useIdentityContext } from "react-netlify-identity-widget"
const identity = useIdentityContext()
...
{identity && IdentityModal}

Project Banner field component.

Very likely similar to the large-media full-bleed media component.

Button component

https://material.io/design/components/buttons.html#usage

variants: text, outlined, contained, toggle

icon as child for left or right

Typical event handler props

Add hobbes letters svg

Figma has an svg for all the Hobbes references.