Merge pull request #522 from pixelfed/frontend-ui-refactor

Frontend ui refactor
2024-09-20 00:08:01 +00:00 · 2018-10-22 00:51:55 -06:00 · 2018-10-22 00:51:55 -06:00 · 69b38eea96
commit 69b38eea96
parent 9352413ef2 6abb11df59
47 changed files with 1735 additions and 98 deletions
--- a/README.md
+++ b/README.md
@ -39,7 +39,7 @@ This guide assumes you have NGINX/Apache installed, along with the dependencies.
 Those will not be covered in these early docs.

 ```bash
-git clone https://github.com/dansup/pixelfed.git
+git clone https://github.com/pixelfed/pixelfed.git
 cd pixelfed
 composer install
 cp .env.example .env
--- a/app/Http/Controllers/Api/BaseApiController.php
+++ b/app/Http/Controllers/Api/BaseApiController.php
@ -15,6 +15,7 @@ use App\Transformer\Api\StatusTransformer;
 use Auth;
 use Cache;
 use Illuminate\Http\Request;
+use Illuminate\Support\Facades\URL;
 use League\Fractal;
 use League\Fractal\Serializer\ArraySerializer;

@ -119,6 +120,20 @@ class BaseApiController extends Controller
        ]);
    }

+    public function showTempMedia(Request $request, $profileId, $mediaId)
+    {
+        if (!$request->hasValidSignature()) {
+            abort(401);
+        }
+        $profile = Auth::user()->profile;
+        if($profile->id !== (int) $profileId) {
+            abort(403);
+        }
+        $media = Media::whereProfileId($profile->id)->findOrFail($mediaId);
+        $path = storage_path('app/'.$media->media_path);
+        return response()->file($path);
+    }
+
    public function uploadMedia(Request $request)
    {
        $this->validate($request, [
@ -130,10 +145,27 @@ class BaseApiController extends Controller
                ];
              },
        ]);
+
        $user = Auth::user();
        $profile = $user->profile;
+
+        if(config('pixelfed.enforce_account_limit') == true) {
+            $size = Media::whereUserId($user->id)->sum('size') / 1000;
+            $limit = (int) config('pixelfed.max_account_size');
+            if ($size >= $limit) {
+               abort(403, 'Account size limit reached.');
+            }
+        }
+
+        $recent = Media::whereProfileId($profile->id)->whereNull('status_id')->count();
+
+        if($recent > 50) {
+            abort(403);
+        }
+
        $monthHash = hash('sha1', date('Y').date('m'));
        $userHash = hash('sha1', $user->id.(string) $user->created_at);
+
        $photo = $request->file('file');

        $storagePath = "public/m/{$monthHash}/{$userHash}";
@ -152,9 +184,21 @@ class BaseApiController extends Controller
        $media->filter_name = null;
        $media->save();

+        $url = URL::temporarySignedRoute(
+            'temp-media', now()->addHours(1), ['profileId' => $profile->id, 'mediaId' => $media->id]
+        );
        ImageOptimize::dispatch($media);
-        $resource = new Fractal\Resource\Item($media, new MediaTransformer());
-        $res = $this->fractal->createData($resource)->toArray();
+
+        $res = [
+            'id'          => $media->id,
+            'type'        => $media->activityVerb(),
+            'url'         => $url,
+            'remote_url'  => null,
+            'preview_url' => $url,
+            'text_url'    => null,
+            'meta'        => $media->metadata,
+            'description' => null,
+        ];

        return response()->json($res);
    }
--- a/app/Http/Controllers/Auth/RegisterController.php
+++ b/app/Http/Controllers/Auth/RegisterController.php
@ -39,7 +39,6 @@ class RegisterController extends Controller
    public function __construct()
    {
        $this->middleware('guest');
-        $this->openRegistrationCheck();
    }

    /**
@ -105,11 +104,36 @@ class RegisterController extends Controller
        }
    }

-    public function openRegistrationCheck()
+    /**
+     * Show the application registration form.
+     *
+     * @return \Illuminate\Http\Response
+     */
+    public function showRegistrationForm()
    {
-        $openRegistration = config('pixelfed.open_registration');
-        if (false == $openRegistration) {
-            abort(403);
+        $view = config('pixelfed.open_registration') == true ? 'auth.register' : 'site.closed-registration';
+        return view($view);
+    }
+
+    /**
+     * Handle a registration request for the application.
+     *
+     * @param  \Illuminate\Http\Request  $request
+     * @return \Illuminate\Http\Response
+     */
+    public function register(Request $request)
+    {
+        if(false == config('pixelfed.open_registration')) {
+            return abort(403);
        }
+
+        $this->validator($request->all())->validate();
+
+        event(new Registered($user = $this->create($request->all())));
+
+        $this->guard()->login($user);
+
+        return $this->registered($request, $user)
+                        ?: redirect($this->redirectPath());
    }
 }
--- a/app/Http/Controllers/InternalApiController.php
+++ b/app/Http/Controllers/InternalApiController.php
@ -0,0 +1,138 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use App\{
+    Like,
+    Media,
+    Profile,
+    Status,
+};
+use Auth,Cache;
+use League\Fractal;
+use App\Transformer\Api\{
+    AccountTransformer,
+    StatusTransformer,
+};
+use App\Jobs\StatusPipeline\NewStatusPipeline;
+use League\Fractal\Serializer\ArraySerializer;
+use League\Fractal\Pagination\IlluminatePaginatorAdapter;
+
+class InternalApiController extends Controller
+{
+    protected $fractal;
+
+    public function __construct()
+    {
+        $this->middleware('auth');
+        $this->fractal = new Fractal\Manager();
+        $this->fractal->setSerializer(new ArraySerializer());
+    }
+
+    public function status(Request $request, $username, int $postid)
+    {
+        $auth = Auth::user()->profile;
+        $profile = Profile::whereUsername($username)->first();
+        $status = Status::whereProfileId($profile->id)->find($postid);
+        $status = new Fractal\Resource\Item($status, new StatusTransformer());
+        $user = new Fractal\Resource\Item($auth, new AccountTransformer());
+        $res = [];
+        $res['status'] = $this->fractal->createData($status)->toArray();
+        $res['user'] = $this->fractal->createData($user)->toArray();
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT);
+    }
+
+    public function statusComments(Request $request, $username, int $postId)
+    {
+        $this->validate($request, [
+            'min_id'    => 'nullable|integer|min:1',
+            'max_id'    => 'nullable|integer|min:1|max:'.PHP_INT_MAX,
+            'limit'     => 'nullable|integer|min:5|max:50'
+        ]);
+        $limit = $request->limit ?? 10;
+        $auth = Auth::user()->profile;
+        $profile = Profile::whereUsername($username)->first();
+        $status = Status::whereProfileId($profile->id)->find($postId);
+        if($request->filled('min_id') || $request->filled('max_id')) {
+            $q = false;
+            $limit = 50;
+            if($request->filled('min_id')) {
+                $replies = $status->comments()
+                ->select('id', 'caption', 'rendered', 'profile_id', 'created_at')
+                ->where('id', '>=', $request->min_id)
+                ->orderBy('id', 'desc')
+                ->paginate($limit);
+            }
+            if($request->filled('max_id')) {
+                $replies = $status->comments()
+                ->select('id', 'caption', 'rendered', 'profile_id', 'created_at')
+                ->where('id', '<=', $request->max_id)
+                ->orderBy('id', 'desc')
+                ->paginate($limit);
+            }
+        } else {
+            $replies = $status->comments()
+            ->select('id', 'caption', 'rendered', 'profile_id', 'created_at')
+            ->orderBy('id', 'desc')
+            ->paginate($limit);
+        }
+
+        $resource = new Fractal\Resource\Collection($replies, new StatusTransformer(), 'data');
+        $resource->setPaginator(new IlluminatePaginatorAdapter($replies));
+        $res = $this->fractal->createData($resource)->toArray();
+        return response()->json($res, 200, [], JSON_PRETTY_PRINT);
+    }
+
+    public function compose(Request $request)
+    {
+        $this->validate($request, [
+            'caption' => 'nullable|string',
+            'media.*'   => 'required',
+            'media.*.id' => 'required|integer|min:1',
+            'media.*.filter' => 'nullable|string|max:30',
+            'media.*.license' => 'nullable|string|max:80',
+            'visibility' => 'required|string|in:public,private|min:2|max:10'
+        ]);
+
+        $profile = Auth::user()->profile;
+        $visibility = $request->input('visibility');
+        $medias = $request->input('media');
+        $attachments = [];
+        $status = new Status;
+
+        foreach($medias as $media) {
+            $m = Media::findOrFail($media['id']);
+            if($m->profile_id !== $profile->id || $m->status_id) {
+                abort(403, 'Invalid media id');
+            }
+            $m->filter_class = $media['filter'];
+            $m->license = $media['license'];
+            if($media['cw'] == true) {
+                $m->is_nsfw = true;
+                $status->is_nsfw = true;
+            }
+            $m->save();
+            $attachments[] = $m;
+        }
+
+        $status->caption = strip_tags($request->caption);
+        $status->visibility = 'draft';
+        $status->scope = 'draft';
+        $status->profile_id = $profile->id;
+        $status->save();
+
+        foreach($attachments as $media) {
+            $media->status_id = $status->id;
+            $media->save();
+        }
+
+        $status->visibility = $visibility;
+        $status->scope = $visibility;
+        $status->save();
+
+        NewStatusPipeline::dispatch($status);
+
+        return $status->url();
+    }
+}
--- a/app/Transformer/Api/MediaTransformer.php
+++ b/app/Transformer/Api/MediaTransformer.php
@ -16,7 +16,7 @@ class MediaTransformer extends Fractal\TransformerAbstract
            'remote_url'  => null,
            'preview_url' => $media->thumbnailUrl(),
            'text_url'    => null,
-            'meta'        => null,
+            'meta'        => $media->metadata,
            'description' => null,
        ];
    }
--- a/app/Transformer/Api/StatusTransformer.php
+++ b/app/Transformer/Api/StatusTransformer.php
@ -26,7 +26,7 @@ class StatusTransformer extends Fractal\TransformerAbstract
            // TODO: fixme
            'reblog' => null,

-            'content'          => "<p>$status->rendered</p>",
+            'content'          => "$status->rendered",
            'created_at'       => $status->created_at->format('c'),
            'emojis'           => [],
            'reblogs_count'    => $status->shares()->count(),
--- a/config/pixelfed.php
+++ b/config/pixelfed.php
@ -71,10 +71,19 @@ return [
    |
    */
    'open_registration' => env('OPEN_REGISTRATION', true),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Enable Google Recaptcha v2
+    |--------------------------------------------------------------------------
+    |
+    | Enable/disable recaptcha on login/registration forms. API Keys required.
+    |
+    */
    'recaptcha'         => env('RECAPTCHA_ENABLED', false),

-    'remote_follow_enabled' => env('REMOTE_FOLLOW', false),

+    'remote_follow_enabled' => env('REMOTE_FOLLOW', false),
    'activitypub_enabled' => env('ACTIVITY_PUB', false),

    /*
@ -159,5 +168,5 @@ return [
    'image_quality'  => (int) env('IMAGE_QUALITY', 80),

    'media_types' => env('MEDIA_TYPES', 'image/jpeg,image/png,image/gif'),
-
+    'enforce_account_limit' => env('LIMIT_ACCOUNT_SIZE', true),
 ];
--- a/contrib/docker/start.sh
+++ b/contrib/docker/start.sh
@ -8,6 +8,9 @@ php artisan storage:link
 # Migrate database if the app was upgraded
 php artisan migrate --force

+# Run other specific migratins if required
+php artisan update
+
 # Run a worker if it is set as embedded
 if [ $HORIZON_EMBED = true ]; then
 	php artisan horizon &
--- a/package-lock.json
+++ b/package-lock.json
@ -144,6 +144,11 @@
            "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
            "dev": true
        },
+        "ansi-escapes": {
+            "version": "1.4.0",
+            "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-1.4.0.tgz",
+            "integrity": "sha1-06ioOzGapneTZisT52HHkRQiMG4="
+        },
        "ansi-html": {
            "version": "0.0.7",
            "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
@ -153,8 +158,7 @@
        "ansi-regex": {
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-            "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-            "dev": true
+            "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
        },
        "ansi-styles": {
            "version": "3.2.1",
@ -985,6 +989,23 @@
                "babel-types": "^6.24.1"
            }
        },
+        "babel-polyfill": {
+            "version": "6.23.0",
+            "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.23.0.tgz",
+            "integrity": "sha1-g2TKYt+Or7gwSZ9pkXdGbDsDSZ0=",
+            "requires": {
+                "babel-runtime": "^6.22.0",
+                "core-js": "^2.4.0",
+                "regenerator-runtime": "^0.10.0"
+            },
+            "dependencies": {
+                "regenerator-runtime": {
+                    "version": "0.10.5",
+                    "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+                    "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+                }
+            }
+        },
        "babel-preset-env": {
            "version": "1.7.0",
            "resolved": "https://registry.npmjs.org/babel-preset-env/-/babel-preset-env-1.7.0.tgz",
@ -1054,7 +1075,6 @@
            "version": "6.26.0",
            "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
            "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-            "dev": true,
            "requires": {
                "core-js": "^2.4.0",
                "regenerator-runtime": "^0.11.0"
@ -1308,10 +1328,22 @@
            }
        },
        "bootstrap": {
-            "version": "4.1.0",
-            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.0.tgz",
-            "integrity": "sha512-kCo82nE8qYVfOa/Z3hL98CPgPIEkh6iPdiJrUJMQ9n9r0+6PEET7cmhLlV0XVYmEj5QtKIOaSGMLxy5jSFhKog==",
-            "dev": true
+            "version": "4.1.3",
+            "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.1.3.tgz",
+            "integrity": "sha512-rDFIzgXcof0jDyjNosjv4Sno77X4KuPeFxG2XZZv1/Kc8DRVGVADdoQyyOVDwPqL36DDmtCQbrpMCqvpPLJQ0w=="
+        },
+        "bootstrap-vue": {
+            "version": "2.0.0-rc.11",
+            "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.11.tgz",
+            "integrity": "sha512-LxR+oL8yKr1DVoWUWTX+XhiT0xaTMH6142u2VSFDm4tewTH8HIrzN2YIl7HLZrw2DIuE9bRMIdWJqqn3aQe7Hw==",
+            "requires": {
+                "bootstrap": "^4.1.1",
+                "lodash.get": "^4.4.2",
+                "lodash.startcase": "^4.4.0",
+                "opencollective": "^1.0.3",
+                "popper.js": "^1.12.9",
+                "vue-functional-data-merge": "^2.0.5"
+            }
        },
        "brace-expansion": {
            "version": "1.1.11",
@ -1626,6 +1658,11 @@
                "supports-color": "^5.3.0"
            }
        },
+        "chardet": {
+            "version": "0.4.2",
+            "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
+            "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
+        },
        "charenc": {
            "version": "0.0.2",
            "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
@ -1737,6 +1774,19 @@
                "source-map": "~0.6.0"
            }
        },
+        "cli-cursor": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+            "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
+            "requires": {
+                "restore-cursor": "^2.0.0"
+            }
+        },
+        "cli-width": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-2.2.0.tgz",
+            "integrity": "sha1-/xnt6Kml5XkyQUewwR8PvLq+1jk="
+        },
        "cliui": {
            "version": "3.2.0",
            "resolved": "https://registry.npmjs.org/cliui/-/cliui-3.2.0.tgz",
@ -2061,8 +2111,7 @@
        "core-js": {
            "version": "2.5.7",
            "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.5.7.tgz",
-            "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw==",
-            "dev": true
+            "integrity": "sha512-RszJCAxg/PP6uzXVXL6BsxSXx/B05oJAQ2vkJRjyjrEcNVycaqOmNb5OTxZPE3xa5gwZduqza6L9JOCenh/Ecw=="
        },
        "core-util-is": {
            "version": "1.0.2",
@ -2148,13 +2197,28 @@
            }
        },
        "cross-env": {
-            "version": "5.1.4",
-            "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.1.4.tgz",
-            "integrity": "sha512-Mx8mw6JWhfpYoEk7PGvHxJMLQwQHORAs8+2bX+C1lGQ4h3GkDb1zbzC2Nw85YH9ZQMlO0BHZxMacgrfPmMFxbg==",
+            "version": "5.2.0",
+            "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
+            "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
            "dev": true,
            "requires": {
-                "cross-spawn": "^5.1.0",
+                "cross-spawn": "^6.0.5",
                "is-windows": "^1.0.0"
+            },
+            "dependencies": {
+                "cross-spawn": {
+                    "version": "6.0.5",
+                    "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+                    "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+                    "dev": true,
+                    "requires": {
+                        "nice-try": "^1.0.4",
+                        "path-key": "^2.0.1",
+                        "semver": "^5.5.0",
+                        "shebang-command": "^1.2.0",
+                        "which": "^1.2.9"
+                    }
+                }
            }
        },
        "cross-spawn": {
@ -2780,6 +2844,14 @@
            "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
            "dev": true
        },
+        "encoding": {
+            "version": "0.1.12",
+            "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+            "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+            "requires": {
+                "iconv-lite": "~0.4.13"
+            }
+        },
        "end-of-stream": {
            "version": "1.4.1",
            "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
@ -2977,8 +3049,7 @@
        "escape-string-regexp": {
            "version": "1.0.5",
            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-            "dev": true
+            "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
        },
        "escope": {
            "version": "3.6.0",
@ -3275,6 +3346,16 @@
                }
            }
        },
+        "external-editor": {
+            "version": "2.2.0",
+            "resolved": "http://registry.npmjs.org/external-editor/-/external-editor-2.2.0.tgz",
+            "integrity": "sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==",
+            "requires": {
+                "chardet": "^0.4.0",
+                "iconv-lite": "^0.4.17",
+                "tmp": "^0.0.33"
+            }
+        },
        "extglob": {
            "version": "2.0.4",
            "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
@ -3385,6 +3466,14 @@
                "websocket-driver": ">=0.5.1"
            }
        },
+        "figures": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/figures/-/figures-2.0.0.tgz",
+            "integrity": "sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=",
+            "requires": {
+                "escape-string-regexp": "^1.0.5"
+            }
+        },
        "file-loader": {
            "version": "0.11.2",
            "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-0.11.2.tgz",
@ -4437,7 +4526,6 @@
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
            "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-            "dev": true,
            "requires": {
                "ansi-regex": "^2.0.0"
            }
@ -4805,8 +4893,7 @@
        "iconv-lite": {
            "version": "0.4.19",
            "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz",
-            "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==",
-            "dev": true
+            "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ=="
        },
        "icss-replace-symbols": {
            "version": "1.1.0",
@ -4929,6 +5016,50 @@
            "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
            "dev": true
        },
+        "inquirer": {
+            "version": "3.0.6",
+            "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-3.0.6.tgz",
+            "integrity": "sha1-4EqqnQW3o8ubD0B9BDdfBEcZA0c=",
+            "requires": {
+                "ansi-escapes": "^1.1.0",
+                "chalk": "^1.0.0",
+                "cli-cursor": "^2.1.0",
+                "cli-width": "^2.0.0",
+                "external-editor": "^2.0.1",
+                "figures": "^2.0.0",
+                "lodash": "^4.3.0",
+                "mute-stream": "0.0.7",
+                "run-async": "^2.2.0",
+                "rx": "^4.1.0",
+                "string-width": "^2.0.0",
+                "strip-ansi": "^3.0.0",
+                "through": "^2.3.6"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+                    "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+                },
+                "chalk": {
+                    "version": "1.1.3",
+                    "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+                    "requires": {
+                        "ansi-styles": "^2.2.1",
+                        "escape-string-regexp": "^1.0.2",
+                        "has-ansi": "^2.0.0",
+                        "strip-ansi": "^3.0.0",
+                        "supports-color": "^2.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+                }
+            }
+        },
        "internal-ip": {
            "version": "1.2.0",
            "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-1.2.0.tgz",
@ -5123,8 +5254,7 @@
        "is-fullwidth-code-point": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-            "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-            "dev": true
+            "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8="
        },
        "is-glob": {
            "version": "4.0.0",
@ -5206,6 +5336,11 @@
            "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
            "dev": true
        },
+        "is-promise": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.1.0.tgz",
+            "integrity": "sha1-eaKp7OfwlugPNtKy87wWwf9L8/o="
+        },
        "is-regex": {
            "version": "1.0.4",
            "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
@ -5218,8 +5353,7 @@
        "is-stream": {
            "version": "1.1.0",
            "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-            "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-            "dev": true
+            "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
        },
        "is-svg": {
            "version": "2.1.0",
@ -5513,10 +5647,9 @@
            }
        },
        "lodash": {
-            "version": "4.17.5",
-            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
-            "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw==",
-            "dev": true
+            "version": "4.17.11",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
+            "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
        },
        "lodash._baseassign": {
            "version": "3.2.0",
@ -5593,6 +5726,11 @@
            "integrity": "sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=",
            "dev": true
        },
+        "lodash.get": {
+            "version": "4.4.2",
+            "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
+            "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
+        },
        "lodash.isarguments": {
            "version": "3.1.0",
            "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
@ -5634,6 +5772,11 @@
            "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
            "dev": true
        },
+        "lodash.startcase": {
+            "version": "4.4.0",
+            "resolved": "https://registry.npmjs.org/lodash.startcase/-/lodash.startcase-4.4.0.tgz",
+            "integrity": "sha1-lDbjTtJgk+1/+uGTYUQ1CRXZrdg="
+        },
        "lodash.tail": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
@ -5874,8 +6017,7 @@
        "mimic-fn": {
            "version": "1.2.0",
            "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
-            "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==",
-            "dev": true
+            "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
        },
        "minimalistic-assert": {
            "version": "1.0.1",
@ -6005,6 +6147,11 @@
            "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
            "dev": true
        },
+        "mute-stream": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
+            "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
+        },
        "nan": {
            "version": "2.11.0",
            "resolved": "https://registry.npmjs.org/nan/-/nan-2.11.0.tgz",
@ -6048,6 +6195,12 @@
            "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
            "dev": true
        },
+        "nice-try": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+            "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+            "dev": true
+        },
        "no-case": {
            "version": "2.3.2",
            "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@ -6057,6 +6210,15 @@
                "lower-case": "^1.1.1"
            }
        },
+        "node-fetch": {
+            "version": "1.6.3",
+            "resolved": "http://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
+            "integrity": "sha1-3CNO3WSJmC1Y6PDbT2lQKavNjAQ=",
+            "requires": {
+                "encoding": "^0.1.11",
+                "is-stream": "^1.0.1"
+            }
+        },
        "node-forge": {
            "version": "0.7.5",
            "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.5.tgz",
@ -6288,8 +6450,7 @@
        "object-assign": {
            "version": "4.1.1",
            "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-            "dev": true
+            "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
        },
        "object-component": {
            "version": "0.0.3",
@ -6408,6 +6569,65 @@
                "wrappy": "1"
            }
        },
+        "onetime": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
+            "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
+            "requires": {
+                "mimic-fn": "^1.0.0"
+            }
+        },
+        "opencollective": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/opencollective/-/opencollective-1.0.3.tgz",
+            "integrity": "sha1-ruY3K8KBRFg2kMPKja7PwSDdDvE=",
+            "requires": {
+                "babel-polyfill": "6.23.0",
+                "chalk": "1.1.3",
+                "inquirer": "3.0.6",
+                "minimist": "1.2.0",
+                "node-fetch": "1.6.3",
+                "opn": "4.0.2"
+            },
+            "dependencies": {
+                "ansi-styles": {
+                    "version": "2.2.1",
+                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+                    "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
+                },
+                "chalk": {
+                    "version": "1.1.3",
+                    "resolved": "http://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+                    "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+                    "requires": {
+                        "ansi-styles": "^2.2.1",
+                        "escape-string-regexp": "^1.0.2",
+                        "has-ansi": "^2.0.0",
+                        "strip-ansi": "^3.0.0",
+                        "supports-color": "^2.0.0"
+                    }
+                },
+                "minimist": {
+                    "version": "1.2.0",
+                    "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+                    "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
+                },
+                "opn": {
+                    "version": "4.0.2",
+                    "resolved": "http://registry.npmjs.org/opn/-/opn-4.0.2.tgz",
+                    "integrity": "sha1-erwi5kTf9jsKltWrfyeQwPAavJU=",
+                    "requires": {
+                        "object-assign": "^4.0.1",
+                        "pinkie-promise": "^2.0.0"
+                    }
+                },
+                "supports-color": {
+                    "version": "2.0.0",
+                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+                    "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+                }
+            }
+        },
        "opn": {
            "version": "5.3.0",
            "resolved": "https://registry.npmjs.org/opn/-/opn-5.3.0.tgz",
@ -6450,8 +6670,7 @@
        "os-tmpdir": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-            "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-            "dev": true
+            "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
        },
        "osenv": {
            "version": "0.1.5",
@ -6699,14 +6918,12 @@
        "pinkie": {
            "version": "2.0.4",
            "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-            "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-            "dev": true
+            "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA="
        },
        "pinkie-promise": {
            "version": "2.0.1",
            "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
            "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-            "dev": true,
            "requires": {
                "pinkie": "^2.0.0"
            }
@ -6721,10 +6938,9 @@
            }
        },
        "popper.js": {
-            "version": "1.14.3",
-            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.3.tgz",
-            "integrity": "sha1-FDj5jQRqz3tNeM1QK/QYrGTU8JU=",
-            "dev": true
+            "version": "1.14.4",
+            "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.14.4.tgz",
+            "integrity": "sha1-juwdj/AqWjoVLdQ0FKFce3n9abY="
        },
        "portfinder": {
            "version": "1.0.17",
@ -9194,8 +9410,7 @@
        "regenerator-runtime": {
            "version": "0.11.1",
            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-            "dev": true
+            "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
        },
        "regenerator-transform": {
            "version": "0.10.1",
@ -9413,6 +9628,15 @@
                }
            }
        },
+        "restore-cursor": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-2.0.0.tgz",
+            "integrity": "sha1-n37ih/gv0ybU/RYpI9YhKe7g368=",
+            "requires": {
+                "onetime": "^2.0.0",
+                "signal-exit": "^3.0.2"
+            }
+        },
        "ret": {
            "version": "0.1.15",
            "resolved": "https://registry.npmjs.org/ret/-/ret-0.1.15.tgz",
@ -9471,6 +9695,14 @@
                "inherits": "^2.0.1"
            }
        },
+        "run-async": {
+            "version": "2.3.0",
+            "resolved": "https://registry.npmjs.org/run-async/-/run-async-2.3.0.tgz",
+            "integrity": "sha1-A3GrSuC91yDUFm19/aZP96RFpsA=",
+            "requires": {
+                "is-promise": "^2.1.0"
+            }
+        },
        "run-queue": {
            "version": "1.0.3",
            "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
@ -9480,6 +9712,11 @@
                "aproba": "^1.1.1"
            }
        },
+        "rx": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
+            "integrity": "sha1-pfE/957zt0D+MKqAP7CfmIBdR4I="
+        },
        "safe-buffer": {
            "version": "5.1.2",
            "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
@ -9801,8 +10038,7 @@
        "signal-exit": {
            "version": "3.0.2",
            "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-            "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-            "dev": true
+            "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
        },
        "slash": {
            "version": "1.0.0",
@ -10286,7 +10522,6 @@
            "version": "2.1.1",
            "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
            "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-            "dev": true,
            "requires": {
                "is-fullwidth-code-point": "^2.0.0",
                "strip-ansi": "^4.0.0"
@ -10295,14 +10530,12 @@
                "ansi-regex": {
                    "version": "3.0.0",
                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-                    "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-                    "dev": true
+                    "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
                },
                "strip-ansi": {
                    "version": "4.0.0",
                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
                    "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-                    "dev": true,
                    "requires": {
                        "ansi-regex": "^3.0.0"
                    }
@ -10322,7 +10555,6 @@
            "version": "3.0.1",
            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
            "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-            "dev": true,
            "requires": {
                "ansi-regex": "^2.0.0"
            }
@ -10414,8 +10646,7 @@
        "through": {
            "version": "2.3.8",
            "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-            "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-            "dev": true
+            "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
        },
        "through2": {
            "version": "2.0.3",
@ -10448,6 +10679,14 @@
                "setimmediate": "^1.0.4"
            }
        },
+        "tmp": {
+            "version": "0.0.33",
+            "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
+            "integrity": "sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==",
+            "requires": {
+                "os-tmpdir": "~1.0.2"
+            }
+        },
        "to-array": {
            "version": "0.1.4",
            "resolved": "https://registry.npmjs.org/to-array/-/to-array-0.1.4.tgz",
@ -10565,9 +10804,9 @@
            "integrity": "sha1-RXbBzuXi1j0gf+5S8boCgZSAvHU="
        },
        "twitter-text": {
-            "version": "2.0.4",
-            "resolved": "https://registry.npmjs.org/twitter-text/-/twitter-text-2.0.4.tgz",
-            "integrity": "sha512-SUNLKjvp2RXUeNRZR/k5kH6DXcwWFhqdorbz6MZTuASsPRnSl1uG8IVmjlnS2d4iMbIjDa5jrOd3kvfTfXEdSg==",
+            "version": "2.0.5",
+            "resolved": "https://registry.npmjs.org/twitter-text/-/twitter-text-2.0.5.tgz",
+            "integrity": "sha512-fjbx5ztUx79ju77vEhdWeeOB5tQ55r6L/EgUK45hnOYB8AkVzq3zKMibSj5SCkFFAmsoVKD8gwYADrZdzbsQCg==",
            "requires": {
                "punycode": "1.4.1"
            }
@ -10985,6 +11224,11 @@
            "integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ==",
            "dev": true
        },
+        "vue-functional-data-merge": {
+            "version": "2.0.7",
+            "resolved": "https://registry.npmjs.org/vue-functional-data-merge/-/vue-functional-data-merge-2.0.7.tgz",
+            "integrity": "sha512-pvLc+H+x2prwBj/uSEIITyxjz/7ZUVVK8uYbrYMmhDvMXnzh9OvQvVEwcOSBQjsubd4Eq41/CSJaWzy4hemMNQ=="
+        },
        "vue-hot-reload-api": {
            "version": "2.3.0",
            "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.0.tgz",
--- a/package.json
+++ b/package.json
@ -11,21 +11,22 @@
    },
    "devDependencies": {
        "axios": "^0.18",
-        "bootstrap": "^4.0.0",
-        "cross-env": "^5.1",
+        "bootstrap": "^4.1.3",
+        "cross-env": "^5.2.0",
        "jquery": "^3.2",
        "laravel-mix": "^2.1.14",
-        "lodash": "^4.17.4",
-        "popper.js": "^1.12",
+        "lodash": "^4.17.11",
+        "popper.js": "^1.14.4",
        "vue": "^2.5.17"
    },
    "dependencies": {
+        "bootstrap-vue": "^2.0.0-rc.11",
        "filesize": "^3.6.1",
        "infinite-scroll": "^3.0.4",
        "laravel-echo": "^1.4.0",
        "pusher-js": "^4.2.2",
        "socket.io-client": "^2.1.1",
        "sweetalert": "^2.1.0",
-        "twitter-text": "^2.0.4"
+        "twitter-text": "^2.0.5"
    }
 }
--- a/public/css/app.css
+++ b/public/css/app.css
--- a/public/js/app.js
+++ b/public/js/app.js
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
--- a/resources/assets/js/bootstrap.js
+++ b/resources/assets/js/bootstrap.js
@ -1,30 +1,66 @@
 window._ = require('lodash');
 window.Popper = require('popper.js').default;
 import swal from 'sweetalert';
+
+window.pixelfed = {};
+window.$ = window.jQuery = require('jquery');
+require('bootstrap');
+window.Vue = require('vue');
+import BootstrapVue from 'bootstrap-vue'
+Vue.use(BootstrapVue);
+
 try {
-    window.pixelfed = {};
-    window.$ = window.jQuery = require('jquery');
-    require('bootstrap');
    window.InfiniteScroll = require('infinite-scroll');
    window.filesize = require('filesize');
    window.typeahead = require('./lib/typeahead');
    window.Bloodhound = require('./lib/bloodhound');
-    window.Vue = require('vue');
-
    require('./components/localstorage');
    require('./components/likebutton');
    require('./components/commentform');
    require('./components/searchform');
    require('./components/bookmarkform');
    require('./components/statusform');
+    // require('./components/embed');
+    // require('./components/shortcuts');

    Vue.component(
        'follow-suggestions',
        require('./components/FollowSuggestions.vue')
    );
+
+    // Vue.component(
+    //     'circle-panel',
+    //     require('./components/CirclePanel.vue')
+    // );
+
+    Vue.component(
+        'post-comments',
+        require('./components/PostComments.vue')
+    );
+
+    Vue.component(
+        'passport-clients',
+        require('./components/passport/Clients.vue')
+    );
+
+    Vue.component(
+        'passport-authorized-clients',
+        require('./components/passport/AuthorizedClients.vue')
+    );
+
+    Vue.component(
+        'passport-personal-access-tokens',
+        require('./components/passport/PersonalAccessTokens.vue')
+    );
+
 } catch (e) {}

-$('[data-toggle="tooltip"]').tooltip();
+$(document).ready(function() {
+  $(function () {
+    $('[data-toggle="tooltip"]').tooltip()
+  });
+});
+
 window.axios = require('axios');

 window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
@ -35,3 +71,38 @@ if (token) {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }

+// import Echo from "laravel-echo"
+
+// window.io = require('socket.io-client');
+
+// window.pixelfed.bootEcho = function() {
+//     window.Echo = new Echo({
+//         broadcaster: 'socket.io',
+//         host: window.location.hostname + ':2096',
+//         auth: {
+//             headers: {
+//                 Authorization: 'Bearer ' + token.content,
+//             },
+//         },
+//     });
+// }
+
+window.pixelfed.copyToClipboard = (str) => {
+  const el = document.createElement('textarea');
+  el.value = str;
+  el.setAttribute('readonly', '');
+  el.style.position = 'absolute';                 
+  el.style.left = '-9999px';
+  document.body.appendChild(el);
+  const selected = 
+    document.getSelection().rangeCount > 0
+      ? document.getSelection().getRangeAt(0)
+      : false;
+  el.select();
+  document.execCommand('copy');
+  document.body.removeChild(el);
+  if (selected) {
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(selected);
+  }
+};
--- a/resources/assets/sass/app.scss
+++ b/resources/assets/sass/app.scss
@ -17,4 +17,6 @@

@import "components/notifications";

-@import "components/switch";
+@import "components/switch";
+
+@import '~bootstrap-vue/dist/bootstrap-vue.css';
--- a/resources/assets/sass/custom.scss
+++ b/resources/assets/sass/custom.scss
@ -33,6 +33,10 @@ body, button, input, textarea {
  }
 }

+.dropdown-menu {
+  min-width: 13rem;
+}
+
 .text-dark {
  color: #212529 !important;
 }
@ -257,6 +261,7 @@ body, button, input, textarea {
    transform: translateY(0);
  }
 }
+
 .details-animated[open] {
  animation-name: fadeInDown;
  animation-duration: 0.5s;
@ -308,3 +313,35 @@ details summary::-webkit-details-marker {
  border: 0 !important;
  border-radius: 0 !important;
 }
+
+.input-elevated {
+  font-size: 16px;
+  line-height: 1.5;
+  border: none;
+  background: #FFFFFF;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.08);
+  border-radius: 5px;
+  padding: .5em 1em .5em .5em;
+} 
+
+.input-elevated::placeholder {
+  color: #838D99;
+}
+
+.input-elevated:focus {
+  outline: none;
+  box-shadow: 0 4px 10px 0 rgba(0,0,0,0.16);
+}
+
+.icon-wrapper {
+  display: inline-flex;
+  padding: 14px;
+  border-radius: 50%;
+  background: #10c5f8;
+  background: -webkit-gradient(linear,left top,right bottom,from(#6736dd),to(#10c5f8));
+  background: linear-gradient(to bottom right,#6736dd,#10c5f8);
+}
+
+.border-left-blue {
+  border-left: 3px solid #10c5f8;
+}
--- a/resources/lang/de/profile.php
+++ b/resources/lang/de/profile.php
@ -1,8 +1,12 @@
 <?php

 return [
-  'emptyTimeline'  => 'Dieser Benutzer hat noch nichts gepostet!',
-  'emptyFollowers' => 'Diesem Benutzer folgt noch niemand!',
-  'emptyFollowing' => 'Dieser Benutzer folgt noch niemanden!',
-  'savedWarning'   => 'Nur du kannst sehen was du gespeichert hast',
+  'emptyTimeline'         => 'Dieser Benutzer hat noch nichts gepostet!',
+  'emptyFollowers'        => 'Diesem Benutzer folgt noch niemand!',
+  'emptyFollowing'        => 'Dieser Benutzer folgt noch niemanden!',
+  'emptySaved'            => 'Du hast noch keinen Post gespeichert!',
+  'savedWarning'          => 'Nur du kannst sehen was du gespeichert hast',
+  'privateProfileWarning' => 'Dieser Account ist privat',
+  'alreadyFollow'         => ':username bereits folgen?',
+  'loginToSeeProfile'     => 'um deren Bilder und Videos zu sehen.',
 ];
--- a/resources/lang/fr/auth.php
+++ b/resources/lang/fr/auth.php
@ -11,6 +11,6 @@ return [
    | these language lines according to your application's requirements.
    |
    */
-    'failed'   => 'Ces informations ne correspondent pas à nos dossiers.',
-    'throttle' => 'Trop de tentatives de connexion. Veuillez réessayer dans :seconds secondes.',
+    'failed'   => 'Ces informations d\'identification ne correspondent à aucune se trouvant dans notre base de données.',
+    'throttle' => 'Beaucoup de tentatives de connexion ont été effectuées. Veuillez réessayer dans :seconds secondes.',
 ];
--- a/resources/lang/fr/pagination.php
+++ b/resources/lang/fr/pagination.php
@ -11,6 +11,6 @@ return [
    | you want to customize your views to better match your application.
    |
    */
-    'previous' => '« Précédent',
-    'next'     => 'Suivant »',
+    'previous' => '« Précédente',
+    'next'     => 'Suivante »',
 ];
--- a/resources/lang/fr/passwords.php
+++ b/resources/lang/fr/passwords.php
@ -15,5 +15,5 @@ return [
    'reset'    => 'Votre mot de passe a été réinitialisé !',
    'sent'     => 'Nous vous avons envoyé un e-mail avec un lien de réinitialisation de mot de passe !',
    'token'    => 'Ce jeton de réinitialisation de mot de passe est invalide.',
-    'user'     => 'Aucun utilisateur n&apos;est inscrit avec cette adresse e-mail.',
+    'user'     => 'Aucun·e utilisateur·rice ne correspond à cette adresse de e-mail.',
 ];
--- a/resources/lang/fr/profile.php
+++ b/resources/lang/fr/profile.php
@ -1,8 +1,12 @@
 <?php

 return [
-  'emptyTimeline'  => 'Cet utilisateur n\'a pas encore de messages !',
-  'emptyFollowers' => 'Cet utilisateur n`\'a pas encore d\'abonné-e-s!',
-  'emptyFollowing' => 'Cet utilisateur ne suit pas encore quelqu\'un!',
+  'emptyTimeline'  => 'Cet·te utilisateur·rice n\'a pas encore de publications !',
+  'emptyFollowers' => 'Cet·te utilisateur·rice n`\'a pas encore d\'abonné·e·s !',
+  'emptyFollowing' => 'Cet·te utilisateur·rice ne suit personne pour le moment !',
+  'emptySaved'     => 'Vous n\'avez sauvegardé aucune publication pour le moment !'
  'savedWarning'   => 'Vous seul pouvez voir ce que vous avez enregistré',
