add micro website
This commit is contained in:
commit
ad88536911
64
bin/create-json
Executable file
64
bin/create-json
Executable file
|
@ -0,0 +1,64 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
usage() {
|
||||||
|
printf "Usage: %s -s SRC -o OUTPUT -b BASE_URL\n" "$0"
|
||||||
|
}
|
||||||
|
|
||||||
|
on_interrupt() {
|
||||||
|
print "Process aborted!\n"
|
||||||
|
|
||||||
|
exit 130
|
||||||
|
}
|
||||||
|
|
||||||
|
main() {
|
||||||
|
while getopts "hs:b:o:" option; do
|
||||||
|
case "${option}" in
|
||||||
|
h) usage; exit 0;;
|
||||||
|
s) SRC="$OPTARG";;
|
||||||
|
o) OUTPUT="$OPTARG";;
|
||||||
|
b) BASE_URL="$OPTARG";;
|
||||||
|
*) usage; exit 1;;
|
||||||
|
esac
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ -z "$SRC" ]; then
|
||||||
|
printf "You must provided the source (directory).\n"
|
||||||
|
usage
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$OUTPUT" ]; then
|
||||||
|
printf "You must provided the output (json file).\n"
|
||||||
|
usage
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$BASE_URL" ]; then
|
||||||
|
printf "You must provided the base url.\n"
|
||||||
|
usage
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
images=""
|
||||||
|
|
||||||
|
for image in "$SRC/"*; do
|
||||||
|
filename="$(basename "$image")"
|
||||||
|
date="$(printf "%s" "$filename" | sed 's#^\([[:digit:]]\{4\}\)\([[:digit:]]\{2\}\)\([[:digit:]]\{2\}\)_.*$#\3/\2/\1#')"
|
||||||
|
images="$(
|
||||||
|
printf '%s%s{"file":"%s/%s","date":"%s"}' \
|
||||||
|
"$images" \
|
||||||
|
"$(test -n "$images" && printf ",")" \
|
||||||
|
"$BASE_URL" \
|
||||||
|
"$filename" \
|
||||||
|
"$date"
|
||||||
|
)"
|
||||||
|
done
|
||||||
|
|
||||||
|
printf '{"images":[%s]}' "$images" > "$OUTPUT"
|
||||||
|
|
||||||
|
exit 0
|
||||||
|
}
|
||||||
|
|
||||||
|
trap on_interrupt INT
|
||||||
|
|
||||||
|
main "$@"
|
51
bin/create-thumbs
Executable file
51
bin/create-thumbs
Executable file
|
@ -0,0 +1,51 @@
|
||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
usage() {
|
||||||
|
printf "Usage: %s -s SRC -d DEST\n" "$0"
|
||||||
|
}
|
||||||
|
|
||||||
|
on_interrupt() {
|
||||||
|
print "Process aborted!\n"
|
||||||
|
|
||||||
|
exit 130
|
||||||
|
}
|
||||||
|
|
||||||
|
create_thumb() {
|
||||||
|
input="$1"
|
||||||
|
output="$2"
|
||||||
|
|
||||||
|
test -f "$input" && convert "$input" -scale 1400x "$output"
|
||||||
|
}
|
||||||
|
|
||||||
|
main() {
|
||||||
|
while getopts "hs:d:" option; do
|
||||||
|
case "${option}" in
|
||||||
|
h) usage; exit 0;;
|
||||||
|
s) SRC="$OPTARG";;
|
||||||
|
d) DEST="$OPTARG";;
|
||||||
|
*) usage; exit 1;;
|
||||||
|
esac
|
||||||
|
done
|
||||||
|
|
||||||
|
if [ -z "$SRC" ]; then
|
||||||
|
printf "You must provided the source (directory).\n"
|
||||||
|
usage
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [ -z "$DEST" ]; then
|
||||||
|
printf "You must provided the destination (directory).\n"
|
||||||
|
usage
|
||||||
|
exit 1
|
||||||
|
fi
|
||||||
|
|
||||||
|
for image in "$SRC/"*; do
|
||||||
|
create_thumb "$image" "$DEST/$(basename "$image")"
|
||||||
|
done
|
||||||
|
|
||||||
|
exit 0
|
||||||
|
}
|
||||||
|
|
||||||
|
trap on_interrupt INT
|
||||||
|
|
||||||
|
main "$@"
|
0
images/src/.gitkeep
Normal file
0
images/src/.gitkeep
Normal file
0
images/thumbs/.gitkeep
Normal file
0
images/thumbs/.gitkeep
Normal file
119
index.html
Normal file
119
index.html
Normal file
|
@ -0,0 +1,119 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>Diaporama</title>
|
||||||
|
</head>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
font-family: verdana;
|
||||||
|
background: #333;
|
||||||
|
color: #fff;
|
||||||
|
height: 100vh;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-center {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
figcaption {
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
figure img {
|
||||||
|
width: 100vw;
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
position: absolute;
|
||||||
|
top: 60px;
|
||||||
|
left: 0;
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.slider {
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<div class="text-center">
|
||||||
|
<div v-if="imagesToLoad == 0" class="slider">
|
||||||
|
<input type="range" id="volume" name="volume" min="0" v-model="imageIndex" :max="images.length - 1">
|
||||||
|
</div>
|
||||||
|
<div v-else>
|
||||||
|
Chargement en cours ({{ parseInt(100 * imagesLoaded / imagesToLoad) }}%)
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="imagesToLoad == 0 && images.length > 0">
|
||||||
|
<figure>
|
||||||
|
<figcaption v-text="images[imageIndex].date"></figcaption>
|
||||||
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" :alt="images[imageIndex].date" :style="makeStyle(images[imageIndex].file)">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const { createApp } = Vue
|
||||||
|
|
||||||
|
createApp({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
images: [],
|
||||||
|
imageIndex: -1,
|
||||||
|
imagesToLoad: 0,
|
||||||
|
imagesLoaded: 0,
|
||||||
|
background: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
makeStyle(path) {
|
||||||
|
return {
|
||||||
|
'background-image': `url(${path})`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
loadImages() {
|
||||||
|
images.forEach((info) => {
|
||||||
|
img = new Image()
|
||||||
|
img.onload = () => {
|
||||||
|
--this.imagesToLoad
|
||||||
|
++this.imagesLoaded
|
||||||
|
this.images.push(info)
|
||||||
|
}
|
||||||
|
img.onerror = () => {
|
||||||
|
--this.imagesToLoad
|
||||||
|
++this.imagesLoaded
|
||||||
|
}
|
||||||
|
img.src = info.file
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
fetch('images.json')
|
||||||
|
.then((response) => {
|
||||||
|
return response.json()
|
||||||
|
})
|
||||||
|
.then((json) => {
|
||||||
|
images = json.images
|
||||||
|
this.imageIndex = 0
|
||||||
|
this.imagesToLoad = images.length
|
||||||
|
this.loadImages()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}).mount('#app')
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
Loading…
Reference in a new issue