Fixes for DocsExample: Add support for SCSS language and block attribute

[Pandaa007]

Description

• Added the support for SCSS language in DocsExample
• Changed the internal rendering of the DocsExample component to make use of DocsShow with support for block prop
• Migrated two minimal examples from KImg documentation to make use of the same as a proof of concept
• Added the block attribute to existing documentation pages to ensure consistency in their look and feel

Issue addressed

Fixes the problems discussed in #962

Changelog

• Description: Bug-fix DocsExample to provide support for SCSS language and block attribute
• Products impact: none
• Addresses: -
• Components: -
• Breaking: no
• Impacts a11y: no
• Guidance: -

Testing checklist

• Contributor has fully tested the PR manually
• If there are any front-end changes, before/after screenshots are included
• Critical and brittle code paths are covered by unit tests
• The change is described in the changelog section above

Reviewer guidance

• Is the code clean and well-commented?
• Are there tests for this change?
• Are all UI components LTR and RTL compliant (if applicable)?
• Add other things to check for here

Comments

[Pandaa007]

Please take a look @MisRob @EshaanAgg whenever possible!

[EshaanAgg]

Thanks for the changes @Pandaa007! These look good to me. Thanks for fixing the SCSS error in the PR as well.

[MisRob]

Thanks both @Pandaa007 and @EshaanAgg

[MisRob]

@Pandaa007 @EshaanAgg there's a tiny hiccup, in the production build, one of the colleagues noticed that

if I click on the gh icon it redirect me to https://github.com/learningequality/kolibri-design-system/blob/develop/docs/examples/KImg/Base instead of https://github.com/learningequality/kolibri-design-system/blob/develop/docs/examples/KImg/Base.vue (with the .vue extension)

[EshaanAgg]

Ahh. Some of the loadExample values do not have a .vue at their end. The raw-loader configuration works with or without the extension but fails for the GitHub links. The DocsExample component should probably have a validator to ensure that the values of loadExample must end in .vue! I will try to open a bugfix PR soon in a couple of hours! Thanks for pointing it out, and sorry for the hiccup!

[MisRob]

No problem, thank you. It'd be also fine to just open an issue, whatever you prefer @EshaanAgg. We can write .vue to URL meanwhile, not a big deal :)