+  'privateProfileWarning' => 'Ce compte est privé',
+  'alreadyFollow'         => 'N\'êtes vous pas déjà abonné·e à :username ?',
+  'loginToSeeProfile'     => 'pour pouvoir consulter leurs photos et vidéos.',
 ];
--- a/resources/lang/fr/site.php
+++ b/resources/lang/fr/site.php
@ -2,15 +2,15 @@

 return [

-	'about'			=> 'Environ',
-	'help'			=> 'Aidez-moi',
-	'language'		=> 'La langue',
+	'about'			=> 'À propos',
+	'help'			=> 'Aide',
+	'language'		=> 'Langue',
 	'fediverse'		=> 'Fediverse',
 	'opensource'	=> 'Open Source',
-	'terms'			=> 'Termes',
-	'privacy'		=> 'Intimité',
-	'l10nWip'		=> 'Nous travaillons toujours sur le support de la localisation',
-	'currentLocale' => 'Locale actuelle',
+	'terms'			=> 'Conditions',
+	'privacy'		=> 'Vie privée',
+	'l10nWip'		=> 'Nous travaillons toujours sur la prise en charge des langues',
+	'currentLocale' => 'Langue actuelle',
 	'selectLocale'  => 'Sélectionnez l\'une des langues prises en charge',

-];
+];
--- a/resources/lang/gl/site.php
+++ b/resources/lang/gl/site.php
@ -0,0 +1,13 @@
+<?php
+return [
+	'about'			=> 'Acerca de',
+	'help'			=> 'Axuda',
+	'language'		=> 'Idioma',
+	'fediverse'		=> 'Fediverso',
+	'opensource'	=> 'Código aberto',
+	'terms'			=> 'Termos',
+	'privacy'		=> 'Intimidade',
+	'l10nWip'		=> 'Estamos a traballar no soporte da localización do servizo',
+	'currentLocale' => 'Locale actual',
+	'selectLocale'  => 'Escolla un dos idiomas admitidos',
+];
--- a/resources/lang/oc/site.php
+++ b/resources/lang/oc/site.php
@ -0,0 +1,16 @@
+<?php
+
+return [
+
+	'about'			=> 'A prepaus',
+	'help'			=> 'Ajuda',
+	'language'		=> 'Lenga',
+	'fediverse'		=> 'Fediverse',
+	'opensource'	=> 'Open Source',
+	'terms'			=> 'Tèrmes',
+	'privacy'		=> 'Privacitat',
+	'l10nWip'		=> 'Sèm encara a trabalhar sus la presa en carga de las traduccions',
+	'currentLocale' => 'Lenga actuala',
+	'selectLocale'  => 'Seleccionatz una de las lengas disponiblas',
+
+];
--- a/resources/views/site/closed-registration.blade.php
+++ b/resources/views/site/closed-registration.blade.php
@ -0,0 +1,14 @@
+@extends('layouts.app')
+
+@section('content')
+<div class="container">
+  <div class="error-page py-5 my-5">
+    <div class="card mx-5">
+      <div class="card-body p-5 text-center">
+        <h1>Registration is closed</h1>
+        <p class="lead mb-0">We have closed registrations on this instance.</p>
+      </div>
+    </div>
+  </div>
+</div>
+@endsection
--- a/resources/views/site/help.blade.php
+++ b/resources/views/site/help.blade.php
@ -6,6 +6,142 @@
    <h3 class="font-weight-bold">Help</h3>
  </div>
  <hr>
