Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace remote styles and fonts with the ones served locally #826

Merged
merged 3 commits into from
Nov 27, 2019
Merged

Replace remote styles and fonts with the ones served locally #826

merged 3 commits into from
Nov 27, 2019

Conversation

ivan-aksamentov
Copy link
Member

@ivan-aksamentov ivan-aksamentov commented Nov 25, 2019

This PR attempts to address some of the points in issue #714 (Improve offline functionality):

  • leaflet's stylesheets are now bundled with webpack.
  • font-awesome's stylesheets and fonts are are now bundled with webpack. Official font-awesome package is added as a dependency.
  • "Lato" font is bundled and served statically, so there no need to hit Google Font API anymore. Dependency to typeface-lato is added. This package includes woff and woff2 formats and this should cover the majority of target browsers, including IE 9 and Safari 5 (see: caniuse.com/woff)

Verification

  • Check out this pull request:
    git clone https://github.com/nextstrain/auspice
    cd auspice
    git pull origin pull/826/head
    
  • Add data and narratives, install packages, launch dev server as usual.
  • Open app in the chrome. In dev tools Network tab, type into filter input box -domain:localhost (meaning "not", "domain", "localhost").
  • Make sure that no requests are shown other than to api.mapbox.com and, eventually, chrome-extension://*/backend.js from installed Chrome extensions.

@trvrb
Copy link
Member

trvrb commented Nov 25, 2019

Thanks so much for the PR @ivan-aksamentov! 🙌This looks like a nice improvement. Brief perusal looks great to me, but I'll defer to @jameshadfield for full review.

Copy link
Member

@jameshadfield jameshadfield left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is great, thanks @ivan-aksamentov for contributing your time here!

The changes look good from my point of view. Increased offline functionality (and aesthetics!) will be a big asset for auspice going forward.

This PR has made me realise that (I think!) we don't actually use font-awesome, however this is a separate issue.

@jameshadfield jameshadfield merged commit ca61370 into nextstrain:master Nov 27, 2019
jameshadfield added a commit that referenced this pull request Nov 27, 2019
The directory structure of npm dependencies is different
depending on whether auspice is installed from source, a
global npm install or a project's dependency. E.g. for webpack
to process the `font-awesome` dependency, then:
Global install & from source: `${__dirname}/node_modules/font-awesome`
Project dependency:           `${__dirname}/../font-awesome`

This bug comes from #826 which specified the first of the above
two scenarios.

Tested with projects using auspice (incl client-side customisations)
via global npm auspice isntall, npm dependency and `npm link <path>`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants