03 Adding Resources, and Resource Display Templates

Resources

Resource Location

Resources are located in /src/app/routes/data/slash/resources/messageAttachments/. Within this folder, you will find the language folder, with 3 sub-folders for the level of the resource: beginner, intermediate, and advanced. If your language and/or level does not exist yet, feel free to create it!

Resource Template

Inside the location folder, you will find genericAttachment.yml: this is a template file, for adding resources. Copy this into your language/level/ folder, and give it a name: something that matches the resource, so others can tell at a glance what it is and we can avoid duplicates. Only requirement - no spaces please.

Where noted below, the field supports Slack-Markdown. The Slack-Markdown & the Message Builder pages also provide ways to preview markdown, in case you'd like to experiment.

Filling in the fields

• resource-number: this is used for book-keeping, and we're trying to keep a limit of 4 resources per language/level. Don't worry too much about this, since multiple PRs will inevitably cause this to clash, but try to keep this number above the number of current resources. E.g. If there are already 2 resources, set this to 3.
• language: The language this resource is for.
• level: The level of this resource: beginner, intermediate, advanced.
• media-cost: If this is a paid resource, how much it costs. Can be a range, subscription price, etc. If the resource is free, this can be left empty, or set to "$0".
• media-cost-desc: Either "FREE" or "PAID".
• media-type: One of the following: book, tutorial, class, video, website.
• media-icon: Icons for the type: :books:(📚), :school-satchel:(🎒), :school-satchel:(🎒), :cinema:(🎦) , :link:(🔗) respectively (tutorial and class use the same icon)
• media-link: a Slack-Markdown link, in the following format: <link|Display name> e.g. <https://watchandcode.com/|Watch and Code> will display as Watch and Code
• media-desc: A description of your resource. Accepts Slack-Markdown formatting, i.e. *x* for bold text, _x_ for italics

Resource Display Templates

Display Templates Location

The display templates are located in /src/app/routes/data/slash/resources/messageBodies/. Within this folder, you will find the language folder, and three yml files: one for each level, named {language}b.yml, {language}m.yml, and {language}a.yml for beginner, intermediate, and advanced.

Display Template Template

Inside the location folder, you will find genericBody.yml: this is a template file, for generating a display template. Copy this to your language folder, and name it with the correct level letter suffix. These fields all support Slack-Markdown. The Slack-Markdown and Message Builder pages also provide ways to preview markdown, in case you'd like to experiment.

Filling in the fields

• name: For book-keeping reasons only. Can match the file name.

• sidebar-color: A css color hex value, for the message sidebar. Can be any color you want.

• language: The language this template is for.

• level: The level this template is for: Beginner, Intermediate, or Advanced.

• level-icon: The level icon: :btrain:, :mtrain:, or :atrain:, respectively.

• language-icon: The language icon, e.g. :javascript:. If this doesn't exist, or you're not sure what it's called, give us a shout.

• language-desc: A short description of what this is providing. Currently has a form of Here's some {language} resources to [get you started|help you level up|help you attain mastery]!\n:windy:, but feel free to adapt this.

• language-blurb: Bit more information about the language, aimed at the level of the template.

• help-link: A link to the languages official documentation. Currently, we're using this verbiage:

  :star:(⭐️) :star:(⭐️) If you get stuck :white_check_mark:(✅) out the docs, they're surprisingly good: <[URL to docs]|[Title of Documentation]>

• more-questions: A link to the codebuddies language channel. Currently, we'r using this verbiage:

  ...further :question:(❓) :question:(❓) you can always ask in <[path to language channel]|#[language channel name]>. :slightly_smiling_face: (🙂)

• maintainer: @name of Who maintains this list. All help welcome!

A Completed Example to Give you An Idea

Editing the Filter

If you have added a new language, chances are, you will need to add another case for the filter to pick this language up. This is located in /src/app/util/sortArguments.js.