Edit documentation Edit document
SSR/SSG

Components features

Every component, inherited from GHComponent has these features:

  • Every component has environment variable inherited from GHComponent with 'client' and 'server' values.
this.invironment === 'client' || 'server';

This can be used, if you need to run some code only on server side (html rendering for example) or only on client (slider initialisation, event listeners etc.)

  • Every component both on server and client have GudHub library. On the server it's always has instance (created with key from config). On client, you can create instance for you purposes any time you need.
  • You can add 'to-be-removed' attribute for component, and it will be removed on server side, and you will get only inner html of it on client. Be aware, that this feature will break all component functionality and will remove <script> tag for this component. Also, if you this component multiple times on same page, only first will work, because of script tag removing.
  • Text content inside component can be fethced directly from GudHub. To do this, you must add gh-id attribute for element, you want to insert text in. Also, you need to create json editor in chapter of current page and properly configure config.mjs.
    • Element, that has gh-id attribute can be edited online on website. To enter edit mode, you should create and dispatch event on window. After saving, you will need enter credentials to GudHub account, that have at least write access to current chapter's application.
const event = new Event('toggle-edit-mode');
window.dispatchEvent(event);
    • Entering the edit mode, also, adds 'edit-mode-enabled' class to body element. This can be used to highlight element, that can be edited in edit mode.
body.edit-mode-enabled {
    border: 1px solid blue;
}