History

Opera Speed Dial like chrome¶

Opera Speed Dial is an compact eyecandied bookmark list with thumbnails of the webpages in it. Chrome and Safari adopted it and with firefox there is a plugin offering this functionality.
Because with luakit it is possible to create custom chromes, we can add this feature, too.

Requirements¶

For creating the screenshots you will need external tools:

CutyCapt, or any other tool that can render websites to images and
ImageMagick's mogrify tool to crop and resize the website screenshots.

The favourite file¶

The bookmarks will be saved to a favourite file, which should be located at ~/.local/share/luakit/favs. The script below will fail if this file does not exist.
Every line of the file describes a bookmark:

[url] [thumbnail-path] [refresh-on-show] [title]

If the thumbnail-path is "none" or refresh-on-show is "on", the script will create a thumbnail as the chrome is shown.
For example:

http://luakit.org none no luakit - browser framework
http://reddit.com/r/programming none yes Programming reddit

The chrome¶

The following is a very simple implementation. You cannot add bookmarks on the fly, reloading the page will fail and the screenshots won't show if they finish creation. Navigate to chrome://favs to see it:

local chrome = require "chrome" 
local capi = { luakit = luakit }
local page    = "chrome://favs/" 
local pattern = page.."?" 
local cutycapt_bin = "~/.bin/CutyCapt" 
local cutycapt_opt = "--min-width=1024 --min-height=768" 
local mogrify_bin  = "/usr/bin/mogrify" 
local mogrify_opt  = "-extent 1024x768 -size 240x180 -resize 240x180" 
local html_template = [====[
<html>
<head>
    <title>Speed Dial</title>
    <style type="text/css">
    {style}
    </style>
</head>
<body>
{favs}
</body>
</html>
]====]
local html_style = [====[
body {
    background: #afafaf;
    text-align: center;
}
a.fav {
    background: #e0e0e0;
    display:inline-block;
    width: 280;
    border: 1px solid black;
    border-radius: 5px;
    padding-top: 10px;
    margin:8px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: black;
}
a.fav:hover {
    background: #ffffff;
    border-width:1px;
}
a.fav img {
    border: 1px solid #909090;
}
]====]
local fav_template = [====[
    <a class="fav" href={url}>
        <img src="{thumb}" width="240" height="180" border="0" />
        {title}
    </a>
]====]
local function favs()
    local favs = {}
    local updated = {}
    local f = io.open(capi.luakit.data_dir .. "/favs")
    for line in f:lines() do
        local url, thumb, refresh, title = line:match("(%S+)%s+(%S+)%s+(%S+)%s+(.+)")
        if thumb == "none" or refresh == "yes" then
            thumb = string.format("%s/thumb-%s.png", capi.luakit.data_dir, url:gsub("%W",""))
            local cmd = string.format('%s %s --url="%s" --out="%s" && %s %s %s', cutycapt_bin, cutycapt_opt, url, thumb, mogrify_bin, mogrify_opt, thumb)
            capi.luakit.spawn(string.format("/bin/sh -c '%s'", cmd))
        end
        updated[#updated+1] = string.format("%s %s %s %s", url, thumb, refresh, title)
        local subs = {
            url   = url,
            thumb = "file://"..thumb,
            title = title,
        }
        favs[#favs+1] = fav_template:gsub("{(%w+)}", subs)
    end
    f:close()
    local f = io.open(capi.luakit.data_dir .. "/favs", "w")
    f:write(table.concat(updated, "\n"))
    f:close()
    return table.concat(favs, "\n")
end
local function html()
    local subs = {
        style = html_style,
        favs  = favs(),
    }
    return html_template:gsub("{(%w+)}", subs)
end
local function show(view)
    -- the file:// is neccessary so that the thumbnails will be shown.
    -- disables reload though.
    view:load_string(html(), "file://favs")
end
chrome.add(pattern, show)

Also available in: HTML TXT

luakit - browser framework

Wiki

Opera Speed Dial like chrome¶

Requirements¶

The favourite file¶

The chrome¶