jordi fita mas
da127124a1
This is the image that is shown at the home page, and maybe other pages in the future. We can not use a static file because this image can be changed by the customer, not us; just like name and description. I decided to keep the actual media content in the database, but to copy this file out to the file system the first time it is accessed. This is because we are going to replicate the database to a public instance that must show exactly the same image, but the customer will update the image from the private instance, behind a firewall. We could also synchronize the folder where they upload the images, the same way we will replicate, but i thought that i would make the whole thing a little more brittle: this way if it can replicate the update of the media, it is impossible to not have its contents; dumping it to a file is to improve subsequent requests to the same media. I use the hex representation of the media’s hash as the URL to the resource, because PostgreSQL’s base64 is not URL save (i.e., it uses RFC2045’s charset that includes the forward slash[0]), and i did not feel necessary write a new function just to slightly reduce the URLs’ length. Before checking if the file exists, i make sure that the given hash is an hex string, like i do for UUID, otherwise any other check is going to fail for sure. I moved out hex.Valid function from UUID to check for valid hex values, but the actual hash check is inside app/media because i doubt it will be used outside that module. [0]: https://datatracker.ietf.org/doc/html/rfc2045#section-6.8
110 lines
4.6 KiB
Plaintext
110 lines
4.6 KiB
Plaintext
<!--
|
||
SPDX-FileCopyrightText: 2023 jordi fita mas <jordi@tandem.blog>
|
||
SPDX-License-Identifier: AGPL-3.0-only
|
||
-->
|
||
{{ define "title" -}}
|
||
{{( pgettext "Home" "title" )}}
|
||
{{- end }}
|
||
|
||
{{ define "head" -}}
|
||
<link rel="stylesheet" media="screen" href="/static/slick@1.8.1.css">
|
||
{{- end }}
|
||
|
||
{{ define "content" -}}
|
||
{{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.homePage*/ -}}
|
||
<section class="nature">
|
||
<div style="--background-image:url('/static/images/todd-trapani-5LHzBpiTuzQ-unsplash.jpg')">
|
||
<h2>{{ (gettext "The pleasure of camping in the middle of nature…")}}</h2>
|
||
<a href="/{{ currentLocale }}/reservation">{{( pgettext "Booking" "link" )}} <span>→</span></a>
|
||
</div>
|
||
{{ with .CampsiteTypes -}}
|
||
<div>
|
||
{{ range . -}}
|
||
<section style="--background-image:url('{{ .Media }}')">
|
||
<h3><a href="{{ .HRef }}"><span>{{ .Label }}</span></a></h3>
|
||
</section>
|
||
{{- end }}
|
||
</div>
|
||
{{- end }}
|
||
</section>
|
||
<section class="services">
|
||
<h2><a href="/{{ currentLocale }}/services">{{( gettext "Our services")}} <span>→</span></a></h2>
|
||
</section>
|
||
<section class="environment">
|
||
<h2 class="sr-only">{{ (gettext "Environment")}}</h2>
|
||
<div>
|
||
<div class="spiel">
|
||
<p>Situats a l’<strong>Alta Garrotxa</strong>, entre els <strong>Pirineus</strong> i la <strong>Costa
|
||
Brava</strong>.</p>
|
||
<p>A prop teniu els <strong>gorgs de Sadernes</strong>, <strong>volcans</strong>, <strong>La Fageda d’en
|
||
Jordà</strong>, el call jueu de <strong>Besalú</strong>, la cinglera basàltica de <strong>Castellfollit
|
||
de la Roca</strong>… molt per veure i molt per fer.</p>
|
||
<p>A menys d’una hora de <strong>Girona</strong>, a una de <strong>La Bisbal d’Empordà</strong> i a dues
|
||
de
|
||
<strong>Barcelona</strong>.</p>
|
||
<p><a href="/{{currentLocale}}/environment/">Descobreix l’entorn <span>→</span></a></p>
|
||
</div>
|
||
<figure>
|
||
<img src="/static/images/Volca_de_Santa_Margarida.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/Gorga_fosca_Sadernes.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/castellfolit_de_la_roca.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/besalu.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/santa_pau.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/banyoles.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/girn-a.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/costa_brava.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
<figure>
|
||
<img src="/static/images/barcelona-1.jpg" alt=""/>
|
||
<figcaption>{{( gettext "Legend" )}}</figcaption>
|
||
</figure>
|
||
</div>
|
||
</section>
|
||
<p class="enjoy">{{( gettext "Come and enjoy!")}}</p>
|
||
|
||
<script src="/static/jquery@3.7.1.min.js"></script>
|
||
<script src="/static/slick@1.8.1.min.js"></script>
|
||
<script>
|
||
jQuery(function () {
|
||
jQuery('.environment > div').slick({
|
||
slidesToShow: 2,
|
||
slidesToScroll: 1,
|
||
infinite: false,
|
||
arrows: true,
|
||
prevArrow: '<button type="button" class="slick-prev">←</button>',
|
||
nextArrow: '<button type="button" class="slick-next">→</button>',
|
||
responsive: [
|
||
{
|
||
breakpoint: 768,
|
||
settings: {
|
||
slidesToShow: 1,
|
||
}
|
||
},
|
||
]
|
||
});
|
||
});
|
||
</script>
|
||
{{- end }}
|