my-covid-story / www Goto Github PK

Prettier / eslint is configured, but just need to add a command and wire it up to husky so that our commits are all nice and consistently formatted.

Ties into #76 in that we need to map the FSA to geo spacial data and perform actions accordingly

Currently, it doesn't look fantastic on a desktop browser. Design is in Figma (thanks Curtis!):
https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=42%3A0

• API rework (to support server-side and client-side rendering)
• Basic stories feed at /stories
• More responsive layout
• Background images (one from each category-based collection)
• FSA to city mapping
• Single story details at /stories:id
• Navigation from feed to single story
• Include name for display, but only if not anonymous

• Clear the contact fields (name, email, phone twitter) when the contact check is unchecked
• When one of the optional contact fields has a value, display an optional label beside the other two.

FSAs (the first three digits of a postal code) aren't meaningful to most users. It would be helpful to show the name of the city where that FSA resides.

Canada Post has an API, but it's intended for looking up a specific address and it has a per-call cost.

Wikipedia has the data, but it's spread out over 18 pages of HTML. I don't see any raw data. I suppose it would be possible to scrape the pages and assemble the data ourselves.

I also found this by Googling. I don't know if it's actually free or if it's any good, and I didn't create an account to try downloading.

I've signed us up for a Fathom account to get some privacy first analytics going.

https://adamwathan.me/2019/10/17/persistent-layout-patterns-in-nextjs/

Add Twitter and Facebook buttons to the nav, and to the thank you page.

Place in select image assets into /public/img/background for use as stock images for story tiles.

As you get close to the char / word limit, display remaining to help users.

We want users to be able to share the stories of fellow Ontarians via social media. On each page a Share This Story will slide open a drawer with social buttons

https://www.npmjs.com/package/react-share

I'd like to be able to tap a button to copy the url in order to paste it in whatever app or tool I'm using.

We need to add some bottom spacing on the share card and drawer so that the swipe between apps bar isn't super close to the floating ribbon or drawer contents

Include the following schema into the head of the HTML page to aid in SEO

<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "MyCovidStory", "alternateName": "MyCovidStory.ca", "url": "https://MyCovidStory.ca", "logo": "", "sameAs": [ "https://www.facebook.com/MyCovidStoryCA", "https://twitter.com/MyCOVIDStory_CA", "https://www.instagram.com/MyCovidStory_CA/", "https://github.com/my-covid-story/www", "https://MyCovidStory.ca" ] } </script>

Currently when a moderator changes the status of a story the updatedAt column isn't updated.

We should have a custom 404 page rather than relying on the NextJS default

Need to adjust the Chakra theming to get us closer to design spec.

Should be an easy solve.

I think adding commitlint inside a new husky commit-msg hook would help in standardizing the commit messages and maybe even in creating an automatic changelog. There are plenty of tools for that, if you want I can open a PR for this.

Relies on #6

• Where would you like your story to be shared? (Checkboxes)
• What information would you like to share along with your story? (Checkboxes)
• Can a journalist contact you for more information or an interview (Radio buttons)
• If yes, please enter your preferred method of contact (text box)

Using this package

We're getting to the point where we have enough stories that we should be paginating the feed page.

Probably want some server side sentry to capture any issues there.

Currently, it doesn't look fantastic on a desktop browser. Design is in Figma (thanks Curtis!):
https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=42%3A0

To keep analytics as clean as possible, ensure that you can only hit https://www.mycovidstory.ca/stories/thanks from submitting the form

Needs a larger discussion to around transparency of edits

We still have the Vercel default, and should update.

As an MVP, we will first focus on...:

• sending an email with the link to stories to premier + key cabinet personnel. Every story will trigger an email to these parties, for now (no curation)
• Once a story has been sent, add a label on the story to say we have shared to the premier/key cabinet personnel.

All stories are shared, as long as the story is published and approved. Unlike sharing with media personnel, we only share the public facing link to the premier & cabinet (which is publicly accessible anyway).

Every morning we should export a list of contacts who consented to being contacted by the media. This could be sent to Slack

https://vercel.com/docs/solutions/cron-jobs

Little cosmetic enhancement.

It's pretty critical that we have proper titles and descriptions for individual stories. For social sharing.

Pass form payload (minus any PII) to Senty for backup.

This would send an email to [email protected] with a set subject.

Should be fairly straightforward, here's an article on it.

Added image that can be exported from Figma as an svg or other file type.

https://www.figma.com/file/hwuWoqcVWWWrukev8pl9rn/My-Covid-Story?node-id=752%3A0

Build out /story/[id] where [id] is the ccuid from the DB of the story. I think for now, we use getStaticPaths to statically generate each post.

As we grow, we can constrain the number that we pre-render at build time and use fallback: true to render the rest on-demand. The render is then cached for future visits.

See Figma for content

Basic Overview:
Welcome/Intro
Data governance stuff
Form

• I am a [dropdown]
• Are you sharing your own story or someone else's [dropdown]
• Postal Code [text box]
• Name [text box]
• Tell us your story [text box] (prompt: "Please share your Covid story with us")

PRD Link: https://docs.google.com/document/d/13w_pOfNRXx9BiDL9nh6AbMR50wi9xjRZtlv9divlJDc/edit?pli=1#heading=h.twy5jk5i31u8

I'm an Italian student who had a very similar idea to the project you're developing and I would love to contribute and see it available globally, even outside Canada. Do you think it's something that could be done?

• Introduce localization for the following languages - Urdu, Hindi, Punjabi. At this point in time, unless it is possible for us to get someone to translate all static fields for us, we will need to depend on translating the text using Google Translate at a minimum
• Add a message on the story page to remind users that they are more than welcome to share their story even if it is not in English
• Add in a link for users to be able to contact us to volunteer their support for translation (addressed in #102)

Link to Facebook - https://www.facebook.com/MyCovidStoryCA
Link to Instagram https://www.instagram.com/mycovidstory_ca/

Changes required:

• Add FB / Insta links on the main page's top banner
• On story submission success page, add in a button to share our FB page and Instagram profile

A simple authenticated portal where admins can view a list of unapproved stories and approve them.

PRD Link: https://docs.google.com/document/d/13w_pOfNRXx9BiDL9nh6AbMR50wi9xjRZtlv9divlJDc/edit?pli=1#heading=h.uu9oyxsnsre

Todo: need list of content warnings