distributeaid / distributeaid.org Goto Github PK

Let's match the favicon from the current website: https://distributeaid.org

Currently the build is failing at the "Generate types" step.
I'm also getting an issue at the same step when I run yarn dev locally so I'd guess it's the same problem:

  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate ./src/types/gatsby-graphql-types.gen.ts
      ✖ Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate


 Found 1 error

  ✖ ./src/types/gatsby-graphql-types.gen.ts
    Failed to load schema from http://localhost:8000/___graphql:

            Cannot use GraphQLObjectType "File" from another module or realm.

    Ensure that there is only one instance of "graphql" in the node_modules
    directory. If different versions of "graphql" are the dependencies of other
    relied on modules, use "resolutions" to ensure only one version is installed.

    https://yarnpkg.com/en/docs/selective-version-resolutions

    Duplicate "graphql" modules cannot be used at the same time since different
    versions may have different capabilities and behavior. The data from one
    version used in the function from another could produce confusing and
    spurious results.
            Error: Cannot use GraphQLObjectType "File" from another module or realm.

I did an npm list graphql and there are indeed two different versions...
Output:

├─┬ @graphql-codegen/[email protected]
│ ├─┬ @graphql-tools/[email protected]
│ │ └─┬ @graphql-tools/[email protected]
│ │   └── [email protected]  extraneous
│ ├─┬ @graphql-tools/[email protected]
│ │ └─┬ @graphql-tools/merge@6 2.14
│ │   └─┬ @graphql-tools/[email protected]
│ │     └── [email protected]  extraneous
│ └─┬ @graphql-tools/[email protected]
│   ├─┬ @graphql-tools/[email protected]
│   │ └── [email protected]  extraneous
│   ├─┬ @graphql-tools/[email protected]
│   │ └── [email protected]  extraneous
│   ├─┬ [email protected]
│   │ └── [email protected]  extraneous
│   └─┬ [email protected]
│     └── [email protected]  extraneous
├─┬ [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │   └── [email protected]
│ └── [email protected]
└── [email protected]

Not sure how to resolve this other than trying to update some of the dependencies that are using the older graphql version maybe? I tried to downgrade version 15.7.2 to 15.5.0 but that didn't fix it (also, probably not great to downgrade stuff... better to upgrade stuff!).

Big fan of how OpenSauced first has a form for a type of issue, followed by a form for the issue itself.

I'm especially a big fan of having the Code of Conduct be a required field to check, which is something we could have for ours.

On this line, we're adding to the page the calculation of a series of shipments' values, as a totals object.

It would be good to extract a module that accepts these shipments and returns that values object.

This would allow a consistent way of calculating shipment totals across the codebase.

Previous work done in #26, #65 as a way to resolve #24, see CodeSee recording for latest state:
https://app.codesee.io/shared/c92ab390-3289-11ec-81ae-67b50d769a2b

Previous work: MissionBanner section added to Section.tsx switch statement.

• No functional code created yet for this feature.

Starting Point: https://app.codesee.io/data-flow/0e490f50-11b3-11ec-88f8-bb5d3013d81c

Goal:

• Add component to display mission statement / basic summary and chosen graphic.
• Add Contentful model to provide needed data for the component.

We need to make it easier to contribute to DA's landing site! We can do this securely by committing a read-only Contentful access token to the repo.

Perhaps using Algolia

Goals:

• mention Algolia in the Data Privacy section of the page
• Integrate Algolia package
• Index site using Algolia
• Design/implement search bar
• Deploy hook to rebuild Algolia index

CodeSee Recording

Ideally these should have at least 20% of the logo size's space between them.

Let's use the media query to replace this with the previously used 2D static graphic.

Same deal as #1 . I haven't used Yarn before and didn't want to goof it up! If someone can set it up I should be able to read the docs and figure out how to work with it just fine.

Previous work:

Show the logo as content from Contentful.

Starting point:
https://app.codesee.io/shared/99dc9ec0-3804-11ec-b5c4-e93c0b8edf5c

Goal:

• Style the navbar so the logo fits fully, making the logo fit dynamically
• Remove the logo title from below the image
• Right-align the nav links

We want to try and match the style of the proposed design:
https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page?node-id=208%3A601

It's been a minute since I had a chance to code, so now's a good time to do some maintenance work as I get back up to speed.

Remove Unused Components

(CodeSee Map)

• DropdownMenu
• Animation
• Card
• Badge

Review & Refactor Static Pages

• Home
• About Us
• Donate

Review & Refactor Route Pages

• Simplify the Design, Convert CSS to Tailwind
  Moved to #772

Remove unused Contentful-powered functionality:

Be sure to remove unnecessary entries from Contentful, but save the content if it's usable.

• Taylor's over-architected site / pages / menu setup.
• Unused content types.
• Stale content types / data (i.e. previous round of needs assessment).
• Check for duplicate entries & resolve.

Review Docs & Dev Experience

• README
• Document the many config files. Loom? CodeSee Maps?

We're currently importing fonts in the layouts/Default.tsx file. This means that pages that don't use this layout won't download the fonts.

We should import the fonts globally so that every page is consistent.

CodeSee recording

Right now, the images are side-by-side in mobile with the title.

Would be good to have them above or below the title, with one image shown at a time, but should still rotate through them.

https://jestjs.io/

Haven't had time to setup testing yet- making sure this combo of tools works well for the team first. Anyone can pick this up in the meantime!

The Team & Role data models are available on Forestry! We need to load them into Gatsby, and then consume that data to generate team pages.

• Create issue for team pages UI dev

This will be very similar to loading the shipping data models into Gatsby: #358

Right now, our individual subregion page is largely unstyled.

These can be styled using TailwindCSS.

Get started with our codebase's region functionality by clicking on this CodeSee Map:

Previous work: ShipmentBanner section added to Section.tsx switch statement.

• No functional code created yet for this feature.

Starting Point:
Recording: https://app.codesee.io/shared/99dc9ec0-3804-11ec-b5c4-e93c0b8edf5c

Map with Tour: https://app.codesee.io/maps/public/fe74c460-3805-11ec-8cad-e75806fe4532

Goal:

• Add component to display a short summary of shipment routes, with truncated image carousel included.
• Add Contentful model to provide needed data for the component.

https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page

Previous work: add content to the regions listing (index page) and to each region page (templates).

• Index page now displays each region, along with a thumbnail of a map of the region.
• Template page now displays region information (name + full-image map) and a table of shipment data, including icons describing the category of the ship.

Starting Point: https://app.codesee.io/shared/eda14600-0681-11ec-bcdf-b35d3087a4b1

Goal:

• Add cell spacing. Alternate row background colors.

Use Forestry to implement region pages, instead of Contentful.

• 1. Create a Region page template in Forestry with the following fields

Region Name: string
Sub-Region Name: string
Overview: markdown
Government Response: markdown
Population: #
Population Trend: markdown
Population Description: markdown
News Updates: markdown (or list of fields?)
Stay Informed: markdown (or list of fields?)

• 2. Hardcode an index page with displays a card for each region page.

• 3. Create region pages in Forestry using the needs assessment regional context (Google Drive).

Visualize Needs Assessment results on each region page.

• 1. Figure out a good solution for bulk-uploading data, either in Contentful, through Forestry, or by adding a data file directly to the project. The needs assessment results data can be found on this sheet.

Include Content from older "Where We Work" Page

• 1. Review where-we-work & related region pages for relevant content.
• 2. Add it to our new region pages.
• 3. Delete the older where-we-work / region pages.

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency @tailwindcss/typography to v0.5.13
• chore(deps): update dependency node to v18.20.3
• chore(deps): update dependency ts-jest to v29.1.4
• fix(deps): update dependency @types/lodash to v4.17.5
• fix(deps): update dependency csv-parse to v5.5.6
• fix(deps): update dependency gatsby to v4.25.9
• fix(deps): update dependency sharp to v0.33.4
• fix(deps): update dependency tailwindcss to v3.4.4
• fix(deps): update dependency react-router-dom to v6.23.1
• fix(deps): update nivo monorepo to ^0.87.0 (@nivo/bar, @nivo/core, @nivo/sunburst)
• fix(deps): update playwright monorepo to v1.44.1 (@playwright/test, playwright)
• fix(deps): update react monorepo (@types/react, @types/react-dom, react, react-dom)
• chore(deps): update dependency node to v20
• chore(deps): update dependency prettier to v3
• chore(deps): update peter-evans/create-pull-request action to v6
• chore(deps): update testing-library monorepo (major) (@testing-library/jest-dom, @testing-library/react)
• fix(deps): update dependency @fontsource/lato to v5
• fix(deps): update dependency cross-fetch to v4
• fix(deps): update dependency husky to v9
• fix(deps): update dependency pretty-quick to v4
• fix(deps): update dependency react-markdown to v9
• 🔐 Create all rate-limited PRs at once 🔐

Pending Branch Automerge

These updates await pending status checks before automerging. Click on a checkbox to abort the branch automerge, and create a PR instead.

• chore(deps): update babel monorepo to v7.24.7 (@babel/core, @babel/plugin-transform-react-jsx)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update actions/upload-artifact action to v4
• chore(deps): update dependency jest-extended to v4
• chore(deps): update gatsby monorepo (major) (babel-preset-gatsby, gatsby, gatsby-plugin-image, gatsby-plugin-page-creator, gatsby-plugin-postcss, gatsby-plugin-sharp, gatsby-plugin-typescript, gatsby-source-filesystem, gatsby-transformer-json, gatsby-transformer-remark, gatsby-transformer-sharp)
• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-a11y, @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-links, @storybook/builder-webpack5, @storybook/react)
• fix(deps): update dependency minimatch to v9
• fix(deps): update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

