Add new docs website #10896

bvaughn · 2017-09-27T19:50:19Z

Adds a new docs website, built with Gatsby JS, to replace the old Jekyll site. Source code for the new site lives in /www (although markdown and YML data still comes from the legacy /docs folder).

Changes to either markdown or website source code can be previewed on Netlify. The react-js bot should automatically add comments to each PR with preview links. (This preview is generated by running the newly-added yarn build:docs command in the root package.json.)

The majority of the changes in this PR are contained within the new /www directory. However some minor modifications have been made to existing content in the /docs directory:

Modified frontmatter author block to always be an array
Small markdown formatting tweaks

I do have one open question about this PR though. In order to simplify the build script, I added a .nvmrc file to require Node v8.4.0. Is this acceptable? If it is frowned on for any reason, I can update the build script to remove the newer async/await syntax.

Once this PR has been merged, I'll update Netlify and set master as the main branch for the website. Then to make it live (more live) we can merge something like #10856 and push out one final update to gh-pages.

Added css and templates

…pse at top when doubled up

…avior on wider pages (like Typechecking with PropTypes)

…ehavior out of component in favor of using 'react-sticky' lib

flarnie · 2017-09-27T21:45:00Z

Looks like we lost - id: react-dom-node-stream... title: ReactDOMNodeStream from docs/_data/nav_docs.yml. Not sure that was intentional.

gaearon · 2017-09-27T22:02:19Z

It shouldn't be there. (We should make sure it doesn't get added back.)

flarnie · 2017-09-27T22:15:43Z

Great - docs/docs/reference-react-dom-node-stream.md was removed as expected then.

flarnie · 2017-09-27T22:20:17Z

Read through all the changes to /docs and lgtm :)

flarnie

I'd love as many eyes on this as possible, but since all the commits that went into this were already reviewed, and I reviewed the changes to /docs, I think this is good to go whenever.

Of course we should merge at a well chosen time. 😁

flarnie · 2017-09-27T22:26:08Z

I'm going to work on some of the easy a11y fixes that we need, but I'll wait to open a PR untilo after this is merged, so that you don't need to re-do this PR to get the changes in.

KyleAMathews · 2017-09-27T23:30:57Z

www/gatsby-config.js

