aboutgitcodebugslistschat
diff options
context:
space:
mode:
-rw-r--r--README.md119
-rw-r--r--doc/ci.html19
-rw-r--r--doc/demo_passt.html19
-rw-r--r--doc/demo_pasta.html19
-rw-r--r--doc/demo_podman.html19
-rwxr-xr-xhooks/pre-push1
6 files changed, 161 insertions, 35 deletions
diff --git a/README.md b/README.md
index 45f9e51..cd4caa3 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,45 @@ Author: Stefano Brivio <sbrivio@redhat.com>
<span style="font-weight: bold; color: red;">While functional and tested to some extent, this project is still in early development phase: don't use in production or critical environments yet.</span>
+<style scoped>
+.mobile_hide {
+ visibility: hidden;
+ display: none;
+}
+img {
+ visibility: hidden;
+ display: none;
+}
+li {
+ margin: 10px;
+}
+
+@media only screen and (min-width: 768px) {
+ .mobile_hide {
+ visibility: visible;
+ display: inherit;
+ }
+ img {
+ visibility: visible;
+ display: inherit;
+ }
+ li {
+ margin: 0px;
+ }
+}
+
+.mobile_show {
+ visibility: visible;
+ display: inherit;
+}
+@media only screen and (min-width: 768px) {
+ .mobile_show {
+ visibility: hidden;
+ display: none;
+ }
+}
+</style>
+
# passt: Plug A Simple Socket Transport
_passt_ implements a translation layer between a Layer-2 network interface and
@@ -13,12 +52,13 @@ native Layer-4 sockets (TCP, UDP, ICMP/ICMPv6 echo) on a host. It doesn't
require any capabilities or privileges, and it can be used as a simple
replacement for Slirp.
+<div class="mobile_hide">
<picture>
<source type="image/webp" srcset="/builds/latest/web/passt_overview.webp">
<source type="image/png" srcset="/builds/latest/web/passt_overview.png">
<img src="/builds/latest/web/passt_overview.png" usemap="#image-map" class="bright" style="z-index: 20; position: relative;" alt="Overview diagram of passt">
</picture>
-<map name="image-map" id="map_overview">
+<map name="image-map" id="map_overview" class="mobile_hide">
<area class="map_area" target="_blank" href="https://man7.org/linux/man-pages/man7/tcp.7.html" coords="229,275,246,320,306,294,287,249" shape="poly">
<area class="map_area" target="_blank" href="https://lwn.net/Articles/420799/" coords="230,201,243,246,297,232,289,186" shape="poly">
<area class="map_area" target="_blank" href="https://man7.org/linux/man-pages/man7/udp.7.html" coords="234,129,236,175,297,169,293,126" shape="poly">
@@ -50,6 +90,7 @@ replacement for Slirp.
<area class="map_area" target="_blank" href="/passt/tree/conf.c" coords="989,294,1040,264,1089,280,986,344" shape="poly">
</map>
<canvas id="map_highlight" style="border: 0px; z-index: 10; position: fixed; pointer-events: none"></canvas>
+</div>
<script>
function canvas_position(el) {
var rect = el.getBoundingClientRect();
@@ -116,11 +157,13 @@ destination address are moved directly between Layer-4 sockets, avoiding Layer-2
translations, using the _splice_(2) and _recvmmsg_(2)/_sendmmsg_(2) system calls
for TCP and UDP, respectively.
+<div class="mobile_hide">
<picture>
<source type="image/webp" srcset="/builds/latest/web/pasta_overview.webp">
<source type="image/png" srcset="/builds/latest/web/pasta_overview.png">
<img src="/builds/latest/web/passt_overview.png" class="bright" style="z-index: 20; position: relative;" alt="Overview diagram of pasta">
</picture>
+</div>
- [Motivation](#motivation)
- [Features](#features)
@@ -408,56 +451,62 @@ is fully configurable with command line options.
<link rel="stylesheet" type="text/css" href="/static/asciinema-player.css" />
<script src="/static/asciinema-player.min.js"></script>
-<style scoped>
-.small_video {
-}
-@media (min-width: 1500px) {
- .small_video {
- display: grid;
- grid-template-columns: 1fr 1fr;
- }
-}
-</style>
-<div class="small_video">
+<div class="mobile_hide" id="demo_pasta_div" style="display: grid; grid-template-columns: 1fr 1fr;">
<div id="demo_pasta" style="width: 99%;"></div>
<div id="demo_podman" style="width: 99%;"></div>
</div>
<script>
-demo_pasta_player = AsciinemaPlayer.create('/builds/latest/web/demo_pasta.cast',
- document.getElementById('demo_pasta'),
- { cols: 130, rows: 41,
- preload: true, poster: 'npt:0:4'
- });
-
-demo_podman_player = AsciinemaPlayer.create('/builds/latest/web/demo_podman.cast',
- document.getElementById('demo_podman'),
- { cols: 130, rows: 41,
- preload: true, poster: 'npt:0:4'
- });
+if (getComputedStyle(document.getElementById('demo_pasta_div'))['visibility'] == "visible") {
+ demo_pasta_player = AsciinemaPlayer.create('/builds/latest/web/demo_pasta.cast',
+ document.getElementById('demo_pasta'),
+ { cols: 130, rows: 41,
+ preload: true, poster: 'npt:0:4'
+ });
+
+ demo_podman_player = AsciinemaPlayer.create('/builds/latest/web/demo_podman.cast',
+ document.getElementById('demo_podman'),
+ { cols: 130, rows: 41,
+ preload: true, poster: 'npt:0:4'
+ });
+}
</script>
+<div class="mobile_show">
+ <p><a href="/builds/latest/web/demo_pasta.html">Overview of pasta functionality</a></p>
+ <p><a href="/builds/latest/web/demo_podman.html">Overview of Podman operation with pasta</a></p>
+</div>
### passt
-<div id="demo_passt" style="width: 70%; height: auto; max-height: 90%"></div>
+<div class="mobile_hide" id="demo_passt" style="width: 70%; height: auto; max-height: 90%"></div>
<script>
-demo_passt_player = AsciinemaPlayer.create('/builds/latest/web/demo_passt.cast',
- document.getElementById('demo_passt'),
- { cols: 130, rows: 41,
- preload: true, poster: 'npt:0:4'
- });
+if (getComputedStyle(document.getElementById('demo_passt'))['visibility'] == "visible") {
+ demo_passt_player = AsciinemaPlayer.create('/builds/latest/web/demo_passt.cast',
+ document.getElementById('demo_passt'),
+ { cols: 130, rows: 41,
+ preload: true, poster: 'npt:0:4'
+ });
+}
</script>
+<div class="mobile_show">
+ <p><a href="/builds/latest/web/demo_passt.html">Overview of passt functionality</a></p>
+</div>
## Continuous Integration
-<div id="ci" style="width: 90%; height: auto; max-height: 90%"></div>
+<div class="mobile_hide" id="ci" style="width: 90%; height: auto; max-height: 90%"></div>
<script>
-ci_player = AsciinemaPlayer.create('/builds/latest/web/ci.cast',
- document.getElementById('ci'),
- { cols: 240, rows: 51, poster: 'npt:999:0' }
- );
+if (getComputedStyle(document.getElementById('ci'))['visibility'] == "visible") {
+ ci_player = AsciinemaPlayer.create('/builds/latest/web/ci.cast',
+ document.getElementById('ci'),
+ { cols: 240, rows: 51, poster: 'npt:999:0' }
+ );
+}
</script>
-<div><script src="/builds/latest/web/ci.js"></script></div>
+<div class="mobile_hide"><script src="/builds/latest/web/ci.js"></script></div>
+<div class="mobile_show">
+ <p><a href="/builds/latest/web/ci.html">Continuous integration test run</a></p>
+</div>
Test logs [here](/builds/latest/test/).
diff --git a/doc/ci.html b/doc/ci.html
new file mode 100644
index 0000000..46a6e48
--- /dev/null
+++ b/doc/ci.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>Continuous integration test run</title>
+<link rel="stylesheet" type="text/css" href="/static/asciinema-player.css" />
+<script src="/static/asciinema-player.min.js"></script>
+</head>
+<body style="margin: 0">
+<div id="ci" style="height: 100vh; width: 100vw"></div>
+<script>
+AsciinemaPlayer.create('/builds/latest/web/ci.cast',
+ document.getElementById('ci'),
+ { cols: 240, rows: 51, fit: "both",
+ preload: true, poster: 'npt:0:4'
+ });
+</script>
+</body>
+</html>
diff --git a/doc/demo_passt.html b/doc/demo_passt.html
new file mode 100644
index 0000000..1cef904
--- /dev/null
+++ b/doc/demo_passt.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>demo: Overview of passt functionality</title>
+<link rel="stylesheet" type="text/css" href="/static/asciinema-player.css" />
+<script src="/static/asciinema-player.min.js"></script>
+</head>
+<body style="margin: 0">
+<div id="demo_passt" style="height: 100vh; width: 100vw"></div>
+<script>
+AsciinemaPlayer.create('/builds/latest/web/demo_passt.cast',
+ document.getElementById('demo_pasta'),
+ { cols: 130, rows: 41, fit: "both",
+ preload: true, poster: 'npt:0:4'
+ });
+</script>
+</body>
+</html>
diff --git a/doc/demo_pasta.html b/doc/demo_pasta.html
new file mode 100644
index 0000000..dc4101b
--- /dev/null
+++ b/doc/demo_pasta.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>demo: Overview of pasta functionality</title>
+<link rel="stylesheet" type="text/css" href="/static/asciinema-player.css" />
+<script src="/static/asciinema-player.min.js"></script>
+</head>
+<body style="margin: 0">
+<div id="demo_pasta" style="height: 100vh; width: 100vw"></div>
+<script>
+AsciinemaPlayer.create('/builds/latest/web/demo_pasta.cast',
+ document.getElementById('demo_pasta'),
+ { cols: 130, rows: 41, fit: "both",
+ preload: true, poster: 'npt:0:4'
+ });
+</script>
+</body>
+</html>
diff --git a/doc/demo_podman.html b/doc/demo_podman.html
new file mode 100644
index 0000000..33cd9e8
--- /dev/null
+++ b/doc/demo_podman.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8"/>
+<title>demo: Overview of Podman operation with pasta</title>
+<link rel="stylesheet" type="text/css" href="/static/asciinema-player.css" />
+<script src="/static/asciinema-player.min.js"></script>
+</head>
+<body style="margin: 0">
+<div id="demo_podman" style="height: 100vh; width: 100vw"></div>
+<script>
+AsciinemaPlayer.create('/builds/latest/web/demo_podman.cast',
+ document.getElementById('demo_podman'),
+ { cols: 130, rows: 41, fit: "both",
+ preload: true, poster: 'npt:0:4'
+ });
+</script>
+</body>
+</html>
diff --git a/hooks/pre-push b/hooks/pre-push
index 73dac94..678ca29 100755
--- a/hooks/pre-push
+++ b/hooks/pre-push
@@ -62,6 +62,7 @@ for pic in passt_overview pasta_overview; do
cwebp -preset drawing -q 10 "doc/${pic}.png" -o "doc/${pic}.webp"
scp "doc/${pic}.png" "doc/${pic}.png" "${USER_HOST}:${WEB}/"
done
+scp doc/*.html "${USER_HOST}:${WEB}/"
ssh "${USER_HOST}" "mv ${LATEST} ${AWAY}"
ssh "${USER_HOST}" "mv ${TEMP} ${LATEST}"