Code Monkey home page Code Monkey logo

website-old's Introduction

MapSwipe Website

This is the repository for the MapSwipe website: https://mapswipe.org/

You can find more information about the app itself in the main app repository.

Deployment process

The website is compiled using gulp. When any changes are pushed to the master branch, GitHub actions builds the site and deploys to the gh-pages branch - which is the root of the website.

The following instructions explain how to setup a local development environment and make changes so that they are compiled correctly.

How to launch

  1. Run terminal in the repo folder
  2. Make sure running node v.11.15.0 by running node -v
  3. If not, install correct version from https://nodejs.org/en/download/releases/
    • for Ubuntu you can check here how to install nvm and then run nvm install v11.15.0
    • you might need to install gulp as well: npm install --global gulp-cli
  4. npm install
  5. gulp develop to start the local development version of site
    • If gulp does not work, it could be that PATH is not set. Run node_modules/.bin/gulp develop
  6. Any changes to certain files (such as shtml), will trigger the site to rebuild locally

The rendered HTML can be found in /docs and split into language subfolders - this is all git-ignored as the deployment is done by GitHub Actions.

Content changes

The .shtml files are used to compile all the language versions but the text is pulled from the language files inlocales/<lang>.json with /en.json being the source language.

NOTE: there is text in the shtml files but it is only there for reference. It is replaced during the build process and may be out of date.

Making changes to text

  • Find the string in locales/en.json and change there
    • Strings are sorted by page and you can can cross reference the JSON id used in the data-i18n tag to find it's place on page

Adding new text

  • Add HTML tag as normal in the shtml page
  • Add the data-i18n attribute to the HTML tag with a unique id for the text
    • Must follow [page].[identifier] e.g. data-i18n="homepage.hero-heading"
    • When the text contains html tags (e.g. <strong>,<a>), the data-i18n tag must also be preceded with [html] e.g.data-i18n="[html]homepage.hero-heading"
  • Add the new data-i18n identifier to locales/en.json
    • Must be nested properly within the correct page
    • Please put in order of page (for easy reference, not technical requirement)

Translating text

  • When any changes to locales/en.json are pushed to Github, they are automatically sent to Transifex for translation.
  • When a language is 100% complete, Transifex will open a PR to add/update the language to locales/<lang>.json.
  • Any strings not translated, will fall back to English.
  • Full details of the translation process, including adding new languages are below.

CSS

