10_instructions.md

10 • Add Talk Descriptions to Speaker Pages

Background 📚

We are storing the speaker data for our site at site/src/data/speakers.yml sans descriptions.

Exercise 🤓

• Update the data in site/src/data/speakers.yml to include descriptions
• Render the relevant talk description on the individual talk page for each talk.
• If a talk doesn't yet have a description it should instead display text saying "More information will be available soon".

Preview of Finished Exercise:

Files 🗂

• site/src/templates/speaker-page.js
• site/src/data/speakers.yml

Starter Code

• Feel free to replace the first two talks in the speakers.yml file with the below mock data:

- name: "Angela Toad"
  title: "Introduction to Sketching Animals"
  time: "8:00"
  avatar: "woman-generated-avatar-1.png"
  description: Lorem ipsum dolor sit amet, no quo postea aliquam vituperata, ad eos reque nulla offendit. Duis equidem invenire mei ad, pro ad ubique corpora comprehensam. Quis legendos honestatis cu pri, eum doctus salutandi accommodare te. Modo zril vitae in eam, ius in homero maiestatis assueverit, lobortis neglegentur no pro. Ei dictas malorum noluisse vis, cetero voluptatibus ad eam, choro tantas quaeque ea quo.

- name: "Larry Foam"
  title: "Getting Started with Sketchnoting"
  time: "9:00"
  avatar: "man-generated-avatar-1.png"
  description: Lorem ipsum dolor sit amet, euripidis splendide definitiones sit in. Noster labores mediocritatem ex quo, amet errem quo at. Est scripta abhorreant neglegentur ut, eam an integre dissentiunt voluptatibus. Eu lorem phaedrum dissentiet eum. Cum et habeo mentitum sententiae, cu nam solet decore invidunt, sed ad liber intellegat adipiscing.

Example Solution Code

• Exercise 10: Add Talk Descriptions to Speaker Pages

Example Solution Demo

• https://deploy-preview-13--gatsbyjsdemo.netlify.app/