Space-lua flexbox columns

Lua
1

I’m interested in developing multi-column layouts, inspired by Notions use of columns. I’ve created an initial widget which displays columns of content based on CSS flexbox, which is really intuitive. Though it got me thinking.

  1. Is there a neater way to implement this when incorporating sizable amounts of content in columns?
  2. How might I pass a reference to a page and render its content in a column?
  3. How could I render a flexbox layout of pages as an alternative to the standard HTML table? (any advice/examples appreciated here).
  4. I stumbled across the contenteditable attribute which got me thinking it would be interesting to implement a Notion-style database (direct editing of columns) where each cell is a page of content - click to edit/create. Again, any advice/examples/pointers appreciated here.

Existing widget below.

```space-style
.row {display: flex;flex-direction: row;flex-wrap: wrap;width: 100%;}
.column {display: flex;flex-direction: column;flex-basis: 100%;flex: 1;}
```

```space-lua
function columns(cols)
  -- Create the flexbox layout
  for i,v in ipairs(cols) do
    cols[i] = '<div contenteditable="true" class="column">'..v ..'</div>';
  end
  thehtml = '<div class="row">'..table.concat(cols)..'</div>'
  ---Build the widget
  return widget.new {
    html=thehtml;
    display="block";
    cssClasses={"my-cols"},
    events={
      click=function()
        editor.flashNotification("You column clicked: " .. text)
      end
    }
  }
end
```

Inline widget
${columns({"First", "Second", "<b>Third</b>"})}

Displays as

screenshot-592104324
screenshot-5921043242337×137 4.12 KB

Edit by @zef: Going to help you a bit with formatting here.

2

Thank you for experimenting with this. I don’t have answers to everything, but a few things:

  1. you can pass in a page reference as a string (and since strings in Lua can be encoded with [[page name]] this actually looks quite natural), and read its content with space.readPage(pageName)

Another observation is that likely we’ll need to add an abstraction to make rendering “safe” HTML easier from Lua. String concatenation is not going to cut it, because e.g. putting a “<” in one of these arguments is going to break the whole thing.

Perhaps we can have an API like (pseudo code):

h.div {
   class="row",
   "Body content"
}

That would render to <div class="row">Body content</div> but would do proper HTML entity encoding etc. This is where Lua’s meta tables can be leveraged nicely (like a metatable on h, using __index so that we don’t have to predefine all HTML elements in existence).

3

Thanks Zef,
Re: page reference as a string
That’s great to know.

RE: API
The pseudo code looks pretty intuitive, though I wonder if innerHTML (drawing from DOM terminology) would better communicate what’s going on under the hood.

h.div {
   class="row",
   innerHTML =  "Body content"
}

I’ll keep playing!

Out of interest, where is the code which generates the HTML table output defined, in something like this:

{{{page select name, tags }}}
4
1 Like