Display Featured Stories

[ibrahimjaved12]

What are the relevant tickets?

Part of https://github.com/mitodl/hq/issues/6029

Description (What does it do?)

This PR adds featured stories on display for OCW.

• Homepage & List page: If no featured story is selected (in backend), then it defaults to showing all stories instead.
• Single story page 'More Stories': First 4 featured stories will be shown in sidebar (if they exist). If no featured stories exist, then it defaults to showing 4 stories randomly. However, if less than 4 featured stories exist, then the exact number (less than 4) will be shown.
  • Added condition to not show same opened story in sidebar for More Stories. Eg. Sidebar is supposed to show first 4 featured stories, and if one of them is opened currently, then it won't be included in the 4, the next story would then be displayed.

Screenshots (if appropriate):

How can this be tested?

This must be reviewed together with: mitodl/ocw-hugo-projects#311

1. Spin up OCW Studio locally
2. Add the code from this ocw-hugo-projects branch to your local ocw-www website-starter from admin panel.
3. Go to homepage settings from Studio: http://localhost:8043/sites/ocw-www/type/homepage/
4. You should now see featured stories there. Select a few and order them as you like. Make sure the same stories are also present in your ocw-hugo-themes www theme directory locally.
5. Click on save.
6. Go to your github organization linked with your local ocw studio, and go to the homepage.yaml file in the ocw-www repository, eg. in my case it is: https://github.com/ibrahimjaved12org/ocw-www/blob/main/data/homepage.yaml
7. It should have featured stories. Copy the code so you can now paste it in your local ocw-content-rc directory in the same file linked with your setup of ocw-hugo-themes.
8. Paste it in your local homepage.yaml file in your ocw-www content directory as mentioned above.
9. Now spin up ocw-hugo-themes: yarn start www
10. Go to homepage: http://localhost:3000/
11. Make sure the stories are displayed in correct order!

[github-actions]

Netlify Deployments:
www: https://ocw-hugo-themes-www-pr-1479--ocw-next.netlify.app/
Course v2: https://ocw-hugo-themes-course-v2-pr-1479--ocw-next.netlify.app/

[github-actions]

Device	URL
mobile	https://ocw-hugo-themes-www-pr-1479--ocw-next.netlify.app/

Device	URL
mobile	https://ocw-hugo-themes-www-pr-1479--ocw-next.netlify.app/search/

Device	URL
mobile	https://ocw-hugo-themes-course-v2-pr-1479--ocw-next.netlify.app/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

[umar8hassan]

LGTM 👍