The URL of a course will be `/courses/<course-name>` and a topic will be `/courses/<course-name>/<topic-name>`. Implemented this by adding entries to `website_route_rules`.
76 lines
2.4 KiB
HTML
76 lines
2.4 KiB
HTML
{% extends "templates/base.html" %}
|
|
{% from "www/macros/livecode.html" import LiveCodeEditor with context %}
|
|
{% block title %}{{topic.title}} ({{course.title}}){% endblock %}
|
|
{% block head_include %}
|
|
<meta name="description" content="Topic {{topic.title}} of the course {{course.title}}" />
|
|
<meta name="keywords" content="course {{course.title}} {{topic.title}}" />
|
|
<style>
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="{{ livecode_url }}/static/codemirror/lib/codemirror.css">
|
|
<link rel="stylesheet" href="/assets/css/lms.css">
|
|
|
|
<script src="{{ livecode_url }}/static/codemirror/lib/codemirror.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/mode/python/python.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/keymap/sublime.js"></script>
|
|
|
|
<script src="{{ livecode_url }}/static/codemirror/addon/edit/matchbrackets.js"></script>
|
|
<script src="{{ livecode_url }}/static/codemirror/addon/comment/comment.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<section class="top-section" style="padding: 1rem 0rem;">
|
|
<div class='container pb-5'>
|
|
<nav aria-label="breadcrumb">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item" aria-current="page"><a href="/courses">Courses</a></li>
|
|
<li class="breadcrumb-item" aria-current="page"><a href="/courses/{{course.name}}">{{course.title}}</a></li>
|
|
</ol>
|
|
</nav>
|
|
|
|
<h1>{{ topic.title }}</h1>
|
|
|
|
{% for s in topic.get_sections() %}
|
|
<div class="section section-{{ s.type }}">
|
|
{{ render_section(s) }}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</section>
|
|
{% endblock %}
|
|
|
|
{% macro render_section(s) %}
|
|
{% if s.type == "text" %}
|
|
{{ render_section_text(s) }}
|
|
{% elif s.type == "example" or s.type == "code" %}
|
|
{{ LiveCodeEditor(s.name, s.contents) }}
|
|
{% else %}
|
|
<div>Unknown section type: {{s.type}}</div>
|
|
{% endif %}
|
|
{% endmacro %}
|
|
|
|
{% macro render_section_text(s) %}
|
|
<div class="row">
|
|
<div class="col-md-9">
|
|
{{ frappe.utils.md_to_html(s.contents) }}
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
{%- block script %}
|
|
{{ super() }}
|
|
<script type="text/javascript" src="{{ livecode_url }}/static/livecode.js"></script>
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$(".canvas-editor").each((i, e) => {
|
|
var editor = new LiveCodeEditor(e, {
|
|
runtime: "python-canvas",
|
|
base_url: "{{ livecode_url }}",
|
|
codemirror: true
|
|
})
|
|
})
|
|
})
|
|
</script>
|
|
{%- endblock %}
|