Skip to content

Opera Speed Dial like chrome

Poapfel edited this page Jun 9, 2012 · 1 revision

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

local chrome = require "chrome" 
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">
        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;
        }
    </style>
</head>
<body>
{favs}
</body>
</html>
]==]

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(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", 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)
            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(luakit.data_dir .. "/favs", "w")
    f:write(table.concat(updated, "\n"))
    f:close()

    return table.concat(favs, "\n")
end

chrome.add("favs/", function (view, uri)
    -- the file:// is neccessary so that the thumbnails will be shown.
    -- disables reload though.
    local favs = favs()
    local html = string.gsub(html_template, "{favs}", favs)
    view:load_string(html, "file://favs/")
end )

Clone this wiki locally