Add Preview Mode

[pitscher]

Sorry for pestering you @hugo-sid.
I am currently off my employers radar and wanted to use my vacation wisely (by supporting this theme). 😅
I got another cool idea/feature that others might like too - would appreciate your feedback (here too: #225) and a ping if you would like to see a PR.

A Preview Mode.
Use case: As an author one usually invests quite some time to write e.g. a new post. (from now on I only use "post", but this can be exchanged with any other word for a hugo content page.)
If I now want to tease my site visitors (to make them aware that a new post is about to be released) and show them only a part of what I got so far, I can use the preview mode.

This uses Hugo's .Summary feature (which works together with the special tag <!--more-->).
An author can decide how much of a post should be included in the preview (so that page visitors can see it).
Additionally, the author can configure an optional preview notice, e.g. to state what is about to come, the potential publish date, etc. .

A detailed explanation

Control this new feature site-wide with a simple config

The following block will be added to the sites Params: in hugo.yaml:

previewMode:
  enabled: true # <-- enable/disable the entire feature site-wide
  previewBadgeText: "PREVIEW" # <-- control the preview badge text, shorter = better
  previewNotice: # <-- Set the content of the preview notice site-wide (e.g. as a fallback if nothing is specified in a posts front matter)
    enabled: true # <-- Decide if the notice (see below for pictures) should be shown for every post marked as "PREVIEW". If disabled, only the "PREVIEW" badge will appear.
    noticeHeadlineText: "In Preview"
    noticeDescriptionText: "This piece of content is not yet ready to be published. However, the author decided to enable the preview mode to ensure you are aware of this new publication and check back at a later point in time."
    noticePlannedPublish: "Release is scheduled for next week."

The following block will be added to the front matter of a content page (e.g. /content/en/posts/markdown-syntax/index.md):

isPreviewEnabled: true # <-- Decide if this post is a preview or not. If yes, draft needs to be set to false.
previewNotice: # <-- Optionally specify the content of the preview notice. If omitted, the site default in hugo.yaml will be used, except if the preview notice was disabled site-wide
  headline: "Front Matter Specified Headline"
  description: "This is a description specified in the front matter of this post."
  plannedPublish: "Front Matter specified publish date"

Example preview-enabled post // Front Matter view

--> Notice that the location of <!--more--> decides how much of the post visitors will be able to see.

Example preview-enabled post // List view showing the badge

Preview-enabled post itself // Preview notice disabled

(The reading time is shown because I already implemented this feature. Here is the feature request, a PR can be created on a short notice: #225)

Preview-enabled post itself // Preview notice enabled

Disable the preview of a post (to actually publish it)

To finally publish a post that was previously only available as a preview, the author can simply update the isPreviewEnabled: true var in the front matter of the according post to isPreviewEnabled: false.

[pitscher]

I just realized that it might make sense to relocate the preview badge.
In the list of posts as well as in the meta information section of a post the preview badge should replace the publish date.
So, instead of showing a (preview mode enabled) posts publish date (would not make sense IMHO), the badge should be shown.
Later, if an author published a post (by disabling the preview mode for this post), the publish date of this post will be shown (instead of the badge).

Please let me know if you would agree - will implement it accordingly.

[pitscher]

@hugo-sid friendly reminder for this feature request + #225
Would love to know what you think.