Right now, our individual region page is largely unstyled.

This can be styled using TailwindCSS.

Get started with our codebase's region functionality by clicking on this CodeSee Map:

Previous work: SideCardStack section added to Section.tsx switch statement.

• No functional code created yet for this feature.

Starting Point:
Recording: https://app.codesee.io/shared/99dc9ec0-3804-11ec-b5c4-e93c0b8edf5c

Map with Tour: https://app.codesee.io/maps/public/fe74c460-3805-11ec-8cad-e75806fe4532

https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page

Goal:

• Add component to display multiple page-wide horizontal cards, alternating the side that the image in the card is displayed on in the stack.
• Add Contentful model to provide needed data for the component.

They were added without acquiring permission by the original author (Figma?) first.

Please add arrows to point to where the shipment is starting and ending.

This is the library that we're using to create the globe: https://www.npmjs.com/package/react-globe.gl

Here is a CodeSee Map showing relevant files: https://app.codesee.io/maps/public/78877930-2e02-11ed-aabd-d3a27bef36f2

https://prettier.io/

Same as #1 . Want to keep things in sync with the shipment tracker, don't know code formatting conventions for TypeScript.

Previous work: ImageCarousel section added to Section.tsx switch statement. React component created.

• The ImageCarousel displays images from an object passed into it. It is currently using a placeholder image object.

