fujin/gruvbox-wallpapers
1
0
Fork 0
mirror of https://github.com/AngelJumbo/gruvbox-wallpapers.git synced 2026-08-12 17:02:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #62 from touero/main

Browse Source 
Implement thumbnail display
This commit is contained in:
AngelJumbo
2025-03-23 08:41:39 -05:00
committed by GitHub
parent e73070e430 610a3ba816
commit cac93e87f0
2 changed files with 48 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1
View File
@@ -1 +1,2 @@
*.html *.html
thumbnails/
build.sh
+47 -42
View File
@@ -20,16 +20,28 @@
# OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE # OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
# SOFTWARE. # SOFTWARE.
generate_thumbnails() {
write_section_header(){ echo "generate thumbnails ..."
echo "<h2 class='s$1 clickable' onclick='activeSection(\"$2\")' >" >> $3 mkdir -p thumbnails
echo "$2" | tr a-z A-Z >> $3 for img in ./wallpapers/*/*; do
echo "</h2>" >> $3 local thumbnail="thumbnails/${img##*/}"
convert "$img" -resize 200x200 "$thumbnail"
done
} }
write_img(){ write_section_header() {
echo " <a target='_blank' href='$1'> echo "write section header ..."
<img loading='lazy' src='$1' alt='$1' width='200'></a>" >> $2 echo "<h2 class='s$1 clickable' onclick='activeSection(\"$2\")' >" >>$3
echo "$2" | tr a-z A-Z >>$3
echo "</h2>" >>$3
}
write_img() {
echo "write image ..."
local img_relative_path=${1#./}
local thumbnail="thumbnails/${1##*/}"
echo " <a target='_blank' href='$img_relative_path'>
<img loading='lazy' src='$thumbnail' alt='$1' width='200'></a>" >>$2
} }
rm *.html rm *.html
@@ -38,7 +50,6 @@ touch ./index.html
echo "<!DOCTYPE html> echo "<!DOCTYPE html>
<html lang='en'> <html lang='en'>
<head> <head>
<meta charset='utf-8'> <meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta name='viewport' content='width=device-width, initial-scale=1.0'>
@@ -47,7 +58,6 @@ echo "<!DOCTYPE html>
<script src='app.js' defer></script> <script src='app.js' defer></script>
<script src='https://kit.fontawesome.com/13865d7982.js' crossorigin='anonymous' defer></script> <script src='https://kit.fontawesome.com/13865d7982.js' crossorigin='anonymous' defer></script>
</head> </head>
<body> <body>
<div class='float-btns'> <div class='float-btns'>
<a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' > <a href='https://github.com/AngelJumbo/gruvbox-wallpapers' target='_blank' class='btn float-btn' title='Source code' >
@@ -63,71 +73,68 @@ echo "<!DOCTYPE html>
</button> </button>
</div> </div>
<main> <main>
<h1>Gruvbox Wallpapers</h1>" > ./index.html <h1>Gruvbox Wallpapers</h1>" >./index.html
color=1 color=1
maxPerPage=8 maxPerPage=8
declare -a sections declare -a sections
for subdir in ./wallpapers/* # 生成缩略图
do generate_thumbnails
for subdir in ./wallpapers/*; do
section="${subdir##*/}" section="${subdir##*/}"
sections+=("$section") sections+=("$section")
write_section_header $color "$section" ./index.html write_section_header $color "$section" ./index.html
page=1 page=1
img_count=0 img_count=0
subhtml="${section}_page${page}.html" subhtml="${section}_page${page}.html"
touch ./$subhtml touch ./$subhtml
echo "<div class='section' id='$section'>" >> ./index.html echo "<div class='section' id='$section'>" >>./index.html
echo "<div class='pager'>" >> ./index.html echo "<div class='pager'>" >>./index.html
countImgs=$(find "$subdir" -type f | wc -l) countImgs=$(find "$subdir" -type f | wc -l)
countImgs=$((countImgs - 1)) countImgs=$((countImgs - 1))
for i in $(seq 1 $((( $countImgs / $maxPerPage)+1))); do for i in $(seq 1 $((($countImgs / $maxPerPage) + 1))); do
echo "<button class='btn pager-btn' onclick='loadPage(\"$section\", $i)'>$i</button>" >> ./index.html echo "<button class='btn pager-btn' onclick='loadPage(\"$section\", $i)'>$i</button>" >>./index.html
done done
echo "</div>" >> ./index.html echo "</div>" >>./index.html
echo "<div id='$section-content'>" >> ./index.html echo "<div id='$section-content'>" >>./index.html
echo "<div class='c'>" >> ./$subhtml echo "<div class='c'>" >>./$subhtml
for wallpaper in ${subdir}/* for wallpaper in ${subdir}/*; do
do
if [ "$img_count" -ge $maxPerPage ]; then if [ "$img_count" -ge $maxPerPage ]; then
echo "</div>" >>./$subhtml
echo "</div>" >> ./$subhtml
page=$((page + 1)) page=$((page + 1))
subhtml="${section}_page${page}.html" subhtml="${section}_page${page}.html"
touch ./$subhtml touch ./$subhtml
echo "<div class='c'>" >>./$subhtml
echo "<div class='c'>" >> ./$subhtml
img_count=0 img_count=0
fi fi
write_img $wallpaper ./$subhtml write_img "$wallpaper" "./$subhtml"
img_count=$((img_count + 1)) img_count=$((img_count + 1))
done done
echo "</div>" >> ./$subhtml echo "</div>" >>./$subhtml
echo "</div>" >> ./index.html echo "</div>" >>./index.html
echo "</div>" >> ./index.html echo "</div>" >>./index.html
color=$((color + 1)) color=$((color + 1))
if [ "$color" -eq 8 ]; then if [ "$color" -eq 8 ]; then
color=1 color=1
fi fi
done done
echo "</main>" >> ./index.html echo "</main>" >>./index.html
echo "<script> echo "<script>
window.onload = () => {" >> ./index.html window.onload = () => {" >>./index.html
#echo "hideAll();" >> ./index.html
for section in "${sections[@]}"; do for section in "${sections[@]}"; do
echo " loadPage('$section', 1);" >> ./index.html echo " loadPage('$section', 1);" >>./index.html
done done
echo " echo "
@@ -138,9 +145,7 @@ echo "
setTheme('light'); setTheme('light');
} }
} }
</script>" >> ./index.html </script>" >>./index.html
echo "</body>
echo " </html>" >>./index.html
</body>
</html>" >> ./index.html