+  <div class="row">
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.getting-started')}}">Getting Started</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.hashtags')}}">Hashtags</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.sharing-media')}}">Sharing Photos & Videos</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.discover')}}">Discover</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.your-profile')}}">Your Profile</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.dm')}}">Direct Messaging</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.stories')}}">Stories</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.timelines')}}">Timelines</a>
+      </div>
+    </div>
+  </div>
+  <hr>
+
+  <div class="row">
+
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.community-guidelines')}}">Community Guidelines</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.blocking-accounts')}}">Blocking accounts</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.what-is-fediverse')}}">What is the fediverse?</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.safety-tips')}}">Safety Tips</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.controlling-visibility')}}">Controlling your visibility</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.report-something')}}">Report Something</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.abusive-activity')}}">Abuse/malicious activity</a>
+      </div>
+    </div>
+    <div class="col-12 col-md-6 mb-3">
+      <div class="bg-light p-4">
+        <a class="text-muted mb-0 h5 font-weight-bold" href="{{route('help.data-policy')}}">Data Policy</a>
+      </div>
+    </div>
+  </div>
+  {{-- <div class="card mb-3">
+  	<div class="card-body">
+  		<p class="h5 font-weight-bold">Using Pixelfed</p>
+  		<div class="row font-weight-bold text-muted">
+  			<div class="col-12 col-md-6">
+  				<ul>
+  					<li><a href="{{route('help.getting-started')}}">Getting Started</a></li>
+
+  					<li><a href="{{route('help.sharing-media')}}">Sharing Photos & Videos</a></li>
+  					<li><a href="{{route('help.your-profile')}}">Your Profile</a></li>
+  					<li><a href="{{route('help.stories')}}">Stories</a></li>
+  				</ul>
+  			</div>
+  			<div class="col-12 col-md-6">
+  				<ul>
+  					<li><a href="{{route('help.hashtags')}}">Hashtags</a></li>
+
+  					<li><a href="{{route('help.discover')}}">Discover</a></li>
+  					<li><a href="{{route('help.dm')}}">Direct Messaging</a></li>
+  					<li><a href="{{route('help.timelines')}}">Timelines</a></li>
+  				</ul>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+  <div class="card mb-3">
+  	<div class="card-body">
+  		<p class="h5 font-weight-bold">Privacy and Safety</p>
+  		<div class="row font-weight-bold text-muted">
+  			<div class="col-12 col-md-6">
+  				<ul>
+  					<li><a href="#">Community Guidelines</a></li>
+  					<li><a href="#">What is the fediverse?</a></li>
+  					<li><a href="#">Controlling your visibility</a></li>
+  					<li><a href="#">Abuse/malicious activity</a></li>
+  				</ul>
+  			</div>
+  			<div class="col-12 col-md-6">
+  				<ul>
+  					<li><a href="#">Blocking accounts</a></li>
+
+  					<li><a href="#">Safety Tips</a></li>
+  					<li><a href="#">Report Something</a></li>
+  					<li><a href="#">Data Policy</a></li>
+  				</ul>
+  			</div>
+  		</div>
+  	</div>
+  </div> --}}
@endsection

