Make individual sections easier to override

[75lb]

At the moment sections is an array. Say we have three sections:

const sections = [
  {
    header: 'A typical app',
    content: 'Something.'
  },
  {
    header: 'Examples',
    content: [ ... ]
  },
  {
    content: 'Project home: [underline]{https://something.com}'
  }
]

If we want to override the Examples section we would access sections[1]. This would fail if the Examples section later moved to a different position. It would be more reliable to retrieve a named section from a Map.

Define the sections:

const sections = new Map()
sections.set('header', { header: 'A typical app', content: 'Something.' })
sections.set('examples', { header: 'Examples', content: '...' })
sections.set('footer', { content: 'Project home: [underline]{https://something.com}' })

Retrieve and override the examples:

sections.get('examples', { content: 'something different' })

However, Arrays are ordered and Maps are not. It's easier to insert new sections at specific index positions within an Array than it is within a Map. To get the best of both worlds (named sections of Maps with the ordered nature of Arrays) we could keep the existing Array-based structure with an id or name property on each individual section, to make them addressable by name.