Update examples, readme, and layout. (#19)

* Add color blocking to layout

* Add color blocking to layout

* updating some of the colors

* add moogle example

* add moogle example

* fix img

* update version

* ran tests

* add changelog

.github/workflows/build.yml

@@ -1,4 +1,4 @@
-name: Build all packages
+name: build
 
 on:
   push:

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: Run Tests
+name: tests
 
 on:
   pull_request:

.gitignore

@@ -173,4 +173,6 @@ output
 .vscode/
 
 # Mojo
-*.mojopkg
+*.mojopkg
+
+.DS_Store

CHANGELOG.md

@@ -0,0 +1,13 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/)
+and this project adheres to [Semantic Versioning](http://semver.org/).
+
+## [Unreleased] - yyyy-mm-dd
+
+## [0.1.6] - 2024-09-13
+
+- Added a Moogle example and revised the readme. Pulled in upstream `mist` and `hue` changes for compatability improvments.
+- Updated the `layout` example to include color grids.

README.md

@@ -1,21 +1,24 @@
 # Mog
 
-![Mojo 24.4](https://img.shields.io/badge/Mojo%F0%9F%94%A5-24.4-purple)
+![Mog example](https://github.com/thatstoasty/mog/blob/update-layout/doc/images/mog.png)
 
-Style definitions for nice terminal layouts. Built with TUIs in mind.
-Ported from/Inspired by: <https://github.com/charmbracelet/lipgloss/tree/master>
+Style definitions for nice terminal layouts.
 
-If you're a Go developer, please check out their CLI tooling and libraries. They're unmatched!
+* Ported from/Inspired by: <https://github.com/charmbracelet/lipgloss/tree/master>
+* If you're a Go developer, please check out their CLI tooling and libraries. They're unmatched!
 
-For bugs and todos, see the bottom of the readme. At the moment, characters with a printable length greater than 1 ARE NOT supported.
+![Mojo Version](https://img.shields.io/badge/Mojo%F0%9F%94%A5-24.5-orange)
+![Build Status](https://github.com/thatstoasty/mog/actions/workflows/build.yml/badge.svg)
+![Test Status](https://github.com/thatstoasty/mog/actions/workflows/test.yml/badge.svg)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
 ## Installation
 
 1. First, you'll need to configure your `mojoproject.toml` file to include my Conda channel. Add `"https://repo.prefix.dev/mojo-community"` to the list of channels.
 2. Next, add `mog` to your project's dependencies by running `magic add mog`.
 3. Finally, run `magic install` to install in `mog` and its dependencies. You should see the `.mojopkg` files in `$CONDA_PREFIX/lib/mojo/`.
 
-![Mog example](https://github.com/thatstoasty/mog/blob/main/doc/tapes/layout.gif)
+![Mog example](https://github.com/thatstoasty/mog/blob/update-layout/doc/images/layout.png)
 
 Mog takes an expressive, declarative approach to terminal rendering.
 Users familiar with CSS will feel at home with Mog.
@@ -419,6 +422,6 @@ Here's an example table rendering!
 - Decompose style render mega function and mega class into smaller ones.
 - It seems like renderer.place_vertical renders whitespace with a width that's too long in the Ubuntu test container. Will need to investigate why this happened. It might be because the execution environment is not necessarily a terminal.
 
-## Notes
+### Check out these other libraries in the Mojo Community!
 
-- ANSI256's support of setting both foreground and background colors is limited. It's possible to set both, but often the foreground color will be ignored.
+- `A Mojo HTTP framework with wings` - [@saviorand/lightbug_http](https://github.com/saviorand/lightbug_http)

examples/layout.mojo

@@ -11,15 +11,43 @@ from mog.whitespace import (
     with_whitespace_foreground,
 )
 import mog
+import hue
 
 
 alias width = 96
 alias column_width = 30
 alias subtle = mog.AdaptiveColor(light=0xD9DCCF, dark=0x383838)
-alias highlight = mog.AdaptiveColor(light=0x874BFD, dark=0x7D56F4)
+alias highlight = mog.AdaptiveColor(light=0x874BFD, dark=0xFF713C)
 alias special = mog.AdaptiveColor(light=0x43BF6D, dark=0x73F59F)
 
 
+fn color_grid(x_steps: Int, y_steps: Int) -> List[List[hue.Color]]:
+    var x0y0 = hue.Color(0xF25D94)
+    var x1y0 = hue.Color(0xEDFF82)
+    var x0y1 = hue.Color(0x643AFF)
+    var x1y1 = hue.Color(0x14F9D5)
+
+    var x0 = List[hue.Color](capacity=y_steps)
+    for i in range(y_steps):
+        x0.append(x0y0.blend_luv(x0y1, Float64(i)/Float64(y_steps)))
+
+    var x1 = List[hue.Color](capacity=y_steps)
+    for i in range(y_steps):
+        x1.append(x1y0.blend_luv(x1y1, Float64(i)/Float64(y_steps)))
+
+    var grid = List[List[hue.Color]](capacity=y_steps)
+    var x = 0
+    while x < y_steps:
+        var y0 = x0[x]
+        grid.append(List[hue.Color](capacity=x_steps))
+        var y = 0
+        while y < x_steps:
+            grid[x].append(y0.blend_luv(x1[x], Float64(y)/Float64(x_steps)))
+            y += 1
+        x += 1
+    return grid
+
+
 fn build_tabs() -> String:
     alias active_tab_border = Border(
         top="─",
@@ -43,7 +71,8 @@ fn build_tabs() -> String:
         bottom_right="┴",
     )
 
-    var tab_style = mog.Style().border(tab_border).border_foreground(highlight).padding(0, 1)
+    alias tab_color = mog.AdaptiveColor(light=0x874BFD, dark=0xFF713C)
+    var tab_style = mog.Style().border(tab_border).border_foreground(tab_color).padding(0, 1)
     var active_tab = tab_style.border(active_tab_border, True)
     var tab_gap = tab_style.border_top(False).border_left(False).border_right(False).border_bottom(True)
 
@@ -60,22 +89,33 @@ fn build_tabs() -> String:
 
 
 fn build_description() -> String:
-    var divider = mog.Style().padding(0, 1).foreground(subtle).render("•")
+    var colors = color_grid(1, 5)
+    var title = StringBuilder()
+    var title_style = mog.Style(value="Mog").margin_left(1).margin_right(5).padding(0, 1).italic(True).foreground(mog.Color(0xFFFDF5))
+
+    for i in range(len(colors)):
+        var offset = 2
+        var c = mog.Color(colors[i][0].hex())
+        _ = title.write_string(title_style.margin_left(i * offset).background(c).render())
+        if i < len(colors) - 1:
+            _ = title.write_byte(ord('\n'))
 
+    var divider = mog.Style().padding(0, 1).foreground(subtle).render("•")
     var url = mog.Style().foreground(special)
     var desc_style = mog.Style().margin_top(1)
     var info_style = mog.Style().border(NORMAL_BORDER, True, False, False, False).border_foreground(subtle)
 
-    return join_vertical(
+    var description = join_vertical(
         position.left,
         desc_style.render("Style Definitions for Nice Terminal Layouts.\nInspired by charmbracelet/lipgloss"),
         info_style.render("From Mikhail" + divider + url.render("https://github.com/thatstoasty/mog")),
     )
+    return join_horizontal(position.top, str(title), description)
 
 
 fn build_dialog_box() -> String:
     var dialog_box_style = mog.Style().alignment(position.center).border(ROUNDED_BORDER).border_foreground(
-        mog.Color(0x874BFD)
+        mog.Color(0xFF713C)
     ).padding(1, 0)
 
     var button_style = mog.Style().foreground(mog.Color(0xFFF7DB)).background(mog.Color(0x888B7E)).padding(
@@ -87,9 +127,9 @@ fn build_dialog_box() -> String:
     ).underline()
 
     var ok_button = active_button_style.render("Yes")
-    var cancel_button = button_style.render("Maybe")
+    var cancel_button = button_style.render("No")
 
-    var question = mog.Style().width(50).alignment(position.center).render("Are you sure you want to eat marmalade?")
+    var question = mog.Style().width(50).alignment(position.center).render("Are you sure you want to deploy?")
 
     var buttons = join_horizontal(position.top, ok_button, cancel_button)
     var ui = join_vertical(position.center, question, buttons)
@@ -118,6 +158,14 @@ fn build_lists() -> String:
     var check_mark = mog.Style().foreground(special).padding_right(1).render("✔")
     var list_done = mog.Style().crossout().foreground(mog.AdaptiveColor(light=0x969B86, dark=0x696969))
 
+    var colors = color_grid(14, 8)
+    var color_style = mog.Style(value="  ")
+    var builder = StringBuilder()
+    for i in range(len(colors)):
+        for j in range(len(colors[i])):
+            _ = builder.write_string(color_style.background(mog.Color(colors[i][j].hex())).render())
+        _ = builder.write_byte(ord('\n'))
+
     var lists = join_horizontal(
         position.top,
         list_style.render(
@@ -131,17 +179,6 @@ fn build_lists() -> String:
                 list_item.render("Pomelo"),
             ),
         ),
-        list_style.width(column_width).render(
-            join_vertical(
-                position.left,
-                list_header.render("Actual Lip Gloss Vendors"),
-                list_item.render("Glossier"),
-                list_item.render("Claire's Boutique"),
-                check_mark + list_done.render("Nyx"),
-                list_item.render("Mac"),
-                check_mark + list_done.render("Milk"),
-            ),
-        ),
         list_style.width(column_width - 1).render(
             join_vertical(
                 position.left,
@@ -155,7 +192,7 @@ fn build_lists() -> String:
         ),
     )
 
-    return join_horizontal(position.top, lists)
+    return join_horizontal(position.top, lists, str(builder))
 
 
 fn build_history() -> String:
@@ -187,7 +224,7 @@ fn build_status_bar() -> String:
 
     var status_key = status_style.render("STATUS")
     var encoding = encoding_style.render("UTF-8")
-    var fish_cake = fish_cake_style.render("Fish Cake")
+    var fish_cake = fish_cake_style.render("🍥 Fish Cake")
     var status_val = status_text_style.width(
         width - get_width(status_key) - get_width(encoding) - get_width(fish_cake)
     ).render("Ravishing")
@@ -206,7 +243,7 @@ fn build_status_bar() -> String:
 fn main():
     # The page style
     var builder = StringBuilder()
-    var doc_style = mog.Style().padding(1, 2, 1, 2).border(ROUNDED_BORDER).border_foreground(subtle)
+    var doc_style = mog.Style().padding(1, 2, 1, 2)
 
     # Tabs.
     _ = builder.write_string(build_tabs())