feat(layouts): update app.blade.php and add new sections

- Updated the meta description tag in `app.blade.php` to fix formatting.
- Added `@stack('top_scripts')` and `@stack('bottom_scripts')` sections in `app.blade.php`.
- Extended the `layouts.app` template in `skins/index.blade.php` and `skins/show.blade.php`.
- Added title and description sections in both files.
- Removed duplicate meta tags from both files.
- Added content section with appropriate components in both files.
- Added a new script file, 'vert-scroll.js', to be loaded at the bottom of the page in `skins/show.blade.php`.
This commit is contained in:
Rico van Zelst
2023-12-08 17:30:23 +01:00
parent 2294140fce
commit 3e9fbc05ff
3 changed files with 22 additions and 108 deletions

View File

@@ -16,8 +16,7 @@
<meta name="theme-color" content="#ff7c47">
<title>@yield('title')</title>
<meta name="description"
content="@yield('description')">
<meta name="description" content="@yield('description')">
<!-- OpenGraph -->
<meta property="og:site_name" content="Heimerdinger.LoL">
@@ -39,11 +38,14 @@
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
@vite(['resources/css/app.css', 'resources/js/app.js'])
@stack('top_scripts')
</head>
<body class="antialiased bg-stone-800 dark scroll-smooth">
<body class="antialiased bg-stone-900 dark scroll-smooth">
<x-navbar/>
@yield('content')
<x-footer/>
@stack('bottom_scripts')
</body>
</html>

View File

@@ -1,54 +1,9 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@extends('layouts.app')
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@section('title', 'Heimerdinger.LoL • Skins')
@section('description', 'Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins
such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!')
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="manifest" href="/img/icons/site.webmanifest">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#ff7c47">
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
<meta name="theme-color" content="#ff7c47">
<title>Heimerdinger.LoL Skins</title>
<meta name="description"
content="Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!">
<!-- OpenGraph -->
<meta property="og:site_name" content="Heimerdinger.LoL">
<meta property="og:title" content="Heimerdinger.LoL • Skins">
<meta property="og:description"
content="Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!">
<meta property="og:locale" content="en">
<meta property="og:type" content="website">
<meta property="og:image" content="{{asset('img/og_image.png')}}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="heimerdinger.lol">
<meta property="twitter:title" content="Heimerdinger.LoL • Skins">
<meta property="twitter:description"
content="Explore all champion skins on Heimerdinger.LoL. Find detailed information on popular skins such as Dark Cosmic Jhin, HEARTSTEEL Ezreal, PROJECT: Vayne and more!">
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
<link rel="preconnect" href="https://rsms.me/">
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased bg-stone-900 dark scroll-smooth">
<x-navbar/>
<x-skins.paginatedlist :skins="$skins" :rarity-color="$rarityColor"/>
<x-footer/>
</body>
</html>
@section('content')
<x-skins.paginatedlist :skins="$skins" :rarity-color="$rarityColor"/>
@endsection

View File

@@ -1,56 +1,13 @@
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
@extends('layouts.app')
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@section('title', $skin->skin_name . ' • Heimerdinger.LoL')
@section('description', 'Heimerdinger.LoL: ' . $skin->skin_name . ' details showing all the information about
the ' . $skin->rarity . ' ' . $skin->champion->name . ' skin. ' . substr($skin->lore, 0, 50) . '...')
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/img/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/icons/favicon-16x16.png">
<link rel="manifest" href="/img/icons/site.webmanifest">
<link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#e6855e">
<link rel="shortcut icon" href="/img/icons/favicon.ico">
<meta name="msapplication-TileColor" content="#ff7c47">
<meta name="msapplication-config" content="/img/icons/browserconfig.xml">
<meta name="theme-color" content="#ff7c47">
@section('content')
<x-skins.grid_info :skin="$skin"/>
@endsection
<title>{{$skin->skin_name}} Heimerdinger.LoL</title>
<meta name="description"
content="Heimerdinger.LoL: {{$skin->skin_name}} details showing all the information about the {{$skin->rarity}} {{$skin->champion->name}} skin. {{substr($skin->lore, 0, 50)}}...">
<!-- OpenGraph -->
<meta property="og:site_name" content="Heimerdinger.LoL">
<meta property="og:title" content="{{$skin->skin_name}} • Heimerdinger.LoL">
<meta property="og:description"
content="Heimerdinger.LoL: {{$skin->skin_name}} details showing all the information about the {{$skin->rarity}} {{$skin->champion->name}} skin. {{substr($skin->lore, 0, 50)}}...">
<meta property="og:locale" content="en">
<meta property="og:type" content="website">
<meta property="og:image" content="{{asset('img/og_image.png')}}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="heimerdinger.lol">
<meta property="twitter:title" content="{{$skin->skin_name}} • Heimerdinger.LoL">
<meta property="twitter:description"
content="Heimerdinger.LoL: {{$skin->skin_name}} details showing all the information about the {{$skin->rarity}} {{$skin->champion->name}} skin. {{substr($skin->lore, 0, 50)}}...">
<meta property="twitter:image" content="{{asset('img/og_image.png')}}">
<link rel="preconnect" href="https://rsms.me/">
<link rel="preload" href="https://rsms.me/inter/inter.css" as="style">
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" media="print" onload="this.media='all'">
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="antialiased bg-stone-900 dark scroll-smooth">
<x-navbar/>
<x-skins.grid_info :skin="$skin"/>
<x-footer/>
@vite('resources/js/vert-scroll.js')
</body>
</html>
@push('bottom_scripts')
@vite('resources/js/vert-scroll.js')
@endpush