Add LiipThemeBundle

Re-defined the config / user relation to be OneToOne bidirectionnal.
ConfigType is now a service so I can inject the list of available themes that are also used by LiipThemeBundle

Force sqlite for test
In case of people use a different driver in parameter.yml (yes I do :))

.gitignore

@@ -35,4 +35,4 @@
 
 # Data for wallabag
 data/assets/*
-data/db/poche*.sqlite
+data/db/wallabag*.sqlite

app/AppKernel.php

@@ -21,6 +21,7 @@ class AppKernel extends Kernel
             new JMS\SerializerBundle\JMSSerializerBundle(),
             new Nelmio\ApiDocBundle\NelmioApiDocBundle(),
             new Nelmio\CorsBundle\NelmioCorsBundle(),
+            new Liip\ThemeBundle\LiipThemeBundle(),
             new Wallabag\CoreBundle\WallabagCoreBundle()
         );
 

app/config/config.yml

@@ -128,3 +128,24 @@ nelmio_cors:
             allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
             max_age: 3600
             hosts: ['^api\.']
+
+liip_theme:
+    load_controllers: false
+    themes:
+        - baggy
+        - dark
+        - default
+        - dmagenta
+        - solarized
+        - solarized-dark
+    autodetect_theme: wallabag_core.helper.detect_active_theme
+
+    path_patterns:
+        app_resource:
+            - %%app_path%%/views/themes/%%current_theme%%/%%template%%
+            - %%app_path%%/views/%%template%%
+        bundle_resource:
+            - %%bundle_path%%/Resources/views/themes/%%current_theme%%/%%template%%
+        bundle_resource_dir:
+            - %%dir%%/views/themes/%%current_theme%%/%%bundle_name%%/%%template%%
+            - %%dir%%/views/%%bundle_name%%/%%override_path%%

app/config/config_test.yml

@@ -17,4 +17,6 @@ swiftmailer:
 
 doctrine:
     dbal:
-        path: %kernel.root_dir%/../data/db/poche_test.sqlite
+        driver: pdo_sqlite
+        path: %kernel.root_dir%/../data/db/wallabag_test.sqlite
+        host: localhost

app/config/routing.yml

@@ -19,6 +19,6 @@ logout:
     path:   /logout
 
 rest :
-  type : rest
+    type : rest
-  resource : "routing_rest.yml"
+    resource : "routing_rest.yml"
-  prefix : /api
+    prefix : /api

composer.json

@@ -75,6 +75,7 @@
         "tecnick.com/tcpdf": "~6.2",
         "simplepie/simplepie": "~1.3.1",
         "htmlawed/htmlawed": "dev-master",
+        "liip/theme-bundle": "1.1.3",
         "wallabag/PHP-Flash-Messages": "dev-master",
         "wallabag/kriss_php5": "dev-master",
         "wallabag/pagination": "dev-master",

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at http://getcomposer.org/doc/01-basic-usage.md#composer-lock-the-lock-file",
         "This file is @generated automatically"
     ],
-    "hash": "4cbcfeafb3c1dc4ed8c364e93969808f",
+    "hash": "fd56c671d70f498ccc1996450479fbdc",
     "packages": [
         {
             "name": "doctrine/annotations",
@@ -1282,6 +1282,61 @@
             ],
             "time": "2014-12-12 05:04:05"
         },
+        {
+            "name": "liip/theme-bundle",
+            "version": "1.1.3",
+            "target-dir": "Liip/ThemeBundle",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/liip/LiipThemeBundle.git",
+                "reference": "a594cc6deda293034b8fd7795c9950f02fc8251b"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/liip/LiipThemeBundle/zipball/a594cc6deda293034b8fd7795c9950f02fc8251b",
+                "reference": "a594cc6deda293034b8fd7795c9950f02fc8251b",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=5.3.3",
+                "symfony/framework-bundle": "~2.0"
+            },
+            "require-dev": {
+                "symfony/console": "~2.0",
+                "symfony/expression-language": "~2.6"
+            },
+            "type": "symfony-bundle",
+            "extra": {
+                "branch-alias": {
+                    "dev-master": "1.1-dev"
+                }
+            },
+            "autoload": {
+                "psr-0": {
+                    "Liip\\ThemeBundle": ""
+                }
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Community contributions",
+                    "homepage": "https://github.com/liip/LiipThemeBundle/contributors"
+                },
+                {
+                    "name": "Liip AG",
+                    "homepage": "http://www.liip.ch/"
+                }
+            ],
+            "description": "Provides theming support for #Symfony2 Bundles",
+            "keywords": [
+                "themes",
+                "theming"
+            ],
+            "time": "2015-02-02 15:55:54"
+        },
         {
             "name": "mgargano/simplehtmldom",
             "version": "1.5",
@@ -2590,7 +2645,7 @@
             "description": "Libraries from @fivefilters.",
             "homepage": "https://github.com/wallabag/Fivefilters_Libraries",
             "support": {
-                "source": "https://github.com/wallabag/Fivefilters_Libraries/tree/master",
+                "source": "https://github.com/wallabag/Fivefilters_Libraries/tree/1.0.0",
                 "issues": "https://github.com/wallabag/Fivefilters_Libraries/issues"
             },
             "time": "2015-01-19 20:19:28"
@@ -2635,7 +2690,7 @@
             "description": "PHP Classes for dynamically generating EPub files.",
             "homepage": "https://github.com/wallabag/PHPePub",
             "support": {
-                "source": "https://github.com/wallabag/PHPePub/tree/master"
+                "source": "https://github.com/wallabag/PHPePub/tree/2.1.0"
             },
             "time": "2015-01-19 11:44:19"
         },
@@ -2672,7 +2727,7 @@
             "description": "A simple and smart (or stupid) php5 snippets repository",
             "homepage": "https://github.com/wallabag/kriss_php5",
             "support": {
-                "source": "https://github.com/wallabag/kriss_php5/tree/master"
+                "source": "https://github.com/wallabag/kriss_php5/tree/1.0.0"
             },
             "time": "2015-01-18 21:21:43"
         },
@@ -2709,7 +2764,7 @@
             "description": "Paginate record sets, not tied in directly to a database.",
             "homepage": "https://github.com/wallabag/pagination",
             "support": {
-                "source": "https://github.com/wallabag/pagination/tree/master"
+                "source": "https://github.com/wallabag/pagination/tree/1.0.0"
             },
             "time": "2015-01-19 09:24:39"
         },
@@ -2755,7 +2810,7 @@
                 "sessions"
             ],
             "support": {
-                "source": "https://github.com/wallabag/PHP-Flash-Messages/tree/master"
+                "source": "https://github.com/wallabag/PHP-Flash-Messages/tree/1.0.0"
             },
             "time": "2015-01-18 19:51:55"
         },
@@ -2809,7 +2864,7 @@
                 "html"
             ],
             "support": {
-                "source": "https://github.com/wallabag/php-readability/tree/master",
+                "source": "https://github.com/wallabag/php-readability/tree/1.0.0",
                 "issues": "https://github.com/wallabag/php-readability/issues"
             },
             "time": "2015-01-19 12:25:38"
@@ -2847,7 +2902,7 @@
             "description": "An experimental Mobipocket file creator in PHP.",
             "homepage": "https://github.com/wallabag/phpMobi",
             "support": {
-                "source": "https://github.com/wallabag/phpMobi/tree/master"
+                "source": "https://github.com/wallabag/phpMobi/tree/1.0.0"
             },
             "time": "2015-01-19 12:43:17"
         },

src/Wallabag/CoreBundle/Controller/ConfigController.php

@@ -7,7 +7,6 @@ use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 use Symfony\Component\HttpFoundation\Request;
 use Wallabag\CoreBundle\Entity\Config;
 use Wallabag\CoreBundle\Entity\User;
-use Wallabag\CoreBundle\Form\Type\ConfigType;
 use Wallabag\CoreBundle\Form\Type\ChangePasswordType;
 use Wallabag\CoreBundle\Form\Type\UserType;
 use Wallabag\CoreBundle\Form\Type\NewUserType;
@@ -25,14 +24,18 @@ class ConfigController extends Controller
         $config = $this->getConfig();
         $user = $this->getUser();
 
-        // handle basic config detail
+        // handle basic config detail (this form is defined as a service)
-        $configForm = $this->createForm(new ConfigType(), $config);
+        $configForm = $this->createForm('config', $config);
         $configForm->handleRequest($request);
 
         if ($configForm->isValid()) {
             $em->persist($config);
             $em->flush();
 
+            // switch active theme
+            $activeTheme = $this->get('liip_theme.active_theme');
+            $activeTheme->setName($config->getTheme());
+
             $this->get('session')->getFlashBag()->add(
                 'notice',
                 'Config saved'

src/Wallabag/CoreBundle/Entity/Config.php

@@ -48,7 +48,7 @@ class Config
     private $language;
 
     /**
-     * @ORM\ManyToOne(targetEntity="User", inversedBy="config")
+     * @ORM\OneToOne(targetEntity="User", inversedBy="config")
      */
     private $user;
 

