Implement homepage redesign

[hannahkane]

Pending completion of #800

Important: the blog feed should be limited to articles tagged with "#teachtheweb" rather than the entire blog feed.

[hannahkane]

Estimation effort: small

[hannahkane]

No longer blocked!

[ldecoursy]

@sabrinang to follow-up with Cassie for R+

[mmmavis]

For blog posts:

We want to show the latest posts tagged with #teachtheweb on blog.webmaker.org
RSS feed url: https://blog.webmaker.org/tag/teachtheweb/feed

[toolness]

Ok, there's a few things we can do to get those posts:

• Modify the Wordpress RSS feed to be delivered with CORS headers. I'm not actually a huge fan of this because that RSS feed is actually quite large, as it includes the entire post. It's also including the 10 most recent posts, while we only need to show the 4 most recent posts on that homepage.
• Use one of the WordPress APIs with CORS headers. I'm unfamiliar with all the different plugins and APIs that are available; many of them don't support CORS out-of-the-box.
• Wait until we have Use a lightweight server that dynamically renders HTML #585 done and have the lightweight dynamic server pull from the Wordpress RSS feed.
• Have the static site generator pull from the Wordpress RSS feed and statically include it in the generated HTML for the homepage.
• Add an endpoint to teach-api that pulls the Wordpress RSS feed, minimizes it to include only what's needed for the homepage, and delivers it as JSON with CORS headers to the teach site.

Given those options, I think the last one (adding an endpoint to teach-api) may actually be the most straightforward and efficient option, as it's not very technically volatile, can be implemented relatively quickly, and will also work well once we move to a dynamic server situation.

[toolness]

@mmmavis, regardless of which one of the above sol'ns we go with, I don't want it to block you on implementing the rest of the page. Want to just use dummy JSON data for now, and we'll replace it with the real data once we figure out exactly how we want to proceed?

[toolness]

Oh wait! Yet another option is to just use the Google Feed API, at least for now. Hmmmmmm

At the very least I think it might be smart to use the same JSON schema that the Google Feed API uses. As long as we use that, we can plug-in whatever actual implementation we want--whether it's a same-origin Ajax request to a lightweight dynamic server, a CORS request to teach-api, the Google Feed API, or something else entirely.

[mmmavis]

Cool, I like this (temp) solution. How about I use Google Feed API for now and when we have the teach-api endpoint ready (OR dynamic server ready) we will swap to it.

[toolness]

Ok, sounds good!

[mmmavis]

(Note)
Use this .ai file instead if using AI CS6 to open.

[mmmavis]

@sabrinang as mentioned in #800 (comment), please help export some svgs for the hero unit buttons! 😉

[mmmavis]

Actually, if we are changing icon color on hover state(yellow button on screencap below), we can probably use CSS sprite tricks to achieve that.

@sabrinang ,@toolness thoughts?

[sabrinang]

I exported the .svg in blue and grey (hover) in case it can not be achieved in CSS:
https://drive.google.com/a/mozilla.com/folderview?id=0B4Q8pzCpDS_efl9IT3FaODEwNzZ1VndYSFhUYXlFcG43MUR6ZncyVFJUQ20yTDFOWTIyUWM&usp=sharing

[mmmavis]

Hey @sabrinang if you could export the files into CSS sprite format that'llll be raddddd 💃 . (i.e., pair up the svgs and stitch them together) Extra fantastic if you could help unify the dimensions so that we don't have to have different CSS background-position rule for every icon button.

[toolness]

Hmmmmm, since one version of the icons is essentially just desaturated, another option is filter: grayscale(100%). It (or at least its vendor-prefixed variants) actually appears to have decent browser support.

[hannahkane]

Can we close this one? It's live!

[sabrinang]

Yup :)