lingdocs
/
pashto-grammar
mirror of https://github.com/lingdocs/pashto-grammar.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: lingdocs:288632cf8f5cb598472833f60cdecc8b63ce55d0
Branches Tags
lingdocs:master
..
compare: lingdocs:80408b573c6ec1dee232322b5d11d338389d39bd
Branches Tags
lingdocs:master

No commits in common. "288632cf8f5cb598472833f60cdecc8b63ce55d0" and "80408b573c6ec1dee232322b5d11d338389d39bd" have entirely different histories.
288632cf8f ... 80408b573c

4 changed files with 2 additions and 105 deletions
Show Stats Expand all files Collapse all files

1
index.html
View File

@ -32,7 +32,6 @@
<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>

2
src/components/Chapter.jsx
View File

@ -10,7 +10,6 @@ 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`;
@ -42,7 +41,6 @@ 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} />}

4
src/components/ChapterFeedback.tsx
View File

@ -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
? `Your feedback is private but will be sent to the author will be sent as "${user.name}"`
: `Your feedback is private and anonymous`}
? `Private feedback will be sent as "${user.name}"`
: `Private feedback will be anonymous`}
</div>
<div className="d-flex flex-row align-items-center">
{feedbackStatus === "sending" && (

100
src/components/Remark42.tsx
View File

@ -1,100 +0,0 @@
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>
);
}