Typography json to `fastn`

`fastn` allows you to generate typography code from its equivalent json. To generate `fastn` code, you will need to include `typo.js` from `fastn-js` repo and use its `typo_to_ftd(json)` JS function. This function `typo_to_ftd(json)` takes json string as input and returns two strings - `fastn` source code, styled `fastn` code.

Example

Below mentioned code shows how we can generate equivalent `fastn` code for `fastn-io-typography` from its json.

Using `typo_to_ftd(json)` to generate `fastn` code

Input

-- import: fastn-stack.github.io/fastn-js/assets as js-assets
-- import: fastn-community.github.io/doc-site as ds
-- import: fifthtry.github.io/fastn-typography as fastn-typo

-- optional string $code:
-- optional string $formatted-code:

-- string fastn-typo-json:
$processor$: pr.figma-typo-token
variable: $forest-cs.main
name: fastn-typography

-- void typo-to-ftd(json,store_at,formatted_string):
string json:
string $store_at:
string $formatted_string:
js: [$js-assets.files.typo.js]

value = typo_to_ftd(json);
store_at = value[0];
formatted_string = value[1];

-- ftd.text: Generate `fastn` code
$on-click$: $typo-to-ftd(json = $fastn-typo-json, $store_at = $code, $formatted_string = $formatted-code)
color: $inherited.colors.text
role: $inherited.types.copy-regular
border-width.px: 2
padding.px: 5

-- ds.code:
if: { code != NULL }
body: $formatted-code
text: $code
max-height.fixed.px: 300

Lang:

ftd

Output

Generate `fastn` code