diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 2d0ae73..47147c1 100644 --- 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 index 57789ce..dd54a9a 100644 --- 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 index 4a98446..66dae4f 100644 --- 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 index d2ef7da..c73421d 100644 --- 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 new file mode 100644 index 0000000..203545d --- /dev/null +++ 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 ( + + {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 } } + : {}), + }) + })} + + ) +} + +export default MetaTags \ No newline at end of file diff --git a/app/frontend/layouts/AppLayout.tsx b/app/frontend/layouts/AppLayout.tsx index b5c95a0..4efa48a 100644 --- 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 (
+
diff --git a/app/frontend/pages/landing/index.tsx b/app/frontend/pages/landing/index.tsx index 3d0175c..2d5150a 100644 --- 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 ( <> +