Initial version of site almost ready.

Bibtex.hs

@@ -11,7 +11,7 @@
 -- Modified    :  JH: Use just the bibtex parser
 -----------------------------------------------------------------------------
 
-module Text.CSL.Input.Bibtex
+module Bibtex
     (
       bibEntries
     , resolveCrossRefs

HakyllBibTex.hs

@@ -17,7 +17,7 @@ import           Control.Applicative
 import           Data.Binary              (Binary (..))
 import           Data.Typeable            (Typeable)
 import           Hakyll
-import qualified Text.CSL.Input.Bibtex    as B
+import qualified Bibtex                   as B
 import qualified Text.Pandoc              as Pandoc
 import qualified Text.Parsec              as Parsec
 

bibs/header.bib

@@ -397,7 +397,8 @@
 @STRING{vmcai13  = vmcai # ", Rome, Italy" }
 
 % ----
-@STRING{csf      = "{IEEE} {C}omputer {S}ecurity {F}oundations {S}ymposium" }
+@STRING{csf      = "{IEEE} {C}omputer {S}ecurity {F}oundations {S}ymposium
+                   ({CSF})" }
 @STRING{csf08    = csf # ", Pittsburgh, Pennsylvania" }
 @STRING{csf13    = csf # ", New Orleans, Louisiana" }
 @STRING{csf14    = csf # ", Vienna, Austria" }

bibs/myrefs.bib

@@ -471,7 +471,7 @@
   url       = {http://arxiv.org/abs/0803.0032}
 }
 
-@inproceedings{HGH+13,
+@inproceedings{HGH+14,
   author    = {Justin Hsu and
                Marco Gaboardi and
                Andreas Haeberlen and
@@ -1518,7 +1518,6 @@ year = {2014}
   year      = {2014},
   url       = {http://arxiv.org/abs/1402.1526},
   jh        = yes,
-  slides    = yes,
   poster    = yes,
   eprint    = yes
 }

content/about.md

@@ -0,0 +1,21 @@
+I am a graduate student in the [Department of Computer
+Science](http://cis.upenn.edu) at the [University of
+Pennsylvania](http://upenn.edu).
+There, I am associated with the [Theory Group](http://theory.cis.upenn.edu), the
+[PL Club], and the [Privacy Group](http://privacy.cis.upenn.edu).
+I am very fortunate to be co-advised by [Benjamin
+Pierce](http://cis.upenn.edu/~bcpierce) and [Aaron
+Roth](http://cis.upenn.edu/~aaroth). 
+
+## Research Interests ##
+I spend my time thinking about questions in **verification**, **programming
+languages**, and **algorithms**. My work has mostly centered on [differential
+privacy](http://en.wikipedia.org/wiki/Differential_privacy), a rigorous
+definition of privacy that is currently under extensive study.
+
+From the verification side, I am interested in using formal methods---such as
+[type systems](http://en.wikipedia.org/wiki/Type_system) and [program
+logics](http://en.wikipedia.org/wiki/Hoare_logic))---to verify that programs are
+differentially private. From the algorithms side, I am interested in
+applications of differential privacy to optimization, machine learning, and
+mechanism design.

content/biblio.md

@@ -0,0 +1,7 @@
+## Drafts ##
+
+\$draft\$
+
+## Conference Publications ##
+
+\$confs\$

content/contacts.md

@@ -1,3 +1,3 @@
-# Contacts # {#contacts}
-* Office: GRW 561
-* Email: justin@justinh.su
+### Contacts ###
+Office: GRW 561  
+Email: email@justinh.su

content/footer.md

@@ -0,0 +1,6 @@
+[Source](http://git.justinh.su/justin/justin-site/tree/master/).
+Powered by
+[Hakyll](http://jaspervdj.be/hakyll/),
+[Pandoc](http://johnmacfarlane.net/pandoc/),
+and [bibtex2html](https://www.lri.fr/~filliatr/bibtex2html/).
+© Justin Hsu, 2015.

content/news.md

@@ -0,0 +1,4 @@
++ **11/2014** Our paper **Jointly private convex programming** has been uploaded to
+  `arxiv`.
++ **9/2014** Our paper, **Higher-order refinement types for mechanism design and
+  differential privacy**, has been accepted to POPL 2015!

css/style.scss

@@ -1,99 +1,213 @@
 @import "compass/css3";
 @import "compass/css3/border-radius";
+@import "compass/css3/box-shadow";
+@import "compass/typography/links/link-colors";
+@import "compass/typography/links/unstyled-link";
+@import "compass/typography/links/hover-link";
 @import "compass/typography/vertical_rhythm";
 
 $base-font-size: 16px;
 $base-line-height: 24px;
+$break-point: 45em;
+$bg-color: #EEEEEE;
+$main-color: #2196F3;
+$acc-color: #C51162;
 
 @include establish-baseline;
 
-.container {
+@mixin flexed {
   @include display-flex;
-  @include flex-direction(column);  
   @include flex-wrap(nowrap);
-  @include justify-content(flex-start);
   @include align-items(center);
 }
 
-.container > * {
-  width: 50%;
-  padding: rhythm(0.5);
-  margin: rhythm(0.5);
+body {
+  margin: 0;
+  background: $bg-color;
+  a {
+    @include hover-link;
+    @include link-colors($acc-color);
+  }
 }
 
-.container h1 {
-  @include adjust-font-size-to(3em);
+// Default table style sets the wrong font weight
+// if we set this in body.
+* {
+  font-family: 'roboto', sans-serif;
+  font-weight: 300;
 }
 
-.container h2 {
-  @include adjust-font-size-to(2em);
+.container {
+  @include flexed;
+  @include flex-direction(column);  
+  @include justify-content(flex-start);
+
+  h1 {
+    @include adjust-font-size-to(3em, 1/2);
   }
 
-.container p {
+  h2 {
+    @include adjust-font-size-to(2em, 1/2);
+  }
+
+  h3 {
+    @include adjust-font-size-to(1.5em, 1/2);
+  }
+
+  p {
     @include adjust-font-size-to(1em);
   }
-
-.header {
-  background: purple;
-  @include border-radius(5px, 5px);
-  // @include border-radius(10px 25px, 15px 30px);
-  // @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px);
 }
 
-.header h1 {
-  @include adjust-font-size-to(5em);
-}
-
-.topbox {
-  @include display-flex;
-  @include flex-direction(row);  
-  @include flex-wrap(nowrap);
-  @include justify-content(space-around);
-  @include align-items(stretch);
-  background: blue;
-
-  max-height: 30em;
-}
-
-.topbox > * {
-  padding: rhythm(0.5);
+.container > * {
+  width: $break-point;
   margin: rhythm(0.5);
+  padding: rhythm(0.5);
 }
 
 @media all and (max-width: 700px) {
+  .container > * {
+    width: 100%;
+  }
+}
+
+// Top banner.
+.header {
+  @include single-box-shadow(0, 10px, 5px, -10px);
+  background: $main-color;
+
+  h1 {
+    @include adjust-font-size-to(5em,1/2);
+    color: white;
+  }
+}
+
+// The top box. About, picture, and contact.
+.topbox {
+  @include flexed;
+  @include flex-direction(row);
+  @include justify-content(space-around);
+  background: white;
+}
+
+.topbar > * {
+  max-width: 100%;
+  h1 h2 {
+    color: $main-color;
+  }
+}
+
+// Bar containing picture and contact info.
+.bio-bar {
+  @include flexed;
+  @include flex-direction(column);
+  @include justify-content(space-around);
+  @include flex(1 1);
+  @include order(2);
+}
+
+@media all and (max-width: $break-point) {
   .topbox {
     @include flex-direction(column);
-    background: yellow;
+    @include align-items(stretch);
   }
 
-  .topbox > * {
+  .bio-bar {
+    @include flex-direction(row);  
+    @include order(1);
+  }
+}
+
+.picture {
+  @include flex(1 1);
   padding: rhythm(0.5);
-    margin: rhythm(0.5);
-  }
-}
-
-.picture {
-  @include flex(1 1 10em);
-  background: green;
-  @include order(2);
 }
 
 .contact {
-  @include flex(1 1 10em);
-  background: red;
-  @include order(3);
+  @include flex(1 1);
+  padding: rhythm(0.5);
+
+  h3 {
+    color: $main-color;
+  }
 }
 
-@media all and (max-width: 700px) {
-  .picture {
-    @include order(3);
+// About cell ~ 2x sidebar in normal mode
+.about {
+  @include flex(2 1);
 }
 
-  .contact {
+@media all and (max-width: $break-point) {
+  .about {
     @include order(2);
   }
 }
 
+// Two section headers, different bg colors.
+#mini-header {
+  background: $main-color;
+  color: white;
+  @include adjust-font-size-to(3em,1/2);
+  padding: rhythm(0.5);
+}
+
+#mini-header-alt {
+  background: $acc-color;
+  color: white;
+  @include adjust-font-size-to(3em,1/2);
+  padding: rhythm(0.5);
+}
+
+// Main unit for sections.
 #card {
-  background: blue;
+  padding: rhythm(0.5);
+  @include single-box-shadow(0, 11px, 5px, -10px);
+  background: white;
+  h1 {
+    background: $main-color;
+    color: white;
+  };
+
+  h2 {
+    background: white;
+    color: $main-color;
+  };
+
+  b, strong {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 500;
+  };
+
+  em {
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    font-style: italic;
+  };
+
+  code {
+    font-family: 'Inconsolata', monospace;
+    font-weight: 500;
+  }
+}
+
+#bibcell {
+  vertical-align: top;
+  padding: rhythm(1/2);
+}
+
+// Latex parsed as {H} turns into spans, make these bold.
+#titlecell span {
+  font-family: 'Roboto', sans-serif;
+  font-weight: 500;
+}
+
+footer * {
+  text-align: center;
+  background: $main-color;
+  margin: 0;
+  a {
+    // Turn off colors. Using both colors together looks bad.
+    @include unstyled-link;
+    @include hover-link;
+  }
 }

index.html

@@ -1,6 +1,7 @@
-<div class="topbox">
+<div class="topbox" id="card">
+  <div class="bio-bar">
     <div class="picture">
-    picture
+      <img src="images/round.png">  
     </div>
 
     <div class="contact">
@@ -8,4 +9,25 @@
     </div>
   </div>
 
-$content$
+  <div class="about">
+    <div id="mini-header">
+      About Me
+    </div>
+
+    $about$
+  </div>
+</div>
+
+<div id="card">
+  <div id="mini-header-alt">
+    News
+  </div>
+  $news$
+</div>
+
+<div id="card">
+  <div id="mini-header">
+    Bibliography
+  </div>
+  $biblio$
+</div>

site.hs

@@ -6,7 +6,24 @@ import           Hakyll
 import           HakyllBibTex
 import           System.Process
 import           Text.Pandoc.Options
+import           Text.Regex
 
+--------------------------------------------------------------------------------
+bibHeaders :: [(String, String, [String])]
+bibHeaders = [ ("confs", "Conference Publications",
+               ["-c", "$type='INPROCEEDINGS'" ] )
+             , ("draft", "Drafts"                 ,
+               [ "-c", "$type='UNPUBLISHED'"  ] )
+             ]
+
+bibSources :: [String]
+bibSources = [ "bibs/header.bib"
+             , "bibs/myrefs.bib"
+             ]
+
+contentSections :: [String]
+contentSections = [ "contacts", "about", "news", "biblio" ]
+--------------------------------------------------------------------------------
 compass :: Compiler (Item String)
 compass =
     getResourceString >>=
@@ -21,17 +38,6 @@ b2bflags = [ "--expand"
            , "-r"
            ]
 
-bibHeaders :: [(String, String, [String])]
-bibHeaders = [ ("confs", "Conference Publications",
-               ["-c", "$type='INPROCEEDINGS'" ] )
-             , ("draft", "Drafts"                 ,
-               [ "-c", "$type='UNPUBLISHED'"  ] )
-             ]
-
-bibSources :: [String]
-bibSources = [ "bibs/header.bib"
-             , "bibs/myrefs.bib"
-             ]
 
 bib2bib :: [String]
            -> Compiler (Item String)
@@ -53,6 +59,10 @@ main = hakyll $ do
         route   idRoute
         compile copyFileCompiler
 
+    match "images/**" $ do
+        route   idRoute
+        compile copyFileCompiler
+
     match "css/*.scss" $ do
         route $ setExtension "css"
         compile $ compass
@@ -68,7 +78,7 @@ main = hakyll $ do
                         , functionField "slidelink"
                           (\(i:_) _ -> return $ "files/slides/" ++ i ++ "slides.pdf")
                         , functionField "posterlink"
-                          (\(i:_) _ -> return $ "files/poster/" ++ i ++ "poster.pdf")
+                          (\(i:_) _ -> return $ "files/posters/" ++ i ++ "poster.pdf")
                         ]
                     biblioCtx = mconcat
                         [ field "bibtitle" (\_ -> return $ title)
@@ -79,38 +89,40 @@ main = hakyll $ do
                             >>= bib2bibParse
                             >>= applyTemplateList bibTpl itemCtx
                             >>= makeItem
-                            >>= loadAndApplyTemplate
-                                    "templates/biblisttpl.html" biblioCtx
+                            >>= loadAndApplyTemplate "templates/biblisttpl.html" biblioCtx
                             >>= relativizeUrls
 
-    match "content/body.md" $ do
+    match "content/biblio.md" $ do
         route $ setExtension "html"
         compile $ do
             let makeBibCtx (nick, _, _) =
                     field nick (\_ -> loadBody $ fromFilePath ("bibs/" ++ nick ++ ".html"))
                 secDiv    = defaultHakyllWriterOptions { writerSectionDivs = True }
-                bodyCtx = mconcat $ map makeBibCtx bibHeaders in do
+                biblioCtx = mconcat $ map makeBibCtx bibHeaders in do
                     pandocCompilerWith defaultHakyllReaderOptions secDiv
-                        >>= applyAsTemplate bodyCtx
+                        >>= applyAsTemplate biblioCtx
                         >>= relativizeUrls
 
     match "content/*.md" $ do
         route $ setExtension "html"
         compile $ do
-            pandocCompiler >>= relativizeUrls
+            let secDiv = defaultHakyllWriterOptions { writerSectionDivs = True }
+            pandocCompilerWith defaultHakyllReaderOptions secDiv
+                >>= relativizeUrls
 
     match "index.html" $ do
         route idRoute
         compile $ do
-            contacts <- loadBody "content/contacts.md"
-            content <- loadBody "content/body.md"
-            let indexContext = mconcat
-                  [ field "contacts" $ \_ -> return contacts
-                  , field "content"  $ \_ -> return content
-                  ]
+            let loadSec sec  = field sec
+                  (\_ -> loadBody (fromFilePath $ "content/" ++ sec ++ ".md"))
+                mainContext  = mconcat $ fmap loadSec contentSections
+                indexContext =
+                  field "footer" (\_ -> loadBody "content/footer.md")
+                  `mappend`
+                  defaultContext
             getResourceBody
-              >>= applyAsTemplate indexContext
-              >>= loadAndApplyTemplate "templates/main.html" defaultContext
+                >>= applyAsTemplate mainContext
+                >>= loadAndApplyTemplate "templates/main.html" indexContext
                 >>= relativizeUrls
 
     match "templates/*" $ compile templateCompiler

templates/bibitemtpl.html

@@ -1,9 +1,14 @@
-<li>
+<tr>
   <!-- $identifier$ -->
-$title$ </br>
-$author$ </br>
+  <td id="bibcell"> <b> $year$ </b> </td>
+  <td id="bibcell">
+    <div id="titlecell"> <b> $title$ </b> </div>
+    $author$. </br>
+    $if(booktitle)$
+      In $booktitle$.</br>
+    $endif$
     $if(eprint)$
-[<a href="$eprint$">Arxiv</a>]
+      [<a href="$url$">ArXiV</a>]
     $endif$
     $if(docs)$
       [<a href="$doclink(identifier)$">Paper</a>]
@@ -18,4 +23,5 @@ $endif$
     $if(notes)$
       $notes$ <br>
     $endif$
-</li>
+  </td>
+</tr>

templates/biblisttpl.html

@@ -1,4 +1,3 @@
-<h2> $bibtitle$ </h2>
-<ul>
+<table>
 $bibitems$
-</ul>
+</table>

templates/main.html

@@ -1,18 +1,39 @@
 <meta charset=utf-8>
 <html>
 <head>
-<title> My Site </title>
+<title> Justin Hsu </title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
+<link href='http://fonts.googleapis.com/css?family=Roboto:500,300,300italic'
+rel='stylesheet' type='text/css'>
+<link href='http://fonts.googleapis.com/css?family=Inconsolata' rel='stylesheet'
+type='text/css'>
+
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+  ga('create', 'UA-33267683-1', 'auto');
+  ga('send', 'pageview');
+
+</script>
 </head>
+
 <body>
 
-<div class="container">
+<div class="container" id="flexed">
   <div class="header">
     <h1> Justin Hsu </h1>
   </div>
 
   $body$
-</div>
 
+</div>
+<footer>
+  <small>
+    $footer$
+  </small>
+</footer>
 </body>
 </html>