beta This component version is ready to be used but is still in active development.

Article Meta Information block

Use this alongside articles, news items and blog posts.

github location npm version

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using include

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "block",
  "author__name": "First-Name Surname",
  "author__avatar": "https://avatars3.githubusercontent.com/u/925197?s=88&v=4",
  "meta__topics": [
    "cancer",
    "history"
  ],
  "meta__date": "14 February 2019",
  "meta__comment_count": 61,
  "meta__links_title": "On this page",
  "meta__links": [
    {
      "text": "heading link 1",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 2",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 3",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 4",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 5",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 6",
      "url": "JavaScript:Void(0);"
    }
  ],
  "meta__url": "JavaScript:Void(0);"
}
 %}
{% include "../path_to/vf-article-meta-information/vf-article-meta-information.njk" %}
                

Using render

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-article-meta-information', {
  "component-type": "block",
  "author__name": "First-Name Surname",
  "author__avatar": "https://avatars3.githubusercontent.com/u/925197?s=88&v=4",
  "meta__topics": [
    "cancer",
    "history"
  ],
  "meta__date": "14 February 2019",
  "meta__comment_count": 61,
  "meta__links_title": "On this page",
  "meta__links": [
    {
      "text": "heading link 1",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 2",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 3",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 4",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 5",
      "url": "JavaScript:Void(0);"
    },
    {
      "text": "heading link 6",
      "url": "JavaScript:Void(0);"
    }
  ],
  "meta__url": "JavaScript:Void(0);"
} %}
                
HTML
<aside class="vf-article-meta-information">
  <div class="vf-author | vf-article-meta-info__author">
    <p class="vf-author__name">
      <a class="vf-link" href="JavaScript:Void(0);">First-Name Surname</a>
    </p>
    <a class="vf-author--avatar__link | vf-link" href="JavaScript:Void(0);">
      <!-- wrapping the avatar in a link is optional -->
      <img class="vf-author--avatar" src="https://avatars3.githubusercontent.com/u/925197?s=88&v=4" alt="FirstName Surname" loading="lazy" />
    </a>
  </div>
  <div class="vf-meta__details">
    <p class="vf-meta__date">14 February 2019</p>

    <p class="vf-meta__topics">Topics:
      <a href="JavaScript:Void(0);" class="vf-link">cancer</a>
      <a href="JavaScript:Void(0);" class="vf-link">history</a>
  </div>
  <div class="vf-meta__comments">
    <p class"vf-meta__text">Comments — <a href="JavaScript:Void(0);" class="vf-link">61</a></p>
  </div>
  <div class="vf-links vf-links--tight vf-links__list--s">
    <p class="vf-links__heading">On this page</p>
    <ul class="vf-links__list vf-links__list--secondary | vf-list">
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 1</a>
      </li>
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 2</a>
      </li>
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 3</a>
      </li>
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 4</a>
      </li>
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 5</a>
      </li>
      <li class="vf-list__item">
        <a class="vf-list__link" href="JavaScript:Void(0);">heading link 6</a>
      </li>
    </ul>
  </div>
</aside>
              

Examples

Installation info

This repository is distributed with npm. After installing npm and yarn, you can install with this command.

$ yarn add --dev @visual-framework/vf-article-meta-information

Sass/CSS

The style files included are written in Sass. If you're using a VF-core project, you can import it like this:

@import "@visual-framework/vf-article-meta-information/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Changelog

Changelog

1.1.2

  • Minor update to example content.

1.1.1

  • changes any set- style functions to cleaner version

1.1.0

  • adds loading="lazy" to the img element for better performance

1.0.1

  • removes word-spacing: 100vw so names wrap

1.0.0-beta.3

  • Capitalisation of On this page

Assets



File system location: components/vf-article-meta-information

Find an issue on this page? Propose a change or discuss it.