Tracker: Ocular Gatsby website

[1chandu]

Currently planned as rolling update after 7.0 release

Example Improvements

• GLTF:
  • no loading spinner
  • doesn't load cameras, no autosizing
• Add glfx example
• Texture3D: Add rotation controls?

7.4 Website Fixes

Styling Issues

• (Safari-only) Uber Move font on titles incorrectly falling back to Times New Roman?
• Minor styling issues on What's New page, missing section breaks
• Long text getting cutoff in docs table of contents - https://tgorkin.github.io/docs/api-reference/webgl/context/get-parameters
• Layout issues on mobile on main page and examples
• Edge - Example canvas keep increasing in size (maybe related to recent devicePixelRatio work?)
• Edge - Front page header bar lags behind scroll
• Edge - Font page header test offscreen. Only "Examples" and "Documentation" visible.

Link issues

• 404 error on /page-data/docs/developer-guide/get-started/page-data.json

Misc Issues

• "Missing content for entry X" console warnings on Examples page
• Missing message on WebGL2-only examples, likely a layout issue (Safari)
• No category headers for examples (Core/Lessons etc).
• Example titles in TOC are different than non-gatsby site, for instance several WebGL2 only examples are marked as such in the TOC

Suggested Improvements

• Not a bug, but lessons have names (like Adding Color...), we could add to Examples TOC, to make it more interesting.

7.3 Ocular Gatsby Tasks

• Website (docs and example) testing: staging
  • Testing on Chrome
  • Testing on Safari
  • Testing on Firefox
  • Testing on Edge
  • Testing on IE11 (major issues expected)
  • Testing on iOS
  • Testing on Android

P0 Issues

• Docs TOC doesn't stay scrolled to same place when clicking links Bump ocular gatsby version #1249
• Layout issue when loading a non-top level page page directly, https://tgorkin.github.io/docs Add missing gatsby_ssr.js config, fixes layout issue #1251

Styling Issues

• Styling regressed on example control panels Fix some styling and layout on gatsby website example info panels. #1248
• IE - Front page doesn't load. "fetch is not defined". Likely the same issue as before with ES6 getting in through dependencies.

Link Issues

• Getting Started button link broken
• Broken link to loaders.gl in https://tgorkin.github.io/docs/upgrade-guide

Deferred

• Console error after browsing many examples "There are too many active WebGL contexts on this page, the oldest context will be lost."

7.0 Ocular Gatsby Website Testing

WEBSITE EXAMPLES

• can't scroll to all examples in example TOC.
• overview page, missing thumbnails for DoF, Texture3D, GLTF, ...
• StatsWidget Obscures UI, move to lower right corner?
• TransformFeedback: Broken
• GLTF:
  • loaders.gl dependency
• Lesson 10, (ugly, no mouse control...)
• Lesson 13, no textures
• Lesson 15, tilt earth towards northern hemisphere

7.0 Ocular Gatsby Website Transition

WEBSITE DEV TASKS:

• Fix styling for markdown and home page
• Fix home page
• Add example thumbnails
• Make examples resize to available space
• Example TOC not scrollable after a while? (Maybe not reproducible?)
• Gatsby remove console.log(StaticQuery) (Maybe use probe.gl to hide?)
• Remove console warnings around links

EXAMPLE DEV TASKS

• WebGL context reuse in examples
• Add gltf example

TESTS:

Also see ocular-gatsby progress in uber-web/ocular#74

6.x Ocular (Classic) Website Transition (Didn't make it into 6.2)

Ocular website is branched off of master during 6.2 release due to following issues , we need to resolve these before enabling it:

https://github.com/uber/luma.gl/tree/ocular-Oct2018

Ocular-specific Testing/Bugs:

• Check pages in website, that layout is readable, skip through all pages
• Auto zoom is only affecting Safari/Edge (may be IE too?) but runs fine on Chrome.
• luma.gl title overlaps with sub title in front page
• Examples
  • Automatic zoom in for Safari and Firefox
  • window resize: Object zooms in but not zooms out once the window size changes
• Fix InfoPanel for examples in new ocular website (@jckr Move luma.gl website to ocular #583)
• Transform demo is not linked in website.

[tsherif]

Possible clue about the layout issue in the docs. When I navigate to docs from the front page, the side bar and text don't share an ancestor except for what appears to be the top level, and the text appears full size. When I navigate directly to the doc page, they're direct siblings inside an element that looks like it has the correct width for the text.

The hint I got (thanks to Edge's slower rendering) was that on direct navigation, I see the text show up at correct width for a moment before the sidebar is displayed, which then "squishes" the text when it's inserted.

Is the some logic in ocular-gatsby to decide where to insert the sidebar that might be going haywire?

[ibgreen]

Is the some logic in ocular-gatsby to decide where to insert the sidebar that might be going haywire?

We are doing gatsby "page wrapping" to make sure the shared components don't get reloaded, but this setup already seemed broken based on the jumping TOC, this seems like more evidence that this is the issue.

https://www.gatsbyjs.org/docs/browser-apis/#wrapPageElement