unicef / iogt-pwa Goto Github PK

Currently, some files are using CRLF line endings, such as node_modules/preact-cli/lib/index.js.

We should convert all line endings to LF.

Is your feature request related to a problem? Please describe.
Being able to view the frontend for what's on the develop branch currently requires checking out the code.

Not sure if this is already done because iogt-pwa.web.site already exists but we don't have access to firebase

Describe the solution you'd like
Use a Github action that builds the project and deploys it to a website somewhere. Firebase Hosting may be the easiest solution for this. When carrying out the instructions here: https://firebase.google.com/docs/hosting/github-integration it should provide an option for deploying on merge to develop

Describe alternatives you've considered
Using another hosting provider such as Github pages.

Final selection of icon set for user navigation (and the option in the CMS to load new icons). We need something with a massive repository because while some sites are organizing content by audience, others (like ec.goodinternet.org or pacific.goodinternet.org) are targeting a single user group (young people, health workers, respectively) and want to organize content in different formats (campaign area, health worker location/country, respectively).

A flow for sub-sub-sections that allows users to navigate on feature phones from a section (menu option) to sub-sections listed without having to scroll through child articles between sub-sections to learn about all available content.

IoGT website displays additional information as well as important quick links in the footer component. Following the figma prototypes for the website edition, create a footer component to reflect the design agreed on by the IoGT development team.

Follow the steps below:

• Create a new branch from develop called responsive-footer. Hint: git checkout -b <new-branch> <existing-branch>
• Navigate to frontend/src/components path and create a new directory called footer, then inside it create files index.js and style.css
• Make changes by adding javascript to index.js and CSS styling to style.css. The footer should span the entire width of the device browser unlike in the current version.
• Commit the changes (as a single commit).
• Push changes to github. Hint: git push --set-upstream origin responsive-footer
• Open a pull-request.

Hint:
https://www.w3schools.com/howto/howto_css_fixed_footer.asp

Is your feature request related to a problem? Please describe.
Viewing changes made in PR's is hard for non coders and coders alike.

Describe the solution you'd like
Setup Firebase Hosted PR Previews. This involves using the firebase CLI to create a Github action that builds the site and deploys it to Firebase hosting when a PR is created or updated. Documentation for doing so is available here: https://firebase.google.com/docs/hosting/github-integration

Describe alternatives you've considered
Using a Github action to build, but using another hosting provider to serve the previews. I've tried to do this with other projects but the hosting cost doesn't make sense for this low scale usage.

Setup additional branches for develop & staging so that developers won't need to merge directly to master branch and make develop branch the default. This helps prevent making mistakes on master branch by overiding code without having the proper oversights.

Hint:
https://www.youtube.com/watch?v=hS7uybMi0z4

Protected branches ensure that collaborators on your repository cannot make irrevocable changes to branches. Enabling protected branches also allows you to enable other optional checks and requirements, like required status checks and required reviews.

Protected branches block several features of Git on a branch that a repository administrator chooses to protect. A protected branch:

• Can't be force pushed
• Can't be deleted
• Can't have changes merged into it until required status checks pass
• Can't have changes merged into it until required reviews are approved
• Can't be edited or have files uploaded to it from the web

Further information:
https://www.youtube.com/watch?v=hS7uybMi0z4

Modify the frontend to use Typescript.

This can be easiest achieved by creating a new project using preact-cli's typescript template then copying over the components.
https://preactjs.com/guide/v10/typescript/

However the exact approach is up to the implementers.

Fixing footer font size when you go down to a feature or smart phone view so that the terms of use, privacy policy, about us pages are reduced in font size.

IoGT website displays the logo and other important quick links in the header component. Following the figma prototypes for the website edition, improve the existing header component to reflect the design agreed on by the IoGT development team.

Follow the steps below:

• Create a new branch from develop called responsive-header. Hint: git checkout -b <new-branch> <existing-branch>
• Navigate to frontend/src/components path and enter the header directory.
• Make changes by adding javascript to index.js and CSS styling to style.css. The header should span the entire width of the device browser unlike in the current version.
• Commit the changes (as a single commit).
• Push changes to github. Hint: git push --set-upstream origin responsive-header
• Open a pull-request.

Hint:
https://www.makeschool.com/academy/track/standalone/react-fundamentals-vm0/build-a-header-component

Removing author and post date of articles.

