haccvoc: stage website
this is a possibly horrible idea, but I used nix to generate a jekyll config for a jekyll generating a website which can display videos, so if we want we can now set the whole website up by adjusting some Nix config things (okay, I'll admit that mostly I wasn't in the mood for gitlab pages …) Anyways, features of the web site: - shows videos (using videojs, loaded locally) - has a chat iframe - has a dark mode, displays hint if javascript is disabled (on how to watch the stream outside a browser / how to join the chat), the WAVE checker doesn't complain too much about it - looks somewhat reasonable on all sizes my laptop's screen can display (and hopefully elsewhere, too) - very, very bad default texts so hopefully we won't forget to change any - literally nothing else, not even a font
This commit is contained in:
parent
20398cf2c8
commit
163229b057
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
../../services/nextcloud
|
||||
../../services/mattermost.nix
|
||||
../../services/thelounge.nix
|
||||
../../services/haccvoc-stage.nix
|
||||
../../services/murmur.nix
|
||||
../../services/hedgedoc-hacc.nix
|
||||
../../services/hedgedoc-i4f.nix
|
||||
|
|
|
|||
31
pkgs/haccvoc-stage/default.nix
Normal file
31
pkgs/haccvoc-stage/default.nix
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
{ config ? {baseurl = "";}
|
||||
, pkgs ? import <nixpkgs> {}
|
||||
, ... }:
|
||||
|
||||
with pkgs;
|
||||
|
||||
stdenv.mkDerivation {
|
||||
name = "voc-stage-site";
|
||||
src = ./site;
|
||||
|
||||
phases = [ "configPhase" "buildPhase" "installPhase" ];
|
||||
|
||||
|
||||
configPhase = ''
|
||||
cp $src/* -r .
|
||||
rm -f _config.yml
|
||||
# let's just hope we'll never run into that one edge case
|
||||
# where json actually isn't valid yaml?
|
||||
echo ${lib.escapeShellArg (builtins.toJSON config)} > _config.yml
|
||||
'';
|
||||
|
||||
buildPhase = ''
|
||||
rm env-vars
|
||||
${jekyll}/bin/jekyll build
|
||||
'';
|
||||
|
||||
installPhase = ''
|
||||
mkdir -p $out
|
||||
cp -r _site/* $out
|
||||
'';
|
||||
}
|
||||
33
pkgs/haccvoc-stage/example.nix
Normal file
33
pkgs/haccvoc-stage/example.nix
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
import ./default.nix {
|
||||
pkgs = import <nixpkgs> {};
|
||||
|
||||
# the jekyll config (converted to json)
|
||||
config = {
|
||||
baseurl = "";
|
||||
meta = {
|
||||
title = "noIAA Livestream dings";
|
||||
description = "Die Workshops auf der noIAA Gegenkonferenz als Livestream";
|
||||
};
|
||||
videosrc = "https://cdn.media.ccc.de/congress/2019/h264-hd/36c3-11175-deu-eng-fra-Hirne_Hacken_hd.mp4";
|
||||
header = "Video dingsbums #noIAA";
|
||||
|
||||
irc = {
|
||||
webchat = "https://webchat.voc.hacc.space";
|
||||
# used for a fallback text in case js is disabled
|
||||
room = "#hacc-webchat";
|
||||
server = "irc.libera.chat";
|
||||
};
|
||||
|
||||
description = {
|
||||
title = "Dingsbeschreibung";
|
||||
text = ''
|
||||
<p>Lorem Ipsum dolor sit amet consecutetur ...</p>
|
||||
'';
|
||||
};
|
||||
|
||||
footer = {
|
||||
text = "für mehr <a href='https://ccc.de'>chaos</a> in der welt!";
|
||||
imprint = "lalala was ist ein Impressum?";
|
||||
};
|
||||
};
|
||||
}
|
||||
93
pkgs/haccvoc-stage/site/index.html
Normal file
93
pkgs/haccvoc-stage/site/index.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
---
|
||||
---
|
||||
<!doctype html>
|
||||
<html class="no-js" lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="x-ua-compatible" content="ie=edge">
|
||||
<title>{{ site.meta.title }}</title>
|
||||
<!-- TODO -->
|
||||
<meta name="description" content="{{ site.meta.description }}">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<!-- Place favicon.ico in the root directory -->
|
||||
|
||||
<link href="./video-js.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<!--[if lt IE 8]>
|
||||
<p class="browserupgrade">
|
||||
You are using an <strong>outdated</strong> browser. Please
|
||||
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
|
||||
your experience.
|
||||
</p>
|
||||
<![endif]-->
|
||||
|
||||
<header>
|
||||
<h1>{{ site.header }}</h1>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<div id="videocontainer">
|
||||
<video id="videoplayer" class="video-js" controls="" data-setup="{}">
|
||||
<source src="{{ site.videosrc }}"></source>
|
||||
<p>
|
||||
Hier sollte ein Video sein. Das scheint in deinem
|
||||
Browser allerdings irgendwie nicht zu funktionieren.
|
||||
</p>
|
||||
<p>
|
||||
Alternative kannst du dir den Livestream auch
|
||||
direkt ansehen (e.g. mit <pre>vlc</pre>
|
||||
oder <pre>mplayer</pre>): <pre>{{ site.videosrc }}</pre>
|
||||
</p>
|
||||
</video>
|
||||
</div>
|
||||
<script>
|
||||
var player = videojs("videoplayer");
|
||||
</script>
|
||||
</main>
|
||||
|
||||
<aside class="sidepanel">
|
||||
<div id="nojshint">
|
||||
<h2>Chat</h2>
|
||||
<p>
|
||||
Hi! Diese Seite benutzt normalerweise Javascript,
|
||||
um hier einen Chat anzuzeigen, aber in Deinem Browser
|
||||
funktioniert das offenbar nicht.
|
||||
</p>
|
||||
<p>
|
||||
Alternativ kannst Du dem Chat auch mit einem
|
||||
beliebigen IRC-Client beitreten:
|
||||
</p>
|
||||
<p style="margin-left: 1em;">
|
||||
<pre>{{ site.irc.room }}</pre> <br>
|
||||
auf <pre>{{ site.irc.server }}</pre>.
|
||||
</p>
|
||||
</div>
|
||||
<iframe id="chatiframe" style="display: none" src="{{ site.irc.webchat }}">
|
||||
</iframe>
|
||||
<script>
|
||||
chatiframe.style.display = "initial";
|
||||
nojshint.style.display = "none";
|
||||
</script>
|
||||
</aside>
|
||||
|
||||
<section id="stats">
|
||||
<h2>Geklatsche!</h2>
|
||||
<p>[TODO: insert stats, number of viewers, etc. here / remove this]</p>
|
||||
</section>
|
||||
|
||||
<section id="description">
|
||||
<h2>{{ site.description.title }}</h2>
|
||||
{{ site.description.text }}
|
||||
</section>
|
||||
|
||||
<footer>
|
||||
{{ site.footer.text }} | <a href="{{ site.footer.imprint }}">Impressum</a>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
<script src="./video.min.js"></script>
|
||||
</html>
|
||||
153
pkgs/haccvoc-stage/site/style.css
Normal file
153
pkgs/haccvoc-stage/site/style.css
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
display: grid;
|
||||
column-gap: 1em;
|
||||
grid-template-columns: auto 18em;
|
||||
padding-bottom: 5em;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
body {
|
||||
grid-template-columns: auto 20em;
|
||||
margin-left: 5em;
|
||||
margin-right: 5em;
|
||||
}
|
||||
.sidepanel {
|
||||
grid-row-end: 4 !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1500px) {
|
||||
body {
|
||||
grid-template-columns: auto 22vw;
|
||||
margin-left: 15vw;
|
||||
margin-right: 15vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: black;
|
||||
color: white;
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: 1px dashed gray !important;
|
||||
background-color: black !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
grid-row: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
main {
|
||||
/* height: 100%; */
|
||||
background-color: red;
|
||||
grid-row: 2;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
.sidepanel {
|
||||
float: left;
|
||||
min-height: 30em;
|
||||
grid-row-start: 2;
|
||||
grid-row-end: 5;
|
||||
grid-column: 2;
|
||||
border: 1px dashed gray;
|
||||
}
|
||||
|
||||
#stats {
|
||||
grid-row: 3;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
#description {
|
||||
grid-row: 4;
|
||||
grid-column: 1;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
border-top: 1px solid black;
|
||||
background-color: white;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
position: relative;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
main #videocontainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#videoplayer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
#nojshint {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 700px) {
|
||||
body {
|
||||
grid-template-columns: initial;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
header {
|
||||
grid-column: 1;
|
||||
}
|
||||
main {
|
||||
grid-row: 2;
|
||||
}
|
||||
.sidepanel {
|
||||
grid-row: 4;
|
||||
grid-column: 1;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
#stats {
|
||||
grid-row: 3;
|
||||
}
|
||||
#description {
|
||||
grid-row: 5;
|
||||
}
|
||||
section {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
footer {
|
||||
grid-row: 6;
|
||||
margin-top: 4em;
|
||||
display: grid;
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
1664
pkgs/haccvoc-stage/site/video-js.css
Normal file
1664
pkgs/haccvoc-stage/site/video-js.css
Normal file
File diff suppressed because one or more lines are too long
26
pkgs/haccvoc-stage/site/video.min.js
vendored
Normal file
26
pkgs/haccvoc-stage/site/video.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -4,6 +4,40 @@ let
|
|||
# necessary since overlays won't propagate into the
|
||||
# container's config
|
||||
thelounge = pkgs.thelounge-hacked;
|
||||
|
||||
website = import ../../../pkgs/haccvoc-stage {
|
||||
inherit pkgs;
|
||||
config = {
|
||||
baseurl = "";
|
||||
meta = {
|
||||
title = "noIAA Livestream dings";
|
||||
description = "Die Workshops auf der noIAA Gegenkonferenz als Livestream";
|
||||
};
|
||||
|
||||
# should be able to use anything videojs understands
|
||||
videosrc = "https://cdn.media.ccc.de/congress/2019/h264-hd/36c3-11175-deu-eng-fra-Hirne_Hacken_hd.mp4";
|
||||
header = "Video dingsbums #noIAA";
|
||||
|
||||
irc = {
|
||||
webchat = "https://webchat.voc.hacc.space";
|
||||
# used for a fallback text in case js is disabled
|
||||
room = "#hacc-webchat";
|
||||
server = "irc.libera.chat";
|
||||
};
|
||||
|
||||
description = {
|
||||
title = "Dingsbeschreibung";
|
||||
text = ''
|
||||
<p>Lorem Ipsum dolor sit amet consecutetur ...</p>
|
||||
'';
|
||||
};
|
||||
|
||||
footer = {
|
||||
text = "für mehr <a href='https://ccc.de'>chaos</a> in der welt!";
|
||||
imprint = "lalala was ist ein Impressum?";
|
||||
};
|
||||
};
|
||||
};
|
||||
in
|
||||
{
|
||||
containers.thelounge = {
|
||||
|
|
@ -83,4 +117,10 @@ in
|
|||
enableACME = true;
|
||||
forceSSL = true;
|
||||
};
|
||||
|
||||
services.nginx.virtualHosts."live.hacc.space" = {
|
||||
locations."/".root = website;
|
||||
enableACME = true;
|
||||
forceSSL = true;
|
||||
};
|
||||
}
|
||||
Loading…
Reference in a new issue