Integrate Haus as an entity type or Orion Extension

[rwatts3]

I found this cool app called Blaze Haus http://blaze.haus/browse/0/32 . Basically this developer has implemented the ability to create template files on the fly , along with a js file and save the data in a mongo collection. I believe we could do something with this to allow rapid building on the fly.

For instance if a user wants to use Orion Pages, and define the template without having to touch the code I believe we could somehow integrate the magic from Blaze Haus.

I suggest possibly adding orion attributes for froala for the js , html , and css file. Then using a collection we've already defined as the data.json file. Take a look at the project and tell me your thoughts.

Ryan.

P.s. I am willing to help but am not sure if this would be warranted or where to start so guidance is needed.

[nicolaslopezj]

Like a theme-components store in the admin? I like it!

[rwatts3]

Correct. So what are your thoughts on how to integrate. Extension with attributes for html css and json file.

Or something different.

[looshi]

@rwatts3 cool, so you want to allow Orion admins the ability to define their own templates for a given blog post or 'page' ? I don't really understand how Orion works yet, but I can explain a bit more about Blaze Haus and point you in the right direction.
Using this technique inside of a CMS is one of the few practical applications for it, so I think it's cool you want to try it out. I have an ecommerce store hosted with bigcartel.com, and they allow administrators to use Handlebars syntax to customize their store. So, people are doing it and perhaps it will be a common feature of most CMS systems in the future.

[rwatts3]

Hi @looshi ,

Thank you for coming over and joining the discussion. I'll give a brief background about my self , then dig into the integration. I am a CMS Developer for a company called Simpleview in Tucson Arizona, We have a CMS product where we use a core , and extend it to meet the client's needs. I have a lot of background in working with CMS systems, on the contrary we used Coldfusion for a long time so this was my first server side language. With the world moving into the direction of Node.js Meteor.js came to me naturally and has become my desired framework of choice.

With that said, Orion is a simple yet powerful CMS/Admin solution that allows the developer/designer extreme control over customizations and integration, i'll let @nicolaslopezj fill in the rest.

My thoughts in term of the integration would start with the Orion Pages extension. If you look at the pages repository you can see that it is merely just extending the Orion Core with instructions from the API. So the question is where does Haus fit into this scenario. So pages already allow you to create a page, assign a url, and add content to the page via an orion attribute called Froala. So what we would do is create additional orion attributes for Hause, using Froala as a starting point , one for JS , HTML, CSS , and Data.JSON. More specifically I would like to allow the user to use an entity (collection) already assigned to the system as an option if they do not want to build their data.json file.

We can build an extension of Pages and have all these attributes render by default when you create a new page, or we can build the attributes one by one when we define the page type. The choice is open.

[rwatts3]

In terms of an editor I did not look at the full documentation but I'm sure you are using something similar to ace. I am currently working on an Orion attribute similar to froala, and summernote, that will give ace as an option.

[looshi]

@rwatts3 okay, cool.
Blaze Haus is kind of a bloated codebase, due to the fact that it supports reactivity in the Template editor ( multiple users can edit the same template at the same time ) , also it supports a Meta type of Collection, which is kind of weird, this is raw json stored basically as a string and then a client-only Collection is instantiated from it.
If you don't need to support reactivity and the meta-collection "Data.json" , this will greatly simplify the whole process.

As for the helpers -- allowing users to store arbitrary executable code has some pretty significant security implications. Codepen has a great podcast about they do it http://blog.codepen.io/2014/06/05/014-security/#t=12:30 These are some of the things I need to implement on Blaze.Haus . Maybe you don't even need the Helpers JS portion, if you set data context ahead of time, the user can utilize the Spacebars helpers inside their HTML, maybe that's all they need.

Yeah, I think Ace should work fine, I'm using Codemirror, I think they are very similar.

Here's some specific notes about how Blaze Haus works :

Client side : https://github.com/looshi/Blaze-Haus/blob/master/client/views/template-editor/Editor.js#L340 The template render function accepts the html and js helper code as strings, compiles the template, and renders it to a specified dom node. It's actually a few lines of code, and I think it's even easier to do this in the new version of Blaze, but this method works fine too. Notice that I'm appending the helpers to the Global helpers. This is fine for Blaze Haus, but it means these functions essentially bleed into the Global namespace, and they'll overwrite any existing Globals, which causes a lot of serious bugs and probably security problems. I don't know how to scope these to the Template instance, maybe you can figure that out. Or, as I mentioned above you may not even need the Helpers .

You can assign the data context to an existing Collection, or 'entity' as you described. In that case, use Blaze.With() right here , instead of Blaze.View()
https://github.com/looshi/Blaze-Haus/blob/master/client/views/template-editor/Editor.js#L367

inside the HTML , that will set the "this" to whatever collection you specify, so you don't need to pass context back via the helpers. This is how I originally setup Blaze Haus, but then later I added the Data.json so people can mess with it.

The template schema : https://github.com/looshi/Blaze-Haus/blob/master/collections/TemplateCollection.js The collection is pretty straightforward. The code data is stored as Uint8Array , I read on some mongo blog this saves space if you need to store a lot of string data, but you don't need to query it. Supposedly it can save bandwidth too. Honestly, it probably doesn't make that much difference, I just wanted to try it out. there is a library 'pako' which is pretty easy to use to compress the strings : https://github.com/nodeca/pako

[nicolaslopezj]

I like a lot this idea. I was also thinking of this before, but now I have it more clear. The thing I imagine is a website that people can upload pages templates with its javascript and css (or less) code. And people without leaving the admin panel can browse and install them. Maybe have some premium templates (or templates packs) and sell them. This will give orion some money for more profesional development.

[rwatts3]

@nicolaslopezj I believe we were thinking the exact same thing. I was working with a Coldfusion based CMS called Mura CMS. I created a few themes, and allowed the user to edit the theme files within the CMS. This made it so that I could have the theme be sold at a subscription level, and if they didn't like or want the theme they could swap it for a different one.

In this instance by allowing the user to edit a specific page, or entity with a predefined theme would allow them to happily pay a subscription, and customize the theme to their liking. Although this has no direct relation to what we are looking to implement it is a great thing to keep in mind for future development.

Also the mobile app that I am building for a client, they wanted the ability of flexibility , which prompted my previous questions in regards to rendering `{{dict 'someVariable'}} directly within froala. By implementing Haus , this allows me to define a page, and allow the user to go edit what ever they'd like in terms of styling , and rendering of the page and would make for a quick and easy full project build. Use Orion to set the core, and use Haus to extend at the user level requiring minimal development from me or any other developer. @looshi seems very on board with learning the "Orion" way and implementing the logic so I would say this is a great start to a great feature for Orion.

[looshi]

it's kind of similar to wordpress theme workflow ?

[nicolaslopezj]

We will keep the idea, but they should not live in the issues