How to use remark42 on react app/gatsby

[dyaskur]

Sorry, I am new on a system like these. I tried code below but not working(fail on build)

   <script>
                        {`
                      var remark_config = {
                        host: "http://127.0.0.1:8080", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
                        site_id: 'remark',
                        components: ['embed'], // optional param; which components to load. default to ["embed"]
                                               // to load all components define components as ['embed', 'last-comments', 'counter']
                                               // available component are:
                                               //     - 'embed': basic comments widget
                                               //     - 'last-comments': last comments widget, see `Last Comments` section below
                                               //     - 'counter': counter widget, see `Counter` section below
                        // url: 'PAGE_URL', // optional param; if it isn't defined
                             
                        max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
                        // theme: 'dark', // 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
                      };

                      (function(c) {
                        for(var i = 0; i < c.length; i++){
                          var d = document, s = d.createElement('script');
                          s.src = remark_config.host + '/web/' +c[i] +'.js';
                          s.defer = true;
                          (d.head || d.body).appendChild(s);
                        }
                      })(remark_config.components || ['embed']);
                        `}</script>

[dyaskur]

I have done by using:

const insertScript = (src, id, parentElement) => {
    const script = window.document.createElement('script');
    script.defer = true;
    script.src = src;
    script.id = id;
    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);
    }
};
// T


const Post = ({data, location}) => {
    const post = data.ghostPost
    useEffect(() => {
        // If there's no window there's nothing to do for us
        if (!window) {
            return;
        }
        // window.remark_config.node = "remark42";
        window.remark_config = {
                host: "http://127.0.0.1:8080", // hostname of remark server, same as REMARK_URL in backend config, e.g. "https://demo.remark42.com"
                site_id: 'remark',
                components: ['embed'], // optional param; which components to load. default to ["embed"]
                                       // to load all components define components as ['embed', 'last-comments', 'counter']
                                       // available component are:
                                       //     - 'embed': basic comments widget
                                       //     - 'last-comments': last comments widget, see `Last Comments` section below
                                       //     - 'counter': counter widget, see `Counter` section below
                // url: 'PAGE_URL',

                max_shown_comments: 10, // optional param; if it isn't defined default value (15) will be used
                // theme: 'dark', // 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
              };
        const document = window.document;
        // In case our #commento container exists we can add our commento script
        console.log(window.remark_config,"yaskur");
        if (document.getElementById('remark42')) {
            insertScript(`http://127.0.0.1:8080/web/embed.js`, `commento-script`, document.body);
        }
        // Cleanup; remove the script from the page
        return () => removeScript(`commento-script`, document.body);
    }, [data]);

code from:
https://itnext.io/adding-commento-to-react-apps-like-gatsby-871824fb57ae

[BenRoe]

Tried this example and also https://dev.to/thehollidayinn/how-to-add-commento-or-other-comments-to-gatsby-173h
but i have always the same problem.
If i do a fresh F5 the remark42 ui is shown, but if i click on a in page LINK the remark42 ui is not shown.
Any ideas?

[paskal]

@BenRoe, I propose you start the discussion and post the URL of the site so it would be possible to replicate your experience, then it would be easier for us to find out what it might be.