search

glanceapp / glance

A self-hosted dashboard that puts all your feeds in one place
GNU Affero General Public License v3.0
7.49k stars 260 forks source link

Provide Extension Example? #152

Closed pairofcrocs closed 3 months ago

pairofcrocs commented 3 months ago

I was wondering if I could see an example from the server side setup?

I've read the documentation a couple times over and I'm still not entirely sure how to setup the extensions back end.

I can't get the text to render as html, only plain text.

I can provide a PR to the docs when I have it solved :)

This is easily my favorite dashboard app so far, great work!

svilenmarkov commented 3 months ago

Hey,

You need two things to be able to render HTML - your Glance config must explicitly allow it when configuring the widget using the allow-potentially-dangerous-html property:

- type: extension
  url: http://localhost:9000
  allow-potentially-dangerous-html: true

And the server must tell Glance that it wants to render HTML by returning a Widget-Content-Type header with the value html: 

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.set('Widget-Content-Type', 'html');

  res.send(`<p class="color-primary">This should be displayed with the primary color</p>`);
});

app.listen(9000);
pairofcrocs commented 3 months ago

Okay that's exactly what I had.

Glance:

         - type: extension
            url: http://192.168.1.16:5014
            allow-potentially-dangerous-html: true
            cache: 1s

nginx index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Glance Extension Widget</title>
    <Widget-Content-Type>html</Widget-Content-Type>
</head>
<body>
    <p class="color-primary">This should be displayed with the primary color</p>
</body>
</html>

nginx server.js:

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.set('Widget-Content-Type', 'html');
  res.send(`<p class="color-primary">This should be displayed with the primary color</p>`);
});

app.listen(9000);

Glace webui: Screenshot 2024-06-24 160855

Not sure what else I could have screwed up XD

svilenmarkov commented 3 months ago

It looks like the index.html file is being served, which would be missing that header. If you want to serve the code from the JS file and have it return dynamic content you'll need NodeJS. If you want to serve the static index.html file you can add this to your nginx config for the server:

add_header Widget-Content-Type html;
pairofcrocs commented 3 months ago

Ah of course...

I'm a little rusty on my web server setup :)