A Carbon inspired Gatsby theme
Home Page: https://gatsby.carbondesignsystem.com/
License: Apache License 2.0
❗ This project is maintained by community contributions. The original contributor, Carbon Design System, is no longer involved in maintaining this project.
The Gatsby Carbon theme includes all the configuration you need to build a beautiful site inspired by the Carbon Design System.
The Gatsby Carbon theme includes all the configuration you need to build a beautiful site inspired by the Carbon Design System.
![carbon-automation[bot] avatar](https://avatars.githubusercontent.com/u/25179978?v=4 "carbon-automation[bot]")
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
![kodiakhq[bot] avatar](https://avatars.githubusercontent.com/in/29196?v=4 "kodiakhq[bot]")
When the page is resized vertically to be smaller than the list in the nav, the LeftNav does not scroll, preventing the user from seeing the full list. This is also true on mobile emulation; although some range of vertical motion is available the list is still truncated.
Config: search and manifest options. Additional, recommended, plugins for extension.
Shadowing -> components meant to be shadowed and best practices for doing so.
Similar in spirit to #11 -- involves usage of Gatsby's pathPrefix variable (https://www.gatsbyjs.org/docs/path-prefix/).
I believe that LeftNavItem is not using Gatsby's pathPrefix correctly, which means that prefixes set by the consumer are not being resolved & paths in the left nav bar are not correct.
As is the case with the HeaderName component, it appears as though LeftNavItem is passing through Gatsby's Link, which should resolve a pathPrefix correctly and generate the correct path. However, pathPrefix is being ignored in my case.
Let me know if you need to see an example of this in our repo. Our project is correctly in GHE. 👍
Nav should stay in place when new link is selected. Probably only a problem with components.
There are some alignment bugs occurring around some core components. Notably the PageHeader and Footer components.
The title text is different than the IDL implementation
Looks to be some padding issues in relation to the content
Sorry I know this is still a WIP so feel free to ignore/close this if it's a known issue.
I noticed a few styling inconsistencies from the Carbon site:
This plan captures our work on the Website project for May. This work will consist of the content for the Patterns presentations for June, content updates to the Carbon website and the build-out of the IBM Design Language website and underlying Gatsby theme work in order to make that happen.
Also included is providing assistance to /design/ai developers for their release and managing the build of the brand guidance site contractors to ensure adherence to our models and architecture.
@jeanservaas add issues here
1st or 2nd week of June, 2-day training
This is work to continue to iterate and improve upon the content on the Carbon website.
Current:
Expected:
I think the container should go into gutter as well. Seems to do so in Carb site
##enhancement[app switcher]: animation update
Why:
After the truncation of the app switcher in issue #57 it no longer makes sense for the panel to push in from the side. Now that it floats, the panel animation should emulate the behavior of an overflow menu.
1px, Gray 80 stroke animates up 90 degrees to include the "close" icon in the component when the floating app switcher opens
In desktop, panel should animate on like an overflow menu; in mobile, the animation remains a side push and still takes over the screen vertically
Add default styling for markdown blockquote
> this is a blockquote in markdown
output
<blockquote>this is a blockquote in markdown</blockquote>
Design example https://www.ibm.com/design/language/philosophy
Why:
The app switcher now is mirroring the left nav behavior almost exactly which is confusing to the user; by keeping the left nav anchored and floating the global app switcher we create a clearer hierarchy between the two.
Where:
This floating app switcher remains a global element across all practices... we just want to make that function clearer. It does not change color when the local content changes, it operates on a separate logic / independent of the local left nav.
All type and core / interative color tokens, dropshadow and most geometries remain the same
Add subheads
shorten app switcher in Max, XL, Lrg and tablet breakpoints (truncate app switcher 24px after the last link item block
1px, Gray 80 stroke animates up 90 degrees to include the "close" icon in the component when the floating app switcher opens
In desktop, panel should animate on like an overflow menu; in mobile, the animation remains a side push and still takes over the screen vertically
Check with Jeannie. 
https://www.carbondesignsystem.com/experimental/ui-shell/usage
This is already using the Carbon code snippet component, however, it has a bunch of style overrides to make it look like its using the dark theme.
page.scss to a video.scss file.There should also be a max width. The sample below right is about as long as line should before going to two lines. I also wonder if we limit this to one line to force keeping these very simple, short and sweet.
Issue: Body copy width too short on the Carbon site. The DL site lengthened it a while ago, and the DL body copy width is the one Mike would like the Gatsby template to match.
This includes all copy (intro paragraphs too)
The Aside component will be a wrapper component used inside a <Col> component for sidebar callout text. You should be able to place any markdown inside of it.
<Aside>
#### Good design is always good design.
What we borrow from our own design history is not a mid-century aesthetic in stylistic terms, but the modernist attitudes and approach used at the time.
Eliot Noyes taught us brand is character, and should be built thro.....
</Aside>
Design spec
https://www.ibm.com/design/language/philosophy
/component-examples/markdownWarning: Failed prop type: Invalid prop `children` of type `object` supplied to `Code`, expected `array`.
in Code (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by Grid)
in Grid (created by Context.Consumer)
in Main (created by Default)
Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `CodeSnippet`, expected `string`.
in CodeSnippet (created by Code)
in Code (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by Grid)
in Grid (created by Context.Consumer)
in Main (created by Default)
in a (created by MDXProvider)
/component-examples/DoDontExamplethink it's just missing the title
Warning: Failed prop type: The prop `title` is marked as required in `Vimeo`, but its value is `undefined`.
in Vimeo (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by DoDontExample)
in div (created by DoDontExample)
in div (created by DoDontExample)
in div (created by DoDontExample)
in DoDontExample (created by MDXCreateElement)
in MDXCreateElement (created by MDXContent)
in div (created by Column)
Inline code styles are being applied globally. Not sure if this is intended:
Right now the Header component has a hard coded path: https://github.com/carbon-design-system/gatsby-theme-carbon/blob/master/packages/gatsby-theme-carbon/src/components/Header.js#L29
<HeaderName prefix="" to="/" element={Link}>
The / path won't work for many consumers, particularly those whose sites are built on a subdomain or subdirectory. For example, I'm unable to use Github Pages (gh-pages) to build my site to a https://pages.github.com/{ORG}/{REPO} path... the / simply leads to https://pages.github.com/.
Gatsby has a way to fix this with a pathPrefix variable in the site config: https://www.gatsbyjs.org/docs/path-prefix/. However, when I set a pathPrefix in my site config, that variable is ignored. Even though Gatsby's Link component is being passed through here (which should resolve the pathPrefix), the paths remain unaltered.
Let me know if you need to see an example of this in our repo. Our project is correctly in GHE. 👍
Not sure if we want to explore a different image loading strategy. Also not sure why my screen recorder jumped, not related.
Sidebar font-weights broke due to a regression from the type changes yesterday
if scrolling fast they disappear but hover is still there. Check screen video.
Screen Recording 2019-05-20 at 3.34.17 PM.zip
Seems fine in Chrome
We need to look into how devs could signal from MDX to use the larger page header for a specific page. One approach is to provide an alternate layout for them to export. This is how the Homepage is handled atm. This would be appropriate if the layout was dramatically different.
Another is option is to export a variable/options object that would be passed down on the page context: https://gatsby-mdx.netlify.com/misc
The lead space should have two options. the shortie that Carbon uses on component pages for example and the one the DL site uses which is the next size up. I think it’s 320. Both sizes will be needed I think.
If you have a pathPrefix (i.e., https://www.gatsbyjs.org/docs/path-prefix/), then generated paths for component page tabs are incorrect. See here: https://jendowns.github.io/gatsby-theme-carbon/components/accordion/code (make sure there's no trailing slash, otherwise currentTab is empty 😬 )
So all of your tab paths on component pages will 404.
To demonstrate this, I made a sample repo ( https://github.com/jendowns/gatsby-theme-carbon) by forking gatsby-theme-carbon and then did this:
pathPrefix because my deployment has a subdirectory in the path: https://github.com/jendowns/gatsby-theme-carbon/blob/master/packages/example/gatsby-config.js#L2The key is that you need to deploy to an environment, like Github Pages, that has subdirectories in the path.
Using v0.5.2...
When I added gatsby-plugin-sass, I was unable to run gatsby develop locally:
success open and validate gatsby-configs — 0.025 s
success load plugins — 0.404 s
success onPreInit — 0.002 s
success initialize cache — 0.006 s
success copy gatsby files — 0.105 s
success onPreBootstrap — 0.010 s
success source and transform nodes — 3.597 s
success building schema — 0.183 s
success createPages — 0.000 s
success createPagesStatefully — 1.159 s
success onPreExtractQueries — 0.000 s
success update schema — 0.028 s
success extract queries from components — 0.093 s
success run static queries — 0.019 s — 4/4 217.88 queries/second
success run page queries — 0.047 s — 69/69 1480.86 queries/second
success write out page data — 0.004 s
success write out redirect data — 0.001 s
success Build manifest and related icons — 0.001 s
success onPostBootstrap — 0.002 s
info bootstrap finished - 7.548 s
error (node:26977) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
error (node:26977) DeprecationWarning: Resolver#doResolve: The type arguments (string) is now a hook argument (Hook). Pass a reference to the hook instead.
error There was an error compiling the html.js component for the development server.
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
WebpackError: ./node_modules/gatsby-theme-carbon/src/components/LeftNav/LeftNavItem.module.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] develop: `gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] develop script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jendowns/.npm/_logs/2019-05-16T20_36_19_858Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.yarn add gatsby-plugin-sassgatsby-config.jsyarn develop / gatsby developCaptions on the Carbon site are built into the image component. With the removal of the need for the offset class, we don't need the image component as a default. We can just place inside our <Col> component to have it display at the correct width.
However, this means we need a separate Caption component
<Caption>This is the caption</Caption>
or
<Caption className="my-custom-class">This is the caption</Caption>
html output should be
<div class="bx--col-lg-4 bx--col-md-4">
<p class="bx--caption my-custom-class">Glyph usage in Buttons</p>
</div>
sass
@include carbon--type-style('body-short-01');
padding-top: $spacing-03;
margin-bottom: $spacing-06;
margin-top: -$spacing-06; // to account for default spacing below images
$spacing-06
auto generate "Last modified" date.
See Carbon website for more info
Create a reusable tile component. Determine which options are needed, look at IDL, ibm.com/design, Carbon, IDR, AI sites to make sure it covers all of them.
All links on the page need the bx--link styles. https://www.carbondesignsystem.com/components/link/code
Currently, we are using the old motion variables $transition--base and $carbon--standard-easing for motion across the site.
We should work on consuming the motion package from carbon-elements and standardizing motion across the website.
As is:
To be:
Markdown components
Core site components
DL Theme components
@vpicone @alisonjoseph
Need to add bottom right type size to "Article cards"
These cards should all be larger type
https://ibmbrandcenter-preview.mybluemix.net/expression
It’s like the one used here:
https://www.ibm.com/design/practices/
I almost thing we need every header sample you did in "Resource card" also in use for "Article cards"
This is happening on this page https://github.com/carbon-design-system/design-language-website/blob/master/src/pages/philosophy/pov.mdx
possibly related to it being a top level page with tabs?
@vpicone to add details
This is basically a content update; most tokens and interactive states remain the same, there's just an addition of a subhead token; some disabled links and tweaks in vertical spacing to accommodate the subheads.
Cupcake issue for #57
add subheads
tweak vertical spacing according to spec
Content urls:
Design: https://www.ibm.com/design/
IDL: https://www.ibm.com/design/language/
Brand Center: (unknown)
Product: https://www.carbondesignsystem.com/
Digital: https://www.ibm.com/standards/web/
Events: (unknown)
IBM Enterprise Design Thinking: https://www.ibm.com/design/thinking/
IBM design Research: https://www.ibm.com/design/research/
IBM AI: (unknown)
IBM iX: https://www.ibm.com/services/ibmix/
@shixiedesign commented on Wed Jan 02 2019
Dev issue for issue carbon-design-system/carbon-website#473
The global search is really only helpful for documentation sites, it should be disabled by default but accessible as an option for sites wanting to enable search functionality.
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.
