From e7d67e84e9673f916c2da72996d985053c8c0eae Mon Sep 17 00:00:00 2001
From: Daniel Lautzenheiser <lautzd@gmail.com>
Date: Wed, 21 Dec 2022 14:38:26 -0500
Subject: [PATCH] Demo setup (#266)

---
 packages/app/webpack.config.js |   14 +-
 packages/demo/config.yml       | 1162 ++++++++++++++++++++++++++++++++
 packages/demo/example.css      |   21 +
 packages/demo/index.html       |  248 +++++++
 packages/demo/index.js         |  173 +++++
 yarn.lock                      |   30 +-
 6 files changed, 1622 insertions(+), 26 deletions(-)
 create mode 100644 packages/demo/config.yml
 create mode 100644 packages/demo/example.css
 create mode 100644 packages/demo/index.html
 create mode 100644 packages/demo/index.js

diff --git a/packages/app/webpack.config.js b/packages/app/webpack.config.js
index 03aa4296..0eadba40 100644
--- a/packages/app/webpack.config.js
+++ b/packages/app/webpack.config.js
@@ -94,18 +94,10 @@ module.exports = {
   ].filter(Boolean),
   output: {
     path: path.resolve(__dirname, 'dist'),
-    filename: 'static-cms-core.js',
+    filename: 'static-cms-app.js',
     library: {
-      name: 'StaticCmsCore',
+      name: 'StaticCmsApp',
       type: 'umd',
     },
-  },
-  devServer: {
-    static: {
-      directory: './dev-test',
-    },
-    host: '0.0.0.0',
-    port: devServerPort,
-    hot: true,
-  },
+  }
 };
