muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36:40 +07:00
Code Packages Activity Actions

(nextjs) added page titles everywhere

Browse source
This commit is contained in:
Fedor Katurov 2022-01-19 16:16:39 +07:00
parent 3da5aba726
commit 2ebafbad52
8 changed files with 55 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/common/PageTitle/index.tsx Normal file
View file

@ -0,0 +1,15 @@
import React, { VFC } from 'react';
import Head from 'next/head';
interface PageTitleProps {
title: string;
}
const PageTitle: VFC<PageTitleProps> = ({ title }) => (
<Head>
<title>{title}</title>
</Head>
);
export { PageTitle };

19
src/components/node/NodeHeadMetadata/index.tsx Normal file
View file

@ -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<NodeHeadMetadataProps> = () => {
const { node } = useNodeContext();
return (
<>
<PageTitle title={getPageTitle(node.title)} />
</>
);
};
export { NodeHeadMetadata };

4
src/pages/_document.tsx
View file

@ -1,5 +1,7 @@
import Document, { Head, Html, Main, NextScript } from 'next/document'; import Document, { Head, Html, Main, NextScript } from 'next/document';
import { getPageTitle } from '~/utils/ssr/getPageTitle';
class MyDocument extends Document { class MyDocument extends Document {
static async getInitialProps(ctx) { static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx); const initialProps = await Document.getInitialProps(ctx);
@ -9,7 +11,7 @@ class MyDocument extends Document {
render() { render() {
return ( return (
<Html> <Html>
<Head title="Убежище"> <Head title={getPageTitle()}>
<meta charSet="utf-8" /> <meta charSet="utf-8" />
<meta httpEquiv="content-language" content="ru" /> <meta httpEquiv="content-language" content="ru" />
<meta httpEquiv="X-UA-Compatible" content="IE=edge" /> <meta httpEquiv="X-UA-Compatible" content="IE=edge" />

5
src/pages/boris.tsx
View file

@ -2,6 +2,7 @@ import React, { VFC } from 'react';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { PageTitle } from '~/components/common/PageTitle';
import { useBoris } from '~/hooks/boris/useBoris'; import { useBoris } from '~/hooks/boris/useBoris';
import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useNodeComments } from '~/hooks/comments/useNodeComments';
import { useImageModal } from '~/hooks/navigation/useImageModal'; import { useImageModal } from '~/hooks/navigation/useImageModal';
@ -9,7 +10,7 @@ import { useLoadNode } from '~/hooks/node/useLoadNode';
import { BorisLayout } from '~/layouts/BorisLayout'; import { BorisLayout } from '~/layouts/BorisLayout';
import { CommentContextProvider } from '~/utils/context/CommentContextProvider'; import { CommentContextProvider } from '~/utils/context/CommentContextProvider';
import { NodeContextProvider } from '~/utils/context/NodeContextProvider'; import { NodeContextProvider } from '~/utils/context/NodeContextProvider';
import { getPageTitle } from '~/utils/ssr/getPageTitle';
const BorisPage: VFC = observer(() => { const BorisPage: VFC = observer(() => {
const { node, isLoading, update } = useLoadNode(696); const { node, isLoading, update } = useLoadNode(696);
@ -36,6 +37,8 @@ const BorisPage: VFC = observer(() => {
onLoadMoreComments={onLoadMoreComments} onLoadMoreComments={onLoadMoreComments}
onDeleteComment={onDeleteComment} onDeleteComment={onDeleteComment}
> >
<PageTitle title={getPageTitle('Борис')} />
<BorisLayout <BorisLayout
title={title} title={title}
setIsBetaTester={setIsBetaTester} setIsBetaTester={setIsBetaTester}

5
src/pages/index.tsx
View file

@ -2,12 +2,12 @@ import React, { FC } from 'react';
import { observer } from 'mobx-react-lite'; import { observer } from 'mobx-react-lite';
import { PageTitle } from '~/components/common/PageTitle';
import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader'; import { useGlobalLoader } from '~/hooks/dom/useGlobalLoader';
import { useFlow } from '~/hooks/flow/useFlow'; import { useFlow } from '~/hooks/flow/useFlow';
import { FlowLayout } from '~/layouts/FlowLayout'; import { FlowLayout } from '~/layouts/FlowLayout';
import { FlowContextProvider } from '~/utils/context/FlowContextProvider'; import { FlowContextProvider } from '~/utils/context/FlowContextProvider';
import { getPageTitle } from '~/utils/ssr/getPageTitle';
interface Props {} interface Props {}
@ -36,6 +36,7 @@ const FlowPage: FC<Props> = observer(() => {
isSyncing={isSyncing} isSyncing={isSyncing}
onChangeCellView={onChangeCellView} onChangeCellView={onChangeCellView}
> >
<PageTitle title={getPageTitle('Флоу')} />
<FlowLayout isFluid={isFluid} onToggleLayout={toggleLayout} /> <FlowLayout isFluid={isFluid} onToggleLayout={toggleLayout} />
</FlowContextProvider> </FlowContextProvider>
); );

3
src/pages/lab.tsx
View file

@ -1,12 +1,15 @@
import React, { VFC } from 'react'; import React, { VFC } from 'react';
import { PageTitle } from '~/components/common/PageTitle';
import { LabLayout } from '~/layouts/LabLayout'; import { LabLayout } from '~/layouts/LabLayout';
import { LabProvider } from '~/utils/providers/LabProvider'; import { LabProvider } from '~/utils/providers/LabProvider';
import { getPageTitle } from '~/utils/ssr/getPageTitle';
interface LabPageProps {} interface LabPageProps {}
const LabPage: VFC<LabPageProps> = () => ( const LabPage: VFC<LabPageProps> = () => (
<LabProvider> <LabProvider>
<PageTitle title={getPageTitle('Лаборатория')} />
<LabLayout /> <LabLayout />
</LabProvider> </LabProvider>
); );

4
src/pages/node/[id].tsx
View file

@ -5,6 +5,7 @@ import { InferGetServerSidePropsType } from 'next';
import { RouteComponentProps } from 'react-router'; import { RouteComponentProps } from 'react-router';
import { apiGetNode } from '~/api/node'; import { apiGetNode } from '~/api/node';
import { NodeHeadMetadata } from '~/components/node/NodeHeadMetadata';
import { useNodeComments } from '~/hooks/comments/useNodeComments'; import { useNodeComments } from '~/hooks/comments/useNodeComments';
import { useScrollToTop } from '~/hooks/dom/useScrollToTop'; import { useScrollToTop } from '~/hooks/dom/useScrollToTop';
import { useImageModal } from '~/hooks/navigation/useImageModal'; import { useImageModal } from '~/hooks/navigation/useImageModal';
@ -49,6 +50,7 @@ const NodePage: FC<Props> = observer(props => {
const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10), props.fallbackData); const { node, isLoading, update, lastSeen } = useLoadNode(parseInt(id, 10), props.fallbackData);
const onShowImageModal = useImageModal(); const onShowImageModal = useImageModal();
const { const {
onLoadMoreComments, onLoadMoreComments,
onDelete: onDeleteComment, onDelete: onDeleteComment,
@ -57,6 +59,7 @@ const NodePage: FC<Props> = observer(props => {
hasMore, hasMore,
isLoading: isLoadingComments, isLoading: isLoadingComments,
} = useNodeComments(parseInt(id, 10)); } = useNodeComments(parseInt(id, 10));
const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags( const { onDelete: onTagDelete, onChange: onTagsChange, onClick: onTagClick } = useNodeTags(
parseInt(id, 10) parseInt(id, 10)
); );
@ -91,6 +94,7 @@ const NodePage: FC<Props> = observer(props => {
onTagClick={onTagClick} onTagClick={onTagClick}
onTagDelete={onTagDelete} onTagDelete={onTagDelete}
> >
<NodeHeadMetadata />
<NodeLayout /> <NodeLayout />
</TagsContextProvider> </TagsContextProvider>
</CommentContextProvider> </CommentContextProvider>

4
src/utils/ssr/getPageTitle.ts Normal file
View file

@ -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(' / ');
};