Example <inertia-head> code

Getting started with <inertia-head>

Published June 8th, 2021

Important: The information in this article is over 12 months old, and may be out of date or no longer relevant.

But hey, you're here anyway, so give it a read see if it still applies to you.

Update 23rd July 2021: @inertiajs/inertia 0.10.0 changes the way the <inertia-link> and <inertia-head> components are used. Find out more...


The first time I set up an Inertia project I stuck with what I knew: Vue 2, even though Inertia comes with a Vue 3 adapter. As part of the Inertia Vue 2 adapter, the third-party Vue Meta was used. Essentially this library allowed you to create add a metaInfo property to your Vue component to update the app’s metadata view-by-view. However, Vue Meta is still not ready for Vue 3.

This week, the Inertia team announced the <inertia-head> component, a first-party feature of Inertia that replaces the previously-used Vue Meta.

Before you get started, to use <inertia-head>, you’ll need to be running the correct breed:

I’ve got it all up and running using [email protected] and [email protected].

Before you go on, this post assumes you already have your Inertia app up and running and understand how its ecosystem works.

The basics

The <inertia-head> component is added globally to your Inertia app – you can use it in any of your Views.

All you need to do is include the component in your view, and include any of the properties you want to have injected in to the document’s <head>:

1<template>
2 <div>
3 <inertia-head>
4 <title>Update your profile</title>
5 </inertia-head>
6 <!-- ... -->
7 </div>
8</template>
9<script>
10export default {
11 // ...
12}
13</script>
Copied!

It just plops in to your component’s template, and the <inertia-head> component does the rest.

It could be as simple as the <title>, or could be a complete set of description and OG metadata – what you include really depends on your app.

