CINXE.COM

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Laravel Bootcamp</title>  <meta name="title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta name="description" content="Together let's walk through building and deploying a modern Laravel application from scratch.">  <meta property="og:type" content="website"> <meta property="og:url" content="https://bootcamp.laravel.com/"> <meta property="og:title" content="Laravel Bootcamp - Learn the PHP Framework for Web Artisans"> <meta property="og:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="og:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <meta property="twitter:card" content="summary_large_image"> <meta property="twitter:url" content="https://bootcamp.laravel.com/"> <meta property="twitter:title" content="Laravel - Learn the PHP Framework for Web Artisans"> <meta property="twitter:description" content="Together let's walk through building and deploying a modern Laravel application from scratch."> <meta property="twitter:image" content="https://bootcamp.laravel.com/img/og-image.jpg">  <link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png"> <link rel="manifest" href="/img/favicon/site.webmanifest"> <link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#ff2d20"> <link rel="shortcut icon" href="/img/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#ff2d20"> <meta name="msapplication-config" content="/img/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <meta name="color-scheme" content="light">  <link rel="stylesheet" href="https://use.typekit.net/ins2wgm.css">  <link rel="stylesheet" href="https://bootcamp.laravel.com/build/assets/app.1fe37668.css" /><script type="module" src="https://bootcamp.laravel.com/build/assets/app.f1116ac0.js"></script>  <script src="https://cdn.usefathom.com/script.js" data-site="KRRQTWHM" defer></script>  <script> window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => { if (localStorage.theme === 'system') { if (e.matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } } }); function updateTheme() { if (!('theme' in localStorage)) { localStorage.theme = 'system'; } switch (localStorage.theme) { case 'system': if (window.matchMedia('(prefers-color-scheme: dark)').matches) { document.documentElement.classList.add('dark'); } else { document.documentElement.classList.remove('dark'); } document.documentElement.setAttribute('color-theme', 'system'); break; case 'dark': document.documentElement.classList.add('dark'); document.documentElement.setAttribute('color-theme', 'dark'); break; case 'light': document.documentElement.classList.remove('dark'); document.documentElement.setAttribute('color-theme', 'light'); break; } } updateTheme(); </script> </head> <body x-data="{ navIsOpen: false }" class="font-sans text-gray-900 antialiased" > <a id="skip-to-content-link" href="#main-content" class="absolute bg-gray-100 px-4 py-2 top-3 left-3 text-gray-700 shadow-xl" > Skip to content </a> <div class="min-h-screen dark:bg-dark-700"> <div class="relative lg:flex lg:items-start"> <aside id="sidebar" class="min-h-screen hidden fixed top-0 bottom-0 left-0 z-20 h-full w-16 bg-gradient-to-b from-gray-100 to-white transition-all duration-300 overflow-hidden lg:sticky lg:w-80 lg:shrink-0 lg:flex lg:flex-col lg:justify-end lg:items-end 2xl:max-w-lg 2xl:w-full dark:from-dark-800 dark:to-dark-700" > <div class="relative min-h-0 flex-1 flex flex-col xl:w-80"> <a href="/" class="flex items-center py-8 px-4 lg:px-8 xl:px-16"> <img class="w-8 h-8 shrink-0 transition-all duration-300 lg:w-12 lg:h-12" :class="{ 'w-12 h-12': navIsOpen }" src="/img/logomark.min.svg" alt="Laravel" width="50" height="52" > Bootcamp </a> <div class="overflow-y-auto overflow-x-hidden px-4 lg:overflow-hidden lg:px-8 xl:px-16"> <nav id="indexed-nav" class="hidden lg:block lg:mt-4"> <div class="docs_sidebar"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> <div class="flex-grow flex flex-col justify-end"> <div class="hidden 2xl:block mb-12 pl-16"> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 0); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 ml-8" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 2000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-6 ml-32" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> <svg x-data="{ initializeAnimation: false, init() { setTimeout(() => { this.initializeAnimation = true; }, 1000); }, }" :class="initializeAnimation ? 'animate-cube' : ''" class="text-red-600 mt-12" width="46" height="53" viewBox="0 0 46 53" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="m23.102 1 22.1 12.704v25.404M23.101 1l-22.1 12.704v25.404" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path d="m45.202 39.105-22.1 12.702L1 39.105" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel"/><path transform="matrix(.86698 .49834 .00003 1 1 13.699)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86698 -.49834 -.00003 1 23.102 26.402)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.405H0z"/><path transform="matrix(.86701 -.49829 .86701 .49829 1 13.702)" stroke="currentColor" stroke-width="1.435" stroke-linejoin="bevel" d="M0 0h25.491v25.491H0z"/> </svg> </div> </div> </div> </aside> <header id="header" class="lg:hidden" @keydown.window.escape="navIsOpen = false" @click.away="navIsOpen = false" > <div class="relative mx-auto w-full py-10 bg-white transition duration-200 dark:bg-dark-700"> <div class="mx-auto px-8 sm:px-16 flex items-center justify-between"> <a href="/" class="flex items-center"> <img class="" src="/img/logomark.min.svg" alt="Laravel"> Bootcamp </a> <div class="flex-1 flex items-center justify-end"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> <button class="ml-2 relative w-10 h-10 p-2 text-red-600 lg:hidden focus:outline-none focus:shadow-outline" aria-label="Menu" @click.prevent="navIsOpen = !navIsOpen"> <svg x-show="! navIsOpen" x-transition.opacity class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg> <svg x-show="navIsOpen" x-transition.opacity x-cloak class="absolute inset-0 mt-2 ml-2 w-6 h-6" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg> </button> </div> </div> </div> <div x-show="navIsOpen" x-transition:enter="duration-150" x-transition:leave="duration-100 ease-in" x-cloak > <nav x-show="navIsOpen" x-cloak class="absolute w-full transform origin-top shadow-sm z-10" x-transition:enter="duration-150 ease-out" x-transition:enter-start="opacity-0 -translate-y-8 scale-75" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 -translate-y-8 scale-75" > <div class="relative p-8 bg-white docs_sidebar dark:bg-dark-600"> <ul> <li> <h2><a id="introduction" href="#introduction" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/introduction">Introduction</a></h2> </li> <li> <h2><a id="build-chirper-with-blade" href="#build-chirper-with-blade" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Blade</h2> <ul> <li> <a href="/blade/installation">Installation</a> </li> <li> <a href="/blade/creating-chirps">Creating Chirps</a> </li> <li> <a href="/blade/showing-chirps">Showing Chirps</a> </li> <li> <a href="/blade/editing-chirps">Editing Chirps</a> </li> <li> <a href="/blade/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/blade/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-livewire" href="#build-chirper-with-livewire" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Livewire</h2> <ul> <li> <a href="/livewire/installation">Installation</a> </li> <li> <a href="/livewire/creating-chirps">Creating Chirps</a> </li> <li> <a href="/livewire/showing-chirps">Showing Chirps</a> </li> <li> <a href="/livewire/editing-chirps">Editing Chirps</a> </li> <li> <a href="/livewire/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/livewire/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="build-chirper-with-inertia" href="#build-chirper-with-inertia" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Build Chirper with Inertia</h2> <ul> <li> <a href="/inertia/installation">Installation</a> </li> <li> <a href="/inertia/creating-chirps">Creating Chirps</a> </li> <li> <a href="/inertia/showing-chirps">Showing Chirps</a> </li> <li> <a href="/inertia/editing-chirps">Editing Chirps</a> </li> <li> <a href="/inertia/deleting-chirps">Deleting Chirps</a> </li> <li> <a href="/inertia/notifications-and-events">Notifications & Events</a> </li> </ul> </li> <li> <h2><a id="deploying" href="#deploying" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/deploying">Deploying</a></h2> </li> <li> <h2><a id="conclusion" href="#conclusion" class="heading-permalink" aria-hidden="true" title="Permalink">#</a><a href="/conclusion">Conclusion</a></h2> </li> </ul> </div> </nav> </div> </header> <section class="flex-1 dark:bg-dark-700"> <div class="px-8 sm:px-16 lg:px-24"> <div class="max-w-screen-lg flex flex-col items-end transition-colors dark:border-gray-700 lg:mt-8 lg:flex-row-reverse"> <div class="fixed top-8 hidden lg:flex items-center justify-center"> <button id="header__sun" onclick="toSystemMode()" title="Switch to system theme" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-sun" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="12" cy="12" r="4"></circle> <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"></path> </svg> </button> <button id="header__moon" onclick="toLightMode()" title="Switch to light mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z" /> </svg> </button> <button id="header__indeterminate" onclick="toDarkMode()" title="Switch to dark mode" class="relative w-10 h-10 focus:outline-none focus:shadow-outline text-gray-500"> <svg style="width:24px;height:24px" viewBox="0 0 24 24"> <path fill="currentColor" d="M12 2A10 10 0 0 0 2 12A10 10 0 0 0 12 22A10 10 0 0 0 22 12A10 10 0 0 0 12 2M12 4A8 8 0 0 1 20 12A8 8 0 0 1 12 20V4Z" /> </svg> </button> </div> </div> <section class="pt-8 pb-8 md:pt-16 md:pb-16 flex"> <section class="docs_main flex-1 max-w-full"> <div id="main-content"> <div class="prose dark:prose-invert relative"> <aside class="table-of-contents-sidebar-wrapper not-prose"><aside class="table-of-contents-sidebar not-prose"><h2>On this page</h2><ul class="table-of-contents"> <li> <a href="#retrieving-the-chirps">Retrieving the Chirps</a> </li> <li> <a href="#connecting-users-to-chirps">Connecting users to Chirps</a> </li> <li> <a href="#updating-our-component">Updating our component</a> <ul> <li> <a href="#extra-credit-relative-dates">Extra Credit: Relative dates</a> </li> </ul> </li> </ul></aside></aside> <h1>04. Showing Chirps</h1> In the previous step we added the ability to create Chirps, now we're ready to display them! <h2><a id="retrieving-the-chirps" href="#retrieving-the-chirps" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Retrieving the Chirps</h2> Let's update the <code>index</code> method of our <code>ChirpController</code> class to pass Chirps from every user to our Index page: <div class="code-container"> <div class="code-container-filename">app/Http/Controllers/ChirpController.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-remove-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> namespace App\Http\Controllers;</div><div class='line'>  </div><div class='line'> use App\Models\Chirp;</div><div class='line'> use Illuminate\Http\RedirectResponse;</div><div class='line'> use Illuminate\Http\Request;</div><div class='line'> use Inertia\Inertia;</div><div class='line'> use Inertia\Response;</div><div class='line'>  </div></details><div class='line'> class ChirpController extends Controller</div><div class='line'> {</div><div class='line'> /**</div><div class='line'> * Display a listing of the resource.</div><div class='line'> */</div><div class='line'> public function index(): Response</div><div class='line'> {</div><div class='line'> return Inertia::render('Chirps/Index', [</div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- //</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ 'chirps' => Chirp::with('user:id,name')->latest()->get(),</div><div class='line'> ]);</div><div class='line'> }</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> /**</div><div class='line'> * Show the form for creating a new resource.</div><div class='line'> */</div><div class='line'> public function create()</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Store a newly created resource in storage.</div><div class='line'> */</div><div class='line'> public function store(Request $request): RedirectResponse</div><div class='line'> {</div><div class='line'> $validated = $request->validate([</div><div class='line'> 'message' => 'required|string|max:255',</div><div class='line'> ]);</div><div class='line'>  </div><div class='line'> $request->user()->chirps()->create($validated);</div><div class='line'>  </div><div class='line'> return redirect(route('chirps.index'));</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Display the specified resource.</div><div class='line'> */</div><div class='line'> public function show(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Show the form for editing the specified resource.</div><div class='line'> */</div><div class='line'> public function edit(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Update the specified resource in storage.</div><div class='line'> */</div><div class='line'> public function update(Request $request, Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div><div class='line'> /**</div><div class='line'> * Remove the specified resource from storage.</div><div class='line'> */</div><div class='line'> public function destroy(Chirp $chirp)</div><div class='line'> {</div><div class='line'> //</div><div class='line'> }</div><div class='line'>  </div></details><div class='line'> }</div></code></pre> </div> Here we've used Eloquent's <code>with</code> method to <a href="https://laravel.com/docs/eloquent-relationships#eager-loading">eager-load</a> every Chirp's associated user's ID and name. We've also used the <code>latest</code> scope to return the records in reverse-chronological order. <aside class="mb-10 max-w-2xl mx-auto px-4 py-8 shadow-lg lg:flex lg:items-center bg-white dark:bg-dark-700"><div class="w-20 h-20 mb-6 flex items-center justify-center shrink-0 bg-purple-600 lg:mb-0"><img src="/img/callouts/lightbulb.min.svg" class="opacity-75"></img></div><div class="lg:ml-6 prose-p:m-0"> Returning all Chirps at once won't scale in production. Take a look at Laravel's powerful <a href="https://laravel.com/docs/pagination">pagination</a> to improve performance.</div></aside> <h2><a id="connecting-users-to-chirps" href="#connecting-users-to-chirps" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Connecting users to Chirps</h2> We've instructed Laravel to return the <code>id</code> and <code>name</code> property from the <code>user</code> relationship so that we can display the name of the Chirp's author without returning other potentially sensitive information such as the author's email address. But, the Chirp's <code>user</code> relationship hasn't been defined yet. To fix this, let's add a new <a href="https://laravel.com/docs/eloquent-relationships#one-to-many-inverse">"belongs to"</a> relationship to our <code>Chirp</code> model: <div class="code-container"> <div class="code-container-filename">app/Models/Chirp.php</div> <pre><code data-theme="olaolu-palenight" data-lang="php" class='torchlight has-add-lines has-diff-lines has-summaries' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <?php</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> namespace App\Models;</div><div class='line'>  </div><div class='line'> use Illuminate\Database\Eloquent\Factories\HasFactory;</div><div class='line'> use Illuminate\Database\Eloquent\Model;</div></details><div class='line line-add line-has-background' style='background-color: #99b76d23'>+use Illuminate\Database\Eloquent\Relations\BelongsTo;</div><div class='line'>  </div><div class='line'> class Chirp extends Model</div><div class='line'> {</div><details><summary style='cursor: pointer; display: block'><div class='line'>  ...</div></summary><div class='line'> use HasFactory;</div><div class='line'>  </div><div class='line'> protected $fillable = [</div><div class='line'> 'message',</div><div class='line'> ];</div><div class='line'>  </div></details><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ public function user(): BelongsTo</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ return $this->belongsTo(User::class);</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ }</div><div class='line'> }</div></code></pre> </div> This relationship is the inverse of the "has many" relationship we created earlier on the <code>User</code> model. <h2><a id="updating-our-component" href="#updating-our-component" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Updating our component</h2> Next, let's create a <code>Chirp</code> component for our front-end. This component will be responsible for displaying an individual Chirp: <div class="tabbed-code" data-group="f86d679141246e9825a8f6c067a5f5a8"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Vue" onClick="setTab('Vue', 'f86d679141246e9825a8f6c067a5f5a8')">Vue</button> <button class="tabbed-code-nav-button" data-tab="React" onClick="setTab('React', 'f86d679141246e9825a8f6c067a5f5a8')">React</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Vue"> <div class="code-container-filename">resources/js/Components/Chirp.vue</div> <pre><code data-theme="olaolu-palenight" data-lang="vue" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'><script setup></div><div class='line'>defineProps(['chirp']);</div><div class='line'></script></div><div class='line'> </div><div class='line'><template></div><div class='line'> <div class="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"></div><div class='line'> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div class="flex-1"></div><div class='line'> <div class="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span class="text-gray-800">{{ chirp.user.name }}</span></div><div class='line'> <small class="ml-2 text-sm text-gray-600">{{ new Date(chirp.created_at).toLocaleString() }}</small></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ chirp.message }}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'></template></div></code></pre> </div> <div class="code-container" data-tab="React"> <div class="code-container-filename">resources/js/Components/Chirp.jsx</div> <pre><code data-theme="olaolu-palenight" data-lang="javascript" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'>import React from 'react';</div><div class='line'> </div><div class='line'>export default function Chirp({ chirp }) {</div><div class='line'> return (</div><div class='line'> <div className="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"></div><div class='line'> <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div className="flex-1"></div><div class='line'> <div className="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span className="text-gray-800">{chirp.user.name}</span></div><div class='line'> <small className="ml-2 text-sm text-gray-600">{new Date(chirp.created_at).toLocaleString()}</small></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> <p className="mt-4 text-lg text-gray-900">{chirp.message}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> );</div><div class='line'>}</div></code></pre> </div> </div> </div> Finally, we will update our <code>Chirps/Index</code> page component to accept the <code>chirps</code> prop and render the Chirps below our form using our new component: <div class="tabbed-code" data-group="f86d679141246e9825a8f6c067a5f5a8"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Vue" onClick="setTab('Vue', 'f86d679141246e9825a8f6c067a5f5a8')">Vue</button> <button class="tabbed-code-nav-button" data-tab="React" onClick="setTab('React', 'f86d679141246e9825a8f6c067a5f5a8')">React</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Vue"> <div class="code-container-filename">resources/js/Pages/Chirps/Index.vue</div> <pre><code data-theme="olaolu-palenight" data-lang="vue" class='torchlight has-add-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <script setup></div><div class='line'> import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import Chirp from '@/Components/Chirp.vue';</div><div class='line'> import InputError from '@/Components/InputError.vue';</div><div class='line'> import PrimaryButton from '@/Components/PrimaryButton.vue';</div><div class='line'> import { useForm, Head } from '@inertiajs/vue3';</div><div class='line'>  </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+defineProps(['chirps']);</div><div class='line'>  </div><div class='line'> const form = useForm({</div><div class='line'> message: '',</div><div class='line'> });</div><div class='line'> </script></div><div class='line'>  </div><div class='line'> <template></div><div class='line'> <Head title="Dashboard" /></div><div class='line'>  </div><div class='line'> <AuthenticatedLayout></div><div class='line'> <div class="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8"></div><div class='line'> <form @submit.prevent="form.post(route('chirps.store'), { onSuccess: () => form.reset() })"></div><div class='line'> <textarea</div><div class='line'> v-model="form.message"</div><div class='line'> placeholder="What's on your mind?"</div><div class='line'> class="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"</div><div class='line'> ></textarea></div><div class='line'> <InputError :message="form.errors.message" class="mt-2" /></div><div class='line'> <PrimaryButton class="mt-4">Chirp</PrimaryButton></div><div class='line'> </form></div><div class='line'>  </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <div class="mt-6 bg-white shadow-sm rounded-lg divide-y"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Chirp</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ v-for="chirp in chirps"</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ :key="chirp.id"</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ :chirp="chirp"</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div></div><div class='line'> </div></div><div class='line'> </AuthenticatedLayout></div><div class='line'> </template></div></code></pre> </div> <div class="code-container" data-tab="React"> <div class="code-container-filename">resources/js/Pages/Chirps/Index.jsx</div> <pre><code data-theme="olaolu-palenight" data-lang="javascript" class='torchlight has-add-lines has-remove-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> import React from 'react';</div><div class='line'> import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import Chirp from '@/Components/Chirp';</div><div class='line'> import InputError from '@/Components/InputError';</div><div class='line'> import PrimaryButton from '@/Components/PrimaryButton';</div><div class='line'> import { useForm, Head } from '@inertiajs/react';</div><div class='line'>  </div><div class='line line-remove line-has-background' style='background-color: #ef535033'>-export default function Index({ auth }) {</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+export default function Index({ auth, chirps }) {</div><div class='line'> const { data, setData, post, processing, reset, errors } = useForm({</div><div class='line'> message: '',</div><div class='line'> });</div><div class='line'>  </div><div class='line'> const submit = (e) => {</div><div class='line'> e.preventDefault();</div><div class='line'> post(route('chirps.store'), { onSuccess: () => reset() })</div><div class='line'> };</div><div class='line'>  </div><div class='line'> return (</div><div class='line'> <AuthenticatedLayout></div><div class='line'> <Head title="Chirps" /></div><div class='line'>  </div><div class='line'> <div className="max-w-2xl mx-auto p-4 sm:p-6 lg:p-8"></div><div class='line'> <form onSubmit={submit}></div><div class='line'> <textarea</div><div class='line'> value={data.message}</div><div class='line'> placeholder="What's on your mind?"</div><div class='line'> className="block w-full border-gray-300 focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm"</div><div class='line'> onChange={e => setData('message', e.target.value)}</div><div class='line'> ></textarea></div><div class='line'> <InputError message={errors.message} className="mt-2" /></div><div class='line'> <PrimaryButton className="mt-4" disabled={processing}>Chirp</PrimaryButton></div><div class='line'> </form></div><div class='line'>  </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <div className="mt-6 bg-white shadow-sm rounded-lg divide-y"></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ {chirps.map(chirp =></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <Chirp key={chirp.id} chirp={chirp} /></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ )}</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ </div></div><div class='line'> </div></div><div class='line'> </AuthenticatedLayout></div><div class='line'> );</div><div class='line hidden'>  </div><div class='line'> }</div></code></pre> </div> </div> </div> Now take a look in your browser to see the message you Chirped earlier! <img src="/img/screenshots/chirp-index.png" alt="Chirp listing" class="rounded-lg border dark:border-none shadow-lg" /> <h3><a id="extra-credit-relative-dates" href="#extra-credit-relative-dates" class="heading-permalink" aria-hidden="true" title="Permalink">#</a>Extra Credit: Relative dates</h3> In our <code>Chirp</code> component we formatted the dates to be human-readable, but we can take that one step further by displaying relative dates using the popular <a href="https://day.js.org">Day.js</a> library. First, install the <code>dayjs</code> NPM package: <div class="code-container"> <pre><code data-theme="olaolu-palenight" data-lang="shell" class='torchlight' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'>npm install dayjs</div></code></pre> </div> Then we can use this library in our <code>Chirp</code> component to display relative dates: <div class="tabbed-code" data-group="f86d679141246e9825a8f6c067a5f5a8"> <div class="tabbed-code-nav"> <button class="tabbed-code-nav-button active" data-tab="Vue" onClick="setTab('Vue', 'f86d679141246e9825a8f6c067a5f5a8')">Vue</button> <button class="tabbed-code-nav-button" data-tab="React" onClick="setTab('React', 'f86d679141246e9825a8f6c067a5f5a8')">React</button> </div> <div class="tabbed-code-body"> <div class="code-container active" data-tab="Vue"> <div class="code-container-filename">resources/js/Components/Chirp.vue</div> <pre><code data-theme="olaolu-palenight" data-lang="vue" class='torchlight has-add-lines has-remove-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> <script setup></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import dayjs from 'dayjs';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import relativeTime from 'dayjs/plugin/relativeTime';</div><div class='line'>  </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+dayjs.extend(relativeTime);</div><div class='line'>  </div><div class='line'> defineProps(['chirp']);</div><div class='line'> </script></div><div class='line'>  </div><div class='line'> <template></div><div class='line'> <div class="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"></div><div class='line'> <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div class="flex-1"></div><div class='line'> <div class="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span class="text-gray-800">{{ chirp.user.name }}</span></div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- <small class="ml-2 text-sm text-gray-600">{{ new Date(chirp.created_at).toLocaleString() }}</small></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <small class="ml-2 text-sm text-gray-600">{{ dayjs(chirp.created_at).fromNow() }}</small></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> <p class="mt-4 text-lg text-gray-900">{{ chirp.message }}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> </template></div></code></pre> </div> <div class="code-container" data-tab="React"> <div class="code-container-filename">resources/js/Components/Chirp.jsx</div> <pre><code data-theme="olaolu-palenight" data-lang="javascript" class='torchlight has-add-lines has-remove-lines has-diff-lines' style='background-color: #292D3E; --theme-selection-background: #7580B850;'><div class='line'> import React from 'react';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import dayjs from 'dayjs';</div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+import relativeTime from 'dayjs/plugin/relativeTime';</div><div class='line'>  </div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+dayjs.extend(relativeTime);</div><div class='line'>  </div><div class='line'> export default function Chirp({ chirp }) {</div><div class='line'> return (</div><div class='line'> <div className="p-6 flex space-x-2"></div><div class='line'> <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-gray-600 -scale-x-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2"></div><div class='line'> <path strokeLinecap="round" strokeLinejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" /></div><div class='line'> </svg></div><div class='line'> <div className="flex-1"></div><div class='line'> <div className="flex justify-between items-center"></div><div class='line'> <div></div><div class='line'> <span className="text-gray-800">{chirp.user.name}</span></div><div class='line line-remove line-has-background' style='background-color: #ef535033'>- <small className="ml-2 text-sm text-gray-600">{new Date(chirp.created_at).toLocaleString()}</small></div><div class='line line-add line-has-background' style='background-color: #99b76d23'>+ <small className="ml-2 text-sm text-gray-600">{dayjs(chirp.created_at).fromNow()}</small></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> <p className="mt-4 text-lg text-gray-900">{chirp.message}</p></div><div class='line'> </div></div><div class='line'> </div></div><div class='line'> );</div><div class='line hidden'>  </div><div class='line'> }</div></code></pre> </div> </div> </div> Take a look in the browser to see your relative dates. <img src="/img/screenshots/chirp-index-dates.png" alt="Chirp listing with relative dates" class="rounded-lg border dark:border-none shadow-lg" /> Feel free to Chirp some more, or even register another account and start a conversation! <a href="/inertia/editing-chirps">Continue to allow editing of Chirps...</a><script> function setTab(tab, group, save) { save = typeof save === 'undefined' ? true : save document .querySelectorAll(`.tabbed-code[data-group="${group}"] .tabbed-code-nav-button`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] .code-container`) .forEach(el => el.classList.remove('active')) document .querySelectorAll(`.tabbed-code[data-group="${group}"] [data-tab="${tab}"]`) .forEach(el => el.classList.add('active')) if (save) { saveTab(tab, group) } } function getTabs() { try { return JSON.parse(localStorage.tabs) } catch { return {} } } function saveTab(tab, group) { localStorage.tabs = JSON.stringify({ ...getTabs(), [group]: tab, }) } function restoreTabs() { Object.entries(getTabs()).forEach(([group, tab]) => setTab(tab, group, false)) } restoreTabs() </script> </div> <script> // Set the active navigation state... Array.from(document.querySelectorAll('#header a, #sidebar a')).forEach(link => { if (link.hostname === location.hostname && (link.pathname === location.pathname || (link.pathname === '/introduction' && location.pathname === '/')) ) { link.classList.add('active') if (link.parentNode.tagName === 'LI') { link.parentNode.parentNode.parentNode.classList.add('sub--on') } } }) // Make the navigation headings expandable... Array.from(document.querySelectorAll('.docs_sidebar h2')).forEach(el => { if (el.children.length > 1) { return } el.addEventListener('click', (e) => { const active = el.parentNode.classList.contains('sub--on'); [...document.querySelectorAll('.docs_sidebar ul li')].forEach(el => el.classList.remove('sub--on')); if (! active) { el.parentNode.classList.add('sub--on'); } }) }) // Highlight the active section in the table of contents... function setActiveTableOfContents () { const links = Array.from(document.querySelectorAll('.table-of-contents a')) const lastVisible = links .slice() .reverse() .find(link => { const el = document.querySelector(link.hash) return el.getBoundingClientRect().top <= 56; }) ?? links[0] links.forEach(link => { if (link === lastVisible) { link.classList.add('active') } else { link.classList.remove('active') } }) } setActiveTableOfContents() window.addEventListener('scroll', setActiveTableOfContents, { passive: true }) </script> </div> </section> </section> </div> </section> </div> <footer class="relative mt-12 pt-12 bg-gradient-to-b from-gray-50 to-white dark:from-dark-800 dark:to-dark-700"> <div class="max-w-screen-2xl mx-auto w-full px-8"> <div> <a href="https://laravel.com" class="inline-flex"> <img class="h-14" src="/img/logo.min.svg" alt="Laravel" loading="lazy"> </a> </div> <div class="mt-6 sm:mt-12"> Laravel is a web application framework with expressive, elegant syntax. We believe development must be an enjoyable and creative experience to be truly fulfilling. Laravel attempts to take the pain out of development by easing common tasks used in most web projects. <ul class="mt-6 flex items-center space-x-3"> <li> <a href="https://twitter.com/laravelphp"> <img id="footer__twitter_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/twitter.dark.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> <img id="footer__twitter" class="inline-block dark:hidden w-6 h-6" src="/img/social/twitter.min.svg" alt="Twitter" loading="lazy" width="24" height="20"> </a> </li> <li> <a href="https://github.com/laravel"> <img id="footer__github_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/github.dark.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> <img id="footer__github" class="inline-block dark:hidden w-6 h-6" src="/img/social/github.min.svg" alt="GitHub" loading="lazy" width="24" height="24"> </a> </li> <li> <a href="https://discord.gg/mPZNm7A"> <img id="footer__discord_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/discord.dark.min.svg" alt="Discord" loading="lazy" width="21" height="24"> <img id="footer__discord" class="inline-block dark:hidden w-6 h-6" src="/img/social/discord.min.svg" alt="Discord" loading="lazy" width="21" height="24"> </a> </li> <li> <a href="https://www.youtube.com/laravelphp"> <img id="footer__youtube_dark" class="hidden dark:inline-block w-6 h-6" src="/img/social/youtube.dark.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> <img id="footer__youtube" class="inline-block dark:hidden w-6 h-6" src="/img/social/youtube.min.svg" alt="YouTube" loading="lazy" width="169" height="150"> </a> </li> </ul> </div> <div class="mt-10 border-t pt-6 pb-16 border-gray-200 dark:border-dark-500"> Laravel is a Trademark of Laravel Holdings Inc. Copyright © Laravel Holdings Inc. Code highlighting provided by <a href="https://torchlight.dev">Torchlight</a> </div> </div> </footer> </div> </body> </html>