vity01 / backstage-xkcd Goto Github PK
View Code? Open in Web Editor NEWxkcd.com plugin for Backstage
License: Apache License 2.0
xkcd.com plugin for Backstage
License: Apache License 2.0
The HTML of xkcd.com contains a title and alt attribute, but they are reversed in the json.
<img src="//imgs.xkcd.com/comics/room_temperature.png" title="They're also refusing to fund my device that demonstrates uncontrolled hot fusion." alt="Room Temperature" srcset="//imgs.xkcd.com/comics/room_temperature_2x.png 2x" style="image-orientation:none">
https://xkcd.com/2798/info.0.json
{"month": "7", "num": 2798, "link": "", "year": "2023", "news": "", "safe_title": "Room Temperature", "transcript": "", "alt": "They're also refusing to fund my device that demonstrates uncontrolled hot fusion.", "img": "https://imgs.xkcd.com/comics/room_temperature.png", "title": "Room Temperature", "day": "5"}
I think this means that the plugin should use alt=title, and title=alt. At the moment it has alt=alt and no title.
I can submit a pull request if you would like.
I went through plugin installation guide, but I'm getting Unexpected token '<', "<html><h"... is not valid JSON
I see in devtools that it tries to reach mylocalhosturl/api/proxy/xkcd-proxy/info.0.json
, but it returns 404, because I didn't provide such endpoint. Same happens in place of a card
component and on /xkcd
route.
From what I see in src/components/XkcdComicCard/XkcdComicCard.tsx I guess it wants me to set some baseUrl
const backendUrl = config.getString('backend.baseUrl');
const proxyUrl = '/proxy/xkcd-proxy/';
try {
const url = `${backendUrl}/api${proxyUrl}`
const response = await fetch(`${url}${num !== LAST_INDEX ? `${num}/` : ''}info.0.json`);
Should it be set somewhere in app-config.yaml? I've already added below mentioned in the guide
proxy:
'/xkcd-proxy':
target: https://xkcd.com/
Maybe I missed something, I'm new to backstage
Csp need to be updated to look more like the following in order for images to render
csp:
connect-src: ["'self'", "http:", "https:", "https://imgs.xkcd.com"]
img-src: ['self', 'http:', 'https:', 'data:', 'https://imgs.xkcd.com']
When creating a custom homepage in backstage the XKCD card/image/text should be automatically resized to what the user wants the size to be. This is currently not the case and the card cuts off part of the image if the sizing does not fully support the image
As there is now possibility to add cards to custom homepage, you could create an cardExtension for this. See https://github.com/backstage/backstage/tree/master/plugins/home#customizable-home-page for details :)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.