HomeLoveStartLearnBuildConverseResourcesBlog
    HomeGuidingKernel WritingFrontmatter

    Table of contents

    • Frontmatter
    Frontmatter

    Frontmatter is the stuff you put at the very top of your markdown files to control everything from the title, page description, images, and SEO. On this site, we also use it to control what appears in the global header navigation, as well as how the sidebar gets rendered in each section. It's therefore quite important to know how to structure your frontmatter so that your file appears in the place you want it to.

    Title
    title-example.mdx
    title[String] - Display title used for Header,Sidenav, and SEO.  
    title: Frontmatter
    

    The Title Rule

    This specifies that we read and display the title in the frontmatter first, then the first h1 (#) in the file, then we fall back to the name of the file.

    The "title" attribute is used for the title meta attribute for SEO. The title rule still applies - it is global.

    Order

    This is a frontmatter attribute unique to this site which we use to define the order in which different pages appear in the sidebar navigation.

    order-example.mdx
    order[Integer] - The order in which this file is displayed on the sidenav.
    order: 0
    

    Ordering

    Order in the sidenav is based on lowest number (TOP) to highest (BOTTOM). Files that don't have an order are applied AFTER files that have order in alphabetical order. If this file isn't rendered on the sidenav (i.e. Top section files) this won't matter.

    The "order" is relative to the current directory, so you can't take a page deeper in the directory and put it on the top level of the sidebar. For example,

    /learn/module-1/value.mdx
    with an order of 0 will just appear at the top of the
    module-1
    dropdown in the sidenav and not at the top of the
    learn
    sidenav.

    Language Selector

    This is a frontmatter attribute unique to this site which defines whether users will be able to see the different languages available for the particular page they are currently on.

    language-example.mdx
    hideLanguageSelector[Boolean] - Language selectors render by default, setting this to true for your page allows you to hide it.
    hideLanguageSelector: false
    
    Header Navigation

    The header options are an easy way of adding internal files to the global header. Files specified in header.mdx gets applied after these. Files are organised in the header based on lowest number (LEFT) to highest (RIGHT). "Home" is always first, then files with headerOrder, then links in header.mdx.

    header-example.mdx
    header[String] - Whether this File should be rendered in the Header Navigation.
    header: true
    
    headerOrder[Integer] - The order in which this file will be displayed on the header.
    headerOrder: 0
    
    SEO

    So you want your page to rank well, and have a nice image and description when you share it on social media to show your friends the awesome work you've done? We've got you covered.

    image-example.mdx
    featuredImage[String] - Image to use when a link is shared (i.e. Twitter/Facebook)
    featuredImage: "content/images/test.png"
    

    The "image" attribute must be a path to the images in

    content/images/

    keywords-example.mdx
    keywords[String] - Comma separated keywords used for SEO
    keywords: "cool, sweet, awesome"
    
    description-example.mdx
    description[String] - Description of this page for SEO.
    description: "The most complete guide to writing frontmatter in mdx files that you've ever read."
    

    The "description" attribute can also be used for the excerpt that gets rendered and indexed for searching articles on the site.

    Previous
    How To Use Kernel
    Next
    Translate Kernel