Setup OGProxy for use in NodeBB

[phenomlab]

@DownPW no. Look at your screenshot. The initial target is #sitetitle. Also, there’s no enforcement of !important in that class.

[DownPW]

yes you are right.

I Have find the guilty: It’s my code to have an effect on URL link :

.posts .content a {
    color: var(--bs-link-color);
    /*background-image: linear-gradient(to right, var(--bs-link-color), var(--bs-link-color) 50%, var(--bs-link-hover-color) 50%);*/
    background-image: linear-gradient(to right, var(--bs-link-hover-color), var(--bs-link-hover-color) 50%, var(--bs-link-color) 50%);
    background-size: 200% 100%;
    background-position: -100%;
    display: inline-block;
    padding: 5px 0;
    position: relative;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: all 0.3s ease-in-out;
}
 
.posts .content a:hover {
 background-position: 0;
}
 
.posts .content a:hover::before{
    width: 100%;
}

[DownPW]

But I wonder how to keep it without it coming into conflict with OGProxy, especially for the internal links to the site which do not have an iframe

[phenomlab]

@DownPW just needs carefully crafted CSS.

[DownPW]

@DownPW said in Setup OGProxy for use in NodeBB:

especially for the internal links to the site which do not have an iframe

it works ??!!!

Internal links are also in an Iframe.
Very strange,I thought that was not the intended operation.

[phenomlab]

@DownPW it wasn’t to start with, but I changed my mind 🤭

[phenomlab]

@DownPW can you pm me a link to an internal URL ? Something I’d like to check.

[DownPW]

So I no longer need my effect code if all the URL links, even internal ones, are in an Iframe so managed by OGProxy
You could have told me before I racked my brains little trickster ha ha

But I thought it would cause perf issues so I guess you found a workaround for that

@phenomlab said in Setup OGProxy for use in NodeBB:

@DownPW can you pm me a link to an internal URL ? Something I’d like to check.

On my Domain ?

[phenomlab]

@DownPW sorry. Yes, I did find a workaround.

Yes, your Dev instance please.

[dave1904]

Hi, I’ve followed all steps but unfortunately don’t get it to work. Here’s the console output:

OGProxy: Domains containing (or starting with) http://xx.xxx.xxx.xxx are in the ignore list and will not be parsed.
OGProxy: Paths containing /post are in the ignore list and will not be parsed. 
OGProxy: Parsing DOM for any URLs that should be converted to previews.

[phenomlab]

@dave1904 is the server running ?

[dave1904]

@phenomlab Yes

● ogproxy.service - OGProxy Server
     Loaded: loaded (/etc/systemd/system/ogproxy.service; enabled; vendor preset: enabled)
     Active: active (running) since Tue 2023-06-13 21:32:17 UTC; 34min ago
   Main PID: 948850 (node)
      Tasks: 7 (limit: 1131)
     Memory: 16.0M
     CGroup: /system.slice/ogproxy.service
             └─948850 /usr/bin/node /home/ogproxy/ogproxy/server.js

[phenomlab]

@dave1904 can you provide your nginx config?

[dave1904]

@phenomlab I have send you a pm

[phenomlab]

@dave1904 thanks. Any errors in the console?

[dave1904]

This post is deleted!

[dave1904]

@phenomlab Yes:

OPTIONS
 
https://media.werkself-forum.de/ogproxy?url=https://www1.wdr.de/sport/fussball/erste-bundesliga/bundesliga-teamcheck-winter-bayer-leverkusen-100.html
 
CORS Missing Allow Origin

It seems to me that I missed something in the nginx configuration.

[phenomlab]

@dave1904 not the nginx configuration, but in server.js under this specific section

app.use(cors({ origin: 'FULL_FQDN_OF_YOUR_ORIGIN_HERE' }));

[phenomlab]

@DownPW @dave1904 can you please replace your function code (found in function.js and used in the custom JS part of NodeBB) to use the below - please also remember to replace your proxy and apiKey values

ogproxy/function.js at main · phenomlab/ogproxy

Open Graph Proxy. Contribute to phenomlab/ogproxy development by creating an account on GitHub.

GitHub

I have found a couple of bugs this morning and fixed them. The original post has also been updated.

Thanks

[phenomlab]

I’ve added a new hover effect that will enlarge the image by 1.5 when activated. If you’d like this feature, you’ll need to pull the latest function.js code and use this to replace the existing in your custom JS console.

You will also need this additional CSS

.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.1);
  }

If you’d rather not have this feature, just remove the CSS block above.