feat(devtool): show markdown, link words in skills to word-page

kantord · Jan 22, 2022 · 99ffe7a · 99ffe7a
1 parent 4d40fc9
commit 99ffe7a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 17 deletions.
diff --git a/apps/tools/librelingo_tools/lili.py b/apps/tools/librelingo_tools/lili.py
@@ -4,8 +4,9 @@
 import json
 import logging
 import os
-import sys
 import re
+import sys
+import markdown
 from jinja2 import Environment, FileSystemLoader
 
 from librelingo_yaml_loader.yaml_loader import load_course
@@ -87,6 +88,8 @@ def render(template_file, **args):
     templates_dir = os.path.join(root, "templates")
     env = Environment(loader=FileSystemLoader(templates_dir), autoescape=True)
     env.filters["skillfile"] = skillfile_filter
+    env.filters["yaml2md"] = lambda path: re.sub(r"\.yaml$", ".md", path)
+    env.filters["md2html"] = markdown.markdown
     template = env.get_template(template_file)
     html = template.render(**args)
     return html

diff --git a/apps/tools/librelingo_tools/templates/incl/header.html b/apps/tools/librelingo_tools/templates/incl/header.html
@@ -14,6 +14,9 @@
         .warning {
             background-color: #FF5555;
         }
+        #introduction {
+          background-color: gray;
+        }
     </style>
   </head>
   <body>

diff --git a/apps/tools/librelingo_tools/templates/skill.html b/apps/tools/librelingo_tools/templates/skill.html
@@ -10,28 +10,55 @@ <h1>{{ skill.name }}</h1>
 
     <h2>Introduction</h2>
 
-    {{skill.introduction}}
+    {% if skill.introduction %}
+      <div id="introduction">
+        {{ skill.introduction | md2html | safe }}
+      </div>
+
+      <div><a href="{{ repository_url }}/blob/{{ branch }}/course/{{ rel_dir }}/{{ skill.filename | yaml2md }}">source</a></div>
+
+    {% else %}
+    Each skill can have an introduction in Markdown file. This skill could have it in <a href="{{ repository_url }}/blob/{{ branch }}/course/{{ rel_dir }}/{{ skill.filename | yaml2md }}">source</a>
+
+    {% endif %}
 
     <h2>Words</h2>
-    <table>
-        {% for word in skill.words %}
+    {% if skill.words %}
+      <table>
+          <tr><th>{{ course.target_language.name }}</th><th>{{ course.source_language.name }}</th><th>Images</th></tr>
+        {% for words in skill.words %}
           <tr>
-              <td>{{word.in_target_language}}</td>
-              <td>{{word.in_source_language}}</td>
-              <td>{{word.pictures}}</td>
+              <td>{% for word in words.in_target_language %}<a href="{{ rel }}/target/{{ word }}.html">{{ word }}</a>{%- if not loop.last %},{%- endif %}{% endfor %}</td>
+              <td>{% for word in words.in_source_language %}<a href="{{ rel }}/source/{{ word }}.html">{{ word }}</a>{%- if not loop.last %},{%- endif %}{% endfor %}</td>
+              <td>{{words.pictures}}</td>
             </tr> 
-    {% endfor %}
-    </table>
+        {% endfor %}
+      </table>
+    {% else %}
+    There are no entries in the Words section.
+    {% endif %}
 
     <h2>Phrases</h2>
-    <table>
-        {% for phrase in skill.phrases %}
-          <tr>
-              <td>{{phrase.in_target_language}}</td>
-              <td>{{phrase.in_source_language}}</td>
-            </tr> 
-    {% endfor %}
-    </table>
+    {% if skill.phrases %}
+        <table>
+            {% for phrase in skill.phrases %}
+            <tr>
+                <td>
+                    {% for phrs in phrase.in_target_language %}
+                    {{ phrs }}<br>
+                    {% endfor %}
+                </td>
+                <td>
+                    {% for phrs in phrase.in_source_language %}
+                    {{ phrs }}<br>
+                    {% endfor %}
+                </td>
+                </tr> 
+        {% endfor %}
+        </table>
+    {% else %}
+    There are no entries in the Phrases section.
+    {% endif %}
 
     <h2>Dictionary</h2>
     <table>