Setup OGProxy for use in NodeBB

[phenomlab]

@DownPW yes, I’m happy to do that. Actually, I think I might have a workable way of doing this without impacting performance.

[phenomlab]

@DownPW Try this revised post

https://sudonix.org/topic/498/setup-ogproxy-for-use-in-nodebb/82?_=1688636028700

And for demonstration purposes, I’m including a my link test here

Please thoroughly test this. It seems ok on my side, and if you agree, I’ll commit the code to git

[phenomlab]

Another edit - I’ve modified an existing function used in the code so that it will now detect if a URL is on a line of it’s own - if it is, it will be processed, but if it’s not, it will be ignored.

This is a much cleaner way of doing it, and it’s running here. I will give this a few days, and if things work as they are now with no identified bugs, I’ll commit the new code in git

[DownPW]

Sorry I haven’t got time to test t
Your code above like you said above … sorry
Just update fonction.js for test it ?

[phenomlab]

@DownPW there’s nothing to test yet as I haven’t committed the new code. I’ll get this done today.

[phenomlab]

@DownPW I have just committed the latest code to git - it’s only function.js code and won’t require a restart of the OGProxy service.

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

[DownPW]

cool many thanks

[DownPW]

Hi @phenomlab

it seem virtualmin doesn’t add http2 directive on nginx configuration like you said on tutorial :

Should I add it?
what does it bring?

[phenomlab]

@DownPW it does, but you have to enable it.
Vitrualmin/Server Configuration/Website Options

A fairly concise explanation of http2 and it’s benefits can be found here.

https://www.limelightonline.co.nz/blog/what-http2-benefit-your-website/

[DownPW]

Ok thank you for information my friend

[phenomlab]

Fixed a minor bug to prevent anchor href wrapping entire width of parent element. Updated code available at

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

Note, that you will also need this additional block of CSS

.card.card-wrapper {
     background: none;
     width: 450px;
}
 @media (max-width: 767px) {
     .card.card-wrapper {
         background: none;
         width: 100%;
    }
}

The original post instructions have been updated

[cagatay]

i should also add it Mark?

[DownPW]

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

[phenomlab]

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

[DownPW]

result with latest code @phenomlab :

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

[phenomlab]

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

[DownPW]

@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%;
}
}

[phenomlab]

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

[cagatay]

i confused. what i have to do add or delete

[phenomlab]

@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.