tobyroworth / crown-pa-docs-site Goto Github PK

State management is a mess at the moment - github-docs-list is a prime example.

Something like Redux could help significantly, although it might add needless complication that could be better solved by sorting out the routing and fixing #5

https://github.com/tur-nr/polymer-redux/tree/polymer-3

Load tests should be done to see if this is worthwhile - the current splash screen aproach may mask slow loading quite well, which saves a lot of server-side code

On first load, the nav bar often shows all the docs, not just just the ones in the current folder

add eslint rules and build steps etc

Move the build process over to gulp 4.

• change gulp.start to gulp.series or gulp.parallel
• change run-sequence to gulp.series

Nested folders should be handled nicely, preferably by opening up sub-menus - currently, they get badly flattened.

The site works, but not from the root, only from subpaths.

Since version 0.2.0

It looks like a click handler isn't registered on the crown-docs-splash element, or it's children.

In fixing #52 everything's got es5ified, which is sad for guys using the latest and, arguably, greatest browsers.

The original plan was to use nomodule to serve transpiled code to old browsers, and idiomatic code to browsers that support modules, but this lead to issues with safari, which supports modules, but chokes on some of the custom elements bits (although the polyfill should handle this, so something funky's going on still).

Due to the need for an es5 custom elements shim/loader, which requires all code to be transpiled to es5, the most practical way of handling legacy browsers is just to transpile everything to es5. babel-preset-env could be used to do this more selectively, but this adds quite a headache for what is, really, a small site.

I still like the idea of an all-or-nothing approach, as it makes maintenance really easy. However, given that the latest safari is pretty popular, a three-route approach could be taken

• idiomatic loads in via modules, and is not transpiled. Code should be written using the latest ECMAscript features, but cannot be committed to master (and then tagged/released) until it runs in chrome stable. Tests need adding to travis for this, and github setting up accordingly
• safari loads in via modules ideally, although a bundle is probably easier, and is transpiled to last-2-versions safari
• legacy loads in via a single rolluped bundle transpiled down to es5

The loader script will decide which of these is the right approach to use.

It takes about 5 reloads to cache enough assets for the site to load. In the meantime, all kinds of failures occur.

The shadycss polyfills are a problem after a couple of reloads

Then the githubs start loading, each rount trip requiring a reload

Browsers that don't support js modules get left in the dark 😞

This affects older versions of Safari quite badly

• check feature detection for service worker
• find alternative for css grid for older browsers
• add rollup step to build
• add transpilation step to build (babel)
• add nomodule code to load nasty big bundle

This could be worth reflecting in the ui somehow

gulp full does not generate sw_manifest.jscorrectly the first time it is run - it is missing many files

as a workaround, run

   gulp full
   gulp

https://developer.github.com/v3/#conditional-requests

The unauthenticated rate limit is 60 per hour.

We could also put a proxy in place using a firebase function

use gulp-sourcemaps to add sourcemaps to build

Handle failed fetches.

This should be checked whilst waiting for tree load, so splash can be removed

Requests for images need to be rewritten, as the images don't exist at the path specified.

The markdown should still be a relative path, as this makes composition on github far easier.

Use BrowserStack or Sauce Labs to give @tomoakley a break!

This should be integrated into gulp test along with lighthouse #35

introduced in 8903f27

When running firebase serve, the console reports this:

Visit this URL on any device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd47bqnekij5i8b5pr03ho849e6.apps.googleusercontent.com&scope=email%20openid%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloudplatformprojects.readonly%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Ffirebase%20https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fcloud-platform&response_type=code&state=206911858&redirect_uri=http%3A%2F%2Flocalhost%3A9005

Waiting for authentication...

It automatically loads the Google oAuth page above and waits for a login to be entered (which I don't have!).

Create a splash screen to choose which set of docs to look at:

• The Living Room
• Bishopshalt
• PA Concepts
• Something else, maybe an "about the site"

This will consist of four squares which, when clicked, will expand, then fade away to reveal the main docs site.

Whilst the animation is happening, the correct docs can be loaded in the background, like they've been there all along.

Add analytics

Saves checking response.ok

This may not be an issue on the live site, due to firebase hosting rules

Currently, the build runs tests, then builds, which is slow.

By building to a temporary folder, the actual build can be done in parallel with the tests (which themselves could run in parallel).

If the tests pass, the old build can be deleted, and the new build can take it's place. If not, the new build can be deleted, or stored for analysis.

• build to temp folder
• add signalling for whether all build steps passed
• add step to end of build to do folder swap

this might be a good use case for pump

The app loads in Safari (v11.0.2) but none of the panels are click-able. On render, the console displays these error messages:

• SyntaxError: Cannot use keyword as imported binding name.
• Failed to load resource: the server responded with a status of 404 (HTTP/2.0 404) https://crownpa-docs.firebaseapp.com/node_modules/@webcomponents/webcomponentsjs/webcomponents-hi.js

Add

• Issues template
• update readme
• add CONTRIBUTING.md

Use uglify-es and gulp-uglify

Also needs/benefits from pump - if this looks nice, consider using throughout build.