Merge pull request #776 from dpobel/improved-compare

ci: improve compare script to be easier to read and maintain
dpobel · Jan 6, 2024 · ce4e52f · ce4e52f
2 parents fa77615 + 506f8c6
commit ce4e52f
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 52 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -29,8 +29,8 @@ jobs:
       - name: Linting
         run: npm run lint
 
-      - name: Installing graphicsmagick
-        run: sudo apt -y install graphicsmagick
+      - name: Installing graphicsmagick, xmllint and pdftohtml
+        run: sudo apt -y install graphicsmagick libxml2-utils poppler-utils
 
       - name: Test
         run: npm test

diff --git a/bin/compare.sh b/bin/compare.sh
@@ -3,48 +3,112 @@
 mkdir production/
 cd production
 
-echo "### Homepage"
-echo ""
-wget https://damien.pobel.fr/ -O index.html > /dev/null 2>&1
-echo '```diff'
-diff -us index.html ../web/index.html
-echo '```'
-
-echo "### style.css"
-echo ""
-CSS_FILE=`cat index.html|sed -e 's@.*<link rel=stylesheet href=/\(.*\)><title>.*@\1@g'`
-wget https://damien.pobel.fr/$CSS_FILE > /dev/null 2>&1
-du -sb $CSS_FILE ../web/style*.css
-echo '```diff'
-diff -us $CSS_FILE ../web/style*.css
-echo '```'
-
-echo "### CV"
-echo ""
-wget https://damien.pobel.fr/page/cv-fr/ -O cv.html > /dev/null 2>&1
-echo '```diff'
-diff -us cv.html ../web/page/cv-fr/index.html
-echo '```'
-
-echo "### Tag page"
-echo ""
-wget https://damien.pobel.fr/tag/veille/ -O tag-veille.html > /dev/null 2>&1
-echo '```diff'
-diff -us tag-veille.html ../web/tag/veille/index.html
-echo '```'
-
-echo "### Post"
-echo ""
-wget https://damien.pobel.fr/post/custom-hooks-react/ -O custom-hooks-react.html > /dev/null 2>&1
-echo '```diff'
-diff -us custom-hooks-react.html ../web/post/custom-hooks-react/index.html
-echo '```'
-
-echo "### CV"
-echo ""
-wget https://damien.pobel.fr/page/cv-fr/cv-fr-damien-pobel.pdf -O cv-fr.pdf > /dev/null 2>&1
-du -sb cv-fr.pdf ../web/page/cv-fr/cv*pdf
-wget https://damien.pobel.fr/page/cv/cv-damien-pobel.pdf -O cv-en.pdf > /dev/null 2>&1
-du -sb cv-en.pdf ../web/page/cv/cv*pdf
+PR_URL="$1"
+ONLINE_URL="https://damien.pobel.fr"
+
+echo "URL: $1"
+echo "### Stats"
+
+DIFF_SUMMARY=""
+
+format_html () {
+  cat "$1"|sed "s/>/>\n/g"
+}
+
+format_xml () {
+  xmllint --format "$1"
+}
+
+format_css () {
+  cat "$1"|npx prettier --stdin-filepath style.css
+}
+
+format_pdf () {
+  pdftohtml -s -stdout "$1" | grep -v '<title>' | grep -v '<meta name="date" '
+}
+
+check_css () {
+  ONLINE_CSS_FILE=`wget --quiet $ONLINE_URL/ -O - | sed -e 's@.*<link rel=stylesheet href=/\(.*\)><title>.*@\1@g'`
+  LOCAL_CSS_FILE=`cat ../web/index.html | sed -e 's@.*<link rel=stylesheet href=/\(.*\)><title>.*@\1@g'`
+  wget --quiet "$ONLINE_URL/$ONLINE_CSS_FILE"
+  SIZE_ONLINE=`stat -c "%s" "$ONLINE_CSS_FILE"`
+  SIZE_LOCAL=`stat -c "%s" "../web/$LOCAL_CSS_FILE"`
+  IDENTICAL="✅️"
+  CSS_DIFF_SUMMARY=""
+  if [ "$ONLINE_CSS_FILE" != "$LOCAL_CSS_FILE" ] ; then
+    IDENTICAL="❌️"
+    CSS_DIFF_SUMMARY="\`$ONLINE_CSS_FILE\` ⮕ \`$LOCAL_CSS_FILE\`"
+  fi
+  format_css "$ONLINE_CSS_FILE" > "$ONLINE_CSS_FILE.pretty"
+  format_css "$LOCAL_CSS_FILE" > "$LOCAL_CSS_FILE.pretty"
+  DIFF=`diff -u "$ONLINE_CSS_FILE.pretty" "$LOCAL_CSS_FILE.pretty"`
+  if [ ! -z "$DIFF" ] ; then
+    IDENTICAL="❌️"
+    CSS_DIFF_SUMMARY="$CSS_DIFF_SUMMARY\n\n\`\`\`diff\n$DIFF\n\`\`\`\n"
+  fi
+  if [ ! -z "$CSS_DIFF_SUMMARY" ] ; then
+    DIFF_SUMMARY="$DIFF_SUMMARY\n\n#### CSS\n\n$CSS_DIFF_SUMMARY"
+  fi
+  echo "CSS | [Open]($ONLINE_URL$ONLINE_CSS_FILE) | [Open]($PR_URL$LOCAL_CSS_FILE) | $SIZE_ONLINE | $SIZE_LOCAL | $IDENTICAL"
+}
+
+check_file () {
+  NAME=$1
+  WEB_PATH=$2
+  BUILD_LOCAL=$3
+  DIFF_OPERATION=$4
+  TEMPORARY=`basename $BUILD_LOCAL`
+  FORMATER=$5
+
+  wget --quiet "$ONLINE_URL/$WEB_PATH" -O "$TEMPORARY"
+  SIZE_ONLINE=`stat -c "%s" "$TEMPORARY"`
+  SIZE_LOCAL=`stat -c "%s" "$BUILD_LOCAL"`
+  IDENTICAL="✅️"
+  if [ "$DIFF_OPERATION" = "diff" ] ; then
+    $FORMATER "$TEMPORARY" > "$TEMPORARY.pretty"
+    $FORMATER "$BUILD_LOCAL" > "$BUILD_LOCAL.pretty"
+    DIFF=`diff -u "$TEMPORARY.pretty" "$BUILD_LOCAL.pretty"`
+    if [ ! -z "$DIFF" ] ; then
+      IDENTICAL="❌️"
+      DIFF_SUMMARY="$DIFF_SUMMARY\n\n#### $NAME\n\n\`\`\`diff\n$DIFF\n\`\`\`\n"
+    fi
+    rm "$TEMPORARY.pretty" "$BUILD_LOCAL.pretty"
+  else
+    cmp --silent -- "$BUILD_LOCAL" "$TEMPORARY"
+    if [ $? -ne 0 ] ; then
+      IDENTICAL="❌️"
+    fi
+  fi
+  echo "$NAME | [Open]($ONLINE_URL$WEB_PATH) | [Open]($PR_URL$WEB_PATH) | $SIZE_ONLINE | $SIZE_LOCAL | $IDENTICAL"
+  rm "$TEMPORARY"
+}
+
+
+echo " Page | Online | PR version | Size online | Size local | Identical?"
+echo " ---- | :---: | :---: | ----------- | ---------- | :---:"
+
+check_file "Homepage" "/" "../web/index.html" "diff" "format_html"
+check_css
+check_file "Blog" "/posts/" "../web/posts/index.html" "diff" "format_html"
+check_file "RSS" "/rss.xml" "../web/rss.xml" "diff" "format_xml"
+check_file "RSS tag" "/rss/métier.xml" "../web/rss/métier.xml" "diff" "format_xml"
+check_file "RSS tag fr" "/rss/linux/fr.xml" "../web/rss/linux/fr.xml" "diff" "format_xml"
+check_file "Post" "/post/custom-hooks-react/" "../web/post/custom-hooks-react/index.html" "diff" "format_html"
+check_file "CV fr" "/page/cv-fr/" "../web/page/cv-fr/index.html" "diff" "format_html"
+check_file "CV fr pdf" "/page/cv-fr/cv-fr-damien-pobel.pdf" "../web/page/cv-fr/cv-fr-damien-pobel.pdf" "diff" "format_pdf"
+check_file "CV" "/page/cv/" "../web/page/cv/index.html" "diff" "format_html"
+check_file "CV en pdf" "/page/cv/cv-damien-pobel.pdf" "../web/page/cv/cv-damien-pobel.pdf" "diff" "format_pdf"
+check_file "Tag page (veille)" "/tag/veille/" "../web/tag/veille/index.html" "diff" "format_html"
+check_file "Tags" "/tags/" "../web/tags/index.html" "diff" "format_html"
+check_file "Page list" "/pages/" "../web/pages/index.html" "diff" "format_html"
+check_file "About" "/page/about/" "../web/page/about/index.html" "diff" "format_html"
+check_file "Resized Photo (660x)" "/images/660x/syrphe-phacelie.jpg" "../web/images/660x/syrphe-phacelie.jpg"
+check_file "Resized Photo (200x)" "/images/200x/syrphe-au-coeur-coquelicot.jpg" "../web/images/200x/syrphe-au-coeur-coquelicot.jpg"
+
+if [ ! -z "$DIFF_SUMMARY" ] ; then
+  echo "---"
+  echo "### Diffs"
+  echo "$DIFF_SUMMARY"
+fi
 
 cd ..
