Compare commits
4 Commits
80408b573c
...
288632cf8f
| Author | SHA1 | Date |
|---|---|---|
adueck
|
288632cf8f | |
|
adueck
|
b47c1179ef | |
|
adueck
|
6c4e1b47a1 | |
|
adueck
|
d4aee251a1 |
|
|
@ -32,6 +32,7 @@
|
|||
<meta name="twitter:card" content="summary_large_image">
|
||||
|
||||
<meta name="robots" content="index, follow" />
|
||||
<!-- <script defer src="https://remark42.lingdocs.com/web/embed.js"></script> -->
|
||||
<title>LingDocs Pashto Grammar</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import TableOfContents from "./TableOfContents";
|
|||
import Footer from "./Footer";
|
||||
import ChapterFeedback from "./ChapterFeedback";
|
||||
import { Helmet } from "react-helmet";
|
||||
// import { Comments } from "./Remark42";
|
||||
|
||||
const Chapter = ({ children: chapter }) => {
|
||||
const title = `${chapter.frontMatter.title} | LingDocs Pashto Grammar`;
|
||||
|
|
@ -41,6 +42,7 @@ const Chapter = ({ children: chapter }) => {
|
|||
<Content />
|
||||
</div>
|
||||
<ChapterFeedback chapter={chapter.path} />
|
||||
{/* <Comments id={chapter.path} /> */}
|
||||
<Footer chapter={chapter} />
|
||||
</main>
|
||||
{!chapter.frontMatter.fullWidth && <TableOfContents tableOfContents={chapter.tableOfContents} />}
|
||||
|
|
|
|||
|
|
@ -131,8 +131,8 @@ function ChapterFeedback({ chapter }: { chapter: string }) {
|
|||
<div className="d-flex flex-row justify-content-between align-items-center">
|
||||
<div className="small">
|
||||
{user && !anonymous
|
||||
? `Private feedback will be sent as "${user.name}"`
|
||||
: `Private feedback will be anonymous`}
|
||||
? `Your feedback is private but will be sent to the author will be sent as "${user.name}"`
|
||||
: `Your feedback is private and anonymous`}
|
||||
</div>
|
||||
<div className="d-flex flex-row align-items-center">
|
||||
{feedbackStatus === "sending" && (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
import { Fragment, useEffect } from "react";
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
REMARK42: any;
|
||||
remark_config: any;
|
||||
}
|
||||
}
|
||||
|
||||
// This function will insert the usual <script> tag of
|
||||
// Remark42 into the specified DOM location (parentElement)
|
||||
const insertScript = (id: string, parentElement: HTMLElement) => {
|
||||
const script = window.document.createElement("script");
|
||||
script.type = "text/javascript";
|
||||
script.async = true;
|
||||
script.id = id;
|
||||
/* For Gatsby it's important to manually provide the URL
|
||||
and make sure it does not contain a trailing slash ("/").
|
||||
Because otherwise the comments for paths with/without
|
||||
the trailing slash are stored separately in the BoltDB database.
|
||||
When following a Gatsby Link a page is loaded without the trailing slash,
|
||||
but when refreshing the page (F5) it is loaded with the trailing slash.
|
||||
So essentially every URL can become duplicated in the DB and you may not see
|
||||
your comments from the inverse URL at your present URL.
|
||||
Making sure url is provided without the trailing slash
|
||||
in the remark42 config solves this. */
|
||||
let url = window.location.origin + window.location.pathname;
|
||||
if (url.endsWith("/")) {
|
||||
url = url.slice(0, -1);
|
||||
}
|
||||
// Now the actual config and script-fetching function:
|
||||
script.innerHTML = `
|
||||
var remark_config = {
|
||||
host: "https://remark42.lingdocs.com",
|
||||
site_id: "lingdocs-pashto-grammar",
|
||||
url: "${url}",
|
||||
theme: "light",
|
||||
components: ["embed"],
|
||||
};
|
||||
!function(e,n){for(var o=0;o<e.length;o++){var r=n.createElement("script"),c=".js",d=n.head||n.body;"noModule"in r?(r.type="module",c=".mjs"):r.async=!0,r.defer=!0,r.src=remark_config.host+"/web/"+e[o]+c,d.appendChild(r)}}(remark_config.components||["embed"],document);`;
|
||||
parentElement.appendChild(script);
|
||||
};
|
||||
|
||||
/* This function removes the previously added script from the DOM.
|
||||
Might be necessary when page transitions happen, to make sure a new instance
|
||||
is created, pointing to the current URL. Although this might actually
|
||||
not be necessary, please do your own testing. */
|
||||
const removeScript = (id: string, parentElement: HTMLElement) => {
|
||||
const script = window.document.getElementById(id);
|
||||
if (script) {
|
||||
parentElement.removeChild(script);
|
||||
}
|
||||
};
|
||||
|
||||
// This function will be provided to useEffect and will insert the script
|
||||
// when the component is mounted and remove it when it unmounts
|
||||
const manageScript = () => {
|
||||
if (!window) {
|
||||
return () => {};
|
||||
}
|
||||
const { document } = window;
|
||||
if (document.getElementById("remark42")) {
|
||||
insertScript("comments-script", document.body);
|
||||
}
|
||||
return () => removeScript("comments-script", document.body);
|
||||
};
|
||||
|
||||
/* Another function for another useEffect - this is the most crucial part for
|
||||
Gatsby compatibility. It will ensure that each page loads its own appropriate
|
||||
comments, and that comments will be properly loaded */
|
||||
const recreateRemark42Instance = () => {
|
||||
if (!window) {
|
||||
return;
|
||||
}
|
||||
const remark42 = window.REMARK42;
|
||||
if (remark42) {
|
||||
remark42.destroy();
|
||||
remark42.createInstance(window.remark_config);
|
||||
}
|
||||
};
|
||||
|
||||
type CommentsProps = {
|
||||
location: string;
|
||||
};
|
||||
|
||||
// The location prop is {props.location.pathname} from the parent component.
|
||||
// I.e. invoke the component like this in the parent: <Comments location={props.location.pathname} />
|
||||
export function Comments({ location }: CommentsProps) {
|
||||
// Insert the two useEffect hooks. Maybe you can combine them into one? Feel free if you want to.
|
||||
useEffect(manageScript, [location]);
|
||||
useEffect(recreateRemark42Instance, [location]);
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<h4>Questions and Comments</h4>
|
||||
{/* This div is the target for actual comments insertion */}
|
||||
<div id="remark42" />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue