ibm-frontend / gatsby-starter-carbon--deprecated

Gatsby starter with the Carbon Design System

Gatsby Material Starter

A blog starter with Material design in mind for Gatsby.

Demo website.

GatsbyJS V1

This starter is based on GatsbyJS V1, which brings progressive web app features such as automatic code and data splitting (by route), prefetching, with service worker/offline-first support and PRPL pattern.

More information in the announcement.

Features

• Blazing fast loading times thanks to pre-rendered HTML and automatic chunk loading of JS files
• React-MD for Material design
  • Integrated FontAwesome support
  • Integrated Material Icons support
• SASS/SCSS styling
• Separate components for everything
• High configurability:
  • User information
  • User social profiles
  • Copyright information
  • More!
• Author segment
  • Name
  • Location
  • Description
  • Links
  • Follow Me button
• Posts in Markdown
  • Code syntax highlighting
  • Embedded YouTube videos
  • Embedded Tweets
• Tags
  • Seprate page for posts under each tag
• Categories
  • Separate page for posts under each category
• Suggested posts segment
• Disqus support
  • Notifications about new disqus comments
• Google Analytics support
• Responsive design
  • On mobile, Disqus is loaded only after expanding comments for better performance
• Social features
  • Twitter tweet button
  • Facebook share/share count
  • Reddit share/share count
  • Google+ share button
  • LinkedIn share button
  • Telegram share button
• SEO
  • Sitemap generation
  • robots.txt
  • General description tags
  • Schema.org JSONLD (Google Rich Snippets)
  • OpenGraph Tags (Facebook/Google+/Pinterest)
  • Twitter Tags (Twitter Cards)
• RSS feeds
• Loading progress for slow networks
• Offline support
• Web App Manifest support
• Development tools
  • ESLint for linting
  • Prettier for code style
  • Remark-Lint for linting Markdown
  • write-good for linting English prose
  • gh-pages for deploying to GitHub pages
  • CodeClimate configuration file and badge

NOTE: Take a look at gatsby-advanced-starter if you prefer building UI from scratch and/or only interested in fundamental features.

You can also visit my personal blog if you want to see a fully implemented blog based on this starter.

Getting Started

Install this starter (assuming Gatsby is installed) by running from your CLI:

gatsby new YourProjectName https://github.com/Vagr9K/gatsby-material-starter
npm run serve

Or you can fork the project, make your changes there and merge new features when needed.

Alternatively:

git clone https://github.com/Vagr9K/gatsby-material-starter YourProjectName # Clone the project
cd YourProjectname
rm -rf .git # So you can have your own changes stored in VCS.
npm install # or yarn
npm run serve

Configuration

Edit the export object in data/SiteConfig:

module.exports = {
 blogPostDir: "sample-posts", // The name of directory that contains your posts.
 siteTitle: "Gatsby Carbon Components Starter", // Site title.
 siteTitleAlt: "GatsbyJS Carbon Components Starter", // Alternative site title for SEO.
 siteLogo: "/logos/logo-1024.png", // Logo used for SEO and manifest.
 siteUrl: "https://ibm-frontend.github.io", // Domain of your website without pathPrefix.
 pathPrefix: "/gatsby-starter-carbon", // Prefixes all links. For cases when deployed to example.github.io/gatsby-starter-carbon/.
 fixedFooter: false, // Whether the footer component is fixed, i.e. always visible
 siteGATrackingID: "UA-47311644-4", // Tracking code ID for google analytics.
 postDefaultCategoryID: "Tech", // Default category for posts.
 userName: "Carbon Components User", // Username to display in the author segment.
 userLocation: "North Pole, Earth", // User location to display in the author segment.
 userAvatar: "https://api.adorable.io/avatars/150/test.png", // User avatar to display in the author segment.
 userDescription:
   "Lorem ipsum dolor amet celiac unicorn air plant you probably haven't heard of them. Occupy cornhole swag trust fund lo-fi cardigan lumbersexual dreamcatcher raclette franzen. Bushwick polaroid portland crucifix deep v shoreditch aesthetic. Hella try-hard echo park semiotics. Sartorial normcore retro vaporware selvage before they sold out wayfarers.", // User description to display in the author segment.
 // Links to social profiles/projects you want to display in the author segment/navigation bar.
 userLinks: [
   {
     label: "GitHub",
     url: "https://github.com/https://github.com/ibm-frontend/",
     iconClassName: "fa fa-github"
   },
   {
     label: "Twitter",
     url: "https://twitter.com/_carbondesign",
     iconClassName: "fa fa-twitter"
   },
 ],
 copyright: "Copyright © 2018. Carbon Components User", // Copyright string for the footer of the website.
};

You can also optionally set pathPrefix:

module.exports = {
 // Note: it must *not* have a trailing slash.
      pathPrefix: '/gatsby-carbon-starter', // Prefixes all links. For cases when deployed to example.github.io/gatsby-material-starter/.
}

NOTE: user*, disqusShortname and copyright are optional and won't render if omitted.

