Course page improvements

[terichadbourne]

Breaking this off of #527 into its own issue.

We need to create dedicated pages for courses, e.g. /courses/filecoin with dedicated text blocks/descriptions, which will be able to have dedicated social cards and other data to improve ranking in search engines. (See here how this is not possible with our current filter system on the tutorials page.)

These will be used mostly as landing pages from web searches. They need a way for people to easily get out to the full tutorial listings but don't need the filtering system available in the full list. They'll have customized text blocks describing the content with words likely to end up in web searches, but the bottom portion of the page that pulls in tutorial cards will look identical to filtered tutorial listings.

I've requested custom social cards for course pages in the design repo: https://github.com/protocol/design-shop/issues/441

I'll be taking the first stab at this using the dynamic implementation suggested by @zebateira in #527:

Notes on "Create dedicated pages for courses" Content: create a new entry on static/translations/en.json for the necessary content Creating the course pages: here we have two options: static or dynamic 2.1. Static: easiest and quickest. Basically create static pages for each course (IPFS, Multiformats, Filecoin, etc) and then add them to the static routes in the src/routes.js file. 2.2. Dynamic: Use the courses.json file to generate the routes and feed it to a new entry in the routes file called courses which should be added to the all entry as well (all and featured need to be ignored from the list of courses from the courses.json file when generating the pages) Create new pages/Course.vue page component that will render a generic course using the content of the translations file Optional: re-structure the courses.json file to separate all and featured from the rest of the courses. something like ui: [all, featured], curated: [ipfs, filecoin, multiformats]

[terichadbourne]

The bulk of the work is done in feat/course-pages. Still to do:

• [x] Write long course description for each existing course (about to have libp2p and IPLD also)
• [x] Add metadata
• [ ] Add social card images (awaiting design team via protocol/design-shop#441)
• [x] Add tests to ensure we're rendering pages for any course in courses.json (excluding all and featured)
• [x] Think of a clever way to add the word course into the header for SEO purposes without looking silly

[terichadbourne]

The MVP will be merged today via #580.

Remaining suggestions for improvement to tackle after the holiday break:

• [ ] Add course descriptions for upcoming tutorials:
  • [ ] libp2p
  • [ ] IPLD
• [ ] Ensure each project linking to course pages is linking to the new URLs:
  • [x] IPFS - PR merged https://github.com/ipfs/website/pull/411
  • [ ] js-ipfs - PR https://github.com/ipfs/js.ipfs.io/pull/295 - merge maybe hasn't been successful ???????
  • [ ] IPFS docs - open PR https://github.com/ipfs/ipfs-docs/pull/690
  • [x] Filecoin - Spoke ticket closed https://protocol.askspoke.com/next/requests/1085
  • [ ] Filecoin docs
  • [ ] Multiformats - nothing currently there to replace, should find somewhere to add on website and in repos
• [x] Get more eyes on course descriptions and edit as needed
• [x] Link to courses from landing page
• [x] Link to courses from resource pages
• [ ] Replace course social tiles with new ones from Eric
• [x] Confirm sitemap updated correctly
• [ ] Add status indicators and buttons (start, continue, etc.) to tutorial cards on course page (likely across everywhere these cards appear)
• [ ] Consider adding labels to the two paragraphs like Content and Format
• [ ] send shipped@ email
• [ ] send MailChimp email
• [ ] Determine whether there's a way to truly test content in Cypress that's created using marked

[terichadbourne]

@zebateira see the last bullet point above (not urgent) - once I used marked to include links in course descriptions I wasn't able to test them properly in Cypress and had to change to less specific tests. Do you know of a way for us to do that successfully?

[zebateira]

@terichadbourne it just came to mind that we could test it against snapshots, but with a con: if the content changes, the tests will fail and the snapshots will need updating.

• Cypress snapshot package: https://github.com/cypress-io/snapshot
• Blog post introducing the package: https://www.cypress.io/blog/2018/01/16/end-to-end-snapshot-testing/