Completed Base Modules for Week 1

* Completed git modules
* Made slight modifications to css
* Temporarily removed the licensing module
* Added an intro-to-unix module

Author: emilkovacev

app.py

@@ -37,6 +37,7 @@ def get_unlocked():
 
 @app.route("/")
 def hello_world():
+    print(config)
     response = render_template("index.html", config=config, unlocked=get_unlocked())
     return response
 
@@ -51,7 +52,10 @@ def module_view(module_url):
         return f"Module \"{module_name}\" not unlocked"
 
     try:
-        response = make_response(render_template(f"{module_url}.html", complete=module_id in get_unlocked()))
+        response = make_response(
+            render_template(f"{module_url}.html", 
+            complete=module_id in get_unlocked())
+        )
 
     except TemplateNotFound:
         response = make_response(f"Module \"{module_name}\" not yet implemented")

config.toml

@@ -1,62 +1,83 @@
-columns=3
+# List of rows, each row contains any number of modules
+# Add a new row when you want to create a new overarching topic!
 
-[[module]]
+[[row]]
 id=0
 name="Getting Started"
-url="getting-started"
+
+[[row]]
+id=1
+name="Software"
+
+[[row]]
+id=2
+name="Version Control"
+
+[[row]]
+id=3
+name="Licensing"
+
+
+# List of modules
+
+[[module]]
+id=0
+name="Intro to Open Source"
+url="intro-to-open-source"
 icon="flag-fill"
-column=0
+row=0
 next=[7]
 
 [[module]]
 id=7
 name="Installing Software"
 url="installing-software"
 icon="cloud-download-fill"
-column=0
-next=[1]
+row=0
+next=[8]
 
 [[module]]
 id=1
 name="Version Control"
 url="version-control"
 icon="file-diff-fill"
-column=1
+row=1
 next=[2, 4]
 
 [[module]]
 id=2
 name="Git"
 url="git"
 icon="git"
-column=1
+row=1
 next=[3]
 
 [[module]]
 id=3
 name="GitHub"
 url="github"
 icon="github"
-column=1
+row=1
 
 [[module]]
 id=4
-name="Tools"
-url="tools"
-icon="hammer"
-column=2
-next=[5, 6]
-
-[[module]]
-id=5
 name="Editors"
 url="editors"
 icon="text-left"
-column=2
+row=2
+next=[6]
+
+# [[module]]
+# id=6
+# name="Licensing"
+# url="licensing"
+# icon="person-fill-lock"
+# row=3
 
 [[module]]
-id=6
-name="Licensing"
-url="licensing"
-icon="person-fill-lock"
-column=3
+id=8
+name="Intro to UNIX"
+url="intro-to-unix"
+icon="terminal-fill"
+row=0
+next=[1]

static/css/module.css

@@ -1,8 +1,21 @@
+body {
+    overflow-y: scroll;
+}
+
 p, ul {
-    font-size: 18px;
+    font-size: 16px;
     line-height: 1.6rem;
 }
 
