Dewikification: Display lists of resources based on a YAML hierarchy.

[lemonsaurus]

Remember to target the dewikification branch with this pull request

This must be solved after the #387 solution has been merged.

Okay, so currently we have these lists of resources, right?

These pages should be generated based on a hierarchy of YAML files - one for each resource - so that we don't actually have to write any HTML to add stuff to our resource lists.

Wait.. Deja vu

Yeah, so, @jb3 already solved this problem back in the day, and the solution is still in the site repo, so you might not actually have to solve this problem again. We simply adapt these existing yaml files to suit the solution for #387, and we should be good.

What about the stuff that's missing?

Since this is an otherwise fairly small task, I think creating new YAML files for the resources that we've added since then should be part of this issue. So yeah, do that too.

Do I have to recreate all the HTML for this?

No no, of course not. Here's an example of what the HTML for one of these pages looks like today - just clean this up and use some version of this when displaying the resources:

<!-- discord.py guide -->
<div class="box" style="max-width: 800px;">
    <span class="icon is-size-4 is-medium">
      <i class="fab fa-python is-size-3 is-black has-icon-padding"></i>
    </span>
    <a href="/pages/resources/guides/discordpy/">
      <span class="is-size-4 has-text-weight-bold">discord.py learning guide</span>
    </a>
  <p class="is-italic">A learning guide for the discord.py bot framework written by members of our community.</p>
</div>


<!-- help-channel guide -->
<div class="box" style="max-width: 800px;">
    <span class="icon is-size-4 is-medium">
      <i class="fab fa-python is-size-3 is-black has-icon-padding"></i>
    </span>
    <a href="/pages/resources/guides/help-channels/">
      <span class="is-size-4 has-text-weight-bold">Help channel guide</span>
    </a>
  <p class="is-italic">How do help channels work in the Python Discord community?</p>
</div>

<!-- asking good questions -->
<div class="box" style="max-width: 800px;">
    <span class="icon is-size-4 is-medium">
      <i class="fab fa-python is-size-3 is-black has-icon-padding"></i>
    </span>
    <a href="/pages/resources/guides/asking-good-questions/">
      <span class="is-size-4 has-text-weight-bold">Asking good questions</span>
    </a>
  <p class="is-italic">A guide for how to ask a good question in our community.</p>
</div>

<!-- asking good questions -->
<div class="box" style="max-width: 800px;">
    <span class="icon is-size-4 is-medium">
      <i class="fab fa-python is-size-3 is-black has-icon-padding"></i>
    </span>
    <a href="/pages/resources/guides/helping-others/">
      <span class="is-size-4 has-text-weight-bold">Helping Others</span>
    </a>
  <p class="is-italic">The staff's take on how to help others in our community.</p>
</div>

<!-- core concepts -->
<div class="box" style="max-width: 800px;">
    <span class="icon is-size-4 is-medium">
      <i class="fas fa-folder is-size-3 is-black has-icon-padding"></i>
    </span>
    <a href="/pages/resources/guides/core-concepts/">
      <span class="is-size-4 has-text-weight-bold">Core Python concepts</span>
    </a>
  <p class="is-italic">Explanations and tutorials on the most important ideas in Python.</p>
</div>

[ks129]

I will work on it. Can anybody assign me here?