Rewrite UI to make it responsive and close to original FCC

Includes:
- update frontend deps
- move from Tailwind to Vuetify

Author: benoit74

.gitignore

@@ -1,5 +1,5 @@
-# Created by https://www.toptal.com/developers/gitignore/api/linux,macos,python,database,visualstudiocode,intellij
-# Edit at https://www.toptal.com/developers/gitignore?templates=linux,macos,python,database,visualstudiocode,intellij
+# Created by https://www.toptal.com/developers/gitignore/api/linux,macos,python,database,intellij
+# Edit at https://www.toptal.com/developers/gitignore?templates=linux,macos,python,database,intellij
 
 ### Database ###
 *.accdb
@@ -344,14 +344,6 @@ poetry.toml
 # LSP config files
 pyrightconfig.json
 
-### VisualStudioCode ###
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-!.vscode/*.code-snippets
-
 # Local History for Visual Studio Code
 .history/
 
@@ -363,7 +355,7 @@ pyrightconfig.json
 .history
 .ionide
 
-# End of https://www.toptal.com/developers/gitignore/api/linux,macos,python,database,visualstudiocode,intellij
+# End of https://www.toptal.com/developers/gitignore/api/linux,macos,python,database,intellij
 
 # local dirs used for working files
 tmp
@@ -377,3 +369,4 @@ output
 zimui/public/content
 zimui/public/mathjax
 scraper/src/fcc2zim/mathjax
+scraper/src/fcc2zim/fonts

.vscode/extensions.json

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Make the UI responsive (#22)
+- Enhance the UI design to be closer to original FCC UI (#23)
+
 ## [1.3.0] - 2025-01-24
 
 ### Changed

CHANGELOG.md

@@ -7,3 +7,15 @@ source="https://github.com/mathjax/MathJax/archive/refs/tags/3.2.2.zip"
 zip_paths=["MathJax-3.2.2"]
 target_paths=["mathjax"]
 remove = ["mathjax/.github","mathjax/.gitignore","mathjax/.travis.yml","mathjax/bower.json","mathjax/composer.json","mathjax/CONTRIBUTING.md","mathjax/package.json"]
+
+[files.assets.actions."lato"]
+action="extract_items"
+source="https://dev.kiwix.org/fonts/lato2/lato.zip"
+zip_paths=["lato"]
+target_paths=["fonts/lato"]
+
+[files.assets.actions."hack"]
+action="extract_items"
+source="https://dev.kiwix.org/fonts/Hack-ZeroSlash/Hack-ZeroSlash.zip"
+zip_paths=["Hack-ZeroSlash"]
+target_paths=["fonts/Hack-ZeroSlash"]

scraper/openzim.toml

@@ -28,17 +28,8 @@ def build_curriculum_redirects(curriculum_dist: Path):
         superblock_dict = json.load(course_index_str)
 
     redirects: list[CurriculumRedirect] = []
-    for superblock in superblock_dict:
-        course_list = superblock_dict[superblock]
-        for course in course_list:
-            meta_json_path = Path(
-                curriculum_dist,
-                "curriculum",
-                superblock,
-                course,
-                "_meta.json",
-            )
-            challenges = json.loads(meta_json_path.read_text())["challenges"]
+    for superblock, course_data in superblock_dict.items():
+        for course, challenges in course_data.items():
             for challenge in challenges:
                 title = challenge["title"]
                 redirects.append(
@@ -57,6 +48,7 @@ def build_command(
 ):
     logger.info("Scraper: build phase starting")
 
+    # Add Mathjax files
     mathjax = (Path(__file__) / "../mathjax").resolve()
     count_mathjax_files = len(list(mathjax.rglob("*")))
     logger.info(f"Adding {count_mathjax_files} MathJax files in {mathjax}")
@@ -71,6 +63,21 @@ def build_command(
             is_front=False,
         )
 
+    # Add fonts files
+    fonts = (Path(__file__) / "../fonts").resolve()
+    count_fonts_files = len(list(fonts.rglob("*")))
+    logger.info(f"Adding {count_fonts_files} fonts files in {fonts}")
+    for file in fonts.rglob("*"):
+        if not file.is_file():
+            continue
+        path = Path("content") / Path(file).relative_to(fonts.parent)
+        logger.debug(f"Adding {path} to ZIM")
+        creator.add_item_for(
+            path=str(path),
+            fpath=file,
+            is_front=False,
+        )
+
     # Add zimui files
     for file in zimui_dist.rglob("*"):
         if file.is_dir():

scraper/src/fcc2zim/build.py

@@ -12,16 +12,18 @@ def get_challenges_for_lang(tmp_path: Path, language: str):
     return Path(tmp_path, language).rglob("*.md")
 
 
-def update_index(path: Path, superblock: str, slug: str):
+def update_index(
+    path: Path, superblock: str, slug: str, challenges: list[dict[str, str]]
+):
     index_path = path.joinpath("index.json")
     if not index_path.exists():
         index_path.write_bytes(json.dumps({}).encode("utf-8"))
 
     index = json.loads(index_path.read_text())
     if superblock not in index:
-        index[superblock] = []
+        index[superblock] = {}
     if slug not in index[superblock]:
-        index[superblock].append(slug)
+        index[superblock][slug] = challenges
 
     with open(index_path, "w") as outfile:
         json.dump(index, outfile, indent=4)
@@ -51,25 +53,19 @@ def write_course_to_path(
     us to render a page listing all available courses
     """
     curriculumdir.mkdir(parents=True, exist_ok=True)
-    meta: dict[str, list[dict[str, str]]] = {"challenges": []}
+    challenges: list[dict[str, str]] = []
+    # meta: dict[str, list[dict[str, str]]] = {"challenges": []}
 
     for challenge in challenge_list:
         challenge_dest_path = curriculumdir.joinpath(
             challenge.course_superblock, challenge.course_slug
         )
         challenge_dest_path.mkdir(parents=True, exist_ok=True)
         shutil.copy2(challenge.path, challenge_dest_path.joinpath(challenge.path.name))
-        meta["challenges"].append(
-            {"title": challenge.title(), "slug": challenge.path.stem}
-        )
-
-    meta_path = curriculumdir.joinpath(superblock, course_slug, "_meta.json")
-    meta_path.parent.mkdir(parents=True, exist_ok=True)
-    with open(meta_path, "w") as outfile:
-        json.dump(meta, outfile, indent=4)
+        challenges.append({"title": challenge.title(), "slug": challenge.path.stem})
 
     # Create an index with a list of the courses
-    update_index(curriculumdir, superblock, course_slug)
+    update_index(curriculumdir, superblock, course_slug, challenges)
 
 
 def prebuild_command(
@@ -83,9 +79,7 @@ def prebuild_command(
 
     This gives following files:
     - <curriculum_dist>/index.json
-        => { 'superblock': ['basic-javascript'] }
-    - <curriculum_dist>/<superblock>/<course_slug>/_meta.json
-        => { challenges: [{slug, title}] }
+        => { 'superblock': {'course_slug': [ {challenge_slug, challenge_title} ] } }
     - <curriculum_dist>/<superblock>/<course_slug>/{slug}.md
     """
     logger.info("Scraper: prebuild phase starting")

scraper/src/fcc2zim/prebuild.py

@@ -0,0 +1,20 @@
+// eslint.config.mjs
+import pluginVue from 'eslint-plugin-vue'
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+  configureVueProject
+} from '@vue/eslint-config-typescript'
+
+configureVueProject({
+  tsSyntaxInTemplates: true,
+  scriptLangs: ['ts']
+})
+
+export default defineConfigWithVueTs(
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommendedTypeChecked,
+  {
+    ignores: ['**/*.js']
+  }
+)

