-- import: foo
exposing: *

-- import: foo
exposing: one, two
exposing: three, four

-- ftd.markup markup:
body body:
value: $body
color: $ft.neutral-700
color if $fpm-ui.dark-mode: $ft.neutral-200

-- ftd.row foo:

--- ftd.integer: $CHILDREN_COUNT

-- foo:

--- ftd.text: child one
--- ftd.text: child two

-- foo:
open: false
id: f

-- container: f

-- ftd.text: child one
-- ftd.text: child two

-- ftd.row foo:
append-at: inner-main

--- ftd.integer: $CHILDREN_COUNT
--- ftd.column:
id: inner-main

-- foo:

--- ftd.text: child one
--- ftd.text: child two

-- toc-item list toc:

-- ftd.column doc-page:
toc-item list toc: $toc
width: fill
open: main-container

-- lib.doc-page:

-- lib.h0: Upgrade `fpm`

-- ftd.column h:
caption title:

--- ftd.text: $title


-- h h_1: $title
caption title:

-- h: hhhhh

-- h_1: h_1, h_1

-- ftd.row foo:
integer current: 0

--- child:

--- ftd.integer: $CHILDREN_COUNT


-- ftd.text child: $title
caption title:
if: $SIBLING-INDEX == $PARENT.current
$on-click$: increment $PARENT.current clamp $PARENT.CHILDREN-COUNT

-- foo:

--- child: child one
--- child: child two

-- string bg-2: $l-bg-2
-- bg-2: $d-bg-2
if: $fpm.dark-mode

-- ftd.text palete: 
caption colorcode: 
string text: 
align: center
padding: 10
width: 200
background-color: $colorcode

{text}: {value}

--- ftd.text value: $colorcode

--- ftd.text text: $text

-- ft.h0: About `fpm`

-- ft.h0: About {fpm}

-- ftd.text fpm: FPM
style: italic

-- markup:

{ftd} is a language to create web pages or documents for
publishing on the web. It starts with Markdown, but adds features to create full
page layouts, lets you create reusable "ftd components", and has first class 
support for data modelling, so the `ftd` document can be used as an data exchange
format as well (as a replacement of JSON/CSV etc).

`fpm` is "`ftd` package manager", defines a package format for packaging `ftd` 
files. `fpm` packages can depend on other `fpm` packages, and `fpm` can install
all the dependencies of a package.

`fpm` can also convert `ftd` files to static HTML files, so you can publish FTD 
files on github pages, S3 etc static site hosting sites.

/--- ftd.text ftd: you can not yet define this, you have to put it in the definition of `markup` itself
link: /


-- ftd.markup markup:
body body:
optional boolean collapsed:
optional caption title:
value: $body
color: $ft.neutral-700
color if $fpm-ui.dark-mode: $ft.neutral-200
padding-bottom: 8

--- ftd.text ftd:
link: /

-- record character:
caption name:
string dexterity:

-- dd wizard: Wizard
dexterity: high

-- show-dd:
character: $wizard

-- ftd.row show-dd:
character c:

--- ftd.text: $c.name

--- ftd.text: Armour: High
if: $c.dexterity == high

--- ftd.text: Armour: Low
if: $c.dexterity == low

-- string author-profile-small: #ccc
-- author-profile-small: #000
if: $fpm-up.dark-mode

Error: PackageError { message: "failed to parse ParseError { message: \"unknown style name: `line-height` value:`Integer { value: 34 }`\", doc_id: \"index.ftd\", line_number: 527 }" }

-- ftd.text author-email: $title
caption title:
color if $fpm-ui.dark-mode: #BFBFBF
color: #000000
size: 24
line-height: 28
align: left
font: Itim

-- ftd.image nav-icon:
string src:
string link:
src: $src
align: center

-- ftd.markup:

Hello, {name}.

-- ftd.text name: $name

-- ftd.markup:

Hello, {$name}.

-- integer foo: 20
$private$: true


-- ftd.text foo: 20
$private$: true

-- record foo:
$private$: true
boolean private: