Revamp the home page

content/personal/2010/09/weather-station.mkdn

@@ -56,10 +56,10 @@ what I'm most interested in.
   <figcaption>The Finished Installation</figcaption>
 </figure>
 
-To log and upload the weather readings to [http://weather.wezm.net/][weather]
+To log and upload the [weather readings][weather] I'm using the [wview][wview]
-I'm using the [wview][wview] weather station software. wview is running on the
+weather station software. wview is running on the Mac mini connected to our TV.
-Mac mini connected to our TV. The site layout is pretty basic so I hope to come
+The site layout is pretty basic so I hope to come up with a cleaner design in
-up with a cleaner design in the coming weeks.
+the coming weeks.
 
 **Update:** I built a custom logging and charting solution. See the post,
 [Weather Station Software][software].
@@ -67,4 +67,4 @@ up with a cleaner design in the coming weeks.
 [software]: /technical/2010/09/weather-station-software/
 [WS2355]: http://www.lacrossetechnology.com.au/shop2/product_info.php?cPath=21&products_id=93
 [wview]: http://www.wviewweather.com/
-[weather]: http://weather.wezm.net/
+[weather]: /weather/

content/projects.html

@@ -24,11 +24,20 @@ A couple of other websites I maintain are:
   publically in the hope it may be useful to others as well. The code ([pkb])
   is open source.
 
-[readrust]: http://readrust.net/
+[readrust]: https://readrust.net/
 [Rust]: https://www.rust-lang.org/
 [bitcannon]: http://bitcannon.net/
 [hugo]: http://gohugo.io/
 
+BSD CI
+------
+
+[BSD CI] (currently in development) aims to provide a simple way for software
+projects to build and test on [BSD operating systems][run-bsd].
+
+[BSD CI]: http://bsd-ci.com/
+[run-bsd]: http://runbsd.info/
+
 Open Source Projects
 --------------------
 
@@ -77,19 +86,6 @@ Compiler][ragel] in the hope that it will help ensure fast and correct parsing.
 [mustache]: http://mustache.github.com/
 [ragel]: http://www.complang.org/ragel/
 
-### Monothumb
-
-[monothumb] is the tool that generates the thumbnails on the [home page](/). It
-retrieves thumbnails of my [recent uploads to Flickr][flickr], converts them to
-greyscale and then generates a single output image with both the colour and
-monochrome versions of the thumbnail. There are two version of the tool. The
-original one, written in Objective-C that uses CoreImage and a second version
-written in Lua. The Lua one uses my [lua-imlib2] fork.
-
-[flickr]: http://www.flickr.com/photos/wezm/
-[monothumb]: https://github.com/wezm/monothumb
-[lua-imlib2]: https://github.com/wezm/lua-imlib2
-
 ### node-genx
 
 [node-genx] is a [node.js][node] binding to the [Genx][genx] XML generation
@@ -114,7 +110,7 @@ produce the [Weather page][weather].
 [sqlite]: http://www.sqlite.org/
 [open2300]: http://www.lavrsen.dk/foswiki/bin/view/Open2300/WebHome
 [open2300fork]: http://github.com/wezm/open2300
-[weather]: http://weather.wezm.net/
+[weather]: /weather/
 [json]: http://www.json.org/
 [weather-tools]: http://github.com/wezm/weather-tools
 

content/screen.sass

@@ -85,15 +85,6 @@ h1 a
     color: #111
 
 
-body.home h1 > a
-  -webkit-transition: border-bottom-color 500ms ease-out
-  transition: border-bottom-color 500ms ease-out
-  border-bottom: 2px solid rgba(17, 17, 17, 0.0)
-
-  &:hover
-    border-bottom-color: rgba(17, 17, 17, 1.0)
-
-
 sup
   vertical-align: super
   font-size: 0.8em
@@ -186,22 +177,50 @@ footer
     padding-top: 1em
     display: block
 
-.column
-  float: left
-  width: 50%
-  margin: 0
-  min-width: 480px
-
 .align-top
   vertical-align: top
 
