vzcode 0.4.0 → 0.6.0

package/dist/assets/index-8d2d4b3b.css

@@ -1 +0,0 @@
-@import"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";@import"https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css";@import"https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css";*{margin:0;padding:0;box-sizing:border-box}::-webkit-scrollbar{width:10px;height:20px}::-webkit-scrollbar-track{background:rgb(41,44,52)}::-webkit-scrollbar-thumb{background:rgb(37,37,38)}::-webkit-scrollbar-thumb:hover{background:#555}:root{--main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace}body{background:rgb(41,44,52);font-family:Poppins,sans-serif;overflow-x:hidden}.tab{width:max-content;height:30px;background:rgb(45,45,45);text-align:center;color:#fff;font-family:var(--main-font-family);justify-content:center;align-items:center;display:flex;padding-left:10px;padding-right:10px;border-top-left-radius:10px;border-top-right-radius:10px;margin-top:5px;margin-left:2px;margin-right:2px;cursor:pointer}.tab.active{background-color:#292c34}.tab-close{display:flex;cursor:pointer;margin-left:5px;justify-content:center;align-items:center}.tab-close:hover{border-radius:30%;background-color:#252526}.editor{position:relative;margin-left:200px;width:100%;height:100%;top:30px;bottom:0;background-color:#292c34;color:#fff;font-family:var(--main-font-family)}.tab-list{position:fixed;display:flex;flex-direction:row;top:0;left:200px;height:35px;width:100%;background:rgb(37,37,38);z-index:100;transition:all .5s ease}.bottom-bar{position:absolute;bottom:0;left:0;height:20px;width:100%;background:rgb(45,45,45);z-index:100;transition:all .5s ease}.sidebar{position:fixed;top:0;left:0;height:100%;width:200px;background:rgb(54,65,89);z-index:100;transition:all .5s ease}.link-name{margin-top:30px;margin-left:10px;color:#9aa0ac;font-size:12px;text-decoration:none}.file{display:flex;flex-direction:row;align-items:center;justify-content:left;width:180px;cursor:pointer;margin-left:10px;color:#dbdde1;border-radius:5px}.full-Box{width:inherit;height:inherit;padding:7px;display:flex;flex-direction:row;align-items:center;justify-content:space-between}.utilities{justify-content:right;margin-right:3px}.noUtils{display:none}.settings{position:absolute;bottom:0;height:30px;width:180px;z-index:100;color:#dbdde1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:14px 0;margin:10px;border-radius:5px}.file:hover,.settings:hover{background-color:#4a5469}.newBTN{justify-content:right;margin-right:10px;cursor:pointer}.themes{color:#252526}.name,.hover-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.name{max-width:200px}.hover-name{max-width:130px}

package/src/settings.jsx

@@ -1,141 +0,0 @@
-import { useState, useCallback } from 'react';
-import Modal from 'react-bootstrap/Modal';
-import Form from 'react-bootstrap/Form';
-import Button from 'react-bootstrap/Button';
-import Select from 'react-select';
-
-// TODO document where this list came from
-// TODO research which themes are available for CodeMirror 6
-const themes = [
-  { value: 'default', label: 'default' },
-  { value: '3024-day', label: '3024-day' },
-  { value: '3024-night', label: '3024-night' },
-  { value: 'abbott', label: 'abbott' },
-  { value: 'abcdef', label: 'abcdef' },
-  { value: 'ambiance', label: 'ambiance' },
-  { value: 'ayu-dark', label: 'ayu-dark' },
-  { value: 'ayu-mirage', label: 'ayu-mirage' },
-  { value: 'base16-dark', label: 'base16-dark' },
-  { value: 'base16-light', label: 'base16-light' },
-  { value: 'bespin', label: 'bespin' },
-  { value: 'blackboard', label: 'blackboard' },
-  { value: 'cobalt', label: 'cobalt' },
-  { value: 'colorforth', label: 'colorforth' },
-  { value: 'darcula', label: 'darcula' },
-  { value: 'duotone-dark', label: 'duotone-dark' },
-  { value: 'duotone-light', label: 'duotone-light' },
-  { value: 'eclipse', label: 'eclipse' },
-  { value: 'elegant', label: 'elegant' },
-  { value: 'erlang-dark', label: 'erlang-dark' },
-  { value: 'gruvbox-dark', label: 'gruvbox-dark' },
-  { value: 'hopscotch', label: 'hopscotch' },
-  { value: 'icecoder', label: 'icecoder' },
-  { value: 'idea', label: 'idea' },
-  { value: 'isotope', label: 'isotope' },
-  { value: 'juejin', label: 'juejin' },
-  { value: 'lesser-dark', label: 'lesser-dark' },
-  { value: 'liquibyte', label: 'liquibyte' },
-  { value: 'lucario', label: 'lucario' },
-  { value: 'material', label: 'material' },
-  { value: 'material-darker', label: 'material-darker' },
-  { value: 'material-palenight', label: 'material-palenight' },
-  { value: 'material-ocean', label: 'material-ocean' },
-  { value: 'mbo', label: 'mbo' },
-  { value: 'mdn-like', label: 'mdn-like' },
-  { value: 'midnight', label: 'midnight' },
-  { value: 'monokai', label: 'monokai' },
-  { value: 'moxer', label: 'moxer' },
-  { value: 'neat', label: 'neat' },
-  { value: 'neo', label: 'neo' },
-  { value: 'night', label: 'night' },
-  { value: 'nord', label: 'nord' },
-  { value: 'oceanic-next', label: 'oceanic-next' },
-  { value: 'OneDark', label: 'One Dark' },
-  { value: 'panda-syntax', label: 'panda-syntax' },
-  { value: 'paraiso-dark', label: 'paraiso-dark' },
-  { value: 'paraiso-light', label: 'paraiso-light' },
-  { value: 'pastel-on-dark', label: 'pastel-on-dark' },
-  { value: 'railscasts', label: 'railscasts' },
-  { value: 'rubyblue', label: 'rubyblue' },
-  { value: 'seti', label: 'seti' },
-  { value: 'shadowfox', label: 'shadowfox' },
-  { value: 'solarized', label: 'solarized' },
-  { value: 'ssms', label: 'ssms' },
-  { value: 'the-matrix', label: 'the-matrix' },
-  { value: 'tomorrow-night-bright', label: 'tomorrow-night-bright' },
-  { value: 'tomorrow-night-eighties', label: 'tomorrow-night-eighties' },
-  { value: 'ttcn', label: 'ttcn' },
-  { value: 'twilight', label: 'twilight' },
-  { value: 'vibrant-ink', label: 'vibrant-ink' },
-  { value: 'xq-dark', label: 'xq-dark' },
-  { value: 'xq-light', label: 'xq-light' },
-  { value: 'yeti', label: 'yeti' },
-  { value: 'yonce', label: 'yonce' },
-  { value: 'zenburn', label: 'zenburn' },
-];
-
-const saveTimes = [
-  { value: 1, label: '1 second' },
-  { value: 5, label: '5 seconds' },
-  { value: 10, label: '10 seconds' },
-  { value: 30, label: '30 seconds' },
-];
-
-export const Settings = ({ show, onClose, setTheme }) => {
-  const handleChange = useCallback((selectedOption) => {
-    setTheme(selectedOption.value);
-  }, []);
-
-  const handleSaveTimeChange = useCallback((selectedOption) => {
-    const time = [{ value: selectedOption.value }];
-    fetch('/saveTime', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(time),
-    });
-  }, []);
-
-  return show ? (
-    <Modal show={show} onHide={onClose} animation={false}>
-      <Modal.Header closeButton>
-        <Modal.Title>Settings</Modal.Title>
-      </Modal.Header>
-      <Modal.Body>
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Username</Form.Label>
-          <Form.Control type="text" placeholder="Enter username" />
-          <Form.Text className="text-muted">
-            Enter a username to be displayed on your cursor
-          </Form.Text>
-        </Form.Group>
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Theme</Form.Label>
-          <Select
-            classvalue="themes"
-            options={themes}
-            onChange={handleChange}
-          />
-          <Form.Text className="text-muted">
-            Select a color theme for the editor
-          </Form.Text>
-        </Form.Group>
-        <Form.Group className="mb-3" controlId="formFork">
-          <Form.Label>Auto-Save Time</Form.Label>
-          <Select
-            classvalue="themes"
-            options={saveTimes}
-            onChange={handleSaveTimeChange}
-          />
-          <Form.Text className="text-muted">Select an auto save time</Form.Text>
-        </Form.Group>
-      </Modal.Body>
-      <Modal.Footer>
-        <Button variant="primary" onClick={onClose}>
-          Done
-        </Button>
-      </Modal.Footer>
-    </Modal>
-  ) : null;
-};

