Fryboyter

Insert notices in articles under Hugo

Recently I published an article, which referred to an older article, which is therefore basically no longer relevant. Because I don’t want to delete this article, I thought about adding a note to this article. In case someone accesses the article from 2019 directly.

I have solved this by creating a shortcode, which can be used independently of the articles. In the directory of the theme I used, I created the file notice.html in the subdirectory shortcodes and entered the following content.

<div class="shortcode-notice {{ .Get 0 }}">
    <div class="shortcode-notice-title {{ .Get 0 }}">
        {{- if len .Params | eq 2 -}}
        {{ .Get 1 }}
        {{ else }}
        {{ .Get 0 }}
        {{- end -}}
    </div>
    <div class="notice-content">{{ .Inner | markdownify }}</div>
</div>

Additionally I created the file notice.css in the subdirectory static/css in the theme directory and entered the following content.

.shortcode-notice .notice-content {
    padding: .6em 1em;
	display: block;
	font-size: 1em;
	margin-top: 0;
	margin-bottom: 0;
	color: #666;
    border-radius: 4px;
}

.shortcode-notice-title {
	color: #fff;
	padding-left: 1em;
	font-weight: 700;
	text-transform: capitalize;
    border-radius: 4px 4px 0 0;
}

.shortcode-notice-title.hinweis {
	background-color: rgba(92, 184, 92, .8)
}

 .shortcode-notice.hinweis .notice-content {
	background: #e6f9e6
}

 .shortcode-notice-title.tip {
	background-color: #6ab0de
}

.shortcode-notice.tip .notice-content {
	background: #e7f2fa
}

.shortcode-notice-title.info {
	background-color: #f0b37e
}

.shortcode-notice.info .notice-content {
	background: #fff2db
}

.shortcode-notice-title.warnung {
	background-color: rgba(217, 83, 79, .8)
}

.shortcode-notice.warnung .notice-content {
	background: #fae2e2
}

If you now want to add a corresponding note to an article, you can use the following shortcode.

{{% notice info %}}
This is an information
{{% /notice %}}

Instead of info, you can use hint, tip and warning in the first line, which results in the background of the display having a different color accordingly. In the case of warning, for example, red. If this is not enough or too much, you can of course extend or remove the entries in the CSS file.

In the case of the already addressed outdated 2019 article, this generates the following note.

OSBN | General

Update Hugo

Hugo is not installed on my webspace by default. Therefore I have to install new versions manually. To make this easier I built a small script.

#!/bin/bash
BIN_DIR=$HOME/bin
CUR_VERSION="$("$BIN_DIR"/hugo version 2>/dev/null | cut -d'v' -f2 | cut -c 1-6)"
NEW_VERSION=$(curl --silent "https://api.github.com/repos/gohugoio/hugo/tags" | jq -r '.[0].name' | tr -d v)

echo "Hugo:  Current Version: $CUR_VERSION => New Version: $NEW_VERSION"

if ! [ "$NEW_VERSION" = "$CUR_VERSION" ]; then

  curl -L --output hugo.tar.gz "https://github.com/gohugoio/hugo/releases/download/v${NEW_VERSION}/hugo_${NEW_VERSION}_Linux-64bit.tar.gz"
  tar -C "${BIN_DIR}" -xvzf hugo.tar.gz hugo
  rm hugo.tar.gz
else
    echo "Die current Version of Hugo ist allready installed"
fi

This checks whether the current version offered on Github is more current than the one available on the web space. If so, the current version of Github will be downloaded and installed on the webspace.

OSBN | General