LumeCMS-এ WebP রূপান্তর করা

নমস্কার, আমি একজন অদক্ষ ব্যক্তি।

আমি আগে ওয়ার্ডপ্রেস ব্যবহার করতাম, এবং WebP রূপান্তর একটি প্লাগইন ইনস্টল করে এবং অভ্যন্তরীণভাবে ImageMagick চালিয়ে সহজেই করা যেত, কিন্তু LumeCMS-এ এমন কোনো বৈশিষ্ট্য নেই।

হয়তো Lume প্লাগইন দিয়ে এটি সম্ভব, কিন্তু শেষ পর্যন্ত, চিত্র প্রক্রিয়াকরণের কার্যকারিতার কারণে, C-তে লেখা কিছু চালানো দ্রুত এবং আরও কার্যকর।

Nginx-এর স্ক্রিপ্ট দিয়ে এটি অসম্ভব নয়, তবে যেহেতু এটি একটি রিভার্স প্রক্সি, তাই অন্যান্য জিনিসও ইনস্টল করার প্রয়োজন ছিল, এবং রিভার্স প্রক্সি সার্ভারের সংস্থানগুলি 1vCPU Mem 1GB Disk 25GB এর মতো বেশ সীমিত ছিল, তাই আমি জোর করে এটি করার প্রয়োজন অনুভব করিনি।

এছাড়াও, মনে হচ্ছে কিছু লোক অভ্যন্তরীণভাবে Lua স্ক্রিপ্ট চালিয়ে এটি সম্ভব করেছে। Nginx+Lua+libwebp ব্যবহার করে সার্ভার চিত্রের স্বয়ংক্রিয় WebP রূপান্তর অর্জন

অসুবিধা হল যে এই স্ক্রিপ্টটি অনুরোধের সময় চলে, তাই মনে হয় এটি সংস্থানগুলিকে কেন্দ্রীভূত করার সম্ভাবনা রাখে।

npm-এর জন্য একটি র‍্যাপারcwebp-bin নামে বিদ্যমান বলে মনে হচ্ছে, তবে আসলে যা প্রয়োজন তা হল চিত্র রূপান্তর এবং নির্মিত স্ট্যাটিক সাইটের HTML ফাইলের চিত্র পথের পুনর্লিখন।

অতএব, ব্যাকএন্ড প্রক্রিয়া হিসাবে, আমি Lume-এর পরিবর্তনগুলি পর্যবেক্ষণ করে এবং স্বয়ংক্রিয়ভাবে বিল্ড করে এমন একটি init ডেমন স্ক্রিপ্টের মধ্যে একটি শেল স্ক্রিপ্ট চালাব যা WebP-তে রূপান্তর করে।

এছাড়াও, আমি libvips ব্যবহার করছি না। libvips-এর WebP রূপান্তর অভ্যন্তরীণভাবে শুধুমাত্র libwebp ব্যবহার করে, এবং এটি cwebp-এর মতোই যা apt ইত্যাদির মাধ্যমে সহজেই ইনস্টল করা যায়, তাই আমি cwebp দিয়ে রূপান্তর করব।

রূপান্তরের জন্য শেল স্ক্রিপ্ট

নিম্নলিখিত উপায়ে, ডুপ্লিকেট প্যাটার্ন বাদ দিয়ে চিত্র ফাইলগুলিকে WebP-তে রূপান্তর করুন।

#!/bin/bash

# 監視するディレクトリ
SOURCE_DIR="/var/www/html/soulmining/src/uploads"

# WebP出力先ディレクトリ
DEST_DIR="/var/www/html/soulmining/src/uploads"

# 変換対象の拡張子
EXTENSIONS=("png" "jpg" "jpeg")

# WebPの品質設定 (0-100)
QUALITY=80

# 必要なコマンドの確認
command -v cwebp >/dev/null 2>&1 || { echo >&2 "cwebpコマンドが見つかりません。インストールしてください。"; exit 1; }

# 出力先ディレクトリが存在しない場合は作成
mkdir -p "$DEST_DIR"

# ファイルを処理する関数
process_file() {
    local file="$1"
    local filename=$(basename "$file")
    local name="${filename%.*}"
    local dest_file="$DEST_DIR/${name}.webp"

    # 既に変換済みのファイルはスキップ
    if [ -f "$dest_file" ]; then
        echo "スキップ: $filename (既に変換済み)"
        return
    fi

    # WebPに変換
    cwebp -q $QUALITY "$file" -o "$dest_file"
    
    if [ $? -eq 0 ]; then
        echo "変換成功: $filename -> ${name}.webp"
    else
        echo "変換失敗: $filename"
    fi
}

# メイン処理
for ext in "${EXTENSIONS[@]}"; do
    find "$SOURCE_DIR" -type f -name "*.$ext" | while read file; do
        process_file "$file"
    done
done

echo "処理完了"

