Implement web installer

framework/core/src/Install/Actions/IndexAction.php

@@ -0,0 +1,38 @@
+<?php namespace Flarum\Install\Actions;
+
+use Flarum\Support\HtmlAction;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Illuminate\Contracts\View\Factory;
+
+class IndexAction extends HtmlAction
+{
+    /**
+     * @var Factory
+     */
+    protected $view;
+
+    /**
+     * @param Factory $view
+     */
+    public function __construct(Factory $view)
+    {
+        $this->view = $view;
+    }
+
+    /**
+     * @param Request $request
+     * @param array $routeParams
+     * @return \Psr\Http\Message\ResponseInterface|EmptyResponse
+     */
+    public function render(Request $request, array $routeParams = [])
+    {
+        $view = $this->view->make('flarum.install::app');
+
+        $view->logo = $this->view->make('flarum.install::logo');
+
+        $view->content = $this->view->make('flarum.install::install');
+        $view->content->input = [];
+
+        return $view;
+    }
+}

framework/core/src/Install/Actions/InstallAction.php

@@ -0,0 +1,95 @@
+<?php namespace Flarum\Install\Actions;
+
+use Flarum\Support\Action;
+use Psr\Http\Message\ServerRequestInterface as Request;
+use Zend\Diactoros\Response\EmptyResponse;
+use Zend\Diactoros\Response\JsonResponse;
+use Zend\Diactoros\Response;
+use Flarum\Install\Console\InstallCommand;
+use Flarum\Install\Console\DefaultData;
+use Flarum\Core\Users\User;
+use Flarum\Api\Commands\GenerateAccessToken;
+use Flarum\Forum\Actions\WritesRememberCookie;
+use Symfony\Component\Console\Output\StreamOutput;
+use Symfony\Component\Console\Input\StringInput;
+use Illuminate\Contracts\Bus\Dispatcher;
+use Exception;
+use DateTime;
+
+class InstallAction extends Action
+{
+    use WritesRememberCookie;
+
+    protected $command;
+
+    /**
+     * @var Dispatcher
+     */
+    protected $bus;
+
+    public function __construct(InstallCommand $command, Dispatcher $bus)
+    {
+        $this->command = $command;
+        $this->bus = $bus;
+    }
+
+    /**
+     * @param Request $request
+     * @param array $routeParams
+     * @return \Psr\Http\Message\ResponseInterface
+     */
+    public function handle(Request $request, array $routeParams = [])
+    {
+        $input = $request->getParsedBody();
+
+        $data = new DefaultData;
+
+        $data->setDatabaseConfiguration([
+            'driver'    => 'mysql',
+            'host'      => array_get($input, 'mysqlHost'),
+            'database'  => array_get($input, 'mysqlDatabase'),
+            'username'  => array_get($input, 'mysqlUsername'),
+            'password'  => array_get($input, 'mysqlPassword'),
+            'prefix'    => '',
+        ]);
+
+        $data->setAdminUser([
+            'username' => array_get($input, 'adminUsername'),
+            'password' => array_get($input, 'adminPassword'),
+            'email'    => array_get($input, 'adminEmail'),
+        ]);
+
+        $baseUrl = rtrim((string) $request->getUri(), '/');
+
+        $data->setSetting('admin_url', $baseUrl . '/admin');
+        $data->setSetting('api_url', $baseUrl . '/api');
+        $data->setSetting('base_url', $baseUrl);
+        $data->setSetting('forum_title', array_get($input, 'forumTitle'));
+        $data->setSetting('mail_from', 'noreply@' . preg_replace('/^www\./i', '', parse_url($baseUrl, PHP_URL_HOST)));
+        $data->setSetting('welcome_title', 'Welcome to ' . array_get($input, 'forumTitle'));
+
+        $body = fopen('php://temp', 'wb+');
+        $input = new StringInput('');
+        $output = new StreamOutput($body);
+
+        $this->command->setDataSource($data);
+
+        try {
+            $this->command->run($input, $output);
+        } catch (Exception $e) {
+            return new JsonResponse([
+                'error' => $e->getMessage()
+            ], 500);
+        }
+
+        $token = $this->bus->dispatch(
+            new GenerateAccessToken(1)
+        );
+        $token->update(['expires_at' => new DateTime('+2 weeks')]);
+
+        return $this->withRememberCookie(
+            new Response($body, 200),
+            $token->id
+        );
+    }
+}

