🧑‍💻 Install and set up Front Matter CMS for VS Code

Front Matter CMS is a content management system that runs within Visual Studio Code. It allows you to create and manage your content for our Jekyll site. You can use front matter to set variables for your pages and posts, and preview them in real-time.

To use Front Matter CMS for the Jekyll site project, we need to install the extension from the VS Code marketplace or use the command ext install eliostruyf.vscode-front-matter. Then, we need to configure the extension settings to match your Jekyll site structure and preferences.

Front Matter CMS provides a default content mapping for Jekyll, but we can customize it to fit your needs. We can also define our own content types and fields. For example, to create a content type for blog posts, we can add and define its front matter structure with the frontMatter.taxonomy.contentTypes setting in the settings.json file.

This will create a sidebar panel for blog posts, where we can edit the front matter fields and insert media files. We can also preview your posts within VS Code.

Description

This issue is about improving the Front Matter CMS setting for our AMP-powered Jekyll site. The goal is to make the setting more user-friendly, consistent, and compatible with the AMP Affiliately Jekyll Theme.

Tasks

[x] Review the documentation for the theme and the CMS
[x] Update the .frontmatter.json file to match the front matter fields for each content type:
- [x] default: same as post type
- [x] __default__: common to all layouts
- [x] page: common plus page layout fields
- [x] post: common plus post layout fields
[x] Create content and media snippets for easy content and management. The snippets includes:
- [x] image: use picture.html template
- [x] gist: use <amp-gist> component
- [x] youtube: use youtube.html template
- [x] toc: use toc.md template
- [x] link: use Jekyll link tag
- [x] post_url: use Jekyll post_url tag
- [x] excerpt separator: use  tag
- [x] footnote: use kramdown footnote syntax
- [x] abbreviation: use kramdown abbreviation syntax
- [x] math block: use kramdown math block syntax
- [x] end-of-block: use kramdown End-Of-Block (EOB) marker
- [x] inline attribute: use kramdown inline attribute list syntax
- [x] comment: use kramdown comment syntax
- [x] nomarkdown: use kramdown nomarkdown syntax
- [x] options: use kramdown options syntax
- [x] cite: use Jekyll Scholar cite tag
- [x] bibliography: use Jekyll Scholar bibliography tag
- [x] callout: use callout.html template
- [x] capture: use Jekyll capture tag
- [x] audio: use <amp-audio> component
- [x] highlight: use Jekyll highlight tag
- [x] raw: use Jekyll raw tag
[x] Define custom actions and placeholders for consistent content creation and formatting
- [x] permalink: use dynamic placeholder script to generate relative URL
- [x] previewPath: use dynamic placeholder script to generate the relative path before post slug
- [x] override-slug: use custom content script to align the slug with the permalink defined in the front matter
[ ] Manage data files to integrate and manage structured data with the CMS
- [x] suggestion: create auto-completion list for Google CSE
[ ] Test the JSON data with the CMS for VS Code
[ ] Update the documentation with the new JSON data and any changes
[ ] Submit a pull request with the updated setting and documentation
[ ] Add #frontmatter tag to GitHub project

`frontMatter.taxonomy.contentTypes`

Based on the documentation from AMP Affiliately Jekyll Theme, we can define these content types for your website: posts, pages, products, etc.

Each content type has a name, a preview path, a page bundle option, and a list of fields that correspond to the front matter metadata of your content files. You can customize the fields according to your needs, and use different types of fields such as string, number, image, datetime, draft, tags, categories, etc. Here is an example of the JSON data for setting the frontMatter.taxonomy.contentTypes:

"frontMatter.taxonomy.contentTypes": [
  {
    "name": "post",
    "previewPath": "/blog",
    "pageBundle": false,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string"
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Publishing date",
        "name": "date",
        "type": "datetime",
        "default": "{{now}}",
        "isPublishDate": true
      },
      {
        "title": "Article preview",
        "name": "preview",
        "type": "image"
      },
      {
        "title": "Tags",
        "name": "tags",
        "type": "tags"
      },
      {
        "title": "Categories",
        "name": "categories",
        "type": "categories"
      }
    ]
  },
  {
    "name": "page",
    "previewPath": null,
    "pageBundle": false,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string"
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Layout",
        "name": "layout",
        "type": "string",
        "default": "page"
      }
    ]
  },
  {
    "name": "product",
    "previewPath": "/shop",
    "pageBundle": true,
    "fields": [
      {
        "title": "Title",
        "name": "title",
        "type": "string"
      },
      {
        "title": "Description",
        "name": "description",
        "type": "string"
      },
      {
        "title": "Price",
        "name": "price",
        "type": "number"
      },
      {
        "title": "Image",
        "name": "image",
        "type": "image"
      },
      {
        "title": "Affiliate link",
        "name": "link",
        "type": "string"
      }
    ]
  }
]

[!IMPORTANT] Jekyll does not need the draft field, as Front Matter supports the _drafts, _posts folders and collections from Jekyll. If you use Jekyll, make sure to set the frontMatter.framework.id setting to jekyll.

`frontMatter.projects`

The project setting in Front Matter CMS allows us to manage multiple sites or environments within the same workspace. We can define different settings for each project, such as the content folders, the public folder, the media paths, etc. We can also switch between projects using the command palette, the panel action, or the dashboard dropdown.

To use the project setting, we need to add the frontMatter.projects property to your settings.json or frontmatter.json file. We can specify an array of project objects, each with a name, a default flag, and a configuration object. The configuration object can contain any of the Front Matter CMS settings that we want to override for that project. For example, to create two projects for a blog and a portfolio site, we can use the following setting:

"frontMatter.projects": [
  {
    "name": "blog",
    "default": true,
    "configuration": {
      "frontMatter.content.pageFolders": [
        {
          "title": "Blog posts",
          "path": "[[workspace]]/websites/blog/posts"
        }
      ],
      "frontMatter.content.publicFolder": "[[workspace]]/websites/blog/public"
    }
  },
  {
    "name": "portfolio",
    "configuration": {
      "frontMatter.content.pageFolders": [
        {
          "title": "Portfolio",
          "path": "[[workspace]]/websites/portfolio/content"
        }
      ],
      "frontMatter.content.publicFolder": "[[workspace]]/websites/portfolio/public"
    }
  }
]

This will create two projects with different content and public folders. We can only have one project as the default project, which will be loaded when we open the Front Matter CMS dashboard. The last used project will also be remembered when we switch between them

chriskyfung / chriskyfung.github.io