CLI FreeMarker prototypes

This package can be used for FreeMarker projects.

Package name

@magnolia/cli-freemarker-prototypes

Repository link

@magnolia/cli-freemarker-prototypes

Latest version

Magnolia CLI freemarker prorotypes latest version tag

Changelog link

CHANGELOG.md

Prototypes in the package

For more details, click the prototype name.

Example usage

To see how to set and use the @magnolia/cli-freemarker-prototypes, you can jumpstart a project based on th demo-webapps/magnolia-community-demo-webapp template.

Jumpstart a new project based on the template.

npx @magnolia/cli jumpstart -t "demo-webapps/magnolia-community-demo-webapp"

The command downloads and creates a new project.

The mgnl.config.js file created:

import CreatePagePlugin from "@magnolia/cli-create-page-plugin"
import CreateComponentPlugin from "@magnolia/cli-create-component-plugin"
import CreateLightModulePlugin from "@magnolia/cli-create-light-module-plugin"
...
export default {
  ...
  plugins: [
    new CreatePagePlugin({
      framework: '@magnolia/cli-freemarker-prototypes@1', (1)
      prototype: 'basic' (2)
    }),
    new CreateComponentPlugin({
      framework: '@magnolia/cli-freemarker-prototypes@1', (1)
      prototype: 'basic' (2)
    }),
    new CreateLightModulePlugin(),
    ...
  ],
};

1	The framework prototypes package.
2	The prototype available in the framework prototypes package chosen.

Create a new light module.

npm run mgnl -- create-light-module "my-lm" -lmp "./light-modules"

Create a new page.
```
npm run mgnl -- create-page main
```

Files created:

/<project-path>/light-modules/my-lm/dialogs/pages/main.yaml

Click to expand or collapse

label: main
form:
  properties:
    title:
      $type: textField
      label: Title
      i18n: true
    navigationTitle:
      $type: textField
      label: Navigation title
      i18n: true
    windowTitle:
      $type: textField
      label: Window title
      i18n: true
    hideInNav:
      $type: checkBoxField
      defaultValue: false
      label: Hide in navigation
      buttonLabel: Hide
    keywords:
      $type: textField
      label: Keywords
      i18n: true
      rows: 3
    description:
      $type: textField
      label: Description
      i18n: true
      rows: 5
  layout:
    $type: tabbedLayout
    tabs:
      tabMain:
        label: Main tab
        fields:
          - name: title
          - name: navigationTitle
          - name: windowTitle
          - name: hideInNav
      tabMeta:
        label: Metadata
        fields:
          - name: keywords
          - name: description

/<project-path>/light-modules/my-lm/templates/pages/main.ftl

Click to expand or collapse

<!DOCTYPE html>
<html xml:lang="${cmsfn.language()}" lang="${cmsfn.language()}">
  <head>
    [@cms.page /]
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>${content.windowTitle!content.title!}</title>
    <meta name="description" content="${content.description!""}" />
    <meta name="keywords" content="${content.keywords!""}" />
    [#-- To load resources you can link them manually (e.g. line below) --]
      [#-- <link rel="stylesheet" type="text/css" href="${ctx.contextPath}/.resources/Main/webresources/css/bootstrap.css" media="all" /> --]
      [#-- <script src="${ctx.contextPath}/.resources/Main/webresources/js/jquery.js"></script> --]
    [#-- or via theme --]
      [#-- [#assign site = sitefn.site()!] --]
      [#-- [#assign theme = sitefn.theme(site)!] --]
      [#-- [#list theme.cssFiles as cssFile] --]
      [#--   [#if cssFile.conditionalComment?has_content]<!--[if ${cssFile.conditionalComment}]>[/#if] --]
      [#--     <link rel="stylesheet" type="text/css" href="${cssFile.link}" media="${cssFile.media}" /> --]
      [#--   [#if cssFile.conditionalComment?has_content]<![endif]-->[/#if] --]
      [#-- [/#list] --]
      [#-- [#list theme.jsFiles as jsFile] --]
      [#--   <script src="${jsFile.link}"></script> --]
      [#-- [/#list] --]
    [#-- uncomment next line to use resfn templating functions to load all css which matches a globbing pattern --]
      [#-- ${resfn.css(["/Main/.*css"])!} --]
  </head>
  <body class="main ${cmsfn.language()}">
    <div class="container">
      <h1>main works!</h1>
    </div>
    [#-- use resfn to load all js which matches the globbing pattern or link resources manually or via theme --]
    [#-- ${resfn.js(["/Main/.*js"])!} --]
  </body>
</html>

/<project-path>/light-modules/my-lm/templates/pages/main.yaml

Click to expand or collapse

title: main
templateScript: /my-lm/templates/pages/main.ftl
renderType: freemarker
dialog: my-lm:pages/main
visible: true

Create a new component.
```
npm run mgnl -- create-component hero
```

Files created:

/<project-path>/light-modules/my-lm/dialogs/components/hero.yaml

Click to expand or collapse

# An automatically generated dialog with a few fields used most often (text, right, link, DAM image, multivalue, link to app, select).
# Feel free to modify them for your specific component.
label: hero
form:
  properties:
    title:
      $type: textField
      label: Title
      i18n: true
    image:
      label: Image
      $type: damLinkField
    caption:
      $type: textField
      label: Image Caption
      i18n: true
    desc:
      label: Description
      $type: richTextField
      i18n: true
    internalLink:
      label: Link
      $type: pageLinkField
    categories:
      label: Categories
      $type: jcrMultiValueField
      field:
        $type: linkField
        label: ''
        datasource:
          $type: jcrDatasource
          workspace: category
    option:
      label: Option
      $type: comboBoxField
      datasource:
        $type: optionListDatasource
        options:
          - name: a
            label: A
            value: a
          - name: b
            label: B
            value: b

/<project-path>/light-modules/my-lm/templates/components/hero.ftl

Click to expand or collapse

<div class="hero">
  [#if content.title?has_content]
    <h2>${content.title!}</h2>
  [/#if]
  [#if content.image?has_content]
    [#assign image = damfn.getAsset(content.image)]
    [#assign imageLink = image.link]
    <img
      src='${imageLink!}'
      class='img-responsive'
      alt='${content.caption!"image"}'>
  [/#if]
  [#if content.desc?has_content]
    ${cmsfn.decode(content).desc!}
  [/#if]
  [#if content.internalLink?has_content]
    [#assign target = cmsfn.contentById(content.internalLink, "website")!]
    <a href='${ctx.contextPath}/${cmsfn.link(target)!}' class='btn btn-link'>${target.title!target.@name}</a>
  [/#if]
  [#if content.categories?has_content && content.categories?size > 0]
    [#list content.categories as item]
      [#assign category = cmsfn.contentById(item, "category")!]
      <span class="label label-default">${category.name!category.@name!}</span>
    [/#list]
  [/#if]
  [#if content.option?has_content]
    <div>${content.option!}</div>
  [/#if]
</div>

/<project-path>/light-modules/my-lm/templates/components/hero.yaml

Click to expand or collapse

title: hero
renderType: freemarker
templateScript: /my-lm/templates/components/hero.ftl
dialog: my-lm:components/hero

CLI FreeMarker prototypes

Prototypes in the package

Example usage

Location

Main doc sections