Skip to content

Commit

Permalink
17 improve pagespeed (#18)
Browse files Browse the repository at this point in the history
  • Loading branch information
benbjurstrom committed Jul 7, 2024
1 parent fa0b255 commit 247839d
Show file tree
Hide file tree
Showing 10 changed files with 189 additions and 56 deletions.
2 changes: 1 addition & 1 deletion config/prezet.php
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
'max_heading_level' => 3,
'title' => 'Permalink',
'symbol' => '#',
'aria_hidden' => true,
'aria_hidden' => false,
],
'external_link' => [
'internal_hosts' => 'www.example.com', // Don't forget to set this!
Expand Down
3 changes: 2 additions & 1 deletion resources/views/components/header.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ class="sticky top-0 z-50 flex flex-none flex-wrap items-center justify-between b
>
<div class="relative flex flex-grow basis-0 items-center">
<button
aria-label="Menu"
class="mr-4 rounded-lg p-1.5 hover:bg-stone-100 active:bg-stone-200 lg:hidden"
x-on:click="showSidebar = ! showSidebar"
>
Expand All @@ -22,7 +23,7 @@ class="h-6 w-6 text-stone-600"
</svg>
</button>

<a href="{{ route('prezet.index') }}">
<a aria-label="Home" href="{{ route('prezet.index') }}">
<svg
class="h-9 w-auto"
fill="none"
Expand Down
87 changes: 80 additions & 7 deletions resources/views/components/template.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,95 @@
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Fonts -->
<link rel="preconnect" href="https://fonts.bunny.net" />
<link
href="https://fonts.bunny.net/css?family=Inter:400,500,600,700&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
<style type="text/css">
/* inter-latin-400-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: optional;
font-weight: 400;
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-400-normal.woff2)
format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-400-normal.woff)
format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* inter-latin-500-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: optional;
font-weight: 500;
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-500-normal.woff2)
format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-500-normal.woff)
format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* inter-latin-600-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: optional;
font-weight: 600;
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-600-normal.woff2)
format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-600-normal.woff)
format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
/* inter-latin-700-normal */
@font-face {
font-family: 'Inter';
font-style: normal;
font-display: optional;
font-weight: 700;
src:
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-700-normal.woff2)
format('woff2'),
url(https://cdn.jsdelivr.net/fontsource/fonts/inter@5.0.16/latin-700-normal.woff)
format('woff');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC,
U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
U+FEFF, U+FFFD;
}
</style>

<x-seo::meta />

<!-- Scripts -->
<script
defer
src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.x.x/dist/cdn.min.js"
src="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.js"
></script>
<link
href="https://cdn.jsdelivr.net/npm/lite-youtube-embed@0.3.2/src/lite-yt-embed.min.css"
rel="stylesheet"
/>
<script
defer
src="https://cdn.jsdelivr.net/npm/@alpinejs/focus@3.14.1/dist/cdn.min.js"
></script>
<script
defer
src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"
src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.1/dist/cdn.min.js"
></script>
@vite(['resources/css/app.css'])
</head>
Expand Down
34 changes: 13 additions & 21 deletions resources/views/components/youtube.blade.php
Original file line number Diff line number Diff line change
@@ -1,29 +1,21 @@
@php
$ytData = new \BenBjurstrom\Prezet\Data\YoutubeData($attributes->all());
@endphp

<div class="aspect-video" {{ $attributes }}>
<iframe
class="h-full w-full"
src="https://www.youtube-nocookie.com/embed/{{ $attributes['videoid'] }}"
width="100%"
<lite-youtube
videoid="{{ $attributes['videoid'] }}"
style="background-image: url('https://i.ytimg.com/vi/{{ $attributes['videoid'] }}/hqdefault.jpg');"
title="{{ $attributes['title'] }}"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
>
<a href="https://youtube.com/watch?v={{ $attributes['videoid'] }}" class="lty-playbtn" title="Play Video">
<span class="lyt-visually-hidden">Play Video: {{ $attributes['title'] }}</span>
</a>
</lite-youtube>

<script
type="application/ld+json"
>
{!! json_encode([
'@context' => 'https://schema.org',
'@type' => 'VideoObject',
'url' => 'https://www.youtube.com/watch?v=' . $attributes['title'],
'name' => $attributes['title'],
'identifier' => $attributes['videoid'],
'description' => $attributes['description'],
'thumbnailUrl' => 'https://i.ytimg.com/vi/' . $attributes['videoid'] . '/maxresdefault.jpg',
'uploadDate' => $attributes['date'],
'duration' => $attributes['duration'],
'embedUrl' => 'https://www.youtube.com/embed/' . $attributes['videoid'],
], JSON_UNESCAPED_SLASHES) !!}
{!! json_encode($ytData->toArray(), JSON_UNESCAPED_SLASHES) !!}
</script>
</div>
10 changes: 8 additions & 2 deletions resources/views/index.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,18 @@
@endphp

<x-prezet::template>
@seo([
'title' => 'Prezet: Markdown Blogging for Laravel',
'description' =>
'Transform your markdown files into SEO-friendly blogs, articles, and documentation!',
'url' => route('prezet.index'),
])
<x-slot name="left">
<x-prezet::sidebar :nav="$nav" />
</x-slot>
<section class="mt-12">
<div class="mb-9 space-y-1">
<p class="font-display text-sm font-medium text-primary-500">
<p class="font-display text-sm font-medium text-primary-600">
Prezet
</p>
<h1
Expand Down Expand Up @@ -51,7 +57,7 @@ class="mt-1 text-base leading-7 text-stone-700"
</p>
<div class="mt-4 flex items-center gap-4">
<a
class="flex items-center text-sm font-bold leading-6 text-primary-500 hover:text-primary-700 active:text-primary-900"
class="flex items-center text-sm font-bold leading-6 text-primary-600 hover:text-primary-600 active:text-primary-900"
href="{{ route('prezet.show', $article->slug) }}"
>
Read more
Expand Down
40 changes: 18 additions & 22 deletions resources/views/show.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,23 @@
</x-slot>

{{-- Main Content --}}
<div
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16"
>
<article>
<header class="mb-9 space-y-1">
<p class="font-display text-sm font-medium text-primary-500">
{{ $frontmatter->category }}
</p>
<h1
class="font-display text-4xl font-medium tracking-tight text-stone-900"
>
{{ $frontmatter->title }}
</h1>
</header>
<div
class="prose-headings:font-display prose prose-stone max-w-none prose-a:border-b prose-a:border-dashed prose-a:border-black/30 prose-a:font-semibold prose-a:no-underline hover:prose-a:border-solid prose-img:rounded"
<article>
<header class="mb-9 space-y-1">
<p class="font-display text-sm font-medium text-primary-600">
{{ $frontmatter->category }}
</p>
<h1
class="font-display text-4xl font-medium tracking-tight text-stone-900"
>
{!! $body !!}
</div>
</article>
</div>
{{ $frontmatter->title }}
</h1>
</header>
<div
class="prose-headings:font-display prose prose-stone max-w-none prose-a:border-b prose-a:border-dashed prose-a:border-black/30 prose-a:font-semibold prose-a:no-underline hover:prose-a:border-solid prose-img:rounded"
>
{!! $body !!}
</div>
</article>

{{-- Right Sidebar --}}
<x-slot name="right">
Expand All @@ -45,7 +41,7 @@ class="font-display text-sm font-medium text-stone-900"
<h3>
<a
href="#{{ $h2['id'] }}"
:class="{'text-primary-500 hover:text-primary-500': activeHeading === '#{{ $h2['title'] }}'}"
:class="{'text-primary-700 hover:text-primary-700': activeHeading === '#{{ $h2['title'] }}'}"
x-on:click.prevent="scrollToHeading('{{ $h2['id'] }}')"
class="transition-colors"
>
Expand All @@ -62,7 +58,7 @@ class="mt-2 space-y-3 border-l pl-5"
<li>
<a
href="#{{ $h3['id'] }}"
:class="{'text-primary-500 hover:text-primary-500': activeHeading === '#{{ $h3['title'] }}'}"
:class="{'text-primary-700 hover:text-primary-700': activeHeading === '#{{ $h3['title'] }}'}"
x-on:click.prevent="scrollToHeading('{{ $h3['id'] }}')"
class="transition-colors"
>
Expand Down
6 changes: 4 additions & 2 deletions routes/prezet.php
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,11 @@
->where('slug', '.*');

Route::get('prezet', IndexController::class)
->name('prezet.index');
->name('prezet.index')
->middleware('cache.headers:public;max_age=300;etag');

Route::get('prezet/{slug}', ShowController::class)
->name('prezet.show')
->where('slug', '.*');
->where('slug', '.*')
->middleware('cache.headers:public;max_age=300;etag');
// https://laravel.com/docs/11.x/routing#parameters-encoded-forward-slashes
1 change: 1 addition & 0 deletions src/Actions/SetSeo.php
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ class SetSeo
public static function handle(FrontmatterData $fm): void
{
seo()
->withUrl()
->title($fm->title)
->description($fm->excerpt)
->image($fm->ogimage);
Expand Down
61 changes: 61 additions & 0 deletions src/Data/YoutubeData.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
<?php

namespace BenBjurstrom\Prezet\Data;

use Carbon\Carbon;
use WendellAdriel\ValidatedDTO\Attributes\Rules;
use WendellAdriel\ValidatedDTO\Casting\CarbonCast;
use WendellAdriel\ValidatedDTO\Concerns\EmptyRules;
use WendellAdriel\ValidatedDTO\ValidatedDTO;

class YoutubeData extends ValidatedDTO
{
// https://developers.google.com/search/docs/appearance/structured-data/video

use EmptyRules;

// The title of the video
#[Rules(['required', 'string'])]
public string $name;

#[Rules(['required', 'string'])]
public string $identifier;

// The date and time the video was first published, in ISO 8601 format.
#[Rules(['required', 'string'])]
public Carbon $uploadDate;

// The description of the video.
#[Rules(['nullable', 'string'])]
public ?string $description;

// The duration of the video in ISO 8601 format. For example, PT00H30M5S
#[Rules(['nullable', 'string'])]
public ?string $duration;

protected function defaults(): array
{
return [
'@context' => 'https://schema.org',
'@type' => 'VideoObject',
'thumbnailUrl' => 'https://i.ytimg.com/vi/'.$this->identifier.'/maxresdefault.jpg',
'embedUrl' => 'https://www.youtube.com/embed/'.$this->identifier,
];
}

protected function mapData(): array
{
return [
'videoid' => 'identifier',
'title' => 'name',
'date' => 'uploadDate',
];
}

protected function casts(): array
{
return [
'uploadDate' => new CarbonCast(),
];
}
}
1 change: 1 addition & 0 deletions stubs/prezet/content/welcome-to-prezet.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Prezet allows you to use Blade components directly in your markdown. Here's an e
<x-prezet::youtube
videoid="dt1ado9wJi8"
title="Supercharge Markdown with Laravel"
date="2023-12-15T00:00:00+08:00"
>
Login
</x-prezet::youtube>
Expand Down

0 comments on commit 247839d

Please sign in to comment.