framework/core/src/Install/Console/DefaultData.php

@@ -2,50 +2,76 @@
 
 class DefaultData implements ProvidesData
 {
+    protected $databaseConfiguration = [
+        'driver'    => 'mysql',
+        'host'      => 'localhost',
+        'database'  => 'flarum_console',
+        'username'  => 'root',
+        'password'  => 'root',
+        'prefix'    => '',
+    ];
+
+    protected $adminUser = [
+        'username'              => 'admin',
+        'password'              => 'admin',
+        'email'                 => 'admin@example.com',
+    ];
+
+    protected $settings = [
+        'admin_url' => 'http://flarum.dev/admin',
+        'allow_post_editing' => 'reply',
+        'allow_renaming' => '10',
+        'allow_sign_up' => '1',
+        'api_url' => 'http://flarum.dev/api',
+        'base_url' => 'http://flarum.dev',
+        'custom_less' => '',
+        'default_locale' => 'en',
+        'default_route' => '/all',
+        'extensions_enabled' => '[]',
+        'forum_title' => 'Development Forum',
+        'forum_description' => '',
+        'mail_driver' => 'mail',
+        'mail_from' => 'noreply@flarum.dev',
+        'theme_colored_header' => '0',
+        'theme_dark_mode' => '0',
+        'theme_primary_color' => '#29415E',
+        'theme_secondary_color' => '#29415E',
+        'welcome_message' => 'This is beta software and you should not use it in production.',
+        'welcome_title' => 'Welcome to Development Forum',
+    ];
+
     public function getDatabaseConfiguration()
     {
-        return [
+        return $this->databaseConfiguration;
-            'driver'    => 'mysql',
+    }
-            'host'      => 'localhost',
+
-            'database'  => 'flarum_console',
+    public function setDatabaseConfiguration(array $databaseConfiguration)
-            'username'  => 'root',
+    {
-            'password'  => 'root',
+        $this->databaseConfiguration = $databaseConfiguration;
-            'prefix'    => '',
-        ];
     }
 
     public function getAdminUser()
     {
-        return [
+        return $this->adminUser;
-            'username'              => 'admin',
+    }
-            'password'              => 'admin',
+
-            'email'                 => 'admin@example.com',
+    public function setAdminUser(array $adminUser)
-        ];
+    {
+        $this->adminUser = $adminUser;
     }
 
     public function getSettings()
     {
-        return [
+        return $this->settings;
-            'admin_url' => 'http://flarum.dev/admin',
+    }
-            'allow_post_editing' => 'reply',
+
-            'allow_renaming' => '10',
+    public function setSettings(array $settings)
-            'allow_sign_up' => '1',
+    {
-            'api_url' => 'http://flarum.dev/api',
+        $this->settings = $settings;
-            'base_url' => 'http://flarum.dev',
+    }
-            'custom_less' => '',
+
-            'default_locale' => 'en',
+    public function setSetting($key, $value)
-            'default_route' => '/all',
+    {
-            'extensions_enabled' => '[]',
+        $this->settings[$key] = $value;
-            'forum_title' => 'Development Forum',
-            'forum_description' => '',
-            'mail_driver' => 'mail',
-            'mail_from' => 'noreply@flarum.dev',
-            'theme_colored_header' => '0',
-            'theme_dark_mode' => '0',
-            'theme_primary_color' => '#29415E',
-            'theme_secondary_color' => '#29415E',
-            'welcome_message' => 'This is beta software and you should not use it in production.',
-            'welcome_title' => 'Welcome to Development Forum',
-        ];
     }
 }

framework/core/src/Install/Console/InstallCommand.php

