Requirements for a Morea IDE Plugin

[philipmjohnson]

Motivation

I had a hallway conversation with Mahdi recently where he noted that there are some "pain points" associated with Morea site development that could be alleviated by an IDE plugin. The goal of this discussion is to capture example use cases during Morea site development where a plugin would be useful, and to explain how students could participate in this project.

Use cases

Here are some examples of situations in which an IntelliJ plugin would facilitate Morea site development.

Use Case: New page

Currently, the easiest way to create a new Morea page by making a copy of an existing page of the same type (i.e. module, reading, experience, outcome, assessment) and then editing it to conform to the new page contents. A lot of this boilerplate stuff could be taken care of by an editor plugin.

For example:

1. The user invokes the "add Morea page" command by right-clicking on a directory containing the files for a Morea module.

2. This command generates a dialog box with a pull-down menu to specify the type of page (i.e. "reading") and the name of the Morea entity (i.e. "dart-language-tour").

3. Based upon these two pieces of information, the plugin then:

• Creates a page named "reading-dart-language-tour.md"
• Prefills the YAML front matter with the morea_type ("reading"), the morea_id ("reading-dart-language-tour"), and whatever other front matter fields are appropriate for the type.
• Under the front matter, creates an H1 title (i.e. "#") with a string generated from the entity name (i.e. "Dart Language Tour")
• Edits the module file associated with this reading and inserts the morea_id in the morea_readings field.

Use case: Page templates

I find that when I create experiences, I always want two sections in it: "## Task" and "## Submission Instructions". It would be nice to be able to define templates for the bodies of pages.

Page templates are user-definable, and a user might specify more than one template per entity type.

Use Case: New Module

Similar to a "New Page" situation, it would be very nice to be able to right click on the "morea/" directory and select "New Module".

This would pop up a dialog box that would request the name of the module.

Based upon the module name, a directory would be created, along with a module.md file with a module-ID, the module name, a default logo, etc.

Use case: snippets

Admonitions involve boilerplate code. Users might also have boilerplate for (example) invoking custom include files.

It would be nice to provide users with a way to create and insert "snippets" like these.

Use case: instructor customization

Different instructors develop courses in Morea in different ways. The plugin should support some approach to customization in order to support different Morea site development strategies. The precise approach to customization will "emerge" from use of the plugin by instructors.

Stretch Goal: Hot Reload

This isn't a plugin issue per se, but it would be really nice to have Hot Reload for Morea sites. I know Dan Port played around with something like this in the past, so maybe he has some code to start with.

Getting involved

This project is available to students as a Capstone (ICS 496) and/or Independent Study (ICS 491) project. Students can work alone or in teams. The basic requirements for students wishing to work on this project are:

• Willingness to learn how to use the Morea framework from the "instructor" perspective. This involves working with GitHub, Jekyll, Markdown, and understanding the pedagogical goals of Morea. If you've had a class (such as ICS 314) that used Morea, then you understand Morea from the "student" perspective. You will need to invest a small amount of time to build a sample "course" to understand the Morea framework from the "instructor" perspective. Read the Morea Instructor Guide to get a better sense for what is involved.

• Willingness to learn how to do IntelliJ Plugin Development. You need to learn how to create IntelliJ plugins. This involves using Java. Read the IntelliJ Plugin Guide to get a better sense for what is involved.

• Willingness to work independently and pro-actively (regardless of whether you are working in a team or individually). Unlike a regular class, there are no "experts" that can hold your hand and solve your problems for you. Various professors that use Morea can provide insight into the use cases and what we'd like the system to do. In addition, you will be required to meet with an advisor (probably Philip Johnson) once a week for 30 minutes to discuss your progress during the previous week.

• Willingness to devote approximately 9 hours a week to this project. The UH Manoa guidelines state that a student is expected to do approximately 3 hours a week of "homework" for each credit hour. Therefore, you should expect to work approximately 9 hours a week on this project. You will not punch a time clock; some weeks you might work more, some weeks you might work less. But to make adequate progress, you should budget around 9 hours.

The hope is that you will have an "MVP" (minimum viable product) available within the first two months of the semester, which can be evaluated by instructors and which will provide feedback to guide further development during the final two months of the semester.

Students who take on this project will derive some significant benefits. This is a "research" project, in that you will be exploring the design space of possible Morea support technology and obtaining feedback from the user community. It will involve you engaging with a variety of ICS professors at various times, and providing technology that will support their future endeavors. If successful, you will have a great project to add to your professional portfolio and be in a great position to request and receive enthusiastic letters of recommendation.

[henricasanova]

• I like the New Page use case, as indeed I also constantly copy files and edit the content. What would be great also is if the plugin would highlight differently pages/modules are are published and those that are not.
• I understand the motivation for the Page Templates use case, but I think that's difficult. we probably all use different templates and I am not sure we can all conform to a template. For instance, in my case I have different templates for programming assignments and "pencil-and-paper" assignments, I have an "overview", followed by "what to turn in", followed by a series of "questions", etc. So, what I have done is create a macro in my text editor that generates all that for me (like for instance I have to automatically create an itemized list in LaTeX with one key, rather than spending my life typing \begin{itemized}....). But I don't know what a general template can be defined....

[cammoore]

I was thinking that we could use page templates as an include template and store them in the _includes directory. Then when we are building the pages we can use something like {% include submission-jsfiddle.html assignment="E07" %}.
We can pass in parameters, for example _includes\wod-times.html looks like:

<span class="h4">
  <span style="padding: 2px" class="badge bg-success">Rx: {{ include.Rx }}</span>
  <span style="padding: 2px" class="badge bg-info">Av: {{ include.Av }}</span>
  <span style="padding: 2px" class="badge bg-warning">Sd: {{ include.Sd }}</span>
  <span style="padding: 2px" class="badge bg-danger">DNF: {{ include.DNF}}</span>
</span>

and the include could be {% include wod-times.html Rx="<30 min" Av="30-35 min" Sd="35-40 min" DNF="40+ min" %}

[mahdi-b]

I think templates are a great idea, but perhaps we need to find a way to make them specific to each project to address Henri's concern. Is it possible to create templates in a specific folder and then reuse them within that project?

Another possibility to consider is using the PythonScript function, which allows most Python code to be interpreted in a browser. It would be really helpful to have a Python widget, like , that allows students to experiment with code snippets directly within the Morea platform.

[mahdi-b]

Just saw @cammoore commments. That's a great idea for using templates.

[dport96]

Perhaps a start on templates is to enable EMMET. It's not clear how much dynamic templating is needed for the above use cases so this might give us a way to see.

[philipmjohnson]

Page templates are a great idea, but they are different from includes files. One of the pain points in Morea is that creating a brand new page with the correct YAML generally involves copying an old file and editing the YAML to the new page (i.e. id, etc.) Then, updating the module file to include the page ID.

So, there's this general workflow from my perspective for creating new pages:

• When creating a new page, have the plugin generate the YAML for the page type (reading, experience, etc)
• Do basic QA like detect duplicate IDs.
• Automatically insert the page ID into the module file.
• In addition, if the user specifies a "template", then the body of the file is initialized to the template (which may have include files!)

Creating a new module is involves creating a new directory, etc. which is a different thing altogether.

[dport96]

Hot reload for local MOREA? I wrote a script that monitors the MOREA src path for fs changes and restarts jekyll. Not really a hot reload!