Split out ZestyExplorer component to multiple components in the top level component directory

The current experience requires the user to click on the TEXT of the content to edit, replace this experience with an "Edit" button for each field in the table.

Add the edit button using the Edit button icon to the left of the content.

When loading explorer on a website that is not register or does not have the correct developer settings and security settings.

Much like the Manager, saves should be made after editing all desired fields not just one field at a time to avoid unnecessary versions of content

Implement this tab style, MUI Tabs

A clean way with a WATCH to develop locally without publishing or pushing to CDNJS, or using the zesty explorer chrome extension.

Document this is the README

Remove path column, have a single column which stacks the title and path

Page Title 
/path/to/page                                                                    Open Button

Page Title 
/path/to/page                                                                    Open Button

Page Title 
/path/to/page                                                                    Open Button

Content may differ from unpublished drafts and edits made in the live editor are not reflected in production which can be confusing for the user.

the ability to install with NPM and run the module from local

• needs local host in cors

Example implementation

import LiveEditor from '@zesty-io/live-editor'

<LiveEditor content={content} />

If the content object is passed.

If content is passed in and they are not authenticated, only show three tabs: Code, Navigator, JSON

Change Code to ignore fields api call if not authenticated.

Give option to authenticate (this requires cors update from zesty backend)

Layout

Split out content viewer tab into explorer, editor, seo, JSX helper, json

jsx help should include the table of code examples alongside the field names and code to click to copy

Top bar

Link to edit Schema

Name the model and item working in.

Links to zesty docs

Table

The table should include columns for reach

Reference Name: title
Parsley: {{this.title}}
JSX React: {content.title}
VUE: {{content.title}}

The models/:zuid/fields endpoint will need to to be accessed in the fetch wrapper to get field information.

When viewport is small, the nav should become a flyout or scroll, use MUI components

dom report

include - h2 h3 h4 h5 p a chars
make dom report table

groudp page meta and global meta

add create head tag button

navigation

change location to bottom of manager link

resource zuid matches page zuid then this is part of the page

group 2 table

page meta start 7
global meta start 8

dom report > table
dom report > add # of chars

2 ..........1
1= edit persmission

• Editing mode?
• Click text to open up editing
• Editing happens one by one with a WYSIWYG editor in left

Open new Window

Buttons should open new window (target _blank)

Naming

Open Content and Open schema? or Go to Content and Go to Schema? or Edit content/schema

I think we also want to pay close attention to the naming. Both buttons Open Manager and Open Schema  open the Manager they just open different sections/apps in the Manager. I don’t have any suggestions as to what to name them though

Red close button resembles the "Delete" button in the UI. This should use the MUI icons for Close instead to keep the branded experience seamless across the UI and this extension. https://mui.com/material-ui/material-icons/?query=close&selected=Close

• Run lighthouse score
• Link to w3c validator https://validator.w3.org/
• CSS validation https://jigsaw.w3.org/css-validator/
• Section 508 compliance https://www.section508.gov/test/web-software/

The body shoudl be scrollable, the zesty link becomes a dropdown with flyout/

Changes

• Readme instructions
• Build files
• jsdeliver url
• Chrome extension name and jsdeliver url in chrome extension package
• npm package name
• nextjs starter npm include

Nav is bleeding outside the container

• It has to embed in the JS bundle
• When npm installed, and include in a react project, the design system cannot collide with the existing react app's design

Bring in theming https://mui.com/material-ui/customization/theming/

Add zesty colors, see example in nextjs project: https://github.com/zesty-io/nextjs-website/blob/main/src/theme/palette.js

Change view port size of website for mobile preview

Have the buttons line up ABOVE the content, they should be lined up to together not stacked.

Shows meta as it is, can edit meta, shows dom report (number of H1s, text of page, links)

Show Meta Data from Zesty

Access only the top level meta.web object, iterate through each into a table format. The goal is to show the user the tags that are available and editable in zesty. Create link to edit like: https://:INSTANCE_ZUID.manager.zesty.io/content/:MODEL_ZUID/:ITEM_ZUID/meta

"type":"item"
"model_name":"homepage"
"model_alternate_name":"Homepage"
"zuid":"7-31209c-g7qsjg"
"createdAt":"2022-03-24 16:27:42"
"updatedAt":"2022-03-24 16:27:41"
"listed":"1"
"version":"316"
"locale":{6 items
"id":"1"
"name":"English (United States)"
"code":"en-US"
"default":"1"
"active":"1"
"enabled":"1"
}
"model":{5 items
"type":"model"
"zuid":"6-31079c-vdg69q"
"name":"homepage"
"label":"Homepage"
"resourceURI":"https://kfg6bckb-dev.webengine.zesty.io/-/instant/6-31079c-vdg69q.json"
}
"web":{12 items
"url":"https://kfg6bckb-dev.webengine.zesty.io/"
"uri":"/"
"fragment":"zesty_home"
"canonical_tag_mode":"1"
"sitemap_priority":"-1.0"
"sitemap_last_updated":"2022-03-24 16:27:41"
"canonical_query_param_whitelist":NULL
"canonical_tag_custom_value":NULL
"seo_link_text":"Homepage"
"seo_meta_title":"Zesty.io: Simplify digital. Maximize results."
"seo_meta_description":"Zesty is built for teams to manage and distribute content to multiple sites, devices, and anywhere else it needs to go."
"seo_meta_keywords":NULL
}
}

Showing loaded from the HTML document

Look through the dom and output the <meta> tags in a separate table.

Opening bad links

use this data https://kfg6bckb-dev.webengine.zesty.io/-/headless/routing.json (but relative to site)

to make a searchable table of title and links, which can be clicked to open that page

meta tags table should show the meta attributes

When running the chrome extension and injecting it, it changes the background color

This experience should load inside the flyout, becuase when not logged in the flyout is empty, it should have the login prompt in the flyout

Currently, there are 2 field type values being output: string, object
Neither of these are field types in the Manager which can be very confusing for the user. The type should be the value of the field type selected in Schema.

the red close button looks a little scary. It resembles the delete button in our UI, that’s initially what I thought it was

For content viewer, organize top level items (not meta) into nice table view:

1. Sticky header table: https://mui.com/material-ui/react-table/#sticky-header
2. With collapsible rows https://mui.com/material-ui/react-table/#collapsible-table
   No pagination needed

Headers

Field Name | Type | Usage | Content Length | Content Example...

• are there any sync / user locks to keep 2 people from cutting versions on top of each other?
• • can we use content lock from the manager app

When loading via CDNJS we dont have the Instance ZUID

If this data is missing ( when not implemted from react loading {content}) it can be accessed off the response object in res.headers.z-zuid

Example fixed app bar from example: https://mui.com/material-ui/react-app-bar/#back-to-top

Example app bar with tabs: https://mui.com/material-ui/react-app-bar/#app-bar-with-responsive-menu

Does not run with NPM, @darwin808 please verify this locally and setup a PR.

You can test with nextjs-website and npm update @zesty-io/explorer

add try catch to handle localhost errors

Move the tabs into the app bar next to logo

Change view port size of website for mobile preview