SSGO LogoDOCS

Attributes evaluation

Attributes evaluation allow you to dynamically compute the value of your attributes.

To dinamically compute the value of an attribute, just prefix it with eval:. ssgo will simply evaluate the expression given as value of the attribute, and will replace it into the built page.

For example, let's say that one of your creators is triggering a build page with the following data:

{
  metaTitle: 'Lorem ipsum dolor si amet',
  slugify: (str: string) => str.toLowerCase().replace(' ', '-')
  image: {
    imgSrc: 'https://example.com/image.png',
  },
}

Then you can evaluate the value of attributes as follows:

<html>
  <head>
    <meta name="title" eval:content="metaTitle" />
  </head>
  <body>
    <img eval:src="image.imgSrc" eval:alt="slugify(metaTitle)" />
  </body>
</html>

Once built, our page will look like that:

<html>
  <head>
    <meta name="title" content="Lorem ipsum dolor si amet" />
  </head>
  <body>
    <img src="https://example.com/image.png" alt="lorem-ipsum-dolor-si-amet" />
  </body>
</html>

The special treatment of the class attribute

As the class attribute generally contains more than one value, ssgo allows passing a object to eval:class: every value of the object will be evaluated, and if truthy, the corresponding key will be added to the resulting class attribute:

<div
  eval:class="({
    'flex shadow': true,
    'flex-col': metaTitle.lenght > 2,
    'flex-row justify-between': metaTitle.length <= 2
  })"
></div>

Note the use of braces around the object notation, it is needed for ssgo to correctly evaluate object expressions

The previous example will output:


Something about this page is wrong? Edit it on GitHub.