Make sure you remove the from your template</h2></div><p>Your document can only include one <code><title></code> in your <code><head></code>.</p><p>Your initial template (such as <code>app.blade.php</code>) may already have one set:</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #81A1C1;"><head></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #D8DEE9FF;"> </span><span style="color: #616E88;"><!-- ... --></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D8DEE9FF;"> </span><span style="color: #81A1C1;"><title></span><span style="color: #D8DEE9FF;">app.blade.php title tag</span><span style="color: #81A1C1;"></title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #D8DEE9FF;"> </span><span style="color: #616E88;"><!-- ... --></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #81A1C1;"></head></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <p>When using <inertia-head>, the component will output a title tag if you pass it one - this means your rendered page may actually have two title tags:</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #81A1C1;"><head></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #D8DEE9FF;"> </span><span style="color: #616E88;"><!-- ... --></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D8DEE9FF;"> </span><span style="color: #81A1C1;"><title></span><span style="color: #D8DEE9FF;">app.blade.php title tag</span><span style="color: #81A1C1;"></title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #D8DEE9FF;"> </span><span style="color: #616E88;"><!-- ... --></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">5</span><span style="color: #D8DEE9FF;"> </span><span style="color: #81A1C1;"><title></span><span style="color: #D8DEE9FF;">Inertia generated title tag</span><span style="color: #81A1C1;"></title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">6</span><span style="color: #D8DEE9FF;"> </span><span style="color: #616E88;"><!-- ... --></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">7</span><span style="color: #81A1C1;"></head></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <p>Your browser will only use the first <code><title></code> tag for displaying the title to the user, and the <code><inertia-head></code> won’t update the existing <code><title></code> attribute from your template.</p><p>To overcome this, you need to remove your <code><title></code> tag from your core template - such as your <code>app.blade.php</code> file, and rely on Inertia for generating the <code><title></code> markup for your app in all views.</p><div><div id="add-the-inertia-head-to-all-of-your-views" class="relative -top-12 sm:-top-24 md:-top-20"></div><h2>Add the <inertia-head> to all of your views</h2></div><p>Now that you have removed the <code><title></code> from your template, make sure you go through and add the <code><inertia-head></code> component to all of your views.</p><p>If you miss one, your page will miss injecting the <code><head></code> content – and if you’re updating the <title>, for example, will become title-less.</p><p>Unless… you set a default… keep reading.</p><div><div id="cascade-like-a-waterfall" class="relative -top-12 sm:-top-24 md:-top-20"></div><h2>Cascade like a waterfall</h2></div><p>The <code><inertia-head></code> component is set up to cascade from your views down to your core app.</p><p>This means that in your app’s layout (or as a site-wide component – <a target="_blank" href="https://inertiajs.com/title-and-meta#extending">check the docs for that</a>) you can set default <code><head></code> content that appears on all views. This is treated as the default, and then whatever you include in your views will be merged on top of the defaults.</p><p>If your default has:</p><ul><li><p><code><title></code> of “Portal”</p></li></ul><p>When you access a view that does not have its own <code><inertia-head></code> component, the defaults (as above) will be rendered out to the <code><head></code> -  handy for setting a default title on all views of your app without including the component explicitly in each view.</p><p>However, take note that while there is only one <code><title></code> per page, other tags could be replicated if you have defaults and view-level tags. Let’s say you have a default meta “description”, and then a view-level “description”.</p><p>That would output:</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #81A1C1;"><meta</span><span style="color: #D8DEE9FF;"> </span><span style="color: #8FBCBB;">name</span><span style="color: #ECEFF4;">=</span><span style="color: #ECEFF4;">"</span><span style="color: #A3BE8C;">description</span><span style="color: #ECEFF4;">"</span><span style="color: #D8DEE9FF;"> </span><span style="color: #8FBCBB;">content</span><span style="color: #ECEFF4;">=</span><span style="color: #ECEFF4;">"</span><span style="color: #A3BE8C;">My default description</span><span style="color: #ECEFF4;">"</span><span style="color: #81A1C1;">></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #81A1C1;"><meta</span><span style="color: #D8DEE9FF;"> </span><span style="color: #8FBCBB;">name</span><span style="color: #ECEFF4;">=</span><span style="color: #ECEFF4;">"</span><span style="color: #A3BE8C;">description</span><span style="color: #ECEFF4;">"</span><span style="color: #D8DEE9FF;"> </span><span style="color: #8FBCBB;">content</span><span style="color: #ECEFF4;">=</span><span style="color: #ECEFF4;">"</span><span style="color: #A3BE8C;">My update profile description</span><span style="color: #ECEFF4;">"</span><span style="color: #81A1C1;">></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <p>Not really ideal, right? The <code><inertia-head></code> component comes with ability to key your tags within the component using the <code>head-key</code> property.</p><p>In your <code>AppLayout.vue</code>, you may have:</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D8DEE9FF;"><inertia-head></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #D8DEE9FF;"> <title>Default Title</title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D8DEE9FF;"> <meta head-key="description" name="description" content="My default description"></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #D8DEE9FF;"></inertia-head></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <p>And in your <code>ShowProfile.vue</code>, you could have:</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D8DEE9FF;"><inertia-head></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #D8DEE9FF;"> <title>Update your profile</title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D8DEE9FF;"> <meta head-key="description" name="description" content="My update profile description"></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">4</span><span style="color: #D8DEE9FF;"></inertia-head></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <p>The <code>head-key</code> property matches the two “description” tags, and overwrites the defaults based on the key provided. Pretty neat, right?</p><div><div id="you-can-bind-props-to-the-content-within-inertia-head" class="relative -top-12 sm:-top-24 md:-top-20"></div><h2>You can bind props to the content within <inertia-head></h2></div><p>Remember too that you can also bind props to your <code><head></code> tags – really great for customising titles to include a reference to the view’s data (or if you’re using centralised language stores, with language coming from variables and not hard-coded in each component).</p> </div> <div class="my-8 is-torchlight"> <pre><code class='torchlight' style='background-color: #2e3440ff; --theme-selection-background: #88c0d099;'><!-- Syntax highlighted by torchlight.dev --><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">1</span><span style="color: #D8DEE9FF;"><inertia-head></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">2</span><span style="color: #D8DEE9FF;"> <title>Update your profile, {{ $page.props.user.name_first }}</title></span></div><div class='line'><span style="color:#4c566a; text-align: right; -webkit-user-select: none; user-select: none;" class="line-number">3</span><span style="color: #D8DEE9FF;"></inertia-head></span></div></code></pre> <div class="mt-1 flex items-center justify-end text-xs"> <div class="success mr-2 text-green-600 font-semibold transition-opacity ease-in-out opacity-0">Copied!</div> <button class="copy text-xs border border-gray-400 rounded px-3 py-1 text-gray-600 transition-colors ease-in-out hover:bg-blue-500 hover:border-blue-500 hover:text-white active:bg-blue-600 active:border-blue-600 active:text-white">Copy to Clipboard</button> </div> </div> <div class="prose prose-lg max-w-full"> <hr><p>This is such a welcome and easy-to-use add-on to the Inertia ecosystem – and removing a dependency is an added bonus.</p><p>And as always, don’t forget to check out the <a target="_blank" href="https://inertiajs.com/title-and-meta">Inertia Title and Meta documentation</a> for full details on all of the features of <code><inertia-head></code>.</p> </div> </div> </div> <div x-data="galleryLegacy"> <div class="fixed inset-0 z-50 flex items-center" x-show="show" x-transition:enter="transition-opacity ease-in-out duration-300" x-transition:enter-start="opacity-0 " x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"> <div class="absolute inset-0 z-40 bg-black" @click.prevent="close"></div> <div class="fixed w-full h-full z-50 flex items-center justify-center"> <div class="absolute top-0 right-0 z-[101]"> <button @click.prevent="close" class="text-white p-2 opacity-30 transition-opacity hover:opacity-100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8"> <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"/> </svg> </button> </div> <div x-show="hasMore" class="w-12 flex-shrink-0"> <button @click.prevent="goPrevious" class="text-white p-2 opacity-30 transition-opacity hover:opacity-100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 rotate-90"> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/> </svg> </button> </div> <template x-if="display"> <div class="flex-grow w-full h-full py-12 relative"> <div class="absolute z-30 top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-10 h-10"> <div class="animate-spin items-center justify-center rounded-full w-full h-full bg-gradient-to-tr from-blue-500 to-green-500 p-1.5"> <div class="h-7 w-7 rounded-full bg-black"></div> </div> </div> <picture class="w-full h-full" :key="key"> <template x-for="source in sources" :key="source.srcset"> <source :sizes="source.sizes" :srcset="source.srcset" :type="source.type" /> </template> <img @click.prevent="close" :alt="image.alt" class="relative w-full h-full object-contain relative z-[100]" :height="image.height" :src="image.src" :width="image.width"> </picture> </div> </template> <div x-show="hasMore" class="w-12 flex-shrink-0"> <button @click.prevent="goNext" class="text-white p-2 opacity-30 transition-opacity hover:opacity-100"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-8 h-8 -rotate-90"> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/> </svg> </button> </div> </div> </div> </div> </main> <div class="mt-12 px-6 md:mt-20 lg:mt-24"> <div class="mx-auto border-t border-gray-200 max-w-screen-xl md:mt-8 text-sm pt-8 text-center"> <h2 class="font-bold text-2xl mb-12">You may be interested in...</h2> <div class="md:grid md:grid-cols-3 md:gap-6"> <div class="group text-center"> <a href="/blog/inertiajs-and-laravel-jetstream-head-and-link-component-usage"> <div class="block overflow-hidden relative aspect-[3/2]"> <div class="absolute -top-[10%] bottom-0 inset-x-0 overflow-hidden "> <img src="/assets/blog-posts/inertia/inertia-link.svg" alt="inertia-link.svg" width="600" height="400" class="object-cover h-full transition origin-center duration-300 ease-in-out transform motion-safe:group-hover:scale-105"> </div> <div class="absolute -left-px -right-px -bottom-px overflow-hidden"> <div class="transition duration-300 ease-in-out origin-top motion-safe:group-hover:animate-bubble"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 31" class="w-full h-full text-white z-50 "> <path d="m255 0-30 30-30-30H0v31h450V0H255z" fill="currentColor"/> </svg> <div class="h-1 bg-white w-full -mt-px"></div> </div> </div> </div> </a> <div class="block pt-2 pb-8 px-6 space-y-3"> <a class="block font-bold text-xl leading-tight md:text-2xl lg:text-xl xl:text-2xl transition-colors duration-300 ease-in-out hover:text-blue-500" href="/blog/inertiajs-and-laravel-jetstream-head-and-link-component-usage">@inertiajs/inertia 0.10.0 and Laravel Jetstream: update the Head and Link component usage</a> <span class="block font-bold text-gray-500">July 23rd, 2021</span> <div class="block"> <a href="/blog/tags/inertia" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Inertia</a> <a href="/blog/tags/laravel" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Laravel</a> </div> </div> </div> <div class="group text-center"> <a href="/blog/im-speaking-at-laracon-au"> <div class="block overflow-hidden relative aspect-[3/2]"> <div class="absolute -top-[10%] bottom-0 inset-x-0 overflow-hidden "> <img src="/assets/blog-posts/laracon/2023-laracon-au.svg" alt="2023-laracon-au.svg" width="600" height="400" class="object-cover h-full transition origin-center duration-300 ease-in-out transform motion-safe:group-hover:scale-105"> </div> <div class="absolute -left-px -right-px -bottom-px overflow-hidden"> <div class="transition duration-300 ease-in-out origin-top motion-safe:group-hover:animate-bubble"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 31" class="w-full h-full text-white z-50 "> <path d="m255 0-30 30-30-30H0v31h450V0H255z" fill="currentColor"/> </svg> <div class="h-1 bg-white w-full -mt-px"></div> </div> </div> </div> </a> <div class="block pt-2 pb-8 px-6 space-y-3"> <a class="block font-bold text-xl leading-tight md:text-2xl lg:text-xl xl:text-2xl transition-colors duration-300 ease-in-out hover:text-blue-500" href="/blog/im-speaking-at-laracon-au">I'm speaking at Laracon AU</a> <span class="block font-bold text-gray-500">October 4th, 2023</span> <div class="block"> <a href="/blog/tags/statamic" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Statamic</a> <a href="/blog/tags/laravel" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Laravel</a> </div> </div> </div> <div class="group text-center"> <a href="/blog/using-laravel-to-help-generate-tailwind-css-class-names-usages-for-a-user-managed-statamic-site"> <div class="block overflow-hidden relative aspect-[3/2]"> <div class="absolute -top-[10%] bottom-0 inset-x-0 overflow-hidden "> <img src="/assets/blog-posts/statamic/tailwind-generator.svg" alt="tailwind-generator.svg" width="600" height="400" class="object-cover h-full transition origin-center duration-300 ease-in-out transform motion-safe:group-hover:scale-105"> </div> <div class="absolute -left-px -right-px -bottom-px overflow-hidden"> <div class="transition duration-300 ease-in-out origin-top motion-safe:group-hover:animate-bubble"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 450 31" class="w-full h-full text-white z-50 "> <path d="m255 0-30 30-30-30H0v31h450V0H255z" fill="currentColor"/> </svg> <div class="h-1 bg-white w-full -mt-px"></div> </div> </div> </div> </a> <div class="block pt-2 pb-8 px-6 space-y-3"> <a class="block font-bold text-xl leading-tight md:text-2xl lg:text-xl xl:text-2xl transition-colors duration-300 ease-in-out hover:text-blue-500" href="/blog/using-laravel-to-help-generate-tailwind-css-class-names-usages-for-a-user-managed-statamic-site">Using Laravel to help generate Tailwind CSS class names usages for a user-managed Statamic site</a> <span class="block font-bold text-gray-500">July 4th, 2023</span> <div class="block"> <a href="/blog/tags/tailwind-css" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Tailwind CSS</a> <a href="/blog/tags/laravel" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Laravel</a> <a href="/blog/tags/statamic" class="mr-2 text-gray-700 transition-colors hover:text-blue-500">Statamic</a> </div> </div> </div> </div> </div> </div> <footer class="mt-12 px-6"> <div class="mx-auto border-t border-gray-200 max-w-screen-xl text-gray-500 text-sm px-8 py-8 text-center"> <div class="inline-block mr-4"> <span>© Marty Friedel 2018 - 2024 All rights reserved.</span> </div> <div class="inline-block mr-4"> <a class="underline transition duration-150 ease-in-out hover:text-gray-600" href="/privacy-policy">Privacy Policy</a> </div> <div class="inline-block">Code syntax highlighting by <a class="underline transition duration-150 ease-in-out hover:text-gray-600" href="https://torchlight.dev" target="_blank">Torchlight</a> </div> </div> </footer> </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>