src/Wallabag/CoreBundle/Entity/User.php

@@ -92,6 +92,11 @@ class User implements AdvancedUserInterface, \Serializable
      */
     private $entries;
 
+    /**
+     * @ORM\OneToOne(targetEntity="Config", mappedBy="user")
+     */
+    private $config;
+
     public function __construct()
     {
         $this->salt    = md5(uniqid(null, true));
@@ -320,4 +325,26 @@ class User implements AdvancedUserInterface, \Serializable
     {
         return $this->isActive;
     }
+    /**
+     * Set config
+     *
+     * @param  \Wallabag\CoreBundle\Entity\Config $config
+     * @return User
+     */
+    public function setConfig(\Wallabag\CoreBundle\Entity\Config $config = null)
+    {
+        $this->config = $config;
+
+        return $this;
+    }
+
+    /**
+     * Get config
+     *
+     * @return \Wallabag\CoreBundle\Entity\Config
+     */
+    public function getConfig()
+    {
+        return $this->config;
+    }
 }

src/Wallabag/CoreBundle/Form/Type/ConfigType.php

@@ -7,20 +7,23 @@ use Symfony\Component\OptionsResolver\OptionsResolverInterface;
 
 class ConfigType extends AbstractType
 {
+    private $themes = array();
+
+    /**
+     * @param array $themes Themes come from the LiipThemeBundle (liip_theme.themes)
+     */
+    public function __construct($themes)
+    {
+        $this->themes = array_combine(
+            $themes,
+            array_map(function ($s) { return ucwords(strtolower(str_replace('-', ' ', $s))); }, $themes)
+        );
+    }
+
     public function buildForm(FormBuilderInterface $builder, array $options)
     {
         $builder
-            ->add('theme', 'choice', array(
+            ->add('theme', 'choice', array('choices' => $this->themes))
-                'choices' => array(
-                    'baggy' => 'Baggy',
-                    'courgette' => 'Courgette',
-                    'dark' => 'Dark',
-                    'default' => 'Default',
-                    'dmagenta' => 'Dmagenta',
-                    'solarized' => 'Solarized',
-                    'solarized_dark' => 'Solarized Dark',
-                ),
-            ))
             ->add('items_per_page', 'text')
             ->add('language')
             ->add('save', 'submit')

src/Wallabag/CoreBundle/Helper/DetectActiveTheme.php

@@ -0,0 +1,47 @@
+<?php
+
+namespace Wallabag\CoreBundle\Helper;
+
+use Liip\ThemeBundle\Helper\DeviceDetectionInterface;
+use Symfony\Component\Security\Core\SecurityContextInterface;
+use Wallabag\CoreBundle\Entity\User;
+
+class DetectActiveTheme implements DeviceDetectionInterface
+{
+    protected $securityContext;
+
+    public function __construct(SecurityContextInterface $securityContext)
+    {
+        $this->securityContext = $securityContext;
+    }
+
+    public function setUserAgent($userAgent)
+    {
+    }
+
+    /**
+     * This should return the active theme for the logged in user.
+     * No active theme for:
+     *     - anonymous user
+     *     - user without a config (shouldn't happen..)
+     *
+     * @return string
+     */
+    public function getType()
+    {
+        $user = $this->securityContext->getToken()->getUser();
+
+        // anon user don't deserve a theme
+        if (!$user instanceof User) {
+            return false;
+        }
+
+        $config = $user->getConfig();
+
+        if (!$config) {
+            return false;
+        }
+
+        return $config->getTheme();
+    }
+}

src/Wallabag/CoreBundle/Resources/config/services.yml

@@ -1,15 +1,29 @@
 services:
-    wallabag_core.twig.wallabag:
+    wallabag_core.twig.extension:
         class: Wallabag\CoreBundle\Twig\Extension\WallabagExtension
         tags:
             - { name: twig.extension }
+
     wsse.security.authentication.provider:
         class: Wallabag\CoreBundle\Security\Authentication\Provider\WsseProvider
         public: false
         arguments: ['', '%kernel.cache_dir%/security/nonces']
+
     wsse.security.authentication.listener:
         class: Wallabag\CoreBundle\Security\Firewall\WsseListener
         public: false
         tags:
             - { name: monolog.logger, channel: wsse }
         arguments: ['@security.context', '@security.authentication.manager', '@logger']
+
+    wallabag_core.helper.detect_active_theme:
+        class: Wallabag\CoreBundle\Helper\DetectActiveTheme
+        arguments:
+            - @security.context
+
+    wallabag_core.form.type.config:
+        class: Wallabag\CoreBundle\Form\Type\ConfigType
+        arguments:
+            - %liip_theme.themes%
+        tags:
+            - { name: form.type, alias: config }

src/Wallabag/CoreBundle/Resources/views/_head.html.twig

@@ -1,28 +1,4 @@
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
+{% include "WallabagCoreBundle:themes:_global/_head_icon.html.twig" %}
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
-
-<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
-<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
-
-<link rel="shortcut icon" type="image/x-icon" href="{{ asset('themes/_global/img/appicon/favicon.ico') }}">
 
 <link rel="stylesheet" href="{{ asset('themes/baggy/css/ratatouille.css') }}" media="all">
 <link rel="stylesheet" href="{{ asset('themes/baggy/css/font.css') }}" media="all">

src/Wallabag/CoreBundle/Resources/views/_messages.html.twig

@@ -0,0 +1,9 @@
+
+{% if flashMessages %}
+<div class="messages success">
+    <a href="#" class="closeMessage">×</a>
+    {% for flashMessage in flashMessages %}
+        <p>{{ flashMessage }}</p>
+    {% endfor %}
+</div>
+{% endif %}

src/Wallabag/CoreBundle/Resources/views/_top.html.twig

@@ -1,5 +1,5 @@
 <header class="w600p center mbm">
-    <h1>
+    <h1 class="logo">
         {% block logo %}<img width="100" height="100" src="{{ asset('themes/baggy/img/logo-w.png') }}" alt="wallabag logo" />{% endblock %}
     </h1>
 </header>

src/Wallabag/CoreBundle/Resources/views/baggy/layout-login.twig

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="{{ lang }}"><![endif]-->
-<!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="{{ lang }}"><![endif]-->
-<!--[if IE 8]><html class="no-js ie8 ie678" lang="{{ lang }}"><![endif]-->
-<!--[if gt IE 8]><html class="no-js" lang="{{ lang }}"><![endif]-->
-<html lang="{{ lang }}">
-    <head>
-        <meta name="viewport" content="initial-scale=1.0">
-        <meta charset="utf-8">
-        <!--[if IE]>
-        <meta http-equiv="X-UA-Compatible" content="IE=10">
-        <![endif]-->
-        <title>{% block title %}{% endblock %} - wallabag</title>
-{% include '_head.twig' %}
-{% include '_bookmarklet.twig' %}
-    </head>
-    <body class="login">
-        {% include '_top.twig' %}
-        <div id="main">
-            {% block menu %}{% endblock %}
-            {% block precontent %}{% endblock %}
-            {% block messages %}
-            {% include '_messages.twig' %}
-            {% endblock %}
-            <div id="content" class="w600p center">
-            {% block content %}{% endblock %}
-            </div>
-        </div>
-{% include '_footer.twig' %}
-    </body>
-</html>

src/Wallabag/CoreBundle/Resources/views/baggy/login.twig

@@ -1,34 +0,0 @@
-{% extends "layout-login.twig" %}
-
-{% block title %}{% trans "login to your wallabag" %}{% endblock %}
-{% block content %}
-    {% if http_auth == 0 %}
-            <form method="post" action="?login" name="loginform">
-                <fieldset class="w500p center">
-                    <h2 class="mbs txtcenter">{% trans "Login to wallabag" %}</h2>
-                    {% if constant('MODE_DEMO') == 1 %}<p>{% trans "you are in demo mode, some features may be disabled." %}</p>{% endif %}
-					<div class="row">
-						<label class="col w150p" for="login">{% trans "Username" %}</label>
-						<input class="col" type="text" id="login" name="login" placeholder="{% trans "Username" %}" tabindex="1" autofocus {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
-					</div>
-
-					<div class="row">
-						<label class="col w150p" for="password">{% trans "Password" %}</label>
-						<input class="col" type="password" id="password" name="password" placeholder="{% trans "Password" %}" tabindex="2" {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
-					</div>
-					<div class="row">
-
-						<div class="col">
-							<input type="checkbox" id="longlastingsession" name="longlastingsession" tabindex="3" /> <label for="longlastingsession">{% trans "Stay signed in" %}</label><br />
-							<small class="inbl">{% trans "(Do not check on public computers)" %}</small>
-						</div>
-					</div>
-					<div class="row mts txtcenter">
-						<button class="bouton" type="submit" tabindex="4">{% trans "Sign in" %}</button>
-					</div>
-                </fieldset>
-                <input type="hidden" name="returnurl" value="{{ referer }}">
-                <input type="hidden" name="token" value="{{ token }}">
-            </form>
-    {% endif %}
-{% endblock %}

src/Wallabag/CoreBundle/Resources/views/layout-login.html.twig

@@ -14,6 +14,7 @@
         {% include "WallabagCoreBundle::_head.html.twig" %}
     </head>
     <body class="login">
+        <h1>DEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULT</h1>
         {% include "WallabagCoreBundle::_top.html.twig" %}
         <div id="main">
             {% block menu %}{% endblock %}

src/Wallabag/CoreBundle/Resources/views/layout.html.twig

@@ -14,19 +14,16 @@
         {% include "WallabagCoreBundle::_head.html.twig" %}
     </head>
     <body>
-    {% include "WallabagCoreBundle::_top.html.twig" %}
+        <h1>DEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULTDEFAULT</h1>
-    <div id="main">
+        {% include "WallabagCoreBundle::_top.html.twig" %}
-        {% block menu %}{% endblock %}
+        <div id="main">
-        {% block precontent %}{% endblock %}
+            {% block menu %}{% endblock %}
-        {% for flashMessage in app.session.flashbag.get('notice') %}
+            {% block precontent %}{% endblock %}
-            <div class="flash-notice">
+            {{ include("WallabagCoreBundle::_messages.html.twig", {'flashMessages': app.session.flashbag.get('notice')}) }}
-                {{ flashMessage }}
+            <div id="content" class="w600p center">
+                {% block content %}{% endblock %}
             </div>
-        {% endfor %}
-        <div id="content" class="w600p center">
-            {% block content %}{% endblock %}
         </div>
-    </div>
+        {% include "WallabagCoreBundle::_footer.html.twig" %}
-    {% include "WallabagCoreBundle::_footer.html.twig" %}
     </body>
 </html>

src/Wallabag/CoreBundle/Resources/views/themes/_global/_head_icon.html.twig

@@ -0,0 +1,26 @@
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-152.png') }}" sizes="152x152">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-144.png') }}" sizes="144x144">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-120.png') }}" sizes="120x120">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-114.png') }}" sizes="114x114">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-76.png') }}" sizes="76x76">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-72.png') }}" sizes="72x72">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon-57.png') }}" sizes="57x57">
+
+<link rel="apple-touch-icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
+<link rel="icon" type="image/png" href="{{ asset('themes/_global/img/appicon/apple-touch-icon.png') }}">
+
+<link rel="shortcut icon" type="image/x-icon" href="{{ asset('themes/_global/img/appicon/favicon.ico') }}">