-#personal div
-  padding-right: 2em
 
+.home
+  h1 > a:first-child
+    -webkit-transition: border-bottom-color 500ms ease-out
+    transition: border-bottom-color 500ms ease-out
+    border-bottom: 2px solid rgba(17, 17, 17, 0.0)
 
-.column div
+    &:hover
-  padding: 0 0 0 2em
+      border-bottom-color: rgba(17, 17, 17, 1.0)
 
+  main
+    display: flex
+    margin: 0 20px
+    margin: 0 auto
+    padding: 0 20px
+    max-width: 1200px
+    min-height: 85vh
+
+#posts
+  width: 100%
+
+#projects
+  width: 250px
+  flex-shrink: 0
+  margin-left: 2em
+
+ul.projects
+  list-style: none
+  margin: 0
+  padding-top: 1em
+
+  li
+    margin: 1em 0
+
+  img, svg
+    width: 32px
+    vertical-align: middle
+    margin-right: 0.5em
+
+  p
+    margin-left: calc(32px + 0.5em)
 
 ul.articles
   list-style: none
@@ -260,50 +279,6 @@ a
       margin-left: 0
 
 
-#flickr
-  clear: both
-
-  header
-    margin-left: 2em
-
-  h1
-    margin: 0
-    padding: 0.6em 0 0 0
-
-  ul
-    display: block
-    height: 75px
-    overflow: hidden
-    margin-top: 1em
-
-  li
-    float: left
-    overflow: hidden
-    margin: 0 0 0 1em
-    display: block
-    position: relative
-    height: 75px
-    width: 75px
-    border: 1px solid #ccc
-    background: url(/images/photos.jpg?20120121) no-repeat 0 -75px
-
-    &:first-child
-      margin-left: 2em
-
-    img
-      -webkit-transition: opacity 500ms ease-out
-      transition: opacity 500ms ease-out
-      position: absolute
-      max-width: none
-
-      &:hover
-        opacity: 0
-
-  a.more
-    float: right
-    margin: 1em 2em 1em 0
-
-
 body.articles #content nav
   padding-bottom: 1em
 
@@ -360,7 +335,7 @@ img.alignleft
   margin: 5px 10px 5px 0
 
 
-img.feed-icon
+.feed-icon
   -webkit-transition: opacity 500ms ease-out
   transition: opacity 500ms ease-out
   opacity: 1.0
@@ -368,6 +343,9 @@ img.feed-icon
   &:hover
     opacity: 0.75
 
+.feed-icon-sup
+  vertical-align: super
+
 img.comment
   padding-top: 1px
 
@@ -512,19 +490,7 @@ body.weather
     margin-top: 1em
     color: #999
 
-@media screen and (max-width: 960px)
-
-  .column
-    float: none
-    width: auto
-    min-width: 0
-    max-width: 728px
-
-
 @media screen and (max-width: 768px)
-  #technical div, #personal div
-    padding: 0 1em
-
   #content
     margin: 0 20px
     font-size: 20px
@@ -540,6 +506,16 @@ body.weather
   #search
     float: none
 
+  .home main
+    flex-direction: column
+
+  #projects
+    width: auto
+    margin-left: 0
+    margin-top: 2em
+
+  ul.projects
+    padding-top: 0
 
 @media screen and (max-width: 515px)
 

content/technical/2010/09/weather-station-software.html

@@ -1,13 +1,13 @@
 Two weeks ago when I [installed my weather station][install] I setup the wview
 software to log the current conditions and generate and upload
