New, static site starting from Gatsby starter kit #14

shilman · 2017-04-28T05:49:22Z

Issue: #5

What I did

Ported the old CRA app to gatsby so that the site would be statically generated and indexable from Google. Gatsby and CRA work a bit differently, so I had to hack around to get things working properly.

Major differences from old site:

Now, instead of authoring .js files for content, we author .md files, which is more user-friendly. They also render properly in Github source code tree.
In old site, URLs were of the form /docs/cat/section/item. In the new site, /docs/cat/section/item/.
In the old site, you could navigate to /docs/cat/section and it would dynamically pick out the first item in the section. In the new site, that is handled in the navigation, so all links navigate to specific articles/items. Linking to /docs/cat/ or /docs/cat/section will 404.
In the old site there were multiple categories. In the new site, there is a single category, react-storybook, for now.
Removed category navigation at the top of the docs page for now.

Still needed

favicon
Use react-router Link instead of a

How to test

npm install
npm run storybook
npm run develop

Deploying

Deployment is handled using the gh-pages package, that was used by the Gatsby starter kit. I haven't tested it yet.

Work in progress: ported storybooks content Still needs: - two-level nav hierarchy - styling improvements - stories ;-)

usulpro · 2017-04-28T06:38:54Z

@shilman It the great start! I like the gatsby! I'd be happy to help with it 👍

shilman · 2017-04-29T01:31:44Z

Thanks @usulpro! Let's coordinate with @mnmtanish who is also going to help. Since @mnmtanish worked on the original CRA app, he may have some strong opinions about the transition. I just wanted to get things going because currently https://storybooks.js.org is not getting indexed by Google.

The biggest missing items from the old site right now are:

two-level menus on the left + responsive behavior
styling
edit on github link
storybook 😄

Use index.md so that images show properly in github, e.g.: ```md ![Login Form](../static/login_form.png) ```

usulpro · 2017-05-01T13:49:17Z

a few more issues with the old site:

wrong navigation menu behavior on Chrome Android
missing section with full API description
missing section with Storybook related publications/media

arunoda · 2017-05-01T18:50:05Z

This is pretty cool.

shilman · 2017-05-02T02:55:24Z

@usulpro @mnmtanish finally figured out how to merge the old code with gatsby, so hold off on contributing until I check in my latest iteration.

@usulpro I think those issues with previous site probably deserve to be standalone issues. Let's work it out as soon as I am back to parity with the original site. 😸

- get rid of sections concept temporarily - markdown is already parsed to HTML by gatsby

shilman · 2017-05-02T06:31:20Z

@usulpro @mnmtanish Got it working with some hackery! Please check it out and let me know wha you think. You can now run storybooks. I think we can merge with a little more work.

Resolve conflicts merging source changes # Conflicts: # components/Docs/Container/index.js # src/docs/react-storybook/configurations/custom-webpack-config.js

usulpro

Looks great! In general, everything runs fine. Should we merge it and consistently solve issues?

usulpro · 2017-05-02T14:25:50Z

I tried to test deploying by this steps:

npm run build
gh-pages -r https://github.com/UsulPro/storytest.github.io.git -d public -o origin -b master

Everything passed without any errors. Result is https://usulpro.github.io/storytest.github.io/
But at this moment available only the home page

shilman · 2017-05-02T22:53:48Z

html.js

@@ -5,6 +5,7 @@ import DocumentTitle from 'react-document-title'
 import { prefixLink } from 'gatsby-helpers'
 import typography from './utils/typography'
 import { colors } from 'utils/colors'
+import favicon from './design/homepage/storybook-icon.png'


@usulpro seems unused?

usulpro · 2017-05-03T04:58:09Z

html.js

