[WIP][www] Sidebars à la reactjs.org (accordions, scrollspy) #6153

fk · 2018-06-26T01:07:42Z

…this time against master instead of v1 (ref. #6076 and fk#2).

…this time against master instead of v1 ✨

# Conflicts: # www/src/templates/template-docs-markdown.js

gatsbybot · 2018-06-26T01:15:24Z

Deploy preview for gatsbygram ready!

Built with commit 6769c19

https://deploy-preview-6153--gatsbygram.netlify.com

gatsbybot · 2018-06-26T01:24:42Z

Deploy preview for using-drupal ready!

Built with commit 6769c19

https://deploy-preview-6153--using-drupal.netlify.com

calcsam · 2018-06-26T03:17:44Z

www/gatsby-node.js

@@ -4,7 +4,7 @@ const path = require(`path`)
 const parseFilepath = require(`parse-filepath`)
 const fs = require(`fs-extra`)
 const slash = require(`slash`)
-const slugify = require(`limax`)


btw, is this intentional?

The ReactJS implementation uses slugify to construct URLs on client side. Initially I copypasta'd that and switched to slugify because limax is quite a bit heavier.

Then I changed the implementation to directly use the yamls href value, so we don't need slugify on the client anymore; left slugify in there because for us they both work the same essentially.

calcsam · 2018-06-26T03:22:32Z

www/src/components/sidebar/sidebar.js

+              width: rhythm(12),
+            },
+            [presets.Hd]: {
+              width: rhythm(14),


can we get rid of this setting? It feels really wide here on my 15" screen -- and window isn't even fully expanded

calcsam · 2018-06-26T03:27:05Z

Looks great! Only question is my previous one:

It's easy see how we could expand the Docs section to add in new Docs sections. How will this work on the tutorial section? Main question is -- how will subsequent tutorials be discoverable, since everything we put after the main tutorial series will be so far below the fold? Collapse everything by default? Nest everything under a Introduction to Gatsby section that is opened by default on the /tutorial route, that can be fully collapsed with one click? Etc.

calcsam

Looks great!

m-allanson · 2018-06-26T09:25:52Z

Looking good! Preview URL: https://deploy-preview-6153--gatsbyjs.netlify.com/

I changed a Bound Action Creators to Actions.

Some thoughts / questions:

Is it possible to update the scroll position of the sidebar when changing pages in the mobile layout?

In a small browser window:
- go to https://deploy-preview-6153--gatsbyjs.netlify.com/tutorial/
- tap the menu button
- scroll to the bottom and tap to go to part 8 of the tutorial
- tap the menu button
The menu will open with the scroll position set to 0, instead of being scrolled to the currently selected page.
Would it be useful for the top level docs headers to link through to their own page for non-JS users?
- disable JS
- go to https://deploy-preview-6153--gatsbyjs.netlify.com/docs/
- click a top level heading like Guides or Reference
- nothing happens :)
  
  A fix would be to create a page for each top level item and have the sidebar link to those pages for non-JS users. I realise this is probably out of scope and probably not that important. Feel free to ignore!

Edit: my commit dismissed @calcsam's review, you should consider this still approved by him ✅.

fk · 2018-06-26T11:18:21Z

@m-allanson

I changed a Bound Action Creators to Actions.

D'oh, thanks for catching that! And I was so proud for catching the changed link and Tutorial Part 8! ;-)

Is it possible to update the scroll position of the sidebar when changing pages in the mobile layout? The menu will open with the scroll position set to 0, instead of being scrolled to the currently selected page.

👍 Yeah for sure! We also want that for desktop, same issue there with the stuff further down.

Would it be useful for the top level docs headers to link through to their own page for non-JS users?

Yeah, also wondered about that. Also I think we either need to throw in a <h3> again (this currently just uses a <button>) or update how we feed data to Algolia:

# Conflicts: # www/src/components/sidebar-body.js

m-allanson · 2018-06-27T11:05:47Z

@fk 👍 The selectors used by Algolia are configured over here https://github.com/algolia/docsearch-configs/blob/master/configs/gatsbyjs.json#L36.

* measure banner/navigation offsetHeight instead of hardcoding offset pixel value (WiP, doesn’t take non-fixed navigation on smaller screens into account yet) * right-aligned, calmer chevron * add visual separator for expanded section * bring „Tutorial“ bullets in line with design * increase sidebar inner whitespace * bring back SectionTitle <h3> (Algolia; IIRC this is semantically incorrect -> WiP)

fk · 2018-06-27T16:54:33Z

@m-allanson aceb421 brings back <h3> to the section titles.

I just chatted about this PR with @calcsam a few minutes ago. We decided to merge this as-is and follow up with issues tracking the remaining work.

fk · 2018-06-27T16:55:12Z

Can I get another review @calcsam? 🙏 😉

m-allanson

👍

calcsam · 2018-06-27T17:06:47Z

www/src/components/sidebar/section.js

+    let { isActive } = this.props
+    if (section.disableAccordions) {
+      isActive = true
+    }


don't modify props -- do something like:

const isActive = this.props.isActive || section.disableAccordions

Oh dang! 😁 Babysteppin'…

calcsam · 2018-06-27T17:07:10Z

Did a quick scan and looks good!

@calcsam

🙏 @calcsam

Making „Awesome Gatsby“ a subitem was just to test functionality.

fk · 2018-06-28T13:16:25Z

