legalgonews/legalgo-FE-reactrouter
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: refactor DUMMY to APP and add meta title configuration for improved SEO

Browse Source
This commit is contained in:
Ardeman 2025-02-03 13:03:49 +08:00
parent 25ad73aa9d
commit d9070b1b49
7 changed files with 44 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/data/dummy.ts
View File

@ -1,6 +1,21 @@
export const DUMMY = { export const APP = {
title: 'React Router', title: 'React Router',
description: description:
'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert', 'Bonus judex secundum aequum et\n bonum judicat et aequitatem stricto juri praefert',
logo: '/images/logo.svg', logo: '/images/logo.svg',
} }
export const META_TITLE_CONFIG = [
{
path: '/news',
title: 'Home',
},
{
path: '/auth/login',
title: 'Login',
},
{
path: '/auth/register',
title: 'Register',
},
]

7
app/pages/news/footer-links.tsx
View File

@ -1,7 +1,8 @@
import { Link } from 'react-router' import { Link } from 'react-router'
import { DUMMY } from '~/data/dummy' import { APP } from '~/data/dummy'
import { COPYRIGHT_MENU, FOOTER_MENU } from '~/data/menu'
import { COPYRIGHT_MENU, FOOTER_MENU } from './menu'
export const FooterLinks = () => { export const FooterLinks = () => {
return ( return (
@ -36,7 +37,7 @@ export const FooterLinks = () => {
</div> </div>
<div className="flex justify-between border-t border-white pt-8 text-sm"> <div className="flex justify-between border-t border-white pt-8 text-sm">
<div> <div>
{new Date().getFullYear()} {DUMMY.title}. All rights reserved. {new Date().getFullYear()} {APP.title}. All rights reserved.
</div> </div>
<div className="flex gap-6"> <div className="flex gap-6">
{COPYRIGHT_MENU.map(({ url, title }, index) => ( {COPYRIGHT_MENU.map(({ url, title }, index) => (

6
app/pages/news/footer-newsletter.tsx
View File

@ -1,7 +1,7 @@
import { Link } from 'react-router' import { Link } from 'react-router'
import { Button } from '~/components/ui/button' import { Button } from '~/components/ui/button'
import { DUMMY } from '~/data/dummy' import { APP } from '~/data/dummy'
export const FooterNewsletter = () => { export const FooterNewsletter = () => {
return ( return (
@ -12,8 +12,8 @@ export const FooterNewsletter = () => {
className="h-full" className="h-full"
> >
<img <img
src={DUMMY.logo} src={APP.logo}
alt={DUMMY.title} alt={APP.title}
className="h-full w-auto" className="h-full w-auto"
/> />
</Link> </Link>

3
app/pages/news/header-menu.tsx
View File

@ -1,8 +1,7 @@
import { Link } from 'react-router' import { Link } from 'react-router'
import { MENU } from '~/data/menu'
import { HeaderSearch } from './header-search' import { HeaderSearch } from './header-search'
import { MENU } from './menu'
export const HeaderMenu = () => { export const HeaderMenu = () => {
return ( return (

8
app/pages/news/header-top.tsx
View File

@ -1,7 +1,7 @@
import { Link } from 'react-router' import { Link } from 'react-router'
import { Button } from '~/components/ui/button' import { Button } from '~/components/ui/button'
import { DUMMY } from '~/data/dummy' import { APP } from '~/data/dummy'
export const HeaderTop = () => { export const HeaderTop = () => {
return ( return (
@ -11,13 +11,13 @@ export const HeaderTop = () => {
className="h-full py-[5px]" className="h-full py-[5px]"
> >
<img <img
src={DUMMY.logo} src={APP.logo}
alt={DUMMY.title} alt={APP.title}
className="h-full w-auto" className="h-full w-auto"
/> />
</Link> </Link>
<div className="flex h-full items-center py-1.5 font-light whitespace-pre-line"> <div className="flex h-full items-center py-1.5 font-light whitespace-pre-line">
{DUMMY.description} {APP.description}
</div> </div>
<div className="flex items-center gap-[15px]"> <div className="flex items-center gap-[15px]">
<Button>About Us</Button> <Button>About Us</Button>

0
app/data/menu.ts → app/pages/news/menu.ts
View File

16
app/root.tsx
View File

@ -9,6 +9,7 @@ import {
import type { Route } from './+types/root' import type { Route } from './+types/root'
import './app.css' import './app.css'
import { APP, META_TITLE_CONFIG } from './data/dummy'
export const links: Route.LinksFunction = () => [ export const links: Route.LinksFunction = () => [
{ rel: 'preconnect', href: 'https://fonts.googleapis.com' }, { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
@ -23,6 +24,21 @@ export const links: Route.LinksFunction = () => [
}, },
] ]
export const meta = ({ location }: Route.MetaArgs) => {
const { pathname } = location
const pageTitle = META_TITLE_CONFIG.find(
(meta) => meta.path === pathname,
)?.title
const metaTitle = APP.title
const title = `${pageTitle ? `${pageTitle} - ` : ''}${metaTitle}`
return [
{
title,
},
]
}
export function Layout({ children }: { children: React.ReactNode }) { export function Layout({ children }: { children: React.ReactNode }) {
return ( return (
<html lang="en"> <html lang="en">