Merge pull request #9 from formkit/feature/frontmatter

adds frontmatter to all .md docs content

Author: luan-nk-nguyen

advanced/context.md

@@ -1,3 +1,8 @@
+---
+title: The Context Object
+description: FormKit provides a reactive context object to expose data to slots, rules, and the underlying schema that defines an input.
+---
+
 # Context object
 
 FormKit inputs use a reactive object to expose data to slots, rules, and the underlying [schema](/advanced/schema) that defines the input. This is called the `context` object and is found in the each input's [core `node` object](/advanced/core-node) at `node.context`. The context object has the following properties:

advanced/core.md

@@ -1,3 +1,8 @@
+---
+title: Core
+description: FormKit Core is a zero-dependency package that is responsible for nearly all of FormKit's low-level critical functions.
+---
+
 # Core
 
 At the heart of the FormKit framework is `@formkit/core`. This zero-dependency package is responsible for nearly all of FormKit's low-level critical functions, such as:

advanced/custom-inputs.md

@@ -1,3 +1,8 @@
+---
+title: Custom Inputs
+description: Create your own inputs that automatically inherit FormKit’s value-added features such as validation, error messages, data modeling, grouping, labels, help text and more.
+---
+
 # Custom inputs
 
 <cta label="Building your first custom input?" type="ghost" href="/guides/create-a-custom-input" button="Read the guide"></cta>

advanced/schema.md

@@ -1,3 +1,8 @@
+---
+title: FormKit Schema
+description: FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations including FormKit forms.
+---
+
 # Schema
 
 FormKit's schema is a JSON-serializable data format for storing DOM structures and component implementations including FormKit forms. Although created specifically for implementing forms, the format is capable of generating any HTML markup or using any third-party components. Schemas are rendered using FormKit's `<FormKitSchema>` component.

essentials/community.md

@@ -1,3 +1,8 @@
+---
+title: FormKit Community
+description: Get involved in the FormKit community — troubleshooting support, feature requests, project roadmap discussion, and more.
+---
+
 # Community
 
 Community involvement and contributions are one of the most important aspects of the FormKit ecosystem. We invite you to actively participate — whether using FormKit's products, translating validation messages to your native tongue, being an active member of the Discord, or filing bug reports or making pull requests to the [FormKit codebase](https://github.com/formkit/formkit).

essentials/forms.md

@@ -1,3 +1,8 @@
+---
+title: Forms
+description: Collect all of your FormKit data, submit to your server, and handle server-side error messages.
+---
+
 # Forms
 
 While you’re free to use `FormKit` inputs by themselves, you’ll usually want to group them into a form. To do this, you simply wrap your inputs in a `<FormKit type="form">`.

essentials/generation.md

@@ -1,3 +1,8 @@
+---
+title: Form Generation
+description: Harness all the power of FormKit in a serializable, JSON-compatible schema language.
+---
+
 # Form generation
 
 FormKit ships with first-class support for generating forms using a JSON compatible schema. This makes it possible to store generated forms in databases, files, or heck a QR code if you really want to. To generate a form, just pass your schema to the `<FormKitSchema>` component using the `:schema` prop.

essentials/inputs.md

@@ -1,3 +1,8 @@
+---
+title: FormKit Inputs
+description: FormKit ships with turbocharged inputs for developing production-ready forms in your project.
+---
+
 # Inputs
 
 FormKit’s inputs are similar to HTML inputs but turbocharged with much needed features like labels, help text, validation, and error messages (and much more). Similar to how HTML’s `<input>` tag uses various `type` attributes (i.e., `<input type="text">` vs `<input type="checkbox">`), FormKit uses the `type` prop for _all_ inputs. In fact, with FormKit, **there is only 1 component you have to learn**:

essentials/installation.md

@@ -1,3 +1,8 @@
+---
+title: Getting Started with FormKit
+description: Get up and running with FormKit in your project.
+---
+
 # Installation
 
 FormKit can be downloaded using a package manager like `npm` or `yarn` or it can be used directly via CDN.

