Add server driven meta tags

bknoles · bknoles · commit 889f27291187 · 2025-11-21T15:03:38.000-08:00
diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -6,6 +6,7 @@ class ApplicationController < ActionController::Base
   layout :set_layout
 
   before_action :configure_permitted_parameters, if: :devise_controller?
+  before_action :set_default_meta_tags
 
   inertia_share categories: -> {
     Category.includes(:topics).all.as_json(methods: :topics_count)
@@ -42,4 +43,15 @@ def configure_permitted_parameters
 
     devise_parameter_sanitizer.permit(:account_update, keys: [ :username ])
   end
+
+  def set_default_meta_tags
+    inertia_meta.add([
+      { title: "Pups & Pourovers" },
+      { name: "description", content: "Online home of the overcaffeinated dog enthusiast" },
+      { name: "viewport", content: "width=device-width,initial-scale=1" },
+      { name: "apple-mobile-web-app-capable", content: "yes" },
+      { name: "mobile-web-app-capable", content: "yes" },
+      { name: "application-name", content: "Pups & Pourovers" }
+    ])
+  end
 end
diff --git a/app/controllers/categories_controller.rb b/app/controllers/categories_controller.rb
@@ -7,6 +7,9 @@ def show
         topics: { include: [ :user, :category, messages: { include: :user } ] }
       ])
 
-    render inertia: { category: }
+    render inertia: { category: }, meta: [
+      { title: "Category: #{category["name"]} - Pups & Pourovers" },
+      { name: "description", content: "Browse topics in the #{category["name"]} category on Pups & Pourovers" }
+    ]
   end
 end
diff --git a/app/controllers/my_topics_controller.rb b/app/controllers/my_topics_controller.rb
@@ -1,5 +1,6 @@
  class MyTopicsController < ApplicationController
   before_action :verify_user
+
   def index
     topics = Topic.includes(:user, :category, messages: :user)
       .joins(:messages)
@@ -13,7 +14,10 @@ def index
         messages: { include: :user }
       ])
 
-    render inertia: { topics: }
+    render inertia: { topics: }, meta: [
+      { title: "My Topics - Pups & Pourovers" },
+      { name: "description", content: "View your topics on Pups & Pourovers" }
+    ]
   end
 
   private
diff --git a/app/controllers/topics_controller.rb b/app/controllers/topics_controller.rb
@@ -9,7 +9,10 @@ def index
         messages: { include: :user }
       ])
 
-    render inertia: { topics: }
+    render inertia: { topics: }, meta: [
+      { title: "Topics - Pups & Pourovers" },
+      { name: "description", content: "Browse topics on Pups & Pourovers" }
+    ]
   end
 
   def show
@@ -21,6 +24,9 @@ def show
         :category,
         messages: { include: :user }
       ])
-    render inertia: { topic: }
+    render inertia: { topic: }, meta: [
+      { title: "#{topic["title"]} - Pups & Pourovers" },
+      { name: "description", content: "#{topic["title"]} - Pups & Pourovers" }
+    ]
   end
 end
diff --git a/app/frontend/components/MetaTags.tsx b/app/frontend/components/MetaTags.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Head, usePage } from '@inertiajs/react'
+import { Meta } from '../types'
+
+const MetaTags = () => {
+  const { _inertia_meta: meta } = usePage<{ _inertia_meta: Meta[] }>().props
+  return (
+    <Head>
+      {meta.map((meta: Meta) => {
+        const { tagName, innerContent, headKey, httpEquiv, ...attrs } = meta
+
+        let stringifiedInnerContent
+        if (innerContent != null) {
+          stringifiedInnerContent =
+            typeof innerContent === 'string'
+              ? innerContent
+              : JSON.stringify(innerContent)
+        }
+
+        return React.createElement(tagName, {
+          key: headKey,
+          'head-key': headKey,
+          ...(httpEquiv ? { 'http-equiv': httpEquiv } : {}),
+          ...attrs,
+          ...(stringifiedInnerContent
+            ? { dangerouslySetInnerHTML: { __html: stringifiedInnerContent } }
+            : {}),
+        })
+      })}
+    </Head>
+  )
+}
+
+export default MetaTags
diff --git a/app/frontend/layouts/AppLayout.tsx b/app/frontend/layouts/AppLayout.tsx
@@ -8,6 +8,7 @@ import {
 } from '@heroicons/react/24/outline'
 import { User } from '@/types'
 import Sidebar from "@/components/Sidebar";
