Naivete Precedes Misrepresentation

    contentstack-metalsmith

    0.0.3 • Public • Published

    About

    A metalsmith plugin to create a static website using Built.io Contentstack.

    Example

    In order to get started using contentstack-metalsmith, you can checkout our sample app at contentstack-metalsmith-example

    Installation

    To install contentstack-metalsmith, run the following command in a terminal:

      $ npm install contentstack-metalsmith

    Once you’re done with the installation, you will need to edit the index.js file under the root directory in order to use Built.io Contentstack with Metalsmith.

    Configuring Globals

    The Built.io Contentstack configuration added in the index.js file of the site will be available throughout the site and will be substituted in files where no other Built.io Contentstack specific configuration is provided.

    When using the Metalsmith CLI, you’ll need to add contentstack-metalsmith in your metalsmith.json file and provide the API Key and access token of your stack along with the stack environment. This can be done as follows:

      {
        "source": "src",
        "destination": "build",
        "plugins": {
          "contentstack-metalsmith": {
            "api_key": "<<Contentstack Api Key>>",
            "access_token": "<<Contentstack Access Token>>",
            "environment": "<<Stack Environment>>"
          }
        }
      }

    In case you are using Metalsmith’s JS API, you will need to add contentstack-metalsmith to the plugins section as follows:

      .use(require('contentstack-metalsmith') ({
          "api_key": "<<Contentstack Api Key>>",
          "access_token": "<<Contentstack Access Token>>",
          "environment": "<< Environment >>"
       }));

    Please refer the following to get more information on configuring your global configuration file. Global configuration

    Configuring Source Files

    Make the necessary configuration changes in your source files which are located under the src/ directory, in the manner: ./src/home.md. Your source file can be of type: .md, .html, etc.:

    ---
    title: contentstack-metalsmith sample demo
    contentstack:
      content_type: posts
      entry_layout: post.html
      partials: [header, footer]
    layout: index.html
    ---

    The above code snippet will use the configuration provided in your global configuration stack details, and query the stack for content_type: posts. Furthermore, each entry from posts will be rendered using the post.html layout under the layouts/ directory. You will also be able to access the header and footer content types via the header and footer keys in posts.html. Please refer the following to get more information on configuring your source configuration file. Source configuration

    Configuring layouts files

    Consider the following code snippet of the ./layouts/post.html file:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>{{title}}</title>
    </head>
    <body>
        <div class=”header”>{{header.title}}</div>
        <div class=”container”>
            <p>Post title: {{entry.title}}</p>
            <p>Post author: {{entry.author}}</p>
        </div>
    </body>
    </html>

    You can use the entry key to access single entry properties (refer above example). Whereas, in index.html pages, you can access data using the entries key, which will be a collection of all entries.

    Install

    npm i contentstack-metalsmith

    DownloadsWeekly Downloads

    0

    Version

    0.0.3

    License

    MIT

    Last publish

    Collaborators

    • mynk