Merge pull request #52 from apiad/develop

apiad · web-flow · commit 4d29635a4492 · 2020-02-28T15:05:05.000+01:00
Merge latest development changes
diff --git a/auditorium/components.py b/auditorium/components.py
@@ -64,11 +64,12 @@ def begin(self):
         self.widths.pop(0)
 
     def tab(self):
-        self.ctx.content.append(f"</div>")
-        self.ctx.content.append(
-            f'<div class="column" style="width: {self.widths[0] * 100}%;">'
-        )
-        self.widths.pop(0)
+        if self.widths:
+            self.ctx.content.append(f"</div>")
+            self.ctx.content.append(
+                f'<div class="column" style="width: {self.widths[0] * 100}%;">'
+            )
+            self.widths.pop(0)
 
     def end(self):
         self.ctx.content.append("</div>")
diff --git a/auditorium/server.py b/auditorium/server.py
@@ -23,9 +23,16 @@
 @server.get("/")
 async def index():
     with open(path('templates/server.html')) as fp:
-        TEMPLATE = Template(fp.read())
+        return HTMLResponse(fp.read())
 
-    return HTMLResponse(TEMPLATE.render(servers_list=list(SERVERS)))
+
+@server.get("/_list/")
+async def list_servers():
+    return dict(
+        slides=[dict(
+            name=s
+        ) for s in SERVERS]
+    )
 
 
 @server.get("/{name}/")
diff --git a/auditorium/show.py b/auditorium/show.py
@@ -38,13 +38,15 @@ class UpdateData(BaseModel):
 
 
 class Show(FastAPI):
-    def __init__(self, title="", theme="white", code_style="monokai"):
+    def __init__(self, title="", theme="white", code_style="monokai", metadata=None, context_class=None):
         self.theme = theme
         self.formatter = HtmlFormatter(style=get_style_by_name(code_style))
 
         self._slides = {}
         self._sections = []
         self._tail = []
+        self._metadata = metadata or {}
+        self._context_class = context_class or Context
 
         self.app = FastAPI()
         self.app.get("/")(self._index)
@@ -279,14 +281,15 @@ async def _index(self, theme: str = "white"):
 
 
 class Context:
-    def __init__(self, slide_id, mode, show, values=None):
+    def __init__(self, slide_id, mode, show, values=None, metadata=None):
         self.content = []
         self.update = {}
         self.slide_id = slide_id
         self.unique_id = 0
         self.mode = mode
         self.values = values
         self.show = show
+        self.metadata = metadata
 
     ## Utility methods
 
@@ -446,7 +449,7 @@ def slide_id(self) -> str:
         return self._slide_id
 
     def run(self, mode, values=None) -> Context:
-        ctx = Context(self.slide_id, mode, self._show, values)
+        ctx = self._show._context_class(self.slide_id, mode, self._show, values, self._show._metadata.get(self.slide_id))
 
         if self._func.__doc__:
             ctx.markdown(self._func.__doc__)
diff --git a/auditorium/templates/server.html b/auditorium/templates/server.html
@@ -1,40 +1,135 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Auditorium</title>
+    <title>auditorium</title>
 
     <link href="https://fonts.googleapis.com/css?family=DM+Sans:300,400,700&display=swap" rel="stylesheet">
-    <link rel="stylesheet" href="static/css/server.css">
+    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+
 </head>
-<body>
 
-    <a class="fork-me" href="https://github.com/apiad/auditorium"><img width="149" height="149" src="https://github.blog/wp-content/uploads/2008/12/forkme_right_white_ffffff.png?resize=149%2C149" class="attachment-full size-full" alt="Fork me on GitHub" data-recalc-dims="1"></a>
+<body class="bg-gray-100 font-sans h-full">
+    <div id="app">
+
+        <div class="bg-blue-900 text-gray-100 py-6 px-20">
+            <h1 class="text-4xl font-semibold text-center">auditorium</h1>
+            <h2 class="text-2xl text-center leading-tight">A Python-powered slideshow generator with steroids</h2>
+
+            <a href="https://github.com/apiad/auditorium" class="github-corner absolute top-0 right-0 fill-current"
+                aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true">
+                    <path class="text-blue-700" d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
+                    <path
+                        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+                        style="transform-origin: 130px 106px;" class="octo-arm"></path>
+                    <path
+                        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+                        class="octo-body"></path>
+                </svg>
+            </a>
+        </div>
+
+        <div class="max-w-screen-lg mx-auto mb-24">
+            <h3 class="p-4 text-xl text-blue-900">
+                What's this?
+            </h3>
 
-    <div class="main">
-        <div class="hero">
+            <p class="px-4 text-lg text-gray-800">
+                <span class="font-mono">auditorium</span>
+                is a Python-powered slide generator. You write pure Python code and
+                <span class="font-mono">auditorium</span>
+                renders and serves a beautiful HTML slideshow.
+            </p>
 
-            <h1>Auditorium</h1>
-            <h2>A Python-powered slideshow generator with steroids</h2>
+            <h3 class="px-4 py-8 text-xl text-blue-900">The following slides are currently running:</h3>
 
+            <div class="flex flex-wrap w-full justify-center px-4">
+                <button @click="goto(slide)"
+                    class="relative p-2 border text-blue-800 bg-white hover:shadow-lg hover:text-gray-100 hover:bg-blue-600 cursor-pointer w-72 h-48 m-2 flex-shrink-0"
+                    v-for="slide in slides">
+                    <iframe class="mb-1" :src="slide.name" frameborder="0"></iframe>
+                    <span class="mx-auto font-semibold">{{ slide.name }}</span>
+                </button>
+            </div>
         </div>
-    </div>
 
-    <div class="section">
-        <h3>The following slideshows have been registered:</h3>
-        <ul>
-            {% for name in servers_list %}
-            <li>
-                <a href="/{{ name }}/">{{ name }}</a>
-            </li>
-            {% endfor %}
-        </ul>
+        <div class="fixed bottom-0 p-4 flex bg-blue-900 w-full">
+            <div class="mx-auto text-gray-100">
+                Copyright 2020
+                <span class="mx-2">
+                    &bullet;
+                </span>
+                <a class="font-semibold hover:underline" href="http://auditorium.apiad.net">auditorium.apiad.net</a>
+            </div>
+        </div>
     </div>
 
-    <div class="footer">
-        Copyright 2020 - <a href="http://auditorium.apiad.net">auditorium.apiad.net</a>
-    </div>
+
 </body>
+
+<script>
+    var vm = new Vue({
+        el: "#app",
+        data: {
+            slides: []
+        },
+        methods: {
+            goto(slide) {
+                window.location = slide.name;
+            }
+        }
+    });
+
+    setInterval(() => {
+        fetch("./_list/").then(res => {
+            return res.json();
+        }).then(data => {
+            console.log(data);
+            vm.slides = data.slides;
+        });
+    }, 1000);
+</script>
+
+<style>
+    .github-corner:hover .octo-arm {
+        animation: octocat-wave 560ms ease-in-out
+    }
+
+    iframe {
+        pointer-events: none;
+    }
+
+    @keyframes octocat-wave {
+
+        0%,
+        100% {
+            transform: rotate(0)
+        }
+
+        20%,
+        60% {
+            transform: rotate(-25deg)
+        }
+
+        40%,
+        80% {
+            transform: rotate(10deg)
+        }
+    }
+
+    @media (max-width:500px) {
+        .github-corner:hover .octo-arm {
+            animation: none
+        }
+
+        .github-corner .octo-arm {
+            animation: octocat-wave 560ms ease-in-out
+        }
+    }
+</style>
+
 </html>