+ol {
+    list-style-type: decimal;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+}
+
 img {
     display: block;
     max-width: 600px;
@@ -11,7 +24,7 @@ img {
 }
 
 ul {
-    list-style: inside;
+    list-style: disc;
     margin-left: 20px;
     margin-bottom: 0.67em;
 }
@@ -20,7 +33,7 @@ ul {
     margin: 30px 0;
 }
 
-.citation {
+.caption {
     text-align: center;
     color: grey;
 }
@@ -76,15 +89,3 @@ ul {
     cursor: pointer;
     background-color: lightgrey;
 }
-
-.module-completion {
-
-}
-
-.module-complete {
-    position: sticky;
-    text-align: center;
-    padding: 10px;
-    top: 0;
-    background-color: #32d373;
-}

static/css/skill-tree.css

@@ -1,14 +1,38 @@
+body {
+    overflow-y: scroll;
+}
+
 :root {
     --green: #27db8a;
 }
 
 .modules {
     margin: auto;
     display: flex;
+    flex-direction: column;
+}
+
+.module-row {
+    display: flex;
+}
+
+/*
+.module-row + .module-row {
+    border-top: 1px solid black;
+}
+*/
+
+.module {
+    margin: 10px;
+}
+
+.module-header {
+    display: flex;
+    align-items: center;
 }
 
 .module-icon-frame {
-    border: 2px solid black;
+    border: 2px solid var(--green);
     border-radius: 100px;
     display: flex;
     justify-content: center;
@@ -48,7 +72,7 @@
 }
 
 .module-icon-link:visited .module-icon-frame {
-    border-color: var(--green);
+    border-color: black;
 }
 
 .module-icon-link {
@@ -61,38 +85,3 @@
     align-items: center;
 }
 
-.vl {
-    border-left: 2px solid black;
-    width: 20px;
-    height: 20px;
-    position: relative;
-    left: 26px;
-    margin-right: auto;
-}
-
-.vl-locked {
-    border-left: 2px solid lightgrey;
-    width: 20px;
-    height: 20px;
-    position: relative;
-    left: 26px;
-    margin-right: auto;
-}
-
-.hl {
-    border-top: 2px solid black;
-    width: 20px;
-    height: 0;
-    position: relative;
-    top: 50%;
-    float: right;
-}
-
-.hl-locked {
-    border-top: 2px solid lightgrey;
-    width: 20px;
-    height: 0;
-    position: relative;
-    top: 50%;
-    float: right;
-}

templates/base.html

@@ -29,7 +29,9 @@ <h1>Menu</h1>
         <hr/>
         <div class="license">
             Licensed under <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA</a><br/>
-            <a href="https://github.com/makeopensource/Modules">Source Code</a>
+            <a href="https://github.com/makeopensource/Modules">Source Code</a><br/>
+            Emil Kovacev
+
         </div>
 
         <script src="https://cdn.jsdelivr.net/gh/makeopensource/WebStyles/dist/js/webstyles.js"></script>

templates/editors.html

@@ -0,0 +1,55 @@
+{% extends "base-module.html" %}
+{% block module %}
+
+# Editors
+
+A programmer's editor can greatly aid in their ability to program. Many modern
+editors come with fancy features, like automatic text completion, linting,
+built-in version control, and fancy debuggers. Simple editors can be equally as
+effective, and often times much more lightweight and versitile. 
+
+Your editor can sometimes vary depending on the details of the project you work on.
+Some tools can be built as add-ons for some editors but not others. 
+
+For example,
+[VSCode](https://code.visualstudio.com) offers quite a few tools for developers,
+including an [extension](https://code.visualstudio.com/docs/languages/rust) 
+for the programming language Rust,
+that adds many of the modern features I detailed earlier.
+
+
+## VSCode
+
+Developed by Microsoft, VSCode is a relatively lightweight editor with a plethora of 
+features. Aside from simple text input, you can install any number of extensions to help
+you program! It also happens to be open source, check out the repository 
+[here](https://github.com/Microsoft/vscode/).
+
+It is available on most platforms, you can install it 
+[here](https://code.visualstudio.com/Download).
+
+
+## Vim
+
+Vim is a program that has lasted the test of time. While it has a steeper learning
+curve than most other editors, it is incredibly powerful. *It also happens to be
+my editor of choice*.
+
+Most Unix machines (Linux/Mac) will have base vim pre-installed. To start it, open
+your terminal application, type `vim`, and hit `Enter`. To exit, type `:` (Shift + ;),
+release, type `q`, release, then hit `Enter`. This is typically written
+as `:q`. For more instructions on how to use vim, open vim and run `:help tutor`.
+
+I personally use a newer fork of vim called neovim, if you are curious about it,
+here is a link to the [repository](https://github.com/neovim/neovim),
+which includes guides and installation instructions.
+
+
+## Emacs
+
+Emacs is the favorite of a number of professors. Similar to vim, it is an 
+incredibly powerful tool with a long history and tons of customization. 
+It also has a fairly steep learning curve, but is equally rewarding. You 
+can install Emacs [here](https://www.gnu.org/software/emacs/download.html).
+
+{% endblock %}