Skip to content

Instantly share code, notes, and snippets.

@pzelnip

pzelnip/dispimage.html

Created April 23, 2018 00:27
Show Gist options
  • Save pzelnip/7f93ea67ded11c1bf7ad6648005f55c5 to your computer and use it in GitHub Desktop.
Save pzelnip/7f93ea67ded11c1bf7ad6648005f55c5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
dispimage.html
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language="javascript">
function foo() {
document.getElementById('imgcontainer').src = getParameterByName('imgpath');
if (getParameterByName('broken') == "true") {
document.getElementById("imgcontainer").classList.add("image");
document.getElementById("middletag").style.display = "block";
}
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
</script>
<style>
.overlaycontainer {
position: relative;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.overlaycontainer .image {
opacity: 0.6;
}
.overlaycontainer .middle {
opacity: 1;
}
.text {
background-color: rgb(196, 26, 26);
color: white;
font-size: 18px;
padding: 16px 32px;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
.center {
display: block;
height: auto;
max-width: 100%;
margin-left:auto;
margin-right:auto;}
</style>
</head>
<body>
<div class="container">
<div class="well well-lg">
<div class="overlaycontainer">
<img id='imgcontainer' src="" class="center">
<div class="middle" id="middletag" style="display: none">
<div class="text">Broke the build</div>
</div>
</div>
<br/>
<a class="btn btn-default btn-block" href="/">Go Back</a>
</div>
</div>
<script type="text/javascript">
foo()
</script>
</body>
</html>
Raw
generate.py
import os
from subprocess import call
INDEX_TOP = """
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
div.gallery {
border: 1px solid #fff;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.hover08 figure img {
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.hover08 figure:hover img {
opacity: .75;
}
</style>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>LOLCommits</h1>
<p>Funny git commits</p>
</div>
"""
INDEX_BOTTOM= """
<div class="clearfix"></div>
</div>
</body>
</html>
"""
THUMBNAIL_PATH = '__thumbnails'
FRAGMENT = """
<div class="responsive">
<div class="gallery hover08">
<a href="dispimage.html?imgpath={path}">
<figure><img src="%s/{desc}" class="img-rounded hover08" /></figure>
</a>
<div class="desc bg-info">{desc}</div>
</div>
</div>
""" % THUMBNAIL_PATH
def write_thumbnail_image(path):
fname = path.split('/')[-1]
filepath = f"{THUMBNAIL_PATH}/{fname}"
if os.path.exists(filepath):
return
args = f"convert {path} -resize 300x200 {filepath}".split()
call(args)
call(f'jpegoptim -m 80 -t {fname}'.split(), cwd=THUMBNAIL_PATH)
def gen_thumbnail(path):
fname = path.split('/')[-1]
write_thumbnail_image(path)
return FRAGMENT.format(path=path, desc=fname)
def main():
with open("index.html", "w") as fobj:
fobj.write(INDEX_TOP)
for subdir, dirs, files in os.walk('.'):
if subdir == '.' or subdir.startswith('./.git') or subdir == f"./{THUMBNAIL_PATH}":
print(f"Skipping {subdir}")
continue
print(f"Processing {subdir}")
fobj.write("<div>\n")
fobj.write("""<div class="page-header"><h2>%s</h2></div>\n\n""" % subdir[2:])
for subfile in files:
filepath = "%s/%s" % (subdir[2:], subfile)
fobj.write(gen_thumbnail(filepath))
fobj.write("\n")
fobj.write("""</div>\n<div class="clearfix"></div>\n""")
fobj.write(INDEX_BOTTOM)
# optimize_thumbnails()
if __name__ == "__main__":
main()
Raw
gistfile1.txt
#!/bin/sh
set -e
python3 generate.py
aws --profile codependentcodr s3 sync . s3://pzelnip-lolcommits --delete --cache-control 'public, max-age=604800'
aws --profile codependentcodr s3 rm s3://pzelnip-lolcommits/index.html
aws --profile codependentcodr s3 cp index.html s3://pzelnip-lolcommits/index.html
aws --profile codependentcodr s3 rm s3://pzelnip-lolcommits/dispimage.html
aws --profile codependentcodr s3 cp dispimage.html s3://pzelnip-lolcommits/dispimage.html
aws --profile codependentcodr s3 rm s3://pzelnip-lolcommits/s3upload.sh
aws --profile codependentcodr s3 rm s3://pzelnip-lolcommits/generate.py
aws --profile codependentcodr s3 rm s3://pzelnip-lolcommits/.DS_Store
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment