Initial commit: Added project files

iton0 · Dec 1, 2023 · 6cb4781 · 6cb4781
commit 6cb4781
Show file tree

Hide file tree

Showing 9 changed files with 753 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,13 @@
+.eslintrc.js
+.eslintrc.cjs
+.eslintrc.json
+.eslintcache
+node_modules/
+*.log
+*.debug
+.env
+dist/
+build/
+package-lock.json
+package.json
+yarn.lock
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Ihsan Tonuzi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/about.html b/about.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1"
+      shrink-to-fit="no"
+    />
+    <title>About | FolderForge</title>
+    <link rel="icon" type="image/png" href="./img/icon.png" />
+    <link
+      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+      integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9"
+      crossorigin="anonymous"
+    />
+    <link rel="stylesheet" href="custom.css" />
+  </head>
+
+  <body>
+    <header class="container">
+      <nav class="navbar navbar-expand-lg navbar-light">
+        <a class="navbar-brand" href="index.html"
+          ><img src="img/FolderForge.svg" class="logo" alt="FolderForge Logo"
+        /></a>
+        <button
+          class="navbar-toggler"
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#navbarNavAltMarkup"
+          aria-controls="navbarNavAltMarkup"
+          aria-label="Toggle navigation"
+        >
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div
+          class="collapse navbar-collapse justify-content-end"
+          id="navbarNavAltMarkup"
+        >
+          <div class="navbar-nav">
+            <a class="nav-link" href="about.html">About</a>
+          </div>
+        </div>
+      </nav>
+    </header>
+    <div class="container site-content">
+      <div class="singleCol">
+        <h3><i>Issue</i></h3>
+        <p>
+          When planning projects, I often struggled with structuring the file
+          system. Although ASCII folder structure diagrams helped me visualize
+          the organization, the manual creation of directories and files using
+          terminal commands became a hindrance.
+        </p>
+        <hr />
+        <h3><i>Solution</i></h3>
+        <p>
+          To simplify filesystem creation, I conceived FolderForge. This tool
+          not only resolved my challenge but also offers value to developers and
+          programmers working on substantial projects. FolderForge enables the
+          generation of ASCII folder structure diagrams and provides the option
+          to download a zipped version of the converted diagram as a complete
+          custom filesystem.
+        </p>
+        <hr />
+        <h3><i>Getting Involved</i></h3>
+        <p>
+          If you're interested in optimizing your workflow or contributing to
+          the project, feel free to explore the
+          <a href="https://github.com/iton0/folderforge" target="_blank"
+            >FolderForge repository on GitHub</a
+          >. To learn more about me, visit
+          <a href="https://github.com/iton0" target="_blank"
+            >my GitHub profile</a
+          >.
+        </p>
+      </div>
+    </div>
+    <footer>
+      <div class="container text-center">
+        <p class="small">&copy; <span id="year"></span>, FolderForge</p>
+      </div>
+    </footer>
+    <script>
+      document.getElementById("year").innerHTML = new Date().getFullYear();
+    </script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm"
+      crossorigin="anonymous"
+    ></script>
+  </body>
+</html>
diff --git a/custom.css b/custom.css
@@ -0,0 +1,176 @@
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+.site-content {
+  flex: 1;
+}
+
+.logo {
+  width: 100%;
+  max-width: 250px;
+  height: auto;
+}
+
+.navbar {
+  padding: 0.5rem 0rem;
+  border-bottom: 1px solid grey;
+  margin-bottom: 1rem;
+}
+
+.navbar-nav a.nav-link:last-of-type {
+  padding-right: 0;
+}
+
+.masthead {
+  width: 100%;
+  min-height: 60vh;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  margin-bottom: 10px;
+  position: relative;
+}
+
+.black-overlay {
+  display: -webkit-flex;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.2);
+  height: 100vh;
+  align-items: center;
+  text-align: center;
+  display: block;
+  position: absolute;
+  width: 100%;
+}
+
+.content-box {
+  max-width: 750px;
+  margin: 0px auto;
+  color: white;
+}
+
+h1 {
+  font-family: "Fira Code", monospace;
+  font-weight: 400;
+}
+
+.singleCol {
+  max-width: 750px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.potrait-image {
+  float: left;
+  max-width: 200px;
+  margin: 5px 15px 15px 0px;
+}
+
+.btn-toolbar {
+  margin: auto;
+  display: table;
+}
+
+#drag-container {
+  position: relative;
+  box-sizing: border-box;
+  background-color: black;
+  min-height: 60vh;
+  overflow: auto;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  width: 60%;
+  padding: 8px;
+}
+
+.trash {
+  position: absolute;
+  background-color: red;
+  bottom: 0;
+  right: 0;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.trash i {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: #ffffff;
+}
+
+.drag-handle > .fa-folder {
+  display: flex;
+  color: #f4d079;
+  cursor: grab;
+}
+
+.drag-handle > .fa-file {
+  display: flex;
+  color: #f0eee5;
+  cursor: grab;
+}
+
+.folder,
+.file {
+  display: flex;
+  flex: 1 1 50%;
+  max-width: 50%;
+  flex-direction: column;
+}
+
+.folder input.folder-name,
+.file input.file-name {
+  background-color: transparent;
+  font-family: monospace;
+  color: white;
+  border: none;
+  outline: none;
+  font-size: 85%;
+  padding: 5px;
+}
+
+.content {
+  display: flex;
+  flex: 0 0 50%;
+  align-items: center;
+}
+
+.children {
+  display: flex;
+  flex: 0 0 50%;
+  flex-direction: column;
+}
+
+.nesting-bars {
+  display: flex;
+  color: white;
+}
+
+.depth {
+  display: flex;
+}
+
+footer {
+  width: 100%;
+  background-color: lightslategrey;
+  padding: 1rem 0rem;
+  padding-bottom: 1rem;
+  color: white;
+}
+
+footer a {
+  color: lightgray;
+}
+
+footer a:hover {
+  color: white;
+  text-decoration: underline;
+}
diff --git a/forge.js b/forge.js
@@ -0,0 +1,52 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const forgeButton = document.getElementById("forge");
+
+  // Forge button listener
+  forgeButton.addEventListener("click", () => {
+    const dragContainer = document.getElementById("drag-container");
+    const rootElement = dragContainer.querySelector(".folder");
+    const zip = new JSZip();
+
+    if (!rootElement) {
+      alert("Root folder is missing");
+    } else if (rootElement.querySelector(".children").children.length < 2) {
+      alert("Root folder must have at least two elements");
+    } else {
+      const rootName = rootElement
+        .querySelector(".folder-name")
+        .getAttribute("name");
+
+      createFileSystem(zip, rootElement);
+
+      zip.generateAsync({ type: "blob" }).then((blob) => {
+        const zipName = `${rootName}.zip`;
+        saveAs(blob, zipName);
+      });
+    }
+  });
+
+  // File system creation logic
+  function createFileSystem(zip, $parent, basePath = "") {
+    const folderName = $parent
+      .querySelector(".folder-name")
+      .getAttribute("name");
+    const folderPath =
+      basePath === "" ? folderName : `${basePath}/${folderName}`;
+
+    zip.folder(folderPath);
+
+    const children = Array.from($parent.querySelector(".children").children);
+    children.forEach((child) => {
+      if (child.getAttribute("class") === "file") {
+        const fileName = child.querySelector(".file-name").getAttribute("name");
+        zip.file(folderPath + "/" + fileName, "");
+      } else {
+        const childFolderName = child
+          .querySelector(".folder-name")
+          .getAttribute("name");
+        zip.folder(folderPath + "/" + childFolderName);
+        createFileSystem(zip, child, folderPath);
+      }
+    });
+  }
+});
diff --git a/img/FolderForge.svg b/img/FolderForge.svg
diff --git a/img/icon.png b/img/icon.png