Fixing url to include https if not provided to prevent relative links, adding tree command, adding nightowl theme

Author: Jaredk3nt

.gitignore

@@ -0,0 +1 @@
+.vercel

README.md

@@ -14,19 +14,20 @@ A homepage disguised as a toy terminal!
 
 Here are the currently available commands that can be run on the terminal.
 
-| Command  | usage                        | description                                                    |
-| -------- | ---------------------------- | -------------------------------------------------------------- |
-| `ls`     | `ls [<path to dir>]`         | List children of current working directory or given directory. |
-| `cd`     | `cd [<path>]`                | Move into given directory. If no path given move to root.      |
-| `open`   | `open <path to link>`        | Open a link in a new tab.                                      |
-| `touch`  | `touch <path to link> <url>` | Create a new link                                              |
-| `mkdir`  | `mkdir <path to dir>`        | Create a new directory                                         |
-| `rm`     | `rm <path to link>`          | Delete link                                                    |
-| `rmdir`  | `rmdir <path to dir>`        | Delete dir and all contents                                    |
-| `search` | `search "<search string>"`   | Search google with search. Must be in quotes.                  |
-| `clear`  | `clear`                      | Clear the terminal of past commands.                           |
-| `theme`  | `theme [<theme name>]`       | Change theme.                                                  |
-| `help`   | `help [<command>]`           | Get information on commands.                                   |
+| Command  | usage                        | description                                                                       |
+| -------- | ---------------------------- | --------------------------------------------------------------------------------- |
+| `ls`     | `ls [<path to dir>]`         | List children of current working directory or given directory.                    |
+| `tree`   | `tree [<path to dir>]`       | Lists all children of current working directory or given directory in tree format |
+| `cd`     | `cd [<path>]`                | Move into given directory. If no path given move to root.                         |
+| `open`   | `open <path to link>`        | Open a link in a new tab.                                                         |
+| `touch`  | `touch <path to link> <url>` | Create a new link                                                                 |
+| `mkdir`  | `mkdir <path to dir>`        | Create a new directory                                                            |
+| `rm`     | `rm <path to link>`          | Delete link                                                                       |
+| `rmdir`  | `rmdir <path to dir>`        | Delete dir and all contents                                                       |
+| `search` | `search "<search string>"`   | Search google with search. Must be in quotes.                                     |
+| `clear`  | `clear`                      | Clear the terminal of past commands.                                              |
+| `theme`  | `theme [<theme name>]`       | Change theme.                                                                     |
+| `help`   | `help [<command>]`           | Get information on commands.                                                      |
 
 ## Theming
 
@@ -62,10 +63,10 @@ Your TermPage file structure is stored in your browsers LocalStorage, if you enc
 - `edit` command for changing urls
 - `mv` to rename dir and link names
 - `export` and `import` for sharing your file structure with other machines
-- Tree view for `ls`, and url view for `ls`
+- ~~Tree view for `ls`, and url view for `ls`~~
 - Add flags for search to change search engine
 - Tab complete for commands and paths
 
 ### Themes
 
-- NightOwl
+- ~~NightOwl~~

src/cli.js

@@ -5,7 +5,15 @@ const types = {
   LINK: "link",
   DIR: "directory",
 };