src/Wallabag/CoreBundle/Resources/views/themes/_global/public/css/style.css

@@ -0,0 +1,447 @@
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Roboto Regular'), local('Roboto-Regular'), url(../fonts/Roboto.woff) format('woff');
+}
+
+
+
+body {
+    margin: 10px;
+    font-family: 'Roboto',Verdana,Geneva,sans-serif;
+    font-size: 16px;
+    color: #000;
+}
+
+header {
+    text-align: center;
+}
+
+header h1 {
+    font-size: 1.3em;
+}
+
+a,
+a:hover,
+a:visited {
+    color: #000;
+}
+
+.bouton {
+    border: none;
+    border-radius: 2px;
+    color: #fff;
+    background-color: #000;
+}
+
+.bouton:hover {
+    color: #f1f1f1;
+    background-color: #222;
+    cursor: pointer;
+}
+
+#main {
+    margin: 0 auto;
+}
+
+#main #links {
+    padding: 0;
+    text-align: center;
+    font-size: 0.9em;
+    list-style-type: none;
+}
+
+#main #links li {
+    display: inline;
+}
+
+#main #links li .current {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    color: #fff;
+    background-color: #000;
+}
+
+#main #sort {
+    padding: 0;
+    text-align: center;
+    list-style-type: none;
+    opacity: 0.5;
+}
+
+#main #sort li {
+    display: inline;
+    font-size: 0.9em;
+}
+
+#main #sort li + li {
+    margin-left: 10px;
+}
+
+#main #sort a {
+    padding: 2px 2px 0;
+    vertical-align: middle;
+}
+
+#main #sort img {
+    vertical-align: baseline;
+}
+#main #sort img:hover {
+    cursor: pointer;
+}
+
+#links a {
+    padding: 5px 10px;
+    text-decoration: none;
+}
+
+#links a:hover {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    color: #f1f1f1;
+    background-color: #040707;
+}
+
+/*** ***/
+
+/*** LINKS DISPLAY ***/
+
+#main .tool {
+    text-decoration: none;
+    cursor: pointer;
+}
+
+#main #content {
+    margin-top: 20px;
+}
+
+#main #content h2 {
+    text-decoration: none;
+    font-size: 1.3em;
+}
+
+#main #content .entrie {
+    margin-top: 15px;
+    padding-bottom: 15px;
+    border-bottom: 1px dashed #222;
+    overflow: hidden;
+}
+
+/* First entry */
+#main #content .results + .entrie {
+    clear: both;
+    margin-top: 0;
+}
+
+#main .entrie .tools {
+    float: right;
+    text-align: right;
+    list-style-type: none;
+    opacity: 0.5;
+}
+
+#main .entrie .tools .tool span {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    /* Hide textual content */
+    overflow: hidden;
+    text-align: left;
+    text-indent: -9999px;
+}
+
+/*** ***/
+
+/*** ARTICLE PAGE ***/
+
+#article {
+    margin: 0 auto;
+}
+
+#article header {
+    border-bottom: 1px solid #222;
+}
+
+#article header {
+    text-align: left;
+}
+
+#article header h1 small {
+    float: right;
+    font-size: 0.6em;
+}
+
+#article header a {
+    text-decoration: none;
+}
+
+#article .tags {
+    font-size: 0.8em;
+    color: #888;
+    padding-bottom: 5px;
+}
+
+.backhome {
+    display: inline;
+}
+
+.results {
+    padding: 15px 0;
+    overflow: hidden;
+}
+
+.nb-results {
+    float: left;
+    font-size: 0.9em;
+    line-height: 24px;
+    vertical-align: middle;
+}
+
+#article_toolbar {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    min-height: 50px;
+    padding-top: 17px;
+    text-align: center;
+    color: #fff;
+    opacity: 0.8;
+    background: #fff;
+}
+
+#article_toolbar li {
+    display: inline;
+    padding-right: 30px;
+}
+
+#article_toolbar .tool {
+    padding: 0 2px;
+}
+
+#article_toolbar .tool span {
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    /* Hide textual content */
+    overflow: hidden;
+    text-align: left;
+    text-indent: -9999px;
+}
+
+/*** ***/
+
+/*** PAGINATION ***/
+
+.pagination {
+    float: right;
+    text-align: right;
+}
+
+.pagination a {
+    height: 25px;
+    margin: 2px;
+    padding: 4px 8px;
+    border: 1px solid #d5d5d5;
+    text-decoration: none;
+    font-size: 11px;
+    font-weight: bold;
+    color: #333;
+}
+
+.pagination a:hover,
+.pagination a:active {
+    background-color: #efefef;
+}
+
+.pagination .current {
+    height: 25px;
+    margin: 2px;
+    padding: 4px 8px;
+    border: 1px solid #d5d5d5;
+    text-decoration: none;
+    font-size: 11px;
+    font-weight: bold;
+    color: #000;
+    background-color: #ccc;
+}
+
+.pagination .disabled {
+    display: none;
+}
+
+#bookmarklet {
+    padding: 5px;
+    border: 1px dashed #808080;
+    background: #fff;
+    cursor: move;
+}
+
+.top_link {
+    display: none;
+    z-index: 2000;
+    position: fixed;
+    right: 15px;
+    bottom: 15px;
+    padding: 20px;
+    -webkit-border-radius: 40px;
+    -moz-border-radius: 40px;
+    border-radius: 40px;
+    opacity: 0.9;
+    background: #ccc;
+}
+
+footer {
+    clear: both;
+}
+
+.reading-time {
+    font-size: 0.8em;
+}
+
+#inputform {
+    display: none;
+    margin-top: 5px;
+    margin-right: auto;
+    margin-left: auto;
+    padding-bottom: 5px;
+    max-width: 300px;
+    border-radius: 3px;
+    text-align: center;
+    color: #fff;
+    opacity: 0.8;
+    background-color: rgba(0,0,0,0.9);
+}
+
+a.back span,
+a.top span,
+a.fav span,
+a.fav span:hover,
+a.fav-off span,
+a.fav-off span:hover,
+a.archive span,
+a.archive span:hover,
+a.archive-off span,
+a.archive-off span:hover,
+a.twitter span,
+a.shaarli span,
+a.flattr span,
+a.email span,
+a.delete span,
+a.link span,
+a.bad-display span,
+a.reading-time span,
+a.print span {
+    background-repeat: no-repeat;
+}
+
+.arrow-down {
+    width: 0px;
+    height: 0px;
+    border-style: solid;
+    border-width: 10px 10px 0 10px;
+    border-color: #000 transparent transparent transparent;
+
+    position: absolute;
+    margin-top: 1.5em;
+    margin-left: -30px;
+}
+
+.two-column {
+  display: block;
+  width: 50%;
+  paddig-right: 20px;
+  float: left;
+  vertical-align: top;
+}
+
+
+/* ==========================================================================
+    "save a link" popup div related styles
+    ========================================================================== */
+
+#bagit-form {
+  display: none;
+  padding-left: 30px;
+  width: 450px;
+
+}
+
+a#bagit-form-close {
+  color: #FFF;
+  display: inline-block;
+  float: right;
+  background: url("../img/messages/close.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
+  height: 16px;
+  margin: -14px -8px 0 0;
+  width: 16px;
+  text-decoration: none;
+}
+
+
+.add-to-wallabag-link-after {
+  background-color: #000;
+  color: #fff;
+  padding: 0 4px 1px 3px;
+  font-weight: bold;
+  font-size: 0.7em;
+  border-radius: 4px;
+}
+.add-to-wallabag-link-after:hover, .add-to-wallabag-link-after:active {
+  color: #fff;
+}
+.add-to-wallabag-link-after:visited {
+  color: #999;
+}
+a.add-to-wallabag-link-after {
+    visibility: hidden;
+    position: absolute;
+    opacity: 0;
+    transition-duration: 2s;
+    transition-timing-function: ease-out;
+}
+#article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
+    opacity: 1;
+    visibility: visible;
+    transition-duration: .3s;
+    transition-timing-function: ease-in;
+}
+a.add-to-wallabag-link-after:after {
+     content: "w";
+}
+
+
+#add-link-result {
+  display: inline;
+  padding-left: 10px;
+}
+
+/* ==========================================================================
+    "Search" popup div related styles
+    ========================================================================== */
+
+/* Search form message needs a little more width, depending on translations */
+#search-form {
+    width: 420px;
+}
+
+.opacity03 {
+  /*opacity: 0.3;*/
+}
+
+#readLeftPercent {
+        display: inline-block;
+    /* Show textual content */
+    overflow: visible;
+    text-align: left;
+    text-indent: 0;
+        color: black;
+        width: 50px;
+}
+
+pre code {
+        font-family: "Courier New", Courier, monospace;
+        border: 1px solid #ddd;
+        font-size: 0.96em;
+}

