Worked on about page, added link highlighting, added many logos.

about/index.hs

@@ -4,7 +4,7 @@ import HtmlGen
 import Templates
 
 lastModified :: String
-lastModified = "2018-05-05"
+lastModified = "2018-05-06"
 
 sitemap :: Sitemap
 sitemap = baseSitemap aboutUrl
@@ -17,7 +17,18 @@ page = simplePage "About Lijero" "Lijero" lastModified $
   article
   %> (h1 %>> "About")
   %> (p
-      %>> "I am a programmer, musician, and hiker. I seek beauty, elegance, and cleanliness in everything I do."
-      %>> "I write Agda, Haskell, and Java. I enjoy making programming languages and constructed human languages."
+      %>> "I am a programmer, musician, and hiker. I seek beauty, elegance, and cleanliness in everything I do. "
+      %>> "I write Agda, Haskell, and Java. I enjoy making programming languages and constructed human languages. "
       %>> "This page is, like the rest of the site, obviously incomplete."
      )
+  %> (h2 %>> "Accounts")
+  %> (p %>> "This is intended to be the exhaustive and canonical list of my online accounts. Anything not listed here is not me.")
+  %> (href "https://github.com/lijerom/" githubMark)
+  %> (href "https://www.linkedin.com/in/jtmarlijero/" linkedinLogo)
+  %> (href "https://www.reddit.com/user/lijero" redditLogo)
+  %> (href "https://www.youtube.com/channel/UCdLV1echQeS2BZxF7uSmubw" youtubeLogo)
+  %> (href "https://en.wikipedia.org/wiki/User:Lijero" wikipediaLogo)
+  %> (href "https://webchat.freenode.net/?channels=%23lijero" freenodeLogo)
+  %> (href "https://stackexchange.com/users/10815798/james-martin" $ img "James Martin's Stack Exchange profile" "https://stackexchange.com/users/flair/10815798.png" %% accountIconClass)
+  %> (h2 %>> "Contact")
+  %> (p %>> "You may email me at jtmar@[this website] for professional contact or lijero@[this website]. I may also be found on Freenode as `lijero`.")

build-templates.sh

@@ -0,0 +1,3 @@
+cd templates
+stack install
+cd ..

res/common.css

@@ -75,6 +75,16 @@ a:hover {
   color: #8080A0;
 }
 
+.accounticon {
+  height: 100px;
+  padding: 10px;
+}
+
+.current-link:not(.navbrand) {
+  color: #505070;
+  border-bottom-style: solid;
+}
+
 .quote-content::before {
   content: url("/res/icon/double-quote-serif-left.svg");
 }

res/common.js

@@ -0,0 +1 @@
+window.onload = function(){document.querySelectorAll('a[href=\"'+document.URL+'\"]').forEach(function(elem){elem.className += ' current-link';});};

templates/src/Templates.hs

@@ -20,13 +20,14 @@ basePage pageTitle authorName content =
        %> faviconLink
        %> (title %>> pageTitle)
        %> viewport
+       %> (newTag "script" %% ("async", "async") %% ("type", "text/javascript") %% ("src", resUrl ++ "common.js"))
        )
     %> content
 
 navSection :: Html
 navSection =
   nav
-  %> (spanTag `withId` "navbrand" %>> "Lijero")
+  %> (spanTag `withId` "navbrand" %> ((href baseUrl $ text "Lijero") %% ("class", "navbrand")))
   %> unorderedList
          [ href baseUrl $ text "Home"
          , href projectsUrl $ text "Projects"

templates/src/Templates/Icons.hs

@@ -43,3 +43,42 @@ faviconMime = "image/png"
 
 faviconLink :: Html
 faviconLink = favicon faviconUrl faviconMime
+
+accountIconClass :: (String, String)
+accountIconClass = ("class", "accounticon")
+
+githubMarkUrl :: String
+githubMarkUrl = iconUrl ++ "github-mark-100px.png"
+
+githubMark :: Html
+githubMark = img "GitHub" githubMarkUrl %% accountIconClass
+
+linkedinLogoUrl :: String
+linkedinLogoUrl = iconUrl ++ "linkedin-logo-100px.png"
+
+linkedinLogo :: Html
+linkedinLogo = img "LinkedIn" linkedinLogoUrl %% accountIconClass
+
+redditLogoUrl :: String
+redditLogoUrl = iconUrl ++ "reddit-logo-100px.png"
+
+redditLogo :: Html
+redditLogo = img "Reddit" redditLogoUrl %% accountIconClass
+
+wikipediaLogoUrl :: String
+wikipediaLogoUrl = iconUrl ++ "wikipedia-logo-100px.png"
+
+wikipediaLogo :: Html
+wikipediaLogo = img "Wikipedia" wikipediaLogoUrl %% accountIconClass
+
+youtubeLogoUrl :: String
+youtubeLogoUrl = iconUrl ++ "youtube-logo-100px.jpeg"
+
+youtubeLogo :: Html
+youtubeLogo = img "Youtube" youtubeLogoUrl %% accountIconClass
+
+freenodeLogoUrl :: String
+freenodeLogoUrl = iconUrl ++ "freenode-logo.svg"
+
+freenodeLogo :: Html
+freenodeLogo = img "Freenode" freenodeLogoUrl %% accountIconClass