Replace ThemedImage with GitHub's approach (#411)

Author: kazk

content/authoring/tutorials/create-first-kata.mdx

@@ -3,8 +3,6 @@ title: Creating your first kata
 tags: [authoring, tutorial]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Kata on Codewars are created by regular users who want to share their ideas with the community and create challenges for others to train on. After solving a few kata, many users often find that they want to contribute back to the community with kata of their own. Not only can authoring a kata be a great learning experience, well-crafted kata are a source of great fun for everyone.
 
 However, first-time authors – regardless of programming experience – may not realize that creating a good quality kata from scratch is a much more involved task than solving one, as it requires a wider mindset and broader set of skills (if that sounds intimidating, don't be discouraged: that's what this tutorial is for!). In many ways authoring a kata is closer to what would be considered a "professional" task: it requires designing a challenge with a diverse target audience in mind, implementing a solution, creating tests, handling feedback from users, and finally maintaining them. Every kata is like a small software product and goes through an equivalent of a full software development lifecycle.
@@ -24,13 +22,8 @@ You can also reach out to the community directly with any questions and seek exp
 
 In order to create a new kata, you first need to earn the ["Create Kata" privilege](/gamification/privileges/), which is automatically awarded once you accumulate 300 Honor points. Then you can select the **"New Kata"** option from the profile menu:
 
