Added a post about 7GUIs.

Author: gdotdesign

.tool-versions

@@ -1,2 +1,3 @@
 nodejs 20.10.0
 mint 0.26.0
+yarn 1.22.19

assets/examples/7GUIs/TemperatureConverter.mint

@@ -6,8 +6,8 @@ type Field {
 }
 
 component Main {
-  state celsius : Field = Field.Initial("")
   state fahrenheit : Field = Field.Initial("")
+  state celsius : Field = Field.Initial("")
 
   style root {
     white-space: nowrap;
@@ -25,14 +25,12 @@ component Main {
   }
 
   fun toFahrenheit (value : String) {
-    Number.fromString(value)
-    |> Maybe.map(
+    Maybe.map(Number.fromString(value),
       (celsius : Number) { {celsius, Math.round(celsius * (9 / 5) + 32)} })
   }
 
   fun toCelsius (value : String) {
-    Number.fromString(value)
-    |> Maybe.map(
+    Maybe.map(Number.fromString(value),
       (fahrenheit : Number) {
         {fahrenheit, Math.round((fahrenheit - 32) * (5 / 9))}
       })
@@ -56,19 +54,15 @@ component Main {
 
     if String.isEmpty(cleaned) {
       next { celsius: Field.Initial(value) }
+    } else if let Just({celsius, fahrenheit}) = toFahrenheit(cleaned) {
+      next {
+        fahrenheit: Field.Valid(Number.toString(fahrenheit)),
+        celsius: Field.Valid(Number.toString(celsius))
+      }
     } else {
-      case toFahrenheit(cleaned) {
-        Just({celsius, fahrenheit}) =>
-          next {
-            fahrenheit: Field.Valid(Number.toString(fahrenheit)),
-            celsius: Field.Valid(Number.toString(celsius))
-          }
-
-        =>
-          next {
-            fahrenheit: Field.OutOfSync(getValue(fahrenheit)),
-            celsius: Field.Invalid(cleaned)
-          }
+      next {
+        fahrenheit: Field.OutOfSync(getValue(fahrenheit)),
+        celsius: Field.Invalid(cleaned)
       }
     }
   }
@@ -82,19 +76,15 @@ component Main {
 
     if String.isEmpty(cleaned) {
       next { fahrenheit: Field.Initial(value) }
+    } else if let Just({fahrenheit, celsius}) = toCelsius(cleaned) {
+      next {
+        fahrenheit: Field.Valid(Number.toString(fahrenheit)),
+        celsius: Field.Valid(Number.toString(celsius))
+      }
     } else {
-      case toCelsius(cleaned) {
-        Just({fahrenheit, celsius}) =>
-          next {
-            fahrenheit: Field.Valid(Number.toString(fahrenheit)),
-            celsius: Field.Valid(Number.toString(celsius))
-          }
-
-        =>
-          next {
-            celsius: Field.OutOfSync(getValue(celsius)),
-            fahrenheit: Field.Invalid(cleaned)
-          }
+      next {
+        celsius: Field.OutOfSync(getValue(celsius)),
+        fahrenheit: Field.Invalid(cleaned)
       }
     }
   }

assets/ide.js

@@ -23,16 +23,16 @@ const debounce = (callback, wait) => {
 };
 
 export default class Ide {
-  constructor({orientation, onChange, endpoint, value, base, previewHeight} = params) {
+  constructor({orientation, onChange, endpoint, value, base, previewHeight, editorHeight} = params) {
     this.decorations = {};
     this.value = value;
 
-    this.setupDom(base, orientation, previewHeight);
+    this.setupDom(base, orientation, previewHeight, editorHeight);
     this.setupEditor(onChange);
     this.setupClient(endpoint);
   }
 
-  setupDom(element, orientation, previewHeight) {
+  setupDom(element, orientation, previewHeight, editorHeight) {
     const shadow = element.attachShadow({ mode: 'closed' });
 
     let statusBarStyles = "";
@@ -42,7 +42,7 @@ export default class Ide {
     if (orientation == "vertical") {
       ideStyles = `
         grid-template-areas: "status" "editor" "preview";
-        grid-template-rows: auto 1fr ${previewHeight};
+        grid-template-rows: auto ${editorHeight} ${previewHeight};
       `;
 
       statusBarStyles = `

lib/Ide.js

@@ -8,6 +8,9 @@ component Ide {
   // The height of the preview.
   property previewHeight : String = "1fr"
 
+  // The height of the editor.
+  property editorHeight : String = "1fr"
+
   // Whether or not the component is bordered.
   property bordered : Bool = false
 
@@ -30,6 +33,7 @@ component Ide {
       #{this}.ide = new Ide({
         previewHeight: #{previewHeight},
         endpoint: #{@SANDBOX_ENDPOINT},
+        editorHeight: #{editorHeight},
         orientation: #{orientation},
         onChange: #{onChange},
         value: #{value},

source/Components/Ide.mint

@@ -5,13 +5,17 @@ component SimpleIde {
   // The height of the preview.
   property previewHeight : String = "1fr"
 
+  // The height of the editor.
+  property editorHeight : String = "1fr"
+
   // The project to edit.
   property contents : String
 
   // Renders the component.
   fun render : Html {
     <Ide
       previewHeight={previewHeight}
+      editorHeight={editorHeight}
       onChange={Promise.never1}
       orientation={orientation}
       bordered={true}

source/Components/SimpleIde.mint

@@ -0,0 +1,3 @@
+module Data {
+  const POSTS = defer { "7GUIs" => Posts.SEVEN_GUIS }
+}

source/Data/Posts.mint

@@ -52,7 +52,7 @@ module ContentInstrumenter {
   fun instrument (html : Html, skipAnchors : Bool = false) : Html {
     VNode.walk(html,
       (vnode : VNode) {
-        if `!#{vnode}.instrumented` {
+        if `#{vnode} && !#{vnode}.instrumented` {
           case decode VNode.type(vnode) as String {
             Ok("h2") =>
               if skipAnchors {

source/Extra/ContentInstrumenter.mint

@@ -100,7 +100,8 @@ module VNode {
   fun walk (vnode : Html, function : Function(VNode, a)) : Html {
     `
     (() => {
-      if (Array.isArray(#{vnode})) {
+      if (#{vnode} === null || #{vnode} === undefined) {
+      } else if (Array.isArray(#{vnode})) {
         #{vnode}.forEach((item) => #{walk}(item, #{function}))
       } else {
         if (typeof #{vnode} !== "string") {

source/Extra/VNode.mint

@@ -59,6 +59,10 @@ component Main {
             userStatus={UserStatus.Initial}
           /> or <Loader/>
 
+        Article(news, contents) =>
+          <Pages.News.Page news={news} contents={contents}/>
+
+        Articles(news, posts) => <Pages.News.Index news={news} posts={posts}/>
         ExampleIndex(data) => <Pages.Examples.Index data={data}/> or <Loader/>
         FeatureMatrix => <Pages.FeatureMatrix/> or <Loader/>
         FromIndex(data) => <Pages.From.Index data={data}/>