package/src/style.css

@@ -1,215 +0,0 @@
-/* Inspired by: https://www.codinglabweb.com/2021/06/dropdown-sidebar-menu-html-css.html */
-/* Google Fonts Import Link */
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
-@import url('https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css');
-@import url('https://unpkg.com/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css');
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* width */
-::-webkit-scrollbar {
-  width: 10px;
-  height: 20px;
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-  background: rgb(41, 44, 52);
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: rgb(37, 37, 38);
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #555;
-}
-
-:root {
-  --main-font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas,
-    Liberation Mono, monospace;
-}
-
-body {
-  background: rgb(41, 44, 52);
-  font-family: 'Poppins', sans-serif;
-  overflow-x: hidden;
-}
-
-.tab {
-  width: max-content;
-  height: 30px;
-  background: rgb(45, 45, 45);
-  text-align: center;
-  color: #fff;
-  font-family: var(--main-font-family);
-  justify-content: center;
-  align-items: center;
-  display: flex;
-  padding-left: 10px;
-  padding-right: 10px;
-  border-top-left-radius: 10px;
-  border-top-right-radius: 10px;
-  margin-top: 5px;
-  margin-left: 2px;
-  margin-right: 2px;
-  cursor: pointer;
-}
-
-.tab.active {
-  background-color: rgb(41, 44, 52);
-}
-
-.tab-close {
-  display: flex;
-  cursor: pointer;
-  margin-left: 5px;
-  justify-content: center;
-  align-items: center;
-}
-
-.tab-close:hover {
-  border-radius: 30%;
-  background-color: rgb(37, 37, 38);
-}
-
-.editor {
-  position: relative;
-  margin-left: 200px;
-  width: 100%;
-  height: 100%;
-  top: 30px;
-  bottom: 0;
-  background-color: rgb(41, 44, 52);
-  color: #fff;
-  font-family: var(--main-font-family);
-}
-
-.tab-list {
-  position: fixed;
-  display: flex;
-  flex-direction: row;
-  top: 0;
-  left: 200px;
-  height: 35px;
-  width: 100%;
-  background: rgb(37, 37, 38);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.bottom-bar {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 20px;
-  width: 100%;
-  background: rgb(45, 45, 45);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.sidebar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 200px;
-  background: rgb(54, 65, 89);
-  z-index: 100;
-  transition: all 0.5s ease;
-}
-
-.link-name {
-  margin-top: 30px;
-  margin-left: 10px;
-  color: rgb(154, 160, 172);
-  font-size: 12px;
-  text-decoration: none;
-}
-
-.file {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: left;
-  width: 180px;
-  cursor: pointer;
-  margin-left: 10px;
-  color: rgb(219, 221, 225);
-  border-radius: 5px;
-}
-
-.full-Box {
-  width: inherit;
-  height: inherit;
-  padding: 7px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-}
-
-.utilities {
-  justify-content: right;
-  margin-right: 3px;
-}
-
-/* TODO consistent naming "no-utils" */
-.noUtils {
-  display: none;
-}
-
-.settings {
-  position: absolute;
-  bottom: 0;
-  height: 30px;
-  /* TODO overhaul CSS to use Flexbox for entire sidebar */
-  width: 180px;
-  z-index: 100;
-  color: rgb(219, 221, 225);
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 14px 0;
-  margin: 10px;
-  border-radius: 5px;
-}
-
-.file:hover,
-.settings:hover {
-  background-color: rgb(74, 84, 105);
-}
-
-/* TODO consistent naming new-btn */
-.newBTN {
-  justify-content: right;
-  margin-right: 10px;
-  cursor: pointer;
-}
-
-.themes {
-  color: rgb(37, 37, 38);
-}
-
-.name,
-.hover-name {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.name {
-  max-width: 200px;
-}
-
-.hover-name {
-  max-width: 130px;
-}