Skip to content
Sudonix

Setup OGProxy for use in NodeBB

Moved Let's Build It
  • DownPWundefined

    you just need to copy the code from the below

    https://github.com/phenomlab/ogproxy/blob/main/function.js

    And, of course, replace these two values with your own that you already have

    var proxy = "FULL_FQDN_OF_YOUR_OGPROXY_HERE";
var apiKey = "YOUR_API_KEY_HERE";

    And add new css block code to ACP/custom CSS

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @cagatay @DownPW it’s not critical - it only addresses a cosmetic bug so if you haven’t really noticed then it’s not urgent 🙂

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    result with latest code @phenomlab :

    image.png

    My css :

    *----------------------------------------------------------------------------*/
/*------------------        nodebb-plugin-OGPROXY       ----------------------*/
/*----------------------------------------------------------------------------*/

/* Desktop */

/* Iframe */
.card img.card-favicon {
    max-width: 21px;
    max-height: 21px;
    margin-right: 10px;
}
h4.card-site-title {
    color: var(--bs-body-color);
    text-transform: capitalize;
}
.card.card-preview {
    margin: 20px 0 20px 0;
    width: 50%;
}
[component="chat/message"] .card.card-preview {
    margin: 20px 0 20px 0;
    width: 30%;
}
.card.card-preview img:not(.card-favicon) {
    object-fit: cover;
    width: 100%;
    max-height: 15rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
  .card.card-preview .img-fluid {
    max-width: 100% !important;
  }
  .card-preview p.card-text {
    font-size: 80%;
    color: var(--bs-body-color);
    
  }
  .card-preview h5.card-title {
    font-weight: 600;
    font-size: 120%;
    color: var(--bs-body-color);
}

/* Effect hover Iframe */
.card-image-container {
    max-width: 100%;
    max-height: 250px;
    overflow: hidden;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}
#card-image {
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
#card-image:hover {
    transform: scale(1.5,1.5);
  }
  
.card.card-wrapper {
    background: none;
    width: 450px;
}

/* Smartphone */
@media (max-width: 1010px) {
    [component="chat/message"] .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
    }
    
    .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
}
}

    maybe you should put the css code in github

    PW and WS Spirit alive

    0
  • phenomlabundefined

    Thanks. I’ve just seen another bug on mobile because I didn’t add the mobile class. I’ll do it tomorrow and update the code

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    @phenomlab

    fixed 🙂

    with this code (add no border and change width) :

    .card.card-wrapper {
    background: none;
    border: none;
    /* width: 450px; */
    width: 100%;
}

    All the code fixed for Desktop & Smartphone and adding Effect hover Iframe :

    /*----------------------------------------------------------------------------*/
/*------------------        nodebb-plugin-OGPROXY       ----------------------*/
/*----------------------------------------------------------------------------*/

/* Desktop */

.card img.card-favicon {
    max-width: 21px;
    max-height: 21px;
    margin-right: 10px;
}
h4.card-site-title {
    color: var(--bs-body-color);
    text-transform: capitalize;
}
.card.card-preview {
    margin: 20px 0 20px 0;
    width: 50%;
}
.card.card-wrapper {
    background: none;
    border: none;
    /* width: 450px; */
    width: 100%;
}
[component="chat/message"] .card.card-preview {
    margin: 20px 0 20px 0;
    width: 30%;
}
.card.card-preview img:not(.card-favicon) {
    object-fit: cover;
    width: 100%;
    max-height: 15rem;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}
  .card.card-preview .img-fluid {
    max-width: 100% !important;
  }
  .card-preview p.card-text {
    font-size: 80%;
    color: var(--bs-body-color);
  }
  .card-preview h5.card-title {
    font-weight: 600;
    font-size: 120%;
    color: var(--bs-body-color);
}

/* Effect hover Iframe */
.card-image-container {
    max-width: 100%;
    max-height: 250px;
    overflow: hidden;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
}
#card-image {
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
}
#card-image:hover {
    transform: scale(1.5,1.5);
  }