It's easy see how we could expand the Docs section to add in new Docs sections. How will this work on the tutorial section? Main question is -- how will subsequent tutorials be discoverable, since everything we put after the main tutorial series will be so far below the fold? Collapse everything by default? Nest everything under a Introduction to Gatsby section that is opened by default on the /tutorial route, that can be fully collapsed with one click? Etc.

Finally getting through to answer this, sorry for taking so long @calcsam.

I'd split the current/main Tutorial contents into collapsible parts/groups and automatically expand the first—essentially what you suggest in your last sentence.
That should cover the need of people new to Gatsby and the Tutorial section in particular. If we implement storing the state of accordions in local storage or a cookie, people can move through the tutorial without having to manually navigate to the part of the tutorial where they stopped at.

calcsam · 2018-06-28T20:18:55Z

Awesome, thanks for the explanation @fk !

fk added 2 commits June 26, 2018 02:19

First shot at sidebar accordions and „scroll spy“

5677102

…this time against master instead of v1 ✨

Merge remote-tracking branch 'upstream/master' into topics/www-ia-v2

5bd1b41

# Conflicts: # www/src/templates/template-docs-markdown.js

calcsam reviewed Jun 26, 2018

View reviewed changes

calcsam previously approved these changes Jun 26, 2018

View reviewed changes

Tiny edit

713cfd4

m-allanson dismissed calcsam’s stale review via 713cfd4 June 26, 2018 08:43

rdela mentioned this pull request Jun 27, 2018

Increase author link visibility & link avatars in blog posts + previews #5813

Merged

Merge remote-tracking branch 'upstream/master' into topics/www-ia-v2

fb86f7e

# Conflicts: # www/src/components/sidebar-body.js

fk added 4 commits June 27, 2018 14:32

Remove presets.Hd specific styles

dd31562

Adjust sidebar height (via the new presets.bannerHeight)

5035683

Stick to the default palette

4bc6d5a

Merge remote-tracking branch 'upstream/master' into topics/www-ia-v2

0e8ad58

m-allanson previously approved these changes Jun 27, 2018

View reviewed changes

calcsam reviewed Jun 27, 2018

View reviewed changes

fk added 3 commits June 27, 2018 19:23

Don't modify props

53f392f

🙏 @calcsam

Switch to forEach

caa3e3c

Restore original menu structure

6769c19

Making „Awesome Gatsby“ a subitem was just to test functionality.

fk dismissed m-allanson’s stale review via 6769c19 June 27, 2018 17:30

fk merged commit 3809d03 into gatsbyjs:master Jun 27, 2018

fk deleted the topics/www-ia-v2 branch June 28, 2018 01:49

This was referenced Jun 28, 2018

[www] IA redesign: Improve mobile navigation UX/UI #6215

Closed

[www] IA redesign: Store expanded/collapsed accordion state in local storage/cookie #6210

Closed

fk mentioned this pull request Jul 3, 2018

First shot at sidebar accordions and „scroll spy“ fk/gatsby#2

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[WIP][www] Sidebars à la reactjs.org (accordions, scrollspy) #6153

[WIP][www] Sidebars à la reactjs.org (accordions, scrollspy) #6153

fk commented Jun 26, 2018 •

edited

gatsbybot commented Jun 26, 2018 •

edited

gatsbybot commented Jun 26, 2018 •

edited

calcsam Jun 26, 2018

fk Jun 26, 2018

fk Jun 26, 2018

calcsam Jun 26, 2018

fk Jun 26, 2018

calcsam commented Jun 26, 2018

calcsam left a comment

m-allanson commented Jun 26, 2018 •

edited

fk commented Jun 26, 2018

m-allanson commented Jun 27, 2018

fk commented Jun 27, 2018

fk commented Jun 27, 2018

m-allanson left a comment

calcsam Jun 27, 2018

fk Jun 27, 2018

calcsam commented Jun 27, 2018

fk commented Jun 28, 2018

calcsam commented Jun 28, 2018

[WIP][www] Sidebars à la reactjs.org (accordions, scrollspy) #6153

[WIP][www] Sidebars à la reactjs.org (accordions, scrollspy) #6153

Conversation

fk commented Jun 26, 2018 • edited

gatsbybot commented Jun 26, 2018 • edited

gatsbybot commented Jun 26, 2018 • edited

calcsam Jun 26, 2018

Choose a reason for hiding this comment

fk Jun 26, 2018

Choose a reason for hiding this comment

fk Jun 26, 2018

Choose a reason for hiding this comment

calcsam Jun 26, 2018

Choose a reason for hiding this comment

fk Jun 26, 2018

Choose a reason for hiding this comment

calcsam commented Jun 26, 2018

calcsam left a comment

Choose a reason for hiding this comment

m-allanson commented Jun 26, 2018 • edited

fk commented Jun 26, 2018

m-allanson commented Jun 27, 2018

fk commented Jun 27, 2018

fk commented Jun 27, 2018

m-allanson left a comment

Choose a reason for hiding this comment

calcsam Jun 27, 2018

Choose a reason for hiding this comment

fk Jun 27, 2018

Choose a reason for hiding this comment

calcsam commented Jun 27, 2018

fk commented Jun 28, 2018

calcsam commented Jun 28, 2018

fk commented Jun 26, 2018 •

edited

gatsbybot commented Jun 26, 2018 •

edited

gatsbybot commented Jun 26, 2018 •

edited

m-allanson commented Jun 26, 2018 •

edited