Modular•7mo ago

Mog: Style definitions for nice terminal layouts (inspired by charmbracelet/lipgloss)

Mog https://github.com/thatstoasty/mog/tree/main Style definitions for nice terminal layouts. Built with TUIs in mind. Ported from/Inspired by: https://github.com/charmbracelet/lipgloss/tree/master Mog takes an expressive, declarative approach to terminal rendering. Users familiar with CSS will feel at home with Mog.

import mog

fn main():
  var style = mog.new_style() \
      .bold(True) \
      .foreground(mog.Color("#FAFAFA")) \
      .background(mog.Color("#7D56F4")) \
      .padding_top(2) \
      .padding_left(4) \
      .width(22)
  
  print(style.render("Hello, Mojo"))

import mog

fn main():
  var style = mog.new_style() \
      .bold(True) \
      .foreground(mog.Color("#FAFAFA")) \
      .background(mog.Color("#7D56F4")) \
      .padding_top(2) \
      .padding_left(4) \
      .width(22)
  
  print(style.render("Hello, Mojo"))

2 Replies

toastyOP•5mo ago

Mog has been updated for Mojo 24.4! I'll need to start including a changelog, but execution time has improved slightly by incorporating the new bytes buffer and string builder implementation from my other project, gojo. I added a new benchmarks directory for a few example benchmarks in rendering text with styling applied. Currently it just has a simple styling test, layout test (rendering the first image in the readme), and rendering a "large" text file (~4-5MB with 47k+ lines). You can run this on your machine with mojo run benchmarks/run.mojo. That will also format the benchmark reports into a table using the table module from mog! I'm quite happy with the performance so far! I'm seeing around ~140-150ms to render the layout image which fairly quick for all of the components it's rendering and joining together. For the future state, I'm really looking forward to improvements on the compile time front so we can start defining mog styles at comp time. Same with being able to define vars at the file level. Mog has been updated with my upstream changes in the mist, weave, and gojo packages! It is now ~90% faster (on my Mac M2)! The layout render is now taking ~15-16ms instead of ~140-150ms like I stated in the previous update. The changes to mist and weave minimized the number of string to int conversions that were taking place. And weave is making fewer copies of Strings now that I'm using bytes and string slices instead of copying bytes lists around. For gojo, I added a naive function to estimate how long a given character is. For example, emojis would often break the code, something like, 🔥, would have an actual cell length of 2. Same with east asian characters. These are now appropriately being counted as 2 characters, of course YMMV on different systems I have not tested. The Table struct has been cleaned up and a new more complex example has been added! Please check it out here: https://github.com/thatstoasty/mog/blob/main/demos/tapes/pokemon.gif https://github.com/thatstoasty/mog/blob/main/examples/table/pokemon.mojo I've also cleaned up many of the docstrings and examples for the structs/functions intended for the user. I decided to lean on usage of file scope variables for the examples a bit more, even though they break when you run mojo build and try running the compiled binary instead.

toastyOP•3mo ago

New project header! Rendered using mog 🙂 The example layout has also been updated to incorporate colorful grids built all in Mojo. Looks nice, check it out! https://github.com/thatstoasty/mog/blob/main/README.md https://github.com/thatstoasty/mog/blob/main/examples/moogle.mojo https://github.com/thatstoasty/mog/blob/main/examples/layout.mojo

Gaming

Programming

Mog: Style definitions for nice terminal layouts (inspired by charmbracelet/lipgloss)