add micro website
This commit is contained in:
Simon Vieille
commit
ad88536911
GPG Key ID:
579388D585F70417
|
|
@ -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 "$@"
|
||||
|
|
@ -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,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 New Issue