Added Title tags to every page and the page generator.

plainblack · May 13, 2024 · f69a822 · f69a822
1 parent 4fa43fd
commit f69a822
Show file tree

Hide file tree

Showing 19 changed files with 91 additions and 64 deletions.
diff --git a/error.vue b/error.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>{{ error?.statusCode || 500 }} {{ error?.statusMessage || "" }}</Title>
     <div class="surface-section px-4 py-8 md:px-6 lg:px-8">
         <div class="flex flex-column lg:flex-row justify-content-center align-items-center gap-7">
             <div class="text-center lg:text-right">
@@ -7,7 +8,7 @@
                 <p class="text-700 text-3xl mt-0 mb-6">{{ error?.message || "" }}</p>
                 <p class="text-700 text-3xl mt-0 mb-6">{{ error?.description || "" }}</p>
                 <NuxtLink to="/" v-slot="{ navigate }" custom>
-                    <Button @click="navigate" type="button" label="Go back to home page" class="p-button-outlined"></Button>
+                    <Button @click="navigate" type="button" label="Go back to home page"></Button>
                 </NuxtLink>
             </div>
             <div>

diff --git a/pages/index.vue b/pages/index.vue
@@ -1,9 +1,12 @@
 <template>
+    <Title>{{ config.public?.site?.name }}</Title>
     homepage goes here
     <Button @click="doit()">Doit</Button>
 </template>
 
 <script setup>
+const config = useRuntimeConfig();
+
 async function doit() {
     console.log(await $fetch(`/api/${useRestVersion()}/test?foo=bar`))
 }

diff --git a/pages/system-wide-alert.vue b/pages/system-wide-alert.vue
@@ -1,5 +1,6 @@
 <template>
-   <PanelFrame section="Admin" title="System Wide Alert">
+    <Title>System Wide Alert</Title>
+    <PanelFrame section="Admin" title="System Wide Alert">
         <template #left>
             <PanelNav :links="links" />
         </template>
