Using Front Matter as a CMS in VS Code

I originally wanted to go through some of my old github repos today to start writing up on them. But I realized I would prefer to have a proper set up in an editor so that I can maintain a proper structure. So after a some searching, I found FrontMatter!

It’s very straightforward, you install the extension, you initialize the dashboard, following the instructions on the welcome page, and you’re good to go!

I got started with improving my previous posts’ front matter metadata, adding descriptions, proper tags and categories. Then I wanted to keep the tooltip I previously created, so I created a snippet.

First the html for the tooltip:

```html
<div class="tooltip tooltip-{{ include.position }}">
  {{ include.text }}
  <div class="tooltip-text">{{ include.tooltip }}</div>
</div>
```

Then the snippet to be added into frontmatter.json:

```json
"frontMatter.content.snippets": {
  "Tooltip": {
    "description": "Inserts a text with tooltip",
    "body": "{{<div>{{<div>{% include tooltip.html position=\"[[position]]\" tooltip=\"[[tooltip]]\" text=\"[[text]]\" %}</div>}}",
    "fields": [
      {
        "name": "position",
        "title": "position",
        "type": "choice",
        "choices": [
          "top",
          "bottom",
          "left",
          "right"
        ],
        "default": "top"
      },
      {
        "name": "tooltip",
        "title": "tooltip",
        "type": "string",
        "single": true,
        "default": ""
      },
      {
        "name": "text",
        "title": "text",
        "type": "string",
        "single": true,
        "default": ""
      }
    ]
  }
}
```

And to then use it, in any page, add the liquid tag.

```liquid
{% include tooltip.html position="top" tooltip="An example tooltip!" text="Mouse over here!" %}
```

The HTML is based off of W3’s CSS Tooltip, so it’s only a basic tooltip.

Some issues I faced trying to include it in this page, it can’t be a part of the markdown paragraphs, as the html won’t get recognized and will be rendered as part of the paragraph. And if your screen is narrower, the tooltip will also be out of the screen.

But hey FrontMatter is new to me and I am still excited to explore what else I can do with!