From 297c6dbf5d9b023d86728f3c4f1bfe059a905de2 Mon Sep 17 00:00:00 2001
From: Ariejan de Vroom <ariejan@devroom.io>
Date: Tue, 17 Mar 2020 10:07:37 +0100
Subject: [PATCH] add test flutter on drone post + css tweaks

---
 .../2020-03-17-test-flutter-on-drone-ci.md    | 44 +++++++++++++++++++
 themes/devroom-2020/assets/scss/devroom.scss  | 21 +++++++--
 2 files changed, 61 insertions(+), 4 deletions(-)
 create mode 100644 content/posts/2020-03-17-test-flutter-on-drone-ci.md

diff --git a/content/posts/2020-03-17-test-flutter-on-drone-ci.md b/content/posts/2020-03-17-test-flutter-on-drone-ci.md
new file mode 100644
index 0000000..ba13f82
--- /dev/null
+++ b/content/posts/2020-03-17-test-flutter-on-drone-ci.md
@@ -0,0 +1,44 @@
++++
+date = "2020-03-17"
+title = "Test Flutter on Drone CI"
+tags = ["drone", "flutter", "ci"]
+description = "This is a short post that shows how to use cirruslabs' flutter docker image to run your flutter tests on Drone CI."
++++
+
+_This post is specific to [Drone CI][drone], but is probably easily adoptable to other CI systems, like Gitlab._
+
+[Flutter][flutter] is UI library based on [Dart][dart] to create beautiful, natively compiled applications for mobile. Web and desktop targets are also in the works. 
+
+Recently I've been playing around with Flutter and Dart. As a backend engineer I have to say I quite like it. Dart is a breeze to work with, the static typing helps a lot. Flutter itself offers a react-like way of structuring your app, but it runs natively on Android and iOS. At [Kabisa][kabisa] we're in the process of adopting Flutter as our go-to solution for cross platform mobile apps.
+
+Anyway, one of the first things I do is hook a new project up with my CI, currently [Drone CI][drone]. I started looking for
+an already published docker image that contains the latest flutter-stable installation. I soon found [cirruslabs/docker-images-flutter][cl-flutter],
+but ran into an permission error. Turns out [I'm not the only one][cl-issues], but with a few simple steps you can test your flutter app with this image on Drone CI without issue.
+
+`.drone.yml`:
+
+```yaml
+kind: pipeline
+name: default
+
+steps:
+- name: test
+  image: cirrusci/flutter:stable
+  commands:
+    - sudo chown -R cirrus:cirrus .
+    - flutter doctor
+    - flutter test
+```
+
+The magic is the `sudo chown -R cirrus:cirrus .`. The flutter docker images are based on Cirrus Labs' android SDK images, which runs
+commands as the `cirrus` user. This will change permissions and the flutter commands can now run without issue. 
+
+Any next steps in your pipeline will encounter files owned by `cirrus`. Since most drone plugins and images run as `root` anyway, this is not much of and issue. You could add another command to the snippet above to reset permissions back to `root`. 
+
+Note that I'm using `cirrusci/flutter:stable`. They've also got images available for `beta` and `dev`, just use the appropriate tag.
+
+[flutter]: https://flutter.dev/
+[drone]: https://drone.io/
+[dart]: https://dart.dev/
+[cl-flutter]: https://github.com/cirruslabs/docker-images-flutter
+[kabisa]: https://www.kabisa.nl
\ No newline at end of file
diff --git a/themes/devroom-2020/assets/scss/devroom.scss b/themes/devroom-2020/assets/scss/devroom.scss
index e1a1f3b..10b074f 100644
--- a/themes/devroom-2020/assets/scss/devroom.scss
+++ b/themes/devroom-2020/assets/scss/devroom.scss
@@ -20,19 +20,32 @@ html, body {
 pre, code {
     font-family: 'IBM Plex Mono', monospace;
     font-size: $font_size;
+    color: $footer;
+}
+
+pre > code {
+    overflow-wrap: normal;
+    white-space: pre;
+    color: $text;
 }
 
 pre {
     background-color: $background !important;
-    margin-left: 2rem;
+    margin-left: 2.5rem;
     overflow-x: auto;
     overflow-y: hidden;
     line-height: 1.25rem;
 }
 
-pre code {
-    overflow-wrap: normal;
-    white-space: pre;
+pre::before {
+    display: block;
+    content: "```";
+    color: $footer;
+}
+pre::after {
+    display: block;
+    content: "```";
+    color: $footer;
 }
 
 .container {