Starting Point:
Recording: https://app.codesee.io/shared/99dc9ec0-3804-11ec-b5c4-e93c0b8edf5c

Map with Tour: https://app.codesee.io/maps/public/fe74c460-3805-11ec-8cad-e75806fe4532

https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page

Goal:

• Add Contentful model to provide needed data for the component.
• Refactor ImageCarousel to use Contentful query object structure.

Previous work: add content to the regions listing (index page) and to each region page (templates).

• Index page now displays each region, along with a thumbnail of a map of the region.
• Template page now displays region information (name + full-image map) and a table of shipment data, including icons describing the category of the ship.

Starting Point: https://app.codesee.io/shared/eda14600-0681-11ec-bcdf-b35d3087a4b1

Goals:

• Show the totals for relevant columns as a bottom row in the table: # of shipments, commercial value, weight, distance, C02.
• Reach: Pull the totals out into a more stylized summary above the table, to highlight our impact.
• Evaluate additional ways to display the totals (see issue).
• Slight number formatting. Possibly look at browser region to format based on user locale.

CodeSee Recording:
https://app.codesee.io/shared/4bb1a720-5912-11ec-92c1-f7ca5b5ec43b

Figma design:

Can startoff with a static image, then implement the Image Carousel to show a variety of shipment / destination related images. Related to #32

Figma link for reference:
https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page?node-id=208%3A600

https://tailwindcss.com/

Haven't used it before, so this is up for grabs if you have! Would like to keep css separate from JS tho.

There are plenty of "generic" pages we need to get onto the site, such as "About Us", "How We Work", or informational pages to help our partners understand the complexities of global aid logistics. Each of these pages has unique content, so we can't create a reusable template with custom fields. And there are a decent number of them, so it doesn't make sense to create a specialized template for each page.

