From 7f7d69f9b7cf4f341baefbac85ca003a1466010c Mon Sep 17 00:00:00 2001
From: Arpita-Jaiswal <ayushipujaa@gmail.com>
Date: Fri, 10 Mar 2023 14:04:13 +0530
Subject: [PATCH] added ftd files in .build folder

---
 fastn-core/src/commands/build.rs              |  30 +-
 fastn-core/src/commands/serve.rs              |   3 +
 fastn-core/src/package/mod.rs                 |   4 +-
 fastn-core/src/utils.rs                       |   4 +
 fastn-core/tests/02-hello/output/fail_doc.ftd |   3 +
 fastn-core/tests/02-hello/output/index.ftd    |  34 +
 .../tests/03-nested-document/output/index.ftd |   1 +
 .../output/nested/document.ftd                |   1 +
 .../output/nested/index.ftd                   |   1 +
 .../04-import-code-block/output/index.ftd     |  11 +
 .../tests/04-import-code-block/output/lib.ftd |  10 +
 fastn-core/tests/05-hello-font/cmd.p1         |   1 +
 .../output/-/www.amitu.com/index-dark.jpg     | 903 ++++++++++++++++++
 .../tests/05-hello-font/output/index.ftd      |  49 +
 .../tests/05-hello-font/output/index.html     |   6 +-
 .../tests/08-static-assets/output/index.ftd   |   1 +
 .../tests/09-markdown-pages/output/index.ftd  |   1 +
 .../11-readme-with-index/output/index.ftd     |   1 +
 .../15-fpm-dependency-alias/output/index.ftd  |   5 +
 .../16-include-processor/output/index.ftd     |   7 +
 20 files changed, 1057 insertions(+), 19 deletions(-)
 create mode 100644 fastn-core/tests/02-hello/output/fail_doc.ftd
 create mode 100644 fastn-core/tests/02-hello/output/index.ftd
 create mode 100644 fastn-core/tests/03-nested-document/output/index.ftd
 create mode 100644 fastn-core/tests/03-nested-document/output/nested/document.ftd
 create mode 100644 fastn-core/tests/03-nested-document/output/nested/index.ftd
 create mode 100644 fastn-core/tests/04-import-code-block/output/index.ftd
 create mode 100644 fastn-core/tests/04-import-code-block/output/lib.ftd
 create mode 100644 fastn-core/tests/05-hello-font/output/-/www.amitu.com/index-dark.jpg
 create mode 100644 fastn-core/tests/05-hello-font/output/index.ftd
 create mode 100644 fastn-core/tests/08-static-assets/output/index.ftd
 create mode 100644 fastn-core/tests/09-markdown-pages/output/index.ftd
 create mode 100644 fastn-core/tests/11-readme-with-index/output/index.ftd
 create mode 100644 fastn-core/tests/15-fpm-dependency-alias/output/index.ftd
 create mode 100644 fastn-core/tests/16-include-processor/output/index.ftd

