-- import: ft

-- ftd.color yellow: yellow
dark: yellow

-- ft.h0: FTD Language

FTD is a domain-specific language to represent typed data and user interfaces.

-- ft.h1: Typed Data Language

`ftd` is an alternative to XML/JSON for storing data.

Note: `ftd` is built on a lower level grammar, called [`ftd::p1`
grammar](/fifthtry/ftd/p1-grammar/), it defines things like sections,
sub-sections, caption, headers, and body.

-- ft.code: ftd file containing data
lang: ftd

\-- record person:
caption name:
string location:
optional body bio:

\-- string amitu: Amit Upadhyay
location: Banglore, India

Amit is the founder and CEO of FifthTry.

He loves to code, and is pursuing his childhood goal of
becoming a professional starer of the trees.

\-- list employees:
type: person

\-- employees: Sourabh Garg
location: Ranchi, India

Sourabh loves to UI.

\-- employees: Arpita Jaiswal
location: Lucknow, India

-- ft.markdown:

This data can be read from Rust:

-- ft.code: getting data out of ftd
lang: rs

\#[derive(serde::Deserialize)]
struct Employee {
    name: String,
    location: String,
    bio: Option<String>
}

let doc = ftd::p2::Document::from("some/id", source, lib)?;
let amitu: Employee = doc.get("amitu")?;
let employees: Vec<Employee> = doc.get("employees")?;

-- ft.markdown:

Read about [ftd's data modelling capability](/fifthtry/ftd/data-modelling/) in
detail.

-- ft.h1: UI Language

-- ft.code: hello world ftd
lang: ftd

\-- string msg: hello world

\-- ftd.text: $msg

-- ft.markdown:

This is a ftd file that defines a variable `msg` and uses it to shows
"hello world" in the UI using `ftd.text` "component".

----

-- string msg: hello world

-- ftd.text: $msg

-- ft.markdown:

----

This document is powered by ftd, and the source code listed above is part of this
document, and what you see above between the two lines is rendered by ftd.

Let's see a slightly more complex layout:

-- ft.code:
lang: ftd

\-- ftd.column:
border-width: 1
width: fill
id: outer

\-- ftd.row:
width: fill
background-color: $yellow
padding: 10

\-- ftd.text: $msg
width: fill

\-- ftd.row:
align: right

\-- ftd.text: $msg
width: fill

\-- container: outer

\-- ftd.row:
padding: 10
border-top: 1
width: fill
align: center

\-- ftd.text:
width: fill

We support **markdown** as well.

-- ft.markdown:

Which gets rendered into:

-- ftd.column:
border-width: 1
width: fill
id: outer

-- ftd.row:
width: fill
background-color: $yellow
padding: 10

-- ftd.text: $msg
width: fill

-- ftd.row:
align: right
width: fill

-- ftd.text: $msg
width: fill
align: right

-- container: outer

-- ftd.row:
padding: 10
border-top: 1
width: fill

-- ftd.text:
width: fill

We support **markdown** as well.

-- container: ftd.main

-- ft.markdown:

Most websites you come across can be created using this (or will be in the future).
We have a DSL that picks elements from CSS, after simplifying things a little bit.

As a goal we want `ftd` files to be renderable in the browser, as well as in other
modes, like in Terminal using curses UI, natively on Mobile devices, Emacs,
rendering from scratch using just C/assembly for low-powered devices and so on.