wip ui updates

importmap.json

@@ -3,6 +3,7 @@
     "@socketsupply/tonic": "npm:@socketsupply/tonic",
     "@socketsupply/components": "npm:@socketsupply/components",
     "@socketsupply/components/dialog": "npm:@socketsupply/components/dialog",
-    "@socketsupply/indexed": "npm:@socketsupply/indexed"
+    "@socketsupply/indexed": "npm:@socketsupply/indexed",
+    "marked": "file://node_modules/marked/marked.min.js"
   }
 }

package.json

@@ -9,12 +9,12 @@
     "type": "git"
   },
   "devDependencies": {
+    "esbuild": "^0.20.0",
     "monaco-editor": "^0.46.0",
+    "standard": "^17.1.0",
     "xterm": "^5.3.0",
     "xterm-addon-fit": "^0.8.0",
-    "xterm-addon-search": "^0.13.0",
-    "esbuild": "^0.20.0",
-    "standard": "^17.1.0"
+    "xterm-addon-search": "^0.13.0"
   },
   "scripts": {
     "build": "ssc build -r -o",
@@ -24,9 +24,10 @@
   "author": "Socket Supply Co. <[email protected]>",
   "license": "MIT",
   "dependencies": {
+    "@socketsupply/components": "^14.1.0",
     "@socketsupply/indexed": "^1.0.3",
+    "@socketsupply/socket": "^0.5.4",
     "@socketsupply/tonic": "^15.1.2",
-    "@socketsupply/components": "^14.1.0",
-    "@socketsupply/socket": "^0.5.4"
+    "marked": "^12.0.2"
   }
 }

socket.ini

@@ -84,6 +84,7 @@ node_modules/@socketsupply/components = node_modules/@socketsupply/components
 node_modules/@socketsupply/indexed = node_modules/@socketsupply/indexed
 node_modules/@socketsupply/tonic = node_modules/@socketsupply/tonic
 node_modules/@socketsupply/socket = node_modules/@socketsupply/socket
+node_modules/marked = node_modules/marked
 node_modules/@socketsupply/socket-darwin-arm64 = node_modules/@socketsupply/socket-darwin-arm64
 
 

src/components/account.js

@@ -19,6 +19,8 @@ class DialogAccount extends TonicDialog {
 
   async handleResponse (event) {
     const iframe = this.querySelector('iframe')
+
+    // if this isnt a message from the iframe, ignore it
     if (event.source !== iframe.contentWindow) return
 
     const app = this.props.app

src/components/editor.js

@@ -617,7 +617,7 @@ class AppEditor extends Tonic {
         }
       }
 
-      coTabs.state.editingTabId = coTabs.tab.id
+      coTabs.state.editingTabId = coTabs.tab?.id
     })
 
     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {

src/components/project.js

@@ -481,11 +481,11 @@ class AppProject extends Tonic {
       const projectNode = this.getProjectNode(node)
       const coImagePreview = document.querySelector('view-image-preview')
       const coProjectSummary = document.querySelector('view-project-summary')
-      const coHome = document.querySelector('view-home')
+      // const coHome = document.querySelector('view-home')
 
       coImagePreview.hide()
       coProjectSummary.hide()
-      coHome.hide()
+      // coHome.hide()
 
       // Check if the project has changed, refresh the props component
       if (this.state.currentProjectId !== projectNode.id) {
@@ -507,7 +507,7 @@ class AppProject extends Tonic {
       if (node.isDirectory) return
 
       if (projectNode.id === 'home') {
-        coHome.show()
+        // coHome.show()
         return
       }
 
@@ -616,7 +616,7 @@ class AppProject extends Tonic {
       children: []
     }
 
-    tree.children.push({
+    /* tree.children.push({
       id: 'home',
       parent: tree,
       selected: oldChild?.selected ?? 0,
@@ -626,7 +626,7 @@ class AppProject extends Tonic {
       label: 'Home',
       nonMovable: true,
       children: []
-    })
+    }) */
 
     const readDir = async (dirPath, parent) => {
       let entries = []

src/css/component-project.css

@@ -84,7 +84,6 @@ app-project .item .node-data .label {
   line-height: 22px;
   letter-spacing: 0.8px;
   font-family: var(--tonic-body);
-  font-weight: 100;
 }
 
 app-project[dragging] {

src/css/index.css

@@ -38,8 +38,8 @@ tonic-accordion h3 {
   margin: 16px 14px 6px;
   color: var(--tonic-primary);
   font-family: var(--tonic-body);
-  font-weight: 100;
   font-size: 14px;
+  font-weight: 400;
 }
 
 #inputs {
@@ -206,3 +206,62 @@ header.component#header-project {
 #split-main tonic-split-right {
   overflow: auto;
 }
+
+/* Tables */
+
+table {
+  width: 100%;
+  text-align: left;
+  border-collapse: collapse;
+  border: 1px solid var(--tonic-border);
+  margin: 20px 0;
+}
+
+table code {
+  padding: 2px 4px;
+  border-radius: 4px;
+  background-color: var(--tonic-background) !important;
+  color: var(--tonic-primary) !important;
+  border: 1px solid var(--tonic-border);
+}
+
+th {
+  font: 13px/16px var(--tonic-subheader);
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+  padding: 12px 10px;
+  background-color: var(--tonic-background);
+  border-bottom: 1px solid var(--tonic-border);
+  border-right: 1px solid var(--tonic-border);
+  color: var(--tonic-info);
+}
+
+td {
+  line-height: 22px;
+  padding: 10px;
+  border-bottom: 1px solid var(--tonic-border);
+}
+
+td:not(:first-of-type) {
+  border-left: 1px solid var(--tonic-border);
+}
+
+tr:last-of-type td {
+  border-bottom: 0;
+}
+
+td:last-of-type {
+  border-right: 0;
+}
+
+@media (max-width: 699px) {
+  body table {
+    display: block;
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+    margin: 20px 0;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+}

src/css/tonic-overrides.css

@@ -71,7 +71,7 @@ tonic-accordion-section .tonic--accordion-header button .tonic--label {
   font-family: var(--tonic-body);
   padding: 14px;
   color: var(--tonic-info);
-  font-weight: 100;
+  font-weight: 400;
 }
 
 tonic-accordion-section .tonic--accordion-header button[aria-expanded="true"] .tonic--label {

src/css/view-home.css

@@ -40,31 +40,13 @@ view-home .content {
   overflow: scroll;
 }
 
-view-home h1 {
-  font-family: var(--tonic-body);
-  text-transform: uppercase;
-  font-size: 38px;
-  margin-top: 0;
-  font-weight: 100;
-  white-space: nowrap;
-}
-
-view-home h1 b {
-  font-family: var(--tonic-header);
-  text-transform: uppercase;
-  font-size: 38px;
-  font-weight: 900;
-}
-
-
 view-home h2 {
   text-transform: uppercase;
   border-bottom: 1px solid;
   color: var(--tonic-info);
   margin-bottom: 4px;
   padding: 2px 0;
   font-family: var(--tonic-body);
-  font-weight: 100;
 }
 
 view-home .panel-label {
@@ -117,3 +99,29 @@ view-home tonic-profile-image {
   border: 1px solid var(--tonic-border);
   border-radius: 4px;
 }
+
+/* Docs */
+
+#docs-content {
+  a {
+    color: var(--tonic-primary);
+    text-decoration: none;
+    border: none;
+  }
+
+  h1, h2, h3 {
+    text-transform: uppercase;
+  }
+
+  h1 {
+    font-size: 32px;
+    font-weight: 400;
+  }
+
+  pre {
+    padding: 8px;
+    border: 1px solid var(--tonic-border);
+    background-color: var(--tonic-dark);
+    border-radius: 6px;
+  }
+}

src/css/view-image-preview.css

@@ -39,7 +39,6 @@ view-image-preview .bottom h2 {
   border-bottom: 1px solid var(--tonic-info);
   font-size: 14px;
   text-transform: uppercase;
-  font-weight: 100;
   color: var(--tonic-info);
 }
 

src/css/view-project-summary.css

@@ -16,7 +16,6 @@ view-project-summary h2 {
   font-size: 20px;
   text-transform: uppercase;
   color: var(--tonic-info);
-  font-weight: 100;
 }
 
 view-project-summary header span {

src/index.html

@@ -5,8 +5,8 @@
     <meta
       http-equiv="Content-Security-Policy"
       content="
-        connect-src socket: npm: https: http: blob: ipc: wss: ws: ws://localhost:*;
-         script-src socket: npm: node: https: http: blob: http://localhost:* 'unsafe-eval' 'unsafe-inline';
+        connect-src socket: npm: https: http: file: blob: ipc: wss: ws: ws://localhost:*;
+         script-src socket: npm: node: https: file: http: blob: http://localhost:* 'unsafe-eval' 'unsafe-inline';
          worker-src socket: https: http: blob: 'unsafe-eval' 'unsafe-inline';
           frame-src socket: https: http: blob: http://localhost:*;
             img-src socket: https: http: blob: data: http://localhost:*;