+import MetaTags from '../components/MetaTags'
 
 interface AppLayoutProps {
   children: ReactNode
@@ -21,6 +22,7 @@ export default function AppLayout({ children }: AppLayoutProps) {
 
   return (
     <div className="flex h-screen bg-gray-50">
+      <MetaTags />
       <Sidebar isOpen={sidebarOpen} />
 
       <div className="flex-1 flex flex-col overflow-hidden">
diff --git a/app/frontend/pages/landing/index.tsx b/app/frontend/pages/landing/index.tsx
@@ -3,12 +3,14 @@ import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { Category, User } from '../../types'
 import Luna from '../../assets/luna.gif'
+import MetaTags from '../../components/MetaTags'
 
 export default function LandingIndex() {
   const { props: { categories, current_user: currentUser } } = usePage<{ categories: Category[], current_user: User }>();
 
   return (
     <>
+      <MetaTags />
       <nav className="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-200/50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="flex items-center justify-between h-16">
diff --git a/app/frontend/pages/my_topics/index.tsx b/app/frontend/pages/my_topics/index.tsx
@@ -1,13 +1,10 @@
-import { Head } from '@inertiajs/react'
 import AppLayout from '../../layouts/AppLayout'
 import { Topic } from '../../types'
 import TopicsTable from '../../components/TopicsTable'
 
 function MyTopicsIndex({ topics }: { topics: Topic[] }) {
   return (
     <AppLayout>
-      <Head title="My Topics - Pups & Pourovers" />
-
       <div className="max-w-7xl mx-auto">
         <div className="bg-white shadow-sm rounded-lg overflow-hidden">
           <TopicsTable topics={topics} />
diff --git a/app/frontend/pages/topics/index.tsx b/app/frontend/pages/topics/index.tsx
@@ -1,13 +1,10 @@
-import { Head } from '@inertiajs/react'
 import AppLayout from '../../layouts/AppLayout'
 import { Topic } from '../../types'
 import TopicsTable from '../../components/TopicsTable'
 
 function TopicsIndex({ topics }: { topics: Topic[] }) {
   return (
     <AppLayout>
-      <Head title="Topics - Pups & Pourovers" />
-
       <div className="max-w-7xl mx-auto">
         <div className="bg-white shadow-sm rounded-lg overflow-hidden">
           <TopicsTable topics={topics} />
diff --git a/app/frontend/pages/topics/show.tsx b/app/frontend/pages/topics/show.tsx
@@ -1,4 +1,4 @@
-import { Head, Form } from '@inertiajs/react'
+import { Form } from '@inertiajs/react'
 import AppLayout from '../../layouts/AppLayout'
 import { Topic, Message, User } from '../../types'
 import LexicalRichTextEditor from '../../components/LexicalRichTextEditor'
@@ -49,8 +49,6 @@ function TopicsShow({ topic, current_user: currentUser }: { topic: Topic, curren
 
   return (
     <AppLayout>
-      <Head title={`${title} - Pups & Pourovers`} />
-
       <div className="max-w-4xl mx-auto">
         <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
           <div className="flex items-start justify-between">
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -1,11 +1,8 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title inertia><%= content_for(:title) || "Inertia Workshop Advanced Demo" %></title>
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <meta name="application-name" content="Inertia Workshop Advanced Demo">
-    <meta name="mobile-web-app-capable" content="yes">
+    <%= inertia_meta_tags %>
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
