Verified Commit d368de4d authored by Jae's avatar Jae
Browse files

Add blurhash + lazy loading images

parent dff07bdb
target/
\ No newline at end of file
target/
static/blurhash/
\ No newline at end of file
......@@ -3,6 +3,7 @@ module pikpik
go 1.17
require (
github.com/buckket/go-blurhash v1.1.0
github.com/gin-contrib/cache v1.1.0
github.com/gin-contrib/gzip v0.0.3
github.com/gin-gonic/gin v1.7.4
......
......@@ -4,6 +4,7 @@ import (
"encoding/json"
"fmt"
"html/template"
"image/jpeg"
"io/ioutil"
"log"
"math/rand"
......@@ -11,6 +12,7 @@ import (
"os"
"time"
"github.com/buckket/go-blurhash"
"github.com/gin-contrib/cache"
"github.com/gin-contrib/cache/persistence"
"github.com/gin-contrib/gzip"
......@@ -41,6 +43,41 @@ func main() {
r.Use(gzip.Gzip(gzip.DefaultCompression))
r.Delims("{{", "}}")
// Create the blurhash directory
if _, err := os.Stat("./static/blurhash"); os.IsNotExist(err) {
err := os.Mkdir("./static/blurhash", 0755)
if err != nil {
log.Fatal(err)
}
}
// Convert all images to blurhash
galphotos, err := ioutil.ReadDir("./static/images")
if err != nil {
log.Fatal(err)
}
for _, file := range galphotos {
if file.Name() != ".gitkeep" {
imageF, _ := os.Open("./static/images/" + file.Name())
loadedImage, err := jpeg.Decode(imageF)
if err != nil {
log.Fatal(err)
}
str, _ := blurhash.Encode(4, 3, loadedImage)
fmt.Println(str)
img, err := blurhash.Decode(str, 300, 500, 1)
if err != nil {
log.Fatal(err)
}
f, _ := os.Create("./static/blurhash/" + file.Name())
_ = jpeg.Encode(f, img, nil)
}
}
store := persistence.NewInMemoryStore(time.Second)
r.GET("/health", func(c *gin.Context) {
......
const template = document.createElement("template");
template.innerHTML = `
<style>
.webring {
border: 15px solid #fff;
padding: 1rem;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-gap: 1rem;
text-align: center;
font: 100% system-ui, sans-serif;
}
.icon {
font-size: 100px;
}
.webring a {
color: #f5a500;
}
</style>
<div class="webring">
<div class="icon">></div>
<div id="copy">
</div>
<div class="icon"><</div>
</div>`;
const RING_MEMBERS = window.location.href + "webring/members"
class WebRing extends HTMLElement {
connectedCallback() {
this.attachShadow({ mode: "open" });
this.shadowRoot.appendChild(template.content.cloneNode(true));
const thisSite = this.getAttribute("site");
fetch(RING_MEMBERS)
.then((response) => response.json())
.then((sites) => {
// Find the current site in the data
const matchedSiteIndex = sites.findIndex(
(site) => site.url === thisSite
);
const matchedSite = sites[matchedSiteIndex];
let prevSiteIndex = matchedSiteIndex - 1;
if (prevSiteIndex === -1) prevSiteIndex = sites.length - 1;
let nextSiteIndex = matchedSiteIndex + 1;
if (nextSiteIndex > sites.length) nextSiteIndex = 0;
const randomSiteIndex = this.getRandomInt(0, sites.length - 1);
const cp = `
<h1>Ftech webring</h1>
<p>
This is <a href="${matchedSite.url}">${matchedSite.name}</a>, owned by ${matchedSite.owner}
</p>
<p>
<a href="${sites[prevSiteIndex].url}">[Prev]</a>
<a href="${sites[nextSiteIndex].url}">[Next]</a>
<a href="${sites[randomSiteIndex].url}">[Random]</a>
</p>
`;
this.shadowRoot
.querySelector("#copy")
.insertAdjacentHTML("afterbegin", cp);
});
}
getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
}
window.customElements.define("webring-css", WebRing);
\ No newline at end of file
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1, // ratio of element convergence
enableAutoReload: true // it will reload the new image when validating attributes changes
});
observer.observe();
\ No newline at end of file
......@@ -10,6 +10,10 @@
<a href="https://code.jae.fi/jae/go-jae.fi" >This website is Open-Source</a>; <a href="https://bm.jae.fi/web/tor.txt">Tor URLs</a> and <a href="https://bm.jae.fi/web/tor.txt.minisig">Minisign signature</a>; XMR: 431TUAeNohaRLPrDQJZzeJZmTrbUNCKc2MUKttRAqjaxb4PiCYiwEutW6mTu59vyqBb1X8bevAEuMTjFDoCaAx4gRDQbc23
</small>
</footer>
<!-- JAVASCRIPT -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script type="text/javascript" src="/assets/js/main.js"></script>
</body>
</html>
......
......@@ -9,7 +9,9 @@
<div class="gallery">
{{ range .images }}
<figure class="gallery__item">
<a href="/assets/images/{{ . }}"><img src="/assets/images/{{ . }}" /></a>
<a href="/assets/images/{{ . }}">
<img style="background-image: url('/assets/blurhash/{{ . }}'); width: 300px; height: 500px;" data-src="/assets/images/{{ . }}" alt="Picture taken by Jae. Sorry, no visual description at the moment, please check again later." class="lozad" />
</a>
</figure>
{{ end }}
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment