Skip to content
Seizo Docs

Pages

This section explains the JSON file inside the /src/content/seipage/ folder. We do not recommend creating these files manually; use the Seizo desktop app to create them instead. Nevertheless, you should understand what each field in the objects means.

  • pageName: This is used to generate the slug.
  • pageTitle: This is the page’s SEO meta title.
  • pageDescription: This is the page’s SEO meta description.
  • pageImage: This is the page’s SEO meta image.
  • pageLayout: This is the current layout value for the page.
  • compData: This is the list of components on the page.

Component Data (compData)

Section titled “Component Data (compData)”

Inside compData is an array of objects. Each object represents a component on the page.

  • componentName: This is the name of the component.
  • componentModule: This is the component’s file path and name, without the .astro extension. If your component is /src/features/components/MyComponent.astro, the componentModule would be MyComponent. If your component is inside a subfolder — for example, /src/features/components/subfolder/MyComponent.astro — the componentModule would be subfolder/MyComponent.
  • componentImg: This is where you can add a preview image for the component. Insert a local or remote image URL to display the component preview in the Seizo desktop app. For a local image, take a screenshot of the component and upload it to a folder named compHolder. Set componentImg to the file name, including its extension (for example, componentImg: "myComponent.png", sourced from /compHolder/myComponent.png). For a remote image, insert the image URL directly, making sure it starts with https and ends with an image extension (for example, componentImg: "https://example.com/myComponent.png"). We recommend an image size of 600 × 400 pixels.
  • data: This is where you can pass data, such as prop values, to the component.
  • props: This is where you can define the list of widget props the component accepts.

Component Data Props

Section titled “Component Data Props”

Inside the compData props, you can define the data props that the component accepts. Here is a basic example of how to define a prop widget and the data that serves as the prop’s value. Make sure the prop’s name matches the key of the data you want to pass to the component.

index.json
{
  "compData": {
    "data": {
      "title": "Hello World"
    },
    "props": [
      {
        "label": "Type your title",
        "widget": "input",
        "name": "title"
      }
    ]
  }
}

Here is a list of the available base prop widgets:

  • input: This is an input widget that accepts a text string. Great for titles, subtitles, etc.
  • TextArea: This is a text area widget that accepts multiline text input.
  • vid: This is a video widget that accepts a video URL or a local video file from /public/vid/.
  • editor: This is an editor widget that outputs an HTML string, for example "<h1>Hello World</h1>".
  • code: This is a code widget that outputs an HTML string, for example "<pre><code>console.log('Hello World')</code></pre>".
  • social: This is a social widget that outputs social media links and icons. All boilerplate themes come with the Iconify Streamline logo icons installed, so you and your users can choose any icon from that set.
  • img: This is an image widget that accepts an image URL or a local image file from /src/assets/. It creates two values: src and alt.
index.json
{
  "compData": {
    "data": {
      "heroImg": {
        "src": "hero.png",
        "alt": "hero image"
      }
    },
    "props": [
      {
        "label": "Choose Hero Image",
        "widget": "img",
        "name": "heroImg"
      }
    ]
  }
}
  • btn: This is a button widget that creates three values: content, ref, and link. The ref value is used for SEO attributes such as nofollow. Here is an example of how to use it:
index.json
{
  "compData": {
    "data": {
      "primaryBtn": {
        "content": "Get Started",
        "link": "/contact",
        "ref": "nofollow"
      }
    },
    "props": [
      {
        "label": "Call To Action Button",
        "widget": "btn",
        "name": "primaryBtn"
      }
    ]
  }
}
  • option: This is an option widget that outputs a string value. You can customize the list of option values with an additional option field, like this:
index.json
{
  "compData": {
    "data": {
      "colors": "blue"
    },
    "props": [
      {
        "label": "Choose a color",
        "widget": "option",
        "name": "colors",
        "option": [
          {
            "label": "Red",
            "value": "red"
          },
          {
            "label": "Blue",
            "value": "blue"
          },
          {
            "label": "Yellow",
            "value": "yellow"
          }
        ]
      }
    ]
  }
}

