Code Monkey home page Code Monkey logo

website's Introduction

Mapswipe Website

NextJs application for Mapswipe community website.

Development

Before you start, create .env.local file:

touch .env.local

Set these environment variables:

MAPSWIPE_API_ENDPOINT=https://apps.mapswipe.org/api/
MAPSWIPE_COMMUNITY_API_ENDPOINT=https://api.mapswipe.org/graphql/
NEXT_PUBLIC_POSTHOG_KEY=<posthog-key>
NEXT_PUBLIC_POSTHOG_HOST_API=<posthog-host-api>

Running

yarn install
# This fetches latest data from MapSwipe database for projects
yarn fetch-data
yarn dev

Whenever new texts for translation are added, translation files need to be generated.

yarn generate:i18n

Before creating a pull request, all lint and type issues must be fixed. To check for issues:

yarn lint
yarn css-lint
yarn typecheck
yarn unimported

Building

yarn build

Automatic Deployment

Deployments will be triggered in 2 ways:

  1. Anything pushed to main branch will trigger immediate deployment to configured github io page.
  2. Every day at UTC 00:01, deployment will be triggered with latest data from MapSwipe database.

Edit Website Texts

Edit Source Strings

  • Pull the latest changes from the main branch
  • Checkout to a new branch
  • Navigate to the source string files here
  • Open appropriate file(s) and edit string(s) as per requirement
  • Push the changes to the local branch
  • Create a pull request to the main branch

Translate Strings

As Translator

  • Go to Transifex project
  • Click on the language you are looking to translate the source into
  • Open the file to translate the string
  • Translate individual string and save changes

As Reviewer

  • Open individual strings, make sure they are correct, and click the 'Review' button
  • Continue translating and reviewing the strings until all the strings are translated and approved
  • NOTE: Reviewers must have appropriate permission

Update The Website

  • After all the strings are 100% translated in Transifex, a pull request will be sent to the main branch
  • Each resource (file) will be committed in the same PR (if not merged) as soon as it is 100% translated
  • Merging the pull request will trigger a latest build and the same will be deployed in production
  • IF LANGUAGE IS NOT PRESENT IN THE WEBSITE
  • Add the supported language as per the supported languages guide below

Supported Languages

Languages listed in i18next-parser.config.js are listed as options to view the website in that particular language.

To add a new language option, user should add ISO_639-1 code of that language to the list.

module.exports = {
    locales: ['en', 'ne'] // NOTE: add ISO code in this list,
};

Language's title and abbreviation in the selected language, needs to be added in languages.ts.

After the language settings are added, user should generate the language files.

yarn generate:i18n

Adding 'News & Updates' or Blogs

MapSwipe website supports 'News & Updates' or blogs in the form of markdown. To add a new post, you can add a markdown file inside blogs folder.

The name of the file will determine the url for that post. For example: this-is-a-blog.md file will be routed to https://mapswipe.org/en/blogs/this-is-a-blog.

The markdown should follow the following template:

Post Template

---
title: This is a blog
publishedDate: 2022-08-17
author: John Doe
description: Lorem Ipsum
coverImage: /img/blogImages/example-image.png
featured: true
---

# Markdown Content

Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.

Metadata

  • We are using YAML frontmatter to set markdown metadata in posts
  • The metadata inside '---' must be filled and is required
  • The metadata renders in the card view of the Home or the posts listing page

Rules

  • publishedDate should be in YYYY-MM-DD format. Any other format is not supported.
  • Project images coverImage should be uploaded in the /img/blogImages folder.
  • The value for featured determines whether to highlight the posts on News & Updates section of home page

website's People

Contributors

adityakhatri avatar danbjoseph avatar frozenhelium avatar jhenshall avatar katbaloo avatar kopitek8 avatar priyesh777 avatar thenav56 avatar tnagorra avatar transifex-integration[bot] avatar

Stargazers

avatar

Watchers

avatar avatar avatar avatar avatar avatar avatar

Forkers

toggle-corp

website's Issues

Develop Data page

User Story

As a user, I want to click on the ‘Data’ page so that I can see:

  • Statics
    • Total number of contributors
    • Total number of swipes
    • Total groups
    • Kilometers swiped
  • Project/mission type context
  • Map with filters
  • A table of all the MapSwipe projects
  • A view of downloadable MapSwipe data

Data > Map - Integrate a Map component

User Story

  • As a user, I want to be able to see all the active, finished, and inactive color coded projects so that I can quickly figure out the project status.

  • As a user, I want to be able to hover on a point on the map so that I can see more information about the project quickly.

  • As a user, I want to click on a point on the map so that I am redirected to the Project Detail page.

Create a language selection dropdown button

Logic

As a user, I want to be able to voluntarily translate the website to my language if I don't see my language on the dropdown selection.

Navigation

When a user clicks the no language option, s/he should be directed to the Get Involved page and to the 'Contribute Now' section.

Develop Project Detail page

User Story

  • As a user, I want to be able to see the status of a project (TO BE FILLED LATER).

  • As a user, I want to quickly view the stats of the project (total swipes, contributors, and completed).

  • As a user, I want to be able view

  • the project description

  • highlighted area and project point on the map

  • a chart that shows the progress of the project

  • As a user, I want to be able to view the downloadable data in a card view so that I can find the right dataset and download it.

  • As a user, I want to be able to click on the download icon so that I can download the dataset.

Create two examples of a portion of the UI using existing and updated fonts

Context

Togglecorp suggested using new fonts (DM Sans for headings and Poppins for body) to make the website look fresh. However, Johnny suggested using the same font as previous (hind) to make it consistent across all MapSwipe applications and websites.

Meeting Conclusion

Create two variations to visualize how the previous and new fonts look on the new website.

Set up project

Initial set up of the project with all the packages and modules

Data > Cards - Create a card component listing all the projects

User Story

  • As a user, I want to be able to see the list of MapSwipe projects along with their contributors, project status, and project progress so that I can quickly see the meta details of the project.

  • As a user, I want to be able to click on the individual project so that I am redirected to that individual project detail page.

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.