essentials/internationalization.md

@@ -1,3 +1,8 @@
+---
+title: Internationalization (i18n)
+description: Translate FormKit UI and validation messages into supported languages — or provide your own.
+---
+
 # Internationalization (i18n)
 
 FormKit ships with internationalization support for all of its interfaces and validation messages. Currently, FormKit supports the following languages (in the `@formkit/i18n` package):

essentials/styling.md

@@ -1,3 +1,8 @@
+---
+title: FormKit Styling
+description: Add custom styling to your FormKit components - both globally and per-instance.
+---
+
 # Styling
 
 FormKit ships robust and accessible markup — but with no assumptions about your

essentials/validation.md

@@ -1,3 +1,8 @@
+---
+title: FormKit Validation
+description: Provide instant feedback to users on the validity of their form data.
+---
+
 # Validation
 
 FormKit makes front end validation simple by letting you declare your validation rules directly on your inputs. It’s easy to write custom rules too, but with 20+ production-ready rules to choose from, it's rare you'll need to.

essentials/what-is-formkit.md

@@ -1,3 +1,8 @@
+---
+title: What is Formkit?
+description: FormKit is a form authoring framework for Vue developers that makes building high quality production-ready forms 10x faster.
+---
+
 # What is FormKit?
 
 FormKit is a form authoring framework for Vue developers that makes building high quality production-ready forms 10x faster. It is easy-to-learn and ships with production-ready scaffolding like inputs, validation rules, and error handling.
