2021-11-01 09:20:42 +01:00
|
|
|
{ lib
|
|
|
|
|
, writeTextFile
|
|
|
|
|
, jsonConfig ? { }
|
|
|
|
|
, title ? "Landing Page"
|
|
|
|
|
, destination ? "/index.html"
|
|
|
|
|
, ...
|
|
|
|
|
}:
|
2019-10-24 02:20:38 +02:00
|
|
|
|
|
|
|
|
with lib;
|
|
|
|
|
|
|
|
|
|
writeTextFile {
|
|
|
|
|
name = "landingpage";
|
|
|
|
|
destination = destination;
|
|
|
|
|
text = ''
|
2019-12-20 05:54:26 +01:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>${title}</title>
|
|
|
|
|
<!-- The font -->
|
|
|
|
|
<link href="https://fonts.googleapis.com/css?family=Dosis&display=swap" rel="stylesheet">
|
|
|
|
|
<style>
|
|
|
|
|
:root{
|
|
|
|
|
font-family: 'Dosis', sans-serif;
|
|
|
|
|
}
|
|
|
|
|
body {
|
|
|
|
|
margin-left:0px;
|
|
|
|
|
margin-right:0px;
|
|
|
|
|
padding-left:0px;
|
|
|
|
|
padding-right:0px;
|
|
|
|
|
}
|
|
|
|
|
.container {
|
|
|
|
|
margin-left:0px;
|
|
|
|
|
margin-right:0px;
|
|
|
|
|
padding-left:0px;
|
|
|
|
|
padding-right:0px;
|
|
|
|
|
}
|
|
|
|
|
.row-items {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
}
|
|
|
|
|
.row-title{
|
|
|
|
|
text-align: center;
|
|
|
|
|
padding-top: 7px;
|
|
|
|
|
padding-bottom: 2px;
|
|
|
|
|
}
|
|
|
|
|
.row-text {
|
|
|
|
|
text-align: center;
|
|
|
|
|
background-color: #e6ffcc;
|
|
|
|
|
padding-top: 7px;
|
|
|
|
|
padding-bottom: 7px;
|
|
|
|
|
}
|
|
|
|
|
.item {
|
|
|
|
|
display: grid;
|
|
|
|
|
grid-template-columns: 250px;
|
|
|
|
|
grid-template-rows: auto;
|
|
|
|
|
grid-template-areas:
|
|
|
|
|
"image"
|
|
|
|
|
"text";
|
|
|
|
|
margin: 2px;
|
|
|
|
|
// border-style: solid;
|
|
|
|
|
border-width: 0px;
|
|
|
|
|
border-color: #ffe6b3;
|
|
|
|
|
background-color: #ffe6b3;
|
|
|
|
|
}
|
|
|
|
|
.item-image {
|
|
|
|
|
grid-area: image;
|
|
|
|
|
width: 250px;
|
|
|
|
|
height: 180px;
|
|
|
|
|
}
|
|
|
|
|
.item-caption{
|
|
|
|
|
grid-area: text;
|
|
|
|
|
padding-bottom: 3px;
|
|
|
|
|
};
|
|
|
|
|
a {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
a:link {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
a:visited {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
a:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
a:active {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
<body>
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
${let
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
createItemRow = { titel ? null, text ? null, items ? [ ] }: ''
|
|
|
|
|
<div class="row">
|
|
|
|
|
${
|
|
|
|
|
optionalString (titel != null)
|
|
|
|
|
''<h2 class="row-title">${title}</h2>''
|
|
|
|
|
}
|
|
|
|
|
${
|
|
|
|
|
optionalString (text != null) ''
|
|
|
|
|
<div class="row-text">
|
|
|
|
|
<pre>${text}</pre>
|
|
|
|
|
</div>''
|
|
|
|
|
}
|
|
|
|
|
<div class="row-items">
|
|
|
|
|
${concatStringsSep "\n" (map createSubItem items)}
|
|
|
|
|
</div>
|
|
|
|
|
</div>'';
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
createSubItem = { label, href, image }:
|
|
|
|
|
# const shortLabel = (label.length > 28) ? `''${label.substring(0,25)}...` : label;
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
''
|
|
|
|
|
<div class="item">
|
|
|
|
|
<a target="_blank" rel="noopener noreferrer" href="${href}" class="thumbnail">
|
|
|
|
|
<img src="${image}" class="item-image">
|
|
|
|
|
<div class="item-caption" style="text-align:center;font-weight:bold">
|
|
|
|
|
${label}
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>'';
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
in concatStringsSep "\n" (map createItemRow jsonConfig.items)}
|
2019-10-24 02:20:38 +02:00
|
|
|
|
2019-12-20 05:54:26 +01:00
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
'';
|
2019-10-24 02:20:38 +02:00
|
|
|
}
|
