rockinblocks / rockinblocks Goto Github PK
View Code? Open in Web Editor NEWOpen-source Yarn workspace built with Rockin' Blocks, Storybook, Gatsby, and TinaCMS with document-driven development in mind.
Home Page: https://rockinblocks.io
Open-source Yarn workspace built with Rockin' Blocks, Storybook, Gatsby, and TinaCMS with document-driven development in mind.
Home Page: https://rockinblocks.io
Using Rollup has been really nice and I love how configurable it is, but multiple times I have encountered issues where I have to configure both Rollup and Webpack to work because Storybook uses Webpack. What I would like to do is to basically turn off Rollup, then try to set up Webpack and build, and then see if it works within the Gatsby app. If we can get to that point, then I am fine with getting rid of Rollup.
We are getting a little particular about how users shape their Markdown frontmatter at the top of each document and I want to give folks the ability to create a documentation file easily through riff
---
title: Using the monorepo
date_created: '2020-04-12'
date_updated: '2020-04-12'
keywords: 'monorepo, gatsby, starter'
path: /docs/v0.1.0/monorepo
description: Getting set up with Rockin' Blocks is a breeze.
order: '2.1'
type: document
---
It would be cool to have some type of interactive CLI, but maybe in this early version folks can just give me the name of the file and I will put it in the right spot with some boilerplate in it.
There's already an example of me creating a Block already, but we would need the Subcommands issue completed before this can be completed.
Right now the package is gatsby-plugin-rockinblocks
and it's just sort of a pain to type over and over again. I would like to pull the blocks as a dependency into the plugin, then the plugin as a dependency into the site, and the result should be that we can pull blocks in like this:
import { Container } from "@rockinblocks/rockinblocks"
or maybe even
import { Container } from "@rockinblocks/blocks"
We would still support gatsby obviously but the plugin would simply be a middle layer between the block package and the Gatsby site
Description
There's a bunch of warnings/errors during the installation. Most of these should be pretty easy to fix, but I just have't gotten around to it yet as everything appears to still be working.
โ rockinblocks git:(main) โ yarn
yarn install v1.22.10
info No lockfile found.
[1/4] ๐ Resolving packages...
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]: This package has been deprecated in favor of gatsby-plugin-image. The migration guide can be found here: https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide/.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/strum > react-scripts > [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > [email protected]: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > [email protected]: This loader has been deprecated. Please use eslint-webpack-plugin
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > node-sass > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > node-sass > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > jest-environment-jsdom > jsdom > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > node-sass > node-gyp > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > node-sass > node-gyp > [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > react-styleguidist > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/strum > react-scripts > webpack-dev-server > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > react-styleguidist > webpack-dev-server > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-source-spotify > @types/[email protected]: This is a stub types definition. open provides its own type definitions, so you do not need this installed.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/[email protected]: Switch to 'npm install joi'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-plugin-offline > workbox-build > @hapi/[email protected]: Switch to 'npm install joi'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/strum > react-scripts > workbox-webpack-plugin > workbox-build > @hapi/[email protected]: Switch to 'npm install joi'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > gatsby-cli > @hapi/[email protected]: Switch to 'npm install joi'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > jest-environment-jsdom > jsdom > [email protected]: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > node-sass > request > [email protected]: this library is no longer supported
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > @storybook/react > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > tinacms > @tinacms/fields > react-dropzone > attr-accept > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/strum > react-scripts > workbox-webpack-plugin > workbox-build > [email protected]: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-babel.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/joi > @hapi/[email protected]: Moved to 'npm install @sideway/address'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/joi > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @hapi/joi > @hapi/topo > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > gatsby-cli > gatsby-recipes > @hapi/[email protected]: This version has been deprecated and is no longer supported or maintained
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > gatsby-cli > gatsby-recipes > @hapi/[email protected]: Switch to 'npm install joi'
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > @storybook/react > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-plugin-sass > resolve-url-loader > rework > css > [email protected]: Please see https://github.com/lydell/urix#deprecated
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > @storybook/react > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-transformer-remark > remark > unified > @types/vfile > @types/[email protected]: This is a stub types definition. vfile-message provides its own type definitions, so you do not need this installed.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > tinacms > @tinacms/react-forms > react-beautiful-dnd > @babel/runtime-corejs2 > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
warning workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-plugin-offline > workbox-build > strip-comments > babel-plugin-transform-object-rest-spread > babel-runtime > [email protected]: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.
[2/4] ๐ Fetching packages...
[3/4] ๐ Linking dependencies...
warning " > @rockinblocks/[email protected]" has unmet peer dependency "gatsby@^2.0.0".
warning " > @rockinblocks/[email protected]" has unmet peer dependency "react@^17.0.2".
warning " > @rockinblocks/[email protected]" has unmet peer dependency "react-dom@^17.0.2".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > [email protected]" has unmet peer dependency "gatsby@^3.0.0-next.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has incorrect peer dependency "gatsby@^3.0.0-next.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has incorrect peer dependency "gatsby@^3.0.0-next.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "sass@^1.30.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has incorrect peer dependency "gatsby@^3.0.0-next.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "remark@^9.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "@typescript-eslint/eslint-plugin@^4.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "@typescript-eslint/parser@^4.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "eslint-plugin-flowtype@^5.2.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "eslint-plugin-react-hooks@^4.0.8".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "[email protected]".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "react-final-form@>=6".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "react-tinacms-editor@>=0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "react-is@>= 16.8.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > [email protected]" has unmet peer dependency "core-js@^3.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/riff > [email protected]" has unmet peer dependency "eslint@>=7".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > @wojtekmaj/enzyme-adapter-react-17 > [email protected]" has incorrect peer dependency "[email protected] || 0.14.x || ^15.0.0-0 || ^16.0.0-0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > react-styleguidist > [email protected]" has incorrect peer dependency "react@^16.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > react-styleguidist > [email protected]" has incorrect peer dependency "react-dom@^16.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > react-helmet > [email protected]" has incorrect peer dependency "react@^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/riff > ink > [email protected]" has incorrect peer dependency "react@^16.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @reach/[email protected]" has incorrect peer dependency "[email protected] || 16.x || 16.4.0-alpha.0911da3".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/blocks > @wojtekmaj/enzyme-adapter-react-17 > enzyme-adapter-utils > [email protected]" has incorrect peer dependency "react@^0.14 || ^15.0.0 || ^16.0.0-alpha".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby-tinacms-remark > react-tinacms-editor > [email protected]" has incorrect peer dependency "prosemirror-tables@^0.9.1".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > tinacms > @tinacms/form-builder > [email protected]" has unmet peer dependency "final-form@^4.20.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > tinacms > @tinacms/react-forms > [email protected]" has incorrect peer dependency "react@^16.8.5".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > @reach/router > [email protected]" has incorrect peer dependency "react@^0.14.0 || ^15.0.0 || ^16.0.0".
warning "workspace-aggregator-f0d13013-1945-4a18-a014-8cd78fedb3f2 > @rockinblocks/gatsby-starter-rockinblocks > gatsby > eslint-plugin-graphql > graphql-config > @endemolshinegroup/cosmiconfig-typescript-loader > [email protected]" has unmet peer dependency "typescript@>=2.7".
The submenu items need to look like they're a separate submenu with better spacing to indicate they are nested under the parent
This markup needs to be improved too:
Instead of all existing in a single list, submenus should become a separate ul
:
# Psuedocode
<ul class="nav-top">
<li class="nav-item-top">Introduction</li>
<li class="nav-item-top">Installation</li>
<li class="nav-item-top">Monorepo</li>
<li class="nav-item-top has-submenu">
Blocks
<ul class="nav-sub">
<li class="nav-item-sub">Create a block</li>
<li class="nav-item-sub">Block Structure</li>
</ul>
</li>
</ul>
Where is this code?
blocks/src/components/Elements/Sidebar/Sidebar.tsx
What's the easiest way to fix?
Edit the story blocks/src/components/Elements/Sidebar/Sidebar.stories.tsx
and pass in some values that need to be storted and should include submenus like this:
export const Default = Template.bind({})
Default.args = {
menuItems: [
{
title: "Using the monorepo",
path: "docs/v0.1.0/monorepo",
order: "1.0"
},
{
title: "Using the monorepo",
path: "docs/v0.1.0/monorepo",
order: "1.1"
},
{
title: "Using the monorepo",
path: "docs/v0.1.0/monorepo",
order: "2.0"
},
{
title: "Using the monorepo",
path: "docs/v0.1.0/monorepo",
order: "3.0"
},
],
}
Right now we have a few of my old Markdown files throughout that need to be cleaned up before removing the password protection on the site. We can maybe just convert one of the existing posts to a real first post just talking about what Rockin' Blocks does.
It's sort of a pain to have to dig deep into folders for the Block library that you're using over and over again. I was thinking maybe two options could improve this:
@rockinblocks/blocks
into its own library that is non-dependent on Gatsby. Pull this package into gatsby-plugin-rockinblocks
, make any needed adaptations for Gatsby, and then just pull in gatsby-plugin-rockinblocks
business as usual in gatsby-starter-rockinblocks
yarn blocks:hoist
command that would symlink the Blocks
directory to the top level of the repo. The more I think about this, the more I like this...Eventually we will have a full-fledged brand book but early on let's get a very basic page up where users could download each of our logos -- I find myself looking for these often and even if developers just want to write a blog post about what Rockin' Blocks it would be nice for them to have the proper assets.
Here is Gatsby's:
https://www.gatsbyjs.com/guidelines/logo
Acceptance Criteria
We need simple instructions on the following pieces:
Edit: I started the README but this really needs to be added to the site before considering this complete and for version 0.1.0
I tried to just start over with a new Typescript The gatsby-starter-typescript
is ancient (Gatsby v1) so we will just have to do the best we can and convert the gatsby-default-starter
to TS and get everything to compile which should be easy.
Especially early on things are changing quickly and I want to have a canary
branch that I can send "out into the coalmine" while leaving a stable branch in tact. I saw Next does this and that is smart.
After talking with some of the engineers at Tina, they provided me with this screenshot which admittedly is pretty compelling:
It is clearly important that I get a Next site in place as soon as possible. Off the top of my head, it should be very easy, as I think the only thing that might change would be the <Link>
component.
I didn't realize that this is deprecated; tried to get rid of it, but it is used here:
โ rockinblocks git:(develop) โ yarn why node-sass
yarn why v1.22.10
[1/4] ๐ค Why do we have the module "node-sass"...?
[2/4] ๐ Initialising dependency graph...
[3/4] ๐ Finding dependency...
[4/4] ๐ก Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
- "_project_#@rockinblocks#gatsby-plugin-rockinblocks#rollup-plugin-scss" depends on it
- Hoisted from "_project_#@rockinblocks#gatsby-plugin-rockinblocks#rollup-plugin-scss#node-sass"
info Disk size without dependencies: "140.77MB"
info Disk size with unique dependencies: "152.28MB"
info Disk size with transitive dependencies: "164.98MB"
info Number of shared dependencies: 130
โจ Done in 0.80s.
Maybe we do just get rid of Rollup in general. Looking into alternatives.
I would like to implement the inline Tina forms found here on the Hero block:
https://tina.io/docs/ui/inline-editing/
There is a good working example of these in tina-starter-grande
There are some messages related to package.json
not being able to be found for a few Rollup packages during Yarn install. We may need to add those packages to the nohoist
section of the main package.json so they end up in the Blocks package.
I realized that really we need some way to order the documentation pages for users. I want them to be able to have a top level, and submenus within the sidebar, so I am going to add the ability to stick an order
in the Markdown file like this: order: "1.1"
and then retrieve that in the Sidebar to sort everything.
Right now folks reading the documentation might have a hard time copying and pasting some of the commands to spin up a new site, etc. It would be awesome to have a little header at the top of the CodeBlock that had a simple Copy link that would copy the code to the user's clipboard. I saw this useClippy
package and used it before, it's pretty simple and is supported accross all OS, etc.
Right now riff
can only create a Block, but it would be nice to add subcommands which would support other functionality.
Currently
$ yarn riff --name=TestimonialCard
Ideal usage
# Package installed globally
$ riff block:create --name=TestimonialCard
This would would open open other command possibilities
riff block:list
riff block:create
riff element:list
riff doc:create
riff doc:list
riff page:create
riff page:list
riff update
riff publish
Web Components could be dropped in anywhere, and would prevent us from having to maintain multiple repositories/projects. We could also explore packages that can take a JSON object and convert it to Vue/React/Svelte, but it doesn't seem like as elegant of a solution, as we would always be writing new transformers as new frameworks arise.
https://developer.mozilla.org/en-US/docs/Web/Web_Components
I am almost 100% we can and should do this if possible, but want to get a working version of the Hero in React with testing in place, then try to write the same component with Web Components and still have the tests pass.
I was trying to do something like this to determine if the Button
properly gets wrapped in a Gatsby Link
if there is a to
value:
expect(wrapper.find(Button).find(Link)).toHaveLength(1)
It didn't work right away but I got a bunch of tests in place for the Hero so wanted to just move on
Right now there is just a basic test in place for the Hero. We should get some moderate testing in place making sure that each of the properties properly displays.
Is it possible to support both Lerna and Yarn workspaces? From what I understand, Lerna uses Yarn workspaces under the hood. It would be nice to allow users to choose.
Because Yarn workspaces support seems more foundational, I want to attempt to make Yarn support as robust as I can and hopefully eventually Lerna support would be a cinch.
Feel free to assign this to yourself if you feel you can help take this on and I would be happy to assist where I can, but as for now, this would be slated for a later release.
Everything is in place to add better SEO through react-helmet
, but everything is still pretty generic.
Something throwing this error caused by having flexDirection
stuck on something where we shouldn't. This might be a Row
or Box
somewhere that I changed to a div that's throwing this.
https://raw.githubusercontent.com/yarnpkg/yarn/master/.github/ISSUE_TEMPLATE/bug_report.md
They quietly deprecated Yarn 1 so I want to be sure to switch over. It shouldn't be too bad... ๐ค๐ป
I am obsessed with https://airbnb.design/lottie/ because I think it really makes projects stand out. Would love someone to have some fun and create something with the logo that I can use when pre-loading the page on initial load, or maybe if users hover on the logo.
I encountered some issues and decided to finish out some of the other pieces before trying to tackle this. I would love to get this done sooner than later so we don't get too far behind right from the beginning.
It would be really cool to maybe do some subtle animations on the SVG. The illustrator who made it was kind enough to chop each little piece into its own SVG group so it would be super easy to do.
This might not make it into @rockinblocks/gatsby-plugin-rockinblocks
because I am not sure we would distribute that but we maybe we can just as a demo to people.
I have been testing with the Gatsby layer having zero styles whatsoever (Times New Roman everywhere, etc.). Right now the actual fonts are pulled in through the Gatsby starter layer, but they're being set with the strings like "Poppins" within the blocks, which means they look different in Storybook than in the App.
Let's just pull the fonts into the blocks -- it makes more sense anyways and we can just use Gatsby as a "dump" logic layer, rather than for presentation.
After tests are in place I want to get the cool badges that show the version, success, etc. Gatsby and Next have them on their markdown and we can just steal how they did it from them
Description
I believe it should be fixed within gatsby-starter-rockinblocks/.eslintrc
:
"settings": {
"import/core-modules": [],
"import/resolver": {
"alias": {
"map": [
["@components", "src/components"]
],
"extensions": [".ts", ".js", ".jsx", ".json"]
},
"node": {
"extensions": [".js", ".jsx"]
}
}
},
I tried to map the imports as shown above and couldn't get it working so moved on.
These paths will resolve and compile in both Rollup before publishing and also in Webpack during Storybook, but still needs to be fixed within .eslintrc
and I couldn't get it resolved easily so made an issue. It could be something really simple.
Acceptance Criteria
riff make:block Cards
would make one of these, sans maybe the SVG:
In Order:
data.ts:
Holds data that can shared between both the stories for Storybook and the tests in Jest/Enzyme
Component.scss:
CSS Module with SCSS with all component-related styles
Component.stories.tsx:
Holds the Storybook stories for our component
Component.test.tsx:
Holds Jest/Enzyme tests for the component
Component.tsx:
The actually component
HeroForm.ts:
The form configuration for Tina CMS for this block
index.ts
: The main file for the component used to export out the component and its types
I haven't noticed any issue, but during gatsby build
, I am seeing this:
warn Plugin gatsby-transformer-json is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-plugin-sass is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
warn Plugin gatsby-plugin-google-tagmanager is not compatible with your gatsby version 2.32.13 - It requires gatsby@^3.0.0-next.0
We may need to roll those back to previous versions in this release, with the hopes of just upgrading to Gatsby 3 ASAP.
I couldn't get the site to build when initially setting up CI/CD, so as a sanity check I moved all the dependencies from our projects into the dependencies
section of their respective package.json
. We should take the time to make sure only items that anything we an move to devDependencies
and still have it build successfully in the pipeline should be moved over.
This is a plugin that we can just pull in that will automatically autolink the headers so that they are shareable like GitHub style. I would love to maybe someday not use a plugin for this as I think that we can maybe, but why re-invent the wheel here.
https://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/
Eventually we will have a full-fledged brand book but early on let's get a very basic page up where users could download each of our logos -- I find myself looking for these often and even if developers just want to write a blog post about what Rockin' Blocks it would be nice for them to have the proper assets.
Acceptance Criteria
I was going to just add a loader, as this only occurs the first time the user loads the site, the Gatsby routing passes the user around without loading the page again.
That said, this sucks. I wonder if it is the fonts? I can look into this, but would love to fix this ASAP or get the loader up.
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.