diff --git a/src/components/common/PageTitle/index.tsx b/src/components/common/PageTitle/index.tsx new file mode 100644 index 00000000..91e5f2da --- /dev/null +++ b/src/components/common/PageTitle/index.tsx @@ -0,0 +1,15 @@ +import React, { VFC } from 'react'; + +import Head from 'next/head'; + +interface PageTitleProps { + title: string; +} + +const PageTitle: VFC = ({ title }) => ( + + {title} + +); + +export { PageTitle }; diff --git a/src/components/node/NodeHeadMetadata/index.tsx b/src/components/node/NodeHeadMetadata/index.tsx new file mode 100644 index 00000000..de793dfc --- /dev/null +++ b/src/components/node/NodeHeadMetadata/index.tsx @@ -0,0 +1,19 @@ +import React, { VFC } from 'react'; + +import { PageTitle } from '~/components/common/PageTitle'; +import { useNodeContext } from '~/utils/context/NodeContextProvider'; +import { getPageTitle } from '~/utils/ssr/getPageTitle'; + +interface NodeHeadMetadataProps {} + +const NodeHeadMetadata: VFC = () => { + const { node } = useNodeContext(); + + return ( + <> + + + ); +}; + +export { NodeHeadMetadata }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 1de9eeee..37ce71b0 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,5 +1,7 @@ import Document, { Head, Html, Main, NextScript } from 'next/document'; +import { getPageTitle } from '~/utils/ssr/getPageTitle'; + class MyDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx); @@ -9,7 +11,7 @@ class MyDocument extends Document { render() { return ( - + diff --git a/src/pages/boris.tsx b/src/pages/boris.tsx index 3f699307..bacb9e58 100644 --- a/src/pages/boris.tsx +++ b/src/pages/boris.tsx @@ -2,6 +2,7 @@ import React, { VFC } from 'react'; import { observer } from 'mobx-react-lite'; +import { PageTitle } from '~/components/common/PageTitle'; import { useBoris } from '~/hooks/boris/useBoris'; import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useImageModal } from '~/hooks/navigation/useImageModal'; @@ -9,7 +10,7 @@ import { useLoadNode } from '~/hooks/node/useLoadNode'; import { BorisLayout } from '~/layouts/BorisLayout'; import { CommentContextProvider } from '~/utils/context/CommentContextProvider'; import { NodeContextProvider } from '~/utils/context/NodeContextProvider'; - +import { getPageTitle } from '~/utils/ssr/getPageTitle'; const BorisPage: VFC = observer(() => { const { node, isLoading, update } = useLoadNode(696); @@ -36,6 +37,8 @@ const BorisPage: VFC = observer(() => { onLoadMoreComments={onLoadMoreComments} onDeleteComment={onDeleteComment} > + + = observer(() => { isSyncing={isSyncing} onChangeCellView={onChangeCellView} > + ); diff --git a/src/pages/lab.tsx b/src/pages/lab.tsx index 75baad32..98739022 100644 --- a/src/pages/lab.tsx +++ b/src/pages/lab.tsx @@ -1,12 +1,15 @@ import React, { VFC } from 'react'; +import { PageTitle } from '~/components/common/PageTitle'; import { LabLayout } from '~/layouts/LabLayout'; import { LabProvider } from '~/utils/providers/LabProvider'; +import { getPageTitle } from '~/utils/ssr/getPageTitle'; interface LabPageProps {} const LabPage: VFC = () => ( + ); diff --git a/src/pages/node/[id].tsx b/src/pages/node/[id].tsx index 3daa252f..a5a4448b 100644 --- a/src/pages/node/[id].tsx +++ b/src/pages/node/[id].tsx @@ -5,6 +5,7 @@ import { InferGetServerSidePropsType } from 'next'; import { RouteComponentProps } from 'react-router'; import { apiGetNode } from '~/api/node'; +import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata'; import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useScrollToTop } from '~/hooks/dom/useScrollToTop'; import { useImageModal } from '~/hooks/navigation/useImageModal'; @@ -49,6 +50,7 @@ const NodePage: FC = observer(props => { const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10), props.fallbackData); const onShowImageModal = useImageModal(); + const { onLoadMoreComments, onDelete: onDeleteComment, @@ -57,6 +59,7 @@ const NodePage: FC = observer(props => { hasMore, isLoading: isLoadingComments, } = useNodeComments(parseInt(id, 10)); + const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags( parseInt(id, 10) ); @@ -91,6 +94,7 @@ const NodePage: FC = observer(props => { onTagClick={onTagClick} onTagDelete={onTagDelete} > + diff --git a/src/utils/ssr/getPageTitle.ts b/src/utils/ssr/getPageTitle.ts new file mode 100644 index 00000000..5e124a24 --- /dev/null +++ b/src/utils/ssr/getPageTitle.ts @@ -0,0 +1,4 @@ +/** just combinates title elements to form title of the page */ +export const getPageTitle = (...props: string[]): string => { + return ['Убежище', ...props].filter(it => it.trim()).join(' / '); +};