Setup OGProxy for use in NodeBB

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

Loading...

Please wait while the description loads.

Loading...

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

Digital Marketing & Web Design Insights - Limelight Digital

Check out our latest insights on everything from web design & development to digital marketing.

Limelight Digital

[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

Loading...

Please wait while the description loads.

Loading...

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

Loading...

Please wait while the description loads.

Loading...

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

Loading...

Please wait while the description loads.

Loading...

[cagatay]

i confused. what i have to do add or delete

[phenomlab]

@cagatay see below

Loading...

Please wait while the description loads.

Loading...

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

[cagatay]

@phenomlab i think did it

[crazycells]

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?