yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Update canonical url when moving between pages of shared document

Browse Source
This commit is contained in:
Tom Moor
2022-06-01 21:27:18 +02:00
parent 41e425756d
commit 0a77733500
2 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
app/scenes/Document/Shared.tsx
View File

@@ -1,7 +1,8 @@
import { Location } from "history"; import { Location } from "history";
import { observer } from "mobx-react"; import { observer } from "mobx-react";
import * as React from "react"; import * as React from "react";
import { RouteComponentProps } from "react-router-dom"; import { Helmet } from "react-helmet";
import { RouteComponentProps, useLocation } from "react-router-dom";
import { useTheme } from "styled-components"; import { useTheme } from "styled-components";
import DocumentModel from "~/models/Document"; import DocumentModel from "~/models/Document";
import Error404 from "~/scenes/Error404"; import Error404 from "~/scenes/Error404";
@@ -28,6 +29,14 @@ type Props = RouteComponentProps<{
location: Location<{ title?: string }>; location: Location<{ title?: string }>;
}; };
// Parse the canonical origin from the SSR HTML, only needs to be done once.
const canonicalUrl = document
.querySelector("link[rel=canonical]")
?.getAttribute("href");
const canonicalOrigin = canonicalUrl
? new URL(canonicalUrl).origin
: window.location.origin;
/** /**
* Find the document UUID from the slug given the sharedTree * Find the document UUID from the slug given the sharedTree
* *
@@ -63,6 +72,7 @@ function useDocumentId(documentSlug: string, response?: Response) {
function SharedDocumentScene(props: Props) { function SharedDocumentScene(props: Props) {
const { ui } = useStores(); const { ui } = useStores();
const theme = useTheme(); const theme = useTheme();
const location = useLocation();
const [response, setResponse] = React.useState<Response>(); const [response, setResponse] = React.useState<Response>();
const [error, setError] = React.useState<Error | null | undefined>(); const [error, setError] = React.useState<Error | null | undefined>();
const { documents } = useStores(); const { documents } = useStores();
@@ -107,15 +117,20 @@ function SharedDocumentScene(props: Props) {
) : undefined; ) : undefined;
return ( return (
<Layout title={response.document.title} sidebar={sidebar}> <>
<Document <Helmet>
abilities={EMPTY_OBJECT} <link rel="canonical" href={canonicalOrigin + location.pathname} />
document={response.document} </Helmet>
sharedTree={response.sharedTree} <Layout title={response.document.title} sidebar={sidebar}>
shareId={shareId} <Document
readOnly abilities={EMPTY_OBJECT}
/> document={response.document}
</Layout> sharedTree={response.sharedTree}
shareId={shareId}
readOnly
/>
</Layout>
</>
); );
} }

6
server/static/index.html
View File

@@ -8,7 +8,11 @@
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="description" content="//inject-description//" /> <meta name="description" content="//inject-description//" />
<link rel="canonical" href="//inject-canonical//" /> <link
rel="canonical"
href="//inject-canonical//"
data-react-helmet="true"
/>
//inject-prefetch// //inject-prefetch//
<link <link
rel="shortcut icon" rel="shortcut icon"