Sheath

[verti-go]

Once a panel page is created users should be able to alter css using browser dev tools. Once css is altered they should be able to save those styles.

---

The mutation observer API can be used to listen for changes to elements.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Still need to think through all the details of this will work and integrate with editor capabilities and apis for persisting/altering css.

This should probably be built as a stand alone module/api that can interface with anything not just panel pages.

---

Sheath module manages this.

At the moment there are really to css files.

Architecture

Layout

NEW Layout specific css. I think this can probably just be managed by extensions. There is an argument here for allowing multiple css files. For example, users might have a shared layout css file and dedicated page layout css file. Might want to keep them separate. Layout css an probably mostly be managed in an extension or spearhead shell global file. Although that doesn't make it possible for users to alter these styles from outside a code base.

Panel Page Props

The panel page props css file is an optional css.json file specified by the user. This is unrestricted and can be hosted anywhere. At the moment they are placed inside the media/ prefix in s3. The media/ prefix has an event that triggers a lambda to convert css media files to css.json files. This is one of the major advantages of using s3 to storage the files. The downside is this file is cached. So any changes need to change the file name than the file needs to be updated. It would be nice to figure out a more development friendly way without needing to upload new files and change the panel page css file each time.

There is the option of creating a dedicated public bucket and using http.get() via the https:// s3 url. I'm leaning in this direction. The css file doesn't have to be behind a https:// cloudfront cdn like media currently is. Instead there can be a public bucket with prefixes per app like the releases architecture. We could also just make it easier to sign urls without crud. This would also be useful for other things as well like rest request auto signing. The original intention was though that any css file url could be added to cssFile prop in panel pages. The cssFile didn't need to necessarily be in aws. panel pages could have dynamic css files using params and crud like persistence. I think that is probably an overkill though.

Create new PUBLIC buckets on prod & dev?

• druid-dev-assets
• druid-prod-assets

Update verti-go convert_media lambda serverless configuration to listen for .css files in each of those. I think that can be done by simply using media prefix again actually.

Sheath

Sheath + PanelPage system provides a managed css file. The managed css file *can have a dedicated storage location like s3. These styles override the panel page styles since they are applied directly to matching elements inside the dev tools console. Styles that need to be applied to a group of elements should go inside the panel pages cssFile. Styles that effect specific elements should be added within the dev tools triggering the persistence of the managed css file.

The origin of sheath is a layer that lays on top of an existing web page and automatically saves changes made to the css to the dom. This model could also be extended to other changes as well like adding attributes such as css class names to more easier target elements in optional panel page css file.

Workflow

It would be nice to enable developers to connect directly to their s3 bucket via vs code. When changes are made the saves immediately happen on s3 and are available for preview upon page refresh. There could even be a websocket involved that automatically updates the page or refreshes it somehow.

At the moment I need to upload the file again and again when changes are made. This really sucks. It becomes even worse user experience when caching is involved because the file name must change. When the file name changes the panel page css file name must be saved on the panel page form and resaved. I would like to streamline this entire thing for rapid customization of pages using css.

The other part of the workflow would be just modifying elements in the dev tools editor. Those changes would automatically persist to the dedicated css resources for sheath. This roughly functions but needs more refinement to be a production ready tool to attack page customization effectively and efficently.

AWS has a vscode toolkit that allows direct edit for s3 files form the server. This would be perfect for the cssFile.

https://docs.aws.amazon.com/toolkit-for-vscode/latest/userguide/s3-service.html

The AWS toolkit works perfectly with cloudfront caching disabled on media distribution. Files on s3 can be opened, edited and saved all within vscode. When a .css file is saved the comversion to .css.json is nearly instant. The page can be refreshed in the browser immediately showing the changes. Perfect. Although in production the caching would be fine. I think this makes a case for having people work in dev and promote to prod. I think we probably need something like that anyway.

---

This has evolved from css to classes, inputs, outputs, and possibly inline events.

https://github.com/ng-druid/platform/wiki/Sheath-Architecture

---

Now that apps are independent angular repos I think it might be interesting to investigate other style options like utility first css.

Utility-first frameworks provide a low-level utility class to build out custom designs within your HTML file. Utility classes are named according to their intended purpose, such that they're easily understandable to the average person. The primary purpose of the class . bg-white is to add a background color of white.

I think utility first css like tail wind makes a log of sense for customizing content that has already been laid out on the page.

For example, creating utility classes for font styles inside the styles.scss file or having a separate styelsheet and pulling it into styles.scss. This makes a lot of sense when the user is a programmer and has access to the code base. Where as sheath makes more sense for non programmers without access to the code base. Using utility classes inside styles.scss in the project is more predictable than sheath or a custom css file due to the way the matching is done in javascript. This method is really meant to overrride styles that would otherwise be difficult to override in the style file like material component styles.

[verti-go]

Add field panel page props for css file(s).

The ui can support a single css file but the data model should probably support multiples.

The data model might even need to be a an object that allows extension with additional props and settings. perhaps...

I'm not really sure yet.

Seems logical to make it a object that can easily be changed rather than an array which would break backward compatibility.

[verti-go]

The foundation for this feature has been merged into master.

Panel pages can now be saved with a css file that will be applied when the panel page is rendered.

This currently requires a json version of the css file.

When a css file is placed inside the media directory on the cdn a back-ground process is kicked of that runs an node lambda to convert the css file to json. This file can that be loaded by the front-end without the added cost of doing that work in the client.

[verti-go]

I would still like to investigate and evaluate options for altering css directory in the browser and saving the css file all in the background.

[verti-go]

Example:

https://dpxmq1mxvsyda.cloudfront.net/css-file-test-v1

css:

.panel-0 .pane-0 h1 {
  background-color: red;
}

.panel-0 .pane-0 {
  background-color: black;
}

.panel-1 .pane-0 .panel-page .panel-0 .pane-0 p {
  background-color: green;
}

.panel-3 .pane-0 div {
  background-color: yellow;
}

.panel-4 .pane-0 div {
  background-color: gray;
}

.panel-5 .pane-0 div {
  background-color: orange;
  color: blue;
}

[windbeneathyourwings]

The module sheath has been added to druid. The sheath module users mutation observer to respond to css changes of dom elements and notify listeners of changes. The listeners can than implement handlers to save the data. This is currently being done inside render panel page component. However, more work is needed to make this a production ready feature.

[ng-druid]

This is a good guide on how to set-up tail wind with Angular including adding to webpack build.

https://trungk18.com/experience/configure-tailwind-css-with-angular/