gl2748 / hobbes-detroit Goto Github PK
View Code? Open in Web Editor NEWLicense: MIT License
License: MIT License
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
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.
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.
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/
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.
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
Render a grid of Projects.
Remove scss
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?.'
Sizes: small, medium, large
Color: primary, secondary, tertiary, ...
variant: solid, outline
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.
Use hob-button
Render a nav bar that triggers a scroll to relevant anchortag on the front page, or navigates the user to the front page.
Variants:
h{1-6}
subtitle{1,2}
body{1,2}
button
caption
overline
https://material.io/design/typography/the-type-system.html#type-scale
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.
In the components directory, follow pattern of:
Stitch together components to make login panel
Figure out low effort way to turn stories into tests
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
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}
Very likely similar to the large-media full-bleed media 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
Figma has an svg for all the Hobbes
references.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.