Docs/v1.0

.github/workflows/build.yml

@@ -13,7 +13,7 @@ jobs:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        os: [ubuntu-latest, windows-latest, macos-latest]
+        os: [ubuntu-latest, windows-latest]
     permissions:
       contents: write
 
@@ -34,12 +34,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build Mac x64
-        if: matrix.os == 'macos-latest'
-        run: npx electron-builder --mac --x64
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
       - name: Upload Release
         uses: softprops/action-gh-release@v1
         with:

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
-test
+test
+.idea

README.md

@@ -0,0 +1,27 @@
+<h1 align="center">WebBox</h1>
+
+---
+
+![WebBox Logo](./resources/banner/banner.png)
+
+WebBox is an interactive code editor focused on web development, providing live window updates.
+
+---
+
+* [Create a File](./docs/CreateFile.md)
+* [Open a File](./docs/OpenFile.md)
+* [Save a File](./docs/SaveFile.md)
+* [Viewer Windows](./docs/ViewerWindows.md)
+* [Shortcuts](./docs/Shortcuts.md)
+* [Customize Colors](./docs/CustomColors.md)
+
+---
+
+Developed as a school project by **Ethan Mahlstedt**
+
+---
+
+Want to help? Send me a [mail](mailto:ethan.mahlstedt@hotmail.com)
+
+---
+<p style="font-size: 10px">Last modified at 13/05/25 by Ethan Mahlstedt; v1.0.0-rc2 </p>

docs/CreateFile.md

@@ -0,0 +1,28 @@
+###### Go back to [index](../README.md)
+
+---
+
+# Create File
+
+### Shortcut `Ctrl + N`
+
+---
+
+WebBox can create files using the built-in file creation function. The **"Create File"** function is capable of creating files based of presets saved on the `filePresets` folder.
+
+<div align="center">
+    <img src="../resources/docs/fileCreation/FileCreationWindow.png" alt="Create File Dialog" align="center"/>
+</div>
+
+---
+
+Filename **must** include extension.
+
+---
+
+
+Filename and folder **are mandatory**.
+
+---
+
+<p style="font-size: 10px">Last modified at 12/05/25 by Ethan Mahlstedt; v1.0-rc1 </p>

docs/CustomColors.md

