Feature dcUI - Gadreel/divconq GitHub Wiki
If a page can be indexed:
<dcui Title="N" Index="True">
Then links to the page and on the page need to be followed by Googlebot, so <a href="/dcm/About" ...
If a search result leads a customer to /dcm/About
we need to get them to /dcw/Main#/dcm/About
but if it leads Googlebot (or other search engine) to /dcm/About
we need to keep the url as is. Important that we must be careful because Googlebot can execute JS and therefore could hit our redirect.
Even though we mean to load /dcw/Main first - thus appearing that this is home - for indexing purposes we should point to /dcw/Home. Thus / should equate to /dcw/Home (or the home ovrride) no to /dcw/Main inspite of the apparent extra effort of then loading Main to show Home.
/dcm/Email-2014-12-14
needs to return plain simple code fit for inclusion in email or print. Image and link urls need to be fully expanded.
We need to record page views. even though the location bar says /dcw/Main#/dcm/About
we need to record /dcm/About
. See:
- https://developers.google.com/analytics/devguides/collection/analyticsjs/pages
- https://developers.google.com/analytics/devguides/collection/analyticsjs/single-page-applications
Example URL: /dcm/About
Return the page as completely as possible but without the standard html skeleton
. Instead return a "hidden" version of the page for crawlers and a little javascript that rewrites the URL (location).
Rewritten URL: /dcw/Main#/dcm/About@[uniqueid]
Now the standard html skeleton
is loaded. A key feature of which is "pageContent", which is where Main is loaded but then immediately shows About:
<!DOCTYPE html>
<html>
<head dir="ltr" lang="en">
...
</head>
<body>
<div id="pgMain" data-role="page">
<div data-role="header" id="pageHeader">
<!-- Body Content -->
<div role="main" id="pageMain" class="ui-content">
<div id="pageContent">
</div>
</div>
<div data-role="footer" id="pageFooter">
</div>
<!-- global popup -->
<div data-role="popup" id="puInfo" data-theme="a" class="ui-content" data-overlay-theme="b">
...
<!-- right panel -->
<div data-role="panel" id="rightPagePanel" data-position="right" data-display="reveal" data-theme="a">
...
<!-- left panel -->
<div data-role="panel" id="leftPagePanel" data-position="left" data-display="reveal" data-theme="a">
...
</body>
</html>
If the unique id (after the @) is found after the display URL (e.g. after About) then we try to look it up and us it. If that doesn't exist show just the page (e.g. About).
Back on the server the load of Main looks like: /dcw/Main
and then the load of About looks like /dcm/About?_dcui=dyn&nocache=NNNN
even though browser shows something different for the URL.
On the server we find /dcw/Main.dcui.xml
and /dcm/About.dcui.xml
. Main is returned as HTML but About is returned as JavaScript the second time (the initial request to About is returned as HTML.
- std
- render the page dynamically on server for crawlers but tell the browser to redirect
- html
- useful for creating a static CDN site
- render the page dynamically on server and do not redirect in browser
- only features that work via "attach" mode are present (see
code
mode below)
- clean
- useful for creating a print or an email from
- render the page dynamically on server and do not redirect in browser
- only features that work via "attach" mode are present (see
code
mode below)
- dyn[amic]
- render the pageContent only, do not add skeleton - render dynamically on server
- return as JS
- output is compressed
- code
- render just the functions and return them in "attach" mode meaning these functions attach to current page
- return as JS
- output is compressed
- style
- render the Styles only
- return as CSS
- output is compressed
<dcui Title="N" Index="True" DefaultMode="[std]|html|js" Skeleton="[default]">
<Description />
<Keywords />
<Style ... />
<Header ... />
<Footer ... />
<LeftPanel ... />
<RightPanel ... />
<ScriptLib .. />
<Layout Display="[ScrollDisplay]|FullDisplay|FullScrollDisplay" Class="qname of class to generate content">
HTML / ViewML (Page Content)
</Layout>
<Fragment Id="sect1" Format="md" Locale="">
CDATA content - HTML, MD, BB, etc
</Fragment>
<Function Name="Load">
</Function>
</dcui>
Header, Footer and Panels can be overridden or extended for each page, or use a common block. Main sets the default. PageContent may be in FullDisplay, FullScrollDisplay or ScrollDisplay (normal web scroll) modes.
Additional scripts (ScriptLib) can be loaded with the page. Page not considered fully loaded until all the libs are loaded, then page Load occurs. A ScriptLib is loaded only once for whole site visit.
<dcui Title="N" AuthTags="tag1|tag2|tag3">
If user is logged in they get a "not authorized" message when loading from Main. If not logged in they get redirected to SignIn. If direct link with std
mode then redirect and SignIn. If direct link with html
mode then simply the "not authorized" message.
IncludePart
Use a View Include and View Part, which could be a block from the CMS
PagePart
A part of a page to fill in a hole.
Use a View Include with an identity specific to this page. Generally for editable areas.
Name
- name of the block to use
Type
- content type: MD, BB, HTML
- if present means this block can be edited
Image
and ImageBlock
and SlideBlock
- ImageBlock has a caption too
- SlideBlock has a caption, multiple slides in any order, etc
Path
- use local or CDN URLs (where ever the static web extension - dcm - goes for this domain)
- loads from the static folder (configured in dcm, e.g.
./public/dcw/domain-alias/static
) rather than checking all over the place hunting packages for a path match- Image Path="/Photos/part.png" becomes "https://domain.name.com/dcm/Galleries/Photos/part.png"
- use full URL for email generation
Selector
- name of gallery to select from. for use during live page editing
ImageLink
- use local or CDN URLs
- loads from the static folder (from dcm)
- Image Path="/Photos/part.png" becomes "https://domain.name.com/dcm/Galleries/Photos/part.png"
- use full URL for email generation
FileLink
- use local or CDN URLs
- loads from the static folder (from dcm)
- FileLink Path="/meetings/notes.docs" becomes "https://domain.name.com/dcm/Files/meetings/notes.docs"
- use full URL for email generation
Link
and WideLink
- link to another page if Path
- otherwise assume it will be used with a Click event
Template
is based off Service calls or off Composite. Record result runs template once, List result repeats the template.
Example
<Template Service="dcCoreDataServices" Feature="Users" Op="ListUsers">
<tr>
<td>@tpl|Username@</td>
<td>@tpl|FirstName@ @tpl|LastName@</td>
<td>@tpl|Email@</td>
<td><Link Click="DoEditUser" Label="Edit" Icon="check" Data="@tpl|Id@" /></td>
</tr>
</Template>
Request can be based on HTTP params:
<Template Service="dcCoreDataServices" Feature="Users" Op="LoadUser">
<RequestField Name="Id" Value="@param|id@" />
<tr>
<td>@tpl|Username@</td>
<td>@tpl|FirstName@ @tpl|LastName@</td>
<td>@tpl|Email@</td>
<td>
<ul>
<Template Source="@tpl|Groups@" Name="tpl2">
<li>@tpl2|.@</li>
</Template>
</ul>
</td>
</tr>
</Template>
- Server Side
- if Auth no good then return not found
- otherwise render normally except for addition of 'attach scripts' to load own page scripts
- Browser Side
- if
navigator.userAgent
containsGooglebot
then don't engage comm at all, just stop after page is loaded - if
location.pathname
is not equal to Main path, redirect to Main path and append current #location.pathname to it - otherwise engage the comm
- load the # path if present
- load Home otherwise
- if we detect we need a signin then do the signin
- if
- Server Side
- if Auth no good then return not found
- otherwise render normally except for addition of 'attach scripts' to load own page scripts
- Browser Side
- if
navigator.userAgent
containsGooglebot
then don't engage comm at all, just stop after page is loaded - otherwise engage the comm but do not redirect
- if
- Server Side
- if Auth no good then return JS with error result (error pop up)
- return JS of only the Layout and related but no skeleton
- Browser Side
- responds to the returned JS
- may need to load some JS libraries
- Server Side
- if Auth no good then return JS with error result (error pop up)
- return JS of only the script and related but no skeleton
- Browser Side
- attach the script to the current viewed page
- if ?_dcui=dyn or ?_dcui=code present, return js error for non-auth
- otherwise redirect to Main
Where to get info?
<html data-dcw-SignIn="..." data-dcw-Main="..." data-dcw-Home="..." data-dcw-SiteName="..." >
Notes:
- we need domain level alias
- we need domain level SignIn path
- we need domain level Main path
- we need domain level Home path
- we need domain level SiteName path
- we need domain level SiteAuthor path
- we need domain level SiteCopyright path
- we need dc.ui to load
- Galleries
./public/dcw/domain-alias/static/galleries
- GalleryImage Path="/Photos/part.png" becomes "https://domain.name.com/dcm/galleries/Photos/part.png"
- Files
./public/dcw/domain-alias/static/files
- FileLink Path="/meetings/notes.docs" becomes "https://domain.name.com/dcm/files/meetings/notes.docs"
- WWW
./public/dcw/domain-alias/static/www
- Path="/dcf/js/x.js" becomes "https://domain.name.com/dcm/www/dcf/js/x.js"
- archive
- for www files...TODO
- edit pages contained in dcm
./public/dcw/domain-alias/phantom/www/pages
./public/dcw/domain-alias/static/www/pages
- URL
/dcm/pages/About
is./public/dcw/domain-alias/static/www/pages/About
- edit blocks contained in dcm
./public/dcw/domain-alias/phantom/www/blocks
./public/dcw/domain-alias/static/www/blocks
- Top
./public/dcw/domain-alias/static/Galleries
- Name is folder name:
./public/dcw/domain-alias/static/Galleries/Horizon
- Setting are in file:
./public/dcw/domain-alias/static/Galleries/Horizon/meta.json
- A subset is formed just by creating a subfolder
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden
- this could be category/product relationship
./public/dcw/domain-alias/static/Galleries/[cat]/[prod]
- default display order, description, title can be specified in subset folder
- order example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/meta.json
- example:
- Variations are also a subfolder. name of photo is name of folder plus a
.v
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_thumb.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_list.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/img_slide.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/original.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Center.v/meta.json
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_thumb.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_list.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/img_slide.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/original.jpg
- example:
./public/dcw/domain-alias/static/Galleries/Horizon/Underwater-Garden/Left.v/meta.json
- example:
In HTML can display image directly:
- GalleryImage Path="/Horizon/Underwater-Garden/Center.v/img_slide.jpg"
In HTML can display image by variation:
- GalleryImage Path="/Horizon/Underwater-Garden/Center" Variation="slide"
In HTML can display slide show using default order and variation:
- GalleryShow Path="/Horizon/Underwater-Garden"
- if no default order given use canonical
In HTML can display slide show using given order and variation:
- GalleryShow Path="/Horizon/Underwater-Garden" Variation="list"
- Left
- Center
In HTML can display slide show using random order:
- GalleryShow Path="/Horizon/Underwater-Garden" Order="random"
META
- access
- groups, users, auth (for download, also a token system for download)
- at gallery level only
- bubble up to find access
- example:
./public/dcw/domain-alias/static/Galleries/Store/meta.json
where Store children are protected by group 'StoreAdmin'
- templates
- list of template variations common to this "area"
- may be at any folder level, including gallery
- bubble up to find templates, stop at first template match
- example:
./public/dcw/domain-alias/static/Galleries/Store/meta.json
where Store children are show two template options - wide and normal
- assigned template
- list of variations assigned to this "area"
- bubble up to find template, stop at first template match
- example:
./public/dcw/domain-alias/static/Galleries/Store/Horizon/meta.json
where Horizon children conform to a template assigned in meta