diff --git a/packages/demo/config.yml b/packages/demo/config.yml
new file mode 100644
index 00000000..58e214ad
--- /dev/null
+++ b/packages/demo/config.yml
@@ -0,0 +1,1162 @@
+backend:
+  name: demo-repo
+site_url: 'https://staticjscms.netlify.app/'
+media_folder: assets/uploads
+locale: en
+collections:
+  - name: posts
+    label: Posts
+    label_singular: Post
+    description: >
+      The description is a great place for tone setting, high level information,
+      and editing guidelines that are specific to a collection.
+    folder: _posts
+    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
+    summary: '{{title}} -- {{year}}/{{month}}/{{day}}'
+    sortable_fields:
+      fields:
+        - title
+        - date
+      default:
+        field: title
+    create: true
+    view_filters:
+      - label: Posts With Index
+        field: title
+        pattern: 'This is post #'
+      - label: Posts Without Index
+        field: title
+        pattern: front matter post
+      - label: Drafts
+        field: draft
+        pattern: true
+    view_groups:
+      - label: Year
+        field: date
+        pattern: '\d{4}'
+      - label: Drafts
+        field: draft
+    fields:
+      - label: Title
+        name: title
+        widget: string
+      - label: Draft
+        name: draft
+        widget: boolean
+        default: false
+      - label: Publish Date
+        name: date
+        widget: datetime
+        date_format: yyyy-MM-dd
+        time_format: 'HH:mm'
+        format: "yyyy-MM-dd'T'HH:mm:ss.SSSXXX"
+      - label: Cover Image
+        name: image
+        widget: image
+        required: false
+      - label: Body
+        name: body
+        widget: markdown
+        hint: Main content goes here.
+  - name: faq
+    label: FAQ
+    folder: _faqs
+    create: true
+    editor:
+      frame: false
+    fields:
+      - label: Question
+        name: title
+        widget: string
+      - label: Answer
+        name: body
+        widget: markdown
+      - name: posts
+        label: Posts
+        label_singular: Post
+        widget: list
+        summary: "{{fields.post | split('|', '$1')}}"
+        fields:
+          - label: Related Post
+            name: post
+            widget: relationKitchenSinkPost
+            collection: posts
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: '{{title}}|{{date}}'
+  - name: widgets
+    label: Widgets
+    delete: false
+    files:
+      - name: boolean
+        label: Boolean
+        file: _widgets/boolean.json
+        description: Boolean widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: boolean
+          - name: with_default
+            label: Required With Default
+            widget: boolean
+            default: true
+          - name: pattern
+            label: Pattern Validation
+            widget: boolean
+            pattern: ['true', 'Must be true']
+            required: false
+      - name: code
+        label: Code
+        file: _widgets/code.json
+        description: Code widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: code
+          - name: with_default
+            label: Required With Default
+            widget: code
+            default: '<div>Some html!</div>'
+          - name: pattern
+            label: Pattern Validation
+            widget: code
+            pattern: ['.{12,}', 'Must have at least 12 characters']
+            allow_input: true
+            required: false
+          - name: language
+            label: Language Selection
+            widget: code
+            allow_language_selection: true
+            required: false
+          - name: language_with_default
+            label: Language Selection With Default Language
+            widget: code
+            allow_language_selection: true
+            required: false
+            default_language: html
+          - name: language_with_default_language_and_value
+            label: Language Selection With Default Language and Value
+            widget: code
+            allow_language_selection: true
+            required: false
+            default:
+              lang: html
+              code: '<div>Some html!</div>'
+          - name: language_with_default_language_and_value_string_default
+            label: Language Selection With Default Language and Value (String Default)
+            widget: code
+            allow_language_selection: true
+            required: false
+            default_language: html
+            default: '<div>Some html!</div>'
+      - name: color
+        label: Color
+        file: _widgets/color.json
+        description: Color widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: color
+          - name: with_default
+            label: Required With Default
+            widget: color
+            default: '#2121c5'
+          - name: pattern
+            label: Pattern Validation
+            widget: color
+            pattern: ['^#([0-9a-fA-F]{3})(?:[0-9a-fA-F]{3})?$', 'Must be a valid hex code']
+            allow_input: true
+            required: false
+          - name: alpha
+            label: Alpha
+            widget: color
+            enable_alpha: true
+            required: false
+          - name: alpha_with_default
+            label: Alpha With Default
+            widget: color
+            enable_alpha: true
+            required: false
+            default: 'rgba(175, 28, 28, 0.65)'
+      - name: datetime
+        label: DateTime
+        file: _widgets/datetime.json
+        description: DateTime widget
+        fields:
+          - name: required
+            label: 'Required Validation'
+            widget: datetime
+          - name: pattern
+            label: 'Pattern Validation'
+            widget: datetime
+            format: 'MMM d, yyyy h:mm aaa'
+            date_format: 'MMM d, yyyy'
+            time_format: 'h:mm aaa'
+            pattern: ['pm', 'Must be in the afternoon']
+            required: false
+          - name: date_and_time
+            label: Date and Time
+            widget: datetime
+            format: 'MMM d, yyyy h:mm aaa'
+            date_format: 'MMM d, yyyy'
+            time_format: 'h:mm aaa'
+            required: false
+          - name: date_and_time_with_default
+            label: Date and Time With Deafult
+            widget: datetime
+            format: 'MMM d, yyyy h:mm aaa'
+            date_format: 'MMM d, yyyy'
+            time_format: 'h:mm aaa'
+            required: false
+            default: 'Jan 12, 2023 12:00 am'
+          - name: date
+            label: Date
+            widget: datetime
+            format: 'MMM d, yyyy'
+            date_format: 'MMM d, yyyy'
+            required: false
+          - name: date_with_default
+            label: Date With Deafult
+            widget: datetime
+            format: 'MMM d, yyyy'
+            date_format: 'MMM d, yyyy'
+            required: false
+            default: 'Jan 12, 2023'
+          - name: time
+            label: Time
+            widget: datetime
+            format: 'h:mm aaa'
+            time_format: 'h:mm aaa'
+            required: false
+          - name: time_with_default
+            label: Time With Deafult
+            widget: datetime
+            format: 'h:mm aaa'
+            time_format: 'h:mm aaa'
+            required: false
+            default: '12:00 am'
+      - name: file
+        label: File
+        file: _widgets/file.json
+        description: File widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: file
+          - name: with_default
+            label: Required With Default
+            widget: file
+            default: /assets/uploads/moby-dick.jpg
+          - name: pattern
+            label: Pattern Validation
+            widget: file
+            pattern: ['\.pdf', 'Must be a pdf']
+            required: false
+          - name: choose_url
+            label: Choose URL
+            widget: file
+            required: false
+            media_library:
+              choose_url: true
+      - name: image
+        label: Image
+        file: _widgets/image.json
+        description: Image widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: image
+          - name: with_default
+            label: Required With Default
+            widget: image
+            default: /assets/uploads/moby-dick.jpg
+          - name: pattern
+            label: Pattern Validation
+            widget: image
+            pattern: ['\.png', 'Must be a png']
+            required: false
+          - name: choose_url
+            label: Choose URL
+            widget: image
+            required: false
+            media_library:
+              choose_url: true
+      - name: list
+        label: List
+        file: _widgets/list.yml
+        description: List widget
+        fields:
+          - name: list
+            label: Required List
+            widget: list
+            fields:
+              - label: Name
+                name: name
+                widget: string
+                hint: First and Last
+              - label: Description
+                name: description
+                widget: text
+          - name: with_default
+            label: Required With Default
+            widget: list
+            default:
+              - name: Bob Billy
+                description: Some text about bob
+            fields:
+              - label: Name
+                name: name
+                widget: string
+                hint: First and Last
+              - label: Description
+                name: description
+                widget: text
+          - name: optional
+            label: Optional List
+            widget: list
+            required: false
+            fields:
+              - label: Name
+                name: name
+                widget: string
+                hint: First and Last
+              - label: Description
+                name: description
+                widget: text
+          - name: typed_list
+            label: Typed List
+            widget: list
+            types:
+              - label: Type 1 Object
+                name: type_1_object
+                widget: object
+                fields:
+                  - label: String
+                    name: string
+                    widget: string
+                  - label: Boolean
+                    name: boolean
+                    widget: boolean
+                  - label: Text
+                    name: text
+                    widget: text
+              - label: Type 2 Object
+                name: type_2_object
+                widget: object
+                fields:
+                  - label: Number
+                    name: number
+                    widget: number
+                  - label: Select
+                    name: select
+                    widget: select
+                    options:
+                      - a
+                      - b
+                      - c
+                  - label: Datetime
+                    name: datetime
+                    widget: datetime
+                  - label: Markdown
+                    name: markdown
+                    widget: markdown
+              - label: Type 3 Object
+                name: type_3_object
+                widget: object
+                fields:
+                  - label: Image
+                    name: image
+                    widget: image
+                  - label: File
+                    name: file
+                    widget: file
+          - name: typed_list_with_default
+            label: Typed List With Default
+            widget: list
+            default:
+              - type: type_2_object
+                number: 5
+                select: c
+                datetime: '2022-12-05T20:22:52+0000'
+                markdown: Some ***Markdown*** ~content~ text
+            types:
+              - label: Type 1 Object
+                name: type_1_object
+                widget: object
+                fields:
+                  - label: String
+                    name: string
+                    widget: string
+                  - label: Boolean
+                    name: boolean
+                    widget: boolean
+                  - label: Text
+                    name: text
+                    widget: text
+              - label: Type 2 Object
+                name: type_2_object
+                widget: object
+                fields:
+                  - label: Number
+                    name: number
+                    widget: number
+                  - label: Select
+                    name: select
+                    widget: select
+                    options:
+                      - a
+                      - b
+                      - c
+                  - label: Datetime
+                    name: datetime
+                    widget: datetime
+                  - label: Markdown
+                    name: markdown
+                    widget: markdown
+              - label: Type 3 Object
+                name: type_3_object
+                widget: object
+                fields:
+                  - label: Image
+                    name: image
+                    widget: image
+                  - label: File
+                    name: file
+                    widget: file
+      - name: map
+        label: Map
+        file: _widgets/map.json
+        description: Map widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: map
+          - name: with_default
+            label: Required With Default
+            widget: map
+            default: '{ "type": "Point", "coordinates": [-73.9852661, 40.7478738] }'
+          - name: pattern
+            label: Pattern Validation
+            widget: map
+            pattern: ['\[-([7-9][0-9]|1[0-2][0-9])\.', 'Must be between latitude -70 and -129']
+            required: false
+      - name: markdown
+        label: Markdown
+        file: _widgets/markdown.json
+        description: Markdown widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: markdown
+          - name: with_default
+            label: Required With Default
+            widget: markdown
+            default: Default **markdown** value
+          - name: pattern
+            label: Pattern Validation
+            widget: markdown
+            pattern: ['# [a-zA-Z0-9]+', 'Must have a header']
+            required: false
+      - name: number
+        label: Number
+        file: _widgets/number.json
+        description: Number widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: number
+          - name: with_default
+            label: Required With Default
+            widget: number
+            default: 5
+          - name: min
+            label: Min Validation
+            widget: number
+            min: 5
+            required: false
+          - name: max
+            label: Max Validation
+            widget: number
+            max: 10
+            required: false
+          - name: min_and_max
+            label: Min and Max Validation
+            widget: number
+            min: 5
+            max: 10
+            required: false
+          - name: pattern
+            label: Pattern Validation
+            widget: number
+            pattern: ['[0-9]{3,}', 'Must be at least 3 digits']
+            required: false
+      - name: object
+        label: Object
+        file: _widgets/object.json
+        description: Object widget
+        fields:
+          - label: Required Validation
+            name: required
+            widget: object
+            fields:
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+              - label: Author
+                name: author
+                widget: string
+              - label: Thumbnail
+                name: thumb
+                widget: image
+          - label: Required With Defaults
+            name: with_defaults
+            widget: object
+            fields:
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+                default: 5
+              - label: Author
+                name: author
+                widget: string
+                default: Bob
+              - label: Thumbnail
+                name: thumb
+                widget: image
+                default: /assets/uploads/moby-dick.jpg
+          - label: Optional Validation
+            name: optional
+            widget: object
+            required: false
+            fields:
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+                required: false
+              - label: Author
+                name: author
+                widget: string
+                required: false
+              - label: Thumbnail
+                name: thumb
+                widget: image
+                required: false
+          - label: With Hidden Field
+            name: hidden_field
+            widget: object
+            required: false
+            fields:
+              - name: layout
+                widget: hidden
+                default: post
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+                required: false
+              - label: Author
+                name: author
+                widget: string
+                required: false
+              - label: Thumbnail
+                name: thumb
+                widget: image
+                required: false
+      - name: relation
+        label: Relation
+        file: _widgets/relation.json
+        description: Relation widget
+        fields:
+          - label: Required Validation
+            name: required
+            widget: relation
+            collection: posts
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: title
+          - label: Required With Default
+            name: with_default
+            widget: relation
+            collection: posts
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: title
+            default: This is a YAML front matter post
+          - label: Optional Validation
+            name: optional
+            widget: relation
+            required: false
+            collection: posts
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: title
+          - label: Multiple
+            name: multiple
+            widget: relation
+            multiple: true
+            required: false
+            collection: posts
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: title
+          - label: Multiple With Default
+            name: multiple_with_default
+            widget: relation
+            multiple: true
+            required: false
+            collection: posts
+            default:
+              - This is a JSON front matter post
+              - This is a YAML front matter post
+            display_fields:
+              - title
+              - date
+            search_fields:
+              - title
+              - body
+            value_field: title
+      - name: select
+        label: Select
+        file: _widgets/select.json
+        description: Select widget
+        fields:
+          - label: Required Validation
+            name: required
+            widget: select
+            options:
+              - a
+              - b
+              - c
+          - label: Required With Default
+            name: with_default
+            widget: select
+            default: b
+            options:
+              - a
+              - b
+              - c
+          - label: Pattern Validation
+            name: pattern
+            widget: select
+            options:
+              - a
+              - b
+              - c
+            pattern: ['[a-b]', 'Must be a or b']
+            required: false
+          - label: Number Value
+            name: number
+            widget: select
+            options:
+              - 1
+              - 2
+              - 3
+          - label: Number With Default
+            name: number_with_default
+            widget: select
+            default: 3
+            options:
+              - 1
+              - 2
+              - 3
+          - label: Value and Label
+            name: value_and_label
+            widget: select
+            options:
+              - value: a
+                label: A fancy label
+              - value: 2
+                label: Another fancy label
+              - value: c
+                label: And one more fancy label
+          - label: Value and Label With Default
+            name: value_and_label_with_default
+            widget: select
+            default: 2
+            options:
+              - value: a
+                label: A fancy label
+              - value: 2
+                label: Another fancy label
+              - value: c
+                label: And one more fancy label
+          - label: Multiple
+            name: multiple
+            widget: select
+            options:
+              - a
+              - b
+              - c
+            pattern: ['[a-b]', 'Must be a or b']
+            multiple: true
+            required: false
+          - label: Multiple With Default
+            name: multiple_with_default
+            widget: select
+            default:
+              - b
+              - c
+            options:
+              - a
+              - b
+              - c
+            pattern: ['[a-b]', 'Must be a or b']
+            multiple: true
+            required: false
+          - label: Value and Label Multiple
+            name: value_and_label_multiple
+            widget: select
+            multiple: true
+            options:
+              - value: a
+                label: A fancy label
+              - value: b
+                label: Another fancy label
+              - value: c
+                label: And one more fancy label
+      - name: string
+        label: String
+        file: _widgets/string.json
+        description: String widget
+        fields:
+          - name: required
+            label: Required Validation
+            widget: string
+          - name: with_default
+            label: Required With Default
+            widget: string
+            default: Default value
+          - name: pattern
+            label: Pattern Validation
+            widget: string
+            pattern: ['.{12,}', 'Must have at least 12 characters']
+            required: false
+      - name: text
+        label: Text
+        file: _widgets/text.json
+        description: Text widget
+        fields:
+          - name: required
+            label: 'Required Validation'
+            widget: text
+          - name: with_default
+            label: Required With Default
+            widget: text
+            default: Default value
+          - name: pattern
+            label: 'Pattern Validation'
+            widget: text
+            pattern: ['.{12,}', 'Must have at least 12 characters']
+            required: false
+  - name: settings
+    label: Settings
+    delete: false
+    editor:
+      preview: false
+    files:
+      - name: general
+        label: Site Settings
+        file: _data/settings.json
+        description: General Site Settings
+        editor:
+          preview: true
+        fields:
+          - label: Number of posts on frontpage
+            name: front_limit
+            widget: number
+            min: 1
+            max: 10
+          - label: Global title
+            name: site_title
+            widget: string
+          - label: Post Settings
+            name: posts
+            widget: object
+            fields:
+              - label: Number of posts on frontpage
+                name: front_limit
+                widget: number
+                min: 1
+                max: 10
+              - label: Default Author
+                name: author
+                widget: string
+              - label: Default Thumbnail
+                name: thumb
+                widget: image
+                required: false
+      - name: authors
+        label: Authors
+        file: _data/authors.yml
+        description: Author descriptions
+        editor:
+          preview: true
+        fields:
+          - name: authors
+            label: Authors
+            label_singular: Author
+            widget: list
+            fields:
+              - label: Name
+                name: name
+                widget: string
+                hint: First and Last
+              - label: Description
+                name: description
+                widget: text
+  - name: kitchenSink
+    label: Kitchen Sink
+    folder: _sink
+    create: true
+    fields:
+      - label: Related Post
+        name: post
+        widget: relationKitchenSinkPost
+        collection: posts
+        display_fields:
+          - title
+          - date
+        search_fields:
+          - title
+          - body
+        value_field: title
+      - label: Title
+        name: title
+        widget: string
+      - label: Boolean
+        name: boolean
+        widget: boolean
+        default: true
+      - label: Map
+        name: map
+        widget: map
+      - label: Text
+        name: text
+        widget: text
+        hint: 'Plain text, not markdown'
+      - label: Number
+        name: number
+        widget: number
+        hint: To infinity and beyond!
+      - label: Markdown
+        name: markdown
+        widget: markdown
+      - label: Datetime
+        name: datetime
+        widget: datetime
+      - label: Color
+        name: color
+        widget: color
+      - label: Color string editable and alpha enabled
+        name: colorEditable
+        widget: color
+        enable_alpha: true
+        allow_input: true
+      - label: Image
+        name: image
+        widget: image
+      - label: File
+        name: file
+        widget: file
+      - label: Select
+        name: select
+        widget: select
+        options:
+          - a
+          - b
+          - c
+      - label: Select multiple
+        name: select_multiple
+        widget: select
+        options:
+          - a
+          - b
+          - c
+        multiple: true
+      - label: Select numeric
+        name: select_numeric
+        widget: select
+        options:
+          - label: One
+            value: 1
+          - label: Two
+            value: 2
+          - label: Three
+            value: 3
+      - label: Select mixed string and numeric
+        name: select_mixed_string_numeric
+        widget: select
+        options:
+          - label: One
+            value: 'One'
+          - label: Two
+            value: 2
+          - label: Three
+            value: 3
+      - label: Hidden
+        name: hidden
+        widget: hidden
+        default: hidden
+      - label: Object
+        name: object
+        widget: object
+        collapsed: true
+        fields:
+          - label: Related Post
+            name: post
+            widget: relationKitchenSinkPost
+            collection: posts
+            search_fields:
+              - title
+              - body
+            value_field: title
+          - label: String
+            name: string
+            widget: string
+          - label: Boolean
+            name: boolean
+            widget: boolean
+            default: false
+          - label: Text
+            name: text
+            widget: text
+          - label: Number
+            name: number
+            widget: number
+          - label: Markdown
+            name: markdown
+            widget: markdown
+          - label: Datetime
+            name: datetime
+            widget: datetime
+          - label: Image
+            name: image
+            widget: image
+          - label: File
+            name: file
+            widget: file
+          - label: Select
+            name: select
+            widget: select
+            options:
+              - a
+              - b
+              - c
+      - label: List
+        name: list
+        widget: list
+        fields:
+          - label: String
+            name: string
+            widget: string
+          - label: Boolean
+            name: boolean
+            widget: boolean
+          - label: Text
+            name: text
+            widget: text
+          - label: Number
+            name: number
+            widget: number
+          - label: Markdown
+            name: markdown
+            widget: markdown
+          - label: Datetime
+            name: datetime
+            widget: datetime
+          - label: Image
+            name: image
+            widget: image
+          - label: File
+            name: file
+            widget: file
+          - label: Select
+            name: select
+            widget: select
+            options:
+              - a
+              - b
+              - c
+          - label: Object
+            name: object
+            widget: object
+            fields:
+              - label: String
+                name: string
+                widget: string
+              - label: Boolean
+                name: boolean
+                widget: boolean
+              - label: Text
+                name: text
+                widget: text
+              - label: Number
+                name: number
+                widget: number
+              - label: Markdown
+                name: markdown
+                widget: markdown
+              - label: Datetime
+                name: datetime
+                widget: datetime
+              - label: Image
+                name: image
+                widget: image
+              - label: File
+                name: file
+                widget: file
+              - label: Select
+                name: select
+                widget: select
+                options:
+                  - a
+                  - b
+                  - c
+              - label: List
+                name: list
+                widget: list
+                fields:
+                  - label: Related Post
+                    name: post
+                    widget: relationKitchenSinkPost
+                    collection: posts
+                    search_fields:
+                      - title
+                      - body
+                    value_field: title
+                  - label: String
+                    name: string
+                    widget: string
+                  - label: Boolean
+                    name: boolean
+                    widget: boolean
+                  - label: Text
+                    name: text
+                    widget: text
+                  - label: Number
+                    name: number
+                    widget: number
+                  - label: Markdown
+                    name: markdown
+                    widget: markdown
+                  - label: Datetime
+                    name: datetime
+                    widget: datetime
+                  - label: Image
+                    name: image
+                    widget: image
+                  - label: File
+                    name: file
+                    widget: file
+                  - label: Select
+                    name: select
+                    widget: select
+                    options:
+                      - a
+                      - b
+                      - c
+                  - label: Hidden
+                    name: hidden
+                    widget: hidden
+                    default: hidden
+                  - label: Object
+                    name: object
+                    widget: object
+                    fields:
+                      - label: String
+                        name: string
+                        widget: string
+                      - label: Boolean
+                        name: boolean
+                        widget: boolean
+                      - label: Text
+                        name: text
+                        widget: text
+                      - label: Number
+                        name: number
+                        widget: number
+                      - label: Markdown
+                        name: markdown
+                        widget: markdown
+                      - label: Datetime
+                        name: datetime
+                        widget: datetime
+                      - label: Image
+                        name: image
+                        widget: image
+                      - label: File
+                        name: file
+                        widget: file
+                      - label: Select
+                        name: select
+                        widget: select
+                        options:
+                          - a
+                          - b
+                          - c
+      - label: Typed List
+        name: typed_list
+        widget: list
+        types:
+          - label: Type 1 Object
+            name: type_1_object
+            widget: object
+            fields:
+              - label: String
+                name: string
+                widget: string
+              - label: Boolean
+                name: boolean
+                widget: boolean
+              - label: Text
+                name: text
+                widget: text
+          - label: Type 2 Object
+            name: type_2_object
+            widget: object
+            fields:
+              - label: Number
+                name: number
+                widget: number
+              - label: Select
+                name: select
+                widget: select
+                options:
+                  - a
+                  - b
+                  - c
+              - label: Datetime
+                name: datetime
+                widget: datetime
+              - label: Markdown
+                name: markdown
+                widget: markdown
+          - label: Type 3 Object
+            name: type_3_object
+            widget: object
+            fields:
+              - label: Image
+                name: image
+                widget: image
+              - label: File
+                name: file
+                widget: file
diff --git a/packages/demo/example.css b/packages/demo/example.css
new file mode 100644
index 00000000..7b683ec3
--- /dev/null
+++ b/packages/demo/example.css
@@ -0,0 +1,21 @@
+html,
+body {
+  color: #444;
+  font-size: 14px;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+body {
+  padding: 20px;
+}
+
+h1 {
+  margin-top: 20px;
+  color: #666;
+  font-weight: bold;
+  font-size: 32px;
+}
+
+img {
+  max-width: 100%;
+}
diff --git a/packages/demo/index.html b/packages/demo/index.html
new file mode 100644
index 00000000..c2f0c027
--- /dev/null
+++ b/packages/demo/index.html
@@ -0,0 +1,248 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+
+    <title>Static CMS Demo</title>
+    <script>
+      window.repoFiles = {
+        _posts: {
+          '2015-02-14-this-is-a-post.md': {
+            content:
+              '---\ntitle: This is a YAML front matter post\nimage: /nf-logo.png\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+          },
+          '2015-02-15-this-is-a-json-frontmatter-post.md': {
+            content:
+              '{\n"title": "This is a JSON front matter post",\n"image": "/nf-logo.png",\n"date": "2015-02-15T00:00:00.000Z"\n}\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+          },
+          '2015-02-16-this-is-a-toml-frontmatter-post.md': {
+            content:
+              '+++\ntitle = "This is a TOML front matter post"\nimage = "/nf-logo.png"\n"date" = "2015-02-16T00:00:00.000Z"\n+++\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+          },
+          '2015-02-14-this-is-a-post-with-a-different-extension.other': {
+            content:
+              '---\ntitle: This post should not appear because the extension is different\nimage: /nf-logo.png\ndate: 2015-02-14T00:00:00.000Z\n---\n\n# I Am a Title in Markdown\n\nHello, world\n\n* One Thing\n* Another Thing\n* A Third Thing\n',
+          },
+        },
+        _faqs: {
+          'what-is-static-cms.md': {
+            content:
+              '---\ntitle: What is Static CMS?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Static CMS is Content Manager for Static Site Generators\n\nStatic sites are many times faster, cheaper and safer and traditional dynamic websites.\n\nModern static site generators like Jekyll, Middleman, Roots or Hugo are powerful publishing and development systems, but when we build sites for non-technical users, we need a layer on top of them.\n\nStatic CMS is there to let your marketing team push new content to your public site, or to let technical writers work on your documentation.\n\nStatic CMS integrates with Git and turns normal content editors into git comitters.\n\n',
+          },
+          'what-is-jam-stack.md': {
+            content:
+              "---\ntitle: What is the “JAM Stack”?\ndate: 2015-11-02T00:00.000Z\n---\n\n# The JAM stack is a new way of building websites and apps that are fast, secure and simple to work with.\n\nJAM stands for JavaScript, APIs and Markup. It's the fastest growing new stack for building websites and apps: no more servers, host all your front-end on a CDN and use APIs for any moving parts.\n\n",
+          },
+          'cache-invalidation.md': {
+            content:
+              '---\ntitle: What about Cache Invalidation?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Netlify handles cache invalidation automatically\n\nWhen your changes go live, they go live.\n\nNo waiting for cache purges, no cumbersome varnish setup, no API calls to clean your distribution. Netlify handles cache purges within an average of 250ms from your deploy!\n\n',
+          },
+          'continuous-deployment.md': {
+            content:
+              '---\ntitle: Does Netlify support Continuous Deployment?\ndate: 2015-11-02T00:00.000Z\n---\n\n# Yes, Netlify let you Integrate your site or web-app to GitHub, GitLab or BitBucket and run your build tool on our servers.\n\nAutomatically rebuild your site every time your content changes: trigger builds by pushing to git or via webhooks.\n\n',
+          },
+        },
+        _data: {
+          'settings.json': {
+            content: '{"site_title": "CMS Demo"}',
+          },
+          'authors.yml': {
+            content:
+              'authors:\n  - name: Mathias\n    description: Co-founder @ Netlify\n  - name: Chris\n    description: Co-founder @ Netlify\n',
+          },
+        },
+        _widgets: {
+          'boolean.json': {
+            content: '{}',
+          },
+          'code.json': {
+            content: '{}',
+          },
+          'color.json': {
+            content: '{}',
+          },
+          'datetime.json': {
+            content: '{}',
+          },
+          'file.json': {
+            content: '{}',
+          },
+          'image.json': {
+            content: `{}`,
+          },
+          'map.json': {
+            content: '{}',
+          },
+          'markdown.json': {
+            content: '{}',
+          },
+          'number.json': {
+            content: '{}',
+          },
+          'object.json': {
+            content: '{}',
+          },
+          'relation.json': {
+            content: '{}',
+          },
+          'select.json': {
+            content: '{}',
+          },
+          'string.json': {
+            content: '{}',
+          },
+          'text.json': {
+            content: '{}',
+          },
+        },
+        _sink: {
+          'a-big-entry-with-all-the-things.md': {
+            content:
+              "---\ntitle: CHAPTER 1. Loomings.\nboolean: true\ntext: >-\n  Call me Ishmael. Some years ago—never mind how long precisely—having little or\n  no money in my purse, and nothing particular to interest me on shore, I\n  thought I would sail about a little and see the watery part of the world. It\n  is a way I have of driving off the spleen and regulating the circulation.\n  Whenever I find myself growing grim about the mouth; whenever it is a damp,\n  drizzly November in my soul; whenever I find myself involuntarily pausing\n  before coffin warehouses, and bringing up the rear of every funeral I meet;\n  and especially whenever my hypos get such an upper hand of me, that it\n  requires a strong moral principle to prevent me from deliberately stepping\n  into the street, and methodically knocking people’s hats off—then, I account\n  it high time to get to sea as soon as I can. This is my substitute for pistol\n  and ball. With a philosophical flourish Cato throws himself upon his sword; I\n  quietly take to the ship. There is nothing surprising in this. If they but\n  knew it, almost all men in their degree, some time or other, cherish very\n  nearly the same feelings towards the ocean with me.\nnumber: '111111'\nmarkdown: \"# Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world. It is a way I have of driving off the spleen and regulating the circulation. Whenever I find myself growing grim about the mouth; whenever it is a damp, drizzly November in my soul; whenever I find myself involuntarily pausing before coffin warehouses, and bringing up the rear of every funeral I meet; and especially whenever my hypos get such an upper hand of me, that it requires a strong moral principle to prevent me from deliberately stepping into the street, and methodically knocking people’s hats off—then, I account it high time to get to sea as soon as I can. This is my substitute for pistol and ball. With a philosophical flourish Cato throws himself upon his sword; I quietly take to the ship. There is nothing surprising in this. If they but knew it, almost all men in their degree, some time or other, cherish very nearly the same feelings towards the ocean with me.\\n\\n## There now is your insular city of the Manhattoes, belted round by wharves as Indian isles by coral reefs—commerce surrounds it with her surf. Right and left, the streets take you waterward. Its extreme downtown is the battery, where that noble mole is washed by waves, and cooled by breezes, which a few hours previous were out of sight of land. Look at the crowds of water-gazers there.\\n\\n**Circumambulate the city of a dreamy Sabbath afternoon. Go from Corlears Hook to Coenties Slip, and from thence, by Whitehall, northward. What do you see?—Posted like silent sentinels all around the town, stand thousands upon thousands of mortal men fixed in ocean reveries. Some leaning against the spiles; some seated upon the pier-heads; some looking over the bulwarks of ships from China; some high aloft in the rigging, as if striving to get a still better seaward peep. But these are all landsmen; of week days pent up in lath and plaster—tied to counters, nailed to benches, clinched to desks. How then is this? Are the green fields gone? What do they here?**\\n\\n*But look! here come more crowds, pacing straight for the water, and seemingly bound for a dive. Strange! Nothing will content them but the extremest limit of the land; loitering under the shady lee of yonder warehouses will not suffice. No. They must get just as nigh the water as they possibly can without falling in. And there they stand—miles of them—leagues. Inlanders all, they come from lanes and alleys, streets and avenues—north, east, south, and west. Yet here they all unite. Tell me, does the magnetic virtue of the needles of the compasses of all those ships attract them thither?*\\n\\n[Once more. Say you are in the country; in some high land of lakes. Take almost any path you please, and ten to one it carries you down in a dale, and leaves you there by a pool in the stream. There is magic in it. Let the most absent-minded of men be plunged in his deepest reveries—stand that man on his legs, set his feet a-going, and he will infallibly lead you to water, if water there be in all that region. Should you ever be athirst in the great American desert, try this experiment, if your caravan happen to be supplied with a metaphysical professor. Yes, as every one knows, meditation and water are wedded for ever.](https://staticjscms.netlify.app)\\n\\n![moby dick](/assets/uploads/moby-dick.jpg)\\n\\n{{< youtube lZ6NEHDgk58 >}}\\n\\nBut here is an artist. He desires to paint you the dreamiest, shadiest, quietest, most enchanting bit of romantic landscape in all the valley of the Saco. What is the chief element he employs? There stand his trees, each with a hollow trunk, as if a hermit and a crucifix were within; and here sleeps his meadow, and there sleep his cattle; and up from yonder cottage goes a sleepy smoke. Deep into distant woodlands winds a mazy way, reaching to overlapping spurs of mountains bathed in their hill-side blue. But though the picture lies thus tranced, and though this pine-tree shakes down its sighs like leaves upon this shepherd’s head, yet all were vain, unless the shepherd’s eye were fixed upon the magic stream before him. Go visit the Prairies in June, when for scores on scores of miles you wade knee-deep among Tiger-lilies—what is the one charm wanting?—Water—there is not a drop of water there! Were Niagara but a cataract of sand, would you travel your thousand miles to see it? Why did the poor poet of Tennessee, upon suddenly receiving two handfuls of silver, deliberate whether to buy him a coat, which he sadly needed, or invest his money in a pedestrian trip to Rockaway Beach? Why is almost every robust healthy boy with a robust healthy soul in him, at some time or other crazy to go to sea? Why upon your first voyage as a passenger, did you yourself feel such a mystical vibration, when first told that you and your ship were now out of sight of land? Why did the old Persians hold the sea holy? Why did the Greeks give it a separate deity, and own brother of Jove? Surely all this is not without meaning. And still deeper the meaning of that story of Narcissus, who because he could not grasp the tormenting, mild image he saw in the fountain, plunged into it and was drowned. But that same image, we ourselves see in all rivers and oceans. It is the image of the ungraspable phantom of life; and this is the key to it all.\\n\\nNow, when I say that I am in the habit of going to sea whenever I begin to grow hazy about the eyes, and begin to be over conscious of my lungs, I do not mean to have it inferred that I ever go to sea as a passenger. For to go as a passenger you must needs have a purse, and a purse is but a rag unless you have something in it. Besides, passengers get sea-sick—grow quarrelsome—don’t sleep of nights—do not enjoy themselves much, as a general thing;—no, I never go as a passenger; nor, though I am something of a salt, do I ever go to sea as a Commodore, or a Captain, or a Cook. I abandon the glory and distinction of such offices to those who like them. For my part, I abominate all honourable respectable toils, trials, and tribulations of every kind whatsoever. It is quite as much as I can do to take care of myself, without taking care of ships, barques, brigs, schooners, and what not. And as for going as cook,—though I confess there is considerable glory in that, a cook being a sort of officer on ship-board—yet, somehow, I never fancied broiling fowls;—though once broiled, judiciously buttered, and judgmatically salted and peppered, there is no one who will speak more respectfully, not to say reverentially, of a broiled fowl than I will. It is out of the idolatrous dotings of the old Egyptians upon broiled ibis and roasted river horse, that you see the mummies of those creatures in their huge bake-houses the pyramids.\\n\\nNo, when I go to sea, I go as a simple sailor, right before the mast, plumb down into the forecastle, aloft there to the royal mast-head. True, they rather order me about some, and make me jump from spar to spar, like a grasshopper in a May meadow. And at first, this sort of thing is unpleasant enough. It touches one’s sense of honour, particularly if you come of an old established family in the land, the Van Rensselaers, or Randolphs, or Hardicanutes. And more than all, if just previous to putting your hand into the tar-pot, you have been lording it as a country schoolmaster, making the tallest boys stand in awe of you. The transition is a keen one, I assure you, from a schoolmaster to a sailor, and requires a strong decoction of Seneca and the Stoics to enable you to grin and bear it. But even this wears off in time.\\n\\nWhat of it, if some old hunks of a sea-captain orders me to get a broom and sweep down the decks? What does that indignity amount to, weighed, I mean, in the scales of the New Testament? Do you think the archangel Gabriel thinks anything the less of me, because I promptly and respectfully obey that old hunks in that particular instance? Who ain’t a slave? Tell me that. Well, then, however the old sea-captains may order me about—however they may thump and punch me about, I have the satisfaction of knowing that it is all right; that everybody else is one way or other served in much the same way—either in a physical or metaphysical point of view, that is; and so the universal thump is passed round, and all hands should rub each other’s shoulder-blades, and be content.\\n\\nAgain, I always go to sea as a sailor, because they make a point of paying me for my trouble, whereas they never pay passengers a single penny that I ever heard of. On the contrary, passengers themselves must pay. And there is all the difference in the world between paying and being paid. The act of paying is perhaps the most uncomfortable infliction that the two orchard thieves entailed upon us. But\_*being paid*,—what will compare with it? The urbane activity with which a man receives money is really marvellous, considering that we so earnestly believe money to be the root of all earthly ills, and that on no account can a monied man enter heaven. Ah! how cheerfully we consign ourselves to perdition!\\n\\nFinally, I always go to sea as a sailor, because of the wholesome exercise and pure air of the fore-castle deck. For as in this world, head winds are far more prevalent than winds from astern (that is, if you never violate the Pythagorean maxim), so for the most part the Commodore on the quarter-deck gets his atmosphere at second hand from the sailors on the forecastle. He thinks he breathes it first; but not so. In much the same way do the commonalty lead their leaders in many other things, at the same time that the leaders little suspect it. But wherefore it was that after having repeatedly smelt the sea as a merchant sailor, I should now take it into my head to go on a whaling voyage; this the invisible police officer of the Fates, who has the constant surveillance of me, and secretly dogs me, and influences me in some unaccountable way—he can better answer than any one else. And, doubtless, my going on this whaling voyage, formed part of the grand programme of Providence that was drawn up a long time ago. It came in as a sort of brief interlude and solo between more extensive performances. I take it that this part of the bill must have run something like this:\\n\\n“*Grand Contested Election for the Presidency of the United States.*\_“WHALING VOYAGE BY ONE ISHMAEL. “BLOODY BATTLE IN AFFGHANISTAN.”\\n\\nThough I cannot tell why it was exactly that those stage managers, the Fates, put me down for this shabby part of a whaling voyage, when others were set down for magnificent parts in high tragedies, and short and easy parts in genteel comedies, and jolly parts in farces—though I cannot tell why this was exactly; yet, now that I recall all the circumstances, I think I can see a little into the springs and motives which being cunningly presented to me under various disguises, induced me to set about performing the part I did, besides cajoling me into the delusion that it was a choice resulting from my own unbiased freewill and discriminating judgment.\\n\\nChief among these motives was the overwhelming idea of the great whale himself. Such a portentous and mysterious monster roused all my curiosity. Then the wild and distant seas where he rolled his island bulk; the undeliverable, nameless perils of the whale; these, with all the attending marvels of a thousand Patagonian sights and sounds, helped to sway me to my wish. With other men, perhaps, such things would not have been inducements; but as for me, I am tormented with an everlasting itch for things remote. I love to sail forbidden seas, and land on barbarous coasts. Not ignoring what is good, I am quick to perceive a horror, and could still be social with it—would they let me—since it is but well to be on friendly terms with all the inmates of the place one lodges in.\\n\\nBy reason of these things, then, the whaling voyage was welcome; the great flood-gates of the wonder-world swung open, and in the wild conceits that swayed me to my purpose, two and two there floated into my inmost soul, endless processions of the whale, and, mid most of them all, one grand hooded phantom, like a snow hill in the air.\"\ndatetime: 2017-06-07T18:55:28.110Z\ndate: 2017-06-07T18:55:28.111Z\nimage: /assets/uploads/moby-dick.jpg\nfile: /assets/uploads/moby-dick.jpg\nselect: b\npost: 'This is a front matter post'\nobject:\n  boolean: true\n  text: >-\n    I stuffed a shirt or two into my old carpet-bag, tucked it under my arm, and\n    started for Cape Horn and the Pacific. Quitting the good city of old\n    Manhatto, I duly arrived in New Bedford. It was a Saturday night in\n    December. Much was I disappointed upon learning that the little packet for\n    Nantucket had already sailed, and that no way of reaching that place would\n    offer, till the following Monday.\n  number: '222222'\n  markdown: >-\n    # I stuffed a shirt or two into my old carpet-bag, tucked it under my arm,\n    and started for Cape Horn and the Pacific. Quitting the good city of old\n    Manhatto, I duly arrived in New Bedford. It was a Saturday night in\n    December. Much was I disappointed upon learning that the little packet for\n    Nantucket had already sailed, and that no way of reaching that place would\n    offer, till the following Monday.\n\n\n    ## As most young candidates for the pains and penalties of whaling stop at\n    this same New Bedford, thence to embark on their voyage, it may as well be\n    related that I, for one, had no idea of so doing. For my mind was made up to\n    sail in no other than a Nantucket craft, because there was a fine,\n    boisterous something about everything connected with that famous old island,\n    which amazingly pleased me. Besides though New Bedford has of late been\n    gradually monopolising the business of whaling, and though in this matter\n    poor old Nantucket is now much behind her, yet Nantucket was her great\n    original—the Tyre of this Carthage;—the place where the first dead American\n    whale was stranded. Where else but from Nantucket did those aboriginal\n    whalemen, the Red-Men, first sally out in canoes to give chase to the\n    Leviathan? And where but from Nantucket, too, did that first adventurous\n    little sloop put forth, partly laden with imported cobblestones—so goes the\n    story—to throw at the whales, in order to discover when they were nigh\n    enough to risk a harpoon from the bowsprit?\n\n\n    **Now having a night, a day, and still another night following before me in\n    New Bedford, ere I could embark for my destined port, it became a matter of\n    concernment where I was to eat and sleep meanwhile. It was a very\n    dubious-looking, nay, a very dark and dismal night, bitingly cold and\n    cheerless. I knew no one in the place. With anxious grapnels I had sounded\n    my pocket, and only brought up a few pieces of silver,—So, wherever you go,\n    Ishmael, said I to myself, as I stood in the middle of a dreary street\n    shouldering my bag, and comparing the gloom towards the north with the\n    darkness towards the south—wherever in your wisdom you may conclude to lodge\n    for the night, my dear Ishmael, be sure to inquire the price, and don’t be\n    too particular.**\n\n\n    *With halting steps I paced the streets, and passed the sign of “The Crossed\n    Harpoons”—but it looked too expensive and jolly there. Further on, from the\n    bright red windows of the “Sword-Fish Inn,” there came such fervent rays,\n    that it seemed to have melted the packed snow and ice from before the house,\n    for everywhere else the congealed frost lay ten inches thick in a hard,\n    asphaltic pavement,—rather weary for me, when I struck my foot against the\n    flinty projections, because from hard, remorseless service the soles of my\n    boots were in a most miserable plight. Too expensive and jolly, again\n    thought I, pausing one moment to watch the broad glare in the street, and\n    hear the sounds of the tinkling glasses within. But go on, Ishmael, said I\n    at last; don’t you hear? get away from before the door; your patched boots\n    are stopping the way. So on I went. I now by instinct followed the streets\n    that took me waterward, for there, doubtless, were the cheapest, if not the\n    cheeriest inns.*\n\n\n    [Such dreary streets! blocks of blackness, not houses, on either hand, and\n    here and there a candle, like a candle moving about in a tomb. At this hour\n    of the night, of the last day of the week, that quarter of the town proved\n    all but deserted. But presently I came to a smoky light proceeding from a\n    low, wide building, the door of which stood invitingly open. It had a\n    careless look, as if it were meant for the uses of the public; so, entering,\n    the first thing I did was to stumble over an ash-box in the porch. Ha!\n    thought I, ha, as the flying particles almost choked me, are these ashes\n    from that destroyed city, Gomorrah? But “The Crossed Harpoons,” and “The\n    Sword-Fish?”—this, then must needs be the sign of “The Trap.” However, I\n    picked myself up and hearing a loud voice within, pushed on and opened a\n    second, interior door.](https://staticjscms.netlify.app)\n\n\n    ![moby dick](/assets/uploads/moby-dick.jpg)\n\n\n    {{< youtube lZ6NEHDgk58 >}}\n\n\n    It seemed the great Black Parliament sitting in Tophet. A hundred black\n    faces turned round in their rows to peer; and beyond, a black Angel of Doom\n    was beating a book in a pulpit. It was a negro church; and the preacher’s\n    text was about the blackness of darkness, and the weeping and wailing and\n    teeth-gnashing there. Ha, Ishmael, muttered I, backing out, Wretched\n    entertainment at the sign of ‘The Trap!’\n\n\n    Moving on, I at last came to a dim sort of light not far from the docks, and\n    heard a forlorn creaking in the air; and looking up, saw a swinging sign\n    over the door with a white painting upon it, faintly representing a tall\n    straight jet of misty spray, and these words underneath—“The Spouter\n    Inn:—Peter Coffin.”\n\n\n    Coffin?—Spouter?—Rather ominous in that particular connexion, thought I. But\n    it is a common name in Nantucket, they say, and I suppose this Peter here is\n    an emigrant from there. As the light looked so dim, and the place, for the\n    time, looked quiet enough, and the dilapidated little wooden house itself\n    looked as if it might have been carted here from the ruins of some burnt\n    district, and as the swinging sign had a poverty-stricken sort of creak to\n    it, I thought that here was the very spot for cheap lodgings, and the best\n    of pea coffee.\n\n\n    It was a queer sort of place—a gable-ended old house, one side palsied as it\n    were, and leaning over sadly. It stood on a sharp bleak corner, where that\n    tempestuous wind Euroclydon kept up a worse howling than ever it did about\n    poor Paul’s tossed craft. Euroclydon, nevertheless, is a mighty pleasant\n    zephyr to any one in-doors, with his feet on the hob quietly toasting for\n    bed. “In judging of that tempestuous wind called Euroclydon,” says an old\n    writer—of whose works I possess the only copy extant—“it maketh a marvellous\n    difference, whether thou lookest out at it from a glass window where the\n    frost is all on the outside, or whether thou observest it from that sashless\n    window, where the frost is on both sides, and of which the wight Death is\n    the only glazier.” True enough, thought I, as this passage occurred to my\n    mind—old black-letter, thou reasonest well. Yes, these eyes are windows, and\n    this body of mine is the house. What a pity they didn’t stop up the chinks\n    and the crannies though, and thrust in a little lint here and there. But\n    it’s too late to make any improvements now. The universe is finished; the\n    copestone is on, and the chips were carted off a million years ago. Poor\n    Lazarus there, chattering his teeth against the curbstone for his pillow,\n    and shaking off his tatters with his shiverings, he might plug up both ears\n    with rags, and put a corn-cob into his mouth, and yet that would not keep\n    out the tempestuous Euroclydon. Euroclydon! says old Dives, in his red\n    silken wrapper—(he had a redder one afterwards) pooh, pooh! What a fine\n    frosty night; how Orion glitters; what northern lights! Let them talk of\n    their oriental summer climes of everlasting conservatories; give me the\n    privilege of making my own summer with my own coals.\n\n\n    But what thinks Lazarus? Can he warm his blue hands by holding them up to\n    the grand northern lights? Would not Lazarus rather be in Sumatra than here?\n    Would he not far rather lay him down lengthwise along the line of the\n    equator; yea, ye gods! go down to the fiery pit itself, in order to keep out\n    this frost?\n\n\n    Now, that Lazarus should lie stranded there on the curbstone before the door\n    of Dives, this is more wonderful than that an iceberg should be moored to\n    one of the Moluccas. Yet Dives himself, he too lives like a Czar in an ice\n    palace made of frozen sighs, and being a president of a temperance society,\n    he only drinks the tepid tears of orphans.\n\n\n    But no more of this blubbering now, we are going a-whaling, and there is\n    plenty of that yet to come. Let us scrape the ice from our frosted feet, and\n    see what sort of a place this “Spouter” may be.\n  datetime: 2017-06-07T19:05:43.816Z\n  date: 2017-06-07T18:55:28.115Z\n  image: /assets/uploads/moby-dick.jpg\n  file: /assets/uploads/moby-dick.jpg\n  select: b\n  string: CHAPTER 2. The Carpet-Bag.\nlist:\n  - text: >-\n      Entering that gable-ended Spouter-Inn, you found yourself in a wide, low,\n      straggling entry with old-fashioned wainscots, reminding one of the\n      bulwarks of some condemned old craft. On one side hung a very large\n      oilpainting so thoroughly besmoked, and every way defaced, that in the\n      unequal crosslights by which you viewed it, it was only by diligent study\n      and a series of systematic visits to it, and careful inquiry of the\n      neighbors, that you could any way arrive at an understanding of its\n      purpose. Such unaccountable masses of shades and shadows, that at first\n      you almost thought some ambitious young artist, in the time of the New\n      England hags, had endeavored to delineate chaos bewitched. But by dint of\n      much and earnest contemplation, and oft repeated ponderings, and\n      especially by throwing open the little window towards the back of the\n      entry, you at last come to the conclusion that such an idea, however wild,\n      might not be altogether unwarranted.\n    number: '333333'\n    markdown: \"# Entering that gable-ended Spouter-Inn, you found yourself in a wide, low, straggling entry with old-fashioned wainscots, reminding one of the bulwarks of some condemned old craft. On one side hung a very large oilpainting so thoroughly besmoked, and every way defaced, that in the unequal crosslights by which you viewed it, it was only by diligent study and a series of systematic visits to it, and careful inquiry of the neighbors, that you could any way arrive at an understanding of its purpose. Such unaccountable masses of shades and shadows, that at first you almost thought some ambitious young artist, in the time of the New England hags, had endeavored to delineate chaos bewitched. But by dint of much and earnest contemplation, and oft repeated ponderings, and especially by throwing open the little window towards the back of the entry, you at last come to the conclusion that such an idea, however wild, might not be altogether unwarranted.\n\n      # But what most puzzled and confounded you was a long, limber, portentous, black mass of something hovering in the centre of the picture over three blue, dim, perpendicular lines floating in a nameless yeast. A boggy, soggy, squitchy picture truly, enough to drive a nervous man distracted. Yet was there a sort of indefinite, half-attained, unimaginable sublimity about it that fairly froze you to it, till you involuntarily took an oath with yourself to find out what that marvellous painting meant. Ever and anon a bright, but, alas, deceptive idea would dart you through.—It’s the Black Sea in a midnight gale.—It’s the unnatural combat of the four primal elements.—It’s a blasted heath.—It’s a Hyperborean winter scene.—It’s the breaking-up of the icebound stream of Time. But at last all these fancies yielded to that one portentous something in the picture’s midst.\_*That*\_once found out, and all the rest were plain. But stop; does it not bear a faint resemblance to a gigantic fish? even the great leviathan himself?\n\n      ## In fact, the artist’s design seemed this: a final theory of my own, partly based upon the aggregated opinions of many aged persons with whom I conversed upon the subject. The picture represents a Cape-Horner in a great hurricane; the half-foundered ship weltering there with its three dismantled masts alone visible; and an exasperated whale, purposing to spring clean over the craft, is in the enormous act of impaling himself upon the three mast-heads.\n\n      ## The opposite wall of this entry was hung all over with a heathenish array of monstrous clubs and spears. Some were thickly set with glittering teeth resembling ivory saws; others were tufted with knots of human hair; and one was sickle-shaped, with a vast handle sweeping round like the segment made in the new-mown grass by a long-armed mower. You shuddered as you gazed, and wondered what monstrous cannibal and savage could ever have gone a death-harvesting with such a hacking, horrifying implement. Mixed with these were rusty old whaling lances and harpoons all broken and deformed. Some were storied weapons. With this once long lance, now wildly elbowed, fifty years ago did Nathan Swain kill fifteen whales between a sunrise and a sunset. And that harpoon—so like a corkscrew now—was flung in Javan seas, and run away with by a whale, years afterwards slain off the Cape of Blanco. The original iron entered nigh the tail, and, like a restless needle sojourning in the body of a man, travelled full forty feet, and at last was found imbedded in the hump.\n\n      Crossing this dusky entry, and on through yon low-arched way—cut through what in old times must have been a great central chimney with fireplaces all round—you enter the public room. A still duskier place is this, with such low ponderous beams above, and such old wrinkled planks beneath, that you would almost fancy you trod some old craft’s cockpits, especially of such a howling night, when this corner-anchored old ark rocked so furiously. On one side stood a long, low, shelf-like table covered with cracked glass cases, filled with dusty rarities gathered from this wide world’s remotest nooks. Projecting from the further angle of the room stands a dark-looking den—the bar—a rude attempt at a right whale’s head. Be that how it may, there stands the vast arched bone of the whale’s jaw, so wide, a coach might almost drive beneath it. Within are shabby shelves, ranged round with old decanters, bottles, flasks; and in those jaws of swift destruction, like another cursed Jonah (by which name indeed they called him), bustles a little withered old man, who, for their money, dearly sells the sailors deliriums and death.\n\n      Abominable are the tumblers into which he pours his poison. Though true cylinders without—within, the villanous green goggling glasses deceitfully tapered downwards to a cheating bottom. Parallel meridians rudely pecked into the glass, surround these footpads’ goblets. Fill to\_*this*\_mark, and your charge is but a penny; to\_*this*\_a penny more; and so on to the full glass—the Cape Horn measure, which you may gulp down for a shilling.\n\n      Upon entering the place I found a number of young seamen gathered about a table, examining by a dim light divers specimens of\_*skrimshander*. I sought the landlord, and telling him I desired to be accommodated with a room, received for answer that his house was full—not a bed unoccupied. “But avast,” he added, tapping his forehead, “you haint no objections to sharing a harpooneer’s blanket, have ye? I s’pose you are goin’ a-whalin’, so you’d better get used to that sort of thing.”\n\n      I told him that I never liked to sleep two in a bed; that if I should ever do so, it would depend upon who the harpooneer might be, and that if he (the landlord) really had no other place for me, and the harpooneer was not decidedly objectionable, why rather than wander further about a strange town on so bitter a night, I would put up with the half of any decent man’s blanket.\n\n      “I thought so. All right; take a seat. Supper?—you want supper? Supper’ll be ready directly.”\n\n      I sat down on an old wooden settle, carved all over like a bench on the Battery. At one end a ruminating tar was still further adorning it with his jack-knife, stooping over and diligently working away at the space between his legs. He was trying his hand at a ship under full sail, but he didn’t make much headway, I thought.\n\n      At last some four or five of us were summoned to our meal in an adjoining room. It was cold as Iceland—no fire at all—the landlord said he couldn’t afford it. Nothing but two dismal tallow candles, each in a winding sheet. We were fain to button up our monkey jackets, and hold to our lips cups of scalding tea with our half frozen fingers. But the fare was of the most substantial kind—not only meat and potatoes, but dumplings; good heavens! dumplings for supper! One young fellow in a green box coat, addressed himself to these dumplings in a most direful manner.\n\n      “My boy,” said the landlord, “you’ll have the nightmare to a dead sartainty.”\n\n      “Landlord,” I whispered, “that aint the harpooneer is it?”\n\n      “Oh, no,” said he, looking a sort of diabolically funny, “the harpooneer is a dark complexioned chap. He never eats dumplings, he don’t—he eats nothing but steaks, and he likes ‘em rare.”\n\n      “The devil he does,” says I. “Where is that harpooneer? Is he here?”\n\n      “He’ll be here afore long,” was the answer.\n\n      I could not help it, but I began to feel suspicious of this “dark complexioned” harpooneer. At any rate, I made up my mind that if it so turned out that we should sleep together, he must undress and get into bed before I did.\n\n      Supper over, the company went back to the bar-room, when, knowing not what else to do with myself, I resolved to spend the rest of the evening as a looker on.\n\n      Presently a rioting noise was heard without. Starting up, the landlord cried, “That’s the Grampus’s crew. I seed her reported in the offing this morning; a three years’ voyage, and a full ship. Hurrah, boys; now we’ll have the latest news from the Feegees.”\n\n      A tramping of sea boots was heard in the entry; the door was flung open, and in rolled a wild set of mariners enough. Enveloped in their shaggy watch coats, and with their heads muffled in woollen comforters, all bedarned and ragged, and their beards stiff with icicles, they seemed an eruption of bears from Labrador. They had just landed from their boat, and this was the first house they entered. No wonder, then, that they made a straight wake for the whale’s mouth—the bar—when the wrinkled little old Jonah, there officiating, soon poured them out brimmers all round. One complained of a bad cold in his head, upon which Jonah mixed him a pitch-like potion of gin and molasses, which he swore was a sovereign cure for all colds and catarrhs whatsoever, never mind of how long standing, or whether caught off the coast of Labrador, or on the weather side of an ice-island.\n\n      The liquor soon mounted into their heads, as it generally does even with the arrantest topers newly landed from sea, and they began capering about most obstreperously.\n\n      I observed, however, that one of them held somewhat aloof, and though he seemed desirous not to spoil the hilarity of his shipmates by his own sober face, yet upon the whole he refrained from making as much noise as the rest. This man interested me at once; and since the sea-gods had ordained that he should soon become my shipmate (though but a sleeping-partner one, so far as this narrative is concerned), I will here venture upon a little description of him. He stood full six feet in height, with noble shoulders, and a chest like a coffer-dam. I have seldom seen such brawn in a man. His face was deeply brown and burnt, making his white teeth dazzling by the contrast; while in the deep shadows of his eyes floated some reminiscences that did not seem to give him much joy. His voice at once announced that he was a Southerner, and from his fine stature, I thought he must be one of those tall mountaineers from the Alleghanian Ridge in Virginia. When the revelry of his companions had mounted to its height, this man slipped away unobserved, and I saw no more of him till he became my comrade on the sea. In a few minutes, however, he was missed by his shipmates, and being, it seems, for some reason a huge favourite with them, they raised a cry of “Bulkington! Bulkington! where’s Bulkington?” and darted out of the house in pursuit of him.\n\n      It was now about nine o’clock, and the room seeming almost supernaturally quiet after these orgies, I began to congratulate myself upon a little plan that had occurred to me just previous to the entrance of the seamen.\n\n      No man prefers to sleep two in a bed. In fact, you would a good deal rather not sleep with your own brother. I don’t know how it is, but people like to be private when they are sleeping. And when it comes to sleeping with an unknown stranger, in a strange inn, in a strange town, and that stranger a harpooneer, then your objections indefinitely multiply. Nor was there any earthly reason why I as a sailor should sleep two in a bed, more than anybody else; for sailors no more sleep two in a bed at sea, than bachelor Kings do ashore. To be sure they all sleep together in one apartment, but you have your own hammock, and cover yourself with your own blanket, and sleep in your own skin.\n\n      The more I pondered over this harpooneer, the more I abominated the thought of sleeping with him. It was fair to presume that being a harpooneer, his linen or woollen, as the case might be, would not be of the tidiest, certainly none of the finest. I began to twitch all over. Besides, it was getting late, and my decent harpooneer ought to be home and going bedwards. Suppose now, he should tumble in upon me at midnight—how could I tell from what vile hole he had been coming?\n\n      “Landlord! I’ve changed my mind about that harpooneer.—I shan’t sleep with him. I’ll try the bench here.”\n\n      “Just as you please; I’m sorry I can’t spare ye a tablecloth for a mattress, and it’s a plaguy rough board here”—feeling of the knots and notches. “But wait a bit, Skrimshander; I’ve got a carpenter’s plane there in the bar—wait, I say, and I’ll make ye snug enough.” So saying he procured the plane; and with his old silk handkerchief first dusting the bench, vigorously set to planing away at my bed, the while grinning like an ape. The shavings flew right and left; till at last the plane-iron came bump against an indestructible knot. The landlord was near spraining his wrist, and I told him for heaven’s sake to quit—the bed was soft enough to suit me, and I did not know how all the planing in the world could make eider down of a pine plank. So gathering up the shavings with another grin, and throwing them into the great stove in the middle of the room, he went about his business, and left me in a brown study.\n\n      I now took the measure of the bench, and found that it was a foot too short; but that could be mended with a chair. But it was a foot too narrow, and the other bench in the room was about four inches higher than the planned one—so there was no yoking them. I then placed the first bench lengthwise along the only clear space against the wall, leaving a little interval between, for my back to settle down in. But I soon found that there came such a draught of cold air over me from under the sill of the window, that this plan would never do at all, especially as another current from the rickety door met the one from the window, and both together formed a series of small whirlwinds in the immediate vicinity of the spot where I had thought to spend the night.\n\n      The devil fetch that harpooneer, thought I, but stop, couldn’t I steal a march on him—bolt his door inside, and jump into his bed, not to be wakened by the most violent knockings? It seemed no bad idea; but upon second thoughts I dismissed it. For who could tell but what the next morning, so soon as I popped out of the room, the harpooneer might be standing in the entry, all ready to knock me down!\n\n      Still, looking round me again, and seeing no possible chance of spending a sufferable night unless in some other person’s bed, I began to think that after all I might be cherishing unwarrantable prejudices against this unknown harpooneer. Thinks I, I’ll wait awhile; he must be dropping in before long. I’ll have a good look at him then, and perhaps we may become jolly good bedfellows after all—there’s no telling.\n\n      But though the other boarders kept coming in by ones, twos, and threes, and going to bed, yet no sign of my harpooneer.\n\n      “Landlord!” said I, “what sort of a chap is he—does he always keep such late hours?” It was now hard upon twelve o’clock.\n\n      The landlord chuckled again with his lean chuckle, and seemed to be mightily tickled at something beyond my comprehension. “No,” he answered, “generally he’s an early bird—airley to bed and airley to rise—yes, he’s the bird what catches the worm. But to-night he went out a peddling, you see, and I don’t see what on airth keeps him so late, unless, may be, he can’t sell his head.”\n\n      “Can’t sell his head?—What sort of a bamboozingly story is this you are telling me?” getting into a towering rage. “Do you pretend to say, landlord, that this harpooneer is actually engaged this blessed Saturday night, or rather Sunday morning, in peddling his head around this town?”\n\n      “That’s precisely it,” said the landlord, “and I told him he couldn’t sell it here, the market’s overstocked.”\n\n      “With what?” shouted I.\n\n      “With heads to be sure; ain’t there too many heads in the world?”\n\n      “I tell you what it is, landlord,” said I quite calmly, “you’d better stop spinning that yarn to me—I’m not green.”\n\n      “May be not,” taking out a stick and whittling a toothpick, “but I rayther guess you’ll be done\_*brown*\_if that ere harpooneer hears you a slanderin’ his head.”\n\n      “I’ll break it for him,” said I, now flying into a passion again at this unaccountable farrago of the landlord’s.\n\n      “It’s broke a’ready,” said he.\n\n      “Broke,” said I—“*broke*, do you mean?”\n\n      “Sartain, and that’s the very reason he can’t sell it, I guess.”\n\n      “Landlord,” said I, going up to him as cool as Mt. Hecla in a snow-storm—“landlord, stop whittling. You and I must understand one another, and that too without delay. I come to your house and want a bed; you tell me you can only give me half a one; that the other half belongs to a certain harpooneer. And about this harpooneer, whom I have not yet seen, you persist in telling me the most mystifying and exasperating stories tending to beget in me an uncomfortable feeling towards the man whom you design for my bedfellow—a sort of connexion, landlord, which is an intimate and confidential one in the highest degree. I now demand of you to speak out and tell me who and what this harpooneer is, and whether I shall be in all respects safe to spend the night with him. And in the first place, you will be so good as to unsay that story about selling his head, which if true I take to be good evidence that this harpooneer is stark mad, and I’ve no idea of sleeping with a madman; and you, sir,\_*you*\_I mean, landlord,\_*you*, sir, by trying to induce me to do so knowingly, would thereby render yourself liable to a criminal prosecution.”\n\n      “Wall,” said the landlord, fetching a long breath, “that’s a purty long sarmon for a chap that rips a little now and then. But be easy, be easy, this here harpooneer I have been tellin’ you of has just arrived from the south seas, where he bought up a lot of ‘balmed New Zealand heads (great curios, you know), and he’s sold all on ‘em but one, and that one he’s trying to sell to-night, cause to-morrow’s Sunday, and it would not do to be sellin’ human heads about the streets when folks is goin’ to churches. He wanted to, last Sunday, but I stopped him just as he was goin’ out of the door with four heads strung on a string, for all the airth like a string of inions.”\n\n      This account cleared up the otherwise unaccountable mystery, and showed that the landlord, after all, had had no idea of fooling me—but at the same time what could I think of a harpooneer who stayed out of a Saturday night clean into the holy Sabbath, engaged in such a cannibal business as selling the heads of dead idolators?\n\n      “Depend upon it, landlord, that harpooneer is a dangerous man.”\n\n      “He pays reg’lar,” was the rejoinder. “But come, it’s getting dreadful late, you had better be turning flukes—it’s a nice bed; Sal and me slept in that ere bed the night we were spliced. There’s plenty of room for two to kick about in that bed; it’s an almighty big bed that. Why, afore we give it up, Sal used to put our Sam and little Johnny in the foot of it. But I got a dreaming and sprawling about one night, and somehow, Sam got pitched on the floor, and came near breaking his arm. Arter that, Sal said it wouldn’t do. Come along here, I’ll give ye a glim in a jiffy;” and so saying he lighted a candle and held it towards me, offering to lead the way. But I stood irresolute; when looking at a clock in the corner, he exclaimed “I vum it’s Sunday—you won’t see that harpooneer to-night; he’s come to anchor somewhere—come along then;\_*do*\_come;\_*won’t*\_ye come?”\n\n      I considered the matter a moment, and then up stairs we went, and I was ushered into a small room, cold as a clam, and furnished, sure enough, with a prodigious bed, almost big enough indeed for any four harpooneers to sleep abreast.\n\n      “There,” said the landlord, placing the candle on a crazy old sea chest that did double duty as a wash-stand and centre table; “there, make yourself comfortable now, and good night to ye.” I turned round from eyeing the bed, but he had disappeared.\n\n      Folding back the counterpane, I stooped over the bed. Though none of the most elegant, it yet stood the scrutiny tolerably well. I then glanced round the room; and besides the bedstead and centre table, could see no other furniture belonging to the place, but a rude shelf, the four walls, and a papered fireboard representing a man striking a whale. Of things not properly belonging to the room, there was a hammock lashed up, and thrown upon the floor in one corner; also a large seaman’s bag, containing the harpooneer’s wardrobe, no doubt in lieu of a land trunk. Likewise, there was a parcel of outlandish bone fish hooks on the shelf over the fire-place, and a tall harpoon standing at the head of the bed.\n\n      But what is this on the chest? I took it up, and held it close to the light, and felt it, and smelt it, and tried every way possible to arrive at some satisfactory conclusion concerning it. I can compare it to nothing but a large door mat, ornamented at the edges with little tinkling tags something like the stained porcupine quills round an Indian moccasin. There was a hole or slit in the middle of this mat, as you see the same in South American ponchos. But could it be possible that any sober harpooneer would get into a door mat, and parade the streets of any Christian town in that sort of guise? I put it on, to try it, and it weighed me down like a hamper, being uncommonly shaggy and thick, and I thought a little damp, as though this mysterious harpooneer had been wearing it of a rainy day. I went up in it to a bit of glass stuck against the wall, and I never saw such a sight in my life. I tore myself out of it in such a hurry that I gave myself a kink in the neck.\n\n      I sat down on the side of the bed, and commenced thinking about this head-peddling harpooneer, and his door mat. After thinking some time on the bed-side, I got up and took off my monkey jacket, and then stood in the middle of the room thinking. I then took off my coat, and thought a little more in my shirt sleeves. But beginning to feel very cold now, half undressed as I was, and remembering what the landlord said about the harpooneer’s not coming home at all that night, it being so very late, I made no more ado, but jumped out of my pantaloons and boots, and then blowing out the light tumbled into bed, and commended myself to the care of heaven.\n\n      Whether that mattress was stuffed with corn-cobs or broken crockery, there is no telling, but I rolled about a good deal, and could not sleep for a long time. At last I slid off into a light doze, and had pretty nearly made a good offing towards the land of Nod, when I heard a heavy footfall in the passage, and saw a glimmer of light come into the room from under the door.\n\n      Lord save me, thinks I, that must be the harpooneer, the infernal head-peddler. But I lay perfectly still, and resolved not to say a word till spoken to. Holding a light in one hand, and that identical New Zealand head in the other, the stranger entered the room, and without looking towards the bed, placed his candle a good way off from me on the floor in one corner, and then began working away at the knotted cords of the large bag I before spoke of as being in the room. I was all eagerness to see his face, but he kept it averted for some time while employed in unlacing the bag’s mouth. This accomplished, however, he turned round—when, good heavens! what a sight! Such a face! It was of a dark, purplish, yellow colour, here and there stuck over with large blackish looking squares. Yes, it’s just as I thought, he’s a terrible bedfellow; he’s been in a fight, got dreadfully cut, and here he is, just from the surgeon. But at that moment he chanced to turn his face so towards the light, that I plainly saw they could not be sticking-plasters at all, those black squares on his cheeks. They were stains of some sort or other. At first I knew not what to make of this; but soon an inkling of the truth occurred to me. I remembered a story of a white man—a whaleman too—who, falling among the cannibals, had been tattooed by them. I concluded that this harpooneer, in the course of his distant voyages, must have met with a similar adventure. And what is it, thought I, after all! It’s only his outside; a man can be honest in any sort of skin. But then, what to make of his unearthly complexion, that part of it, I mean, lying round about, and completely independent of the squares of tattooing. To be sure, it might be nothing but a good coat of tropical tanning; but I never heard of a hot sun’s tanning a white man into a purplish yellow one. However, I had never been in the South Seas; and perhaps the sun there produced these extraordinary effects upon the skin. Now, while all these ideas were passing through me like lightning, this harpooneer never noticed me at all. But, after some difficulty having opened his bag, he commenced fumbling in it, and presently pulled out a sort of tomahawk, and a seal-skin wallet with the hair on. Placing these on the old chest in the middle of the room, he then took the New Zealand head—a ghastly thing enough—and crammed it down into the bag. He now took off his hat—a new beaver hat—when I came nigh singing out with fresh surprise. There was no hair on his head—none to speak of at least—nothing but a small scalp-knot twisted up on his forehead. His bald purplish head now looked for all the world like a mildewed skull. Had not the stranger stood between me and the door, I would have bolted out of it quicker than ever I bolted a dinner.\n\n      Even as it was, I thought something of slipping out of the window, but it was the second floor back. I am no coward, but what to make of this head-peddling purple rascal altogether passed my comprehension. Ignorance is the parent of fear, and being completely nonplussed and confounded about the stranger, I confess I was now as much afraid of him as if it was the devil himself who had thus broken into my room at the dead of night. In fact, I was so afraid of him that I was not game enough just then to address him, and demand a satisfactory answer concerning what seemed inexplicable in him.\n\n      Meanwhile, he continued the business of undressing, and at last showed his chest and arms. As I live, these covered parts of him were checkered with the same squares as his face; his back, too, was all over the same dark squares; he seemed to have been in a Thirty Years’ War, and just escaped from it with a sticking-plaster shirt. Still more, his very legs were marked, as if a parcel of dark green frogs were running up the trunks of young palms. It was now quite plain that he must be some abominable savage or other shipped aboard of a whaleman in the South Seas, and so landed in this Christian country. I quaked to think of it. A peddler of heads too—perhaps the heads of his own brothers. He might take a fancy to mine—heavens! look at that tomahawk!\n\n      But there was no time for shuddering, for now the savage went about something that completely fascinated my attention, and convinced me that he must indeed be a heathen. Going to his heavy grego, or wrapall, or dreadnaught, which he had previously hung on a chair, he fumbled in the pockets, and produced at length a curious little deformed image with a hunch on its back, and exactly the colour of a three days’ old Congo baby. Remembering the embalmed head, at first I almost thought that this black manikin was a real baby preserved in some similar manner. But seeing that it was not at all limber, and that it glistened a good deal like polished ebony, I concluded that it must be nothing but a wooden idol, which indeed it proved to be. For now the savage goes up to the empty fire-place, and removing the papered fire-board, sets up this little hunch-backed image, like a tenpin, between the andirons. The chimney jambs and all the bricks inside were very sooty, so that I thought this fire-place made a very appropriate little shrine or chapel for his Congo idol.\n\n      I now screwed my eyes hard towards the half hidden image, feeling but ill at ease meantime—to see what was next to follow. First he takes about a double handful of shavings out of his grego pocket, and places them carefully before the idol; then laying a bit of ship biscuit on top and applying the flame from the lamp, he kindled the shavings into a sacrificial blaze. Presently, after many hasty snatches into the fire, and still hastier withdrawals of his fingers (whereby he seemed to be scorching them badly), he at last succeeded in drawing out the biscuit; then blowing off the heat and ashes a little, he made a polite offer of it to the little negro. But the little devil did not seem to fancy such dry sort of fare at all; he never moved his lips. All these strange antics were accompanied by still stranger guttural noises from the devotee, who seemed to be praying in a sing-song or else singing some pagan psalmody or other, during which his face twitched about in the most unnatural manner. At last extinguishing the fire, he took the idol up very unceremoniously, and bagged it again in his grego pocket as carelessly as if he were a sportsman bagging a dead woodcock.\n\n      All these queer proceedings increased my uncomfortableness, and seeing him now exhibiting strong symptoms of concluding his business operations, and jumping into bed with me, I thought it was high time, now or never, before the light was put out, to break the spell in which I had so long been bound.\n\n      But the interval I spent in deliberating what to say, was a fatal one. Taking up his tomahawk from the table, he examined the head of it for an instant, and then holding it to the light, with his mouth at the handle, he puffed out great clouds of tobacco smoke. The next moment the light was extinguished, and this wild cannibal, tomahawk between his teeth, sprang into bed with me. I sang out, I could not help it now; and giving a sudden grunt of astonishment he began feeling me.\n\n      Stammering out something, I knew not what, I rolled away from him against the wall, and then conjured him, whoever or whatever he might be, to keep quiet, and let me get up and light the lamp again. But his guttural responses satisfied me at once that he but ill comprehended my meaning.\n\n      “Who-e debel you?”—he at last said—“you no speak-e, dam-me, I kill-e.” And so saying the lighted tomahawk began flourishing about me in the dark.\n\n      “Landlord, for God’s sake, Peter Coffin!” shouted I. “Landlord! Watch! Coffin! Angels! save me!”\n\n      “Speak-e! tell-ee me who-ee be, or dam-me, I kill-e!” again growled the cannibal, while his horrid flourishings of the tomahawk scattered the hot tobacco ashes about me till I thought my linen would get on fire. But thank heaven, at that moment the landlord came into the room light in hand, and leaping from the bed I ran up to him.\n\n      “Don’t be afraid now,” said he, grinning again, “Queequeg here wouldn’t harm a hair of your head.”\n\n      “Stop your grinning,” shouted I, “and why didn’t you tell me that that infernal harpooneer was a cannibal?”\n\n      “I thought ye know’d it;—didn’t I tell ye, he was a peddlin’ heads around town?—but turn flukes again and go to sleep. Queequeg, look here—you sabbee me, I sabbee—you this man sleepe you—you sabbee?”\n\n      “Me sabbee plenty”—grunted Queequeg, puffing away at his pipe and sitting up in bed.\n\n      “You gettee in,” he added, motioning to me with his tomahawk, and throwing the clothes to one side. He really did this in not only a civil but a really kind and charitable way. I stood looking at him a moment. For all his tattooings he was on the whole a clean, comely looking cannibal. What’s all this fuss I have been making about, thought I to myself—the man’s a human being just as I am: he has just as much reason to fear me, as I have to be afraid of him. Better sleep with a sober cannibal than a drunken Christian.\n\n      “Landlord,” said I, “tell him to stash his tomahawk there, or pipe, or whatever you call it; tell him to stop smoking, in short, and I will turn in with him. But I don’t fancy having a man smoking in bed with me. It’s dangerous. Besides, I ain’t insured.”\n\n      This being told to Queequeg, he at once complied, and again politely motioned me to get into bed—rolling over to one side as much as to say—“I won’t touch a leg of ye.”\n\n      “Good night, landlord,” said I, “you may go.”\n\n      I turned in, and never slept better in my life.\"\n    datetime: 2017-06-02T00:00:00-04:00\n    date: 2017-06-07T00:00:00-04:00\n    image: /assets/uploads/moby-dick.jpg\n    file: /assets/uploads/moby-dick.jpg\n    select: c\n    object:\n      text: >-\n        Upon waking next morning about daylight, I found Queequeg’s arm thrown\n        over me in the most loving and affectionate manner. You had almost\n        thought I had been his wife. The counterpane was of patchwork, full of\n        odd little parti-coloured squares and triangles; and this arm of his\n        tattooed all over with an interminable Cretan labyrinth of a figure, no\n        two parts of which were of one precise shade—owing I suppose to his\n        keeping his arm at sea unmethodically in sun and shade, his shirt\n        sleeves irregularly rolled up at various times—this same arm of his, I\n        say, looked for all the world like a strip of that same patchwork quilt.\n        Indeed, partly lying on it as the arm did when I first awoke, I could\n        hardly tell it from the quilt, they so blended their hues together; and\n        it was only by the sense of weight and pressure that I could tell that\n        Queequeg was hugging me.\n      number: '444444'\n      markdown: >-\n        # Upon waking next morning about daylight, I found Queequeg’s arm thrown\n        over me in the most loving and affectionate manner. You had almost\n        thought I had been his wife. The counterpane was of patchwork, full of\n        odd little parti-coloured squares and triangles; and this arm of his\n        tattooed all over with an interminable Cretan labyrinth of a figure, no\n        two parts of which were of one precise shade—owing I suppose to his\n        keeping his arm at sea unmethodically in sun and shade, his shirt\n        sleeves irregularly rolled up at various times—this same arm of his, I\n        say, looked for all the world like a strip of that same patchwork quilt.\n        Indeed, partly lying on it as the arm did when I first awoke, I could\n        hardly tell it from the quilt, they so blended their hues together; and\n        it was only by the sense of weight and pressure that I could tell that\n        Queequeg was hugging me.\n\n\n        ## My sensations were strange. Let me try to explain them. When I was a\n        child, I well remember a somewhat similar circumstance that befell me;\n        whether it was a reality or a dream, I never could entirely settle. The\n        circumstance was this. I had been cutting up some caper or other—I think\n        it was trying to crawl up the chimney, as I had seen a little sweep do a\n        few days previous; and my stepmother who, somehow or other, was all the\n        time whipping me, or sending me to bed supperless,—my mother dragged me\n        by the legs out of the chimney and packed me off to bed, though it was\n        only two o’clock in the afternoon of the 21st June, the longest day in\n        the year in our hemisphere. I felt dreadfully. But there was no help for\n        it, so up stairs I went to my little room in the third floor, undressed\n        myself as slowly as possible so as to kill time, and with a bitter sigh\n        got between the sheets.\n\n\n        I lay there dismally calculating that sixteen entire hours must elapse\n        before I could hope for a resurrection. Sixteen hours in bed! the small\n        of my back ached to think of it. And it was so light too; the sun\n        shining in at the window, and a great rattling of coaches in the\n        streets, and the sound of gay voices all over the house. I felt worse\n        and worse—at last I got up, dressed, and softly going down in my\n        stockinged feet, sought out my stepmother, and suddenly threw myself at\n        her feet, beseeching her as a particular favour to give me a good\n        slippering for my misbehaviour; anything indeed but condemning me to lie\n        abed such an unendurable length of time. But she was the best and most\n        conscientious of stepmothers, and back I had to go to my room. For\n        several hours I lay there broad awake, feeling a great deal worse than I\n        have ever done since, even from the greatest subsequent misfortunes. At\n        last I must have fallen into a troubled nightmare of a doze; and slowly\n        waking from it—half steeped in dreams—I opened my eyes, and the before\n        sun-lit room was now wrapped in outer darkness. Instantly I felt a shock\n        running through all my frame; nothing was to be seen, and nothing was to\n        be heard; but a supernatural hand seemed placed in mine. My arm hung\n        over the counterpane, and the nameless, unimaginable, silent form or\n        phantom, to which the hand belonged, seemed closely seated by my\n        bed-side. For what seemed ages piled on ages, I lay there, frozen with\n        the most awful fears, not daring to drag away my hand; yet ever thinking\n        that if I could but stir it one single inch, the horrid spell would be\n        broken. I knew not how this consciousness at last glided away from me;\n        but waking in the morning, I shudderingly remembered it all, and for\n        days and weeks and months afterwards I lost myself in confounding\n        attempts to explain the mystery. Nay, to this very hour, I often puzzle\n        myself with it.\n\n\n        Now, take away the awful fear, and my sensations at feeling the\n        supernatural hand in mine were very similar, in their strangeness, to\n        those which I experienced on waking up and seeing Queequeg’s pagan arm\n        thrown round me. But at length all the past night’s events soberly\n        recurred, one by one, in fixed reality, and then I lay only alive to the\n        comical predicament. For though I tried to move his arm—unlock his\n        bridegroom clasp—yet, sleeping as he was, he still hugged me tightly, as\n        though naught but death should part us twain. I now strove to rouse\n        him—“Queequeg!”—but his only answer was a snore. I then rolled over, my\n        neck feeling as if it were in a horse-collar; and suddenly felt a slight\n        scratch. Throwing aside the counterpane, there lay the tomahawk sleeping\n        by the savage’s side, as if it were a hatchet-faced baby. A pretty\n        pickle, truly, thought I; abed here in a strange house in the broad day,\n        with a cannibal and a tomahawk! “Queequeg!—in the name of goodness,\n        Queequeg, wake!” At length, by dint of much wriggling, and loud and\n        incessant expostulations upon the unbecomingness of his hugging a fellow\n        male in that matrimonial sort of style, I succeeded in extracting a\n        grunt; and presently, he drew back his arm, shook himself all over like\n        a Newfoundland dog just from the water, and sat up in bed, stiff as a\n        pike-staff, looking at me, and rubbing his eyes as if he did not\n        altogether remember how I came to be there, though a dim consciousness\n        of knowing something about me seemed slowly dawning over him. Meanwhile,\n        I lay quietly eyeing him, having no serious misgivings now, and bent\n        upon narrowly observing so curious a creature. When, at last, his mind\n        seemed made up touching the character of his bedfellow, and he became,\n        as it were, reconciled to the fact; he jumped out upon the floor, and by\n        certain signs and sounds gave me to understand that, if it pleased me,\n        he would dress first and then leave me to dress afterwards, leaving the\n        whole apartment to myself. Thinks I, Queequeg, under the circumstances,\n        this is a very civilized overture; but, the truth is, these savages have\n        an innate sense of delicacy, say what you will; it is marvellous how\n        essentially polite they are. I pay this particular compliment to\n        Queequeg, because he treated me with so much civility and consideration,\n        while I was guilty of great rudeness; staring at him from the bed, and\n        watching all his toilette motions; for the time my curiosity getting the\n        better of my breeding. Nevertheless, a man like Queequeg you don’t see\n        every day, he and his ways were well worth unusual regarding.\n\n\n        He commenced dressing at top by donning his beaver hat, a very tall one,\n        by the by, and then—still minus his trowsers—he hunted up his boots.\n        What under the heavens he did it for, I cannot tell, but his next\n        movement was to crush himself—boots in hand, and hat on—under the bed;\n        when, from sundry violent gaspings and strainings, I inferred he was\n        hard at work booting himself; though by no law of propriety that I ever\n        heard of, is any man required to be private when putting on his boots.\n        But Queequeg, do you see, was a creature in the transition stage—neither\n        caterpillar nor butterfly. He was just enough civilized to show off his\n        outlandishness in the strangest possible manners. His education was not\n        yet completed. He was an undergraduate. If he had not been a small\n        degree civilized, he very probably would not have troubled himself with\n        boots at all; but then, if he had not been still a savage, he never\n        would have dreamt of getting under the bed to put them on. At last, he\n        emerged with his hat very much dented and crushed down over his eyes,\n        and began creaking and limping about the room, as if, not being much\n        accustomed to boots, his pair of damp, wrinkled cowhide ones—probably\n        not made to order either—rather pinched and tormented him at the first\n        go off of a bitter cold morning.\n\n\n        Seeing, now, that there were no curtains to the window, and that the\n        street being very narrow, the house opposite commanded a plain view into\n        the room, and observing more and more the indecorous figure that\n        Queequeg made, staving about with little else but his hat and boots on;\n        I begged him as well as I could, to accelerate his toilet somewhat, and\n        particularly to get into his pantaloons as soon as possible. He\n        complied, and then proceeded to wash himself. At that time in the\n        morning any Christian would have washed his face; but Queequeg, to my\n        amazement, contented himself with restricting his ablutions to his\n        chest, arms, and hands. He then donned his waistcoat, and taking up a\n        piece of hard soap on the wash-stand centre table, dipped it into water\n        and commenced lathering his face. I was watching to see where he kept\n        his razor, when lo and behold, he takes the harpoon from the bed corner,\n        slips out the long wooden stock, unsheathes the head, whets it a little\n        on his boot, and striding up to the bit of mirror against the wall,\n        begins a vigorous scraping, or rather harpooning of his cheeks. Thinks\n        I, Queequeg, this is using Rogers’s best cutlery with a vengeance.\n        Afterwards I wondered the less at this operation when I came to know of\n        what fine steel the head of a harpoon is made, and how exceedingly sharp\n        the long straight edges are always kept.\n\n\n        The rest of his toilet was soon achieved, and he proudly marched out of\n        the room, wrapped up in his great pilot monkey jacket, and sporting his\n        harpoon like a marshal’s baton.\n      datetime: 2017-06-07T19:05:43.820Z\n      date: 2017-06-07T19:05:36.240Z\n      image: /assets/uploads/moby-dick.jpg\n      file: /assets/uploads/moby-dick.jpg\n      select: b\n      list:\n        - object:\n            date: 2017-06-07T19:10:25.684Z\n      string: CHAPTER 4. The Counterpane.\n    string: CHAPTER 3. The Spouter-Inn.\ntyped_list:\n  - type: type_1_object\n    string: CHAPTER 2. The Carpet-Bag.\n    boolean: true\n    text: >-\n      I stuffed a shirt or two into my old carpet-bag, tucked it under my arm, and\n      started for Cape Horn and the Pacific. Quitting the good city of old\n      Manhatto, I duly arrived in New Bedford. It was a Saturday night in\n      December. Much was I disappointed upon learning that the little packet for\n      Nantucket had already sailed, and that no way of reaching that place would\n      offer, till the following Monday.\n  - type: type_2_object\n    number: 3\n    select: b\n    datetime:  2017-06-07T19:05:43.816Z\n    markdown: >-\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget\n      facilisis magna. Integer eget eleifend quam, sit amet sodales nisi. Fusce\n      non lacus tempus, posuere tellus semper, facilisis lectus. Cras consequat\n      aliquet ex.\n  - type: type_1_object\n    string: CHAPTER 2. The Carpet-Bag.\n    boolean: false\n    text: >-\n      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec elementum\n      augue ornare lectus finibus mollis. Maecenas fringilla lorem at nisl pharetra\n      scelerisque.\n  - type: type_3_object\n    date: 2017-06-07T18:55:28.111Z\n    image: /assets/uploads/moby-dick.jpg\n    file: /assets/uploads/moby-dick.jpg\n---\n\n",
+          },
+        },
+      };
+
+      var ONE_DAY = 60 * 60 * 24 * 1000;
+
+      for (var i = 1; i <= 20; i++) {
+        var date = new Date();
+
+        date.setTime(date.getTime() + ONE_DAY);
+        var month = ('0' + (date.getMonth() + 1)).slice(-2);
+        var day = ('0' + date.getDate()).slice(-2);
+        var dateString = '' + date.getFullYear() + '-' + month + '-' + day;
+        var slug = dateString + '-post-number-' + i + '.md';
+
+        window.repoFiles._posts[slug] = {
+          content:
+            '---\ntitle: "This is post # ' +
+            i +
+            `\"\ndraft: ${i % 2 === 0}` +
+            '\ndate: ' +
+            dateString +
+            'T00:00:00.000Z\n---\n# The post is number ' +
+            i +
+            `\n\n![Static CMS](https://raw.githubusercontent.com/StaticJsCMS/static-cms/main/static-cms-logo.png)
+
+# Awesome Editor!
+
+It was _released as open source in 2022_ and is **_continually_** evolving to be the **best editor experience** available for static site generators.
+
+## MDX
+
+The output out this widget is \`mdx\`, a mixture of \`markdown\` and \`javascript components\`. See [MDX documentation](https://mdxjs.com/docs/).
+
+\`\`\`yaml
+name: body
+label: Blog post content
+widget: markdown
+\`\`\`
+
+\`\`\`js
+name: 'body',
+label: 'Blog post content',
+widget: 'markdown',
+\`\`\`
+
+> See the table below for default options
+> More API information can be found in the document
+
+| Name          | Type                  | Default | Description                                                                                                                                           |
+| ------------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| default       | string                | \`''\`    | _Optional_. The default value for the field. Accepts markdown content                                                                                 |
+| media_library | Media Library Options | \`{}\`    | _Optional_. Media library settings to apply when a media library is opened by the current widget. See [Media Library Options](#media-library-options) |
+| media_folder  | string                |         | _Optional_. Specifies the folder path where uploaded files should be saved, relative to the base of the repo                                          |
+| public_folder | string                |         | _Optional_. Specifies the folder path where the files uploaded by the media library will be accessed, relative to the base of the built site          |
+
+### Media Library Options
+
+| Name           | Type                   | Default | Description                                                                                                                                       |
+| -------------- | ---------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
+| allow_multiple | boolean                | \`true\`  | _Optional_. When set to \`false\`, prevents multiple selection for any media library extension, but must be supported by the extension in use       |
+| config         | string                 | \`{}\`    | _Optional_. A configuration object that will be passed directly to the media library being used - available options are determined by the library |
+| choose_url     | string<br />\\| boolean | \`true\`  | _Optional_. When set to \`false\`, the "Insert from URL" button will be hidden
+
+## Features
+
+* CommonMark + GFM Specifications
+   * Live \`Preview\`
+   * Auto Indent
+   * Syntax Highlight
+        1. Rich Editor
+        2. Preview
+
+## Formatting
+
+**Bold**, *Italic*, ***both***
+
+~~Strikethrough~~
+
+## Shortcodes
+
+[youtube|p6h-rYSVX90]
+
+## Support
+
+> * Supports remark plugins
+> * Supports wrappers
+>    1. [x] React
+>    2. [ ] More coming soon`,
+        };
+      }
+
+      for (var i = 1; i <= 5; i++) {
+        var date = new Date();
+
+        date.setTime(date.getTime() + ONE_DAY);
+        var month = ('0' + (date.getMonth() + 1)).slice(-2);
+        var day = ('0' + date.getDate()).slice(-2);
+        var dateString = '' + date.getFullYear() + '-' + month + '-' + day;
+        var slug = dateString + '-faq-number-' + i + '.md';
+
+        window.repoFiles._faqs[slug] = {
+          content:
+            '---\ntitle: "This FAQ item # ' +
+            i +
+            '"\ndate: ' +
+            dateString +
+            'T00:00:00.000Z\n---\n# Loren ipsum dolor sit amet',
+        };
+      }
+      window.repoFiles._pages = {
+        directory: {
+          'sub-directory': {
+            'nested-directory': {
+              'index.md': {
+                path: '_pages/directory/sub-directory/nested-directory/index.md',
+                content: '---\ntitle: "Nested Directory"\n---\n',
+              },
+            },
+            'index.md': {
+              path: '_pages/directory/sub-directory/index.md',
+              content: '---\ntitle: "Sub Directory"\n---\n',
+            },
+          },
+          'another-sub-directory': {
+            'index.md': {
+              path: '_pages/directory/another-sub-directory/index.md',
+              content: '---\ntitle: "Another Sub Directory"\n---\n',
+            },
+          },
+          'index.md': {
+            path: '_pages/directory/index.md',
+            content: '---\ntitle: "Directory"\n---\n',
+          },
+        },
+        'index.md': {
+          path: '_pages/index.md',
+          content: '---\ntitle: "Root Page"\n---\n',
+        },
+      };
+    </script>
+  </head>
+  <body>
+    <script src="https://unpkg.com/@staticcms/app@1.0.0-beta.5/dist/static-cms-core.js"></script>
+    <script type="module" src="./index.js"></script>
+  </body>
+</html>
diff --git a/packages/demo/index.js b/packages/demo/index.js
new file mode 100644
index 00000000..0428dfd3
--- /dev/null
+++ b/packages/demo/index.js
@@ -0,0 +1,173 @@
+// Register all the things
+CMS.init();
+
+const PostPreview = ({ entry, widgetFor, widgetsFor }) => {
+  return h(
+    'div',
+    {},
+    h('div', { className: 'cover' }, h('h1', {}, entry.data.title), widgetFor('image')),
+    h('p', {}, h('small', {}, 'Written ' + entry.data.date)),
+    h('div', { className: 'text' }, widgetFor('body')),
+  );
+};
+
+const GeneralPreview = ({ widgetsFor, getAsset, entry }) => {
+  const title = entry.data.site_title;
+  const posts = entry.data.posts;
+  const thumb = posts && posts.thumb;
+
+  const [thumbUrl, setThumbUrl] = useState('');
+
+  useEffect(() => {
+    let alive = true;
+
+    const loadThumb = async () => {
+      const thumbAsset = await getAsset(thumb);
+      if (alive) {
+        setThumbUrl(thumbAsset.toString());
+      }
+    };
+
+    loadThumb();
+
+    return () => {
+      alive = false;
+    };
+  }, [thumb]);
+
+  return h(
+    'div',
+    {},
+    h('h1', {}, title),
+    h(
+      'dl',
+      {},
+      h('dt', {}, 'Posts on Frontpage'),
+      h('dd', {}, widgetsFor('posts').widgets.front_limit ?? 0),
+
+      h('dt', {}, 'Default Author'),
+      h('dd', {}, widgetsFor('posts').data?.author ?? 'None'),
+
+      h('dt', {}, 'Default Thumbnail'),
+      h('dd', {}, thumb && h('img', { src: thumbUrl })),
+    ),
+  );
+};
+
+const AuthorsPreview = ({ widgetsFor }) => {
+  return h(
+    'div',
+    {},
+    h('h1', {}, 'Authors'),
+    widgetsFor('authors').map(function (author, index) {
+      return h(
+        'div',
+        { key: index },
+        h('hr', {}),
+        h('strong', {}, author.data.name),
+        author.widgets.description,
+      );
+    }),
+  );
+};
+
+const RelationKitchenSinkPostPreview = ({ fieldsMetaData }) => {
+  // When a post is selected from the relation field, all of it's data
+  // will be available in the field's metadata nested under the collection
+  // name, and then further nested under the value specified in `value_field`.
+  // In this case, the post would be nested under "posts" and then under
+  // the title of the selected post, since our `value_field` in the config
+  // is "title".
+  const post = fieldsMetaData && fieldsMetaData.posts.value;
+  const style = { border: '2px solid #ccc', borderRadius: '8px', padding: '20px' };
+  return post
+    ? h(
+        'div',
+        { style: style },
+        h('h2', {}, 'Related Post'),
+        h('h3', {}, post.title),
+        h('img', { src: post.image }),
+        h('p', {}, (post.body ?? '').slice(0, 100) + '...'),
+      )
+    : null;
+};
+
+const CustomPage = () => {
+  return h('div', {}, 'I am a custom page!');
+};
+
+CMS.registerPreviewStyle('.toastui-editor-contents h1 { color: blue }', { raw: true });
+CMS.registerPreviewTemplate('posts', PostPreview);
+CMS.registerPreviewTemplate('general', GeneralPreview);
+CMS.registerPreviewTemplate('authors', AuthorsPreview);
+// Pass the name of a registered control to reuse with a new widget preview.
+CMS.registerWidget('relationKitchenSinkPost', 'relation', RelationKitchenSinkPostPreview);
+CMS.registerAdditionalLink({
+  id: 'example',
+  title: 'Example.com',
+  data: 'https://example.com',
+  options: {
+    icon: 'page',
+  },
+});
+CMS.registerAdditionalLink({
+  id: 'custom-page',
+  title: 'Custom Page',
+  data: CustomPage,
+  options: {
+    icon: 'page',
+  },
+});
+
+CMS.registerShortcode('youtube', {
+  label: 'YouTube',
+  openTag: '[',
+  closeTag: ']',
+  separator: '|',
+  toProps: args => {
+    if (args.length > 0) {
+      return { src: args[0] };
+    }
+
+    return { src: '' };
+  },
+  toArgs: ({ src }) => {
+    return [src];
+  },
+  control: ({ src, onChange }) => {
+    return h('span', {}, [
+      h('input', {
+        key: 'control-input',
+        value: src,
+        onChange: event => {
+          onChange({ src: event.target.value });
+        },
+      }),
+      h(
+        'iframe',
+        {
+          key: 'control-preview',
+          width: '420',
+          height: '315',
+          src: `https://www.youtube.com/embed/${src}`,
+        },
+        '',
+      ),
+    ]);
+  },
+  preview: ({ src }) => {
+    return h(
+      'span',
+      {},
+      h(
+        'iframe',
+        {
+          width: '420',
+          height: '315',
+          src: `https://www.youtube.com/embed/${src}`,
+        },
+        '',
+      ),
+    );
+  },
+});
diff --git a/yarn.lock b/yarn.lock
index a1858f24..a271ca9f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3393,10 +3393,10 @@
     redux-thunk "^2.4.2"
     reselect "^4.1.7"
 
-"@remix-run/router@1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.1.0.tgz#b48db8148c8a888e50580a8152b6f68161c49406"
-  integrity sha512-rGl+jH/7x1KBCQScz9p54p0dtPLNeKGb3e0wD2H5/oZj41bwQUnXdzbj2TbUAFhvD7cp9EyEQA4dEgpUFa1O7Q==
+"@remix-run/router@1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.2.0.tgz#54eff8306938b64c521f4a9ed313d33a91ef019a"
+  integrity sha512-GO82KYYTWPRCgdNtnheaZG3LcViUlxRFlHM7ykh7N+ufoXi6PVIHoP+9RUG/vuzl2hr9i/h6EA1Eq+2HpqJ0gQ==
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -13151,20 +13151,20 @@ react-refresh@0.14.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.14.0.tgz#4e02825378a5f227079554d4284889354e5f553e"
   integrity sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==
 
-react-router-dom@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.5.0.tgz#3970bdcaa7c710a6e0b478a833ba0b4b8ae61a6f"
-  integrity sha512-/XzRc5fq80gW1ctiIGilyKFZC/j4kfe75uivMsTChFbkvrK4ZrF3P3cGIc1f/SSkQ4JiJozPrf+AwUHHWVehVg==
+react-router-dom@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-6.6.0.tgz#ad20b37b69e9fe7c6389663a0767ba40a19f71fe"
+  integrity sha512-qC4jnvpfCPKVle1mKLD75IvZLcbVJyFMlSn16WY9ZiOed3dgSmqhslCf/u3tmSccWOujkdsT/OwGq12bELmvjg==
   dependencies:
-    "@remix-run/router" "1.1.0"
-    react-router "6.5.0"
+    "@remix-run/router" "1.2.0"
+    react-router "6.6.0"
 
-react-router@6.5.0:
-  version "6.5.0"
-  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.5.0.tgz#b53f15543a60750c925609d2e38037ac5aed6dd3"
-  integrity sha512-fqqUSU0NC0tSX0sZbyuxzuAzvGqbjiZItBQnyicWlOUmzhAU8YuLgRbaCL2hf3sJdtRy4LP/WBrWtARkMvdGPQ==
+react-router@6.6.0:
+  version "6.6.0"
+  resolved "https://registry.yarnpkg.com/react-router/-/react-router-6.6.0.tgz#9ae27cfc6bf7f2b28e1f028fe01fdbec96a3a41d"
+  integrity sha512-+VPfCIaFbkW7BAiB/2oeprxKAt1KLbl+zXZ10CXOYezKWgBmTKyh8XjI53eLqY5kd7uY+V4rh3UW44FclwUU+Q==
   dependencies:
-    "@remix-run/router" "1.1.0"
+    "@remix-run/router" "1.2.0"
 
 react-schemaorg@2.0.0:
   version "2.0.0"