diff --git a/bin/deploy.sh b/bin/deploy.sh
@@ -17,8 +17,7 @@ else
     PR_ID=`echo $GITHUB_REF_NAME|cut -d '/' -f 1`
     echo "## Pushing to ${PR_ID}.damien.pobel.fr"
     rsync -avcz --delete -e "$SSH_CMD" web/ [email protected]:testing/${PR_ID}.damien.pobel.fr
-    COMPARE=`./bin/compare.sh`
-    COMMENT=`echo "Test it at https://${PR_ID}.damien.pobel.fr/\n\n---\n\n$COMPARE"`
-    PAYLOAD=`jq -n --arg BODY "$COMMENT" '{body: $BODY}'`
-    curl -H "Authorization: token $PERSONAL_TOKEN" -X POST -d "$PAYLOAD" https://api.github.com/repos/${GITHUB_REPOSITORY}/issues/${PR_ID}/comments
+    ./bin/compare.sh "https://${PR_ID}.damien.pobel.fr" > comparison.txt
+    jq -n --rawfile BODY comparison.txt '{body: $BODY}' > payload.json
+    curl -H "Authorization: token $PERSONAL_TOKEN" -X POST -d @payload.json https://api.github.com/repos/${GITHUB_REPOSITORY}/issues/${PR_ID}/comments
 fi
diff --git a/src/page/cv.html b/src/page/cv.html
@@ -307,8 +307,8 @@ <h3>
     </dd>
     <dt>
       From April 2011 to November 2017
+      <!-- loading="lazy" disable because it seems to prevent the image from loading in PDF -->
       <img
-        loading="lazy"
         src="/img/logo-ez.png"
         alt="Logo eZ Systems"
         class="logo"
@@ -351,8 +351,8 @@ <h3>
     </dd>
     <dt>
       From February 2007 to March 2011
+      <!-- loading="lazy" disable because it seems to prevent the image from loading in PDF -->
       <img
-        loading="lazy"
         src="/img/logo-smile.png"
         alt="Logo Smile"
         class="logo"
@@ -385,8 +385,8 @@ <h3>
     </dd>
     <dt>
       From April 2004 to January 2007
+      <!-- loading="lazy" disable because it seems to prevent the image from loading in PDF -->
       <img
-        loading="lazy"
         src="/img/logo-kaliop.png"
         alt="Logo Kaliop"
         class="logo"