zimui/eslint.config.js

@@ -19,40 +19,40 @@
     "@freecodecamp/curriculum-helpers": "^3.8.0",
     "chai": "^5.1.2",
     "codemirror": "^6.0.1",
-    "pinia": "^2.3.0",
+    "pinia": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
+    "splitpanes": "^3.2.0",
     "vue": "^3.5.13",
     "vue-codemirror": "^6.1.1",
-    "vue-router": "4.5.0"
+    "vue-router": "4.5.0",
+    "vuetify": "^3.7.15"
   },
   "devDependencies": {
-    "@pinia/testing": "^0.1.7",
+    "@pinia/testing": "^1.0.0",
     "@tsconfig/node22": "^22.0.0",
     "@types/assert": "^1.5.11",
-    "@types/chai": "^5.0.1",
+    "@types/chai": "^5.2.0",
     "@types/glob": "^8.1.0",
     "@types/jsdom": "^21.1.7",
     "@types/marked": "^6.0.0",
-    "@types/node": "^22.9.3",
+    "@types/node": "^22.13.9",
+    "@types/splitpanes": "^2.2.6",
     "@vitejs/plugin-legacy": "^6.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
-    "@vitest/eslint-plugin": "1.1.10",
+    "@vitest/eslint-plugin": "1.1.36",
     "@vue/eslint-config-prettier": "^10.1.0",
-    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/eslint-config-typescript": "^14.5.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
     "eslint": "^9.18.0",
     "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vue": "^10.0.0",
     "glob": "^11.0.1",
-    "jsdom": "^25.0.1",
+    "jsdom": "^26.0.0",
     "marked": "^15.0.6",
     "npm-run-all2": "^7.0.1",
-    "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "start-server-and-test": "^2.0.9",
-    "tailwindcss": "^3.4.17",
     "terser": "^5.37.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3",