Update Blog “2020-06-30-kalkspace-goes-bigbluebutton” (#42)

* Update Blog “2020-06-30-kalkspace-goes-bigbluebutton”

* Update Blog “2020-06-30-kalkspace-goes-bigbluebutton”

* Limit size of images in blog posts

* Fix overflow of intro heading

* Support special characters in blog titles

* Auto-format

* Break long word in blog post title

Co-authored-by: Marcus Weiner <marcus.weiner@gmail.com>

assets/styles/blog.scss

@@ -29,4 +29,8 @@
 
 .blog-content {
     min-height: 45vh;
+
+    img {
+        max-width: 100%;
+    }
 }

assets/styles/intro.scss

@@ -14,11 +14,13 @@
     }
 
     h1 {
+        overflow-wrap: break-word;
+
         small {
             font-size: 50%;
         }
         @media (max-width: map-get($grid-breakpoints, md)) {
-            font-size: 3rem;
+            font-size: 2.5rem;
         }
     }
 

config.toml

@@ -3,4 +3,4 @@ title = "KalkSpace"
 
 [permalinks]
 pages = ":slug/"
-blog = "/blog/:year/:month/:title/"
+blog = "/blog/:year/:month/:slug/"

content/blog/2020-06-30-kalkspace-goes-bigbluebutton.md

@@ -1,11 +1,15 @@
 ---
-title: KalkSpace goes BigBlueButton
+title: KalkSpace goes BigBlue­Button
+slug: kalkspace-goes-bigbluebutton
 date: 2020-06-30T00:00:00.000Z
 ---
+
 **tldr: wir haben eine BigBlueButton-Instanz aufgesetzt und ihr könnt sie benutzen: [bbb.kalk.space](https://bbb.kalk.space)**
 
 Wie so viele Menschen haben wir uns in den letzten Wochen in vielen Video- und Telefonkonferenzen rumgetrieben. Auch unsere Vereinsaktivität hat sich ins Internet verlagert. Irgendwie sind wir dann über BigBlueButton gestolpert (danke @ divoc und meeten.statt-drosseln.de!) und dachten: das wollen wir auch!
 
+![](/images/uploads/bildschirmfoto-von-2020-06-10-21-18-06.png)
+
 BigBlueButton ist open source, ein Link reicht, um es benutzen zu können, es lässt sich datensparsam einrichten, und es HAT EIN WHITEBOARD, AUF DEM ZUSAMMEN RUMGEMALT WERDEN KANN!
 
 Ja, BigBlueButton ist nicht perfekt, aber in einigen Punkten schon cool. Und so begab es sich, dass sich drei Menschen verabredeten, um das mal zu besprechen. Am Ende der „Besprechung“ gab es dann eine Test-Instanz, die benutzbar war. Und dann ging das Graben in den Einstellungen los. Zwar gibt es tollerweise eine ziemlich [ausführliche Doku](https://docs.bigbluebutton.org) zum Aufsetzen und Konfigurieren, leider haben wir trotzdem immer wieder geloggte Daten gefunden, die nicht da sein sollten. Die Herausforderung haben wir angenommen, ganz durch sind wir noch nicht, aber es wird…
@@ -20,6 +24,12 @@ Sollte sich zeigen, dass der Bedarf größer ist als unsere bisherigen Serverkap
 
 ## Der Server und deine Daten
 
-Da wir im KalkSpace kein eigenes Rechenzentrum betreiben, wohnt unser BigBlueButton auf einem Hetzner-Server in Deutschland. Aktuell läuft er mit 3 CPUs mit 4 GB RAM, kann aber auch kurzfristig hoch (und wieder runter) skaliert werden. Nach der Installation haben wir folgende Privacy-relevanten Anpassungen vorgenommen: Da es (aktuell) nicht möglich ist, dass tatsächlich nur aufgezeichnet wird, wenn diese Funktion bewusst ausgewählt wird, haben wir das Recording komplett ausgeschaltet. Logging haben wir ebenfalls ausgeschaltet bzw. auf Error-Meldungen begrenzt. Unverschlüsselter Zugriff über http ist unterbunden.
+Da wir im KalkSpace kein eigenes Rechenzentrum betreiben, wohnt unser BigBlueButton auf einem Hetzner-Server in Deutschland. Aktuell läuft er mit 3 CPUs mit 4 GB RAM, kann aber auch kurzfristig hoch (und wieder runter) skaliert werden.
+
+Nach der Installation haben wir folgende Privacy-relevanten Anpassungen vorgenommen:
+
+- Da es (aktuell) nicht möglich ist, dass tatsächlich nur aufgezeichnet wird, wenn diese Funktion bewusst ausgewählt wird, haben wir das Recording komplett ausgeschaltet.
+- Logging haben wir ebenfalls ausgeschaltet bzw. auf Error-Meldungen begrenzt.
+- Unverschlüsselter Zugriff über http ist unterbunden.
 
-Viel Spaß beim Videofonieren :leichtes_lächeln:
+Viel Spaß beim Videofonieren :leichtes_lächeln:

layouts/blog/list.html

@@ -27,10 +27,10 @@ <h3 class="pt-5 pb-3 text-center">Hier findest du alle unsere Blog-Einträge</h3
     {{ range $index, $post := .Pages }}
 
             {{ $url := urls.Parse .Permalink }}
-            <a class="blog-teaser" title="{{.Title}}" href="{{ $url.Path }}">
+            <a class="blog-teaser" title="{{.Title | htmlUnescape }}" href="{{ $url.Path }}">
             <img src="/img/cats/sticker{{add (mod $index 5) 1}}.png">
             <span class="blog-date">{{.Date.Format "02.01.2006"}}</span>
-            <h4>{{.Title}}</h4>
+            <h4>{{.Title | htmlUnescape}}</h4>
             </a>
 
     {{ end }}

layouts/blog/single.html

@@ -1,6 +1,6 @@
 {{ define "left-intro" }}
 <div class="pl-3 pl-lg-5">
-    <h1>{{ .Title }}</h1>
+    <h1>{{ .Title | htmlUnescape }}</h1>
     <span>{{ .Date.Format "02.01.2006" }}</span>
 </div>
 {{ end }}
@@ -14,7 +14,7 @@ <h1>{{ .Title }}</h1>
 {{ define "content" }}
     <div class="container pt-md-5 my-5 blog-content">
         {{ .Content }}
-        {{ partial "comments" . }} 
+        {{ partial "comments" . }}
         <a href="/blog" title="unser Blog">zurück zur Übersicht</a>
     </div>
 {{ end }}