While you're not required to use them, HAX supplies a series of elements that can make theme development effortless. You can see the source of these in greater detail under the theme directory of haxcms-elements . This is a brief overview of what they are and what they provide to your interface.
- manifest - site.json loaded into memory / the site running as a program
- activeItem - the active page / node / item in the manifest based on the route that the site is currently on. This is part of the store and accessible through autorun interfacing via MobX.
These smart elements can automatically modal, list children pages, be the active title, next page, breadcrumb nav and more.
// active item
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-fields.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-media-banner.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-tags.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-active-title.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-git-corner.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/active-item/site-share-widget.js";
// blocks
import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-children-block.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-outline-block.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/blocks/site-recent-content-block.js";
// layout
import "@haxtheweb/haxcms-elements/lib/ui-components/layout/site-drawer.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/layout/site-footer.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/layout/site-modal.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/layout/site-region.js";
// magic
import "@haxtheweb/haxcms-elements/lib/ui-components/magic/active-when-visible.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/magic/site-ai-chat.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/magic/site-collection-list.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/magic/site-view.js";
// navigation
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-breadcrumb.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-dot-indicator.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-menu-button.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-menu-content.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-menu.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/navigation/site-top-menu.js";
// query
import "@haxtheweb/haxcms-elements/lib/ui-components/query/site-query-menu-slice.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/query/site-query.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/query/site-render-query.js";
// site
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-print-button.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-remote-content.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-rss-button.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-search.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-title.js";
import "@haxtheweb/haxcms-elements/lib/ui-components/site/site-uuid-link.js";
Now here's what each of them provide you which they are generally self explanatory. There are a few listed above which are not communicated below. This is because they are not common or are largely for core / end-user development.
- site-active-media-banner - media (usually an image) associated with the activeItem
- site-active-tags - a printed Array of tags rendered using simple-tag.
- site-active-title - the title of the active item wrapped in a h1 tag
- site-git-corner - if the site has a publicly available repo backing the source which is listed in the metadata for the site in the manifest, it will present an icon that links to the repo
- site-share-widget - creates a share button that when clicked presents different platforms you can share a link to the current page.
- site-children-block - all child menu items based on a criteria match
- site-outline-block - part of the outline based on criteria match
- site-recent-content-block - presents recently added content to the site, ordered by created date, initial limit of 10 but can be modified
- site-footer - a basic footer with license element based on site details
- site-modal - a basic modal with button that can house other elements
- site-region - renders content designated by the manifest as rendering specific content in a region of the theme. valid region names include:
- header - top of the site / interface
- sidebarFirst - generally first sidebar user sees; in LTR languages this would be the left
- sidebarSecond - secondary sidebar user sees; in LTR languages this would be the right
- contentTop - just before the primary page content
- contentBottom - just after the primary page content
- footerPrimary - primary footer, generally the last footer seen on the website
- footerSecondary - secondary footer, generally the first footer seen on the website
- site-breadcrumb - a breadcrumb trail for the active menu item
- site-dot-indicator - site links but as a simple line of dots
- site-menu-button - buttons for navigating through the active items in the menu. This is next, previous, parent and first child kinds of options.
- site-menu-content - hierarchy of in-page navigation. Headings, video, and audio all inform anchored links which can be clicked to jump the user down the page. Good for themes that are intended for longer form reading experiences.
- site-menu - A visualization of the hierarchy of your site, complete with check-marks given per page the user goes to (optional) as well as a lot of styling options and a highlighted bar that scrolls the menu into view for small screens. It's fantastic and one line.
- site-top-menu - Top level menu links with indicator that scrolls to focus
- site-query-menu-slice - Advanced developer element for rendering lists of specific queried items from the manifest. Example: return items (in order) for levels 2 through 4 of the activeItem hierarchy
- site-query - Advanced developer element for rendering lists of specific queried items from the manifest. Example: give me all items that have a tag matching the current item with the same parent. result-changed event is available to obtain the results in your template for rendering.
- site-print-button - print button with support for 4 levels of printing the site
- site-rss-button - a button that displays a link (opened in a new window) to get the RSS feed in RSS 2.0 or Atom 1.0 format (also applies correct semantic values for bots to discover)
- site-search - a search interface that leveraged HAXsite's built-in lunr.js support. Visualizes results as well as provides basic search field for input. This is the search interface itself, not the method for activating it. Typically search will be activated through a dialog or in-place of content.
- site-title - a link to the homepage of the site wrapped in an h1 tag
- site-uuid-link - given a uuid, render a link to the slug associated with title of the page. This is primarily leveraged in hax editing mode so that users can select a page from a list, however you could use this with hard coded uuids / custom information architecture / manifest structure in order to render static links to content. example: id item-543-ddd-12f-53d-333 you KNOW is your contact info and you want a link in the footer to always link directly to your contact page.
See the elements themselves for more details API examples and check out our themes as we leverage them heavily across the core themes.