I have a public website with profile pages of people for the general public to see and a separate admin website with user login where people can edit their own profile page.
The profile page is editable on the admin website but should not be editable on the public website and want the admin website to have pretty much the same layout for the profile page but in editing mode.
Editing should happen in place in a WYSIWYG style, and the profile page has a fixed layout of its contents, including a profile picture, a person’s name, some contact info, a teaser text and a longer text section.
Text sections use Markdown with WYSIWYG editing.
The public website should not need to serve code for editing functionality, and I want to keep both websites consistent in terms of layout with minimal effort required to change the layout.
How can I ensure consistency of layouts with minimal effort while avoiding having to serve unnecessary code for editing functions on the public website?
My current approach would be to provide a skeleton component that accepts specific children satisfying particular interfaces and rendering them in the right places.
So I would fill that skeleton with editable components on the admin website and read-only components on the public website, but this still means a lot of duplication regarding the components used to fill into the skeleton.