diff --git a/fastn-core/src/commands/build.rs b/fastn-core/src/commands/build.rs
index a2fa53a07a..c9cc24cfc6 100644
--- a/fastn-core/src/commands/build.rs
+++ b/fastn-core/src/commands/build.rs
@@ -31,24 +31,26 @@ pub async fn build(
                 if !config
                     .ftd_edition
                     .eq(&fastn_core::config::FTDEdition::FTD2021)
-                    && doc.id.eq("FASTN.ftd")
                 {
-                    tokio::fs::copy(
+                    fastn_core::utils::copy(
                         config.root.join(doc.id.as_str()),
                         config.root.join(".build").join(doc.id.as_str()),
                     )
-                    .await?;
-
-                    fastn_core::utils::print_end(
-                        format!(
-                            "Processed {}/{}",
-                            config.package.name.as_str(),
-                            main.get_id()
-                        )
-                        .as_str(),
-                        start,
-                    );
-                    continue;
+                    .await
+                    .ok();
+
+                    if doc.id.eq("FASTN.ftd") {
+                        fastn_core::utils::print_end(
+                            format!(
+                                "Processed {}/{}",
+                                config.package.name.as_str(),
+                                main.get_id()
+                            )
+                            .as_str(),
+                            start,
+                        );
+                        continue;
+                    }
                 }
                 let resp = fastn_core::package::package_doc::process_ftd(
                     config, doc, base_url, no_static, test,
diff --git a/fastn-core/src/commands/serve.rs b/fastn-core/src/commands/serve.rs
index 68eb0a1683..fda1c85fa7 100644
--- a/fastn-core/src/commands/serve.rs
+++ b/fastn-core/src/commands/serve.rs
@@ -70,6 +70,9 @@ async fn serve_file(
 
     match f {
         fastn_core::File::Ftd(main_document) => {
+            if fastn_core::utils::is_ftd_path(path.as_str()) {
+                return fastn_core::http::ok(main_document.content.as_bytes().to_vec());
+            }
             match fastn_core::package::package_doc::read_ftd(
                 config,
                 &main_document,
diff --git a/fastn-core/src/package/mod.rs b/fastn-core/src/package/mod.rs
index 74649129db..255e94589f 100644
--- a/fastn-core/src/package/mod.rs
+++ b/fastn-core/src/package/mod.rs
@@ -719,14 +719,14 @@ impl PackageTemp {
             .collect::<Vec<Package>>();
 
         Package {
-            name: self.name,
+            name: self.name.clone(),
             versioned: self.versioned,
             translation_of: Box::new(translation_of),
             translations,
             language: self.language,
             about: self.about,
             zip: self.zip,
-            download_base_url: self.download_base_url,
+            download_base_url: self.download_base_url.or(Some(self.name)),
             translation_status_summary: None,
             canonical_url: self.canonical_url,
             dependencies: vec![],
diff --git a/fastn-core/src/utils.rs b/fastn-core/src/utils.rs
index 6c8afc9812..62f5462b98 100644
--- a/fastn-core/src/utils.rs
+++ b/fastn-core/src/utils.rs
@@ -778,3 +778,7 @@ mod tests {
 pub fn ignore_headers() -> Vec<&'static str> {
     vec!["host", "x-forwarded-ssl"]
 }
+
+pub(crate) fn is_ftd_path(path: &str) -> bool {
+    path.trim_matches('/').ends_with(".ftd")
+}
diff --git a/fastn-core/tests/02-hello/output/fail_doc.ftd b/fastn-core/tests/02-hello/output/fail_doc.ftd
new file mode 100644
index 0000000000..367858c453
--- /dev/null
+++ b/fastn-core/tests/02-hello/output/fail_doc.ftd
@@ -0,0 +1,3 @@
+-- import: xyz
+
+-- xyz.dummy_component: Caption
\ No newline at end of file
diff --git a/fastn-core/tests/02-hello/output/index.ftd b/fastn-core/tests/02-hello/output/index.ftd
new file mode 100644
index 0000000000..1e053848fc
--- /dev/null
+++ b/fastn-core/tests/02-hello/output/index.ftd
@@ -0,0 +1,34 @@
+-- ftd.text: hello
+
+-- ftd.text: Hello World
+region: h2
+role: $rtype
+
+
+-- ftd.text: hello_h1
+region: h1
+role: $inherited.types.copy-regular
+color: $inherited.colors.text
+
+-- ftd.text: hello_h0
+region: h3
+role: $dtype
+
+
+-- ftd.type dtype:
+size.px: 40
+weight: 700
+font-family: cursive
+line-height.px: 65
+letter-spacing.px: 5
+
+-- ftd.type mtype:
+size.px: 20
+weight: 100
+font-family: fantasy
+line-height.px: 35
+letter-spacing.px: 3
+
+-- ftd.responsive-type rtype:
+desktop: $dtype
+mobile: $mtype
diff --git a/fastn-core/tests/03-nested-document/output/index.ftd b/fastn-core/tests/03-nested-document/output/index.ftd
new file mode 100644
index 0000000000..5de3d8278d
--- /dev/null
+++ b/fastn-core/tests/03-nested-document/output/index.ftd
@@ -0,0 +1 @@
+-- ftd.text: hello
\ No newline at end of file
diff --git a/fastn-core/tests/03-nested-document/output/nested/document.ftd b/fastn-core/tests/03-nested-document/output/nested/document.ftd
new file mode 100644
index 0000000000..106dd51909
--- /dev/null
+++ b/fastn-core/tests/03-nested-document/output/nested/document.ftd
@@ -0,0 +1 @@
+-- ftd.text: nested document
\ No newline at end of file
diff --git a/fastn-core/tests/03-nested-document/output/nested/index.ftd b/fastn-core/tests/03-nested-document/output/nested/index.ftd
new file mode 100644
index 0000000000..f0505cd6da
--- /dev/null
+++ b/fastn-core/tests/03-nested-document/output/nested/index.ftd
@@ -0,0 +1 @@
+-- ftd.text: This should be rendered inside amitu/nested/index/index.html
\ No newline at end of file
diff --git a/fastn-core/tests/04-import-code-block/output/index.ftd b/fastn-core/tests/04-import-code-block/output/index.ftd
new file mode 100644
index 0000000000..1333b02a94
--- /dev/null
+++ b/fastn-core/tests/04-import-code-block/output/index.ftd
@@ -0,0 +1,11 @@
+-- import: amitu/lib
+-- import: fifthtry.github.io/package-doc/typography as pd
+
+-- lib.block:
+
+-- pd.h1: Heading 1
+
+Heading 1 content
+
+
+-- end: lib.block
diff --git a/fastn-core/tests/04-import-code-block/output/lib.ftd b/fastn-core/tests/04-import-code-block/output/lib.ftd
new file mode 100644
index 0000000000..ff90f1093f
--- /dev/null
+++ b/fastn-core/tests/04-import-code-block/output/lib.ftd
@@ -0,0 +1,10 @@
+-- component block:
+children wrapper:
+
+-- ftd.row:
+background.solid: #000000
+children: $block.wrapper
+
+-- end: ftd.row
+
+-- end: block
diff --git a/fastn-core/tests/05-hello-font/cmd.p1 b/fastn-core/tests/05-hello-font/cmd.p1
index 8443e44cf5..56bb01c17d 100644
--- a/fastn-core/tests/05-hello-font/cmd.p1
+++ b/fastn-core/tests/05-hello-font/cmd.p1
@@ -9,6 +9,7 @@ Processing www.amitu.com/hello.py ... done in <omitted>
 Processing www.amitu.com/hello/world/test.py ... done in <omitted>
 Processing www.amitu.com/index ... done in <omitted>
 Processing www.amitu.com/index.ftd ... Processing www.amitu.com/index.jpg ... done in <omitted>
+Processing www.amitu.com/index-dark.jpg ... done in <omitted>
 Processing www.amitu.com/index.ftd ... done in <omitted>
 Processing www.amitu.com/hello/world/test.py ... done in <omitted>
 Processing www.amitu.com/hello.py ... done in <omitted>
diff --git a/fastn-core/tests/05-hello-font/output/-/www.amitu.com/index-dark.jpg b/fastn-core/tests/05-hello-font/output/-/www.amitu.com/index-dark.jpg
new file mode 100644
index 0000000000..dddefe1fb1
--- /dev/null
+++ b/fastn-core/tests/05-hello-font/output/-/www.amitu.com/index-dark.jpg
@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>Form Error: {"id": "user not logged in"}</title>
+
+  
+
+    <!-- Primary Meta Tags -->
+    
+    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=no, user-scalable=0,  viewport-fit=cover">
+    <meta name="title" content="Form Error: {"id": "user not logged in"}">
+    
+    
+    
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    
+    <meta property="og:title" content="Form Error: {"id": "user not logged in"}">
+    
+    
+
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image">
+    
+    
+    
+    
+        
+
+  <link rel="stylesheet" href="/static/katex/katex.min.css"
+    integrity="sha384-Cqd8ihRLum0CCg8rz0hYKPoLZ3uw+gES2rXQXycqnL5pgVQIflxAUDS7ZSjITLb5">
+
+  <script id="data" type="application/json">
+      {
+  "id": "Pages.NotFound",
+  "config": {
+    "base": {
+      "user": null,
+      "build": "2021-11-29T05:42:56: 59a513706988adda455615201b716e202be22bcf",
+      "switcher": null,
+      "collections": [],
+      "in_library": [],
+      "current_collection": null,
+      "recent": [],
+      "likes": [],
+      "notifications": [],
+      "is_hosted": true,
+      "font_url": "https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900\u0026display=swap",
+      "font_name": "Lato"
+    },
+    "message": "Form Error: {\"id\": \"user not logged in\"}",
+    "url": "/index-dark.jpg"
+  },
+  "title": "Form Error: {\"id\": \"user not logged in\"}",
+  "url": "/index-dark.jpg",
+  "replace": null,
+  "redirect": null,
+  "cache": {
+    "etag": null,
+    "purge_caches": [],
+    "id": "default"
+  },
+  "hash": "hashed-2021-11-29-05-34-06-e9da9d924c",
+  "pure": false,
+  "pure_mode": "",
+  "trace": null,
+  "dev": false,
+  "domain": "https://www.fifthtry.com"
+}
+    </script>
+  
+
+  <style>
+    pre {
+      white-space: break-spaces;
+    }
+
+    pre code {
+      overflow-x: auto;
+      display: block;
+      padding: 10px !important;
+    }
+
+    p {
+      margin: 0;
+    }
+
+    ul {
+      margin: 0;
+    }
+
+    .ft_md ul,
+    .ft_md ol,
+    .ft_md p {
+      margin: 10px 0;
+    }
+
+    .ft_md h1,
+    .ft_md h2,
+    .ft_md h3,
+    .ft_md h4,
+    .ft_md h5 {
+      margin-top: 34px;
+      margin-bottom: 0;
+      line-height: 1.2em;
+      color: #000000;
+    }
+
+    .ft_md ul ul,
+    .ft_md ul ol,
+    .ft_md ol ul,
+    .ft_md ol ol {
+      line-height: 1.5em;
+      margin: 0;
+    }
+
+    .ft_md ul li,
+    .ft_md ol li,
+    .ft_md ul ol li .ft_md ul ul li .ft_md ol ul li .ft_md ol ol li {
+      position: relative;
+      padding-left: 32px;
+      margin: 4px 0;
+    }
+
+    .ft_md ul {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    .ft_md ol {
+      list-style: none;
+      padding-left: 0;
+      counter-reset: item;
+    }
+
+    .ft_md ol li:before,
+    .ft_md ol ol li:before,
+    .ft_md ul ol li:before {
+      content: counter(item);
+      counter-increment: item;
+      background-color: #e4e9eb;
+      color: #000000;
+      font-size: 11px;
+      line-height: 10px;
+      text-align: center;
+      padding: 4px 0;
+      height: 10px;
+      width: 18px;
+      border-radius: 10px;
+      position: absolute;
+      left: 0;
+      top: 5px;
+    }
+
+    .ft_md ul li::before,
+    .ft_md ul ul li::before,
+    .ft_md ol ul li::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      left: 8px;
+      top: 10px;
+      border-radius: 50%;
+      background: #c1c8ce;
+    }
+
+    .ft_md a {
+      color: #0047b4;
+      text-decoration: none;
+    }
+
+    .ft_md a:visited {
+      color: #632ec4;
+    }
+
+    .ft_md a:hover {
+      text-decoration: none;
+    }
+
+    .ft_md code {
+      font-size: 0.9em;
+      padding: 0.1em 0.25em;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+    }
+
+    .ft_md blockquote {
+      padding: 0.25em 1em;
+      margin: 1em 0;
+      background-color: #f0f0f0;
+      border-radius: 3px;
+    }
+
+    .ft_md blockquote>blockquote {
+      margin: 0;
+    }
+
+    #ft_textarea {
+      white-space: pre !important;
+      overflow-wrap: normal;
+      overflow-x: scroll;
+      word-wrap: normal;
+    }
+
+    .ft_md table {
+      margin: 1em 0;
+    }
+
+    .ft_md td,
+    .ft_md th {
+      padding: 8px;
+    }
+
+    .ft_md tr:nth-child(even) {
+      background-color: #fff6ee;
+    }
+
+    .ft_md tr:hover {
+      background-color: #eee;
+    }
+
+    .ft_md th {
+      padding-top: 12px;
+      padding-bottom: 12px;
+      text-align: left;
+      background-color: #fff3e8;
+    }
+
+    .no_wrap {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+
+    .ft_md_dark p {
+      margin: 0.75em 0;
+      line-height: 1.6em;
+    }
+
+    .ft_md_dark h1,
+    .ft_md_dark h2,
+    .ft_md_dark h3,
+    .ft_md_dark h4,
+    .ft_md_dark h5 {
+      margin-top: 34px;
+      margin-bottom: 0;
+      line-height: 1.2em;
+      color: #fff;
+    }
+
+    .ft_md_dark ul ul,
+    .ft_md_dark ul ol,
+    .ft_md_dark ol ul,
+    .ft_md_dark ol ol {
+      line-height: 1.5em;
+      margin: 0;
+    }
+
+    .ft_md_dark ul li,
+    .ft_md_dark ol li,
+    .ft_md_dark ul ol li .ft_md_dark ul ul li .ft_md_dark ol ul li .ft_md_dark ol ol li {
+      position: relative;
+      padding-left: 32px;
+      margin: 4px 0;
+    }
+
+    .ft_md_dark ul {
+      list-style: none;
+      padding-left: 0;
+      margin: 0.75em 0;
+      line-height: 1.6em;
+    }
+
+    .ft_md_dark ol {
+      list-style: none;
+      padding-left: 0;
+      margin: 0.75em 0;
+      line-height: 1.6em;
+      counter-reset: item;
+    }
+
+    .ft_md_dark ol li:before,
+    .ft_md_dark ol ol li:before,
+    .ft_md_dark ul ol li:before {
+      content: counter(item);
+      counter-increment: item;
+      background-color: #5b6176;
+      color: #ffffff;
+      font-size: 11px;
+      line-height: 10px;
+      text-align: center;
+      padding: 4px 0;
+      height: 10px;
+      width: 18px;
+      border-radius: 10px;
+      position: absolute;
+      left: 0;
+      top: 5px;
+    }
+
+    .ft_md_dark ul li::before,
+    .ft_md_dark ul ul li::before,
+    .ft_md_dark ol ul li::before {
+      content: "";
+      position: absolute;
+      width: 6px;
+      height: 6px;
+      left: 8px;
+      top: 10px;
+      border-radius: 50%;
+      background-color: #5b6176;
+    }
+
+    .ft_md_dark a {
+      color: #0047b4;
+      text-decoration: none;
+    }
+
+    .ft_md_dark a:visited {
+      color: #632ec4;
+    }
+
+    .ft_md_dark a:hover {
+      text-decoration: none;
+    }
+
+    .ft_md_dark code {
+      font-size: 0.9em;
+      padding: 0.1em 0.25em;
+      background-color: #f0f0f0;
+      border-radius: 4px;
+    }
+
+    .ft_md_dark blockquote {
+      padding: 0.25em 1em;
+      margin: 1em 0;
+      background-color: #f0f0f0;
+      border-radius: 3px;
+    }
+
+    .ft_md_dark blockquote>blockquote {
+      margin: 0;
+    }
+
+    #ft_textarea {
+      white-space: pre !important;
+      overflow-wrap: normal;
+      overflow-x: scroll;
+      word-wrap: normal;
+    }
+
+    .ft_md_dark table {
+      margin: 1em 0;
+    }
+
+    .ft_md_dark td,
+    .ft_md_dark th {
+      padding: 8px;
+    }
+
+    .ft_md_dark tr:nth-child(even) {
+      background-color: #fff6ee;
+    }
+
+    .ft_md_dark tr:hover {
+      background-color: #eee;
+    }
+
+    .ft_md_dark th {
+      padding-top: 12px;
+      padding-bottom: 12px;
+      text-align: left;
+      background-color: #fff3e8;
+    }
+
+    .ft_md_dark code {
+      font-size: 0.9em;
+      padding: 0.1em 0.25em;
+      background-color: #3c425f !important;
+      border-radius: 4px;
+    }
+
+    .ft_md_dark blockquote {
+      padding: 0.25em 1em;
+      margin: 1em 0;
+      background-color: #3c425f !important;
+      border-radius: 3px;
+    }
+
+    .ft_md_dark a {
+      color: #6c8eef;
+      text-decoration: none;
+    }
+
+    .ft_md_dark a:visited {
+      color: #6c8eef;
+    }
+
+    .ft_md_dark a:hover {
+      text-decoration: none;
+    }
+
+    @media print {
+        {
+        overflow: visible !important;
+      }
+
+      body {
+        margin-left: 10vw;
+      }
+
+      .no_print {
+        display: none !important;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  
+  <div id="main"></div>
+
+  <script>
+    // all ftd_utils are meant to be pure functions only: they can only depend on the
+// input passed, not on closures or global data etc
+let ftd_utils = {
+    is_visible: function (id, affected_id) {
+        return (document.querySelector(`[data-id="${affected_id}:${id}"]`).style.display !== "none");
+    },
+
+    box_shadow_value_null: function (value) {
+        return (value === "0px 0px 0px 0px") ? null : value;
+    },
+
+    box_shadow_value: function (parameter, data_id, value) {
+        let current_value  = document.querySelector(`[data-id="${data_id}"]`).style.getPropertyValue('box-shadow');
+        if (current_value.length === 0) {
+            current_value = "0px 0px 0px 0px";
+        }
+        let first_split = current_value.split(') ');
+        if (first_split.length === 1) {
+            first_split.unshift('');
+        } else {
+            first_split[0] = `${first_split[0]})`;
+        }
+        if (parameter === "shadow-color") {
+            if (value === null) {
+                return ftd_utils.box_shadow_value_null(first_split[1].trim());
+            }
+            first_split[0] = value;
+            return ftd_utils.box_shadow_value_null(first_split.join(' ').trim());
+        }
+        let second_split =  first_split[1].split(' ');
+        if (parameter === "shadow-offset-x") {
+            second_split[0] = value !== null ? value : '0px' ;
+            first_split[1] = second_split.join(' ');
+            return ftd_utils.box_shadow_value_null(first_split.join(' ').trim());
+        }
+        if (parameter === "shadow-offset-y") {
+            second_split[1] = value !== null ? value : '0px' ;
+            first_split[1] = second_split.join(' ');
+            return ftd_utils.box_shadow_value_null(first_split.join(' ').trim());
+        }
+        if (parameter === "shadow-blur") {
+            second_split[2] = value !== null ? value : '0px' ;
+            first_split[1] = second_split.join(' ');
+            return ftd_utils.box_shadow_value_null(first_split.join(' ').trim());
+        }
+        if (parameter === "shadow-size") {
+            second_split[3] = value !== null ? value : '0px' ;
+            first_split[1] = second_split.join(' ');
+            return ftd_utils.box_shadow_value_null(first_split.join(' ').trim());
+        }
+    },
+
+    align_value: function (data_id, value) {
+        let current_position  = document.querySelector(`[data-id="${data_id}"]`).style.getPropertyValue('position');
+        if (current_position === "fixed" || current_position === "absolute") {
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('right', null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('bottom', null);
+            if (value === "center") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', 'translate(-50%,-50%)');
+            } else if (value === "top") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', 'translateX(-50%)');
+            } else if (value === "left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', 'translateY(-50%)');
+            } else if (value === "right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('right', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', 'translate(-50%)');
+            } else if (value === "bottom") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '50%');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('bottom', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('transform', 'translateX(-50%)');
+            } else if (value === "top-left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '0');
+            } else if (value === "top-right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('right', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('top', '0');
+            } else if (value === "bottom-left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('left', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('bottom', '0');
+            } else if (value === "bottom-right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('right', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('bottom', '0');
+            }
+        } else {
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom',null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top',null);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-left',null);
+            if (value === "center") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'center');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', 'auto');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+            } else if (value === "top") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'center');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', 'auto');
+            } else if (value === "left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-start');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', 'auto');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+            } else if (value === "right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-end');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', 'auto');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-left', 'auto');
+            } else if (value === "bottom") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'center');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+            } else if (value === "top-left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-start');
+            } else if (value === "top-right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-end');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-left', 'auto');
+            } else if (value === "bottom-left") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-start');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+            } else if (value === "bottom-right") {
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('align-self', 'flex-end');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-bottom', '0');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-top', 'auto');
+                document.querySelector(`[data-id="${data_id}"]`).style.setProperty('margin-left', 'auto');
+            }
+        }
+
+    },
+
+    line_clamp: function (data_id, value) {
+        let doc = document.querySelector(`[data-id="${data_id}"]`);
+        if (value == null) {
+            doc.style.setProperty('display', null);
+            doc.style.setProperty('overflow', null);
+            doc.style.setProperty('-webkit-line-clamp', null);
+            doc.style.setProperty('-webkit-box-orient', null);
+        } else {
+            doc.style.setProperty('display', '-webkit-box');
+            doc.style.setProperty('overflow', 'hidden');
+            doc.style.setProperty('-webkit-line-clamp', value);
+            doc.style.setProperty('-webkit-box-orient', 'vertical');
+        }
+    },
+
+    background_image: function (data_id, value) {
+        let background_repeat = document.querySelector(`[data-id="${data_id}"]`).style.getPropertyValue('background-repeat');
+        let doc = document.querySelector(`[data-id="${data_id}"]`);
+        if (value == null) {
+            doc.style.setProperty('background-image', null);
+            doc.style.setProperty('background-size', null);
+            doc.style.setProperty('background-position', null);
+        } else {
+            doc.style.setProperty('background-image', `url(${value})`);
+            if (background_repeat.length === 0) {
+                doc.style.setProperty('background-size', 'cover');
+                doc.style.setProperty('background-position', 'center');
+            }
+        }
+    },
+
+    background_repeat: function (data_id, value) {
+        let doc = document.querySelector(`[data-id="${data_id}"]`);
+        if (value == null) {
+            doc.style.setProperty('background-repeat', null);
+            doc.style.setProperty('background-size', 'cover');
+            doc.style.setProperty('background-position', 'center');
+        } else {
+            doc.style.setProperty('background-repeat', 'repeat');
+            doc.style.setProperty('background-size', null);
+            doc.style.setProperty('background-position', null);
+        }
+    },
+
+    first_child_styling: function (data_id) {
+        let parent = document.querySelector(`[data-id="${data_id}"]`).parentElement;
+        if (parent.dataset.spacing !== undefined) {
+            let spacing = parent.dataset.spacing.split(":");
+            let property = spacing[0].trim();
+            let value = spacing[1].trim();
+            let first_child = true;
+            for (let i = 0; i < parent.children.length; i++) {
+                if (!first_child) {
+                    parent.children[i].style.setProperty(property, value);
+                } else if (parent.children[i].style.display !== 'none') {
+                    parent.children[i].style.setProperty(property, null);
+                    first_child = false;
+                }
+            }
+        }
+    },
+
+
+    set_style: function (parameter, data_id, value, important) {
+        if (["shadow-offset-x", "shadow-offset-y", "shadow-size", "shadow-blur", "shadow-color"].includes(parameter)) {
+            let box_shadow_value = ftd_utils.box_shadow_value(parameter,data_id, value);
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty('box-shadow', box_shadow_value);
+        } else if (parameter === "align" || parameter === "position") {
+            ftd_utils.align_value(data_id, value);
+        } else if (parameter === "line-clamp") {
+            ftd_utils.line_clamp(data_id, value);
+        } else if (parameter === "background-image") {
+            ftd_utils.background_image(data_id, value);
+        } else if (parameter === "background-repeat") {
+            ftd_utils.background_repeat(data_id, value);
+        } else if (important) {
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty(`${parameter}`, value, 'important');
+        } else {
+            document.querySelector(`[data-id="${data_id}"]`).style.setProperty(`${parameter}`, value);
+        }
+    },
+
+    handle_action: function (id, target, value, data) {
+        data[target].value = value.toString();
+
+        let dependencies = data[target].dependencies;
+        for (const dependency in dependencies) {
+            if (!dependencies.hasOwnProperty(dependency)) {
+                continue;
+            }
+            let json_dependencies = JSON.parse(dependencies[dependency]);
+            var styles_edited = [];
+            for (const index in json_dependencies) {
+                let json_dependency = json_dependencies[index];
+                if (json_dependency.dependency_type === "Value") {
+                    document.querySelector(`[data-id="${dependency}:${id}"]`).innerText = data[target].value;
+                } else if (json_dependency.dependency_type === "Visible") {
+                    let display = "none";
+                    if (data[target].value === json_dependency.condition) {
+                        let is_flex = document.querySelector(`[data-id="${dependency}:${id}"]`).style.flexDirection.length;
+                        let is_webkit = document.querySelector(`[data-id="${dependency}:${id}"]`).style.webkitLineClamp.length;
+                        if (is_flex) {
+                            display = "flex";
+                        } else if (is_webkit) {
+                            display = "-webkit-box";
+                        } else {
+                            display = "block";
+                        }
+                    }
+                    document.querySelector(`[data-id="${dependency}:${id}"]`).style.display = display;
+                    ftd_utils.first_child_styling(`${dependency}:${id}`);
+
+                } else if (json_dependency.dependency_type === "Style") {
+                    if (data[target].value === json_dependency.condition) {
+                        for (const parameter in json_dependency.parameters) {
+                            let value = json_dependency.parameters[`${parameter}`].value.value;
+                            let important = json_dependency.parameters[`${parameter}`].value.important;
+                            ftd_utils.set_style(parameter, `${dependency}:${id}`, value, important);
+                            if (!styles_edited.includes(parameter)) {
+                                styles_edited.push(parameter);
+                            }
+                        }
+                    } else {
+                        for (const parameter in json_dependency.parameters) {
+                            let default_value = json_dependency.parameters[`${parameter}`].default;
+                            if (!styles_edited.includes(parameter)) {
+                                if (default_value === null) {
+                                    if (["border-left-width", "border-right-width", "border-top-width", "border-bottom-width"].includes(parameter)) {
+                                        default_value = "0px";
+                                        document.querySelector(`[data-id="${dependency}:${id}"]`).style[`${parameter}`] = default_value;
+                                    } else {
+                                        ftd_utils.set_style(parameter, `${dependency}:${id}`, default_value, false);
+                                    }
+                                } else {
+                                    let value = default_value.value;
+                                    let important = default_value.important;
+                                    ftd_utils.set_style(parameter, `${dependency}:${id}`, value, important);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+};
+
+window.ftd = (function () {
+    let ftd_data = {};
+    let ftd_external_children = {};
+
+    function external_children_replace(id) {
+        let external_children = ftd_external_children[id];
+        for (const object in external_children) {
+            if (!external_children.hasOwnProperty(object)) {
+                continue;
+            }
+
+            let conditions = external_children[object];
+            for (const idx in conditions) {
+                if (!conditions.hasOwnProperty(idx)) {
+                    continue;
+                }
+
+                let condition = conditions[idx].condition;
+                let set_at = conditions[idx].set_at;
+                let display = true;
+                for (const i in condition) {
+                    if (!condition.hasOwnProperty(i)) {
+                        continue;
+                    }
+
+                    display &= ftd_utils.is_visible(id, conditions[idx].condition[i])
+                    if (!display) {
+                        break;
+                    }
+                }
+                if (display) {
+                    console.log(`${object}::: ${set_at}`);
+                    let get_element_set_at = document.querySelector(`[data-id="${set_at}:${id}"]`);
+                    let objects_to_set = document.querySelectorAll(`[data-ext-id="${object}:${id}"]`);
+                    for (let i = 0; i < objects_to_set.length; i++) {
+                        let object_to_set = objects_to_set[i];
+                        let parent = object_to_set.parentElement;
+                        if (parent !== get_element_set_at) {
+                            get_element_set_at.appendChild(object_to_set);
+                        }
+                    }
+                    return;
+                }
+            }
+
+        }
+    }
+
+    function handle_event(evt, id, action) {
+        let act = action["action"];
+        let data = ftd_data[id];
+        if (act === "stop-propagation") {
+            evt.stopPropagation();
+        } else if (act === "prevent-default") {
+            evt.preventDefault();
+        } else if (act === "toggle") {
+            let target = action["target"];
+            exports.set_bool(id, target, data[target].value !== 'true');
+        } else if (act === "increment") {
+            let target = action["target"];
+            let increment = 1;
+            if (action["parameters"].by !== undefined) {
+                increment = parseInt(action["parameters"].by[0]);
+            }
+            let clamp_max = undefined;
+            let clamp_min = undefined;
+            if (action["parameters"]["clamp"] !== undefined) {
+                let clamp_value = action["parameters"]["clamp"];
+                if (clamp_value.length === 1) {
+                    clamp_max = parseInt(clamp_value[0]);
+                }
+                if (clamp_value.length === 2) {
+                    clamp_min = parseInt(clamp_value[0]);
+                    clamp_max = parseInt(clamp_value[1]);
+                }
+            }
+            exports.increment_decrement_value(id, target, increment, clamp_min, clamp_max);
+
+        } else if (act === "decrement") {
+            let target = action["target"];
+            let decrement = -1;
+            if (action["parameters"].by !== undefined) {
+                decrement = -parseInt(action["parameters"].by[0]);
+            }
+
+            let clamp_max = undefined;
+            let clamp_min = undefined;
+            if (action["parameters"]["clamp"] !== undefined) {
+                let clamp_value = action["parameters"]["clamp"];
+                if (clamp_value.length === 1) {
+                    clamp_max = parseInt(clamp_value[0]);
+                }
+                if (clamp_value.length === 2) {
+                    clamp_min = parseInt(clamp_value[0]);
+                    clamp_max = parseInt(clamp_value[1]);
+                }
+            }
+
+            exports.increment_decrement_value(id, target, decrement, clamp_min, clamp_max);
+        } else if (act === "set-value") {
+            let target = action["target"];
+            let value = action["parameters"].value[0];
+            if (action["parameters"].value[1] === "integer") {
+                value = parseInt(value);
+            } else if (action["parameters"].value[1] === "decimal") {
+                value = parseFloat(value);
+            } else if (action["parameters"].value[1] === "boolean") {
+                value = (value === "true");
+            }
+
+            let data = ftd_data[id];
+            ftd_utils.handle_action(id, target, value, data);
+
+        } else {
+            console.log("unknown action:", act);
+            return;
+        }
+        external_children_replace(id);
+
+    }
+
+    let exports = {};
+
+    exports.handle_event = function (evt, id, event) {
+        console.log(id, event);
+        let actions = JSON.parse(event);
+        for (const action in actions) {
+            handle_event(evt, id, actions[action])
+        }
+    }
+
+    exports.increment_decrement_value = function (id, variable, increment_by, clamp_min, clamp_max) {
+        let data = ftd_data[id];
+
+        if (!data[variable]) {
+            console.log(variable, "is not in data, ignoring");
+            return;
+        }
+
+        let value = parseInt(data[variable].value);
+        value += increment_by;
+
+        if (clamp_max !== undefined) {
+            let min = (clamp_min === undefined) ? 0: clamp_min
+            if (clamp_max < value) {
+                value = min;
+            }
+            if (clamp_min > value) {
+                value = clamp_max;
+            }
+        }
+
+        ftd_utils.handle_action(id, variable, value, data);
+    }
+
+    exports.set_bool = function (id, variable, value) {
+        let data = ftd_data[id];
+
+        if (!data[variable]) {
+            console.log(variable, "is not in data, ignoring");
+            return;
+        }
+
+        ftd_utils.handle_action(id, variable, value, data);
+    }
+
+    exports.set_multi_value = function (id, list) {
+        for (const idx in list) {
+            if (!list.hasOwnProperty(idx)) {
+                continue;
+            }
+
+            let item = list[idx];
+            let [variable, value] = item;
+            this.set_bool(id, variable, value);
+        }
+    }
+
+    exports.init = function (id, data, external_children) {
+        ftd_data[id] = data;
+        ftd_external_children[id] = external_children;
+    }
+
+    return exports;
+})();
+
+  </script>
+  <script src='/static/hashed-2021-11-29-05-34-06-e9da9d924c/elm.js'></script>
+</body>
+
+</html>
diff --git a/fastn-core/tests/05-hello-font/output/index.ftd b/fastn-core/tests/05-hello-font/output/index.ftd
new file mode 100644
index 0000000000..c728db0c74
--- /dev/null
+++ b/fastn-core/tests/05-hello-font/output/index.ftd
@@ -0,0 +1,49 @@
+-- import: www.amitu.com/assets
+
+-- ftd.type roboto:
+font-family: $assets.fonts.Roboto
+size.px: 10
+weight: 100
+line-height.px: 10
+letter-spacing.px: 5
+
+-- ftd.type myFirstFont:
+font: $assets.fonts.myFirstFont
+size.px: 10
+weight: 100
+line-height.px: 10
+letter-spacing.px: 5
+
+-- ftd.text: hello
+role: $roboto
+
+-- ftd.text: hello
+role: $myFirstFont
+
+-- ftd.image:
+src: $assets.files.index.jpg
+
+-- ftd.text:
+text: $assets.files.index.jpg.dark
+
+
+-- ftd.text:
+text: $assets.files.index.jpg.light
+
+-- ftd.text:
+text: $assets.files.index.ftd
+
+-- ftd.text:
+text: $assets.files.hello.world.test.py
+
+-- ftd.text:
+text: $assets.files.hello.world.test.py
+
+-- ftd.text:
+text: $assets.files.hello.py
+
+-- ftd.text:
+text: $assets.files.hello.py
+
+-- ftd.text:
+text: $assets.files.index
diff --git a/fastn-core/tests/05-hello-font/output/index.html b/fastn-core/tests/05-hello-font/output/index.html
index bdd47c5383..a15a5678ca 100644
--- a/fastn-core/tests/05-hello-font/output/index.html
+++ b/fastn-core/tests/05-hello-font/output/index.html
@@ -539,10 +539,10 @@
 "www.amitu.com/assets#files.index": "-/www.amitu.com/index",
 "www.amitu.com/assets#files.index.ftd": "-/www.amitu.com/index.ftd",
 "www.amitu.com/assets#files.index.jpg": {
-"dark": "-/www.amitu.com/index.jpg",
+"dark": "-/www.amitu.com/index-dark.jpg",
 "light": "-/www.amitu.com/index.jpg"
 },
-"www.amitu.com/assets#files.index.jpg.dark": "-/www.amitu.com/index.jpg",
+"www.amitu.com/assets#files.index.jpg.dark": "-/www.amitu.com/index-dark.jpg",
 "www.amitu.com/assets#files.index.jpg.light": "-/www.amitu.com/index.jpg",
 "www.amitu.com/assets#fonts": {
 "Roboto": "www-amitu-com-Roboto",
@@ -726,7 +726,7 @@
 </head>
 <body style="height: 100%; margin: 0;">
 
-<div data-id="main" style="align-items: start; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; justify-content: start; text-decoration: none; width: 100%" ><div data-id="0:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; font-family: www-amitu-com-Roboto; font-size: 10px; font-weight: 100; height: auto; letter-spacing: 5px; line-height: 10px; text-decoration: none; width: auto" class="ft_md"><p>hello</p></div><div data-id="1:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; font-size: 10px; font-weight: 100; height: auto; letter-spacing: 5px; line-height: 10px; text-decoration: none; width: auto" class="ft_md"><p>hello</p></div><img data-id="2:main" src="-/www.amitu.com/index.jpg" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" ></img><div data-id="3:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index.jpg</p></div><div data-id="4:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index.jpg</p></div><div data-id="5:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index.ftd</p></div><div data-id="6:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello/world/test.py</p></div><div data-id="7:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello/world/test.py</p></div><div data-id="8:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello.py</p></div><div data-id="9:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello.py</p></div><div data-id="10:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index</p></div></div><style>@font-face { unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+<div data-id="main" style="align-items: start; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; display: flex; flex-direction: column; height: 100%; justify-content: start; text-decoration: none; width: 100%" ><div data-id="0:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; font-family: www-amitu-com-Roboto; font-size: 10px; font-weight: 100; height: auto; letter-spacing: 5px; line-height: 10px; text-decoration: none; width: auto" class="ft_md"><p>hello</p></div><div data-id="1:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; font-size: 10px; font-weight: 100; height: auto; letter-spacing: 5px; line-height: 10px; text-decoration: none; width: auto" class="ft_md"><p>hello</p></div><img data-id="2:main" src="-/www.amitu.com/index.jpg" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" ></img><div data-id="3:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index-dark.jpg</p></div><div data-id="4:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index.jpg</p></div><div data-id="5:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index.ftd</p></div><div data-id="6:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello/world/test.py</p></div><div data-id="7:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello/world/test.py</p></div><div data-id="8:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello.py</p></div><div data-id="9:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/hello.py</p></div><div data-id="10:main" style="border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-style: solid; border-top-width: 0px; box-sizing: border-box; height: auto; text-decoration: none; width: auto" class="ft_md"><p>-/www.amitu.com/index</p></div></div><style>@font-face { unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 font-style: italic;
 font-weight: 300;
 src: url(https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmSU5fBBc4AMP6lQ.woff2) format('woff2');
diff --git a/fastn-core/tests/08-static-assets/output/index.ftd b/fastn-core/tests/08-static-assets/output/index.ftd
new file mode 100644
index 0000000000..5de3d8278d
--- /dev/null
+++ b/fastn-core/tests/08-static-assets/output/index.ftd
@@ -0,0 +1 @@
+-- ftd.text: hello
\ No newline at end of file
diff --git a/fastn-core/tests/09-markdown-pages/output/index.ftd b/fastn-core/tests/09-markdown-pages/output/index.ftd
new file mode 100644
index 0000000000..5de3d8278d
--- /dev/null
+++ b/fastn-core/tests/09-markdown-pages/output/index.ftd
@@ -0,0 +1 @@
+-- ftd.text: hello
\ No newline at end of file
diff --git a/fastn-core/tests/11-readme-with-index/output/index.ftd b/fastn-core/tests/11-readme-with-index/output/index.ftd
new file mode 100644
index 0000000000..ae8690d5c9
--- /dev/null
+++ b/fastn-core/tests/11-readme-with-index/output/index.ftd
@@ -0,0 +1 @@
+-- ftd.text: This file exists, so README.md should be rendered as README/index.html
\ No newline at end of file
diff --git a/fastn-core/tests/15-fpm-dependency-alias/output/index.ftd b/fastn-core/tests/15-fpm-dependency-alias/output/index.ftd
new file mode 100644
index 0000000000..815da614b6
--- /dev/null
+++ b/fastn-core/tests/15-fpm-dependency-alias/output/index.ftd
@@ -0,0 +1,5 @@
+-- import: fifthtry.github.io/package-doc/typography as pd
+
+-- pd.h1: Heading 1
+
+Heading 1 content
diff --git a/fastn-core/tests/16-include-processor/output/index.ftd b/fastn-core/tests/16-include-processor/output/index.ftd
new file mode 100644
index 0000000000..e3247b6f4f
--- /dev/null
+++ b/fastn-core/tests/16-include-processor/output/index.ftd
@@ -0,0 +1,7 @@
+-- import: fastn/processors as pr
+
+-- string document-id:
+$processor$: pr.document-id
+
+
+-- ftd.text: $document-id