@@ -42,7 +43,7 @@
 
 <script setup>
 definePageMeta({
-    middleware: ['auth', 'admin']
+    middleware: ['auth', 'admin'],
 });
 const ttlOptions = [
     { value: 1000 * 60 * 60, label: '1 hour' },

diff --git a/pages/user/[id]/profile.vue b/pages/user/[id]/profile.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>User profile for {{ user.meta?.displayName }}</Title>
     <div v-if="user.props?.id" class="surface-card p-4 border-1 surface-border border-round flex-auto">
         <div class="text-900 font-semibold text-lg mt-3">User profile for {{ user.meta?.displayName }}</div>
 

diff --git a/pages/user/[id]/reset-password.vue b/pages/user/[id]/reset-password.vue
@@ -1,10 +1,14 @@
 <template>
+    <Title>Create an Account for {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
+            <h1 class="text-900 text-3xl font-medium mb-3 mt-0">Reset Password</h1>
+            <span class="text-600 font-medium line-height-3">Remember your account?</span>
+            <NuxtLink to="/user/login" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Sign in
+            </NuxtLink>
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
-            <h1 class="mt-0">Reset Passsword</h1>
+        <PanelZone>
             <Form :send="resetPassword">
                 <div class="flex gap-5 flex-column-reverse md:flex-row">
                     <div class="flex-auto">
@@ -25,7 +29,7 @@
 
                 </div>
             </Form>
-        </div>
+        </PanelZone>
     </div>
 </template>
 

diff --git a/pages/user/admin/[id].vue b/pages/user/admin/[id].vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>Edit User {{user.props?.username}}</Title>
     <PanelFrame section="Admin" :title="`Edit User ${user.props?.username}`">
         <template #left>
             <PanelNav :links="links" />

diff --git a/pages/user/admin/index.vue b/pages/user/admin/index.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>Users</Title>
     <PanelFrame section="Admin" title="Users">
         <template #left>
             <PanelNav :links="links" />
@@ -75,7 +76,7 @@
 <script setup>
 const notify = useNotify();
 definePageMeta({
-    middleware: ['auth', 'admin']
+    middleware: ['auth', 'admin'],
 });
 
 const users = useVingKind({

diff --git a/pages/user/create.vue b/pages/user/create.vue
@@ -1,16 +1,15 @@
 <template>
+    <Title>Create an Account for {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
-            <div class="text-900 text-3xl font-medium mb-3">Create an Account</div>
+            <h1 class="text-900 text-3xl font-medium mb-3 mt-0">Create an Account</h1>
             <span class="text-600 font-medium line-height-3">Already have an account?</span>
             <NuxtLink to="/user/login" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Sign in
             </NuxtLink>
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
-
+        <PanelZone>
             <Form :send="createAccount">
-
                 <FormInput name="username" v-model="newUser.username" required label="Username" autocomplete="username"
                     type="text" class="mb-3" />
 
@@ -51,7 +50,7 @@
                     <span>Sign in With Google</span>
                 </Button>
             </div>
-        </div>
+        </PanelZone>
     </div>
 </template>
 

diff --git a/pages/user/login.vue b/pages/user/login.vue
@@ -1,13 +1,14 @@
 <template>
+    <Title>Log in to {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
-            <div class="text-900 text-3xl font-medium mb-3">Welcome Back</div>
+            <h1 class="text-900 text-3xl font-medium mb-3 mt-0">Welcome Back</h1>
             <span class="text-600 font-medium line-height-3">Don't have an account?</span>
             <NuxtLink to="/user/create" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Create one today!
             </NuxtLink>
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
+        <PanelZone>
 
             <Form :send="tryLogin">
                 <FormInput name="login" v-model="login" id="login1" required label="Email or Username" autocomplete="email"
@@ -48,7 +49,7 @@
                     <span>Sign in With Google</span>
                 </Button>
             </div>
-        </div>
+        </PanelZone>
     </div>
 </template>
 

diff --git a/pages/user/logout.vue b/pages/user/logout.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>Logged out of {{ config.public?.site?.name }}</Title>
     <p>You are now logged out.</p>
 
     <NuxtLink to="/" v-slot="{ navigate }" custom>
@@ -12,6 +13,7 @@ import { sleep } from '#ving/utils/sleep.mjs';
 definePageMeta({
     middleware: 'auth'
 });
+const config = useRuntimeConfig();
 const currentUser = useCurrentUser();
 await currentUser.logout();
 await sleep(1000 * 5);

diff --git a/pages/user/must-verify-email.vue b/pages/user/must-verify-email.vue
@@ -1,12 +1,13 @@
 <template>
+    <Title>Must verify email for {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
+        <PanelZone>
             You cannot continue to this content until you have verified your email address. We've sent you an email with a
             link to verify. Please check your email to continue.
-        </div>
+        </PanelZone>
     </div>
 </template>
 

diff --git a/pages/user/reset-password.vue b/pages/user/reset-password.vue
@@ -1,11 +1,14 @@
 <template>
+    <Title>Send password reset for {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
+            <h1 class="text-900 text-3xl font-medium mb-3 mt-0">Send Password Reset</h1>
+            <span class="text-600 font-medium line-height-3">Remember your account?</span>
+            <NuxtLink to="/user/login" class="font-medium no-underline ml-2 text-blue-500 cursor-pointer">Sign in
+            </NuxtLink>
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
-            <h1 class="mt-0">Reset Passsword</h1>
-            <p>Where should we send the password reset email?</p>
+        <PanelZone info="Where should we send the password reset email?">
             <Form :send="sendPasswordReset">
                 <div class="flex gap-5 flex-column-reverse md:flex-row">
                     <div class="flex-auto">
@@ -18,8 +21,7 @@
 
                 </div>
             </Form>
-        </div>
-
+        </PanelZone>
     </div>
 </template>
 

diff --git a/pages/user/settings/account.vue b/pages/user/settings/account.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>Account Settings</Title>
     <PanelFrame>
         <template #left>
             <PanelNav :links="links" :buttons="buttons" />

diff --git a/pages/user/settings/apikeys.vue b/pages/user/settings/apikeys.vue
@@ -1,4 +1,5 @@
 <template>
+    <Title>API Key Settings</Title>
     <PanelFrame>
         <template #left>
             <PanelNav :links="links" :buttons="buttons" />

diff --git a/pages/user/settings/index.vue b/pages/user/settings/index.vue
@@ -1,36 +1,37 @@
 <template>
-        <PanelFrame>
-            <template #left>
-                <PanelNav :links="links" :buttons="buttons" />
-            </template>
-            <template #content v-if="currentUser.props">
-                <PanelZone title="Profile" info="This information will be displayed publicly so be careful what you share.">
-
-                        <FormInput type="select" @change="currentUser.save('useAsDisplayName')" v-model="currentUser.props.useAsDisplayName"
-                            :options="currentUser.options?.useAsDisplayName" name="useAsDisplayName"
-                            label="Use As Display Name" class="mb-4" />
+    <Title>User Profile Settings</Title>
+    <PanelFrame>
+        <template #left>
+            <PanelNav :links="links" :buttons="buttons" />
+        </template>
+        <template #content v-if="currentUser.props">
+            <PanelZone title="Profile" info="This information will be displayed publicly so be careful what you share.">
+
+                <FormInput type="select" @change="currentUser.save('useAsDisplayName')" v-model="currentUser.props.useAsDisplayName"
+                    :options="currentUser.options?.useAsDisplayName" name="useAsDisplayName"
+                    label="Use As Display Name" class="mb-4" />
 
-                    <div class="grid">
-                        <div class="col">
-                            <FormInput type="select" @change="currentUser.save('avatarType')" v-model="currentUser.props.avatarType"
-                                :options="currentUser.options?.avatarType" name="avatarType" label="Avatar" class="mb-4" />
-                            <div v-if="currentUser.props.avatarType == 'uploaded'" class="mb-4">
-                                <Dropzone id="avatar" :acceptedFiles="currentUser.meta?.acceptedFileExtensions?.avatar"
-                                    :afterUpload="currentUser.importAvatar" :maxFiles="1" :resizeHeight="300"
-                                    :resizeWidth="300" resizeMethod="crop"></Dropzone>
-                            </div>
-                        </div>
-                        <div class="col text-center">
-                            <Avatar :image="currentUser.meta?.avatarUrl" alt="user avatar" class="h-10rem w-10rem" shape="circle" />
+                <div class="grid">
+                    <div class="col">
+                        <FormInput type="select" @change="currentUser.save('avatarType')" v-model="currentUser.props.avatarType"
+                            :options="currentUser.options?.avatarType" name="avatarType" label="Avatar" class="mb-4" />
+                        <div v-if="currentUser.props.avatarType == 'uploaded'" class="mb-4">
+                            <Dropzone id="avatar" :acceptedFiles="currentUser.meta?.acceptedFileExtensions?.avatar"
+                                :afterUpload="currentUser.importAvatar" :maxFiles="1" :resizeHeight="300"
+                                :resizeWidth="300" resizeMethod="crop"></Dropzone>
                         </div>
                     </div>
-                    
-                    <FormInput type="markdown" @change="currentUser.save('bio')" label="Bio"  v-model="currentUser.props.bio" name="bio" class="mb-4"  />
+                    <div class="col text-center">
+                        <Avatar :image="currentUser.meta?.avatarUrl" alt="user avatar" class="h-10rem w-10rem" shape="circle" />
+                    </div>
+                </div>
+                
+                <FormInput type="markdown" @change="currentUser.save('bio')" label="Bio"  v-model="currentUser.props.bio" name="bio" class="mb-4"  />
 
-                    <NuxtLink :to="'/user/' + currentUser.props.id + '/profile'" v-ripple>
-                        View your profile as others see it
-                    </NuxtLink>
-                </PanelZone>
+                <NuxtLink :to="'/user/' + currentUser.props.id + '/profile'" v-ripple>
+                    View your profile as others see it
+                </NuxtLink>
+            </PanelZone>
         </template>
     </PanelFrame>
 </template>

diff --git a/pages/user/settings/preferences.vue b/pages/user/settings/preferences.vue
@@ -1,16 +1,17 @@
 <template>
-        <PanelFrame>
-            <template #left>
-                <PanelNav :links="links" :buttons="buttons" />
-            </template>
-            <template #content v-if="currentUser.props">
-                <PanelZone title="Preferences" info="These settings will change your experience on the site.">
-                    <FormInput type="select" @change="currentUser.save('developer')" v-model="currentUser.props.developer"
-                        :options="currentUser.options?.developer" label="Are you a software developer?"
-                        name="developer" class="mb-4" />
-                </PanelZone>
-            </template>
-        </PanelFrame>
+    <Title>User Preference Settings</Title>
+    <PanelFrame>
+        <template #left>
+            <PanelNav :links="links" :buttons="buttons" />
+        </template>
+        <template #content v-if="currentUser.props">
+            <PanelZone title="Preferences" info="These settings will change your experience on the site.">
+                <FormInput type="select" @change="currentUser.save('developer')" v-model="currentUser.props.developer"
+                    :options="currentUser.options?.developer" label="Are you a software developer?"
+                    name="developer" class="mb-4" />
+            </PanelZone>
+        </template>
+    </PanelFrame>
 </template>
 
 <script setup>

diff --git a/pages/user/verify-email.vue b/pages/user/verify-email.vue
@@ -1,11 +1,12 @@
 <template>
+    <Title>Verify email for {{ config.public?.site?.name }}</Title>
     <div class="w-full lg:w-7 mx-auto">
         <div class="text-center mb-5">
             <img :src="config.public.site.logoUrl" :alt="config.public.site.name" height="50" class="mb-3">
         </div>
-        <div class="surface-card p-4 border-1 surface-border border-round ">
+        <PanelZone>
             {{ message }}
-        </div>
+        </PanelZone>
     </div>
 </template>
 

diff --git a/ving/docs/change-log.md b/ving/docs/change-log.md
@@ -13,6 +13,8 @@ outline: deep
 * Refined click area of ManageButton and PanelNav buttons.
 * Added VueUse composables for reactive access to browser subsystems like keyboard, mouse, localStorage, etc.
 * NOTE: Run "npm i" because we've added vueuse as a prereq.
+* Added Title tags to every page and the page generator. 
+* NOTE: You should Title tags to your pages if you want titles.
 
 ## 2024-05-11
 * VingRecord id's are now integers for better database performance. They are translated to encrypted strings on the API for better security. 

diff --git a/ving/generator/nuxtpages.mjs b/ving/generator/nuxtpages.mjs
@@ -120,6 +120,7 @@ const newDefaults = (schema) => {
 
 const indexTemplate = ({ name, schema }) =>
     `<template>
+    <Title>${makeWords(name)}s</Title>
     <PanelFrame title="${makeWords(name)}s">
         <template #content>
             <PanelZone title="Existing ${makeWords(name)}s">
@@ -238,6 +239,7 @@ const nameOrId = (schema) => schema.props.find((prop) => prop.name == 'name') ?
 
 const viewTemplate = ({ name, schema }) =>
     `<template>
+    <Title>{{${name.toLowerCase()}.props?.${nameOrId(schema)}}}</Title>
     <PanelFrame :title="${name.toLowerCase()}.props?.${nameOrId(schema)}" section="${makeWords(name)}s">
         <template #left>
             <PanelNav :links="[
@@ -323,6 +325,7 @@ const statProps = (schema) => {
 
 const editTemplate = ({ name, schema }) =>
     `<template>
+    <Title>Edit {{${name.toLowerCase()}.props?.${nameOrId(schema)}}}</Title>
     <PanelFrame :title="'Edit '+${name.toLowerCase()}.props?.${nameOrId(schema)}" section="${makeWords(name)}s">
         <template #left>
             <PanelNav :links="[