/* Smartphone */
@media (max-width: 1010px) {
    [component="chat/message"] .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
    }
    
    .card.card-preview {
    margin: 20px 0 20px 0;
    width: 100%;
}
}

    PW and WS Spirit alive

    1
  • phenomlabundefined

    Found another bug where mentions are converted into preview links in chat where they shouldn’t be (thanks @DownPW for reporting).

    https://github.com/phenomlab/ogproxy/blob/main/function.js

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • cagatayundefined

    i confused. what i have to do add or delete 🙂

    0
  • phenomlabundefined

    @cagatay see below

    https://github.com/phenomlab/ogproxy/blob/03d5ff125611361700d785bd82a6ab16fcd68bfc/function.js#L7

    It’s basically this line - replace what you already have in your JS functions with this one.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • cagatayundefined

    @phenomlab i think did it 🙂

    1
  • phenomlabundefined phenomlab referenced this topic on
  • crazycellsundefined

    hi @phenomlab , what would be the difference between running this on server side (as link-preview plugin) or on client side (as ogproxy) in layman’s terms?

    0
  • phenomlabundefined

    @crazycells In laymen terms, it means that there is zero load on the server because all rendering of website previews is handled client side. This makes it more performant on budget hosts because the processing is handled by the visiting web browser.

    All sessions are also cached meaning it has superior speed.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • crazycellsundefined

    @phenomlab are they cached for each user separately?

    additionally, this is also handling youtube videos etc, right?

    0
  • phenomlabundefined

    @crazycells said in Setup OGProxy for use in NodeBB:

    are they cached for each user separately?

    No. It’s a shared cache

    @crazycells said in Setup OGProxy for use in NodeBB:

    additionally, this is also handling youtube videos etc, right?

    No. This is handled by nodebb-plugin-ns-embed

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1

  • phenomlabundefined

    Extended functions for Q&A NodeBB plugin

    Let's Build It
    3
    5 Votes
    3 Posts
    195 Views
    DownPWundefined

    Very good like always 😉

  • phenomlabundefined

    Switch between list and card view function

    Moved Let's Build It
    107
    50 Votes
    107 Posts
    3k Views
    phenomlabundefined

    @crazycells

    image.png

    image.png

  • phenomlabundefined

    What's your go to product for site stats?

    Let's Build It
    27
    15 Votes
    27 Posts
    1k Views
    phenomlabundefined

    For anyone else coming here and is struggling to get pm2 to work with Umami (as I did - it started, but never seemed to work after a reboot which is pretty useless), you can use the below. Obviously, change the parts noted inside the [brackets]. Follow the below instructions:

    Instructions

    Open a terminal and create a new systemd service file:

    sudo nano /etc/systemd/system/umami.service

    Add the following content to the file:

    [Unit] Description=Umami Analytics Server After=network.target [Service] Type=simple User=[umami user] WorkingDirectory=[path to umami] ExecStart=/usr/local/bin/node [path to umami]/node_modules/.bin/next start Restart=on-failure [Install] WantedBy=multi-user.target

    Replace [umami user] with the username of the user that should run the Umami service, and [path to umami] with the actual path to your Umami installation.

    Save the file and exit the editor.

    Reload the systemd manager configuration:

    sudo systemctl daemon-reload

    Enable the Umami service to start on boot:

    sudo systemctl enable umami.service

    Start the Umami service:

    sudo systemctl start umami.service

    You can check the status of the service with:

    sudo systemctl status umami.service

    This systemd service file will ensure that Umami starts automatically when the system boots, and it will restart the service if it fails. Remember to adjust the WorkingDirectory and ExecStart paths according to where Umami is installed on your system, and ensure that Node.js is installed and accessible at /usr/bin/node (or adjust the path to Node.js as necessary).

  • phenomlabundefined

    Threaded post support for NodeBB

    Let's Build It
    146
    50 Votes
    146 Posts
    18k Views
    phenomlabundefined

    Updated git for above change

    https://github.com/phenomlab/nodebb-harmony-threading/commit/14a4e277521d83d219065ffb14154fd5f5cfac69

  • phenomlabundefined

    Custom Board Stats Widget

    Moved Let's Build It
    28
    20 Votes
    28 Posts
    811 Views
    cagatayundefined

    thanks Mark.

  • phenomlabundefined

    Create a dynamic category list

    Moved Let's Build It
    14
    14 Votes
    14 Posts
    645 Views
    phenomlabundefined

    Just circling back here as I’ve been helping @cagatay this morning on his site, and noticed that if you use a mixture of fa-brands and fa-solid then the code supplied above may produce some odd looking results.

    If this is the case, replace the function with this

    $(document).ready(function() { $.getJSON('/api/categories', function(data, status) { $.each(data.categories, function(key, value) { var iconClass = 'fa'; // Default to 'fa' if the icon type is not recognized // Check if the icon is FontAwesome Unicode if (this.icon.startsWith('&#x') || this.icon.startsWith('&#xf')) { iconClass = 'fa'; } else if (this.icon.startsWith('fab')) { iconClass = 'fab'; } var categorylist = $(" \ <li class='dropdown-item tree-root'><span class='category-menu'><i class='" + iconClass + " " + this.icon + "'></i><a style='display: inherit;' class='dropdown-item rounded-1' href='/category/" + this.slug + "'>" + this.name + "</a></span></li> \ <ul class='tree-branch' style='list-style: none;'>" + this.children.map(c => { var childIconClass = 'fa'; // Default to 'fa' for child icons // Check if the child icon is FontAwesome Unicode if (c.icon.startsWith('&#x') || c.icon.startsWith('&#xf')) { childIconClass = 'fas'; } else if (c.icon.startsWith('fab')) { childIconClass = 'fab'; } return `<li class='dropdown-item tree-node'><span class='category-menu-tree-node'><i class='${childIconClass} ${c.icon}'></i><a class='dropdown-item rounded-1' style='display: inherit;' href='/category/${c.slug}'>${c.name}</a></span></li>`; }).join(" ") + "</ul>" ); if ($(window).width() < 767) { $(".bottombar #thecategories").append(categorylist); } else { $(".sidebar-left #thecategories").append(categorylist); } }); }); });

    In fact, if you want to replace it anyway to make your experience “future proof”, you can use this code now 🙂

  • Pandaundefined

    node vs nodejs confusion?

    Solved Configure
    2
    1 Votes
    2 Posts
    144 Views
    phenomlabundefined

    @eeeee have a look at the below

    https://docs.nodebb.org/installing/os/ubuntu/

    curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash - sudo apt-get install -y nodejs

    You’ll notice that we are in fact “installing” NodeJS but never actually have a need to reference it. Here’s the nodejs --version command on my dev system

    6eb1482e-0c9b-454d-aa84-199bcc845702-image.png

    More detail here

    https://askubuntu.com/questions/1030622/why-do-i-see-different-versions-of-node-and-nodejs

  • phenomlabundefined

    Setting up a beta NodeBB v3 environment

    Moved Let's Build It
    14
    11 Votes
    14 Posts
    601 Views
    phenomlabundefined

    @dave1904 excellent news. Thanks for the feedback