Our desired approach is to create a "generic" page template that can incorporate a standard set of content components. This will allow DA's admin & logistics team members to create a new page in forestry and select the content blocks they need, in the order they need them.

We should take a front-to-back approach here: start by hard-coding content into a hard-coded page, and then refactor that into react templates + components, before finally setting up a forestry template and pulling the data down from forestry into our react page / components.

CodeSee Map w/ Tour: https://app.codesee.io/maps/public/0837df10-1efa-11ed-9245-992c0d264c17

Page Template

Each page can have some standard fields, such as a title. Pages will also receive an array of content sections, each of which contains it's own content blocks.

Content Sections

Content sections can have some standard fields, such as a title, as well as an array of content blocks. Content sections span the full width of the screen and their height is based on the amount of content they contain. They are responsible for the layout, background color, and other section-wide styling decisions.

EX: Full width, columns, grid, etc.

Content Blocks

Content blocks have fields based on the type of content that they are displaying. They expand to fill the width that their wrapping section has allocated to them, and are as high as the content requires. They are responsible for rendering the content appropriately.

EX:

• Body text
  • Markdown field
• Image with Caption
  • Image
  • Caption Title (only sometimes applicable)
  • Caption Text
  • Attribution
• Youtube Embed
  • Youtube URL
  • Title to appear above the video
  • Possibly some parameters from these: https://developers.google.com/youtube/player_parameters. Alternatively, Forestry could ask for the full Youtube embed link instead of just the URL, and the user would need to specify these parameters when creating the embed link.
    • cc_load_policy - 1 means captions will be shown by default
    • controls - do video player controls appear in the frame?
    • disablekb - 1 means keyboard controls are disabled
    • modestbranding - removes the Youtube logo from the bottom left)
    • loop - loops the video
    • playsinline - This parameter controls whether videos play inline or fullscreen on iOS. 0 means fullscreen. 0 is default. 1 means inline.
    • rel - If parameter is set to 0, the related videos shown at the end will only be from the same channel as the video. If 1, could be related videos from any channel.
• General Card(s)
  • Each card
    • Image
    • Image Shape (rectangle or circle)
    • Title
    • Subtitle
    • Body Text
    • Border Color (option for transparent)
    • Body Color (option for transparent)
    • Dropdown
    • Behavior when you hover mouse over it
      • Color change?
      • Text that appears with the hover?
• Dropdown
  • Title, color of box it appears in, etc. (this is the stuff to show initially).
  • Content block(s) to appear within the dropdown when it’s clicked on.
  • For example, imagine a “What we do” page that lists three different projects, and if you click on one, the box expands with content blocks inside to explain more about that project.
• Prezi Embed (lower priority)
  • Embed link

I've seen projects have a "Open with Gitpod" button, such as OpenSauced

Let's integrate this!

Related to #32

CodeSee Recording:
https://app.codesee.io/shared/4bb1a720-5912-11ec-92c1-f7ca5b5ec43b

Figma design:

See the Figma design for reference:
https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page?node-id=208%3A600

Previous work: NumbersSummary section added to Section.tsx switch statement.

• No functional code created yet for this feature.

Starting Point:
Recording: https://app.codesee.io/shared/99dc9ec0-3804-11ec-b5c4-e93c0b8edf5c

Map with Tour: https://app.codesee.io/maps/public/fe74c460-3805-11ec-8cad-e75806fe4532

https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page

Goal:

• Add component to display a 3x2 grid of images with short captions summarizing the year's metrics.
• Add Contentful model to provide needed data for the component.

In order to catch these, recommend running Lighthouse on the page, and seeing which images are missing alt text.

CodeSee Recording

Currently, we have a card-based design for the regions page, which we'd like to bring home and/or improve.

Things we'd love to add:

• Icons for services rendered in those regions, such as:
  • Import
  • Export
  • Shipping
    • Pallet shipping
    • Trucks
    • Containers
  • Needs assessments
• Impact overview
  • Number of people
  • Needs met