-const THEMES = ["dark", "light", "laserwave", "nord", "greyscale", "dracula"];
+const THEMES = [
+  "dark",
+  "light",
+  "laserwave",
+  "nord",
+  "greyscale",
+  "dracula",
+  "nightowl",
+];
 const COMMANDS = {
   ls: { func: joinWriter(list, listWriter), help: "usage: ls [<path to dir>]" },
   cd: { func: joinWriter(cd, textWriter), help: "usage: cd [<path>]" },
@@ -33,6 +41,10 @@ const COMMANDS = {
     func: joinWriter(search, textWriter),
     help: 'usage: search "<search string>"',
   },
+  tree: {
+    func: joinWriter(tree, treeWriter),
+    help: "usage: tree",
+  },
 };
 const WEEK_DAYS = [
   "monday",

src/commands.js

@@ -66,8 +66,12 @@ function touch(input) {
     const path = input[0].split("/");
     const url = input[1]; // TODO: ensure conforms to URL
     try {
+      let finalUrl = url;
+      if (!/^http|https:\/\//.test(url)) {
+        finalUrl = "https://" + url;
+      }
       const target = locatePath(path.slice(0, path.length - 1));
-      target[path[path.length - 1]] = url;
+      target[path[path.length - 1]] = finalUrl;
       writeLinks();
       return;
     } catch (err) {
@@ -172,3 +176,19 @@ function search(input) {
   }
   return COMMANDS.search.help;
 }
+
+function tree(input) {
+  try {
+    let target = links;
+    if (input.length) {
+      const path = input[0].split("/");
+      target = locatePath(path);
+    }
+    if (locationType(target) !== types.DIR) {
+      return `no such dir: ${input[0]}`;
+    }
+    return target;
+  } catch (err) {
+    return err;
+  }
+}

src/writers.js

@@ -27,7 +27,7 @@ function textWriter(output = "") {
   terminal.appendChild(outputNode);
 }
 
-function ulWriter(output = '') {
+function ulWriter(output = "") {
   // TODO: simplify these cases together
   if (Array.isArray(output)) {
     // Simple ul
@@ -61,3 +61,34 @@ function ulWriter(output = '') {
     textWriter(output);
   }
 }
+
+function treeWriter(output = "") {
+  if (Array.isArray(output)) {
+    listWriter(output);
+  } else if (typeof output === "object") {
+    const terminal = document.getElementById("terminal-content");
+    const outputNode = document.createElement("div");
+    outputNode.classList.add("terminal-output");
+    let inner = "<ul class='tree-list'>";
+    inner = inner + buildNestedList(output, []).join("") + "</ul>";
+    outputNode.innerHTML = inner;
+    terminal.appendChild(outputNode);
+  } else {
+    textWriter(output);
+  }
+}
+
+function buildNestedList(cursor, list) {
+  Object.entries(cursor).map(([key, value]) => {
+    if (locationType(value) === types.DIR) {
+      list.push(
+        `<li class="tree-list-item directory">${key}<ul class="tree-list">`
+      );
+      buildNestedList(value, list);
+      list.push("</ul></li>");
+    } else {
+      list.push(`<li class="tree-list-item">${key}</li>`);
+    }
+  });
+  return list;
+}

styles.css

@@ -1,5 +1,3 @@
-
-
 body {
   width: 100vw;
   height: 100vh;
@@ -24,10 +22,11 @@ body {
   --listTitle: var(--fg);
 
   --fontSize: 13px;
-  --fontFamily: 'Source Code Pro', monospace;
+  --fontFamily: "Source Code Pro", monospace;
 }
 
-body.dark { }
+body.dark {
+}
 
 body.light {
   --body-bg: #f3f3f3;
@@ -84,6 +83,17 @@ body.greyscale {
   --listTitle: var(--fg);
 }
 
+body.nightowl {
+  --body-bg: #00101d;
+  --bg: #011627;
+  --fg: #d6deeb;
+  --directory: #ffcb8b;
+  --prompt: #c792ea;
+  --cursor: var(--prompt);
+  --listItem: var(--fg);
+  --listTitle: var(--fg);
+}
+
 #terminal {
   background-color: var(--bg);
   box-sizing: border-box;
@@ -162,3 +172,27 @@ body.greyscale {
   margin: 0px;
   padding: 0em 1em;
 }
+
+.tree-list {
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+.tree-list .tree-list {
+  margin: .1em 0em;
+  padding: 0em 0.5em;
+  border-left: 1px solid var(--fg);
+}
+
+.tree-list-item {
+  color: var(--fg);
+}
+
+.tree-list .tree-list .tree-list-item {
+  padding: .1em 0.5em;
+}
+
+.tree-list-item.directory {
+  color: var(--directory);
+  padding: 0.25em 0em;
+}