src/Wallabag/CoreBundle/Resources/views/themes/baggy/layout.html.twig

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="en"><![endif]-->
+<!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="en"><![endif]-->
+<!--[if IE 8]><html class="no-js ie8 ie678" lang="en"><![endif]-->
+<!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->
+<html lang="en">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+        <meta charset="utf-8">
+        <!--[if IE]>
+        <meta http-equiv="X-UA-Compatible" content="IE=10">
+        <![endif]-->
+        <title>{% block title %}{% endblock %} - wallabag</title>
+        {% include "WallabagCoreBundle:themes:_global/_head_icon.html.twig" %}
+
+        <link rel="stylesheet" href="{{ asset('themes/baggy/css/ratatouille.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/baggy/css/font.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/baggy/css/main.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/baggy/css/messages.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/baggy/css/print.css') }}" media="print">
+
+        <script src="{{ asset('themes/_global/js/jquery-2.0.3.min.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/autoClose.js') }}"></script>
+        <script src="{{ asset('themes/baggy/js/jquery.cookie.js') }}"></script>
+        <script src="{{ asset('themes/baggy/js/init.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/saveLink.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/popupForm.js') }}"></script>
+        <script src="{{ asset('themes/baggy/js/closeMessage.js') }}"></script>
+        <script src="{{ asset('bundles/wallabagcore/js/bookmarklet.js') }}"></script>
+    </head>
+    <body>
+    {% include "WallabagCoreBundle::_top.html.twig" %}
+    <div id="main">
+        {% block menu %}{% endblock %}
+        {% block precontent %}{% endblock %}
+        {{ include("WallabagCoreBundle::_messages.html.twig", {'flashMessages': app.session.flashbag.get('notice')}) }}
+        <div id="content" class="w600p center">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+    {% include "WallabagCoreBundle::_footer.html.twig" %}
+    </body>
+</html>

