wezm/wezm.net
1
0
Fork 1
mirror of https://github.com/wezm/wezm.net.git synced 2024-11-18 04:42:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

Revamp the home page

Browse source
This commit is contained in:
Wesley Moore 2018-03-17 10:48:48 +11:00
parent 5dc43f88aa
commit 512e9ae4ed
12 changed files with 171 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
content/personal/2010/09/weather-station.mkdn
View file

@ -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]
I'm using the [wview][wview] weather station software. wview is running on the
Mac mini connected to our TV. The site layout is pretty basic so I hope to come
up with a cleaner design in the coming weeks.
To log and upload the [weather readings][weather] I'm using the [wview][wview]
weather station software. wview is running on the Mac mini connected to our TV.
The site layout is pretty basic so I hope to come up with a cleaner design in
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/

26
content/projects.html
View file

@ -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

128
content/screen.sass
View file

@ -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
padding: 0 0 0 2em
&:hover
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)

4
content/technical/2010/09/weather-station-software.html
View file

@ -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

2
content/technical/2018/01/goals-directions-rust-2018.md
View file

@ -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/

24
content/technical/2018/02/read-rust.md
View file

@ -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/)
* [Computer Science](http://readrust.net/computer-science/)
* [Crates](http://readrust.net/crates/)
* [Embedded](http://readrust.net/embedded/)
* [Games and Graphics](http://readrust.net/games-and-graphics/)
* [Operating Systems](http://readrust.net/operating-systems/)
* [Performance](http://readrust.net/performance/)
* [Rust 2018](http://readrust.net/rust-2018/)
* [Tools and Applications](http://readrust.net/tools-and-applications/)
* [Web and Network Services](http://readrust.net/web-and-network-services/)
* [All Posts](https://readrust.net/all/)
* [Computer Science](https://readrust.net/computer-science/)
* [Crates](https://readrust.net/crates/)
* [Embedded](https://readrust.net/embedded/)
* [Games and Graphics](https://readrust.net/games-and-graphics/)
* [Operating Systems](https://readrust.net/operating-systems/)
* [Performance](https://readrust.net/performance/)
* [Rust 2018](https://readrust.net/rust-2018/)
* [Tools and Applications](https://readrust.net/tools-and-applications/)
* [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

1
layouts/_listing.html
View file

@ -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' %>

97
layouts/home.html
View file

@ -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">
<div>
<h1><a href="/personal/articles/">Personal</a>
<sup><a href="/personal/feed/"><img src="/images/feed-icon.svg" class="feed-icon" width="12" height="12" alt="Feed Icon" /></a></sup>
<main>
<section id="posts" class="column">
<h1>
<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">
<header>
<h1><a href="http://www.flickr.com/photos/wezm/">Recent Photos</a>
<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>
</h1>
</header>
<ul class="inline"></ul>
<a href="http://www.flickr.com/photos/wezm/" class="more">More &raquo;</a>
</section>
<ul class="articles">
<% sorted_articles[0..4].each do |article| %>
<%= render '_article', :article => article %>
<% end %>
</ul>
<a href="/articles/" 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>

23
output/images/bsd-ci.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 824 B

9
output/images/read-rust.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
output/images/symbolmate.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 13 KiB

24
output/js/home.js
View file

@ -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);
});