WARNING: Make sure to edit static/robots.txt to include your domain for the sitemap!

Theming

Edit src/layouts/theme.scss to suit your needs. You can use Material color palette provided by React-MD.

@import '~react-md/src/scss/react-md';
$md-primary-color: $md-grey-400;
$md-secondary-color: $md-red-800;
$md-tertiary-color: $md-grey-300;

gatsby-starter-carbon--deprecated's Issues

Starter Hello World site

All Gatsby starter sites have a hello world demo page to showcase the starter features: https://www.gatsbyjs.org/docs/gatsby-starters/

We can create a simple hello world page that mirrors the carbon-boilerplate output.

This issue is complete when:

• Hello World page that mirrors the Carbon boilerplate repo has been created
• The styles mirror the look and feel of the Carbon boilerplate output site

PostCover

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Intro to Carbon Components documentation

For developers who are not familiar with the Carbon Design System

This issue is complete when:

• There is basic info about the Carbon Design system in the README.md file of this repo
• There is a link to more information about Carbon

PostTags

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Create Labels for project repo

Either use snugug's reparo app to create labels or do by hand. I suggest using the app. https://github.com/Snugug/reparo

This issue is complete when:

• Labels are available to tag issues.
• Label style guide is available for project repo

Getting Started documentation

Some Gatsby starters have getting started information:

• Typescript
• Material Design

We should have basic Getting Started documentation

This issue is complete when:

• Gatsby CLI commands to start a Carbon Gatsby site have been added to the README.md file in this repo
• Anything else?

Start

UserLinks

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

PostListing

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

PostInfo

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Reduce scope of Navigation component

Currently the Navigation component is the entry point holder for a page's main content. The Navigation component should be narrowly focused on navigation functionality and the main content should be rendered at a different level in the application.

This issue is complete when:

• Navigation does not include a children function prop
• Navigation uses Carbon Components to render navigation of site

SocialLinks

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

About

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

PostSuggestions

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Is this project ready to use?

I'm about to develop a website using gatsby and carbon.
From the project name, this starter looks like a good fit.

But looking at the open issues it seems like the project is not ready yet, could you kindly help to clarify if this starter is ready to use or not?

SEO

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Import Carbon components

Once the Gatsby project has been created, Carbon React components and styles must be imported to be used in creating a Gatsby site.

This issue is complete when:

• carbon-components-react is a dependency in this repo
• Carbon's stylesheet are imported into the demo page
• Importing Carbon React components is straight forward without having to dive deep into node_modules for import paths (Import path resolving)

Create Carbon theme

Using the Carbon theme creation GUI, create theme color variations to show that Carbon can be themed.

This issue is complete when:

• Add 1 or 2 color theming variables

Update README

• Add credit/link back for https://github.com/Vagr9K/gatsby-material-starter
• Update badges for this repo
• Update description
• Add all-contributors

Navigation

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

UserInfo

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Initialize a new Gatsby project

Initialize a new Gatsby project

This issue is complete when:

• The base Gatsby project files are present
• project can build and be hit locally.

ToolbarActions

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Hello world demo screenshots

Once the demo site has been created, we can add screenshots into our documentation

This issue is complete when:

• There are screenshots of demo site in the README.md file in this repo

Add repo files

Add files for explaining Licensing and contribution, add issue and pull request template, add gitignore

Issue is complete when:

• License markdown file is added to repo
• Contribution markdown file is added to repo
• issue template is added to repo
• PR template is added to repo
• .gitignore is added to repo

Submit starter to Gatsby

Once the Carbon starter is ready, we can submit this starter to be added to the Gatsby site.

This issue is complete when:

• The Carbon starter is featured on the Gatsby starters page

Footer

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

PostPreview

Acceptance criteria

• Existing react-md imports are removed and replaced with equivalent carbon-components* if necessary
• Update styles to match design described in this issue or adopt Carbon Design System look and feel
• Use Carbon Components UI color variables instead of hard coded values

Starter features documentation

Create a list of features the starter comes with

This issue is complete when:

• There is a list of features baked into this starter in the README.md file in this repo

Add SCSS compiling

To make custom styling easy to create and maintain we need to add SCSS compiling into the Gatsby build process

This issue is complete when:

• A styles.scss file has been created
• carbon-components is a dependency
• Carbon Components styles are imported into the newly createdstyles.scss file
• SCSS build process has been added to Gatsby's build process

Deploy hello world to GH Pages

Deploy generated Gatsby starter demo to Github Pages

This issue is complete when:

• Pushes to master deploys to GH pages
• The hello world demo can be accessed via https://pages.github.io/ibm-frontend/gatsby-starter-carbon

Convert components into Carbon Design System

Replace any dependency on react-md with carbon-components and carbon-components-react

This issue is complete when:

• Removal of react-md does not break the build
• Demo site adheres to Carbon Design System look and feel

Update starter data to Carbon Components

Replace all mentions of Material Design info to Carbon Components.

This issue is complete when:

• data/SiteConfig.js has been updated
• static/logos/* have been updated
• src/favicon.png has been updated