src/Wallabag/CoreBundle/Resources/views/themes/baggy/login.twig

@@ -0,0 +1,34 @@
+{% extends "layout-login.twig" %}
+
+{% block title %}{% trans "login to your wallabag" %}{% endblock %}
+{% block content %}
+    {% if http_auth == 0 %}
+            <form method="post" action="?login" name="loginform">
+                <fieldset class="w500p center">
+                    <h2 class="mbs txtcenter">{% trans "Login to wallabag" %}</h2>
+                    {% if constant('MODE_DEMO') == 1 %}<p>{% trans "you are in demo mode, some features may be disabled." %}</p>{% endif %}
+                    <div class="row">
+                        <label class="col w150p" for="login">{% trans "Username" %}</label>
+                        <input class="col" type="text" id="login" name="login" placeholder="{% trans "Username" %}" tabindex="1" autofocus {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
+                    </div>
+
+                    <div class="row">
+                        <label class="col w150p" for="password">{% trans "Password" %}</label>
+                        <input class="col" type="password" id="password" name="password" placeholder="{% trans "Password" %}" tabindex="2" {% if constant('MODE_DEMO') == 1 %}value="poche"{% endif %} />
+                    </div>
+                    <div class="row">
+
+                        <div class="col">
+                            <input type="checkbox" id="longlastingsession" name="longlastingsession" tabindex="3" /> <label for="longlastingsession">{% trans "Stay signed in" %}</label><br />
+                            <small class="inbl">{% trans "(Do not check on public computers)" %}</small>
+                        </div>
+                    </div>
+                    <div class="row mts txtcenter">
+                        <button class="bouton" type="submit" tabindex="4">{% trans "Sign in" %}</button>
+                    </div>
+                </fieldset>
+                <input type="hidden" name="returnurl" value="{{ referer }}">
+                <input type="hidden" name="token" value="{{ token }}">
+            </form>
+    {% endif %}
+{% endblock %}

src/Wallabag/CoreBundle/Resources/views/themes/dark/layout.html.twig

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<!--[if lte IE 6]><html class="no-js ie6 ie67 ie678" lang="en"><![endif]-->
+<!--[if lte IE 7]><html class="no-js ie7 ie67 ie678" lang="en"><![endif]-->
+<!--[if IE 8]><html class="no-js ie8 ie678" lang="en"><![endif]-->
+<!--[if gt IE 8]><html class="no-js" lang="en"><![endif]-->
+<html lang="en">
+    <head>
+        <meta name="viewport" content="initial-scale=1.0">
+        <meta charset="utf-8">
+        <!--[if IE]>
+        <meta http-equiv="X-UA-Compatible" content="IE=10">
+        <![endif]-->
+        <title>{% block title %}{% endblock %} - wallabag</title>
+        {% include "WallabagCoreBundle:themes:_global/_head_icon.html.twig" %}
+
+        <link rel="stylesheet" href="{{ asset('themes/_global/css/knacss.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/_global/css/style.css') }}" media="all">
+        <link rel="stylesheet" href="{{ asset('themes/dark/css/style-dark.css') }}" media="all">
+
+        <script src="{{ asset('themes/_global/js/jquery-2.0.3.min.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/autoClose.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/saveLink.js') }}"></script>
+        <script src="{{ asset('themes/_global/js/popupForm.js') }}"></script>
+        <script src="{{ asset('bundles/wallabagcore/js/bookmarklet.js') }}"></script>
+    </head>
+    <body>
+    {% include "WallabagCoreBundle::_top.html.twig" %}
+    <div id="main">
+        {% block menu %}{% endblock %}
+        {% block precontent %}{% endblock %}
+        {{ include("WallabagCoreBundle::_messages.html.twig", {'flashMessages': app.session.flashbag.get('notice')}) }}
+        <div id="content" class="w600p center">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+    {% include "WallabagCoreBundle::_footer.html.twig" %}
+    </body>
+</html>