Skip to content

Interesting Widget code, but can't fetch API

Solved Customisation
26 2 8.3k 1
  • Yes. There is a key included and the exact code works as stand-alone, thats why Im wonderinging why not working in a widget

    @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

  • @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

    @phenomlab ah! Its nodebb hosted site, so they do all that

  • Pandaundefined Panda has marked this topic as solved on
  • @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

    @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

  • @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <style>
    .cbgresult {
        margin: 10px 0 15px 0;
        padding: 15px;
        border-radius: 6px;
        font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 2rem;
        text-align: center;
        background: var(--bs-code-block) !important;
    }
    .cbgresult:after {
    content: '"';
    }
    .cbgresult:before {
    content: '"';
    }
    .cbgheader {
        margin-top: 40px;
        text-align: center;
    }
    .generate {
        text-align: center;
    }
    </style>
    <script src="/assets/js/cbg.js"></script>
    <div class="cbgheader">
    <h2>Corporate BS Generator</h2>
    <p>
    Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
    </p>
    </div>
    <div id="cbg" class="cbgresult"></div>
    <div class="generate">
    <button id="reloadme" class="btn btn-primary">Generate Another</button>
    </div>
    <script>
    $(function() { // after page load
        $('.cbgresult').fadeOut(0, function() {
        $("#cbg").show();
            $(this).html(phrase());
       });
    });
    $(document).ready(function(){
    $("#cbg").show();
        $('#reloadme').click(function(){
     $("#cbg").html(phrase());
        });
    });
    </script>
    

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

  • phenomlabundefined phenomlab has marked this topic as unsolved on
  • @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    </head>
    <style>
    .cbgresult {
        margin: 10px 0 15px 0;
        padding: 15px;
        border-radius: 6px;
        font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
        font-size: 2rem;
        text-align: center;
        background: var(--bs-code-block) !important;
    }
    .cbgresult:after {
    content: '"';
    }
    .cbgresult:before {
    content: '"';
    }
    .cbgheader {
        margin-top: 40px;
        text-align: center;
    }
    .generate {
        text-align: center;
    }
    </style>
    <script src="/assets/js/cbg.js"></script>
    <div class="cbgheader">
    <h2>Corporate BS Generator</h2>
    <p>
    Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
    </p>
    </div>
    <div id="cbg" class="cbgresult"></div>
    <div class="generate">
    <button id="reloadme" class="btn btn-primary">Generate Another</button>
    </div>
    <script>
    $(function() { // after page load
        $('.cbgresult').fadeOut(0, function() {
        $("#cbg").show();
            $(this).html(phrase());
       });
    });
    $(document).ready(function(){
    $("#cbg").show();
        $('#reloadme').click(function(){
     $("#cbg").html(phrase());
        });
    });
    </script>
    

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

    @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

  • @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • Pandaundefined Panda has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Following the API docs but its not clear ...

    Solved Customisation api nodebb
    8
    2 Votes
    8 Posts
    2k Views
    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.
  • nodebb loading emojis

    Solved Configure nodebb emojis
    16
    1
    1 Votes
    16 Posts
    4k Views
    @DownPW sure. Let me have a look at this in more detail. I know nginx plus has extensive support for this, but it’s not impossible to get somewhere near acceptable with the standard version. You might be better off handling this at the Cloudflare level given that it sits in between the requesting client and your server.
  • Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    3k Views
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • fading in /tags page

    Solved Customisation nodebb
    32
    1
    30 Votes
    32 Posts
    10k Views
    Fix working perfectly
  • NodeBB 1.19.3

    Solved Performance nodebb 1.19.3 performance
    33
    4 Votes
    33 Posts
    12k Views
    @phenomlab I find the problem Mark The error message indicated this path : http://localhost:4567/assets/plugins/nodebb-plugin-emoji/emoji/styles.css?v=6983dobg16u I change the path url on config.json [image: 1645128773854-47bacc80-f141-41e4-a261-3f8d650cc6f6-image.png] And all it’s good Weird, I didn’t have to change that path before 1.19.3 But this does not prevent the problem from a clean install with Emoji Plugin EDIT: After test, that resolv the problem installation for 1.18.x but not for 1.19.x (I have other error message when I run ./nodebb Setup For resume: NodeJS 16_x with 1.18.x is ok
  • creating topic specific widgets

    Solved Customisation nodebb
    16
    10 Votes
    16 Posts
    5k Views
    @crazycells said in creating topic specific widgets: Additionally if hide class exists, why are we re-defining it? We’re not 🤭 I misspelled it - it should be hidden
  • Display tweets in widget [NodeBB]

    Solved Customisation
    29
    4 Votes
    29 Posts
    10k Views
    @phenomlab brilliant, many thanks Mark