Convert to MarkBind format

.gitignore

@@ -1 +1,3 @@
 .idea/
+_site/
+_markbind/logs/

README.md

@@ -1,11 +1 @@
-# Guides and tutorials for SE student projects
-
-## Tutorials
-
-* [Gradle tutorial](tutorials/gradleTutorial.md)
-* JavaFX tutorial:
-  * [Part 1: Introduction](tutorials/javaFxTutorialPart1.md)
-  * [Part 2: Creating a GUI for Duke](tutorials/javaFxTutorialPart2.md)
-  * [Part 3: Interacting with the user](tutorials/javaFxTutorialPart3.md)
-  * [Part 4: Using FXML](tutorials/javaFxTutorialPart4.md)
-
+Go to the main website [http://se-education.org/guides]

_markbind/layouts/default/footer.md

@@ -0,0 +1,6 @@
+<footer>
+  <!-- Support MarkBind by including a link to us on your landing page! -->
+  <div class="text-center">
+    <small>[Generated by {{MarkBind}} on {{timestamp}}]</small>
+  </div>
+</footer>

_markbind/layouts/default/header.md

@@ -0,0 +1,17 @@
+<header>
+<navbar placement="top" type="light">
+<a slot="brand" href="https://se-edu.github.io" title="More SE-EDU Resources" class="navbar-brand"><img src="https://se-edu.github.io/images/SeEduLogo.png" alt="SE-EDU" width="30"></a>
+  <li><a href="https://se-edu.github.io/addressbook-level3/" class="nav-link"><md>AB-3</md></a></li>
+  <li><a href="https://se-edu.github.io/se-book/" class="nav-link"><md>Book</md></a></li>
+  <dropdown header="Tutorials" class="nav-link">
+    <li><a href="{{baseUrl}}/index.html" class="dropdown-item"><md>Home</md></a></li>
+    <li><a href="{{baseUrl}}/about.html" class="dropdown-item"><md>About</md></a></li>
+    <li><a href="https://github.com/se-edu/guides" class="dropdown-item"><md>{{ fab_github }} GitHub</md></a></li>
+  </dropdown>
+  <li slot="right" class="nav-link">
+    <form class="navbar-form">
+      <searchbar :data="searchData" placeholder="Search Learning Resources" :on-hit="searchCallback" menu-align-right ></searchbar>
+    </form>
+  </li>
+</navbar>
+</header>

_markbind/layouts/default/page.md

@@ -0,0 +1 @@
+{{ MAIN_CONTENT_BODY }}

_markbind/layouts/default/scripts.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+MarkBind.afterSetup(() => {
+  // Include code to be called after MarkBind setup here.
+});

_markbind/navigation/site-nav.md

@@ -0,0 +1,8 @@
+<navigation>
+* [Home :house:]({{ baseUrl }}/index.html)
+* [Topic 1]({{baseUrl}}/contents/topic1.html)
+* [Topic 2]({{baseUrl}}/contents/topic2.html)
+* Topic 3 :expanded:
+  * [Topic 3a]({{baseUrl}}/contents/topic3a.html)
+  * [Topic 3b]({{baseUrl}}/contents/topic3b.html)
+</navigation>

_markbind/variables.json

@@ -0,0 +1,3 @@
+{
+    "jsonVariableExample": "Your variables can be defined here as well"
+}

_markbind/variables.md

@@ -0,0 +1,39 @@
+<span id="icon_announcement"><md>:fas-bell:</md></span>
+<span id="icon_book"><md>:fas-book:</md></span>
+<span id="icon_calendar"><md>:fas-calendar-alt:</md></span>
+<span id="icon_dislike"><md>:fas-thumbs-down:</md></span>
+<span id="icon_example"><md>:fas-cube:</md></span>
+<span id="icon_embedding"><md>:glyphicon-log-in:</md></span>
+<span id="icon_exercise"><md>:fas-dumbbell:</md></span>
+<span id="icon_extra"><span class='badge badge-pill badge-secondary'><md>:fas-plus: extra</md></span></span>
+<span id="icon_info"><md>:fas-info-circle:</md></span>
+<span id="icon_like"><md>:fas-thumbs-up:</md></span>
+<span id="icon_linux"><md>:fab-linux:</md></span>
+<span id="icon_important_big_red"><font color="red"><big>:glyphicon-exclamation-sign:</big></font></span>
+<span id="icon_important"><md>:glyphicon-exclamation-sign:</md></span>
+<span id="icon_new_window"><md>:glyphicon-new-window:</md></span>
+<span id="icon_outcome"><md>:fas-trophy:</md></span>
+<span id="icon_output"><md>:fas-arrow-down:</md></span>
+<span id="icon_output_right"><md>:fas-arrow-right:</md></span>
+<span id="icon_print"><md>:glyphicon-print:</md></span>
+<span id="icon_prereq"><md>:glyphicon-education:</md></span>
+<span id="icon_preview"><md>:glyphicon-eye-open:</md></span>
+<span id="icon_pro_tip"><span class="badge badge-pill badge-warning">:fas-lightbulb: PRO TIP</span></span>
+<span id="icon_Q"><md>:glyphicon-question-sign:</md></span>
+<span id="icon_Q_A">{{ icon_Q | safe }}:glyphicon-ok-sign:</span>
+<span id="icon_resource"><md>:fas-paperclip:</md></span>
+<span id="icon_terminal"><smal><span class="badge badge-secondary">&gt;_</span></smal></span>
+<span id="icon_text"><md>:far-file-alt:</md></span>
+<span id="icon_tick"><md>:fas-check:</md></span>
+<span id="icon_tip"><span class="badge badge-pill badge-warning">:fas-lightbulb:</span></span>
+<span id="icon_tick_green"><span style="color:green">{{ icon_tick | safe }}</span></span>
+<span id="icon_todo"><md>:glyphicon-check:</md></span>
+<span id="icon_slides"><md>:far-images:</md></span>
+<span id="icon_video"><md>:glyphicon-facetime-video:</md></span>
+<span id="icon_windows"><md>:fab-windows:</md></span>
+<span id="icon_x"><md>:fas-times:</md></span>
+<span id="icon_x_red"><span style="color:red">{{ icon_x | safe }}</span></span>
+<span id="bad"><font color="red"><md>**{{ icon_dislike | safe }} Bad**</md></font></span>
+<span id="good"><font color="green"><md>**{{ icon_like | safe }} Good**</md></font></span>
+
+<variable from="variables.json" />

about.md

@@ -0,0 +1,29 @@
+<frontmatter>
+  title: "About Us"
+</frontmatter>
+
+<div class="website-content">
+
+{{ booktitle | safe }}
+
+# About Us
+
+This is a sub-project of the [SE-EDU Project](https://se-edu.github.io).
+<span id="contact-info">
+
+## Contact
+
+Suggestions, questions, and bug reports can be posted in [our issue tracker](https://github.com/nus-oss/learningresources/issues).
+
+
+Alternatively, contact project mentor [Damith C. Rajapakse](https://www.comp.nus.edu.sg/~damithch).
+</span>
+
+## License
+
+MIT
+
+## Acknowledgements
+
+* The `favicon.ico` is based on an icon made by [Dave Gandy](https://www.flaticon.com/authors/dave-gandy) from www.flaticon.com 
+</div>

index.md

@@ -0,0 +1,16 @@
+<frontmatter>
+  title: "Guides for Software Engineering Students"
+  pageNav: 2
+</frontmatter>
+
+# Guides and tutorials for SE student projects
+
+## Tutorials
+
+* [Gradle](tutorials/gradleTutorial.html)
+* JavaFX:
+  * [Part 1: Introduction](tutorials/javaFxTutorialPart1.html)
+  * [Part 2: Creating a GUI for Duke](tutorials/javaFxTutorialPart2.html)
+  * [Part 3: Interacting with the user](tutorials/javaFxTutorialPart3.html)
+  * [Part 4: Using FXML](tutorials/javaFxTutorialPart4.html)
+* [Automated testing of text UIs](tutorials/textUiTestingTutorial.html)

site.json

@@ -0,0 +1,24 @@
+{
+  "baseUrl": "/guides",
+  "titlePrefix": "",
+  "timeZone": "Asia/Singapore",
+  "ignore": [
+    "_markbind/layouts/*",
+    "_markbind/logs/*",
+    "_site/*",
+    "site.json",
+    "*.md",
+    "*.mbd",
+    "*.mbdf",
+    "*.njk",
+    ".git/*"
+  ],
+  "pages": [
+    {
+      "glob": ["**/*.+(md|mbd)"]
+    }
+  ],
+  "deploy": {
+    "message": "Site Update."
+  }
+}

tutorials/checkstyleTutorial.md

@@ -1 +1,6 @@
-TBD
+<frontmatter>
+  title: "CheckStyle Tutorial"
+  pageNav: 2
+</frontmatter>
+
+TBD

tutorials/gradleTutorial.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "Gradle Tutorial"
+  pageNav: 2
+</frontmatter>
+
 # Gradle Tutorial
 
 Gradle is a _build automation tool_ used to automate build processes. There are many ways of integrating Gradle into a project. This tutorial uses the _Gradle wrapper_ approach.
@@ -27,13 +32,33 @@ Tasks can be composed of, or dependent on, other tasks.
 
 ## Adding Gradle to the project
 
-For simplicity, let us assume that Gradle Wrapper has been added to the project already (if it has been added to the project, you will see a `gradle\wrapper\gradle-wrapper.jar` in your project). If you need to add it yourself, you can learn how to do that from [here](https://docs.gradle.org/current/userguide/gradle_wrapper.html).
+****Scenario 1:**** You are setting up a project in Intellij IDEA. The project already has Gradle support.
+
+<div class="ml-3">
+
+{{ icon_tip }} If the project comes with Gradle support, you will see a `build.gradle` file in your project root.
+</div>
+
+1. When you _import_ the project into IDEA, at the step where you normally select the project root folder, choose the `build.gradle` file inside the root folder instead.
+1. If asked, choose `Open as Project` (not `Open as File`).
+1. After importing is complete, you will see the `Gradle Toolbar` in the IDEA interface.<br>
+   ![Gradle icon](assets/GradleIcon.png)
+
+****Scenario 2:**** You are adding Gradle support to an ongoing project that is already set up in Intellij IDEA. Gradle wrapper files have been provided.
+
+1. Add the Gradle wrapper files to the project. e.g., if they are in a separate branch, merge that branch.
+1. Close the IDEA project if it is open.
+1. Delete the `.idea` folder.
+1. Import the project again (similar to scenario 1 above)
+
+****Scenario 3:**** You are adding Gradle support to an ongoing project from scratch.
+
+* You are on you own but [this](https://docs.gradle.org/current/userguide/gradle_wrapper.html) is a good place to start.
 
 
 ## Using Gradle in Intellij IDEA
 
-When you import a Gradle project into IntelliJ IDEA, you should select the `build.gradle` instead of the project root directory. After importing a Gradle project into Intellij IDEA, you will see the `Gradle Toolbar` in the IDEA interface.<br>
-![Gradle icon](assets/GradleIcon.png)
+
 
 If the Gradle tasks don't appear in the Gradle window, click the 'refresh' button in the tooolbar to reimport the Gradle project.
 

tutorials/javaFxTutorialPart1.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "JavaFX Tutorial Part 1 – Introduction"
+  pageNav: 2
+</frontmatter>
+
 # JavaFX Tutorial Part 1 – Introduction
 
 ## Lifecycle of a JavaFX  application

tutorials/javaFxTutorialPart2.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "JavaFX Tutorial Part 2 - Creating a GUI for Duke"
+  pageNav: 2
+</frontmatter>
+
 # JavaFX Tutorial Part 2 - Creating a GUI for Duke
 
 In this tutorial, we will be creating a GUI for Duke from scratch based on the following mockup.

tutorials/javaFxTutorialPart3.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "JavaFX Tutorial 3 – Interacting with the user"
+  pageNav: 2
+</frontmatter>
+
 # JavaFX Tutorial 3 – Interacting with the user
 
 Picking up from where we left off last tutorial, we have successfully achieved the desired layout. Now let’s make the application respond to user input. 

tutorials/javaFxTutorialPart4.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "JavaFX Tutorial Part 4 – Using FXML"
+  pageNav: 2
+</frontmatter>
+
 # JavaFX Tutorial Part 4 – Using FXML
 
 While we have produced a fully functional prototype, there are a few major problems with our application.

tutorials/junitTutorial.md

@@ -1,3 +1,8 @@
+<frontmatter>
+  title: "JUnit Tutorial"
+  pageNav: 2
+</frontmatter>
+
 JUnit is a testing framework for Java. By convention, java tests belong in `src/test/java` folder. A sample test file is included in this project. 
 
 * To run a specific JUnit test class (e.g., `src/test/java/DukeTest.java`), right-click on the test class, and choose `Run {classname}`.

tutorials/textUiTestingTutorial.md

@@ -1,9 +1,23 @@
-# Text UI Testing Tutorial
+<frontmatter>
+  title: "Tutorial: Automated testing of text UIs"
+  pageNav: 2
+</frontmatter>
 
-1. Create a folder `[project root]\text-ui-test`
+# Tutorial: Automated testing of text UIs
+
+_I/O redirection_ technique can be used to semi-automate the testing of text UIs. For an explantion of how that technique works, see [the _Automated Testing of CLI Apps_ section of se-edu/se-book](https://se-education.org/se-book/testing/#automated-testing-of-cli-apps).
+
+## Setting up 
+
+Given below re steps to set it up for a project.
+
+1. Create a folder to hold the relevant files e.g., `[project root]\text-ui-test`
 1. Add a `runtest.bat` (if you are on Windows) or `runtest.sh` (if you are on a *nix OS) into the folder, containing the script below.<br>
-  `runtest.bat`:
-   ```
+
+   <tabs> 
+   <tab header="`runtest.bat`">
+
+   ```bat
    @ECHO OFF
    
    REM create bin directory if it doesn't exist
@@ -26,9 +40,10 @@
    REM compare the output to the expected output
    FC ACTUAL.TXT EXPECTED.TXT
    ```
+   </tab>
+   <tab header="`runtest.sh`">
 
-   `runtest.sh`:
-   ```shell
+   ```sh
    #!/usr/bin/env bash
 
    # create bin directory if it doesn't exist
@@ -64,10 +79,40 @@
        exit 1
    fi
    ```
-1. Update the `javac` and `java` commands in the script to match the name/location of your main class.
+   </tab>
+   </tabs>
+   <br>
+
+1. Update the `javac` and `java` commands in the script to match the name/location of your main class.<br>
+   If you are using packages, the two commands need to take the packages into account too.
 1. Add an `EXPECTED.txt` to the same folder, containing the expected output.
 1. Add an `input.txt` containing the input commands.
 1. Run the `.bat`/`.sh` file to execute the test.
+   * If the actual output matches the EXPECTED.TXT, the test passes.
+   * If the actual output differs from the EXPECTED.TXT, the script will report a failure.
+
+
+## Updating tests as the program evolves
+
+The purpose of testing as explained in the previous section is to confirm there are no <tooltip content="i.e., there are no _unintentional_ behavior changes">_regressions_</tooltip>. However, we often update the behavior of the program intentionally e.g., enhance an existing feature. Let's look at how to update our test set up in those cases.
+
+**Option 1:** This is the ideal but more tedious approach.
+1. Determine how the expected behavior _should_ change due to your update to the code.
+1. Update the `EXPECTED.TXT` file accordingly.
+1. Run the test to confirm the actual behavior is same as the _updated_ expected behavior.
+
+**Option 2:** This is a more practical shortcut.
+1. Run the test as per normal after updating the code. The test will fail because the new program behavior is different from the one given in the `EXPECTED.TXT`.
+1. Use a diff tool to compare the `ACTUAL.TXT` against the `EXPECTED.TXT`.<br>
+   {{ icon_tip }} [Intellij IDEA can compare two files](https://www.jetbrains.com/help/idea/comparing-files-and-folders.html).
+1. Confirm the differences indicate the behavior has changed as you intended. If the differences are not as intended, your code is buggy; fix the code and repeat from step 1.
+1. Copy over the content of the `ACTUAL.TXT` to `EXPECTED.TXT` i.e., we accept that the actual behavior should be the new _expected_ behavior. Rerun the test to confirm that it passes this time. 
+
+## Troubleshooting
+
+* **Problem**: The `ACTUAL.TXT` and `EXPECTED.TXT` looks exactly the same but the test fails.<br>
+**Explanation**: The likely cause that the line endings are different (not visible to the naked eye) because the two files were created in two different operating systems.<br>
+**Solution**: You can use the `dos2unix` utility (available in git-bash and *nix operating systems) to convert a file to Unix format.
 
 --------------------------------------------------------------------------------
 **Authors:**