Meta titles and desc

This commit is contained in:
2023-07-09 23:28:56 +04:00
parent 6194862e6f
commit 5acaeccb70
4 changed files with 26 additions and 9 deletions

View File

@@ -1,4 +1,5 @@
import { Box, Heading } from '@chakra-ui/react' import { Box, Heading } from '@chakra-ui/react'
import Head from 'next/head'
export const getStaticPaths = async () => { export const getStaticPaths = async () => {
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`) const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/pages`)
@@ -26,12 +27,13 @@ export const getStaticProps = async ({ params: { slug } }) => {
data: [page], data: [page],
} = await res.json() } = await res.json()
return { props: page } return { props: { page } }
} }
export default function Page(page) { export default function Page({ globals, page }) {
return ( return (
<Box className="page"> <Box className="page">
<Head>{page.title && <title>{[page.title, globals.meta_title].join(' — ')}</title>}</Head>
<Heading>{page.title}</Heading> <Heading>{page.title}</Heading>
<div dangerouslySetInnerHTML={{ __html: page.content }}></div> <div dangerouslySetInnerHTML={{ __html: page.content }}></div>
</Box> </Box>

View File

@@ -1,14 +1,19 @@
import App from 'next/app'
import { ChakraProvider } from '@chakra-ui/react' import { ChakraProvider } from '@chakra-ui/react'
import App from 'next/app'
import Head from 'next/head'
import Layout from '~/components/layout' import Layout from '~/components/layout'
import theme from '~/src/theme'
import '~/src/style.scss' import '~/src/style.scss'
import theme from '~/src/theme'
export default function MyApp({ Component, pageProps, globals, menus }) { export default function MyApp({ Component, pageProps, globals, menus }) {
return ( return (
<ChakraProvider theme={theme}> <ChakraProvider theme={theme}>
<Head>
<title>{globals.meta_title}</title>
<meta name="description" content={globals.meta_description} />
</Head>
<Layout globals={globals} menus={menus}> <Layout globals={globals} menus={menus}>
<Component {...pageProps} /> <Component {...pageProps} globals={globals} />
</Layout> </Layout>
</ChakraProvider> </ChakraProvider>
) )

View File

@@ -1,8 +1,9 @@
import { Link } from '@chakra-ui/next-js' import { Link } from '@chakra-ui/next-js'
import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react' import { Box, Button, Flex, Heading, Image, List, ListIcon, ListItem, SimpleGrid, Text } from '@chakra-ui/react'
import { iso31661 } from 'iso-3166'
import Head from 'next/head'
import { FaFacebookSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa' import { FaFacebookSquare, FaLinkedin, FaTwitterSquare } from 'react-icons/fa'
import { TbWorldWww } from 'react-icons/tb' import { TbWorldWww } from 'react-icons/tb'
import { iso31661 } from 'iso-3166'
export const getStaticPaths = async () => { export const getStaticPaths = async () => {
const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`) const url = new URL(`${process.env.NEXT_PUBLIC_DIRECTUS_API_URL}/items/vendors`)
@@ -35,12 +36,17 @@ export const getStaticProps = async ({ params: { slug } }) => {
data: [vendor], data: [vendor],
} = await res.json() } = await res.json()
return { props: { ...vendor, country: iso31661.find((iso) => iso.alpha3 === vendor.country)?.name || '' } } return {
props: { vendor: { ...vendor, country: iso31661.find((iso) => iso.alpha3 === vendor.country)?.name || '' } },
}
} }
export default function VendorPage(vendor) { export default function VendorPage({ globals, vendor }) {
return ( return (
<Box className="vendor"> <Box className="vendor">
<Head>
<title>{[vendor.name, globals.meta_title].join(' — ')}</title>
</Head>
<Flex justifyContent="space-between" direction={['column', 'column', 'row']}> <Flex justifyContent="space-between" direction={['column', 'column', 'row']}>
<Heading marginY="6">{vendor.name}</Heading> <Heading marginY="6">{vendor.name}</Heading>
<Image <Image

View File

@@ -35,6 +35,7 @@ import {
Tr, Tr,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { useDebouncedCallback, useLocalStorageValue } from '@react-hookz/web' import { useDebouncedCallback, useLocalStorageValue } from '@react-hookz/web'
import Head from 'next/head'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import { TbCheck, TbFilter, TbFilterEdit, TbLayoutGrid, TbLayoutList, TbMoodSad, TbSearch, TbX } from 'react-icons/tb' import { TbCheck, TbFilter, TbFilterEdit, TbLayoutGrid, TbLayoutList, TbMoodSad, TbSearch, TbX } from 'react-icons/tb'
import useSWR from 'swr' import useSWR from 'swr'
@@ -66,7 +67,7 @@ export const getStaticProps = async () => {
return { props: { categories } } return { props: { categories } }
} }
export default function VendorsPage({ categories }) { export default function VendorsPage({ globals, categories }) {
const router = useRouter() const router = useRouter()
const { const {
query: { page = 1, category = '', q: search = '' }, query: { page = 1, category = '', q: search = '' },
@@ -135,6 +136,9 @@ export default function VendorsPage({ categories }) {
return ( return (
<Box className="vendors"> <Box className="vendors">
<Head>
<title>{['Vendors', globals.meta_title].join(' — ')}</title>
</Head>
<Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5"> <Flex alignItems="center" justifyContent="space-between" direction={['column', 'row']} mb="5" gap="5">
<Heading size="lg">Vendors</Heading> <Heading size="lg">Vendors</Heading>
<Box>{isValidating && <Spinner />}</Box> <Box>{isValidating && <Spinner />}</Box>