fine tuning and readme
poni
1 month ago
parent
b18605004b
commit
d551023e56
@ -0,0 +1,108 @@
|
||||
# archiepixa
|
||||
|
||||
|
||||
`archiepixa` is a minimalist Bash script designed to visualize archives with a webserver. It scans a specified folder and its subfolders, compresses previews using `ffmpeg` and `imagemagick`, and compiles them into HTML files, one for each subfolder.
|
||||
|
||||
The code has been developed for the workshop *[Building collective digital archives]("https://dsignweek.servus.at/program/fri-24/building-collective-digital-archives/")* during the [D*sign Week 2024, Linz]("https://dsignweek.servus.at/"). Powered by [Servus]("https://servus.at")
|
||||
|
||||
|
||||
## Workflow
|
||||
|
||||
- Scans specified folder and subfolders for files
|
||||
- Compresses previews for images, videos, and audio files
|
||||
- Generates static HTML files with customizable CSS styling
|
||||
- Customization of main color, secondary color, background color, and footer text
|
||||
|
||||
|
||||
## System Requirements
|
||||
|
||||
- Bash shell
|
||||
- `ffmpeg` and `imagemagick` packages for media file compression
|
||||
|
||||
## Installation Instructions
|
||||
|
||||
### Installing ffmpeg and imagemagick
|
||||
|
||||
To install `ffmpeg` and `imagemagick`, use the package manager specific to your operating system.
|
||||
|
||||
#### For Ubuntu/Debian:
|
||||
|
||||
```bash
|
||||
sudo apt-get install ffmpeg imagemagick
|
||||
```
|
||||
|
||||
#### For macOS (using Homebrew):
|
||||
|
||||
```bash
|
||||
brew install ffmpeg imagemagick
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
To use `archiepixa`, follow these steps:
|
||||
|
||||
1. Place `archiepixa.sh` in the parent folder of the directory you want to scan.
|
||||
2. Run the script using the following command:
|
||||
|
||||
```bash
|
||||
bash archiepixa.sh -f <folder_name>
|
||||
```
|
||||
|
||||
Replace `<folder_name>` with the name of the folder you want to scan.
|
||||
|
||||
## Getting started
|
||||
|
||||
A practical example:
|
||||
|
||||
```bash
|
||||
cd /var/www/html/
|
||||
git clone http://git.servus.at/servus/archiepixa
|
||||
mv archiepixa/archipiexa.sh ./
|
||||
bash archiepixa.sh -f ""
|
||||
```
|
||||
|
||||
## Customization
|
||||
|
||||
You can customize the appearance of the generated HTML files by modifying the **CSS** within the Bash script.
|
||||
|
||||
You can use flags to modify the background, the main, the second, the third color and you can choose how many colors the dither uses.
|
||||
|
||||
```bash
|
||||
bash archiepixa.sh -f "folder" -b "black" -1 "purple" -2 "rgb('22','45','223')" -3 "#342298" -d "5"
|
||||
```
|
||||
|
||||
Defaults are:
|
||||
|
||||
* -1 "red"
|
||||
* -2 "orange"
|
||||
* -3 "black"
|
||||
* -b "white"
|
||||
* -d "3"
|
||||
|
||||
|
||||
## Cleanup
|
||||
|
||||
To remove the generated HTML files, use the `-r` flag along with the folder name:
|
||||
|
||||
```bash
|
||||
bash archiepixa.sh -f <folder_name> -r
|
||||
```
|
||||
|
||||
To delete both the HTML files and compressed folders, use the `-ra` flag:
|
||||
|
||||
```bash
|
||||
bash archiepixa.sh -f <folder_name> -ra
|
||||
```
|
||||
|
||||
## IMPORTANT!
|
||||
|
||||
**Note:** Avoid placing files named "index.html" within the scanned folders to prevent conflicts.
|
||||
|
||||
|
||||
## License
|
||||
|
||||
This script is licensed under the [Habitat License](https://habitattt.it/license).
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
@ -0,0 +1,376 @@
|
||||
#!/bin/bash
|
||||
|
||||
# Default values
|
||||
main_folder="poni"
|
||||
main="red"
|
||||
second="orange"
|
||||
third="black"
|
||||
background="white"
|
||||
n_colors_dither="3"
|
||||
footer=""
|
||||
|
||||
# Parse command line options
|
||||
while getopts ":f:1:2:3:d:b:foot" opt; do
|
||||
case ${opt} in
|
||||
f )
|
||||
main_folder="$OPTARG"
|
||||
;;
|
||||
1 )
|
||||
main="$OPTARG"
|
||||
;;
|
||||
2 )
|
||||
second="$OPTARG"
|
||||
;;
|
||||
3 )
|
||||
third="$OPTARG"
|
||||
;;
|
||||
d )
|
||||
n_colors_dither="$OPTARG"
|
||||
;;
|
||||
b )
|
||||
background="$OPTARG"
|
||||
;;
|
||||
foot )
|
||||
footer="$OPTARG"
|
||||
;;
|
||||
\? )
|
||||
echo "Invalid option: $OPTARG" 1>&2
|
||||
exit 1
|
||||
;;
|
||||
: )
|
||||
echo "Invalid option: $OPTARG requires an argument" 1>&2
|
||||
exit 1
|
||||
;;
|
||||
esac
|
||||
done
|
||||
shift $((OPTIND -1))
|
||||
|
||||
css='
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
font-family: 'arial';
|
||||
background-color: var(--bck)
|
||||
}
|
||||
|
||||
h1{
|
||||
font-weight: 100;
|
||||
text-align: center;
|
||||
color: var(--main);
|
||||
font-style: italic;
|
||||
font-size: 3rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
h2{
|
||||
color: var(--second);
|
||||
}
|
||||
|
||||
a{
|
||||
text-align: center;
|
||||
color: var(--second);
|
||||
}
|
||||
|
||||
li a{
|
||||
color: var(--third);
|
||||
}
|
||||
|
||||
header,footer p{
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
color: var(--second);
|
||||
font-size: 2rem
|
||||
}
|
||||
|
||||
footer{
|
||||
border-top: solid var(--main);
|
||||
bottom: 0;
|
||||
position: fixed;
|
||||
margin-top: 2rem;
|
||||
font-size: 1rem;
|
||||
padding: 1rem;
|
||||
background-color: var(--bck);
|
||||
width: 100%
|
||||
}
|
||||
|
||||
footer p{
|
||||
font-size: 1rem;
|
||||
color: var(--third);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.footer a{
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.exception{
|
||||
color: var(--main)
|
||||
}
|
||||
|
||||
hr{
|
||||
color: var(--main);
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.go{
|
||||
max-width: 75%;
|
||||
gap: 2rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
line-height: .5;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.go a{
|
||||
margin-right: 1.5rem
|
||||
}
|
||||
|
||||
.contents{
|
||||
margin-bottom: 10%;
|
||||
width: 80%;
|
||||
margin-left: 10%;
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
}
|
||||
|
||||
.contents div{
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
img, video {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media only screen and (max-width: 600px) {
|
||||
.contents{
|
||||
margin-bottom: 50%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.contents div{
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
.go{
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
width: 70%;
|
||||
display: block;
|
||||
}
|
||||
}"
|
||||
'
|
||||
|
||||
# Function to compress and generate HTML links
|
||||
compress_and_generate_links() {
|
||||
|
||||
local folder="$1"
|
||||
local compressed_folder="compressed"
|
||||
mkdir -p "$folder"/"$compressed_folder"
|
||||
|
||||
declare -a text_files
|
||||
declare -a picture_files
|
||||
declare -a video_files
|
||||
declare -a audio_files
|
||||
declare -a other_files
|
||||
|
||||
for file in "$folder"/*; do
|
||||
if [ -f "$file" ]; then
|
||||
case "$file" in
|
||||
*.txt|*.md|*.html|*.sh|*.py|*.js|*.php|*.TXT|*.MD)
|
||||
text_files+=("$file")
|
||||
;;
|
||||
*.jpg|*.png|*.heic|*.svg|*.JPG|*.PNG|*.HEIC|*.SVG)
|
||||
picture_files+=("$file")
|
||||
;;
|
||||
# |*.gif|*.GIF)
|
||||
# gif_files+=("$file")
|
||||
# ;;
|
||||
*.mp4|*.mov|*.mkv|*.avi|*.MP4|*.M)
|
||||
video_files+=("$file")
|
||||
;;
|
||||
*.mp3|*.wav|*.WAV|*.aiff|*.AIFF|*.FLAC|*.MP3|*.flac)
|
||||
audio_files+=("$file")
|
||||
;;
|
||||
*index.html) # Exclude index.html files
|
||||
continue
|
||||
;;
|
||||
*)
|
||||
other_files+=("$file")
|
||||
;;
|
||||
esac
|
||||
fi
|
||||
done
|
||||
|
||||
# Create index.html file
|
||||
index_file="$folder/index.html"
|
||||
echo "<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>$folder</title>
|
||||
<style>
|
||||
|
||||
:root{
|
||||
--main: $main;
|
||||
--second: $second;
|
||||
--third: $third;
|
||||
--bck: $background;
|
||||
}
|
||||
|
||||
$css
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>" > "$index_file"
|
||||
|
||||
|
||||
|
||||
# Header Wrappers
|
||||
echo "<header>" >> "$index_file"
|
||||
|
||||
# Add links to subfolders with their names displayed
|
||||
subfolders=()
|
||||
for subfolder in "$folder"/*; do
|
||||
if [ -d "$subfolder" ] && [ ! "$(basename "$subfolder")" == "compressed" ]; then
|
||||
subfolder_name=$(basename "$subfolder")
|
||||
subfolders+=("<a href=\"$subfolder_name\">⟿ $subfolder_name</a>")
|
||||
fi
|
||||
done
|
||||
|
||||
# Open the header
|
||||
echo "<div class='go'>" >> "$index_file"
|
||||
|
||||
if [ ${#subfolders[@]} -gt 0 ]; then
|
||||
echo "" >> "$index_file"
|
||||
for subfolder_link in "${subfolders[@]}"; do
|
||||
echo "$subfolder_link" >> "$index_file"
|
||||
done
|
||||
fi
|
||||
|
||||
# Close the header
|
||||
echo "</div>" >> "$index_file"
|
||||
|
||||
# Add the possibility to go back from the page
|
||||
if [ ! "$(basename "$folder")" == "$(basename "$main_folder")" ]; then
|
||||
echo "<p class="back"><a class="arrow_back" href='../'>⬳</a></p>" >> "$index_file"
|
||||
fi
|
||||
|
||||
# Header Wrappers
|
||||
echo "</header>" >> "$index_file"
|
||||
|
||||
echo "<h1>$folder</h1><div class='contents'>" >> "$index_file"
|
||||
|
||||
# Display text files in the subfolder
|
||||
if [ ${#text_files[@]} -gt 0 ]; then
|
||||
echo "<div class='text'>" >> "$index_file"
|
||||
for text_file in "${text_files[@]}"; do
|
||||
echo "<div><a href=\"$text_file\" target=\"_blank\">$text_file</a><br><p></p></div>" >> "$index_file"
|
||||
done
|
||||
echo "</div>" >> "$index_file"
|
||||
fi
|
||||
|
||||
# Compress and display picture files in the subfolder
|
||||
if [ ${#picture_files[@]} -gt 0 ]; then
|
||||
# echo "<div class='pics'>" >> "$index_file"
|
||||
for picture_file in "${picture_files[@]}"; do
|
||||
compressed_file="$folder"/"$compressed_folder/$(basename "$picture_file")_compressed.jpg"
|
||||
if [ ! -f "$compressed_file" ]; then
|
||||
if $dither; then
|
||||
convert "$picture_file" -dither Riemersma -colors $n_colors_dither -quality 85 "$compressed_file"
|
||||
else
|
||||
convert "$picture_file" -quality 85 "$compressed_file"
|
||||
fi
|
||||
fi
|
||||
echo "<div>
|
||||
<a href="\"/$compressed_file"\"><img loading=\"lazy\" src=\"/$compressed_file\" alt=\"Compressed Image\"></a>
|
||||
<a href=\"$(basename "$picture_file")\" target=\"_blank\">Original ⇝ $(basename "$picture_file")</a>
|
||||
</div>" >> "$index_file"
|
||||
done
|
||||
fi
|
||||
|
||||
# Compress and display video files in the subfolder
|
||||
if [ ${#video_files[@]} -gt 0 ]; then
|
||||
# echo "<div class='vids'>" >> "$index_file"
|
||||
for video_file in "${video_files[@]}"; do
|
||||
compressed_file="$folder"/"$compressed_folder/$(basename "$video_file")_compressed.mp4"
|
||||
if [ ! -f "$compressed_file" ]; then
|
||||
ffmpeg -i "$video_file" -vf "scale=640:480" -c:v libx264 -crf 23 -c:a aac -strict experimental "$compressed_file" -y
|
||||
fi
|
||||
echo "<div>
|
||||
<video controls>
|
||||
<source src=\"/$compressed_file\" type=\"video/mp4\">
|
||||
</video>
|
||||
<a href=\"$(basename "$video_file")\" target=\"_blank\">Original ⇝ $(basename "$video_file")</a>
|
||||
</div>" >> "$index_file"
|
||||
done
|
||||
fi
|
||||
|
||||
# Compress and display audio files in the subfolder
|
||||
if [ ${#audio_files[@]} -gt 0 ]; then
|
||||
for audio_file in "${audio_files[@]}"; do
|
||||
compressed_file="$folder"/"$compressed_folder/$(basename "$audio_file")_compressed.mp3"
|
||||
if [ ! -f "$compressed_file" ]; then
|
||||
ffmpeg -i "$audio_file" -b:a 96k "$compressed_file" -y
|
||||
fi
|
||||
echo "<div>
|
||||
<audio controls>
|
||||
<source src=\"/$compressed_file\" type=\"audio/mpeg\">
|
||||
</audio>
|
||||
<a href=\"$(basename "$audio_file")\" target=\"_blank\">Original ⇝ $(basename "$audio_file")</a>
|
||||
</div>" >> "$index_file"
|
||||
done
|
||||
fi
|
||||
|
||||
# Display other files in the subfolder
|
||||
if [ ${#other_files[@]} -gt 0 ]; then
|
||||
echo "<hr><div class="others"><h2>Other Files:</h2><ul>" >> "$index_file"
|
||||
for other_file in "${other_files[@]}"; do
|
||||
echo "<li><a href=\"$(basename "$other_file")\" target=\"_blank\">$other_file</a></li>" >> "$index_file"
|
||||
done
|
||||
echo "</ul></div>" >> "$index_file"
|
||||
fi
|
||||
|
||||
# Close HTML tags
|
||||
echo "</div>
|
||||
<footer>$footer</footer>
|
||||
</body></html>" >> "$index_file"
|
||||
}
|
||||
|
||||
# Function to iterate through all subfolders excluding "compressed"
|
||||
function iterate_subfolders() {
|
||||
local folder="$1"
|
||||
|
||||
# Loop through each item in the folder
|
||||
for item in "$folder"/*; do
|
||||
# Check if the item is a directory
|
||||
if [ -d "$item" ] && [ ! "$(basename "$item")" == "compressed" ] && [ ! "$(basename "$item")" == "*" ]; then
|
||||
compress_and_generate_links "$item"
|
||||
iterate_subfolders "$item"
|
||||
echo "$item"
|
||||
fi
|
||||
done
|
||||
}
|
||||
|
||||
|
||||
compress_and_generate_links "$main_folder"
|
||||
|
||||
# Start iterating from the main folder
|
||||
iterate_subfolders $main_folder
|
||||
|
||||
|
||||
echo "HTML files created for each subfolder."
|
||||
Loading…
Reference in New Issue