Update landing view

resources/assets/components/landing/Index.vue

@@ -23,6 +23,7 @@
 							class="img-fluid rounded"
 							style="width: 100%;max-height: 200px;object-fit: cover;"
 							alt="Server banner image"
+							height="200"
 							onerror="this.src='/storage/headers/default.jpg';this.onerror=null;">
 					</div>
 
@@ -57,7 +58,14 @@
 									<p class="item-label">Managed By</p>
 									<a :href="config.contact.account.url" class="admin-card">
 										<div class="d-flex">
-											<img :src="config.contact.account.avatar" onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;" width="45" height="45" class="avatar">
+											<img
+												:src="config.contact.account.avatar"
+												width="45"
+												height="45"
+												class="avatar"
+												:alt="`${config.contact.account.username}'s avatar`"
+												onerror="this.src='/storage/avatars/default.jpg';this.onerror=null;"
+												>
 
 											<div class="user-info">
 												<p class="display-name">{{ config.contact.account.display_name }}</p>

resources/assets/js/landing.js

@@ -10,7 +10,6 @@ import Loading from 'vue-loading-overlay';
 import VueTimeago from 'vue-timeago';
 import VueCarousel from 'vue-carousel';
 import VueBlurHash from 'vue-blurhash';
-import VueMasonry from 'vue-masonry-css';
 import VueI18n from 'vue-i18n';
 window.pftxt = require('twitter-text');
 import 'vue-blurhash/dist/vue-blurhash.css'
@@ -41,7 +40,6 @@ Vue.use(VueCarousel);
 Vue.use(BootstrapVue);
 Vue.use(InfiniteLoading);
 Vue.use(Loading);
-Vue.use(VueMasonry);
 Vue.use(VueI18n);
 Vue.use(VueTimeago, {
   name: 'Timeago',

resources/assets/sass/landing.scss

@@ -289,7 +289,7 @@ body {
 		.stat-label {
 			font-size: 12px;
 			font-weight: 700;
-			color: #64748b;
+			color: #94a3b8;
 			margin-bottom: 0;
 			text-transform: uppercase;
 			letter-spacing: 0.8px;
@@ -329,7 +329,7 @@ body {
 		}
 
 		.item-label {
-			color: #475569;
+			color: #94a3b8;
 			text-transform: uppercase;
 			font-weight: 500;
 			letter-spacing: 1px;

resources/views/site/index.blade.php

@@ -10,19 +10,28 @@
 
 	<title>{{ config('app.name', 'Pixelfed') }}</title>
 
-	<meta property="og:site_name" content="{{ config('app.name', 'pixelfed') }}">
-	<meta property="og:title" content="{{ config('app.name', 'pixelfed') }}">
-	<meta property="og:type" content="article">
-	<meta property="og:url" content="{{request()->url()}}">
-	<meta property="og:description" content="Federated Image Sharing">
+	<link rel="canonical" href="{{ request()->url() }}" />
+
+	<meta property="og:site_name" content="{{ config_cache('app.name', 'pixelfed') }}" />
+	<meta property="og:title" content="{{ config_cache('app.name', 'pixelfed') }}" />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content="{{request()->url()}}" />
+	<meta property="og:image" content="{{ config_cache('app.banner_image') ?? url('storage/headers/default.jpg')}}" />
+	<meta property="og:description" content="{{ config_cache('app.short_description') ?? 'Decentralized photo sharing social media powered by Pixelfed' }}" />
+	<meta name="description" content="{{ config_cache('app.short_description') ?? 'Decentralized photo sharing social media powered by Pixelfed' }}" />
+	<meta name="twitter:title" content="{{ config_cache('app.name', 'pixelfed') }}" />
+    <meta name="twitter:description" content="{{ config_cache('app.short_description') ?? 'Decentralized photo sharing social media powered by Pixelfed' }}" />
+    <meta name="twitter:image" content="{{ config_cache('app.banner_image') ?? url('storage/headers/default.jpg')}}" />
+    <meta name="twitter:card" content="summary_large_image" />
 
 	<meta name="medium" content="image">
 	<meta name="theme-color" content="#10c5f8">
 	<meta name="apple-mobile-web-app-capable" content="yes">
-	<link rel="manifest" href="/manifest.json">
-	<link rel="icon" type="image/png" href="/img/favicon.png">
-	<link rel="apple-touch-icon" type="image/png" href="/img/favicon.png?v=2">
+	<link rel="manifest" href="{{url('/manifest.json')}}" />
+	<link rel="icon" type="image/png" href="{{url('/img/favicon.png')}}">
+	<link rel="apple-touch-icon" type="image/png" href="{{url('/img/favicon.png')}}">
 	<link href="{{ mix('css/landing.css') }}" rel="stylesheet">
+	<link rel="preload" as="image" href="{{ url('/_landing/bg.jpg')}}" />
 	<script type="text/javascript">
 		window.pfl = {!! App\Services\LandingService::get() !!}
 	</script>
@@ -32,10 +41,6 @@
 			<noscript>
 				<div class="container">
 					<h1 class="pt-5 text-center">Pixelfed</h1>
-					<p class="text-center">Decentralized photo sharing social media</p>
-					<p class="pt-2 text-center lead">
-						<a href="{{ config('app.url') }}/login" class="btn btn-outline-light">Login</a>
-					</p>
 					<p class="pt-2 text-center lead">Please enable javascript to view this content.</p>
 				</div>
 			</noscript>