Mirrors/webamp
1
0
Fork 0
mirror of https://github.com/captbaritone/webamp.git synced 2026-08-01 22:45:18 +00:00
Code Issues Projects Releases Wiki Activity

Hack together header image

Browse source
This commit is contained in:
Jordan Eldredge 2022-11-12 20:01:19 -08:00
parent 9abe6ab8ab
commit eab836d0fe
1 changed files with 96 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -15,6 +15,10 @@ export default async function (req) {
const { searchParams } = req.nextUrl;
const skinMd5 = searchParams.get("md5");
const query = searchParams.get("query");
const header = searchParams.get("header");
if (header) {
return headerImage(query);
}
if (query) {
return searchImage(query);
}
@ -24,6 +28,29 @@ export default async function (req) {
return homeImage();
}
async function headerImage() {
const data = await fetchGraphql(
`
query HomeSkins {
skins(first:20, sort: MUSEUM){
nodes {
... on ClassicSkin {
id
nsfw
filename
screenshot_url
}
}
}
}`,
{}
);
return new ImageResponse(<HeaderGrid skins={data.skins.nodes} />, {
width: 1500,
height: 500,
});
}
async function homeImage() {
const data = await fetchGraphql(
`
@ -71,6 +98,75 @@ async function searchImage(query) {
});
}
function HeaderGrid({ skins, title }) {
return (
<div
style={{
background: "black",
color: "white",
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
textAlign: "center",
alignItems: "center",
justifyContent: "center",
justifyContent: "space-between",
background: "linear-gradient(45deg,#000,#191927 66%,#000)",
}}
>
<div
style={{
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
justifyItems: "center",
width: "100%",
flexGrow: 10,
alignItems: "stretch",
}}
>
<div
style={{
display: "flex",
position: "relative",
}}
>
<div
style={{
position: "absolute",
top: "-250px",
left: "-30px",
width: "2000px",
display: "flex",
flexWrap: "wrap",
transform: "rotate(-15deg)",
}}
>
{skins
.filter((skin) => {
return !skin.nsfw;
})
.map((skin) => {
return (
<img
style={{
margin: "15px",
}}
key={skin.id}
src={skin.screenshot_url}
height={String(300)}
width={String(300 * aspectRatio)}
/>
);
})}
</div>
</div>
</div>
</div>
);
}
function ImageGrid({ skins, title }) {
return (
<Frame>