Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-07-22 17:47:16 +00:00
Code Issues Projects Releases Wiki Activity

Add home image

Browse source
This commit is contained in:
Jordan Eldredge 2022-11-12 14:58:26 -08:00
parent 7c772e3f4f
commit 9abe6ab8ab
1 changed files with 71 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

110
packages/skin-museum-og/pages/api/og.js
View file

@ -21,7 +21,33 @@ export default async function (req) {
if (skinMd5) {
return permalinkImage(skinMd5);
}
throw new Error("Expected skin md5 or query");
return homeImage();
}
async function homeImage() {
const data = await fetchGraphql(
`
query HomeSkins {
skins(first:20, sort: MUSEUM){
nodes {
... on ClassicSkin {
id
nsfw
filename
screenshot_url
}
}
}
}`,
{}
);
return new ImageResponse(
<ImageGrid skins={data.skins.nodes} title={"Winamp Skin Museum"} />,
{
width: 1200,
height: 600,
}
);
}
async function searchImage(query) {
@ -30,7 +56,8 @@ async function searchImage(query) {
query SkinSearch($query: String!) {
skins: search_skins(query: $query, first:20){
... on ClassicSkin {
id
id
nsfw
filename
screenshot_url
}
@ -38,27 +65,37 @@ async function searchImage(query) {
}`,
{ query }
);
return new ImageResponse(
(
<Frame>
return new ImageResponse(<ImageGrid skins={data.skins} title={query} />, {
width: 1200,
height: 600,
});
}
function ImageGrid({ skins, title }) {
return (
<Frame>
<div
style={{
display: "flex",
position: "relative",
}}
>
<div
style={{
position: "absolute",
top: "-150px",
left: "-30px",
width: "1400px",
display: "flex",
position: "relative",
flexWrap: "wrap",
transform: "rotate(-15deg)",
}}
>
<div
style={{
position: "absolute",
top: "-150px",
left: "-30px",
width: "1400px",
display: "flex",
flexWrap: "wrap",
transform: "rotate(-15deg)",
}}
>
{data.skins.map((skin) => {
{skins
.filter((skin) => {
return !skin.nsfw;
})
.map((skin) => {
return (
<img
style={{
@ -71,28 +108,23 @@ async function searchImage(query) {
/>
);
})}
</div>
</div>
<div
style={{
fontSize: 100,
flexGrow: 1,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
textShadow: "0px 0px 10px black",
backgroundColor: "rgba(0, 0, 0, 0.2)",
}}
>
{query}
</div>
</Frame>
),
{
width: 1200,
height: 600,
}
</div>
<div
style={{
fontSize: 100,
flexGrow: 1,
display: "flex",
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
textShadow: "0px 0px 10px black",
backgroundColor: "rgba(0, 0, 0, 0.2)",
}}
>
{title}
</div>
</Frame>
);
}