diff --git a/about.html b/about.html index 326b795b56d136abff8c110b7f9d039fce71ebc9..85a05fd95948d925497846e8d9dc8e701aeea3d8 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 ecad21973b3ed965387be400526fdbd387d525d4..dec1b0acf5311010026f7760bc500da235317fe2 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 0000000000000000000000000000000000000000..c0a558b9e98c381cbb1729b239f5e6b0bc3e1dc0 --- /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 eba8716ef17339b2ac43749d28991db284447236..f726c47638780d03c2c936db503d04ad5911b6e0 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 cfa75d3b99037d700a8cecbab126d26a4c4ada18..d45ca07cd64b46a2757616a64f9c36e1f0b3fe9f 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 16fed357a518a027bd4efbd3e41cd1c0dcf4b894..174d9d6fbd1db77eb1b7eb81dee987d137c347ed 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 a2d9ebb17e5a4dba5e165ea93934ed40daeaa7fe..5197471025d984bcc5b8151f61855911e0f576e7 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>