README.md

Your Project's Title...

Your project's description...

Environments

• Preview: https://main--client-ta-eds-poptennis--anchoraorg.hlx.page/
• Live: https://main--client-ta-eds-poptennis--anchoraorg.hlx.live/

Installation

npm i

Linting

npm run lint

Local development

1. Create a new repository based on the aem-boilerplate template and add a mountpoint in the fstab.yaml
2. Add the AEM Code Sync GitHub App to the repository
3. Install the AEM CLI: npm install -g @adobe/aem-cli
4. Start AEM Proxy: aem up (opens your browser at http://localhost:3000)
5. Open the {repo} directory in your favorite IDE and start coding :)

FAQ

• How Caching invalidation going to happen
  • Site so on deploy
  • Content on publish

Add new Components

AEM Based Authoring

• add component model to component-models.json

{
    "id": "teaser",
    "fields": [
      {
        "component": "reference",
        "valueType": "string",
        "name": "image",
        "label": "Background Image",
        "multi": false
      },
      {
        "component": "text",
        "name": "pretitle",
        "value": "",
        "label": "Pre Title",
        "valueType": "string"
      },
      {
        "component": "text",
        "name": "title",
        "value": "",
        "label": "Title",
        "valueType": "string"
      },
      {
        "component": "richtext",
        "name": "description",
        "value": "",
        "label": "Description",
        "valueType": "string"
      }
    ]
  }

• add new definition to component-definition.json

{
          "title": "teaser",
          "id": "teaser",
          "plugins": {
            "xwalk": {
              "page": {
                "resourceType": "core/franklin/components/block/v1/block",
                "template": {
                  "name": "Teaser",
                  "model": "teaser"
                }
              }
            }
          }
        },

• update allowed components in component-filters.json

  {
    "id": "section",
    "components": [
      "text",
      "image",
      "button",
      "title",
      "hero",
      "cards",
      "columns",
      "fragment",
      "teaser"
    ]
  },

Alt Text for Images

When updating fields in component-models.json you can add suffix Alt to the name to define the component as image component.

      {
        "component": "text",
        "name": "imageAlt",
        "value": "",
        "label": "Image Alt",
        "valueType": "string"
      },

Field Type

When updating fields in component-models.json you can add suffix Type to define the type of the field.

      {
        "component": "select",
        "name": "titleType",
        "value": "h3",
        "label": "Title Type",
        "valueType": "string",
        "options": [
          {
            "name": "h2",
            "value": "h2"
          },
          {
            "name": "h3",
            "value": "h3"
          },
          {
            "name": "h4",
            "value": "h4"
          }
        ]
      },

Forgeround and Background

When creating fields in component-models.json you can add prefix foreground_ and background_ to the name to define the component as foreground or background component.

      {
        "component": "text",
        "name": "background_imageAlt",
        "value": "",
        "label": "Image Alt",
        "valueType": "string"
      },

Default values for Component Template

By default component template will have empty values for the fields, and it will be hard to find on the page. You can add default values for the fields in the component model.

When updating fields in component-models.json you can add value to define the default value for the field.

      {
        "component": "text",
        "name": "title",
        "value": "Hello World",
        "label": "Title",
        "valueType": "string"
      },

Previewing Chaanges in a Branch

When you create a new branch in the repository, you can preview the changes in the branch by adding the branch name to the preview URL.

Branch Preview URL Format: https://<branch-name>--client-ta-eds-poptennis--anchoraorg.hlx.page/

Using Icons

You can create new ions in /icons directory and use them in the components.

To use the in components you can use the following syntax :<icon-file-name>: in the text fields, do not include the file extension, just use the name.

Refereces

• [https://github.com/hlxsites] - reference sites made for EDS
• [https://github.com/adobe-rnd] - other examples and derivites of the EDS
• [https://github.com/adobe/helix-website] - Helix Website, sample components
• [https://github.com/hlxsites/petplace.git] - Workers.
• [https://github.com/hlxsites/tlcgrp/blob/main/blocks/form/form.js] - Workers and recaptcha.
• [https://github.com/hlxsites/sazerac-99brandparty.git] - Form and email sending using adobe IO mailgun function.