lpubsppop01's site

lpubsppop01's site

I updated the images in the ToLinkText page again today.

In the method I tried until yesterday, the image generation was called by getStaticProps() in index.ts. But some image generation failed in deployment process of Cloudflare Pages. I could not avoid it, so I rewrote it as a shell script and executed it before build.

Currently the shell script looks like the following.

scripts/generate_images_to_link_text.bash

#! /usr/bin/env bash

# Paths
PROJECT_DIR="$(dirname $(dirname $0))/"
INDICATOR_SRC_DIR="${PROJECT_DIR}images/indicators/"
SCREENSHOTS_DIR="${PROJECT_DIR}images/to-link-text-screenshots/"
OVERLAYS_DIR="${PROJECT_DIR}images/to-link-text-overlays/"
DEST_DIR="${PROJECT_DIR}public/own/docs-to-link-text/"

# Image generation function
generate() {
  # Arguments
  SRC_NAMES=${@:1:$#-1}
  DEST_NAME=${@:$#}

  # Generate images for light-mode and dark-mode
  for COLOR in light dark; do
    # Working variables
    SRC_PATHS=()
    TEMP_PATHS=()
    ARROW_COLOR='seagreen'
    if [ $COLOR = 'dark' ]; then
      ARROW_COLOR='orange'
    fi

    # Left margin
    TEMP_PATH=`mktemp`
    TEMP_PATHS+=($TEMP_PATH)
    convert -size 35x888 xc:transparent PNG32:$TEMP_PATH

    # Convert source images
    for SRC_NAME in $SRC_NAMES; do
      if [ $SRC_NAME = '->' ]; then
        SRC_PATH="${INDICATOR_SRC_DIR}transition-right-arrow.png"
        TEMP_PATH=`mktemp`
        TEMP_PATHS+=($TEMP_PATH)
        convert -alpha deactivate +level-colors $ARROW_COLOR, -alpha activate \
          -background transparent -resize 100x100 -gravity center -extent 100x888 \
          $SRC_PATH $TEMP_PATH
      elif [ $SRC_NAME = '_' ]; then
        TEMP_PATH=`mktemp`
        TEMP_PATHS+=($TEMP_PATH)
        convert -size 100x888 xc:transparent PNG32:$TEMP_PATH
      elif [[ $SRC_NAME = ^* ]]; then
        FILENAME="overlay-${SRC_NAME:1}.png"
        SRC_PATH="$OVERLAYS_DIR$FILENAME"
        TEMP_PATH1=`mktemp`
        convert -alpha deactivate +level-colors $ARROW_COLOR, -alpha activate \
          -gravity center -resize 398x886 $SRC_PATH $TEMP_PATH1
        TEMP_PATH2=`mktemp`
        TEMP_PATH_LAST=${TEMP_PATHS[${#TEMP_PATHS[@]}-1]}
        composite -compose over $TEMP_PATH1 $TEMP_PATH_LAST $TEMP_PATH2
        rm $TEMP_PATH1
        mv $TEMP_PATH2 $TEMP_PATH_LAST
      else
        SRC_PATH="$SCREENSHOTS_DIR$SRC_NAME-$COLOR.png"
        TEMP_PATH=`mktemp`
        TEMP_PATHS+=($TEMP_PATH)
        convert -resize 398x886 -bordercolor '#888888' -border 1x1 $SRC_PATH $TEMP_PATH
      fi
      SRC_PATHS+=($SRC_PATH)
    done

    # Right margin
    TEMP_PATH=`mktemp`
    TEMP_PATHS+=($TEMP_PATH)
    convert -size 35x888 xc:transparent PNG32:$TEMP_PATH

    # Generate a result image
    DEST_PATH="$DEST_DIR$DEST_NAME-$COLOR.png"
    CONVERT_APPEND="convert +append"
    for TEMP_PATH in ${TEMP_PATHS[@]}; do
      CONVERT_APPEND+=" $TEMP_PATH"
    done
    CONVERT_APPEND+=" $DEST_PATH"
    mkdir -p $DEST_DIR
    $CONVERT_APPEND

    echo "Generated: $DEST_PATH"
  done
}

# Pass each source and destination names to generation function
generate 'link-list-empty' '1-01'
generate 'firefox-select-tabs' '^firefox-share' '->' 'launch-with-share' '1-02'
# ...
generate 'title-conversion-rule' '^fab' '->' 'add-text-convert-escape' '3-07'
generate 'add-text-convert-escape' '_' 'add-text-convert-replace' '_' 'add-text-convert-regex-replace' '3-08'

References about ImageMagick:

• Imagemagickで画像を合成する1 (画像を重ね合わせる) | Imagemagickの使い方日本語マニュアル
• 画像にボーダー（枠）をつける | | Imagemagickの使い方日本語マニュアル
• ImageMagickで画像の余白を広げる - Jaybanuan's Blog
• imagemagick - Replace Colors in Image with Transparency - Stack Overflow
• Color Modifications -- IM v6 Examples
• Create blank image in Imagemagick - Stack Overflow

The shell script is executed by prebuild in package.json.

scripts/prebuild.bash

#! /usr/bin/env bash

SCRIPTS_DIR="$(dirname $0)/"
${SCRIPTS_DIR}generate_images_to_link_text.bash

package.json

{
  ...
  "scripts": {
    "dev": "next dev",
    "prebuild": "./scripts/prebuild.bash",
    "build": "next build",
    ...

prebuild in package.json is not work in deployment process of Cloudflare Pages, so I changed deployment command as the following.

scripts/prebuild.bash && next build && next export && next-sitemap

Although unrelated to the work itself, I updated the code on this site that decreases the heading levels of loaded Markdown content, to work with code that includes comments with "#" as it does today.

Auto Time Stamp

I replaced the download link URL in README.md from AppVeyor artifacts to GitHub Releases. The download link is around since AppVeyor artifacts were permanent, but it were often out of date these days. GitHub Releases doesn't deleted over time.

First I tried deploying from AppVeyor to GitHub Releases, but that didn't work. So I added the release manually.