47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
import { ImageResponse } from 'next/og';
|
||
|
|
import { BARS } from '@/components/Logo';
|
||
|
|
|
||
|
|
// iOS ignores SVG touch icons — it needs a real raster, on an opaque ground,
|
||
|
|
// with no transparency (it composites its own rounded mask). Previously this
|
||
|
|
// pointed at favicon.svg, so add-to-home-screen produced a blank tile.
|
||
|
|
export const size = { width: 180, height: 180 };
|
||
|
|
export const contentType = 'image/png';
|
||
|
|
|
||
|
|
const COHORT = ['rgba(22,32,42,0.22)', 'rgba(22,32,42,0.38)', 'rgba(22,32,42,0.55)', '', 'rgba(22,32,42,0.22)'];
|
||
|
|
const SCALE = 3.6; // 40 → 144, leaving a 18px margin inside 180
|
||
|
|
|
||
|
|
export default function AppleIcon() {
|
||
|
|
return new ImageResponse(
|
||
|
|
(
|
||
|
|
<div
|
||
|
|
style={{
|
||
|
|
width: '100%',
|
||
|
|
height: '100%',
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
background: '#f2f1ed',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div style={{ position: 'relative', width: 40 * SCALE, height: 40 * SCALE, display: 'flex' }}>
|
||
|
|
{BARS.map(([x, y, w, h, isSchool], i) => (
|
||
|
|
<div
|
||
|
|
key={x}
|
||
|
|
style={{
|
||
|
|
position: 'absolute',
|
||
|
|
left: x * SCALE,
|
||
|
|
top: y * SCALE,
|
||
|
|
width: w * SCALE,
|
||
|
|
height: h * SCALE,
|
||
|
|
borderRadius: 3,
|
||
|
|
background: isSchool ? '#584a9b' : COHORT[i],
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
),
|
||
|
|
size
|
||
|
|
);
|
||
|
|
}
|