Add app name to page titles in playgrounds

Author: reinink

playgrounds/react/resources/js/app.tsx

@@ -2,6 +2,7 @@ import { createInertiaApp } from '@inertiajs/react'
 import { hydrateRoot } from 'react-dom/client'
 
 createInertiaApp({
+  title: (title) => `${title} - React Playground`,
   resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
     return pages[`./Pages/${name}.tsx`]

playgrounds/react/resources/js/ssr.tsx

@@ -6,6 +6,7 @@ createServer((page) =>
   createInertiaApp({
     page,
     render: ReactDOMServer.renderToString,
+    title: (title) => `${title} - React Playground`,
     resolve: (name) => {
       const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true })
       return pages[`./Pages/${name}.tsx`]

playgrounds/svelte/resources/js/Pages/Article.svelte

@@ -2,8 +2,12 @@
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
+<script>
+  export let appName
+</script>
+
 <svelte:head>
-  <title>Article</title>
+  <title>Article - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">Article</h1>

playgrounds/svelte/resources/js/Pages/Form.svelte

@@ -5,6 +5,8 @@
 <script>
   import { useForm } from '@inertiajs/svelte'
 
+  export let appName
+
   let form = useForm('NewUser', {
     name: '',
     company: '',
@@ -17,7 +19,7 @@
 </script>
 
 <svelte:head>
-  <title>Form</title>
+  <title>Form - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">Form</h1>

playgrounds/svelte/resources/js/Pages/Home.svelte

@@ -4,10 +4,11 @@
 
 <script>
   import { inertia } from '@inertiajs/svelte'
+  export let appName
 </script>
 
 <svelte:head>
-  <title>Home</title>
+  <title>Home - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">Home</h1>

playgrounds/svelte/resources/js/Pages/Login.svelte

@@ -2,8 +2,12 @@
   export { default as layout } from '../Components/Layout.svelte'
 </script>
 
+<script>
+  export let appName
+</script>
+
 <svelte:head>
-  <title>Login</title>
+  <title>Login - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">Login</h1>

playgrounds/svelte/resources/js/Pages/User.svelte

@@ -3,11 +3,12 @@
 </script>
 
 <script>
+  export let appName
   export let user
 </script>
 
 <svelte:head>
-  <title>User</title>
+  <title>User - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">User</h1>

playgrounds/svelte/resources/js/Pages/Users.svelte

@@ -3,11 +3,12 @@
 </script>
 
 <script>
+  export let appName
   export let users
 </script>
 
 <svelte:head>
-  <title>Users</title>
+  <title>Users - {appName}</title>
 </svelte:head>
 
 <h1 class="text-3xl">Users</h1>

playgrounds/vue2/resources/js/app.js

@@ -2,6 +2,7 @@ import { createInertiaApp } from '@inertiajs/vue2'
 import Vue from 'vue'
 
 createInertiaApp({
+  title: (title) => `${title} - Vue 2 Playground`,
   resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
     return pages[`./Pages/${name}.vue`]

playgrounds/vue2/resources/js/ssr.js

@@ -7,6 +7,7 @@ createServer((page) =>
   createInertiaApp({
     page,
     render: createRenderer().renderToString,
+    title: (title) => `${title} - Vue 2 Playground`,
     resolve: (name) => {
       const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
       return pages[`./Pages/${name}.vue`]

playgrounds/vue3/resources/js/app.ts

@@ -2,6 +2,7 @@ import { createInertiaApp } from '@inertiajs/vue3'
 import { createSSRApp, h, type DefineComponent } from 'vue'
 
 createInertiaApp({
+  title: (title) => `${title} - Vue 3 Playground`,
   resolve: (name) => {
     const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
     return pages[`./Pages/${name}.vue`] as DefineComponent

playgrounds/vue3/resources/js/ssr.ts

@@ -7,6 +7,7 @@ createServer((page) =>
   createInertiaApp({
     page,
     render: renderToString,
+    title: (title) => `${title} - Vue 3 Playground`,
     resolve: (name) => {
       const pages = import.meta.glob('./Pages/**/*.vue', { eager: true })
       return pages[`./Pages/${name}.vue`] as DefineComponent