Editing existing CSS

  • Make changes in .scss file in assets/sass/* folder
    • Note: Pages are made up of components for header, footer etc.
    • If style to be used throughout site, add to sass/global/_base.scss
    • If page specific add to sass/pages/_*.scss
  • Gulp will compile into docs/assets/css/style.css

Adding a new CSS file

  • Save file as .scss with leading underscore e.g. _newcode.scss
  • Add file to suitable subfolder in assets/sass
  • Update assets/sass/style.scss with the new file path

Javascript

Editing a JS file

  • Make changes in assets/js/*
  • gulp will compile these into docs/assets/js/index.js

Adding a new JS file

  • Add file to suitable subfolder in assets/js
  • In gulp-tasks/js-dev.js, add filepath to browserified-entries array
  • In gulp-tasks/js.js, add filepath to browserified-entries array
  • Re-run gulp develop
  • Potential to improve this by having a filepath reference in assets/js - so gulp-tasks doesn't have to be edited directly

Translation

How it works

During gulp build/develop, the shtml files are compiled into html files, then each file is passed through the translation process, where each tag that has a data-i18n attribute will be translated, and the result injected into the output file. Whatever text was present before will be replaced. The resulting translation is hardcoded in the output, so no need for any javascript on the client side to see the language. This uses i18next to translate, so it's the same system as the app, so knowledge there should be usable here, mostly.

The gulp code is not very pretty, and not optimised, in part because it reloads everything for each file, but it all happens in less than 2 seconds, so no big deal.

Adding a newly translated language

  • Once the new language has been committed from Transifex, it will need adding to the build process
  • There are three places to add it in gulp-tasks/html.js
    • These are pretty clear from the existing languages!
  • It will also need adding to the language selector (but this is yet to be deployed)

Redirects

To prevent having duplicate English pages (with /en and without), the /docs folder contains a meta redirect for each page sending the root version to the /en version. e.g. https://mapswipe.org/index.html > https://mapswipe.org/en/index.html

website-old's People

Contributors

arsea avatar ayako-t avatar cimm avatar ericboucher avatar f1kuni avatar hagellach37 avatar jhenshall avatar laurents avatar macdermott avatar mamiy1002 avatar mapconcierge avatar mathcass avatar matthias-schaub avatar maxputa avatar mina46 avatar pimdewitte avatar sadokx avatar transifex-integration[bot] avatar traviscibot avatar yoshidasuzuka avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

website-old's Issues

update website text

  • Text in several places on the site needs to be adapted to better represent the expanding scope of the project and additional project type(s).
  • Language should be updated to be more inclusive of a global community. Text such as "Help humanitarians find and help vulnerable people" removes agency/dignity from the communities we seek to support.

Related:

Add current projects active in app

Can we dynamically draw in key information from the current projects active in the app, such as title, image, % complete?

To be added to home page? Or new impact page? Or data page?

Clean up folders

Delete folders no longer needed:

  • Double check .idea folder can now be deleted
  • There is a 'to be deleted' folder with some old css and js

change download links to gzipped filed

the links to some of the files for download changed due to some changes in the backend. This needs to be accounted for on the website.

  • tasks
  • results
  • agg_results
  • groups

Feature request link to GitHub

We get lots of emails for feature requests, often for issues already on the backlog.

On the 'Get involved' page, add a section for requesting features or reporting bugs. Have a more prominent link to GitHub (maybe straight to issues page) - so users can see the backlog and add to it. Email address can still be a backup for those not comfortable with GitHub.

Canonical tags

Currently the canonical tags all point to the homepage. Either remove or change each page to point at that page.

Add download option for area of interest for a project

Is it possible to download somehow the original AoI of a task again? I was looking at this task: https://mapswipe.org/project.html?projectId=-M6VE1Zwm2yQ_NPKb3HL I think it is just the admin boundary in this case. But it would be easy to download the original AoI somewhere so I can get in my Qgis an overview of what area has been swiped exactly.

Simple answer: yes it is and the link is: https://apps.mapswipe.org/api/project_geometries/project_geom_-M6VE1Zwm2yQ_NPKb3HL.geojson

We should add this link to the website directly.

Translate various dynamic strings (eg. map legend)

@jhenshall Here are a couple of ideas we could use for things like the legend on the map:

  • Create one version of the script per language, the same way we do for the page content. Pros: structure of the build code is ready, just add more pages. Cons: this prevents user browsers from caching the files and we end up with N copies of almost the same file, which is a bit of a waste. Also, the i18n code probably relies on html tags to work, so it may not actually work in the js content.
  • Have the code load the translated strings from a specific translations file. Efficient, but you need to figure out the deployment logic to generate that translation file, and ideally limit it to the useful content, to avoid having everything loaded twice in the browser.
  • Hard code the strings in a hidden part of the page during the gulp build and then have the dynamic code pull it at run time (with something like a jquery selector). My guess is that this is the easiest, you just add a hidden div at the bottom of the relevant page(s) with an html tag for each string to translate like the rest of the code (so no new deployment logic to invent), then just change the js code above to pull the relevant string from the hidden part of the page.

CNAME settings in gulp

Change gulp to copy CNAME to docs folder. Link of how to do.

Possibly:
let copiedFiles = gulp.src(['CNAME']) .pipe(gulp.dest('docs/'));

and then add copiedFiles to the merge line at the end.

Maybe also delete CNAME from the top level folder? Only needed in docs?

Add a contributors section

Like on the old website, it would be good to acknowledge everyone who works on the app.

Thinking a more lowkey design - e.g. a small photo, name (maybe as a tooltip), and a link to page of persons choice.

To be added to about page. Needs designs!

Multi-language support

Setup the site to be able to translate into multiple languages:

  • Design for language selector
  • Integrate the solution - probably Transifex
  • Workflow for translating and updating

website translation workflow

  • need to choose the site-builder/CMS first.
  • it should be easier to translate the website and faster to publish new language version
  • review alternatives to Transifex. the app is translated through Transifex, so we probably don't want to switch but is there reason to move to something else like Weblate?

Related:

Currently we have things sit for extended periods because the flow is not well understood. Such as:

And there's no way of knowing which versions are live (e.g. https://mapswipe.org/cs/) and no way of easily switching between them.

dynamic stats on landing page

More than 30,000 volunteers engaged.
With over 1,000,000 sq km swiped.
Across 29 countries.

Can we replace the static numbers currently used with an API call for current number(s)?
Noting that the sq km total doesn't accurately include the new project types.

Add MapSwipe description

Update the readme from this repo to:

  • add a description of MapSwipe and explain what this project is about
  • invite contributors to fill in issues for the app for bugs and requests for improvements

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.