working on template

This commit is contained in:
Solene Rapenne 2022-12-03 09:28:16 +01:00
parent 91543726b4
commit 1c803f7188
4 changed files with 164 additions and 29 deletions

View File

@ -7,16 +7,26 @@
];
website = {
url = "https://localhost/";
url = "https://webzine.snowflake.ovh/";
style = builtins.readFile ./style.html;
header = ''
<header>
<h2 id="title"><a href="https://${website.url}"><span><img src="static/NixOS_logo.svg" alt="">NixOS Webzine</span></a></h2>
<p id="banner"><span aria-hidden="true"></span><em>Your tasty dose of NixOS news</em><span aria-hidden="true"></span></p>
</header>
'';
};
in
pkgs.stdenv.mkDerivation rec {
name = "nixos-webzine";
src = ./static;
builder = pkgs.writeShellScript "builder.sh" (
''
${pkgs.busybox}/bin/mkdir -p $out
${pkgs.busybox}/bin/mkdir -p $out/static
${pkgs.busybox}/bin/cp ${index_generator}/* $out/
${pkgs.busybox}/bin/cp -fr $src/* $out/static/
''
+ (
pkgs.lib.concatStringsSep "\n"
@ -30,7 +40,7 @@ in
pages_generator = (builtins.map (element: let
issue = import element;
in
pkgs.writeTextDir "${issue.number}.html" ''
pkgs.writeTextDir "issue-${issue.number}.html" ''
<!DOCTYPE html>
<html lang="en">
<head>
@ -50,13 +60,15 @@ in
${website.style}
</head>
<body>
${website.header}
<main>
<!-- NEWS -->
${
<!-- NEWS -->
${
if (builtins.length issue.news) != 0
then ''
<article id="news">
<div class="puffies" aria-hidden="true"> </div>
<div class="snowflakes" aria-hidden="true"> </div>
<h2>News</h2>
<ul>
${pkgs.lib.concatStringsSep "\n" (builtins.map (item: ''
@ -69,12 +81,12 @@ in
else ""
}
<!-- TIPS -->
${
<!-- TIPS -->
${
if issue.tips != ""
then ''
<article id="tips">
<div class="puffies" aria-hidden="true"> </div>
<div class="snowflakes" aria-hidden="true"> </div>
<h2>Tips</h2>
${issue.tips}
</article>
@ -82,16 +94,16 @@ in
else ""
}
<!-- LINKS -->
${
<!-- LINKS -->
${
if (builtins.length issue.links) != 0
then ''
<article id="links">
<div class="puffies" aria-hidden="true"> </div>
<div class="snowflakes" aria-hidden="true"> </div>
<h2>Going further</h2>
<ul>
${pkgs.lib.concatStringsSep "\n" (builtins.map (item: ''
<li>${item}</li>
<li>${item.text} [<a href="${item.url}" class="permalink">link</a>]</li>
'')
issue.links)}
</ul>
@ -99,6 +111,40 @@ in
''
else ""
}
<!-- ARTWORK-->
${
if issue.artwork.url != ""
then ''
<article id="artwork">
<div class="snowflakes" aria-hidden="true"> </div>
<h2>Artwork of the moment</h2>
<figure>
<a href="${issue.artwork.url}">
<picture>
<img src="${issue.artwork.url}"
alt="${issue.artwork.caption}" />
</picture>
</a>
<figcaption>${issue.artwork.caption} - by ${issue.artwork.author}</figcaption>
</figure>
</article>
''
else ""
}
<!-- REDACTION -->
${
if issue.editors != ""
then ''
<article id="editors">
<div class="snowflakes" aria-hidden="true"> </div>
<h2>Notes from the editorial team</h2>
${issue.editors}
</article>
''
else ""
}
</main>
<footer>
<hr />
@ -111,4 +157,79 @@ in
</html>
''))
issues;
index_generator = pkgs.writeTextDir "index.html" ''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="alternate" type="application/rss+xml" href="https://${website.url}/atom.xml">
<meta property="og:title" content="NixOS webzine" />
<meta property="og:description" content="Webzine created by volunteers who are passionate about the NixOS project development." />
<meta property="og:url" content="https://${website.url}/index.html" />
<meta property="og:image" content="https://${website.url}/images/logo.png" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_EN" />
<title>NixOS webzine index</title>
${website.style}
</head>
<body>
${website.header}
<main>
<article id="issues">
<h2>Issues published</h2>
<ul>
${pkgs.lib.concatStringsSep "\n" (builtins.map (element: let
issue = import element;
in ''
<li>${issue.date} - Issue ${issue.number} <a class="permalink" href="issue-${issue.number}.html">English</a></li>
'') (pkgs.lib.lists.reverseList issues))}
</ul>
</article>
<article id="infos">
<h2>Infos</h2>
<div>
<p>This webzine is done by volunteers who are passionate about the NixOS project development.</p>
<p>Our goal is to allow people to stay informed about NixOS in a cool, fun and instructive way, like reading a regularly issued magazine of one's favorite hobby.</p>
</div>
</article>
<article id="community">
<h2>Community</h2>
<p>Looking to get in touch with NixOS users? Here are a few ways to join them.</p>
<ul>
<li><a class="permalink" href="atom.xml">Webzine feed</a></li>
<li><a class="permalink" href="https://discourse.nixos.org">Official discourse forum</a></li>
<li>Reddit: <a class="permalink" href="https://www.reddit.com/r/nixos/">Subreddit /r/nixos/</a></li>
<li>Matrix: channel <em>#community:nixos.org</em></li>
<li>Mastodon: Search for tag #NixOS</li>
<li>Twitter: <a class="permalink" href="https://twitter.com/hashtag/nixos">#nixos</a></li>
</ul>
</article>
<article id="contribute">
<h2>How to contribute</h2>
<p>If you want to contribute to the Webzine, from a simple contribution suggesting a link or a news to a large or regular contribution, we do all the work publicly with Git.
<a class="permalink" href="https://tildegit.org/solene/nixos-webzine/">Link to the Git repository.</a>
</p>
</article>
</main>
<footer>
<hr />
<p id="license">Content under <a class="permalink" href="https://creativecommons.org/licenses/by/3.0/legalcode">CC-BY-NC-3.0</a>.
Artworks are under their own licenses.
<br /><a class="permalink" href="atom.xml">Feed ATOM</a>
</p>
</footer>
</body>
</html>
'';
}

View File

@ -1,26 +1,35 @@
let
issue = {
number = "001";
date = "2022-12-03";
links = [
''hello, this is a link to <a href="hello">here</a>''
{
text = ''hello, this is super interesting'';
url = "https://localhost/";
}
];
news = [
"Wow, such a thing!"
];
tips = ''
'';
news = [
"Wow, such a thing!"
];
artwork = {
caption = "";
url = "";
author = "";
};
events = [
];
editors = ''
<p>Hello from the editorial team!</p>
'';
};
in
issue

View File

@ -1,24 +1,34 @@
let
issue = {
number = "002";
date = "";
links = [
''hello, this is a link to <a href="hello">here</a>''
{
text = ''hello, this is a link to <a href="hello">here</a>'';
url = "https://something";
}
];
news = [
"Wow, such a thing!"
];
tips = "";
tips = ''
'';
artwork = {
caption = "";
url = "";
author = "";
};
events = [
];
editors = ''
'';
};
in
issue

View File

@ -7,14 +7,9 @@
text-shadow: 2px 2px 2px grey;
}
#bsd {
color: red;
border-bottom: 1px solid red;
}
#open {
font-style: italic;
color: #f5d300;
border-bottom: 1px solid red;
#title a span img {
border: none;
width: 50%;
}
#banner {
@ -27,7 +22,7 @@
justify-content: space-between;
}
.puffies {
.snowflakes {
margin: auto;
text-align: center;
}