-<ThemedImage
-  alt='"New Kata" Menu'
-  sources={{
-    light: require("./img/new_kata-light.png").default,
-    dark: require("./img/new_kata-dark.png").default,
-  }}
-/>
+!["New Kata" Menu](./img/new_kata-light.png#gh-light-mode-only)
+!["New Kata" Menu](./img/new_kata-dark.png#gh-dark-mode-only)
 
 ## How to create a good kata
 

content/community/following.mdx

@@ -4,58 +4,36 @@ tags: [concept]
 slug: /community/following
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 You can follow any user, be it a friend, a colleague, your students, or just anyone you'd like to track their Codewars career.
 Following someone opens for you a couple of new possibilities.
 
 To follow a user, you need to visit their profile page, and click the `Follow` button:
 
-<ThemedImage
-  alt="Follow Button"
-  sources={{
-    light: require("./img/follow_light.png").default,
-    dark: require("./img/follow_dark.png").default,
-  }}
-/>
+![Follow Button](./img/follow_light.png#gh-light-mode-only)
+![Follow Button](./img/follow_dark.png#gh-dark-mode-only)
 
 If you have already followed the user, the `Follow` button is replaced by `Unfollow` one. You can use it to stop following someone.
 
 ## Followers boards
 
 On your profile page, you can find the `Social` tab, which contains a couple of leaderboards. One of them, titled **"Following"**, contains a list and honor ranking of all users followed by you. Another one, titled **"Followers"**, provides a similar list of your followers.
 
-<ThemedImage
-  alt="Followers Boards"
-  sources={{
-    light: require("./img/followers-board_light.png").default,
-    dark: require("./img/followers-board_dark.png").default,
-  }}
-/>
+![Followers Boards](./img/followers-board_light.png#gh-light-mode-only)
+![Followers Boards](./img/followers-board_dark.png#gh-dark-mode-only)
 
 ## Filtering solutions
 
 When viewing the solutions of a kata, you can choose to see only those from users you are following. This is a great way to easily find solutions from warriors you respect or know personally.
 
-<ThemedImage
-  alt="Solution"
-  sources={{
-    light: require("./img/solutions_light.png").default,
-    dark: require("./img/solutions_dark.png").default,
-  }}
-/>
+![Solution](./img/solutions_light.png#gh-light-mode-only)
+![Solution](./img/solutions_dark.png#gh-dark-mode-only)
 
 ## Allies
 
 When two users follow each other, they become allies. All your allies are collected in dedicated leaderboards, displayed on your dashboard, or on `Social` tab of your profile. When viewing these boards, you will see all of your allies and be able to keep track of their honor and overall rank progression.
 
-<ThemedImage
-  alt="Allies board on user dashboard"
-  sources={{
-    light: require("./img/allies-board_light.png").default,
-    dark: require("./img/allies-board_dark.png").default,
-  }}
-/>
+![Allies board on user dashboard](./img/allies-board_light.png#gh-light-mode-only)
+![Allies board on user dashboard](./img/allies-board_dark.png#gh-dark-mode-only)
 
 You automatically become allies with members of the same [clan](#clans), and with users who join Codewars using your referral code.
 
@@ -70,13 +48,8 @@ Joining a clan is as simple as setting the clan name in your profile.
 If you want to switch clans, you simply need to change the name.  
 If you want to leave a clan, set its name empty.
 
-<ThemedImage
-  alt="Joining a Clan"
-  sources={{
-    light: require("./img/join-clan_light.png").default,
-    dark: require("./img/join-clan_dark.png").default,
-  }}
-/>
+![Joining a Clan](./img/join-clan_light.png#gh-light-mode-only)
+![Joining a Clan](./img/join-clan_dark.png#gh-dark-mode-only)
 
 If you change or leave your clan, you are still allies with all its members.
 If you wish to not be associated with them anymore, you will have to manually unfollow everyone from the previous clan.

content/concepts/kata/translations.mdx

@@ -3,8 +3,6 @@ title: Translations
 tags: [concept]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Codewars supports a variety of [programming languages][languages] and every kata can be available in more than one language. Users may choose any language available to solve the kata and do so in as many languages as they wish. After gaining the required privileges, users who solved the kata are allowed to create or review translations to make the kata available in new languages, therefore for a larger audience.
 
 ## Training on a selected language
@@ -20,13 +18,8 @@ Completing a kata in only one language is enough to mark the kata as solved, how
 
 To be able to translate a kata to other languages, the user has to complete the kata in at least one language. Once they have completed it, the option to add a new translation will appear in languages dropdown:
 
-<ThemedImage
-  alt="Add Translation"
-  sources={{
-    light: require("./img/add-translation_light.png").default,
-    dark: require("./img/add-translation_dark.png").default,
-  }}
-/>
+![Add Translation](./img/add-translation_light.png#gh-light-mode-only)
+![Add Translation](./img/add-translation_dark.png#gh-dark-mode-only)
 
 This will take the user to the translations page where they can view existing translations (pending ones, approved and rejected) or create new ones.
 

content/gamification/honor.mdx

@@ -3,8 +3,6 @@ title: Honor
 tags: [concept]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Honor represents the level of respect a user has earned from the community, based on their skills and contributions. While ranks are an indication of your skills only, honor is mostly an indication of your activity and contributions.
 
 ## Honor Rewards
@@ -22,13 +20,8 @@ You may find the exact amount of Honor points earned for all kinds of situations
 
 Your profile page displays a breakdown of your Honor points:
 
-<ThemedImage
-  alt="Honor Progress"
-  sources={{
-    light: require("./img/honor-breakdown_light.png").default,
-    dark: require("./img/honor-breakdown_dark.png").default,
-  }}
-/>
+![Honor Progress](./img/honor-breakdown_light.png#gh-light-mode-only)
+![Honor Progress](./img/honor-breakdown_dark.png#gh-dark-mode-only)
 
 - **Completed Kata** is the amount of honor you gained by only solving tasks and voting them,
 - **Authored Kata & Translations** represent the amount of honor earned doing so,

content/gamification/index.mdx

@@ -4,22 +4,15 @@ tags: [concept]
 slug: /gamification
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 On Codewars, there are two different scales you can level up by doing different things:
 
 - [**_Rank_**][concept-ranks]: This scale defines your proficiency and current kyu/dan level. You can level up your rank doing only one thing: solving kata.
 - [**_Honor_**][concept-honor]: Honor points represent how active the user is. Honor can be earned in many ways: completing kata, translating them, voting, and many others. Earning Honor points grants you additional [privileges][concept-privileges], which let you perform actions not available to everyone, like creating new kata, translations, etc. More details in the next pages.
 
 Your current rank and honor are displayed in the top bar:
 
-<ThemedImage
-  alt="Top Bar"
-  sources={{
-    light: require("./img/top-bar_light.png").default,
-    dark: require("./img/top-bar_dark.png").default,
-  }}
-/>
+![Top Bar](./img/top-bar_light.png#gh-light-mode-only)
+![Top Bar](./img/top-bar_dark.png#gh-dark-mode-only)
 
 [concept-ranks]: /gamification/ranks/
 [concept-honor]: /gamification/honor/

content/gamification/ranks.mdx

@@ -3,8 +3,6 @@ title: Ranks
 tags: [concept]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Ranks are used to indicate the proficiency of users and the difficulty of Kata. There are two classes of ranks, Kyu and Dan, which are divided in 8 levels each. By increasing order of proficiency/difficulty:
 
 - 8 Kyu to 1 Kyu
@@ -16,13 +14,8 @@ Why the names Kyu and Dan? The terms are borrowed from a system in Japanese mart
 
 When you visit your profile on Codewars, you can see that you have an Overall rank as well as individual ranks for each language you have completed kata in:
 
-<ThemedImage
-  alt="Rank Progress"
-  sources={{
-    light: require("./img/rank-breakdown_light.png").default,
-    dark: require("./img/rank-breakdown_dark.png").default,
-  }}
-/>
+![Rank Progress](./img/rank-breakdown_light.png#gh-light-mode-only)
+![Rank Progress](./img/rank-breakdown_dark.png#gh-dark-mode-only)
 
 The wheel on the left indicates your progress toward your next rank. For example, if you see the `1 dan` badge in the wheel and your overall rank is `1 kyu / 70.0%` that means you have earned 70% of the progress needed to go from 1 kyu to 1 dan (see [required score](#required-score)).
 

content/getting-started/finding-kata.mdx

@@ -2,21 +2,14 @@
 title: Finding Kata
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Your account is configured and you are ready for your next challenge. Now you will learn how to find a task to train on.
 
 ## Personal Trainer
 
 The easiest way of getting started is to use the personal trainer on the dashboard to pick your next kata.
 
-<ThemedImage
-  alt="Training Routines"
-  sources={{
-    light: require("./img/finding-kata_01_training-routines_light.png").default,
-    dark: require("./img/finding-kata_01_training-routines_dark.png").default,
-  }}
-/>
+![Training Routines](./img/finding-kata_01_training-routines_light.png#gh-light-mode-only)
+![Training Routines](./img/finding-kata_01_training-routines_dark.png#gh-dark-mode-only)
 
 The personal trainer suggests to you a kata based on the selected language and focus area. You can either train on the suggested kata or skip to see the next suggestion.
 
@@ -30,13 +23,8 @@ If, for some reason, you do not like the suggested kata, you can skip on it with
 
 For those really looking for a hard challenge or a specific kind of rank/task/..., we recommend you go directly to the full list of kata where you can select from over 8000 kata to train on. Remember, 8 kyū is the easiest level a kata can be.
 
-<ThemedImage
-  alt="Sidebar"
-  sources={{
-    light: require("./img/finding-kata_02_sidebar_light.png").default,
-    dark: require("./img/finding-kata_02_sidebar_dark.png").default,
-  }}
-/>
+![Sidebar](./img/finding-kata_02_sidebar_light.png#gh-light-mode-only)
+![Sidebar](./img/finding-kata_02_sidebar_dark.png#gh-dark-mode-only)
 
 Details of the kata search page are described in the `[UI documentation (TODO: insert link to documentation of kata search panel)]`, but here are some useful hints for beginners:
 

content/getting-started/kata-solved.mdx

@@ -2,8 +2,6 @@
 title: After Solving a Kata
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 Finally, this great moment happened: the test output panel is all green, and you were able to submit your solution. Congratulations! It's time to collect your reward. It's also a good time to share some feedback, to guide others who'd encounter the same kata.
 
 ## Rewards
@@ -14,13 +12,8 @@ You worked hard to solve your last challenge, and after you succeeded, you defin
 
 The rank level reflects your experience and knowledge you have gained by solving kata. You start at the lowest rank of 8 kyū, and each correct solution brings you closer to a higher rank. You can see your rank progress toward the next level on your profile page:
 
-<ThemedImage
-  alt="Rank Progress"
-  sources={{
-    light: require("./img/solving_01_rank-progress_light.png").default,
-    dark: require("./img/solving_01_rank-progress_dark.png").default,
-  }}
-/>
+![Rank Progress](./img/solving_01_rank-progress_light.png#gh-light-mode-only)
+![Rank Progress](./img/solving_01_rank-progress_dark.png#gh-dark-mode-only)
 
 More information on ranks and progress can be found [here](/gamification/ranks/).
 
@@ -32,12 +25,7 @@ Honor points are rewarded by contributing to Codewars in many ways, and solving
 
 After you have successfully solved a task, you can let others know how you liked it. One way to do this is to leave your satisfaction vote:
 
-<ThemedImage
-  alt="Satisfaction Vote"
-  sources={{
-    light: require("./img/solving_02_vote_light.png").default,
-    dark: require("./img/solving_02_vote_dark.png").default,
-  }}
-/>
+![Satisfaction Vote](./img/solving_02_vote_light.png#gh-light-mode-only)
+![Satisfaction Vote](./img/solving_02_vote_dark.png#gh-dark-mode-only)
 
 You can also participate in the discussion on a kata. If you wish to log an issue about this specific kata, such as poorly worded descriptions or issues with test cases, then you can leave a comment in the discourse section. More on this in the next part.

content/getting-started/setting-up.mdx

@@ -2,21 +2,14 @@
 title: Setting Up
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 In this section you will learn how to set up your account to get the best training experience and tune your preferences for the Codewars site. There are two areas you can configure: [Account Settings](#account-settings) and [Training Setup](#training-setup).
 
 ## Account Settings
 
 You can enter your account settings panel by navigating with [this link](https://www.codewars.com/users/edit), or using following menu:
 
-<ThemedImage
-  alt="Account Settings Menu"
-  sources={{
-    light: require("./img/setting-up_01_account-menu_light.png").default,
-    dark: require("./img/setting-up_01_account-menu_dark.png").default,
-  }}
-/>
+![Account Settings Menu](./img/setting-up_01_account-menu_light.png#gh-light-mode-only)
+![Account Settings Menu](./img/setting-up_01_account-menu_dark.png#gh-dark-mode-only)
 
 You can find all options described in detail `[here (TODO: insert link to actual documentation of UI)]`, and below are listed ones useful to get you running as soon as possible:
 
@@ -38,13 +31,8 @@ Now you just need to click `UPDATE` to have your settings stored in the database
 
 You can enter your training setup panel by navigating with [this link](https://www.codewars.com/trainer/setup), or using following menu:
 
-<ThemedImage
-  alt="Training Setup Menu"
-  sources={{
-    light: require("./img/setting-up_02_training-menu_light.png").default,
-    dark: require("./img/setting-up_02_training-menu_dark.png").default,
-  }}
-/>
+![Training Setup Menu](./img/setting-up_02_training-menu_light.png#gh-light-mode-only)
+![Training Setup Menu](./img/setting-up_02_training-menu_dark.png#gh-dark-mode-only)
 
 Again, a detailed description can be found in `[UI documentation (TODO: insert link to actual documentation of UI)]`, but things needed to get you started are briefly explained below:
 

content/getting-started/solving-kata.mdx

@@ -2,21 +2,14 @@
 title: Solving a Kata
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 After opening a kata page, you are presented with the kata details view with general information about it. Read carefully through the description, and if you are ready to face the challenge, you can start your training by clicking on `TRAIN`.
 
 ## Kata Trainer
 
 Welcome to the kata trainer! You use this view to take your solution attempts, write the code and run tests. A few tips to get you started:
 
-<ThemedImage
-  alt="Kata Trainer"
-  sources={{
-    light: require("./img/solving_03_trainer_light.png").default,
-    dark: require("./img/solving_03_trainer_dark.png").default,
-  }}
-/>
+![Kata Trainer](./img/solving_03_trainer_light.png#gh-light-mode-only)
+![Kata Trainer](./img/solving_03_trainer_dark.png#gh-dark-mode-only)
 
 ### Solution editor
 

content/languages/python/codewars-test.mdx

@@ -4,8 +4,6 @@ sidebar_label: Codewars Test Framework
 tags: [python, reference]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 To run Python tests, Codewars currently uses a custom test framework, published and available in [this GitHub repository][test-framework-repo].
 
 ## Overview
@@ -91,13 +89,8 @@ def rnd_tests():
 
 The above produces an output similar to the following:
 
-<ThemedImage
-  alt="Output window example"
-  sources={{
-    light: require("./img/python-test-framework-example-light.png").default,
-    dark: require("./img/python-test-framework-example-dark.png").default,
-  }}
-/>
+![Output window example](./img/python-test-framework-example-light.png#gh-light-mode-only)
+![Output window example](./img/python-test-framework-example-dark.png#gh-dark-mode-only)
 
 ## Failing Early
 

content/references/kata-trainer.mdx

@@ -3,17 +3,10 @@ title: Kata Trainer
 tags: [reference]
 ---
 
-import ThemedImage from "@theme/ThemedImage";
-
 The kata trainer is the interface you're presented when you click "Train" on a kata. It is here that you write your solution, run tests and attempt to complete the kata. Since this is where you'll be spending the majority of your time, it is recommended that you familiarize yourself with the interface and its functionality. That way, you can focus entirely on solving the kata.
 
-<ThemedImage
-  alt="Kata trainer interface"
-  sources={{
-    light: require("./img/kata-trainer-light.png").default,
-    dark: require("./img/kata-trainer-dark.png").default,
-  }}
-/>
+![Kata trainer interface](./img/kata-trainer-light.png#gh-light-mode-only)
+![Kata trainer interface](./img/kata-trainer-dark.png#gh-dark-mode-only)
 
 *The interface: 1) View Panel 2) Language selection 3) Language version 4) Solution Editor 5) Sample Tests Editor 6) Action buttons 7) Enable Vim/Emacs mode*