@@ -0,0 +1,17 @@
+###### Go back to [index](../README.md)
+
+---
+
+# Use custom colors
+
+---
+
+If you want to use custom colors, you must edit the files located at `editor/front`.
+
+`editor.css` includes all the editor window color configuration.
+
+`highlighter.css` includes the highlighter color configuration in [highlight.js](https://highlightjs.org/) syntax
+
+---
+
+<p style="font-size: 10px">Last modified at 14/05/25 by Ethan Mahlstedt; v1.0-rc2 </p>

docs/OpenFile.md

@@ -0,0 +1,27 @@
+###### Go back to [index](../README.md)
+
+---
+
+# Open File
+
+### Shortcut `Ctrl + O`
+
+---
+
+To open files, WebBox will prompt you to choose a file that matches the following file types:
+
+* **HTML** (.html, .htm)
+* **JavaScript** (.js, .jsx, .mjs, .cjs)
+* **TypeScript** (.ts, .tsx)
+* **CSS** (.css)
+* **JSON** (.JSON)
+* **Markdown** (.md)
+* **PHP** (.php)
+* **Text Documents** (.txt)
+* **XML** (.xml)
+
+
+
+---
+
+<p style="font-size: 10px">Last modified at 14/05/25 by Ethan Mahlstedt; v1.0-rc2 </p>

docs/SaveFile.md

@@ -0,0 +1,20 @@
+
+###### Go back to [index](../README.md)
+
+---
+
+# Close File
+
+### Shortcut `Ctrl + Q`
+
+---
+
+When closing files, WebBox will prompt you to save the file if it has unsaved changes. You can choose to save the file or discard the changes.
+
+![fileSaveDialog.png](../resources/docs/fileSaving/fileSaveDialog.png)
+
+Whenever a file has unsaved changes, the file name will be displayed in *italic* in the tab bar. This is a visual indicator that the file has unsaved changes.
+
+---
+
+<p style="font-size: 10px">Last modified at 14/05/25 by Ethan Mahlstedt; v1.0-rc2 </p>

docs/Shortcuts.md

@@ -0,0 +1,23 @@
+###### Go back to [index](../README.md)
+
+---
+
+# Shortcuts
+
+---
+
+## Shortcut list
+
+| Shortcut           | Action                              |
+|--------------------|-------------------------------------|
+| `Ctrl + N`         | Create File                         |
+| `Ctrl + O`         | Open File                           |
+| `Ctrl + S`         | Save File                           |
+| `Ctrl + Q`         | Close File                          |
+| `Ctrl + W`         | Open Viewer                         |
+| `Ctrl + Shift + W` | Open Viewer (based on current file) |
+| `Ctrl + R`         | Refresh Viewer                      |
+
+---
+
+<p style="font-size: 10px">Last modified at 14/05/25 by Ethan Mahlstedt; v1.0-rc2 </p>

docs/ViewerWindows.md

@@ -0,0 +1,22 @@
+
+###### Go back to [index](../README.md)
+
+---
+
+# Viewer Windows
+
+---
+
+WebBox has a built-in viewer that allows you to visualize HTML files on a separate window.
+
+The viewer is based of a Chromium browser window, which means that it is capable of using all the features of a modern browser. This includes the ability to use JavaScript and CSS files.
+
+To open the viewer, you can use the **"Open Viewer"** function in the file menu or use the shortcut `Ctrl + W`. If you press the `Shift` Key, the viewer will open a new window off the current opened file (in the case it is a `.html` / `.htm` file), linking the viewer to the file. If not, the viewer will prompt you to pick a valid file type.
+
+In the case you want to refresh the viewer, you can use the **"Refresh Viewer"** function in the file menu or use the shortcut `Ctrl + R`. This will refresh the current opened file in the viewer. In case the current file is not linked to any window, a prompt will show up, showing you all windows.
+
+![WindowPickingDialog.png](../resources/docs/ViewerWindows/WindowPickingDialog.png)
+
+---
+
+<p style="font-size: 10px">Last modified at 14/05/25 by Ethan Mahlstedt; v1.0-rc2 </p>

electron-builder.json

@@ -4,23 +4,23 @@
 	"directories": {
 		"output": "dist"
 	},
-	"files": ["!filePresets/**", "!front/editor/highlighter.css"],
+	"files": ["!filePresets/**", "!front/editor/highlighter.css", "!front/editor/editor.css"],
 	"extraResources": [
 		{ "from": "filePresets", "to": "../filePresets" },
 		{
 			"from": "front/editor/highlighter.css",
 			"to": "../front/editor/highlighter.css"
+		},
+		{
+			"from": "front/editor/editor.css",
+			"to": "../front/editor/editor.css"
 		}
 	],
 	"icon": "resources/icon/icon.png",
 	"win": {
 		"target": "zip",
 		"artifactName": "webbox-${version}-win.zip"
 	},
-	"mac": {
-		"target": "zip",
-		"artifactName": "webbox-${version}-mac-${arch}.zip"
-	},
 	"linux": {
 		"target": "zip",
 		"artifactName": "webbox-${version}-linux.zip"

front/editor/editor.css

@@ -1,3 +1,5 @@
+/* Editor */
+
 html,
 body {
 	height: 100%;
@@ -68,8 +70,7 @@ body {
 .fileDivText {
 	font-family: "Segoe UI";
 	color: white;
-	margin: 0;
-	margin-right: 10px;
+	margin: 0 10px 0 0;
 	white-space: nowrap;
 }
 
@@ -92,26 +93,6 @@ body {
 	color: white;
 }
 
-button {
-	background-color: gray;
-	font-family: Arial;
-	color: black;
-	padding: 5px 10px;
-	border-radius: 5px;
-	border: 1px ridge black;
-	font-size: 16px;
-	font-weight: bold;
-	cursor: pointer;
-	transition:
-		background-color 0.3s ease,
-		color 0.3s ease;
-}
-
-button:hover {
-	background-color: rgb(64, 64, 64);
-	color: white;
-}
-
 #TextAreaContainer {
 	display: flex;
 	width: calc(100% - 2%);
@@ -154,8 +135,6 @@ button:hover {
 	word-wrap: normal;
 	min-height: 100px; /* Ensure it has height */
 	box-sizing: border-box;
-	overflow-x: auto; /* Add horizontal scrollbar */
-	overflow-y: auto; /* Add vertical scrollbar */
 }
 
 #saveDialog {
@@ -258,7 +237,7 @@ textarea {
 
 #fileDirLbl {
 	font-weight: normal;
-	font-size: 12;
+	font-size: 12px;
 	text-wrap: wrap;
 	overflow-wrap: anywhere;
 }

front/editor/editor.html

@@ -14,12 +14,12 @@
 			<button id="openFile">Open</button>
 			<div class="verticalLine"></div>
 			<button id="OpenViewerBtn">Open Viewer</button>
-			<button id="RefreshEditor">Refresh Editor</button>
+			<button id="RefreshEditor">Refresh Viewer</button>
 		</div>
 		<div id="noOpenedFileContainer">
 			<div id="noOpenedFileDialog">
 				<img src="../../resources/icon/icon.png" width="192" height="192" />
-				<h3 id="versionIndicator">WebBox vx.x.x</h3>
+				<h3 id="versionIndicator">WebBox</h3>
 				<h1>No opened file...</h1>
 				<h2>
 					Open one using the "Open" button or create a new one using the "New