-HTML and graphs to [http://weather.wezm.net/][weather]. wview seemed like the
+HTML and graphs to [the weather page][weather]. wview seemed like the
 perfect tool for the job but unfortunately it proved unreliable, even with the
 built in process monitoring. After a few hours of running fine it appeared the
 HTML generation process would hang, preventing any further updates to the
 website.
 
 [install]: /personal/2010/09/weather-station/
-[weather]: http://weather.wezm.net/
+[weather]: /weather/
 
 wview has a lot of functionality and thus a lot of code, which turned me
 off trying to track down the bug. I looked around for

content/technical/2018/01/goals-directions-rust-2018.md

@@ -170,7 +170,7 @@ _For more great #Rust2018 posts check out [readrust.net][readrust]._
 [node]: https://nodejs.org/
 [platform-support]: https://forge.rust-lang.org/platform-support.html
 [racer]: https://github.com/phildawes/racer
-[readrust]: http://readrust.net/rust2018/
+[readrust]: https://readrust.net/rust-2018/
 [resf]: https://twitter.com/rustevangelism
 [rust-build-systems]: https://blog.rust-lang.org/2017/12/21/rust-in-2017.html#rust-should-integrate-easily-into-large-build-systems
 [rust-cookbook]: https://rust-lang-nursery.github.io/rust-cookbook/

content/technical/2018/02/read-rust.md

@@ -15,16 +15,16 @@ January as a more general Rust content aggregator.
 Yesterday I launched the update. A number of new categories join the initial
 Rust 2018 category, bringing the list to:
 
-* [All Posts](http://readrust.net/all/)
+* [All Posts](https://readrust.net/all/)
-* [Computer Science](http://readrust.net/computer-science/)
+* [Computer Science](https://readrust.net/computer-science/)
-* [Crates](http://readrust.net/crates/)
+* [Crates](https://readrust.net/crates/)
-* [Embedded](http://readrust.net/embedded/)
+* [Embedded](https://readrust.net/embedded/)
-* [Games and Graphics](http://readrust.net/games-and-graphics/)
+* [Games and Graphics](https://readrust.net/games-and-graphics/)
-* [Operating Systems](http://readrust.net/operating-systems/)
+* [Operating Systems](https://readrust.net/operating-systems/)
-* [Performance](http://readrust.net/performance/)
+* [Performance](https://readrust.net/performance/)
-* [Rust 2018](http://readrust.net/rust-2018/)
+* [Rust 2018](https://readrust.net/rust-2018/)
-* [Tools and Applications](http://readrust.net/tools-and-applications/)
+* [Tools and Applications](https://readrust.net/tools-and-applications/)
-* [Web and Network Services](http://readrust.net/web-and-network-services/)
+* [Web and Network Services](https://readrust.net/web-and-network-services/)
 
 Each category has its own page and RSS feed in case readers are only interested
 in that category. I also set up a Twitter account, [@read_rust], that tweets
@@ -109,6 +109,8 @@ Page load times (fully loaded) reported by [WebPagetest] are:
 * 0.948s for Paris, France
 * 2.130s for Rose Hill, Mauritius
 
+**Update:** Read Rust is now hosted on AWS and delivered via CloudFront.
+
 ## Conclusion
 
 So that is the process that led to making Read Rust the way it is and how the
@@ -125,7 +127,7 @@ to [submit it][submit]!
 [issue-template]: https://github.com/wezm/read-rust/blob/master/.github/ISSUE_TEMPLATE/missing_post.md
 [JSON Feed]: https://jsonfeed.org/
 [Nunito Sans]: https://www.fontsquirrel.com/fonts/nunito-sans
-[Read Rust]: http://readrust.net/
+[Read Rust]: https://readrust.net/
 [readrust-github]: https://github.com/wezm/read-rust
 [roadmap]: https://github.com/aturon/rfcs/blob/roadmap-2018/text/0000-roadmap-2018.md
 [submit]: https://github.com/wezm/read-rust/issues/new?labels=missing-post&title=Add+post&template=missing_post.md

layouts/_listing.html

@@ -10,7 +10,6 @@
   <link rel="stylesheet" href="/css/prettyPhoto.css?v=3.0.1" type="text/css" media="screen" charset="utf-8" />
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script>
   <script src="/js/jquery.prettyPhoto.js?v=3.0.1" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
   <%= render '_header' %>

layouts/home.html

@@ -2,54 +2,67 @@
 <html>
 <head>
   <%= render '_head' %>
-  <script src="/js/handlebars.js" type="text/javascript" charset="utf-8"></script>
-  <script src="/js/home.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body class="home">
   <%= render '_header' %>
-  <section id="technical" class="column">
-    <div>
-      <h1><a href="/technical/articles/">Technical</a>
-        <sup><a href="/technical/feed/"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
-      </h1>
-      <ul class="articles">
-      <% technical_articles[0..4].each do |article| %>
-        <%= render '_article', :article => article %>
-      <% end %>
-      </ul>
-      <a href="/technical/articles/" class="more">More &raquo;</a>
-    </div>
-  </section>
 
-  <section id="personal" class="column">
+  <main>
-    <div>
+    <section id="posts" class="column">
-      <h1><a href="/personal/articles/">Personal</a>
+      <h1>
-        <sup><a href="/personal/feed/"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
+        <a href="/technical/articles/">Recent Posts</a>
+        <a href="/technical/feed/"><img src="/images/feed-icon.svg" class="feed-icon feed-icon-sup" width="12" height="12" alt="Feed Icon" /></a>
       </h1>
-      <ul class="articles">
-      <% personal_articles[0..4].each do |article| %>
-        <%= render '_article', :article => article %>
-      <% end %>
-      </ul>
-      <a href="/personal/articles/" class="more">More &raquo;</a>
-    </div>
-  </section>
 
-  <section id="flickr">
+      <ul class="articles">
-    <header>
+        <% sorted_articles[0..4].each do |article| %>
-      <h1><a href="http://www.flickr.com/photos/wezm/">Recent Photos</a>
+        <%= render '_article', :article => article %>
-        <sup><a href="http://api.flickr.com/services/feeds/photos_public.gne?id=40215689@N00&lang=en-us&format=atom"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
+        <% end %>
-      </h1>
+      </ul>
-    </header>
+      <a href="/articles/" class="more">More &raquo;</a>
-    <ul class="inline"></ul>
+    </section>
-    <a href="http://www.flickr.com/photos/wezm/" class="more">More &raquo;</a>
+
-  </section>
+    <section id="projects" class="column">
+      <h1><a href="/projects/">Projects</a></h1>
+      <ul class="projects">
+        <li>
+          <a href="https://readrust.net/">
+            <img src="/images/read-rust.svg" >Read Rust
+          </a>
+          <p>Curated posts from the Rust community.</p>
+        </li>
+        <li>
+          <a href="http://bsd-ci.com/">
+            <img src="/images/bsd-ci.svg" >BSD CI
+          </a>
+          <p>Continuous integration on BSD operating systems.</p>
+        </li>
+        <li>
+          <a href="https://binarytrance.com/apps/symbolmate">
+            <img src="/images/symbolmate.png" >SymbolMate
+          </a>
+          <p>iPhone and iPad app for finding symbols and emoji.</p>
+        </li>
+        <li>
+          <a href="http://bitcannon.net/">
+            <svg id="bookmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" fill="#85144b">
+              <path d="M6 2 L26 2 L26 30 L16 24 L6 30 Z"></path>
+            </svg>Bit Cannon
+          </a>
+          <p>A blog about operating system exploration.</p>
+        </li>
+        <li>
+          <a href="https://linkedlist.org/">
+            <svg id="i-link" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+              <path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />
+            </svg>Linked List
+          </a>
+          <p>A personal knowledge base.</p>
+        </li>
+      </ul>
+      <a href="/projects/" class="more text-right">More &raquo;</a>
+    </section>
+  </main>
+
   <%= render '_footer' %>
-  <script id="image-template" type="text/x-handlebars-template">
-    <li>
-      <a href="{{href}}" rel="prettyPhoto[flickr]"><img src="{{src}}" alt="{{alt}}" /></a>
-    </li>
-  </script>
-
 </body>
 </html>

output/images/bsd-ci.svg

@@ -0,0 +1,23 @@
+<svg width="32" height="32" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<title>logo</title>
+<desc>Created using Figma</desc>
+<g id="Canvas" transform="translate(-72 0)">
+<clipPath id="clip-0" clip-rule="evenodd">
+<path d="M 72 0L 104 0L 104 32L 72 32L 72 0Z" fill="#FFFFFF"/>
+</clipPath>
+<g id="logo" clip-path="url(#clip-0)">
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="translate(93.551 7)" fill="#FFBB20"/>
+</g>
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="translate(82.7755 7)" fill="#F26711"/>
+</g>
+<g id="Vector">
+<use xlink:href="#path0_fill" transform="translate(72 7)" fill="#990000"/>
+</g>
+</g>
+</g>
+<defs>
+<path id="path0_fill" d="M 8.35918 0L 0 0L 2.0898 8.5L 0 17L 8.35918 17L 10.449 8.5L 8.35918 0Z"/>
+</defs>
+</svg>

output/images/read-rust.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 9.513 100 80" enable-background="new 0 9.513 100 80.976" xml:space="preserve"><path d="M23.948,36.979h12.999v-3.166H23.948V36.979z M36.947,40.148H13.836v3.167h23.111V40.148z M36.947,46.48H13.836v3.168
+	h23.111V46.48z M36.947,52.814H13.836v3.164h23.111V52.814z M36.947,59.15H13.836v3.167h23.111V59.15z"/><g><path d="M97.389,9.513H67.1c-9.907,0-14.75,2.332-17.104,4.75c-2.35-2.418-7.194-4.75-17.101-4.75H2.605
+		C1.163,9.513,0,10.697,0,12.146v71.695c0,1.447,1.162,2.627,2.605,2.627h0.287h16.09h13.913c6.393,0,12.778,2.734,12.841,3.069
+		h0.038c1.299,0.971,1.307,0.951,2.605,0.951h3.466c1.321,0,1.387,0.021,2.565-1.215c0.21-0.361,6.815-2.806,12.688-2.806h13.91
+		h16.096h0.283c1.446,0,2.611-1.18,2.611-2.627V12.145C100,10.697,98.835,9.513,97.389,9.513z M46.071,19.039v65.646
+		c0,0-5.558-3.068-13.056-3.068c-1.837,0-27.741,0-27.741,0V14.37c0,0,25.903,0,27.741,0C47.529,14.37,46.071,19.039,46.071,19.039z
+		 M78.909,55.998c-3.661,2.902-4.688,4.712-5.863,5.885c-1.172-1.173-2.154-3.045-5.862-5.885c-3.579-2.726-8.21-6.544-8.21-11.724
+		c0-7.61,9.381-10.537,14.072-3.5c4.688-7.038,14.073-4.111,14.073,3.555C87.119,49.515,82.434,53.211,78.909,55.998z"/><path d="M23.948,36.979h12.999v-3.166H23.948V36.979z M36.947,40.148H13.836v3.167h23.111V40.148z M36.947,46.48H13.836v3.168
+		h23.111V46.48z M36.947,52.814H13.836v3.164h23.111V52.814z M36.947,59.15H13.836v3.167h23.111V59.15z"/></g></svg>

output/js/home.js

@@ -1,24 +0,0 @@
-jQuery(function () {
-  var image_template = Handlebars.compile($('#image-template').html());
-
-  function populate_flickr(data, text_status) {
-    var ul = $("#flickr ul");
-    ul.empty();
-    jQuery.each($('photo', data), function(i, obj) {
-      var photo = $(obj);
-      var image = {
-        href: photo.attr('url_z'),
-        src: '/images/photos.jpg?20120121',
-        alt: photo.attr('title')
-      };
-      var li = $(image_template(image));
-      $('img', li).css('left', (i * -75) + 'px');
-      li.css("background-position", (i * -75) + 'px -75px');
-      ul.append(li);
-    });
-    $("a[rel^='prettyPhoto']").prettyPhoto({theme: "facebook"});
-  };
-
-  // Populate Flickr
-  jQuery.get("/photos.xml?20111208", {}, populate_flickr);
-});