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="twitter:card" content="summary_large_image">
|
||||||
|
|
||||||
<meta name="robots" content="index, follow" />
|
<meta name="robots" content="index, follow" />
|
||||||
|
<!-- <script defer src="https://remark42.lingdocs.com/web/embed.js"></script> -->
|
||||||
<title>LingDocs Pashto Grammar</title>
|
<title>LingDocs Pashto Grammar</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@ import TableOfContents from "./TableOfContents";
|
||||||
import Footer from "./Footer";
|
import Footer from "./Footer";
|
||||||
import ChapterFeedback from "./ChapterFeedback";
|
import ChapterFeedback from "./ChapterFeedback";
|
||||||
import { Helmet } from "react-helmet";
|
import { Helmet } from "react-helmet";
|
||||||
|
// import { Comments } from "./Remark42";
|
||||||
|
|
||||||
const Chapter = ({ children: chapter }) => {
|
const Chapter = ({ children: chapter }) => {
|
||||||
const title = `${chapter.frontMatter.title} | LingDocs Pashto Grammar`;
|
const title = `${chapter.frontMatter.title} | LingDocs Pashto Grammar`;
|
||||||
|
|
@ -41,6 +42,7 @@ const Chapter = ({ children: chapter }) => {
|
||||||
<Content />
|
<Content />
|
||||||
</div>
|
</div>
|
||||||
<ChapterFeedback chapter={chapter.path} />
|
<ChapterFeedback chapter={chapter.path} />
|
||||||
|
{/* <Comments id={chapter.path} /> */}
|
||||||
<Footer chapter={chapter} />
|
<Footer chapter={chapter} />
|
||||||
</main>
|
</main>
|
||||||
{!chapter.frontMatter.fullWidth && <TableOfContents tableOfContents={chapter.tableOfContents} />}
|
{!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="d-flex flex-row justify-content-between align-items-center">
|
||||||
<div className="small">
|
<div className="small">
|
||||||
{user && !anonymous
|
{user && !anonymous
|
||||||
? `Private feedback will be sent as "${user.name}"`
|
? `Your feedback is private but will be sent to the author will be sent as "${user.name}"`
|
||||||
: `Private feedback will be anonymous`}
|
: `Your feedback is private and anonymous`}
|
||||||
</div>
|
</div>
|
||||||
<div className="d-flex flex-row align-items-center">
|
<div className="d-flex flex-row align-items-center">
|
||||||
{feedbackStatus === "sending" && (
|
{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