Photo by Steven Gerner, CC BY-SA 2.0

This is the first major overhaul since the inception of the project in 2009. Work on the redesign - lead by David Persson - begun in February 2014.

Consolidated Content

Over the years, content around the framework has grown organically. We have a lot great content (guides, presentations, etc.) but it was spread over several places, duplicated (specifications) or disappeared entirely (blog posts). Content consolidation/reorganization was needed to make all this visible and allow the site to become the goto place for all things Li3 again.

First, most parts of the GitHub wiki have been rolled into the site. The specs were extracted into a separate respository, which now is hosted alongside the manual.

As we’ve migrated away from our previous development platform in 2011, blog posts had been left behind. Things were moving fast that year and we weren’t able to put up a blog quickly enough. With the new site the blog returns — you’re currently reading it — together with all the old posts that we’ve managed to recover.

Improving Existing Content

Early on, it became clear that we didn’t want rebuild everything from scratch, but to bring existing content to a new level.

That meant merging all pending changes to the manual as well as cleaning up code blocks, links, etc. This had the positive side effect that there is now a clean manual dev branch to base future PRs onto. We’ve also updated the most important documents: the installation and quickstart guides. More on how we plan to improve the manual in a dedicated blog post.

Maintainability

Another thing we realized early: we’ve got limited resources and need to distribute them carefully. We wanted to have more time to focus on core development. That’s why better maintainability is a top priority. The site project is well-structured, easily deployable and uses Composer to manage its dependencies.

While running services like Pastium and Sphere have been fun, and showcases the power of Li3, it also takes a lot of time. Relying on external services where appropriate (Tumblr, Gists) as well as dropping support for localized versions of the site frees needed resourced.

Moving the docs off to readthedocs.org was also discussed, but it was determined that it’d be a bigger effort then we can handle, and would mean rewriting all the docs and that our docs plugin still rules.

Fresh Look

With design advisory from Jan we’ve enhanced the overall look and usability of the site. The new design builds upon the cleanliness and a playfulness of the old site, while making it look more crisp and homogeneous.

The Li3 brand should be recognizable but not too flashy or distracting. That’s why we’ve chosen to use a logo mark instead of the full logo. The mark is the WHITE TRIANGLE CONTAINING SMALL WHITE TRIANGLE unicode symbol. The mark was introduced earlier by gwoo while reimplementing the framework’s base app templates. It can be described as a universal simplification of the pyramid logo we’ve been using in the full logo. That beauty isn’t gone, but we’re still contemplating where and in what form it should return.

PrismJS is the new highlighting library used for super style-able and faster syntax highlighting. Docs now have note boxes to call out hints, warnings and gotchas.

A classic top navigation is used to quickly jump between areas as well as highlight the currently active one. On certain pages you also get a right-side TOC-style navigation for easier navigation in lengthy articles. Breadcrumb navigation is used in docs where you’ll mostly navigate hierarchies. Bot logs had grown so much, they are now displayed as a fancy calendar with heat-map colors depending on the amount of messages on that day.

What We Have

There are lots of features in the framework that users might not know about or that we explicitly wanted to emphasize. Eureka Moments are similar to protips and allow us to highlight certain aspects of the framework on a daily changing basis. Help us adding more eurekas and submit a PR with your favorite feature.

You’ve been building some really great projects over the years. With the new site, we’re giving you the opportunity to showcase projects made with Li3. This will give your project attention and will help build up confidence in others who consider choosing Li3. New projects can be suggested by following the steps in the “In the Wild” section on the front page.

Stability

As you might have already known, we’ve switched servers as our old servers’ disks were dying. The new server is monitored closely and we have David on pager duty…

The bot is now running under tight supervisord control, listens to signals to quit gracefully, restarts automatically and will reclaim its nick if needed. We switched from the homegrown filesystem based databases to MariaDB which currently holds the >350k log messages as well as karma highscores and tell s.

The docs plugin now restricts the libraries that can be viewed to manual, lithium and specs and has overall more security features.

We’ve switched from the JavaScript based markdown parser to a more robust and faster PHP based parser. Old {{{ }}} style fenced code blocks are gone in favor of using triple-backticks. The new parser also fixes a quirk when marking up links. Manual and core have been updated to use the new syntax making it fully compatible with GitHub’s markdown rendering.

Once generated docs pages are cached making rendering snappier.

More to Come

Together with community member Rui Pedro M Lima (aka rapzo), we’re working on adding ElasticSearch backed global search capabilities to the site, the goal being to make Li3-related content on and off the site easily reachable and discoverable.

We’re planning on using Cloudflare for SSL and CDN support to increase availability and security once the new site has stabilized.

_

We’d like to explicitly thank Tetsuji Koyama and Noriko Yamamoto for providing their photos for the new site and hope you enjoy the redesigned site as much as we do. Bug reports and PRs are as always welcome on the site’s GitHub repository.

Happy coding,

~David