+          {
+            resolve: `gatsby-remark-images`,
+            options: {
+              maxWidth: 800,


maxWidth of the main content div is 840px

KyleAMathews · 2017-09-27T23:31:25Z

www/gatsby-config.js

+    {
+      resolve: `gatsby-plugin-google-analytics`,
+      options: {
+        //trackingId: `ADD YOUR TRACKING ID HERE`,


This needs copied over from the existing site (I'm assuming you're using Google Analytics — if not remove this)

KyleAMathews · 2017-09-27T23:37:05Z

Two quick plugins you might want to add.

https://www.gatsbyjs.org/packages/gatsby-plugin-twitter/ — Adds Twitter JS for embedded tweets and runs the init function whenver you shift page so if you navigate to a blog post with an embedded tweet, it'll work
https://www.gatsbyjs.org/packages/gatsby-plugin-nprogress/ — adds a progress indicator at the top of a page when you click on a link and a second has passed without all the page resources having arrived. Which is reasonably common on bad mobile connections.

KyleAMathews · 2017-09-27T23:37:16Z

We use both of those on gatsbyjs.org

KyleAMathews · 2017-09-27T23:41:34Z

www/src/components/LayoutFooter/FooterLink.js

+import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
+
+const FooterLink = ({children, target, to}) => (
+  <a


This should use gatsby-link for internal links — probably the cause of #10898

Cool. I suspected that was the case but hadn't had time to dig in yet. Thanks.

bvaughn · 2017-09-28T14:31:29Z

Two quick plugins you might want to add.

Cool, thanks. There are follow-up issues (some on a wiki, gradually converting them to GitHub issues) where gatsby-plugin-nprogress is already added. I'll list gatsby-plugin-twitter too. 😄

bvaughn · 2017-09-28T14:33:52Z

I'm going to work on some of the easy a11y fixes that we need, but I'll wait to open a PR untilo after this is merged, so that you don't need to re-do this PR to get the changes in.

Thanks @flarnie !

This fixes the scrollTop offset issue reported in #10898

bvaughn · 2017-09-28T14:40:45Z

I just read through all of the PR feedback. (Thanks! ❤️ ) I think I've made all suggested changes.

Unless I hear differently, I will merge this PR sometime this morning. Please let me know if you'd like additional time to review.

This was a bug on the old site content too. Resolves #10852

* Added gatsby-plugin-nprogress for slow-loading pages (eg Blog) * Set progress bar color to match React site theme * Updated Gatsby for Blog redirect delay fix

bvaughn · 2017-09-28T17:18:37Z

Thank you everyone for your helpful review commits and tweaks.

Brian Vaughn and others added 30 commits June 30, 2017 09:49

Initial stubbing

d377e54

Initial Gatsby check-in

e5534d6

Added css and templates for new docs

5c43f9e

Merge pull request #2 from joecritch/gatsby

fa50b66

Added css and templates

Removed .ruby-version

e009f3d

Adding layout from mock site

393deb6

Prettier-format code in www

06365e0

Renamed article template

129766a

Initial stab at article template, no data yet

0fed0ef

Stashing to share with Kyle

f4be0dc

Stashing for Kyle

0349931

Typekit

bb39eb7

link to hello-world article

9ecfe1c

Initial syntax highlighting styles

890f5fe

Tweaked home page example code a bit

4ab5788

added sidebar.js component, and tweaked traverse_nav

ce38951

Added yarn.lock file

83a1e84

www README

e9c028e

Hacked in footer nav and sidebar nav (for now)

5244827

Prettier on entire www dir, including configs

6e22c97

fixed sticky nav padding

9b1e126

fixed sidebar when switching pages

efed0be

article typography / removed alt-design class

87b5a40

added edit link back

eae6d60

Replaced a few article-template padding* with margin* to better colla…

d74773c

…pse at top when doubled up

Fixed is-current sidebar item class

40a4246

Fixed some article overflow issues that were causing funky resize beh…

0a5b51e

…avior on wider pages (like Typechecking with PropTypes)

Fixed several issues with margin and max-width on article page

afe9651

Moved sidebar from templates to components

1192edf

Refactored Sidebar to be a component with css-modules. Moved sticky b…

71887fb

…ehavior out of component in favor of using 'react-sticky' lib

flarnie self-requested a review September 27, 2017 22:21

flarnie approved these changes Sep 27, 2017

View reviewed changes

KyleAMathews reviewed Sep 27, 2017

View reviewed changes

fk and others added 4 commits September 28, 2017 11:18

[Gatsby] Pull .gatsby-highlight-code-line to container edge (#10905)

e93df09

Tightened line heights on paragraphs (#10912)

f49baaa

Fix heading line heights (#10911)

b2954f2

Added break-word to inline code, to fix small screen widths (#10910)

4bcf2ca

Added Google Analytics tracking id

759078b

bvaughn mentioned this pull request Sep 28, 2017

[website] Footer links do not reset scroll to top #10898

Closed

Updated internal footer links to use gatsby-link

37cbbea

This fixes the scrollTop offset issue reported in #10898

bvaughn added 3 commits September 28, 2017 07:42

Merge branch 'master' into gatsby

fc28f21

Fixed some broken anchor tags on Test Renderer page

fb77b3d

This was a bug on the old site content too. Resolves #10852

Prettier formats gatsby-node file as well (#10918)

b2ae4b8

bvaughn mentioned this pull request Sep 28, 2017

[website] Add Flow types to website source (/www) #10897

Closed

gaearon and others added 3 commits September 28, 2017 17:46

Rewrite test renderer docs (#10916)

5c64756

Typo (#10919)

63d2f87

Added gatsby-plugin-nprogress for slow-loading pages (eg Blog) (#10917)

a7a4361

* Added gatsby-plugin-nprogress for slow-loading pages (eg Blog) * Set progress bar color to match React site theme * Updated Gatsby for Blog redirect delay fix

bvaughn merged commit 96fde8a into master Sep 28, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new docs website #10896

Add new docs website #10896

bvaughn commented Sep 27, 2017 •

edited

Loading

flarnie commented Sep 27, 2017

gaearon commented Sep 27, 2017

flarnie commented Sep 27, 2017

flarnie commented Sep 27, 2017

flarnie left a comment •

edited

Loading

flarnie commented Sep 27, 2017 •

edited

Loading

KyleAMathews Sep 27, 2017

KyleAMathews Sep 27, 2017

KyleAMathews commented Sep 27, 2017 •

edited

Loading

KyleAMathews commented Sep 27, 2017

KyleAMathews Sep 27, 2017

bvaughn Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

Add new docs website #10896

Add new docs website #10896

Conversation

bvaughn commented Sep 27, 2017 • edited Loading

flarnie commented Sep 27, 2017

gaearon commented Sep 27, 2017

flarnie commented Sep 27, 2017

flarnie commented Sep 27, 2017

flarnie left a comment • edited Loading

Choose a reason for hiding this comment

flarnie commented Sep 27, 2017 • edited Loading

KyleAMathews Sep 27, 2017

Choose a reason for hiding this comment

KyleAMathews Sep 27, 2017

Choose a reason for hiding this comment

KyleAMathews commented Sep 27, 2017 • edited Loading

KyleAMathews commented Sep 27, 2017

KyleAMathews Sep 27, 2017

Choose a reason for hiding this comment

bvaughn Sep 28, 2017

Choose a reason for hiding this comment

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 28, 2017

bvaughn commented Sep 27, 2017 •

edited

Loading

flarnie left a comment •

edited

Loading

flarnie commented Sep 27, 2017 •

edited

Loading

KyleAMathews commented Sep 27, 2017 •

edited

Loading