There’s More

Section titled “There’s More”

Sometimes you need more than the base props — for example, a list of items. You can use the array widget to handle that. The array widget includes two additional fields: arrayWidget and fixed. With the arrayWidget field, you can add more base props to the array items. When fixed is set to true, the number of displayed items matches the number of items in the data source.

Here is a basic example of how to use the array widget:

index.json
{
  "compData": {
    "data": {
      "blogList": [
        {
          "title": "Bla Bla",
          "blogImg": {
            "src": "blogImg1.png",
            "alt": "img blog 1"
          },
          "link": {
            "content": "Read More",
            "href": "/blog/bla-bla",
            "ref": ""
          }
        },
        {
          "title": "Bla Bla2",
          "blogImg": {
            "src": "blogImg2.png",
            "alt": "img blog 2"
          },
          "link": {
            "content": "Read More",
            "href": "/blog/bla-bla2",
            "ref": ""
          }
        },
        {
          "title": "Bla Bla3",
          "blogImg": {
            "src": "blogImg3.png",
            "alt": "img blog 3"
          },
          "link": {
            "content": "Read More",
            "href": "/blog/bla-bla3",
            "ref": ""
          }
        }
      ]
    },
    "props": [
      {
        "label": "List Of Featured Blogs",
        "widget": "array",
        "name": "blogList",
        "fixed": true,
        "arrayWidget": [
          {
            "label": "Title",
            "widget": "input",
            "name": "title"
          },
          {
            "label": "Image",
            "widget": "img",
            "name": "blogImg"
          },
          {
            "label": "Link",
            "widget": "btn",
            "name": "link"
          }
        ]
      }
    ]
  }
}

But what if you need an array within an array? You can nest the array widget to create an array of arrays, which is useful when building components such as Featured Team members. Keep in mind that nesting is limited to three levels: the base props, the array, and the sub-array. Anything deeper than three levels will not work.

Here is an example of how to use the array widget with a sub-array:

index.json
{
  "compData": {
    "data": {
      "teamMembers": [
        {
          "name": "Doc Estias",
          "avatar": {
            "src": "person1.png",
            "alt": "person 1"
          },
          "services": [
            {
              "link": {
                "content": "Modding",
                "href": "/modding",
                "ref": ""
              }
            },
            {
              "link": {
                "content": "3D Modeling",
                "href": "/3d-modeling",
                "ref": ""
              }
            },
            {
              "link": {
                "content": "Rendering",
                "href": "/rendering",
                "ref": ""
              }
            }
          ]
        },
        {
          "name": "Asual",
          "avatar": {
            "src": "person2.png",
            "alt": "person 2"
          },
          "services": [
            {
              "link": {
                "content": "Accounting",
                "href": "/accounting",
                "ref": ""
              }
            }
          ]
        }
      ]
    },
    "props": [
      {
        "label": "List Of Team Members",
        "widget": "array",
        "name": "teamMembers",
        "arrayWidget": [
          {
            "label": "Name",
            "widget": "input",
            "name": "name"
          },
          {
            "label": "Avatar Image",
            "widget": "img",
            "name": "avatar"
          },
          {
            "label": "Services",
            "widget": "array",
            "name": "services",
            "arrayWidget": [
              {
                "label": "Service Link",
                "widget": "btn",
                "name": "link"
              }
            ]
          }
        ]
      }
    ]
  }
}

Validation

Section titled “Validation”

Manually building the compData JSON is difficult, and it is easy to make mistakes. For this reason, Seizo provides a built-in solution. When you open your website in the Seizo desktop app, Seizo automatically validates your component data to ensure it is valid. If the data is invalid, Seizo displays an error message and prevents you from entering the website.