WIP: Add webpack, auto compile JS.

.babelrc

@@ -0,0 +1,11 @@
+{
+    "plugins": ["syntax-dynamic-import"],
+    "presets": [
+        [
+            "@babel/preset-env",
+            {
+                "modules": false
+            }
+        ]
+    ]
+}

.gitattributes

@@ -96,6 +96,8 @@
 *.css             text
 *.htm             text diff=html
 *.html            text diff=html
+*.j2              text diff=html
+*.jinja           text diff=html
 *.inc             text
 *.ini             text
 *.js              text

lms/babel.cfg

@@ -1,2 +1,2 @@
 [python: **.py]
-[jinja2: **/templates/**.html]
+[jinja2: **/templates/dist/**.j2]

lms/lmsweb/__init__.py

@@ -9,8 +9,8 @@
 
 project_dir = pathlib.Path(__file__).resolve().parent.parent
 web_dir = project_dir / 'lmsweb'
-template_dir = project_dir / 'templates'
-static_dir = project_dir / 'static'
+template_dir = project_dir / 'templates' / 'dist'
+static_dir = project_dir / 'static' / 'dist'
 config_file = web_dir / 'config.py'
 config_example_file = web_dir / 'config.py.example'
 

lms/lmsweb/views.py

@@ -112,7 +112,7 @@ def login():
             return fail(400, "The URL isn't safe.")
         return redirect(next_url or url_for('main'))
 
-    return render_template('login.html')
+    return render_template('login.j2')
 
 
 @webapp.route('/logout')
@@ -137,7 +137,7 @@ def banned_page():
         current_user.is_authenticated
         and current_user.role.is_banned
     ):
-        return render_template('banned.html')
+        return render_template('banned.j2')
 
 
 @webapp.route('/')
@@ -150,10 +150,7 @@ def main():
 @managers_only
 @login_required
 def status():
-    return render_template(
-        'status.html',
-        exercises=Solution.status(),
-    )
+    return render_template('status.j2', exercises=Solution.status())
 
 
 @webapp.route('/exercises')
@@ -163,7 +160,7 @@ def exercises_page():
     exercises = Solution.of_user(current_user.id, fetch_archived)
     is_manager = current_user.role.is_manager
     return render_template(
-        'exercises.html',
+        'exercises.j2',
         exercises=exercises,
         is_manager=is_manager,
         fetch_archived=fetch_archived,
@@ -307,7 +304,7 @@ def comment():
 @webapp.route('/send/<int:_exercise_id>')
 @login_required
 def send(_exercise_id):
-    return render_template('upload.html')
+    return render_template('upload.j2')
 
 
 @webapp.route('/user/<int:user_id>')
@@ -320,7 +317,7 @@ def user(user_id):
         return fail(404, 'There is no such user.')
 
     return render_template(
-        'user.html',
+        'user.j2',
         solutions=Solution.of_user(target_user.id, with_archived=True),
         user=target_user,
     )
@@ -329,7 +326,7 @@ def user(user_id):
 @webapp.route('/send', methods=['GET'])
 @login_required
 def send_():
-    return render_template('upload.html')
+    return render_template('upload.j2')
 
 
 @webapp.route('/upload', methods=['POST'])
@@ -454,7 +451,7 @@ def view(
     if viewer_is_solver:
         notifications.read_related(solution_id, current_user.id)
 
-    return render_template('view.html', **view_params)
+    return render_template('view.j2', **view_params)
 
 
 @webapp.route(f'{routes.SHARED}/<string:shared_url>')

lms/templates/banned.html → lms/templates/banned.j2

@@ -1,18 +1,20 @@
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
 <div class="container">
     <div id="login-container">
         <div id="login" class="text-center">
-            <div id="course-logo" style="opacity: 0.6">
+            <div id="course-logo">
                 <img id="login-logo" src="{{ url_for('static', filename='avatar.jpg') }}" alt="{{ _('תמונת הפרופיל של קורס פייתון') }}" width="144" height="144">
             </div>
-            <h1 id="main-title" class="h3 font-weight-normal">השעייה</h1>
+            <h1 id="main-title" class="h3 font-weight-normal">{{ _('הושעת מהמערכת') }}</h1>
             <p>
                 {{ _('המשתמש שלך הושעה על ידי מנהל המערכת.') }}<br>
                 {{ _('לפרטים נוספים אנא פנה אל צוות הניהול.') }}
             </p>
         </div>
     </div> 
 </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {% endblock %}

lms/templates/base.j2

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en" class="{{ direction }}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>{{ _('מערכת הגשת תרגילים לקורס פייתון') }}</title>
+    {% block head_scripts %}{% endblock %}
+</head>
+<body>
+    {% include 'navbar.j2' %}
+    {% block page_content %}{% endblock %}
+</body>
+</html>

lms/templates/exercises.html → lms/templates/exercises.j2

@@ -1,5 +1,6 @@
-{%- extends 'base.html' -%}
+{%- extends 'base.j2' -%}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {%- block page_content -%}
 <div class="container">
   <div id="exercises-page" class="page {{ direction }}">
@@ -60,4 +61,5 @@ <h1 id="exercises-head">{{ _('תרגילים') }}</h1>
     </div>
   </div>
 </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {%- endblock -%}

lms/templates/login.html → lms/templates/login.j2

@@ -1,5 +1,6 @@
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
   <div class="container">
     <div id="login-container">
@@ -25,4 +26,5 @@ <h1 id="main-title" class="h3 font-weight-normal">{{ _('התחברות') }}</h1>
         </div>
     </div>
   </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {% endblock %}

lms/templates/navbar.html → lms/templates/navbar.j2

@@ -3,7 +3,7 @@
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
-  <a class="navbar-brand" href="{{ config.HOME_URL or "/" }}">
+  <a class="navbar-brand" href="{{ config.HOME_URL or '/' }}">
     <img src="{{ url_for('static', filename='avatar.jpg') }}" width="30" height="30" class="d-inline-block align-top" alt="{{ _('הלוגו של פרויקט לומדים פייתון: נחש צהוב על רקע עיגול בצבע תכלת, ומתחתיו כתוב - לומדים פייתון.') }}">
   </a>
   <div class="collapse navbar-collapse" id="navbarNavDropdown">

lms/templates/status.html → lms/templates/status.j2

@@ -1,6 +1,7 @@
 
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
 <div id="page-status" class="{{ direction }}">
   <div id="status-head">
@@ -44,4 +45,5 @@ <h1>{{ _('חמ"ל תרגילים') }}</h1>
     </table>
   </div>
 </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {% endblock %}

lms/templates/upload.html → lms/templates/upload.j2

@@ -1,7 +1,7 @@
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css" integrity="sha256-AgL8yEmNfLtCpH+gYp9xqJwiDITGqcwAbI8tCfnY2lw=" crossorigin="anonymous" />
 <div class="container">
   <div id="send-page" class="page">
     <h1 id="send-head" class="text-center">{{ _('העלאת מחברות') }}</h1>
@@ -13,7 +13,7 @@ <h1 id="send-head" class="text-center">{{ _('העלאת מחברות') }}</h1>
       </form>
       <a id="back-to-exercises" class="btn btn-primary btn-lg" href="/exercises">{{ _('חזרו לרשימת התרגילים') }}</a>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js" integrity="sha256-OG/103wXh6XINV06JTPspzNgKNa/jnP1LjPP5Y3XQDY=" crossorigin="anonymous"></script>
   </div>
 </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {% endblock %}

lms/templates/user.html → lms/templates/user.j2

@@ -1,5 +1,6 @@
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
 <div id="page-user">
   <div id="user" class="{{ direction }}">
@@ -42,4 +43,5 @@ <h2>{{ _('תרגילים שהוגשו:') }}</h2>
     </div>
   </div>
 </div>
+ <%= htmlWebpackPlugin.tags.bodyTags %>
 {% endblock %}

lms/templates/view.html → lms/templates/view.j2

@@ -1,5 +1,6 @@
-{% extends 'base.html' %}
+{% extends 'base.j2' %}
 
+{% block head_scripts %}<%= htmlWebpackPlugin.tags.headTags %>{% endblock %}
 {% block page_content %}
 <div id="page-view">
   <div id="view-head">
@@ -119,7 +120,7 @@ <h2>{{ _('הערות בודק') }}</h2>
     </div>
     {% endif %}
     {%- if files | length > 1 %}
-      {% include 'filetree.html' %}
+      {% include 'filetree.j2' %}
     {% endif -%}
   </div>
   <a id="download-solution" href="/download/{% if shared_url %}{{ shared_url }}{% else %}{{ solution['id'] }}{% endif %}" class="{{ direction }}">
@@ -128,12 +129,8 @@ <h2>{{ _('הערות בודק') }}</h2>
     </button>
   </a>
 </div>
-<script src="{{ url_for('static', filename='prism.js') }}"></script>
-{% if not shared_url %}
-<script src="{{ url_for('static', filename='comments.js') }}"></script>
+<%= htmlWebpackPlugin.tags.bodyTags[htmlWebpackPlugin.options.chunks.indexOf('view')] %>
 {%- if is_manager %}
-<script src="{{ url_for('static', filename='grader.js') }}"></script>
-<script src="{{ url_for('static', filename='keyboard.js') }}"></script>
+<%= htmlWebpackPlugin.tags.bodyTags[htmlWebpackPlugin.options.chunks.indexOf('view_admin')] %>
 {% endif -%}
-{% endif %}
 {% endblock %}

package.json

@@ -6,12 +6,40 @@
   "repository": "https://github.com/PythonFreeCourse/lms",
   "author": "Yam Mesicka <yammesicka@gmail.com>",
   "license": "BSD-3-Clause",
-  "dependencies": {},
+  "dependencies": {
+    "bootstrap": "^5.0.0-alpha2",
+    "bootstrap-icons": "^1.0.0",
+    "dropzone": "^5.7.2",
+    "popper.js": "^1.16.1"
+  },
+  "scripts": {
+    "build": "webpack --progress",
+    "dev-build": "webpack --progress --mode development",
+    "watch": "webpack --progress --mode development --watch"
+  },
   "devDependencies": {
+    "@babel/core": "^7.11.6",
+    "@babel/preset-env": "^7.11.5",
+    "autoprefixer": "^10.0.1",
+    "babel-loader": "^8.1.0",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^4.3.0",
     "eslint": "^7.10.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-plugin-import": "^2.22.1",
+    "html-webpack-plugin": "^4.5.0",
+    "mini-css-extract-plugin": "^0.11.2",
+    "postcss": "^8.1.1",
+    "postcss-loader": "^4.0.2",
+    "precss": "^4.0.0",
+    "sass": "^1.26.11",
+    "sass-loader": "^10.0.2",
+    "style-loader": "^1.2.1",
     "stylelint": "^13.7.2",
-    "stylelint-config-standard": "^20.0.0"
+    "stylelint-config-standard": "^20.0.0",
+    "terser-webpack-plugin": "^4.2.2",
+    "webpack": "^5.0.0-rc.3",
+    "webpack-cli": "^4.0.0-rc.0"
   }
 }