@@ -55,6 +60,7 @@ FormKit comes with great production-ready defaults, and for many users, the defa
 
 While FormKit does a lot of things, it is not a UI framework or a _layout_ tool. Want inputs next to each other? Cool! Wrap some inputs in a `<div>` and sprinkle on some `flexbox`. While FormKit ships with [default theme](/essentials/styling#optional-genesis-theme), this package assumes you'll still be responsible for most of your form's style and layout. FormKit plays nicely with any UI framework or your custom styles.
 
+
 ## Why not...?
 
 ### Vuetify

guides/create-a-custom-input.md

@@ -1,3 +1,8 @@
+---
+title: Create a Custom Input
+description: Follow this guide to learn how to create, register, and use a custom FormKit input in your project.
+---
+
 # Create a custom input
 
 In this guide, we’ll walk through the process of creating, registering, and using a custom input. Specifically, we’re going create a "one-time password" input ("OTP" for short). OTPs are commonly used for two-factor authentication when a user is required to type in a code sent via SMS or authenticator app. Let’s get started!

inputs/button.md

@@ -1,3 +1,8 @@
+---
+title: Button
+description: A native HTML button element.
+---
+
 <InputPageHero
 title="Button input"
 icon="IconInputButton"

inputs/checkbox.md

@@ -1,3 +1,8 @@
+---
+title: Checkbox
+description: A native HTML checkbox input with support for one or many nested options elements.
+---
+
 <InputPageHero
 title="Checkbox input"
 icon="IconInputCheckbox"

inputs/color.md

@@ -1,3 +1,8 @@
+---
+title: Color
+description: A native HTML color picker.
+---
+
 <InputPageHero
 title="Color input"
 icon="IconInputColor"

inputs/date.md

@@ -1,3 +1,9 @@
+---
+title: Date
+description: A native HTML date picker.
+---
+
+
 <InputPageHero
 title="Date input"
 icon="IconInputDate"

inputs/datetime-local.md

@@ -1,3 +1,9 @@
+---
+title: Color
+description: A native HTML datetime-local picker.
+---
+
+
 <InputPageHero
 title="Datetime-local input"
 icon="IconInputDatetime"

inputs/email.md

@@ -1,3 +1,9 @@
+---
+title: Email
+description: A native HTML email input.
+---
+
+
 <InputPageHero
 title="Email input"
 icon="IconInputEmail"

inputs/file.md

@@ -1,3 +1,9 @@
+---
+title: File
+description: A native HTML file input with support for multiple files, drag and drop, clearing the input, and repopulating from an array.
+---
+
+
 <InputPageHero
 title="File input"
 icon="IconInputFile"

inputs/group.md

@@ -1,3 +1,8 @@
+---
+title: Group
+description: An invisible FormKit input that allows you to logically structure your form data as an object.
+---
+
 <InputPageHero
 title="Group input"
 icon="IconInputGroup"

inputs/hidden.md

@@ -1,3 +1,9 @@
+---
+title: Hidden
+description: A native HTML hidden input.
+---
+
+
 <InputPageHero
 title="Hidden input"
 icon="IconInputHidden"

inputs/list.md

@@ -1,3 +1,9 @@
+---
+title: List
+description: An invisible FormKit input that allows you to logically structure your form data as an array.
+---
+
+
 <InputPageHero
 title="List input"
 icon="IconInputList"

inputs/month.md

@@ -1,3 +1,9 @@
+---
+title: Month
+description: A native HTML month picker.
+---
+
+
 <InputPageHero
 title="Month input"
 icon="IconInputMonth"

inputs/number.md

@@ -1,3 +1,8 @@
+---
+title: Number
+description: A native HTML number input
+---
+
 <InputPageHero
 title="Number input"
 icon="IconInputNumber"

inputs/password.md

@@ -1,3 +1,8 @@
+---
+title: Password
+description: A native HTML password input.
+---
+
 <InputPageHero
 title="Password input"
 icon="IconInputPassword"

inputs/radio.md

@@ -1,3 +1,8 @@
+---
+title: Radio
+description: A native HTML radio input with support for one or many nested options elements.
+---
+
 <InputPageHero
 title="Radio input"
 icon="IconInputRadio"

inputs/range.md

@@ -1,3 +1,8 @@
+---
+title: Range
+description: A native HTML range input.
+---
+
 <InputPageHero
 title="Range input"
 icon="IconInputRange"

inputs/search.md

@@ -1,3 +1,8 @@
+---
+title: Search
+description: A native HTML search input.
+---
+
 <InputPageHero
 title="Search input"
 icon="IconInputSearch"

inputs/select.md

@@ -1,3 +1,8 @@
+---
+title: Select
+description: A native HTML select input. Supports both single-value and multi-value selections.
+---
+
 <InputPageHero
 title="Select input"
 icon="IconInputSelect"

inputs/submit.md

@@ -1,3 +1,8 @@
+---
+title: Submit
+description: A native HTML button element used in place of a native HTML submit input.
+---
+
 <InputPageHero
 title="Submit input"
 icon="IconInputSubmit"

inputs/tel.md

@@ -1,3 +1,8 @@
+---
+title: Tel (Telephone)
+description: A native HTML tel input.
+---
+
 <InputPageHero
 title="Tel input"
 icon="IconInputPhone"

inputs/text.md

@@ -1,3 +1,8 @@
+---
+title: Text
+description: A native HTML text input.
+---
+
 <InputPageHero
 title="Text input"
 icon="IconInputText"

inputs/textarea.md

@@ -1,3 +1,8 @@
+---
+title: Textarea
+description: A native HTML textarea input.
+---
+
 <InputPageHero
 title="Textarea input"
 icon="IconInputTextArea"

inputs/time.md

@@ -1,3 +1,8 @@
+---
+title: Time
+description: A native HTML time input.
+---
+
 <InputPageHero
 title="Time input"
 icon="IconInputTime"

inputs/url.md

@@ -1,3 +1,8 @@
+---
+title: URL
+description: A native HTML url input.
+---
+
 <InputPageHero
 title="URL input"
 icon="IconInputUrl"

inputs/week.md

@@ -1,3 +1,8 @@
+---
+title: Week
+description: A native HTML week picker.
+---
+
 <InputPageHero
 title="Week input"
 icon="IconInputWeek"