FFF

Appearance

FFF Flavored Frontmatter
Version 0.2 ​

Published: 2022-07-21

Overview ​

Base ​

Base variables: It has been implemented for some time and is more commonly used.

title ​

  • type: string
  • jsonfeed: title
  • microformats: p-name
  • description: the title of article, non-article posts may omit titles.
yaml
title: 'Hello World'

summary ​

  • type: string
  • jsonfeed: summary
  • microformats: p-summary[1]
  • description: plain text sentence or two describing the post.
yaml
summary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'

created ​

  • type: string
  • optional type: number | Date
  • description: The created[2] date of the post.
yaml
created: 2022-07-18

updated ​

  • type: string
  • optional type: number | Date
  • jsonfeed: date_modified
  • microformats: dt-updated
  • description: The updated[3] date of the post.
yaml
updated: 2022-07-18

published ​

  • type: string
  • optional type: number | Date
  • jsonfeed: date_published
  • microformats: dt-published
  • description: The published[4] date of the post.
yaml
updated: 2022-07-18

image ​

  • type: string
  • optional type: FFFImage | (string | FFFImage)[]
  • jsonfeed: image (string only)
  • microformats: u-photo or u-featured[5]
  • description: the featured image for article, or image for "photo"[6] / "multi-photo"[7] posts.
yaml
image: '/images/foo.avif'
# or
image:
- '/images/foo.avif'
- '/images/bar.avif'

audio ​

  • type: string
  • optional type: FFFAudio
  • microformats: u-audio[8]
  • description: the main audio for "audio" post.
yaml
audio: '/podcast.flac'

video ​

  • type: string
  • optional type: FFFVideo
  • microformats: u-video[9] or u-featured[5:1]
  • description: the main video for "video" post.
yaml
video: '/video.av1'

tags ​

  • type: string[]
  • jsonfeed: tags
  • microformats: u-category
  • description: tags array, any plain text values you want.
yaml
tags:
  - foo
  - bar

flags ​

  • type: string[]
  • description: flags array, any plain text values you want.
yaml
flags:
  - unlisted # https://indieweb.org/unlisted
  - draft

Extra ​

This means that its naming is tentative and only used as a suggestion if needed.

authors ​

  • type: FFFAuthor[]
  • jsonfeed: authors
  • description: specifies one or more post authors.

lang ​

  • type: string
  • jsonfeed: language
  • description: the primary language for the post.

location ​

  • type: string
  • microformats: p-location
  • description: location the post was posted from.

bookmark_of ​

  • type: string
  • microformats: u-bookmark-of
  • description: indicates this post is a bookmark[10] of another URL.
yaml
bookmark_of: 'https://example.com/permalink47'

like_of ​

  • type: string
  • microformats: u-like-of
  • description: the URL which the post is considered a "like"[11] (favorite, star) of.
yaml
like_of: 'https://example.com/permalink47'

repost_of ​

  • type: string
  • microformats: u-repost-of
  • description: the URL which the post is considered a "repost"[12] of.
yaml
repost_of: 'https://example.com/permalink47'

in_reply_to ​

  • type: string
  • optional type: string[]
  • microformats: u-in-reply-to[13]
  • description: URL(s) which the post is considered reply to. (reply[14] or multiple-reply[15])
yaml
in_reply_to: 'https://example.com/post123'
# or
in_reply_to:
- 'https://example.com/post123'
- 'https://example.com/post456'

syndication ​

  • type: string | string[]
  • microformats: u-syndication[16]
  • description: URL(s) of syndicated copies of this post.
yaml
syndication: 'https://twitter.com/example/status/1542566710594658312'
# or
syndication:
- 'https://twitter.com/example/status/1542566710594658312'
- 'https://mastodon.social/@example/108964809799826911'

Types ​

Additional ​

ts
/** Object Image */
export type FFFImage = Partial<HTMLImageElement> & {
  source?: Partial<HTMLSourceElement>[]
  figcaption?: string
}

/** Object Audio */
export type FFFAudio = Partial<HTMLAudioElement> & {
  source?: Partial<HTMLSourceElement>[]
}

/** Object Video */
export type FFFVideo = Partial<HTMLVideoElement> & {
  source?: Partial<HTMLSourceElement>[]
}

/** Author */
export type FFFAuthor = {
  /** the author's name. */
  name?: string
  /** the URL of a site owned by the author. */
  url?: string
  /** the URL for an image for the author. */
  avatar?: string
}

Package ​

You can install it via pnpm, yarn or npm.

bash
pnpm add -D fff-flavored-frontmatter@~0.2.0 # Version 0.2.x

or do not enter a version to use the latest version.

bash
pnpm add -D fff-flavored-frontmatter # Latest

For example, use in a TypeScript project:

ts
import type { FFFFlavoredFrontmatter } from 'fff-flavored-frontmatter'
// import type { FFFBase, FFFExtra } from 'fff-flavored-frontmatter' // if you need them
// import type { FFFImage, FFFAudio, FFFVideo, FFFAuthor } from 'fff-flavored-frontmatter' // if you need them

References ​

  1. summary - IndieWeb ↩︎

  2. created - IndieWeb ↩︎

  3. updated - IndieWeb ↩︎

  4. published - IndieWeb ↩︎

  5. featured - IndieWeb ↩︎ ↩︎

  6. photo - IndieWeb ↩︎

  7. multi-photo - IndieWeb ↩︎

  8. audio - IndieWeb ↩︎

  9. video - IndieWeb ↩︎

  10. bookmark - IndieWeb ↩︎

  11. like - IndieWeb ↩︎

  12. repost - IndieWeb ↩︎

  13. in-reply-to - IndieWeb ↩︎

  14. reply - IndieWeb ↩︎

  15. multiple-reply - IndieWeb ↩︎

  16. u-syndication - IndieWeb ↩︎