{
  "settings": { "masterPage": true },
  "pageElement": {
    "type": "Root",
    "pageElements": [
      {
        "type": "Section",
        "definition": { "locked": true },
        "pageElements": [
          { "type": "Fragment", "definition": {
              "fragmentKey": "site-header",
              "fragmentConfig": { "sticky": true, "variant": "glass" }
          }}
        ]
      },
      { "type": "DropZone" },
      {
        "type": "Section",
        "definition": { "locked": true },
        "pageElements": [
          { "type": "Fragment", "definition": { "fragmentKey": "site-footer" }}
        ]
      }
    ]
  }
}

{
  "frontendTokenCategories": [
    {
      "label": "Colors", "name": "colors",
      "frontendTokenSets": [
        { "label": "Brand", "name": "brand",
          "frontendTokens": [
            { "name": "brand-primary", "label": "Brand Primary",
              "type": "Color", "defaultValue": "#1f4ad6",
              "mappings": [
                { "type": "cssVariable", "value": "primary" },
                { "type": "cssVariable", "value": "link-color" }
              ]
            }
          ]
        }
      ]
    },
    {
      "label": "Typography", "name": "typography",
      "frontendTokenSets": [
        { "label": "Display", "name": "display",
          "frontendTokens": [
            { "name": "font-display", "label": "Display Font",
              "type": "FontFamily",
              "defaultValue": "'Fraunces', Georgia, serif",
              "mappings": [{ "type": "cssVariable", "value": "font-family-display" }]
            }
          ]
        }
      ]
    }
  ]
}

<style id="_style_book_css">
:root {
  --primary: #1f4ad6;
  --link-color: #1f4ad6;
  --font-family-display: 'Fraunces', Georgia, serif;
  --spacer-3: 1rem;
  --spacer-5: 2.5rem;
}
</style>

/* fragments/hero/styles.css */
.hero__title {
  font-family: var(--font-family-display);
  color: var(--primary);
  margin-block-end: var(--spacer-5);
}

{
  "category": "Marketing",
  "cssPath": "styles.css",
  "htmlPath": "index.html",
  "jsPath": "main.js",
  "configurationPath": "configuration.json",
  "name": "CTA Banner",
  "type": "component",
  "typeOptions": { "lazy": true }
}

{
  "fieldSets": [{
    "label": "Banner",
    "fields": [
      { "name": "variant", "label": "Variant", "type": "select",
        "defaultValue": "solid",
        "typeOptions": { "validValues": [
          { "value": "solid",   "label": "Solid" },
          { "value": "outline", "label": "Outline" },
          { "value": "glass",   "label": "Glass" }
        ]}
      },
      { "name": "alignment", "label": "Alignment", "type": "select",
        "defaultValue": "start",
        "typeOptions": { "validValues": [
          { "value": "start",  "label": "Start" },
          { "value": "center", "label": "Center" }
        ]}
      }
    ]
  }]
}

<section class="cta cta--${configuration.variant} cta--${configuration.alignment}">
  <h2 data-lfr-editable-id="cta-title" data-lfr-editable-type="text">
    Ship something the rest of the org can run.
  </h2>
  <p data-lfr-editable-id="cta-body" data-lfr-editable-type="rich-text">
    Drop a one-liner that earns the click.
  </p>
  <a class="cta__btn"
     data-lfr-editable-id="cta-action" data-lfr-editable-type="link"
     href="#">Get started</a>
</section>

(function () {
  const root = fragmentElement.querySelector('.cta');
  if (!root || root.dataset.bound === '1') return;
  root.dataset.bound = '1';

  const btn = root.querySelector('.cta__btn');
  btn?.addEventListener('click', function (e) {
    Liferay.fire('analytics:cta-click', {
      variant: configuration.variant,
      href: btn.href
    });
  });
})();

# scaffold
yarn create liferay-fragment my-fragments

# dev import on save
cd my-fragments && yarn import --host localhost:8080 --watch

# prod build → ZIP for upload via UI or CI
yarn build && ls dist/*.zip

{
  "availableLanguageIds": ["en_US"],
  "definition": {
    "defaultLanguageId": "en_US",
    "fields": [
      { "name": "title",    "type": "text",        "required": true,  "localizable": true },
      { "name": "summary",  "type": "text_area",   "required": true },
      { "name": "hero",     "type": "image",       "required": false },
      { "name": "body",     "type": "html",        "required": true },
      { "name": "category", "type": "select",
        "options": [
          { "value": "product", "label": "Product" },
          { "value": "company", "label": "Company" },
          { "value": "partner", "label": "Partner" }
        ]
      },
      { "name": "publishDate", "type": "date", "required": true }
    ]
  }
}

<article class="press">
  <header class="press__head">
    <p class="press__cat">${category.getData()}</p>
    <h1>${title.getData()}</h1>
    <time datetime="${publishDate.getData()}">
      ${publishDate.getData()?date}
    </time>
  </header>

  <#-- hero is optional -->
  <#if hero.getData()?has_content>
    <img class="press__hero" src="${hero.getData()}" alt="" />
  </#if>

  <p class="press__lede">${summary.getData()}</p>
  <div class="press__body">${body.getData()}</div>
</article>

# client-extensions/papu-theme-css/client-extension.yaml
papu-theme-css:
  type: themeCSS
  name: "Papu Theme CSS"
  url: papu-theme-css.css

/* loaded as <link rel=stylesheet> on every site page */
:root { --radius-pill: 999px; }
body { font-family: var(--font-family-base); }
.btn-primary { border-radius: var(--radius-pill); }