@@ -28,7 +28,7 @@ class HTML extends Component {
            content="width=device-width, initial-scale=1.0"
          />
          <title>{title}</title>
-          <link rel="icon" href="favicon.ico" type="image/x-icon" />
+          <link rel="icon" href={favicon} type="image/x-icon" />


That is exactly what I mean! Sorry, I made a typo yesterday
funny that it doesn't cause an error in console since you added favicon.ico to the project root

thanks for figuring it out!

shilman · 2017-05-03T06:22:11Z

@usulpro regarding your test deploy, there is a variable linkPrefix = "/" in config.toml that you can adjust if you are deploying to another location. I'm not sure I respect it properly in the code because I was trying to reuse as much of the previous site as possible.

New, static site starting from Gatsby starter kit

34de975

Work in progress: ported storybooks content Still needs: - two-level nav hierarchy - styling improvements - stories ;-)

shilman added do not merge help wanted labels Apr 28, 2017

shilman added 4 commits May 1, 2017 16:49

Add edit-this-page link

da08abd

Rename doc.md to doc/index.md

0e969e4

Use index.md so that images show properly in github, e.g.: ```md ![Login Form](../static/login_form.png) ```

Global styling

8774f7c

Remove auto-generated files and fix deprecation errors

1443d41

Use original docs components and styling inside gatsby

531b15a

- get rid of sections concept temporarily - markdown is already parsed to HTML by gatsby

shilman requested review from arunoda, tmeasday, thani-sh, xavxyz and usulpro May 2, 2017 06:36

shilman added 3 commits May 2, 2017 17:30

Merge branch 'source' into 5-gatsby-static-site

1105780

Resolve conflicts merging source changes # Conflicts: # components/Docs/Container/index.js # src/docs/react-storybook/configurations/custom-webpack-config.js

Restore CNAME

fecad1e

Cleanup unused function

e972dfa

usulpro approved these changes May 2, 2017

View reviewed changes

Add favicon

4df1247

shilman commented May 2, 2017

View reviewed changes

Fix favicon

5840f27

usulpro reviewed May 3, 2017

View reviewed changes

shilman added 2 commits May 3, 2017 15:00

Remove container wrapper to fix layout issues

c650bf1

manually add CNAME to build process

ac036e0

shilman added 2 commits May 3, 2017 15:29

Ignore public files generated by gatsbyjs

e94c97d

Fix code highlighting

a76119b

shilman merged commit 007f548 into source May 3, 2017

shilman mentioned this pull request May 3, 2017

Using React Storybook with Gatsby gatsbyjs/gatsby#633

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

New, static site starting from Gatsby starter kit #14

New, static site starting from Gatsby starter kit #14

shilman commented Apr 28, 2017 •

edited

Loading

usulpro commented Apr 28, 2017

shilman commented Apr 29, 2017 •

edited

Loading

usulpro commented May 1, 2017 •

edited

Loading

arunoda commented May 1, 2017

shilman commented May 2, 2017

shilman commented May 2, 2017

usulpro left a comment

usulpro commented May 2, 2017

shilman May 2, 2017

usulpro May 3, 2017

shilman May 3, 2017

shilman commented May 3, 2017

New, static site starting from Gatsby starter kit #14

New, static site starting from Gatsby starter kit #14

Conversation

shilman commented Apr 28, 2017 • edited Loading

What I did

Still needed

How to test

Deploying

usulpro commented Apr 28, 2017

shilman commented Apr 29, 2017 • edited Loading

usulpro commented May 1, 2017 • edited Loading

arunoda commented May 1, 2017

shilman commented May 2, 2017

shilman commented May 2, 2017

usulpro left a comment

Choose a reason for hiding this comment

usulpro commented May 2, 2017

shilman May 2, 2017

Choose a reason for hiding this comment

usulpro May 3, 2017

Choose a reason for hiding this comment

shilman May 3, 2017

Choose a reason for hiding this comment

shilman commented May 3, 2017

shilman commented Apr 28, 2017 •

edited

Loading

shilman commented Apr 29, 2017 •

edited

Loading

usulpro commented May 1, 2017 •

edited

Loading