@@ -59,13 +59,20 @@ class InstallCommand extends Command
 
     protected function init()
     {
-        if ($this->input->getOption('defaults')) {
+        if ($this->dataSource === null) {
-            $this->dataSource = new DefaultData();
+            if ($this->input->getOption('defaults')) {
-        } else {
+                $this->dataSource = new DefaultData();
-            $this->dataSource = new DataFromUser($this->input, $this->output, $this->getHelperSet()->get('question'));
+            } else {
+                $this->dataSource = new DataFromUser($this->input, $this->output, $this->getHelperSet()->get('question'));
+            }
         }
     }
 
+    public function setDataSource(ProvidesData $dataSource)
+    {
+        $this->dataSource = $dataSource;
+    }
+
     protected function install()
     {
         $this->storeConfiguration();
@@ -85,6 +92,7 @@ class InstallCommand extends Command
 
         $this->createAdminUser();
 
+        $this->enableBundledExtensions();
     }
 
     protected function storeConfiguration()
@@ -106,9 +114,13 @@ class InstallCommand extends Command
             ],
         ];
 
-        $this->info('Writing config');
+        $this->info('Testing config');
 
         $this->container->instance('flarum.config', $config);
+        $this->container->make('flarum.db');
+
+        $this->info('Writing config');
+
         file_put_contents(
             base_path('../config.php'),
             '<?php return '.var_export($config, true).';'
@@ -208,6 +220,23 @@ class InstallCommand extends Command
         $user->groups()->sync([1]);
     }
 
+    protected function enableBundledExtensions()
+    {
+        $extensions = $this->container->make('Flarum\Support\ExtensionManager');
+
+        $migrator = $extensions->getMigrator();
+
+        foreach ($extensions->getInfo() as $extension) {
+            $this->info('Enabling extension: '.$extension->name);
+
+            $extensions->enable($extension->name);
+
+            foreach ($migrator->getNotes() as $note) {
+                $this->info($note);
+            }
+        }
+    }
+
     /**
      * @return \Illuminate\Database\ConnectionInterface
      */

framework/core/src/Install/InstallServiceProvider.php

@@ -0,0 +1,60 @@
+<?php namespace Flarum\Install;
+
+use Flarum\Http\RouteCollection;
+use Flarum\Http\UrlGenerator;
+use Flarum\Support\ServiceProvider;
+use Psr\Http\Message\ServerRequestInterface;
+
+class InstallServiceProvider extends ServiceProvider
+{
+    /**
+     * Register the service provider.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        $this->app->register('Flarum\Locale\LocaleServiceProvider');
+    }
+
+    /**
+     * Bootstrap the application events.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $root = __DIR__.'/../..';
+
+        $this->loadViewsFrom($root.'/views/install', 'flarum.install');
+
+        $this->routes();
+    }
+
+    protected function routes()
+    {
+        $this->app->instance('flarum.install.routes', $routes = new RouteCollection);
+
+        $routes->get(
+            '/',
+            'flarum.install.index',
+            $this->action('Flarum\Install\Actions\IndexAction')
+        );
+
+        $routes->post(
+            '/',
+            'flarum.install.install',
+            $this->action('Flarum\Install\Actions\InstallAction')
+        );
+    }
+
+    protected function action($class)
+    {
+        return function (ServerRequestInterface $httpRequest, $routeParams) use ($class) {
+            /** @var \Flarum\Support\Action $action */
+            $action = $this->app->make($class);
+
+            return $action->handle($httpRequest, $routeParams);
+        };
+    }
+}

framework/core/src/Support/ExtensionManager.php

@@ -11,10 +11,13 @@ class ExtensionManager
 
     protected $app;
 
-    public function __construct(SettingsRepository $config, Container $app)
+    protected $migrator;
+
+    public function __construct(SettingsRepository $config, Container $app, Migrator $migrator)
     {
         $this->config = $config;
         $this->app = $app;
+        $this->migrator = $migrator;
     }
 
     public function getInfo()
@@ -80,15 +83,18 @@ class ExtensionManager
             return $container->make('Illuminate\Database\ConnectionInterface')->getSchemaBuilder();
         });
 
-        $migrator = $this->app->make('Flarum\Migrations\Migrator');
-
         if ($up) {
-            $migrator->run($migrationDir, $extension);
+            $this->migrator->run($migrationDir, $extension);
         } else {
-            $migrator->reset($migrationDir, $extension);
+            $this->migrator->reset($migrationDir, $extension);
         }
     }
 
