Use Remark42 on a Gatsby (React) site

[BenRoe]

Hello,
i try to include Remark42 in my Gatsby site.

I tried different examples. One from the #753 issue, this one and this.

Always the same problem. Remark42 is included if i open the site, but if i change the page (click on a link in the sidebar (not shop)), Remark42 is not loaded.

I add Remak42 with this<Comments commentsId="PAGETITLE" /> the the pages (component code below).

Here the docker vars:

VAR
REMARK_URL	https://comments.keycapsss.com
SITE	keycapsss.com

// comments.js

import React, { useEffect } from 'react'
import PropTypes from 'prop-types'

// Helper to add scripts to our page
const insertScript = (id, parentElement) => {
  const script = window.document.createElement('script')
  script.type = 'text/javascript'
  script.async = true
  script.id = id
  script.innerHTML = `
    var remark_config = {
    host: 'https://comments.keycapsss.com',
    site_id: 'keycapsss.com',
    //url: 'PAGE_URL', // optional param; if it isn't defined
                     // 'window.location.origin + window.location.pathname' will be used
                     //
                     // Note that if you use query parameters as significant part of URL
                     // (the one that actually changes content on page)
                     // you will have to configure URL manually to keep query params, as
                     // 'window.location.origin + window.location.pathname' doesn't contain query params and
                     // hash. For example, default URL for 'https://example/com/example-post?id=1#hash'
                     // would be 'https://example/com/example-post'
                     //
                     // The problem with query params is that they often contain useless params added by
                     // various trackers (utm params) and doesn't have defined order, so Remark42 treats differently
                     // all this examples:
                     // https://example.com/?postid=1&date=2007-02-11
                     // https://example.com/?date=2007-02-11&postid=1
                     // https://example.com/?date=2007-02-11&postid=1&utm_source=google
                     //
                     // If you deal with query parameters make sure you pass only significant part of it
                     // in well defined order
    max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
    theme: 'light', // optional param; if it isn't defined default value ('light') will be used
    // page_title: 'Moving to Remark42', // optional param; if it isn't defined 'document.title' will be used
    locale: 'en', // set up locale and language, if it isn't defined default value ('en') will be used
    show_email_subscription: false, // optional param; by default it is 'true' and you can see email subscription feature
                                    // in interface when enable it from backend side
                                    // if you set this param in 'false' you will get notifications email notifications as admin
                                    // but your users won't have interface for subscription
    //simple_view: true, // optional param; overrides the parameter from the backend
                        // minimized UI with basic info only
  };
  !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)
  return script
}

// Helper to remove scripts from our page
const removeScript = (id, parentElement) => {
  const script = window.document.getElementById(id)
  if (script) {
    parentElement.removeChild(script)
  }
}

const Comments = ({ commentsId }) => {
  useEffect(() => {
    // If there's no window there's nothing to do for us
    if (!window) {
      return
    }
    const document = window.document
    // In case our #remark42 container exists we can add our commento script
    if (document.getElementById('remark42')) {
      insertScript('comments-script', document.body)
    }

    // Cleanup when the component unmounts
    return () => removeScript('comments-script', document.body)
  }, [commentsId])

  return (
    <>
      <h2>Comments</h2>
      <div id="remark42"></div>
    </>
  )
}

Comments.propTypes = {
  commentsId: PropTypes.string,
}

export default Comments

[umputun]

moved to discussions

@akellbl4 & @paskal - I'm not sure what the issues here are, but the backed seems to be configured correctly to me. Can you pls take a look? I also think we may want to add the "integration with Gatsby" chapter to our docs as this thing is popular enough to have a dedicated page.

[paskal]

@elmaester, if you would be able to write down steps you need to take to make remark42 work with Gatsby, it would be extremely helpful. I think creating a new folder with index.md file in it here would be an appropriate place for such new documentation.

[akellbl4]

Probably we will need to create examples on out repo and put it Gatsby integration as a working example.

[elmaester]

@elmaester, if you would be able to write down steps you need to take to make remark42 work with Gatsby, it would be extremely helpful. I think creating a new folder with index.md file in it here would be an appropriate place for such new documentation.

Ok, my pleasure. I'll do it soon. I'm using Remark42, so I'm invested in its success now ☺️

[elmaester]

I have added a pull request: #1222

[paskal]

Published as https://remark42.com/docs/manuals/integration-with-gatsby/