sheltertechsf / sheltertech.org Goto Github PK

Currently the events and volunteer pages need to be updated manually for every new event that is added and then again after the event's date has passed. This requires a little, but frequent, amount of developer time each week. It would be better to simplify this process so a non-developer can update this page and it automatically sorts events based on upcoming or past.

@fredciaramaglia commented on Tue May 21 2019

@fredciaramaglia commented on Tue May 21 2019

Since the SF Service Guide app links to sheltertech.org in several places, before the release of SF Service Guide we need to replace the many "AskDarcel" references with "SF Service Guide", in the following places:

1. Programs page - AskDarcel name and graphic
2. Impact page - AskDarcel name and graphic
3. Get Involved page
4. Team page
5. Several of the Blog articles

This issue is related to Issue 760: "Replace references to "AskDarcel" app in SF Service Guide with "SF Service Guide" and probably should be done at the same time.

@derekfidler commented on Wed Jun 01 2016

Update the CSS to match the comps and update team and project info

"Since 2015, we've equipped one shelter and 7 SROs with free WiFi providing more than 1000 underserved people with access to the Internet. And that's jus the beginning."

We have a few components where we conditionally compute the CSS class names depending on prop values. The classnames NPM library is specifically designed to help make this cleaner.

An example of this in our codebase is #110 (comment).

cc @davidagustin

Seen here, https://staging.sheltertech.org

This link doesn't work after deploying using the deployment steps

https://staging.sheltertech.org/get-involved

It does work if I do a yarn start locally.

We handled the grid system in our mobile views in inconsistent ways — sometimes setting padding on the .bleedWrapper and sometimes setting padding on the .gridParent — so it might be a good idea to go through and update them to be more consistent.

Note that in the actual designs, the left and right margins seem to vary between 20px and 40px, so we may not be able to use just a single grid definition for all components. However, we should still be able to improve the consistency across them.

EIN is an acronym for Employer Identification Number and all the letters should be in uppercase.

I still feel like there's probably a cleaner way to deal with this, but we probably don't need to handle this now. Let's revisit how this input text boxes are handled in the future.

Originally posted by @richardxia in #89 (comment)

When you navigate pages, the page will load before the CSS so you see a bright flash

Can we work together to implement this?

Although the design for the new ShelterConnect page is still being finalized, it looks like we are definitely going to have a map component that lists the specific ShelterConnect installation sites, so we can get started on implementing that map component.

See the map in the middle of the ShelterConnect page under the "Designs V2" Figma page: https://www.figma.com/file/kKaWvJvyzhNS9hD21v7Ei5/ShelterTech.org-2020?node-id=186%3A20

The component should be data-driven and expect the list of sites to be passed in as a prop.

If I recall correctly, I think I spoke with @derekfidler a couple weeks ago and said that we might have a third type of marker, so we should build out the initial version of this with that kind of extensibility in mind.

We should update the set of logos in the Partners and Sponsors component to include everything in the latest Figma design: https://www.figma.com/file/HLVHC58KwkcVFXkKAuY0ej/ShelterTech.org-Design-System?node-id=669%3A0

We should also double check that the component renders fine even though there are four rows of logos now.

Even if we mostly follow Prettier and Airbnb's style guides, there are a few things that cannot be programmatically enforced, and it would be good for us to explicitly state what our conventions are.

One concrete example of something that we could mention in the style guide is how we use CSS modules and the classnames library. See #153 (comment).

@jfhamlin commented on Wed May 25 2016

The readme should explain that we use GitHub Actions to auto-deploy storybook to GitHub Pages every time we merge to main. It should also provide the url, which is: https://sheltertechsf.github.io/sheltertech.org/storybook-static.

There was a situation in the CI where the file name was a different case than the import and caused the CI to fail. Locally this is not an issue for MacOS as the file reader of the operating system is case insensitive. The file reader is case sensitive in the CI although. Is there any way that CircleCI can be configured to resolve paths the same way? @richardxia

Set up a GitHub Actions workflow that builds and publishes the Storybook site to GitHub Pages. This can be done similar to the staging site builds, which run on every merge to the main branch and push the static HTML files up to AWS S3.

There are several places where could update the copy to use more inclusive language.

Home page

• In the site <title>, the word "underserved" should be replaced with "under-resourced"
• In the "Get Involved" section, replace the word "empower" with "connect"
• In the third quote in the block quote component, the word "vulnerable" should be replaced with "[at-risk]". Since it's a quote, this replacement should include the square brackets

Volunteer page

• In the hero banner, "vulnerable" should be replaced with "at-risk"
• In the "Let's work together" section, "underserved" should be replaced with "under-resourced"

Donate page

• The word "underserved" should be replaced with "under-resourced"

@jfhamlin commented on Wed May 25 2016

This should be configured for both the Gatsby build and the Storybook build.

The way we can test that this has been done correctly is to convert the inline <InputField> field component to TypeScript and check that it builds both in Gatsby and Storybook.

Currently, we check the Storybook stories for errors and warnings, but we have no equivalent check for the actual content on the actual site.