20240625.003058

CITATION.cff

@@ -0,0 +1,11 @@
+cff-version: 1.2.0
+message: "If you use this software, please cite it using these metadata."
+authors:
+  - family-names: Chen
+    given-names: Yung-Ting
+    orcid: https://orcid.org/0000-0003-3751-610X
+    email: https://blog.pulipuli.info
+title: "PWA-Blog-Cover-Builder"
+license: "MIT"
+repository-code: "/~https://github.com/pulipulichen/PWA-Blog-Cover-Builder"
+abstract: "A tool for creating the cover of the Pulipuli Chen's blog. You can upload images, set tags, and add text descriptions, making it easy to create cover images for blogs and social media."

README.md

@@ -1,4 +1,21 @@
-# PWA-Blog-Cover-Builder
-A template to create a cover for the blog.
+@TODO
 
-https://pulipulichen.github.io/PWA-Blog-Cover-Builder/
+# PWA-Blog-Cover-Builder: 「布丁布丁吃什麼？」部落格封面的製作工具
+
+A tool for creating the cover of the Pulipuli Chen's blog. You can upload images, set tags, and add text descriptions, making it easy to create cover images for blogs and social media.
+
+「布丁布丁吃什麼？」部落格封面的製作工具。可以上傳圖片、設定標籤和文字敘述，讓人方便製作能用於部落格和社群媒體的封面圖片。
+
+![](https://blogger.googleusercontent.com/img/a/AVvXsEjgu36g-iHjomNHi_epDAfA4yDzlGa-SZcP2BzqVC2gGeN-BudOiM-3ET1hsOBp7L6pCXZEtnhq6MSqezkiRkyXi6i03c90qrqd9-YQ_nXN_AEgxQtfpEERSurkH6BH5pFyB12UKkY7TADODpaITbxcHpq1JQ2TJhj5g0uSc1-xU7oQL8LVOmnwXQ)
+
+# Online Tool
+
+https://pulipulichen.github.io/PWA-Blog-Cover-Builder/
+
+
+# Key Techniques
+
+- **Progressive Web App (PWA)**: 可安裝在電腦或手機上的網頁架構設計。
+- **Vue.js**: MVVM網頁框架。
+- **Sementic UI**: 現代化RWD介面。
+- **dom-to-image-more**: 將網頁元素轉換成圖片。

build/tag.sh

@@ -0,0 +1,43 @@
+#!/bin/bash
+
+node build/update-citation.js
+
+# =================================================================
+
+new_version=$(date '+%Y%m%d.%H%M%S')
+
+git tag $new_version
+git push origin $new_version
+
+# # =================================================================
+
+git add .
+git commit -m "${new_version}"
+git push --force-with-lease
+
+# =================================================================
+
+GITHUB_HOMEPAGE=`jq -r '.homepage' package.json`
+#echo $GITHUB_HOMEPAGE
+
+GITHUB_USER=`echo $GITHUB_HOMEPAGE | awk -F'/' '{print $4}'`
+
+GITHUB_REPO=`jq -r '.name' package.json`
+#echo $GITHUB_REPO
+
+DOI=`jq -r '.doi' package.json`
+
+echo "================================================"
+echo "Integrate GitHub with Zenodo: https://rb.gy/ql60qi"
+echo ""
+echo "Steps:"
+echo "1. Zenono GitHub Setting:  https://zenodo.org/account/settings/github/"
+echo "2. GitHub New Release:  /~https://github.com/${GITHUB_USER}/${GITHUB_REPO}/releases/new"
+echo "3. Zenono Repository Management:  https://zenodo.org/account/settings/github/repository/${GITHUB_USER}/${GITHUB_REPO}"
+echo "4. Create a new tag and push to GitHub."
+if [ "$DOI" != "null" ] && [ -n "$DOI" ]; then
+  echo "5. GitHub New Release Again:  /~https://github.com/${GITHUB_USER}/${GITHUB_REPO}/releases/new"
+  echo "6. GitHub Homepage:  ${GITHUB_HOMEPAGE}"
+  echo "7. Zenono Public:  https://doi.org/${DOI}"
+fi
+echo "================================================"

build/update-citation.js

@@ -0,0 +1,34 @@
+const fs = require('fs')
+const path = require('path')
+
+const package_info = JSON.parse(fs.readFileSync(path.resolve(__dirname, '../package.json'), 'utf-8').toString())
+
+const author_name = package_info.author.name
+const family_name = author_name.slice(author_name.lastIndexOf(' ') + 1)
+const given_name = author_name.slice(0, author_name.lastIndexOf(' '))
+
+let repository_code = package_info.homepage
+if (repository_code.indexOf('#') > -1) {
+  repository_code = repository_code.slice(0, repository_code.indexOf('#'))
+}
+
+let citation_cff_yaml = `cff-version: 1.2.0
+message: "If you use this software, please cite it using these metadata."
+authors:
+  - family-names: ${family_name}
+    given-names: ${given_name}
+    orcid: ${package_info.author.orcid}
+    email: ${package_info.author.url}
+title: "${package_info.name}"
+license: "${package_info.license}"
+repository-code: "${repository_code}"
+abstract: "${package_info.description}"`
+
+if (package_info.doi) {
+  citation_cff_yaml = citation_cff_yaml + `
+identifiers:
+  - type: doi
+    value: ${package_info.doi}`
+}
+
+fs.writeFileSync(path.resolve(__dirname, '../CITATION.cff'), citation_cff_yaml, 'utf-8')

package.json

@@ -1,7 +1,7 @@
 {
   "name": "PWA-Blog-Cover-Builder",
   "version": "1.0.0",
-  "description": "A todo list used to integrated in Webpage Dashboard.",
+  "description": "A tool for creating the cover of the Pulipuli Chen's blog. You can upload images, set tags, and add text descriptions, making it easy to create cover images for blogs and social media.",
   "main": "index.js",
   "scripts": {
     "start": "bash ./docker-compose/d3.webpack-watch-build-production.sh",
@@ -13,7 +13,8 @@
     "d1.webpack-build-development": "bash ./docker-compose/d1.webpack-build-development.sh",
     "d2.webpack-watch-development": "bash ./docker-compose/d2.webpack-watch-development.sh",
     "d3.webpack-watch-build-production": "bash ./docker-compose/d3.webpack-watch-build-production.sh",
-    "d4.webpack-build-production": "bash ./docker-compose/d4.webpack-build-production.sh"
+    "d4.webpack-build-production": "bash ./docker-compose/d4.webpack-build-production.sh",
+    "tag": "./build/tag.sh"
   },
   "repository": {
     "type": "git",
@@ -22,7 +23,12 @@
   "keywords": [
     "Machine Learning"
   ],
-  "author": "Pulipuli Chen",
+  "author": {
+    "name": "Yung-Ting Chen",
+    "email": "blog@pulipuli.info",
+    "orcid": "https://orcid.org/0000-0003-3751-610X",
+    "url": "https://blog.pulipuli.info"
+  },
   "license": "MIT",
   "bugs": {
     "url": "/~https://github.com/pulipulichen/PWA-Blog-Cover-Builder/issues"

src/components/PanelPreview/PanelPreview.js

@@ -65,6 +65,7 @@ let app = {
 
       // console.log(Number(localConfig.coverBackgroundPosition) * 100 + '%')
       let position = Number(localConfig.coverBackgroundPosition) * 100 + '%'
+      console.log('landscape: ', this.isCoverImageLandscape)
       if (this.isCoverImageLandscape) {
         style['background-position'] = `${position} center`
       }
@@ -190,7 +191,7 @@ let app = {
       let w = e.target.width
       let h = e.target.height
 
-      this.isCoverImageLandscape = (w > h)
+      this.isCoverImageLandscape = ((w / h) > 1.56)
     }
   }
 }