search

ProtoSchool / protoschool.github.io

The code that runs the ProtoSchool website. Visit https://proto.school for interactive tutorials on decentralized web protocols. Explore IPFS and Filecoin through code challenges, code-free lessons, and local events.
https://proto.school
Other
165 stars 67 forks source link

Course page improvements #579

Open terichadbourne opened 3 years ago

terichadbourne commented 3 years ago

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 commented 3 years ago

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

image

terichadbourne commented 3 years ago

The MVP will be merged today via #580.

Remaining suggestions for improvement to tackle after the holiday break:

terichadbourne commented 3 years ago

@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 commented 3 years ago

@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.