From 681bd55b93ca9115e2a9f50181a42fdd5dd8305e Mon Sep 17 00:00:00 2001
From: Eduardo Trujillo <ed@chromabits.com>
Date: Mon, 15 Feb 2016 02:29:00 -0500
Subject: [PATCH] WIP
---
about.html | 4 +-
css/app.css | 6 +++
...016-02-15-serving-hakyll-site-with-warp.md | 51 +++++++++++++++++++
scss/_headers.scss | 4 ++
scss/app.scss | 4 ++
server.hs | 13 +++--
templates/default.html | 2 +-
7 files changed, 78 insertions(+), 6 deletions(-)
create mode 100644 drafts/2016-02-15-serving-hakyll-site-with-warp.md
diff --git a/about.html b/about.html
index 326b795..85a05fd 100644
--- a/about.html
+++ b/about.html
@@ -9,7 +9,7 @@ title: About
</div>
<div class="row">
- <div class="medium-8 columns">
+ <div class="small-12 medium-8 columns">
<p>
My name is Eduardo Trujillo (Thru-he-yoh). I'm a Computer Scientist living
in Athens, GA. (University of Georgia).
@@ -35,7 +35,7 @@ title: About
</p>
</div>
- <div class="medium-4 columns">
+ <div class="small-12 medium-4 columns">
<img src="/images/avatar.jpeg"></img>
</div>
</div>
diff --git a/css/app.css b/css/app.css
index ecad219..dec1b0a 100644
--- a/css/app.css
+++ b/css/app.css
@@ -5061,6 +5061,9 @@ h1.cardboard {
font-weight: bold;
padding: 0;
line-height: 3.75rem; }
+ @media screen and (max-width: 39.9375em) {
+ h1.cardboard {
+ line-height: 1.5rem; } }
h1.cardboard span {
transition: all 0.3s ease;
position: relative;
@@ -5132,6 +5135,9 @@ figcaption {
.wf-loading h1, .wf-loading p {
visibility: hidden; }
+.inline-block {
+ display: inline-block; }
+
@media screen and (min-width: 40em) {
.masonry {
-webkit-column-count: 3;
diff --git a/drafts/2016-02-15-serving-hakyll-site-with-warp.md b/drafts/2016-02-15-serving-hakyll-site-with-warp.md
new file mode 100644
index 0000000..c0a558b
--- /dev/null
+++ b/drafts/2016-02-15-serving-hakyll-site-with-warp.md
@@ -0,0 +1,51 @@
+---
+title: Serving a Hakyll site with Warp/Wai
+date: Mon Feb 15 02:00:00 EDT 2016
+author: Eduardo Trujillo
+uuid: 16b3b144-0fb7-422c-a31e-0fca75e28206
+---
+
+Working with Hakyll has been great so far, but it seems the fun ends right after your site is generated and copied over to the remote server. From there, you have to deal with Nginx or Apache configuration files to give the final touches to the site, such as redirections, cache policies and additional headers.
+
+I've seen applications, such as XMonad, which employ Haskell scripts in-lieu of configuration files, and it's generally an enjoyable experience due to the added flexibility and customization it provides.
+
+With that in mind, wouldn't it be nice if the web server was in Haskell as well? After all, Hakyll has a preview function that works well enough. So it shouldn't be too hard to replicate that and add some custom logic on top of it.
+
+Well, that's exactly what I was wondering in the past few days, and (perhaps not too) surprisingly, it only took half a day's worth of work to get a working prototype.
+
+To get the job done, I added a new target to my Hakyll project, and included Warp, wai-static-app, and a bunch of WAI middleware as dependencies. The rest was merely a process of putting all the pieces together and ensuring the site behaved as expected.
+
+## The result
+
+* A fast static site server.
+* Support for HTTP 2.0
+* Customized configurations for production, staging, and development.
+* A more complete solution than `'hakyll preview`, since the site behaves exactly like it would on production.
+* A clear path for adding more logic in the future (API, Proxy, etc).
+
+The server code is a few orders of magnate larger than a simple configuration file, but it's also under 200 lines of code.
+
+> server code
+
+## Lets dive in!
+
+Now let's dive into the details:
+
+### forkIO
+
+forkIO was one of the most interesting things I encountered while writing the server, and it also one of the last.
+
+If you are writing a server to run on a single port, you don't generally stop and ask yourself how you would modify it to run on multiple port simultaneously.
+
+Well, if you expect your site to use TLS and HTTP 2.0, you will most likely want to also redirect users from the insecure site to the secure one. This means you will need to listen on both, ports 80 and 443.
+
+My initial approach to this was very naive. I concluded that I could simply just run two servers by passing a flag at startup. However, this seemed cumbersome and error-prone.
+
+The real solution lead to learn a new part of Haskell that I had largely ignore before: Concurrency.
+
+I was please to find that `forkIO` allows you to create a lightweight thread that can execute another `IO ()` function.
+
+With it, I was able to spawn both servers at the same time:
+
+> Example
+
diff --git a/scss/_headers.scss b/scss/_headers.scss
index eba8716..f726c47 100644
--- a/scss/_headers.scss
+++ b/scss/_headers.scss
@@ -10,6 +10,10 @@ h1 {
padding: rem-calc(0);
line-height: rem-calc(60);
+ @include breakpoint(small down) {
+ line-height: 1.5rem;
+ }
+
span {
transition: all 0.3s ease;
position: relative;
diff --git a/scss/app.scss b/scss/app.scss
index cfa75d3..d45ca07 100644
--- a/scss/app.scss
+++ b/scss/app.scss
@@ -104,6 +104,10 @@ figcaption {
visibility: hidden;
}
+.inline-block {
+ display: inline-block;
+}
+
@include breakpoint(medium) {
.masonry {
column-count: 3;
diff --git a/server.hs b/server.hs
index 16fed35..174d9d6 100644
--- a/server.hs
+++ b/server.hs
@@ -65,12 +65,18 @@ domainMiddleware = forceDomain
-- | Common headers middleware.
headersMiddleware :: Middleware
headersMiddleware = addHeaders
- [ ("Strict-Transport-Security", "max-age=31536000; includeSubdomains")
- , ("X-Frame-Options", "SAMEORIGIN")
+ [ ("X-Frame-Options", "SAMEORIGIN")
, ("X-XSS-Protection", "1; mode=block")
, ("X-Content-Type-Options", "nosniff")
]
+-- | Strict Transport Security middleware.
+stsHeadersMiddleware :: Middleware
+stsHeadersMiddleware = addHeaders
+ [("Strict-Transport-Security", "max-age=31536000; includeSubdomains")]
+
+-- | Content Security Policy middleware.
+-- Here we add the CSP header which includes the policies for this blog.
cspHeadersMiddleware :: Middleware
cspHeadersMiddleware = addHeaders
[("Content-Security-Policy", TE.encodeUtf8 $ glue policies)]
@@ -158,6 +164,7 @@ main = do
$ cspHeadersMiddleware
$ headersMiddleware
$ domainMiddleware
+ $ forceSSL
$ deindexifyMiddleware
$ gzipMiddleware
$ staticSite path
@@ -167,7 +174,7 @@ main = do
case fromMaybe "dev" stage of
-- "Production"
"live" -> do
- forkIO $ listenTLS 443 liveMiddleware
+ forkIO $ listenTLS 443 $ stsHeadersMiddleware liveMiddleware
listen 80 liveMiddleware
"staging" -> do
forkIO $ listenTLS 8443 liveMiddleware
diff --git a/templates/default.html b/templates/default.html
index a2d9ebb..5197471 100644
--- a/templates/default.html
+++ b/templates/default.html
@@ -39,7 +39,7 @@
<li><a href="/about">About</a></li>
<li><a href="/">Home</a></li>
</ul>
- <ul class="menu vertical show-for-small-only">
+ <ul class="menu inline-block show-for-small-only">
<li><a href="/archive">Archive</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/about">About</a></li>
--
GitLab