এটি init ডেমন-এর c/initme-watcher`](httpithub.cturame-watcher)-এ যোগ করুন।

#!/bin/bash
### BEGIN INIT INFO
# Provides:          lume-watcher
# Required-Start:    $remote_fs $syslog
# Required-Stop:     $remote_fs $syslog
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Watches directory and triggers Lume task
# Description:       Watches the specified directory and triggers the Deno Lume task when changes are detected.
### END INIT INFO

WATCHED_DIR="/var/www/html/soulmining/src/"
COMMAND="/home/haturatu/.deno/bin/deno task lume --dest=site"
CONV_WEBP="/opt/sh/webp.sh"
~~~
省略
~~~
# 監視開始を行う
monitor_directory() {
    inotifywait -m -r -e modify,create,delete "$WATCHED_DIR" | while read -r directory events filename; do

        echo "$(date): Change detected" >> "$LOG_FILE"
        last_run_time=$(get_last_run_time)
        now=$(current_time)

        if [ $((now - last_run_time)) -ge $COOLDOWN_TIME ]; then
            check_and_rotate_log

            echo "$(date): Executing command" >> "$LOG_FILE"
            
            sleep 0
            cd $OUTPUT_ROOT_DIR || exit
            $CONV_WEBP >> "$LOG_FILE" 2>&1
            $COMMAND >> "$LOG_FILE" 2>&1
            cd ~ || exit

            set_last_run_time
        else
            echo "$(date): Command not executed due to cooldown" >> "$LOG_FILE"
        fi
    done
}
~~~
以下略

কঠোরভাবে বলতে গেলে, এই init ডেমনটি লক্ষ্য ডিরেক্টরির সমস্ত পরিবর্তন সনাক্ত করে, তাই শুধুমাত্র একটি চিত্র আপলোড করলেই একটি পুনর্নির্মাণ শুরু হবে, তবে এটি অনিবার্য।
যদি আপনি এটি করতে চান, তাহলে inotifywait চালানোর সময় --exclude "dth" বিকল্পটি নির্দিষ্ট করুন।

_config.ts-এ যোগ করুন

এখনও কাজ বাকি আছে।
যদি এটি এভাবেই থাকে, Lume দিয়ে বিল্ড করার সময় HTML ফাইলের পথ মূল চিত্রের পথ নির্দেশ করবে।
সুতরাং, বিল্ড করার সময় এটি পুনর্লিখন করার ব্যবস্থা করা যাক।

import { walk } from "httpeno.lad/d.ts";  
~~~  
略  
~~~  
site.addEventListener("afterBuild", async () => {  
  const buildDir = site.dest()ビルド出力ディレクトリ  
  
  for await (const entry of walk(buildDir, { exts: [".html"] })) {  
    if (entry.isFile) {  
      let content = await Deno.readTextFile(entry.path);  
  
    URLを.webpに変換する正規表現  
      const regex rcload"'\s]+\.(png|jpe?g|gif;  
  
      content = content.replace(regex, (match) => {  
        return match.replac(png|jpe?g|gif '.webp');  
      });  
  
      await Deno.writeTextFile(entry.path, content);  
      console.log(`Processed: ${entry.path}`);  
    }  
  }  
});  

সত্যি বলতে, আমি ভেবেছিলাম যে lume-watcher-এর মধ্যে sed দিয়ে এটি পুনর্লিখন করা আরও সংক্ষিপ্ত, দ্রুত এবং সহজ হবে... এটি একটি গোপন কথা।

উল্লেখ্য, Lume-এর -w বিকল্পটি স্থিতিশীল নয়

আমার একটি ডেমন চলছে, তবে Lume অফিসিয়ালও এটি পর্যবেক্ষণ করে, তাই -w বিকল্প সহ deno task lume -w হিসাবে শুরু করলে একটি সাধারণ সার্ভার ব্যবহার না করে ফাইল পরিবর্তনের সাথে সাথে HTML তৈরি করা সম্ভব, তবে এটি স্থিতিশীল নয়।
আমার পরিবেশে এটি প্রায়শই ক্র্যাশ করত।

LumeCMS নিজেই, cms রিপোজিটরিতে বিদ্যমান `apteme.ts`-এর মধ্যে

Start the watcher  
  const watcher = site.getWatcher();  
  
deno-lint-ignore no-explicit-any  
  watcher.addEventListener("change", async (event: any) => {  
    const files = event.files!;  
    await site.update(files);  
    dispatch("previewUpdated");  
  });  
  
  watcher.start();  

দ্বারা কল করা হয়েছে বলে মনে হচ্ছে।

await site.update(files);  

এর মতো মনে হচ্ছে।
যেহেতু এটি শুধুমাত্র LumeCMS কোডের মধ্যে থেকে কল করা হয়েছে, তাই Lume নিজেও একই হওয়া উচিত বলে মনে হয়, কিন্তু কেন?

তাহলে। আবার দেখা হবে।