Code Monkey home page Code Monkey logo

website's Introduction

Web

This is the Celo Foundation website, which is deployed to https://celo.org/

Developing

Steps to get running

  1. Ensure you have installed the latest dependencies:

    yarn

  2. Decrypt the secrets files

    • Install the gcloud SDK.

      brew install google-cloud-sdk

    • Log in (You may need to be granted additional permissions).

      gcloud auth login

    • From the root of monorepo:

      yarn run keys:decrypt

  3. From the web directory, run yarn run dev. The server will now be accessible at http://localhost:3000.

Architecture

The website uses React.js, Next.js, and React Native Web. React is a great library for building user interfaces. Next.js takes care of server-rendering React apps in a simple way and preloading/transitioning pages quickly. React Native web allows us to use the same code in the application on the website, specifically the way we do CSS.

Notes on Web Package Directory

/pages files in here become page routes which reflect the folder structure they are in /pages/api files in here become api routes see next.js docs for more information

server files here are strictly for serverside code. (currently only reletive paths are working)

public static files can be found here. such as Celo Whitepapers (including stability paper) and i18n locale files.

src most files here including, components, tests for components, images.

Adding Papers

PDF files of whitepapers and research findings are stored in /public/papers adding a file there will make it downloadable. However for the purposes of having nice unchanging URLS and such we also

  1. update production.yaml (staging.yaml too is best) with the pretty url and point it to the pdf
  2. add a redirect that does the same thing to the index.js express routes. (this is mostly for when in development mode / a backup)

Testing

🧰 tools: jest, @testing-library/react

✅ run tests with yarn test

📸 update snapshots with yarn test -u

Testing Strategy

Each page should have a snapshot test found in src/_page-tests. More interactive components should have an additional tests for various states/ interactions. These test files should be coolocated with the file they are testing.

Deployment

see release.md

website's People

Contributors

aaronmgdr avatar carterqw2 avatar codyborn avatar dependabot[bot] avatar eelanagaraj avatar gastonponti avatar gnardini avatar hbandura avatar henrynunez112 avatar jcortejoso avatar karlb avatar michellewong793 avatar palango avatar pedro-vk avatar piersy avatar snyk-bot avatar

Stargazers

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

Watchers

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

website's Issues

Add Tests for Header.3.tsx (90% )

Header.3.tsx (in the celo.org website repo) is currently not tested.

Add tests until most functionality and options have been tested

Move Celo.org website to its own GCP Project

move celo.org off of celo testnet production project and dev.celo.org / staging.celo.org off of celo testnet

create a new project for them.

must coordinate DNS switch with marek.

Photo Misalignment on celo.org homepage

The right column photos are currently jumbled with the photos.

Please add propper spacing between the first photo and caption then the next photo. The second photo and caption (bottom photo) should be aligned with the tall first photo and caption

image

Re-design Alliance Page

**Re-design the alliance Page
More use cases
Headers
Refresh on some of the quotes
Hierarchy
Current alliance partners
I would love to show remittances and payments and salaries
If we do unicef (pay teacher’s salaries) all school having access
Update this to add PaxFul
**

Move Community Calendar Data to its Own Airtable

Create new Base in the Websites Data Workspace

Move all data that is the community calander table of the builder circle base to the new base. (probably best to use the same column names so that you dont have to change those in the code

update the base ID (encrypted in server-env-config.js) that the celo/website/server/EventHelpers.ts uses.

check it works.

make sure the builder circle knows what is happening.

add the people that need edit access to the knew base

after we have deployed to prod rename the original as "OLD Community Calandar)

Airtable Security

Make sure airtable bases we connect to only have the minimum info needed in them

i18n Readiness for Celo.org

95% ready

  • Change how API data from contentful is i18n’d
  • fix a few spaces where we use strings not keys.
  • select markdown files based on their language

Move Celo Ecofund data to hubspot

Rather than going to Airtable all submission to the eco fund form should go to hubspot.

1 each form should be in their own list
2. we should map form fields to hubspot entities (Company or Contact) and properties.

Company Fields
Organization Name => Name
Organization URL => Company Domain Name AND Website URL
Tell us about your organization in a sentence => About Us
What does your Organization Do? => Company Description

URL to Video introduction => Its possible we will create a new custom property on Company for this

Contact
Founder Email => email
Cofounder Emails (we should split this into an aray of emails and create a contact for each one)

For all contacts be sure to associate with Copany

Xochitl and Jason are stakeholders

Security Page

Add a /security page to celo.org -
users to know how to alert us about security issues such as vulnerabilities, phishing attempts, and also list our security policy for the community.

h1: security
h2: <some content>
H3: Usefull LINKs
* hacker1 link
*  email us link

reduce abortFetch timeout error frequence greatly

/workspace/.next/server/pages/api/blog.js in Timeout.setTimeout [as _onTimeout] at line 166:12

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable {snip}
async function abortableFetch(url, options = {}) {
  return Promise.race([fetch(url, _objectSpread({}, options)), abort(url)]);
}
async function abort(message, milliseconds = 3000) {
  return new Promise((_, reject) => setTimeout(() => {
    reject(new Error(`from abortableFetch: Took to Long to Fetch ${message}`));
  }, milliseconds));
}
// CONCATENATED MODULE: ./server/mediumAPI.ts

https://sentry.io/organizations/celo/issues/1394169788/?project=1543594

currently errors occur between once and several times a day. reduce to once every 14 days.

[Web] Image Optimization

Expected Behavior

Image Optimization for Celo.org and valoraapp.com

Consider using Cloudinary.

Current Behavior

Some images are not optimized which leads to slower page loads

Add Trees Saved / Carbon Offsetting to Stats on Celo.org

Look into API from project wren to get celo's carbon offset number at the bottom of homepage stats widget.

“a little late but you can GET /offset-orders with your wren API token to get all of the offsets Celo has done. you will have to sum the tons of each offset order to get total carbon offset. hope this helps!”

ask Landon if she knows about api key

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.