sheltertechsf / sheltertech.org Goto Github PK

JavaScript 24.96% CSS 23.54% TypeScript 51.50%

sheltertech.org's Introduction

ShelterTech.org Website

Created with Gatsby with content managed in Prismic

This repository contains the source code to the sheltertech.org website. To get the code running for the first time, please see the Getting Started Guide. For more specific documentation, visit one of the pages below:

Staging website

To view the current state of any new features the staging website, please visit https://staging.sheltertech.org/.

Storybook component library

We use GitHub pages to host a live version of Storybook, our component library. Using GitHub Actions, it is automatically kept in sync with the main branch. It can be found at http://sheltertechsf.github.io/sheltertech.org/storybook-static.

sheltertech.org's People

Contributors

Stargazers

Watchers

Forkers

tochaim tsyaeger giftofgrub gouravmakhija18 mohitbansal321 zen-gineer

sheltertech.org's Issues

Redirect on 404 to Home Page

Investigate whether we should use the classnames library

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

Find responsive solution for inputbox

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)

Convert ImageHeader component to TypeScript

Create React map component to list out ShelterConnect installation sites

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.

Set up TypeScript compiler with our build system

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.

Convert Spacer component to TypeScript

Typo in mission statement

"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."

Convert Modal component to TypeScript

Page flashes because it loads before CSS

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

Convert VideoHeader component to TypeScript

Update copy to be more inclusive

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"

Update footer "ein" letters to uppercase

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

Cleanup social links in footer

Convert ThreeParagraphBlock component to TypeScript

Convert FooterCTACard component to TypeScript

Add CI check that actual Gatsby site has no JavaScript warnings

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

Automate, or simplify, event updates

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.

Convert TwoParagraphBlock component to TypeScript

Convert ProgramCard component to TypeScript

Convert Button component to TypeScript

"Get Involved" page route doesn't exist in /dist deployment

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.

Needs meta info for social shares

Add Google Analytics to Sheltertech.Org

Can we work together to implement this?

Convert HomePageLargeParagraph component to TypeScript

Convert COVID19InfoBoxBlock component to TypeScript

Publish Storybook site to GitHub Pages

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.

Update Sheltertech.org with new team images and project info

@derekfidler commented on Wed Jun 01 2016

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

Create a HostedZone for sheltertech.org

@jfhamlin commented on Wed May 25 2016

Add Storybook/github pages info and link to readme

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.

Convert ArticleSpotlightCard component to TypeScript

Convert YouTubeEmbed component to TypeScript

Logo and donate visuals are broken on mobile

Refactor mobile grid CSS

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.

Convert Footer component to TypeScript

Case insensitive File Reader for CircleCI

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

Convert DonationBlock component to TypeScript

"Replace references to "AskDarcel" app in sheltertech.org with "SF Service Guide"

@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:

Programs page - AskDarcel name and graphic
Impact page - AskDarcel name and graphic
Get Involved page
Team page
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.