+    public function getMigrator()
+    {
+        return $this->migrator;
+    }
+
     protected function getEnabled()
     {
         $config = $this->config->get('extensions_enabled');

framework/core/views/install/app.blade.php

@@ -0,0 +1,145 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>Install Flarum</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
+
+    <style>
+      @import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,600);
+
+      body {
+        background: #fff;
+        margin: 0;
+        padding: 0;
+        line-height: 1.5;
+      }
+      body, input, button {
+        font-family: 'Open Sans', sans-serif;
+        font-size: 16px;
+        color: #7E96B3;
+      }
+      .container {
+        max-width: 515px;
+        margin: 0 auto;
+        padding: 100px 30px;
+        text-align: center;
+      }
+      a {
+        color: #e7652e;
+        text-decoration: none;
+      }
+      a:hover {
+        text-decoration: underline;
+      }
+
+      h1 {
+        margin-bottom: 40px;
+      }
+      h2 {
+        font-size: 28px;
+        font-weight: normal;
+        color: #3C5675;
+        margin-bottom: 0;
+      }
+
+      form {
+        margin-top: 40px;
+      }
+      .FormGroup {
+        margin-bottom: 20px;
+      }
+      .FormGroup .FormField:first-child input {
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+      }
+      .FormGroup .FormField:last-child input {
+        border-bottom-left-radius: 4px;
+        border-bottom-right-radius: 4px;
+      }
+      .FormField input {
+        background: #EDF2F7;
+        margin-bottom: 1px;
+        border: 2px solid transparent;
+        transition: background 0.2s, border-color 0.2s, color 0.2s;
+        width: 100%;
+        padding: 15px 15px 15px 180px;
+        box-sizing: border-box;
+      }
+      .FormField input:focus {
+        border-color: #e7652e;
+        background: #fff;
+        color: #444;
+        outline: none;
+      }
+      .FormField label {
+        float: left;
+        width: 160px;
+        text-align: right;
+        margin-right: -160px;
+        position: relative;
+        margin-top: 18px;
+        font-size: 14px;
+        pointer-events: none;
+        opacity: 0.7;
+      }
+      button {
+        background: #3C5675;
+        color: #fff;
+        border: 0;
+        font-weight: bold;
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 15px 30px;
+        -webkit-appearance: none;
+      }
+      button[disabled] {
+        opacity: 0.5;
+      }
+
+      #error {
+        background: #D83E3E;
+        color: #fff;
+        padding: 15px 20px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+      }
+
+      .animated {
+        -webkit-animation-fill-mode: both;
+        animation-fill-mode: both;
+
+        -webkit-animation-duration: 0.5s;
+        animation-duration: 0.5s;
+
+        animation-delay: 1.7s;
+        -webkit-animation-delay: 1.7s;
+      }
+      @-webkit-keyframes fadeIn {
+        0% {opacity: 0}
+        100% {opacity: 1}
+      }
+      @keyframes fadeIn {
+        0% {opacity: 0}
+        100% {opacity: 1}
+      }
+      .fadeIn {
+        -webkit-animation-name: fadeIn;
+        animation-name: fadeIn;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="container">
+      <h1>
+        {!! $logo !!}
+      </h1>
+
+      <div class="animated fadeIn">
+        {!! $content !!}
+      </div>
+    </div>
+  </body>
+</html>

framework/core/views/install/errors.blade.php

@@ -0,0 +1,12 @@
+<h2>Hold Up!</h2>
+
+<p>These errors must be resolved before you can continue the installation.</p>
+
+<div class="Errors">
+  @foreach ($errors as $error)
+    <div class="Error">
+      <h3 class="Error-message">{{ $error['message'] }}</h3>
+      <p class="Error-detail">{{ $error['detail'] }}</p>
+    </div>
+  @endforeach
+</div>

framework/core/views/install/install.blade.php

@@ -0,0 +1,82 @@
+<h2>Install Flarum</h2>
+
+<p>Set up your forum by filling out your details below. If you have any trouble, get help on the <a href="" target="_blank">Flarum website</a>.</p>
+
+<form>
+  <div id="error" style="display:none"></div>
+
+  <div class="FormGroup">
+    <div class="FormField">
+      <label>Forum Title</label>
+      <input name="forumTitle">
+    </div>
+  </div>
+
+  <div class="FormGroup">
+    <div class="FormField">
+      <label>MySQL Host</label>
+      <input name="mysqlHost" value="localhost">
+    </div>
+
+    <div class="FormField">
+      <label>MySQL Username</label>
+      <input name="mysqlUsername">
+    </div>
+
+    <div class="FormField">
+      <label>MySQL Password</label>
+      <input type="password" name="mysqlPassword">
+    </div>
+
+    <div class="FormField">
+      <label>MySQL Database</label>
+      <input name="mysqlDatabase">
+    </div>
+  </div>
+
+  <div class="FormGroup">
+    <div class="FormField">
+      <label>Admin Username</label>
+      <input name="adminUsername">
+    </div>
+
+    <div class="FormField">
+      <label>Admin Email</label>
+      <input name="adminEmail">
+    </div>
+
+    <div class="FormField">
+      <label>Admin Password</label>
+      <input type="password" name="adminPassword">
+    </div>
+  </div>
+
+  <div class="FormButtons">
+    <button type="submit">Install Flarum</button>
+  </div>
+</form>
+
+<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
+<script>
+$(function() {
+  $('form :input:first').select();
+
+  $('form').on('submit', function(e) {
+    e.preventDefault();
+
+    var $button = $(this).find('button')
+      .text('Please Wait...')
+      .prop('disabled', true);
+
+    $.post('', $(this).serialize())
+      .done(function() {
+        window.location.reload();
+      })
+      .fail(function(data) {
+        $('#error').show().text('Something went wrong:\n\n' + data.responseJSON.error);
+
+        $button.prop('disabled', false).text('Install Flarum');
+      });
+  });
+});
+</script>

framework/core/views/install/logo.php

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="300px" height="80px" viewBox="0 0 300 80" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.3 (11970) - http://www.bohemiancoding.com/sketch -->
+    <title>Bottom + Top</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <rect id="path-1" x="32" y="0" width="32" height="76">
+            <animate begin="0.5s" dur="0.3s" attributeName="x" values="32;0" fill="freeze"  calcMode="spline" keySplines="0.2 1 0.5 1" keyTimes="0;1" />
+        </rect>
+        <linearGradient x1="50%" y1="100%" x2="50%" y2="0%" id="linearGradient-3">
+            <stop stop-color="#E7762E" offset="0%">
+                <animate begin="0.8s" dur="0.3s" attributeName="stop-color" values="#E7762E;#D22929" fill="freeze" />
+            </stop>
+            <stop stop-color="#E7562E" offset="100%">
+                <animate begin="0.8s" dur="0.3s" attributeName="stop-color" values="#E7562E;#B71717" fill="freeze" />
+            </stop>
+        </linearGradient>
+        <rect id="path-4" x="0" y="-10" width="0" height="76">
+            <animate begin="0.8s" dur="0.5s" attributeName="width" values="0;56" fill="freeze"  calcMode="spline" keySplines="0.2 1 0.5 1" keyTimes="0;1" />
+        </rect>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#E7762E" offset="0%"></stop>
+            <stop stop-color="#E7562E" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Bottom-+-Top" sketch:type="MSLayerGroup">
+            <g id="Bottom" transform="translate(0.000000, 7.000000)">
+                <mask id="mask-2" sketch:name="Mask" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Mask" opacity="0" fill="#D8D8D8" sketch:type="MSShapeGroup" xlink:href="#path-1"></use>
+                <path d="M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,23 L32,69 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z" fill="url(#linearGradient-3)" sketch:type="MSShapeGroup" mask="url(#mask-2)">
+                    <animate begin="0.5s" dur="0.3s" attributeName="d" values="M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,0 L32,46 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z;
+                        M0.0145378441,47.0458273 L0.000987815598,5.99282032 C0.000442260108,4.3399313 1.13889694,3.71181059 2.53773397,4.58608373 L32,23 L32,69 L4.39928747,52.2490987 C0.574247043,50.1665474 0.0199042738,48.873991 0.0145378441,47.0458273 Z" fill="freeze"  calcMode="spline" keySplines="0.2 1 0.8 1" keyTimes="0;1" />
+                </path>
+                <animate begin="0.5s" dur="0.3s" attributeName="opacity" values="0;1" fill="freeze" />
+                <animateTransform begin="0.5s" attributeName="transform" type="translate" dur="0.3s" from="0 12" to="0 7" fill="freeze" calcMode="spline" keySplines="0.2 0.5 0.3 1" keyTimes="0;1" />
+            </g>
+            <g id="Top" transform="translate(0.000000, 10.000000)">
+                <mask id="mask-5" sketch:name="Mask" fill="white">
+                    <use xlink:href="#path-4"></use>
+                </mask>
+                <use id="Mask" opacity="0" fill="#D8D8D8" sketch:type="MSShapeGroup" xlink:href="#path-4"></use>
+                <path d="M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L56,45 L56,1.27897692e-13 L3.00269837,1.27897692e-13 Z" fill="url(#linearGradient-6)" sketch:type="MSShapeGroup" mask="url(#mask-5)">
+                    <animate begin="0.8s" dur="0.5s" attributeName="d" values="M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L51,25 L51,-20 L3.00269837,1.27897692e-13 Z;
+                        M3.00269837,1.27897692e-13 C1.34435385,1.27897692e-13 -4.39794873e-15,1.34085738 -1.03476577e-15,3.0069809 L8.17124146e-14,44 C0.0832958827,45.4090137 0.0117058737,46.8780591 4.48557525,49.2828738 C4.48557525,49.2828738 0.101798528,45.0234689 7,45 L56,45 L56,1.27897692e-13 L3.00269837,1.27897692e-13 Z" fill="freeze"  calcMode="spline" keySplines="0.2 1 0.8 1" keyTimes="0;1" />
+                </path>
+            </g>
+            <g transform="translate(20, 7)">
+                <path d="M61,15 L61,29 L76,29 L76,42 L61,42 L61,69 L49,69 L49,3 L78,3 L78,15 L61,15 Z M82,69 L82,3 L94,3 L94,57 L111,57 L111,69 L82,69 Z M138,56 L129,56 L127,69 L114,69 L126,3 L141,3 L153,69 L140,69 L138,56 Z M132,33 L131,44 L137,44 L136,33 L134,20 L132,33 Z M172,3 C174.651923,3 177.052072,3.33189323 179,4 C181.427094,4.65948608 183.310756,5.76579685 185,7 C186.470494,8.86351349 187.70095,10.8864818 189,13 C189.463112,15.8807596 189.903646,18.9310165 190,23 C189.903646,27.0230109 189.326395,30.6896409 188,34 C187.017355,36.3793246 185.25522,38.6551639 183,40 L192,69 L179,69 L172,43 L169,43 L169,69 L157,69 L157,3 L172,3 Z M169,15 L169,31 L171,31 C171.936847,31 172.821049,30.88618 174,31 C174.463162,30.4308932 175.20526,29.9918732 176,29 C176.531582,28.6910537 177.05263,27.8292737 177,27 C177.810528,25.6829215 178,24.2683015 178,23 C178,19.9105561 177.384217,18.0081361 176,17 C174.921046,15.60162 173.326326,15 171,15 L169,15 Z M226,3 L226,53 C226,58.9130101 224.647901,63.1502478 222,66 C219.239423,68.630066 215.243219,70 210,70 C199.318257,70 194,64.3928283 194,53 L194,3 L206,3 L206,53 C206.259155,54.9943015 206.619715,56.0615757 207,57 C208.061975,57.2722332 208.933328,57.574893 210,58 C210.976531,57.574893 211.83286,57.2722332 213,57 C213.215027,56.0615757 213.560563,54.9943015 214,53 L214,3 L226,3 Z M250,56 L248,48 L245,38 L244,38 L244,69 L232,69 L232,3 L244,3 L250,21 L254,34 L255,34 L259,20 L265,3 L277,3 L277,69 L265,69 L265,38 L264,38 L261,48 L259,56 L250,56 Z" id="FLARUM" fill="url(#linearGradient-6)" sketch:type="MSShapeGroup" opacity="0">
+                    <animate begin="1.2s" dur="0.2s" attributeType="CSS" attributeName="opacity" from="0" to="1" fill="freeze" />
+                    <!-- <animateTransform begin="1.2s" attributeName="transform" type="translate" dur="0.5s" from="-2 0" to="0 0" fill="freeze" calcMode="spline" keySplines="0.2 0.5 0.3 1" keyTimes="0;1" /> -->
+                </path>
+            </g>
+        </g>
+    </g>
+</svg>