Container for pagerenderserver

[cmrockwell]

Describe the bug Components cannot be added to the example server site template.

To Reproduce Steps to reproduce the behavior:

1. Go to http://localhost:8080/content/admin/pages/templates/edit.html/path:/content/pagerenderserver/templates/base
2. Drag and drop 'Base Component' unto the page content

Expected behavior I expect a hover zone to highlight indicating a drop zone. After dropping the component on the page, I expect the template content to refresh showing the added component.

Screenshots

Desktop (please complete the following information):

• chrome
• MacOS

Additional context May also affect adding components to a page

[reusr1]

in general the server side rendered container is currently missing the rendering of the placeholder that can be found at [1][2]

the drop target needs to be visible in authoring mode and be of the following form:

<div class="per-drop-target" data-per-path="model.path" data-per-droptarget="true" data-per-location="${LOCATION}">
        text to display
</div>

where ${LOCATION} is one of before/after/into - we also have to make sure the appropriate minimal css for this placeholder to render correctly is added to the general site css and we need to add a mechanism to show/hide the placeholders (editor/preview/live mode)

<style>
    .per-drop-target {
        border: 1px dashed #c0c0c0;
        clear: both;
        padding: 4px;
        margin: 4px;
        text-align: center;
        width: calc(100% - 8px);
        white-space: nowrap;
        text-overflow: ellipsis;
        color: black !important; 
        overflow: hidden;
        font-size: 0.75em;
        background: #f8f8f8e0;
    }
    .per-drop-target-empty {
        font-size: 1.5em;
        height: 3em;
        padding-top: 0.75em;
    }
</style>

[1] https://github.com/headwirecom/peregrine-cms/blob/develop/pagerenderer/vue/ui.apps/src/main/content/jcr_root/apps/pagerendervue/structure/container/template.vue [2] https://github.com/headwirecom/peregrine-cms/blob/develop/pagerenderer/vue/ui.apps/src/main/content/jcr_root/apps/pagerendervue/components/placeholder/template.vue

[cmrockwell]

I tried adding these suggestions. Seems to help with the initial js error I reported in #621. The base template still does not have a container. I don't see how it's added. Tempting to add one to the base/.content.xml Also the html way was added staticly, so the placeholder shows in preview. In past projects, I've used blended vue in serverside htl .html and found they play nice

[ehdatheadwire]

@reusr1 and @cmrockwell to my inexperienced eye, this looks like something we'd want working for the 1.0.0 release. Can you confirm? I don't want to move something that might need to be worked on. Thanks!

[cmrockwell]

it's ok to move it imo... This unit of work for server side rendering could be prepared for 1.0, and I have it working such that a site could have both client and server side pages... but I also don't think that's where the groups priorities or energy are at the moment. So it's fine with me if server side has it's moment in a subsesquent release.

On Fri, Mar 12, 2021 at 6:59 PM, @.***> wrote:

@reusr1 and @cmrockwell to my inexperienced eye, this looks like something we'd want working for the 1.0.0 release. Can you confirm? I don't want to move something that might need to be worked on. Thanks!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[reusr1]

@cmrockwell @ehdatheadwire I think it would be nice to make sure we get server side rendering right again for the 1.0.0 release and start treating it with more attention going forward. Wonder if we should start a project for the server side rendering in general as there are other tickets like https://github.com/headwirecom/peregrine-cms/issues/618 related to this one

[cmrockwell]

@reusr1 I surely would favor a server-side project, and some fixes for 1.0. I have some work that could be contributed for 1.0.

Here is big commit for server-side work related to this ticket from last Dec https://github.com/cmrockwell/peregrine-cms/commit/13e7a076fd18e75d669c8bac2575b043f305b10b

Here is a PR in my fork that does a few things

1. It adds a concept for allowed components given a template. That's needed if sites are to have both server-side and client-side pages, because the component implementation differ between server-side HTL and VueJS. It also may be generally useful to allow and disallow components for templates.
2. It allows typical http page transitions from client-side pages to server-side page. This is important so that production sites having both rendering styles work es expected. Some sites need certain pages to be server-side (HTL), but should be able to get the page speed benefit everywhere else.

Lastly, there another commit for Running server-side Sling Junit tests during the build. https://github.com/cmrockwell/peregrine-cms/commit/48c5575fe342906dcb89f80ce4158ed60046e106