@push('meta')
--- a/resources/views/site/help/abusive-activity.blade.php
+++ b/resources/views/site/help/abusive-activity.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Abusive/Malicious Activity'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Abusive/Malicious Activity</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/blocking-accounts.blade.php
+++ b/resources/views/site/help/blocking-accounts.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Blocking Accounts'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Blocking Accounts</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/community-guidelines.blade.php
+++ b/resources/views/site/help/community-guidelines.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Community Guidelines'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Community Guidelines</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/controlling-visibility.blade.php
+++ b/resources/views/site/help/controlling-visibility.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Controlling Visibility'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Controlling Visibility</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/data-policy.blade.php
+++ b/resources/views/site/help/data-policy.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Data Policy'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Data Policy</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/discover.blade.php
+++ b/resources/views/site/help/discover.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Discover'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Discover</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/dm.blade.php
+++ b/resources/views/site/help/dm.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Direct Messages'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Direct Messages</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/embed.blade.php
+++ b/resources/views/site/help/embed.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Embed'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Embed</h3>
+  </div>
+  <hr>
+  <div class="card">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-12 col-md-3 text-center">
+          <div class="icon-wrapper">
+            <i class="far fa-question-circle fa-3x text-light"></i>
+          </div>
+        </div>
+        <div class="col-12 col-md-9 d-flex align-items-center">
+          <div class="text-center">
+            <p class="h3 font-weight-bold mb-0">This page isn't available</p>
+            <p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+@endsection
--- a/resources/views/site/help/getting-started.blade.php
+++ b/resources/views/site/help/getting-started.blade.php
@ -0,0 +1,87 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Getting Started'])
+
+@section('section')
+
+<div class="title">
+	<h3 class="font-weight-bold">Getting Started</h3>
+</div>
+<hr>
+<p class="font-weight-light">Welcome to Pixelfed.</p>
+<p class="font-weight-light">Pixelfed is a federated media sharing platform inspired by Instagram.</p>
+<hr>
+<p>
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
+		<i class="fas fa-chevron-down mr-2"></i>
+		How do I create a Pixelfed account?
+	</a>
+	<div class="collapse" id="collapse1">
+		<div>
+			To create an account using a web browser:
+			<ol>
+				<li>Go to <a href="{{config('app.url')}}">{{config('app.url')}}</a>.</li>
+				<li>Click on the register link at the top of the page.</li>
+				<li>Enter your name, email address, username and password.</li>
+				@if(config('pixelfed.enforce_email_verification') != true)
+				<li>Wait for an account verification email, it may take a few minutes.</li>
+				@endif
+			</ol>
+		</div>
+	</div>
+</p>
+<p>	
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
+		<i class="fas fa-chevron-down mr-2"></i>
+		How to I update profile info like name, bio, email?
+	</a>
+	<div class="collapse" id="collapse2">
+		<div>
+			You can update your account by visiting the <a href="{{route('settings')}}">account settings</a> page.
+		</div>
+	</div>
+</p>
+<p>	
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse3" role="button" aria-expanded="false" aria-controls="collapse3">
+		<i class="fas fa-chevron-down mr-2"></i>
+		What can I do if a username I want is taken but seems inactive?
+	</a>
+	<div class="collapse" id="collapse3">
+		<div class="mt-2">
+			If your desired username is taken you can add underscores, dashes, or numbers to make it unique.
+		</div>
+	</div>
+</p>
+<p>	
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse4" role="button" aria-expanded="false" aria-controls="collapse4">
+		<i class="fas fa-chevron-down mr-2"></i>
+		Why can't I change my username?
+	</a>
+	<div class="collapse" id="collapse4">
+		<div class="mt-2">
+			Pixelfed is a federated application, changing your username is not supported in every <a href="#">federated software</a> so we cannot allow username changes. Your best option is to create a new account with your desired username. 
+		</div>
+	</div>
+</p>
+<p>	
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse5" role="button" aria-expanded="false" aria-controls="collapse5">
+		<i class="fas fa-chevron-down mr-2"></i>
+		I recieved an email that I created an account, but I never signed up for one.
+	</a>
+	<div class="collapse" id="collapse5">
+		<div class="mt-2">
+			Someone may have registered your email by mistake. If you would like your email to be removed from the account please <a href="#">contact</a> us.
+		</div>
+	</div>
+</p>
+<p>	
+	<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse6" role="button" aria-expanded="false" aria-controls="collapse6">
+		<i class="fas fa-chevron-down mr-2"></i>
+		I can't create a new account because an account with this email already exists.
+	</a>
+	<div class="collapse" id="collapse6">
+		<div class="mt-2">
+			You might have registered before, or someone may have used your email by mistake. You can <a href="#">contact</a> us to help you resolve this.
+		</div>
+	</div>
+</p>
+
+@endsection
--- a/resources/views/site/help/hashtags.blade.php
+++ b/resources/views/site/help/hashtags.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Hashtags'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Hashtags</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/partial/sidebar.blade.php
+++ b/resources/views/site/help/partial/sidebar.blade.php
@ -0,0 +1,72 @@
+  <div class="col-12 col-md-3 py-3" style="border-right:1px solid #ccc;">
+    <ul class="nav flex-column settings-nav">
+      <li class="nav-item {{request()->is('*/getting-started')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.getting-started')}}">Getting Started</a>
+      </li>
+      <li class="nav-item {{request()->is('*/sharing-media')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.sharing-media')}}">Sharing Photos & Videos</a>
+      </li>
+      <li class="nav-item {{request()->is('*/your-profile')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.your-profile')}}">Your Profile</a>
+      </li>
+      <li class="nav-item {{request()->is('*/stories')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.stories')}}">Stories</a>
+      </li>
+      <li class="nav-item {{request()->is('*/hashtags')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.hashtags')}}">Hashtags</a>
+      </li>
+      <li class="nav-item {{request()->is('*/discover')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.discover')}}">Discover</a>
+      </li>
+      <li class="nav-item {{request()->is('*/direct-messages')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.dm')}}">Direct Messages</a>
+      </li>
+      <li class="nav-item {{request()->is('*/timelines')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.timelines')}}">Timelines</a>
+      </li>
+      <li class="nav-item {{request()->is('*/embed')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.embed')}}">Embed</a>
+      </li>
+      <li class="nav-item">
+        <hr>
+      </li>
+      <li class="nav-item {{request()->is('*/community-guidelines')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.community-guidelines')}}">
+          Community Guidelines
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/what-is-the-fediverse')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.what-is-fediverse')}}">What is the fediverse?</a>
+      </li>
+      <li class="nav-item {{request()->is('*/controlling-visibility')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.controlling-visibility')}}">
+          Controlling Visibility
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/abusive-activity')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.abusive-activity')}}">
+          Abusive Activity
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/blocking-accounts')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.blocking-accounts')}}">
+          Blocking Accounts
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/safety-tips')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.safety-tips')}}">
+          Safety Tips
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/report-something')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.report-something')}}">
+          Report Something
+        </a>
+      </li>
+      <li class="nav-item {{request()->is('*/data-policy')?'active':''}}">
+        <a class="nav-link font-weight-light text-muted" href="{{route('help.data-policy')}}">
+          Data Policy
+        </a>
+      </li>
+    </ul>
+  </div>
--- a/resources/views/site/help/partial/template.blade.php
+++ b/resources/views/site/help/partial/template.blade.php
@ -0,0 +1,30 @@
+@extends('layouts.anon', ['title' => 'Pixelfed Help Center'])
+
+@section('content')
+
+<div class="container">
+  <div class="col-12">
+    <div class="card mt-5">
+      <div class="card-header font-weight-bold text-muted bg-white py-4">
+        <a href="{{route('site.help')}}" class="text-muted">Help Center</a>
+        <span class="px-2 font-weight-light">&mdash;</span>
+        {{ $breadcrumb ?? ''}}
+      </div>
+      <div class="card-body p-0">
+        <div class="row">
+          @include('site.help.partial.sidebar')
+          <div class="col-12 col-md-9 p-5">
+            @if (session('status'))
+                <div class="alert alert-success">
+                    {{ session('status') }}
+                </div>
+            @endif
+            @yield('section')
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+@endsection
--- a/resources/views/site/help/report-something.blade.php
+++ b/resources/views/site/help/report-something.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Report Something'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Report Something</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/safety-tips.blade.php
+++ b/resources/views/site/help/safety-tips.blade.php
@ -0,0 +1,64 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Safety Tips'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Safety Tips</h3>
+  </div>
+  <hr>
+{{--   <div class="card mb-3">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="fas fa-exclamation-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">Work In Progress</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+ --}}
+  <p class="lead py-4">We are committed to building a fun, easy to use photo sharing platform that is safe and secure for everyone.</p>
+
+  <div class="card border-left-blue mb-3">
+    <div class="card-body">
+      <p class="h5">Know the rules</p>
+      <p class="mb-0">To keep yourself safe, it is important to know the terms of service rules. You can find them <a href="#">here</a>.</p>
+    </div>
+  </div>
+
+  <div class="card border-left-blue mb-3">
+    <div class="card-body">
+      <p class="h5">Know the age guidelines</p>
+      <p class="mb-0">Please keep in mind that Pixelfed is meant for people over the age of 16 or 13 depending on where you live. For more information click <a href="#">here</a>.</p>
+    </div>
+  </div>
+
+  <div class="card border-left-blue mb-3">
+    <div class="card-body">
+      <p class="h5">Report problematic content</p>
+      <p class="mb-0">You can report content that you think is in violation of our policies. For more information click <a href="#">here</a>.</p>
+    </div>
+  </div>
+
+  <div class="card border-left-blue mb-3">
+    <div class="card-body">
+      <p class="h5">Understanding content visibility</p>
+      <p class="mb-0">You can limit the visibility of your content to specific people, followers, public and more. For more information about visibility, click <a href="#">here</a>.</p>
+    </div>
+  </div>
+
+
+  <div class="card border-left-blue mb-3">
+    <div class="card-body">
+      <p class="h5">Make your account or posts private</p>
+      <p class="mb-0">You can limit the visibility of your content to specific people, followers, public and more. For more information about visibility, click <a href="#">here</a>.</p>
+    </div>
+  </div>
+@endsection
--- a/resources/views/site/help/sharing-media.blade.php
+++ b/resources/views/site/help/sharing-media.blade.php
@ -0,0 +1,122 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Sharing Photos & Videos'])
+
+@section('section')
+
+	<div class="title">
+		<h3 class="font-weight-bold">Sharing Photos & Videos</h3>
+	</div>
+	<hr>
+	<p class="font-weight-light">Welcome to Pixelfed.</p>
+	<p class="font-weight-light">Pixelfed is a federated media sharing platform inspired by Instagram and 500px.</p>
+	<hr>
+	<p>
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
+			<i class="fas fa-chevron-down mr-2"></i>
+			How do I create a post?
+		</a>
+		<div class="collapse" id="collapse1">
+			<div>
+				To create an account using a web browser:
+				<ol>
+					<li>Go to <a href="{{config('app.url')}}">{{config('app.url')}}</a>.</li>
+					<li>Click on the <i class="fas fa-camera-retro text-primary"></i> link at the top of the page.</li>
+					<li>Upload your photo(s) or video(s), add a caption and set other options.</li>
+					<li>Click on the <span class="font-weight-bold">Create Post</span> button.</li>
+				</ol>
+			</div>
+		</div>
+	</p>
+	<p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
+			<i class="fas fa-chevron-down mr-2"></i>
+			How do I share a post with multiple photos or videos?
+		</a>
+		<div class="collapse" id="collapse2">
+			<div>
+				During the compose process, you can select multiple files at a single time, or add each photo/video individually.
+			</div>
+		</div>
+	</p>
+	<p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse3" role="button" aria-expanded="false" aria-controls="collapse3">
+			<i class="fas fa-chevron-down mr-2"></i>
+			How do I add a caption before sharing my photos or videos on Pixelfed?
+		</a>
+		<div class="collapse" id="collapse3">
+			<div>
+				During the compose process, you will see the <span class="font-weight-bold">Caption</span> input. Captions are optional and limited to <span class="font-weight-bold">{{config('pixelfed.max_caption_length')}}</span> characters.
+			</div>
+		</div>
+	</p>
+	{{-- <p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse4" role="button" aria-expanded="false" aria-controls="collapse4">
+			<i class="fas fa-chevron-down mr-2"></i>
+			How do I add a filter to my photos?
+		</a>
+		<div class="collapse" id="collapse4">
+			<div>
+				
+			</div>
+		</div>
+	</p> --}}
+	{{-- <p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse5" role="button" aria-expanded="false" aria-controls="collapse5">
+			<i class="fas fa-chevron-down mr-2"></i>
+			How do I add a description to each photo or video for the visually impaired?
+		</a>
+		<div class="collapse" id="collapse5">
+			<div>
+
+			</div>
+		</div>
+	</p> --}}	
+	<p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse6" role="button" aria-expanded="false" aria-controls="collapse6">
+			<i class="fas fa-chevron-down mr-2"></i>
+			What types of photos or videos can I upload?
+		</a>
+		<div class="collapse" id="collapse6">
+			<div>
+				You can upload the following file types:
+				<ul>
+					@foreach(explode(',', config('pixelfed.media_types')) as $type)
+					<li class="font-weight-bold">{{$type}}</li>
+					@endforeach
+				</ul>
+			</div>
+		</div>
+	</p>
+	{{-- <p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse7" role="button" aria-expanded="false" aria-controls="collapse7">
+			<i class="fas fa-chevron-down mr-2"></i>
+			What is the limit for photo and video file sizes?
+		</a>
+		<div class="collapse" id="collapse7">
+			<div>
+
+			</div>
+		</div>
+	</p> --}}
+	{{-- <p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse8" role="button" aria-expanded="false" aria-controls="collapse8">
+			<i class="fas fa-chevron-down mr-2"></i>
+			When I share a photo, what's the image resolution?
+		</a>
+		<div class="collapse" id="collapse8">
+			<div>
+
+			</div>
+		</div>
+	</p> --}}
+	{{-- <p>	
+		<a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse9" role="button" aria-expanded="false" aria-controls="collapse9">
+			<i class="fas fa-chevron-down mr-2"></i>
+			Can I edit my post captions, photos or videos after sharing them?
+		</a>
+		<div class="collapse" id="collapse9">
+			<div>
+
+			</div>
+		</div>
+	</p> --}}
+@endsection
--- a/resources/views/site/help/stories.blade.php
+++ b/resources/views/site/help/stories.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Stories'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Stories</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/timelines.blade.php
+++ b/resources/views/site/help/timelines.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Timelines'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">Timelines</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/what-is-fediverse.blade.php
+++ b/resources/views/site/help/what-is-fediverse.blade.php
@ -0,0 +1,26 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'What is the fediverse?'])
+
+@section('section')
+
+  <div class="title">
+    <h3 class="font-weight-bold">What is the Fediverse?</h3>
+  </div>
+  <hr>
+  <div class="card">
+  	<div class="card-body">
+  		<div class="row">
+  			<div class="col-12 col-md-3 text-center">
+  				<div class="icon-wrapper">
+  					<i class="far fa-question-circle fa-3x text-light"></i>
+  				</div>
+  			</div>
+  			<div class="col-12 col-md-9 d-flex align-items-center">
+  				<div class="text-center">
+	  				<p class="h3 font-weight-bold mb-0">This page isn't available</p>
+	  				<p class="font-weight-light mb-0">We haven't finished it yet, it will be updated soon!</p>
+  				</div>
+  			</div>
+  		</div>
+  	</div>
+  </div>
+@endsection
--- a/resources/views/site/help/your-profile.blade.php
+++ b/resources/views/site/help/your-profile.blade.php
@ -0,0 +1,143 @@
+@extends('site.help.partial.template', ['breadcrumb'=>'Your Profile'])
+
+@section('section')
+
+
+  <div class="title">
+    <h3 class="font-weight-bold">Your Profile</h3>
+  </div>
+  <hr>
+  <p class="h5 text-muted font-weight-light">Edit</p>
+  <p>
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse1" role="button" aria-expanded="false" aria-controls="collapse1">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How do I edit my bio, name, email, or password?
+    </a>
+    <div class="collapse" id="collapse1">
+      <div>
+        To create an account using a web browser:
+        <ol>
+          <li>Go to <a href="{{route('settings')}}">{{route('settings')}}</a>.</li>
+          <li>You should see the <span class="font-weight-bold">Name</span>, <span class="font-weight-bold">Website</span>, and  <span class="font-weight-bold">Bio</span> fields.</li>
+          <li>Change the desired fields, and then click the <span class="font-weight-bold">Submit</span> button.</li>
+        </ol>
+      </div>
+    </div>
+  </p>
+  <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse2" role="button" aria-expanded="false" aria-controls="collapse2">
+      <i class="fas fa-chevron-down mr-2"></i>
+      Why can't I update my username?
+    </a>
+    <div class="collapse" id="collapse2">
+      <div>
+        Pixelfed is a federated application, changing your username is not supported in every <a href="">federated software</a> so we cannot allow username changes. Your best option is to create a new account with your desired username.
+      </div>
+    </div>
+  </p>
+  <hr>
+  <p class="h5 text-muted font-weight-light">Privacy</p>
+  <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse3" role="button" aria-expanded="false" aria-controls="collapse3">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How do I set my photos and videos to private so that only approved followers can see them?
+    </a>
+    <div class="collapse" id="collapse3">
+      <div>
+        To change your account visibility:
+        <ol>
+          <li>Go to <a href="{{route('settings.privacy')}}">{{route('settings.privacy')}}</a>.</li>
+          <li>Check the <span class="font-weight-bold">Private Account</span> checkbox.</li>
+          <li>The confirmation modal will popup and ask you if you want to keep existing followers and disable new follow requests</li>
+          <li>Click the <span class="font-weight-bold">Submit</span> button.</li>
+        </ol>
+      </div>
+    </div>
+  </p>
+  {{-- <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse4" role="button" aria-expanded="false" aria-controls="collapse4">
+      <i class="fas fa-chevron-down mr-2"></i>
+      Who can like, share or comment on my photos and videos?
+    </a>
+    <div class="collapse" id="collapse4">
+      <div>
+        It depends on the visibility of your post.
+      </div>
+    </div>
+  </p> --}}
+  {{-- <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse5" role="button" aria-expanded="false" aria-controls="collapse5">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How do I filter out comments that I don't want to appear on my posts?
+    </a>
+    <div class="collapse" id="collapse5">
+      <div>
+
+      </div>
+    </div>
+  </p> --}}  
+  {{-- <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse6" role="button" aria-expanded="false" aria-controls="collapse6">
+      <i class="fas fa-chevron-down mr-2"></i>
+      Who can see my posts?
+    </a>
+    <div class="collapse" id="collapse6">
+      <div>
+        You can update your account by visiting the <a href="{{route('settings')}}">account settings</a> page.
+      </div>
+    </div>
+  </p> --}}
+  {{-- <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#collapse7" role="button" aria-expanded="false" aria-controls="collapse7">
+      <i class="fas fa-chevron-down mr-2"></i>
+      Who can see my private posts if I add a hashtag?
+    </a>
+    <div class="collapse" id="collapse7">
+      <div>
+        You can update your account by visiting the <a href="{{route('settings')}}">account settings</a> page.
+      </div>
+    </div>
+  </p> --}}
+  <hr>
+  <p class="h5 text-muted font-weight-light">Security</p>
+  <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#sec-collapse8" role="button" aria-expanded="false" aria-controls="sec-collapse8">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How can I secure my account?
+    </a>
+    <div class="collapse" id="sec-collapse8">
+      <div>
+        Here are some recommendations to keep your account secure:
+        <ul class="font-weight-bold">
+          <li>Pick a strong password, don't re-use it on other websites</li>
+          <li>Never share your password</li>
+          <li>Remember to log out on public computers or devices</li>
+          <li>Periodically check your <a href="{{route('settings.security')}}">Account Log</a> for any suspcious activity</li>
+          <li><a href="{{route('settings.security.2fa.setup')}}">Setup Two Factor Authentication</a></li>
+        </ul>
+      </div>
+    </div>
+  </p>
+  <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#sec-collapse9" role="button" aria-expanded="false" aria-controls="sec-collapse9">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How can I add additional protection to my account?
+    </a>
+    <div class="collapse" id="sec-collapse9">
+      <div>
+        You can add an additional layer of security to your account by enabling <span class="font-weight-bold">Two Factor Authentication</span>. For more information, check your <a href="{{route('settings.security')}}">security settings</a>.
+      </div>
+    </div>
+  </p>
+  <p> 
+    <a class="text-dark font-weight-bold" data-toggle="collapse" href="#sec-collapse10" role="button" aria-expanded="false" aria-controls="sec-collapse10">
+      <i class="fas fa-chevron-down mr-2"></i>
+      How do I report unauthorized use of my account?
+    </a>
+    <div class="collapse" id="sec-collapse10">
+      <div>
+        Please contact the administrators of this instance{{-- , for contact information <a href="{{route('settings')}}">click here</a> --}}.
+      </div>
+    </div>
+  </p>
+@endsection
--- a/resources/views/site/opensource.blade.php
+++ b/resources/views/site/opensource.blade.php
@ -7,7 +7,7 @@
  </div>
  <hr>
  <section>
