protect-earth / protect.earth

International Directory of Climate Action for Humans, Businesses, and anyone else.
https://protect.earth
MIT License
35 stars 15 forks source link

Frontend Rewrite #6

Closed philsturgeon closed 4 years ago

philsturgeon commented 4 years ago

"Actions"

We will still have Categories, but instead of "Links" let's call them "Actions". Things people can do, buy a thing, donate to a thing, subscribe to a thing, they're all actions. Climate actions :D

API-centric

The API doesn't have any docs yet as it's automatically created by Statamic. To learn how the Statamic Content API works in a generic way, look at their Content API documentation. Notice the sorting and filtering stuff.

If there are any mistakes noticed in the docs please send them a PR, as v3.0 is beta at this point.

Visual Ideas

The Statamic Marketplace looks pretty good: https://statamic.com/marketplace/addons

Images, a brief bit of text, and a page with more information about the action. I'd like to start adding videos/images, reviews, etc later on, but that extra "action page" can come in a v2.1.

Featured Images

There should only ever be 3 featured links in a category, because multiple look broken. Grab the most recent 3 featured items, and keep it relevant to the country selected, e.g.: if there are 5 links with featured, 2 global and one for the country I have selected, I should see three links, not 5, and not just the 2.

About / FAQ Pages

Make sure we have a generic page design with awesome text/headers, etc. We want to write up a "Should I Offset" page and a few other topics to grab that SEO and give people useful answers to commonly confused topics.

Search

We want to help people find stuff with a search box in the nav. Design a search box in but leave the heavy lifting to be done in #9 so we can share the work out.

ajitbohra commented 4 years ago

if I am not wrong we are planning to revamp and move over to statamic?

philsturgeon commented 4 years ago

@ajitbohra correct, more on that on #16. I'll be deploying the API shortly, and the new Vue.js frontend should emerge soon. I don't know how it'll look but more hands will definitely be welcome when it does.

ajitbohra commented 4 years ago

So this is what we are planning:

plan to take a stab at design refreshing using tailwindcss.

tsliang commented 4 years ago

@philsturgeon let me know when you're ready for more hands, would be happy to help on the Vue side of things!

philsturgeon commented 4 years ago

Ok good news! I've moved the statamic-based mirror API into master, which makes it a bit cluttered but you can ignore everything in the 'api/' folder for now.

It's deployed via Forge (thanks @taylorotwell), meaning the API is available here:

This API comes from the Statamic v3 Content API which is documented here: https://statamic.dev/rest-api

@ijpatricio if you could get a branch up with the new frontend, I think @ajitbohra and @tsliang are ready and waiting to go!

The Vue.js frontend so far is mostly a pre-built theme from somewhere or other with a lot of excellent work being done by @ijpatricio on top to make it work for us. If more visual work could be done to make it less pre-built, and to take care of the idea above, we'd be ready to go!

ijpatricio commented 4 years ago

Hey guys!

@philsturgeon sorry for the misunderstanding on the repo before

Hello @ajitbohra @tsliang

The feature branch now has the Vue app, tailwind, vue-router, vue-meta, vue-analytics, vuex, and the initial skeleton with all setup together.

It's not perfect, but I had to let it out of my head today, so let's think of this as a starting point.

Base and inspirations https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/presentation https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/landing https://www.creative-tim.com/learning-lab/tailwind-starter-kit#/profile

https://www.tailwindtoolbox.com/templates/landing-page

Let me know your thoughts, happy coding!

ijpatricio commented 4 years ago

Here you go, could not leave this as was! Need. Sleep. Now. Will eat first ahahah

image

philsturgeon commented 4 years ago

@ijpatricio this is great! Thanks for getting this started, I know life is bizarre at the moment. Between us we can do a lot :D

I deleted Gatsby and moved the frontend/ folder contents into the root, so we've got less complexity to worry about now. I changed .env.local to point to api.protect.earth by default, and put instructions into README.md for how to run the API if they want to, but it should be optional.

@ijpatricio this branch can still be mostly yours, I wont push anymore to it. Think you can finish up category images on this homepage, and make the basic "/categories/foo" and "/tags/foo" pages? Make them as simple looking as you like, then I think the rest of us can start sending PRs to this branch?

Squallac commented 4 years ago

Hello! I can help you as well with the front end, if you want I can make the /tags/foo pages under a new branch named "feature/tags". Do we have an endpoint for this? This is the current functionality of tags right? https://protect.earth/tags/commute

ijpatricio commented 4 years ago

@philsturgeon yeah for sure, we'll overcome!! and let's do a lot!!

It's getting cleaner and better, woohooo Yep, it will be optional. After this tags and categories views are lined up, i'll sum up with e2e testing, and i'll record to a fixture, a few records from the API. Is this ok with you?

Today I'll take care of the Tags view, combining with the existing PR @Squallac

@Squallac Thanks!! hope you don't mind i'll tweak minor things

ijpatricio commented 4 years ago

@philsturgeon can't physically do anymore today. i'll finish up on the next go:

tomorrow or during weekend

http://localhost:8080/actions

What do you think of this as a page skeleton?

image

Squallac commented 4 years ago

Sure @ijpatricio don't worry! Unfortunately I can only invest a couple of hours per week but I would like to help in whatever I can.

ijpatricio commented 4 years ago

@philsturgeon

check the footer links

image

so now we have a few things implemented, not to say a bunch!

now i regret i didnt take a note...

What do you say, I'll close this issue, and let's open smaller (like i did a few)

And take it from there ;)

Happy biking! 🚵‍♀️

ijpatricio commented 4 years ago

image

image

philsturgeon commented 4 years ago

This mega issue was good, but let's close it down and focus on the other issues in the May v2 Launch milestone to get the MVP #39 over the line.