Reformat header on articles so that feature graphics are smaller and right aligned allowing article content to appear above the fold on all views (e.g. https://iogt-pwa.web.app/section/coronavirus--covid-19-/covid-19-parenting/Washing-hands-to-ward-off-COVID-19/1).

Improved user navigation experience: we started workshopping this challenge. There’s too much text on the home page showing parent sections and sub-sections to content.

IoGT publishes articles to the public on a continuous basis for various groups of users including knowledge workers, youth and adolescents etc. This content is accessed on different hardware devices ranging from desktops, laptops, tablets, smart phones to feature phones. Therefore a consistent and responsive web design across all devices is important to help meet the information needs of the various categories of users.

Keeping the Figma wireframes in mind, carryout the tasks below:

• Create a new branch from develop called ui-design-single-article. Hint: git checkout -b <new-branch> <existing-branch>
• Design the UI to match the figma wireframe for listing IoGT single Article View

Make it responsive for:

• Feature phones

• Mobile phones

• Tablets

• Desktop

• Verify everything is working by running yarn run build before pushing changes to github.

• Commit the changes (as a single commit).

• Push changes to github. Hint: git push --set-upstream origin ui-design-single-article

• Open a pull-request.

IoGT publishes articles to the public on a continous basis for various groups of users including knowledge workers, youth and adolescents etc. This content is accessed on different hardware devices ranging from desktops, laptops, tablets, smart phones to feature phones. Therefore a consistent and responsive web design across all devices is important to help meet the information needs of the various categories of users.

Keeping the Figma wireframes in mind, carryout the tasks below:

• Create a new branch from develop called ui-design-articles-listing. Hint: git checkout -b <new-branch> <existing-branch>
• Design the UI to match the figma wireframe for listing IoGT articles.
• Verify everything is working by running yarn run build before pushing changes to github.
• Commit the changes (as a single commit).
• Push changes to github. Hint: git push --set-upstream origin ui-design-articles-listing
• Open a pull-request.

To maintain a consistent look and feel across the IoGT website, the header and footer and other future components should use a similar font family and size if possible for headings and normal text content.

• Create a new branch from develop called hotfix-import-google-font-header. Hint: git checkout -b <new-branch> <existing-branch>
• Modify the font family and font size of the header to match the footer.
• Verify everything is working by running yarn run build before pushing changes to github.
• Commit the changes (as a single commit).
• Push changes to github. Hint: git push --set-upstream origin hotfix-import-google-font-header
• Open a pull-request.

Enabling a banner feature for the homepage. On a feature phone this will look similar to the current function (e.g. zw.goodinternet.org has a bunch of banners) but in the smart phone or desktop view, this may be a rotating image with a series of banners and promotional content at the top.

Describe the bug
Importing the google font at the top of the CSS stylesheet of the footer causes a CssSyntaxError and thus build process fails.

To Reproduce
Steps to reproduce the behavior:

1. git clone https://github.com/unicef/iogt-pwa.git
2. cd iogt-pwa/frontend
3. yarn install
4. yarn run build

Expected behavior
Build process should be successful when you run yarn run build

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 18.04 LTS
• Browser: Chrome
• Version: 85.0

Additional context
To enable successful build, had to comment out the css google font on the first line:
https://github.com/unicef/iogt-pwa/blob/develop/frontend/src/components/footer/style.css

Steps to fix it

• Create a new branch from develop called hotfix-import-google-font-footer. Hint: git checkout -b <new-branch> <existing-branch>
• Debug and try using external stylesheets instead of internal stylesheets
• Verify everything is working by running yarn run build before pushing changes to github.
• Commit the changes (as a single commit).
• Push changes to github. Hint: git push --set-upstream origin hotfix-import-google-font-footer
• Open a pull-request.

The first step to creating a progressive web app (PWA) or single page application (SPA) is enabling Wagtails existing support for a JSONified output. The API module provides a public-facing, JSON-formatted API to allow retrieving content as raw field data. This is useful for cases like serving content to non-web clients (such as a mobile phone app).

Carry out the following instructions to enable the v2 API:

• Create a new branch from develop called enable-v2-api. Hint: git checkout -b <new-branch> <existing-branch>
• Add the following packages wagtail.api.v2 and rest_framework to your INSTALLED_APPS under base.py
• Create a file called api.py next to url.py to hold API configuration e.g API routers , endpoint imports(Pages, Images & Documents) etc
• Add an api_router.urls path to url.py above wagtail_urls
• Access your API at http://localhost:8000/api/v2/pages/ to verify pages are listed; while the images and documents can be accessed at the /api/v2/images/ and /api/v2/documents/ endpoints respectively.
• Commit the changes (as a single commit) .
• Push changes to github. Hint: git push --set-upstream origin enable-v2-api
• Open a pull-request.

Hint:
https://learnwagtail.com/tutorials/how-to-enable-the-v2-api-to-create-a-headless-cms/