-    <p class="lead">The software that powers this website is called <a href="https://pixelfed.org">PixelFed</a> and anyone can <a href="https://github.com/dansup/pixelfed">download</a> the source code and run their own instance!</p>
+    <p class="lead">The software that powers this website is called <a href="https://pixelfed.org">PixelFed</a> and anyone can <a href="https://github.com/pixelfed/pixelfed">download</a> the source code and run their own instance!</p>
  </section>
@endsection

--- a/routes/web.php
+++ b/routes/web.php
@ -157,6 +157,27 @@ Route::domain(config('pixelfed.domain.app'))->middleware(['validemail', 'twofact
        Route::view('privacy', 'site.privacy')->name('site.privacy');
        Route::view('platform', 'site.platform')->name('site.platform');
        Route::view('language', 'site.language')->name('site.language');
+
+        Route::group(['prefix'=>'kb'], function() {
+            Route::view('getting-started', 'site.help.getting-started')->name('help.getting-started');
+            Route::view('sharing-media', 'site.help.sharing-media')->name('help.sharing-media');
+            Route::view('your-profile', 'site.help.your-profile')->name('help.your-profile');
+            Route::view('stories', 'site.help.stories')->name('help.stories');
+            Route::view('embed', 'site.help.embed')->name('help.embed');
+            Route::view('hashtags', 'site.help.hashtags')->name('help.hashtags');
+            Route::view('discover', 'site.help.discover')->name('help.discover');
+            Route::view('direct-messages', 'site.help.dm')->name('help.dm');
+            Route::view('timelines', 'site.help.timelines')->name('help.timelines');
+            Route::view('what-is-the-fediverse', 'site.help.what-is-fediverse')->name('help.what-is-fediverse');
+            Route::view('safety-tips', 'site.help.safety-tips')->name('help.safety-tips');
+
+            Route::view('community-guidelines', 'site.help.community-guidelines')->name('help.community-guidelines');
+            Route::view('controlling-visibility', 'site.help.controlling-visibility')->name('help.controlling-visibility');
+            Route::view('abusive-activity', 'site.help.abusive-activity')->name('help.abusive-activity');
+            Route::view('blocking-accounts', 'site.help.blocking-accounts')->name('help.blocking-accounts');
+            Route::view('report-something', 'site.help.report-something')->name('help.report-something');
+            Route::view('data-policy', 'site.help.data-policy')->name('help.data-policy');
+        });
    });

    Route::group(['prefix' => 'timeline'], function () {