@ramonh and @jtfairbank created the PageBanner component ( PR #35 ). We originally thought it would be a Content component but during the implementation it made more sense as a Section component with Content components in it. Now we need to refactor the code by moving the component to the right part of the codebase.

• Move src/components/content/PageBanner.tsx to src/components/section/. Make sure the imports to / from the file aren't broken!
• Rename the component to SectionPageBanner.tsx. Make sure to update the components name within the file!
• Please add your name to the /Contributors.md file if this is your first time contributing to the project!

Starting Point: https://app.codesee.io/shared/a1a61c20-278e-11ec-8a7b-bd57c9eaa54f

Built & hosted by Netlify.

• Document this setup & other deployment / production related notes in the README.

CodeSee recording:
https://app.codesee.io/shared/4bb1a720-5912-11ec-92c1-f7ca5b5ec43b

Figma design:

Figma design for reference:
https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page?node-id=208%3A601

NOTE: SocialIconContainer has the icons imported

@jtfairbank has never used TypeScript before. Pretty sure I can figure it out since I understand JS well even if I'm a bit rusty to the ecosystem at the moment. But I didn't want to set it up for a new project so I've bootstrapped this one in JS for the time being.

Ideally everything looks pretty similar to the shipment tracker

CodeSee Recording:
https://app.codesee.io/shared/4bb1a720-5912-11ec-92c1-f7ca5b5ec43b

Figma link:
https://www.figma.com/file/Ey8xRnstZS4UYmqQwyYZdC/Landing-Page?node-id=208%3A601

Text content for "In-kind Donations":

Distribute Aid runs a successful in-kind donation programme where we connect companies with aid organisations. Through our network of hundreds of charities we can handle coordinating large volumes of donations. To date we have secured over 5 million items through our in-kind donor programme. Email [email protected] if you can donate in-kind.

• TODO: @jtfairbank add images and text copy for Fort Pickett section

Would be great if we could have a link in the footer (just under the hello@ email) to take people to it.

Content:

• Whistleblower Policy.docx (1).pdf

• Code_of_Conduct.pdf

• Update link to code of ethics

For the first iteration it's OK to link to PDF files.

Could get tricky, since the code depends on these models.

• Document how storytelling volunteers can & can't change the Contentful models independently. EX: Adding a field should be fine, renaming a field would break references to it.
• Document how storytelling volunteers & devs should pair to adjust the models in Contentful and the codebase at the same time.
• Restructure existing site hierarchy to be less complicate to work with.

Example of the issue here.

CodeSee recording

Right now, the sections are side-by-side in mobile.

Would be good to have them above or below each other.

It doesn't really make sense to show the "Donate" button on the donation page because it will just link to the current page. So we can hide it.

It would be nice to import components using path aliases. For example: import Nav from '@components/Nav'.

Gatsby has a plugin for it, and we'll also need to set up a tsconfig.json file to make TypeScript aware of the paths.

CodeSee Recording:
https://app.codesee.io/shared/4bb1a720-5912-11ec-92c1-f7ca5b5ec43b

• Make the button match that in the navigation bar

Old data

New data

Period: July 2021 - June 2022

Designs are here.

There are 5 sections:

• the hero with a video
• the mission statement
• the board members
• the mission details
• the timeline

Please feel free to work on all of them at once or break them up into multiple PRs.

Notes

• the page route should be /about (replace the /who-we-are route)
• the floating social links will need to be displayed on other pages, so it would be great to create a reusable component for them
• this article might be a good starting point for building the timeline

Assets:

Timeline items as JSON:

[
  {
    "period": "Summer 2018",
    "content": "When sorting donations in Scotland Sara had the idea for Distribute Aid to make it easier for people to help"
  },
  {
    "period": "Fall 2018",
    "content": "Sara and Taylor (co-founders) spent 3 months visiting and volunteering with 50+ aid organisations in Europe to discover the most effective ways to help"
  },
  {
    "period": "January 2019",
    "content": "Distribute Aid became a registered charity in Sweden"
  },
  {
    "period": "October 2019",
    "content": "Distribute Aid facilitated its first large in-kind donation"
  },
  {
    "period": "January 2020",
    "content": "Distribute Aid received the \"Most Direct Human Impact\" award by the UN Technology and Innovation Lab"
  },
  {
    "period": "March 2020",
    "content": "Flexport.org rewarded Distribute Aid with a $50,000 grant to provide emergency aid shipments"
  },
  {
    "period": "Fall 2020",
    "content": "Distribute Aid facilitated the international response to the Moria fire, tripling its number of aid shipments to date"
  },
  {
    "period": "Spring 2021",
    "content": "Distribute Aid set up aid hubs and regular routes from the U.K. to help grassroots organisations continue to send aid after Brexit."
  }
]