# configs/com.liferay.portal.instance.lifecycle.PortalInstance...config
topHTML="<script async src='https://www.googletagmanager.com/gtag/js?id=GTM-XXX'></script>"
bottomHTML="<script>window.dataLayer=window.dataLayer||[];</script>"

{
  "name": "JobPosting",
  "label": { "en_US": "Job Posting" },
  "pluralLabel": { "en_US": "Job Postings" },
  "scope": "site",
  "status": "approved",
  "objectFields": [
    { "name": "title",       "type": "String",  "required": true,
      "label": { "en_US": "Title" } },
    { "name": "slug",        "type": "String",  "required": true, "indexed": true },
    { "name": "location",    "type": "String" },
    { "name": "remote",      "type": "Boolean" },
    { "name": "salaryMin",   "type": "Integer" },
    { "name": "description", "type": "Clob",
      "businessType": "RichText" },
    { "name": "openUntil",   "type": "Date" }
  ],
  "objectValidations": [
    { "engine": "ddm", "errorLabel": { "en_US": "Salary must be positive" },
      "script": "isEmpty(salaryMin) || salaryMin > 0" }
  ]
}

(async function () {
  const root = fragmentElement.querySelector('.jobs');
  if (!root || root.dataset.bound) return;
  root.dataset.bound = '1';

  const res = await Liferay.Util.fetch(
    '/o/c/jobpostings?filter=remote eq true&pageSize=10',
    { headers: { 'Accept': 'application/json' }}
  );
  const data = await res.json();

  root.innerHTML = data.items.map(j => `
    <a class="job" href="/web/site/-/${j.slug}">
      <h3>${j.title}</h3>
      <p>${j.location} ${j.remote ? '· remote' : ''}</p>
    </a>`).join('');
})();

<ul class="cards">
<#list entries as entry>
  <#assign r = entry.getAssetRenderer() />
  <li class="card">
    <a href="${assetPublisherHelper.getAssetViewURL(renderRequest, renderResponse, entry)}">
      <#if r.getThumbnailPath(renderRequest)?has_content>
        <img src="${r.getThumbnailPath(renderRequest)}" alt="" />
      </#if>
      <h3>${r.getTitle(locale)}</h3>
      <p>${r.getSummary(renderRequest, renderResponse)}</p>
    </a>
  </li>
</#list>
</ul>

<header class="site-header">
  <a class="site-header__brand" href="/">
    <img src="[resources:logo.svg]" alt="code.papu" />
  </a>

  <!-- the navigation menu widget is dropped INTO the fragment via the page editor -->
  <div class="site-header__nav"
       data-lfr-widget-id="com_liferay_site_navigation_menu_web_portlet_SiteNavigationMenuPortlet">
    <!-- editor binds menu = primary, display = horizontal -->
  </div>

  <a class="site-header__cta" href="/web/site/contact">Buzz me</a>
</header>

{
  "name": "Site Editor",
  "type": "site",
  "permissions": [
    { "resource": "com.liferay.journal",
      "actions": ["VIEW", "ADD_ARTICLE", "UPDATE"] },
    { "resource": "com.liferay.journal.model.JournalArticle",
      "actions": ["VIEW", "UPDATE", "EXPIRE"] },
    { "resource": "com.liferay.object.model.ObjectDefinition#JobPosting",
      "actions": ["VIEW", "UPDATE"] }
  ]
}

# .github/workflows/build.yml
name: build
on: { push: { branches: [main, release/**] } }
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-java@v4
        with: { java-version: 21, distribution: temurin }
      - name: Build modules + LPKG
        run: ./gradlew clean distBundleZip
      - name: Build fragments
        run: yarn --cwd fragments build
      - name: Build client extensions
        run: ./gradlew clientExtensionBuild
      - name: Upload artifacts
        uses: actions/upload-artifact@v4
        with:
          name: liferay-${{ github.sha }}
          path: |
            build/dist/*.lpkg
            fragments/dist/*.zip
            client-extensions/dist/*.zip
            configs/${{ github.ref_name }}/*.config

# helm-values/prod.yaml
image: liferay/dxp:7.4.13-u110
extraDeployments:
  - "oci://registry.papu.dev/liferay/papu-portal-bundle:1.42.0"
configMaps:
  liferay-configs:
    mountPath: /opt/liferay/osgi/configs
    files:
      - configs/prod/*.config
env:
  LIFERAY_JDBC_DEFAULT_URL: jdbc:postgresql://pg/papu
  LIFERAY_CLUSTER_LINK_ENABLED: "true"
  LIFERAY_ELASTICSEARCH_ENABLED: "true"

# in CI, after build, push fragments to Liferay over the public API
yarn --cwd fragments import \
  --host https://liferay.${ENV}.papu.dev \
  --user "${LIFERAY_CI_USER}" \
  --password "${LIFERAY_CI_PASS}" \
  --groupId "${SITE_GROUP_ID}" \
  --override

# configs/prod/com.liferay.captcha.configuration.CaptchaConfiguration.config
maxChallenges=1
captchaEngine="reCAPTCHA"
reCaptchaPublicKey="${RECAPTCHA_PUB}"
reCaptchaPrivateKey="${RECAPTCHA_PRIV}"