Clarify which courses / challenges are supported and display a nice e…

…rror when it is not supported

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- Clarify which courses / challenges are supported and display a nice error when it is not supported (#21)
+
 ## [1.1.1] - 2023-12-18
 
 ### Fixed

README.md

@@ -60,7 +60,11 @@ docker run --rm -it -v $(pwd)/output:/output ghcr.io/openzim/freecodecamp:latest
 
 ## Course Options and Limitations
 
-Currently this scraper only supports Javascript challenges. A list of courses is passed to the scraper as a comma seperated list of 'course slugs'.
+Currently this scraper only supports challenge types 1, 4 and 5 (challenge types can be found in the markdown file describing the challenge). This means courses from `javascript-algorithms-and-data-structures`, `project-euler`, `rosetta-code` and most of `coding-interview-prep` curriculum (frontend projects are type 3 and are not working).
+
+A list of courses is passed to the scraper as a comma seperated list of 'course slugs'.
+
+When you pass a course with an unsupported challenge to the scraper, the ZIM will still create but an error message will be displayed instead of the challenge with wrong type.
 
 You can find a list of course slugs in the [freeCodeCamp curriculum folder](https://github.com/freeCodeCamp/freeCodeCamp/tree/main/curriculum/challenges/english/02-javascript-algorithms-and-data-structures)
 

zimui/src/pages/ChallengePage.vue

@@ -6,6 +6,9 @@ import ChallengeInstructions from '../components/challenge/ChallengeInstructions
 import ChallengeRunner from '../components/challenge/ChallengeRunner.vue'
 import { parseChallenge } from '@/utils/parseChallenge'
 import ConsoleLogger from '@/components/challenge/ConsoleLogger.vue'
+import errimageData from '../assets/dead_kiwix.png'
+
+const errimage = ref(errimageData)
 
 export type ChallengeJSON = { title: string; slug: string }
 export type ChallengesJSON = {
@@ -72,7 +75,7 @@ await updateChallenge(params.value)
 </script>
 
 <template>
-  <div class="split">
+  <div v-if="['1', '4', '5'].includes(challenge.header['challengeType'])" class="split">
     <div class="left">
       <ChallengeInstructions
         :title="challenge.header['title']"
@@ -96,6 +99,17 @@ await updateChallenge(params.value)
       <ConsoleLogger class="console" :logs="logs || []"></ConsoleLogger>
     </div>
   </div>
+
+  <div v-else class="unsupported-page">
+    <div class="unsupported-container">
+      <div class="unsupported-content">
+        <p class="unsupported-text">This type of challenge is not yet working offline.</p>
+      </div>
+      <div class="unsupported-image-container">
+        <img :src="errimage" class="unsupported-image" alt="error image" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -116,4 +130,54 @@ await updateChallenge(params.value)
 .console {
   @apply basis-1/4;
 }
+
+.unsupported-page {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px;
+  text-align: center;
+}
+.unsupported-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 40px;
+  margin: 60px 0;
+  background: white;
+  border-radius: 10px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  padding: 40px;
+}
+.unsupported-content {
+  flex: 1;
+  text-align: left;
+}
+.unsupported-text {
+  color: #222;
+  margin: 10px 0;
+  max-width: 500px;
+  line-height: 1.6;
+  font-size: 18px;
+}
+.unsupported-image-container {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+}
+
+@media (max-width: 768px) {
+  .unsupported-container {
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .unsupported-text {
+    margin: 20px auto;
+    font-size: 16px;
+  }
+
+  .unsupported-image {
+    width: 300px;
+  }
+}
 </style>