Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add story image function

Browse source
This commit is contained in:
Sam Carlton 2021-03-20 18:11:25 -05:00
parent 21841e5bdb
commit d5c270f768
2 changed files with 66 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

60
functions/story-image-axis.svg.js Normal file
View file

@ -0,0 +1,60 @@
exports.handler = async function(event, context) {
const {
//path, // Path parameter
//httpMethod, // Incoming request’s method name
// headers, // {Incoming request headers}
queryStringParameters, // {query string parameters }
// body, // A JSON string of the request payload
// isBase64Encoded, // A boolean flag to indicate if the applicable request payload is Base64-encode
} = event
// console.log('queryStringParameters', queryStringParameters)
const {
width = 200,
height = 100,
heading = 'Does It ARM'
} = queryStringParameters
return {
statusCode: 200,
headers: {
'Content-Type': 'image/svg+xml',
},
body: /* html */`
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 ${ width } ${ height }'>
<rect fill='#191a1d' width='${ width }' height='${ height }'/>
<defs>
<linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='${ height }'>
<stop offset='0' stop-color='#191a1d'/>
<stop offset='${ height }' stop-color='#292d31'/>
</linearGradient>
<linearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='${ height }'>
<stop offset='0' stop-color='#34393f' stop-opacity='0'/>
<stop offset='${ height }' stop-color='#34393f' stop-opacity='${ height }'/>
</linearGradient>
<linearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='${ width }' y2='${ width }'>
<stop offset='0' stop-color='#34393f' stop-opacity='0'/>
<stop offset='${ height }' stop-color='#34393f' stop-opacity='${ height }'/>
</linearGradient>
</defs>
<rect x='0' y='0' fill='url(#a)' width='${ width }' height='${ height }'/>
<g fill-opacity='0.5'>
<polygon fill='url(#b)' points='0 ${ height } 0 0 0 ${ width } 0'/>
<polygon fill='url(#c)' points='${ width } ${ height } ${ width } 0 0 0'/>
</g>
<foreignObject x="${ width * 0.1 }" y="${ height * 0.1 }" width="${ width * 0.8 }" height="${ height * 0.8 }">
<div
xmlns="http://www.w3.org/1999/xhtml"
style="
font-size: 1px;
color: white;
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
margin: 0;
"
>${ heading }</div>
</foreignObject>
</svg>
`
}
}