fix: og image font size and spacing
This commit is contained in:
Hossein Mehrabi
parent
e28d91bbd8
commit
f32df9edbf
|
|
@ -42,6 +42,12 @@ export default async function handler(request: NextRequest) {
|
|||
|
||||
const titleMaxLength = 66
|
||||
|
||||
const isArticle = contentType === 'article'
|
||||
const titleFontSize = isArticle && hasImage ? '54px' : '64px'
|
||||
const subtitleFontSize = isArticle && hasImage ? '32px' : '36px'
|
||||
const subtitleGap = isArticle && hasImage ? '16px' : '24px'
|
||||
const subtitleMargin = isArticle && hasImage ? '24px' : '40px'
|
||||
|
||||
return new ImageResponse(
|
||||
contentType === LPE.PostTypes.Podcast ? (
|
||||
<img
|
||||
|
|
@ -60,7 +66,7 @@ export default async function handler(request: NextRequest) {
|
|||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: 'flex-end',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'flex-start',
|
||||
backgroundColor: '#000',
|
||||
color: '#fff',
|
||||
|
|
@ -72,20 +78,47 @@ export default async function handler(request: NextRequest) {
|
|||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
width: hasImage ? '600px' : '100%',
|
||||
padding: '48px',
|
||||
padding: '56px 48px',
|
||||
justifyContent: 'space-between',
|
||||
height: '100%',
|
||||
position: 'relative',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex' }}>
|
||||
<div
|
||||
style={{
|
||||
gap: '0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{isArticle ? (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="40"
|
||||
height="40"
|
||||
viewBox="0 0 40 40"
|
||||
fill="none"
|
||||
>
|
||||
<path
|
||||
d="M31.5672 32.3016H8.88892V18.5133H31.5458L31.5672 32.3016ZM20.203 19.6195C18.2674 19.6214 16.3622 20.0945 14.6565 20.9967C12.9509 21.8988 11.4975 23.2022 10.4256 24.791C10.2838 24.9524 10.2057 25.1587 10.2057 25.3722C10.2057 25.5857 10.2838 25.7921 10.4256 25.9535C11.5044 27.535 12.9605 28.8313 14.6661 29.7287C16.3716 30.6262 18.2745 31.0973 20.2078 31.1008C22.1411 31.1043 24.0458 30.64 25.7547 29.7487C27.4635 28.8574 28.9244 27.5663 30.0091 25.9887C30.1638 25.8182 30.2493 25.5975 30.2493 25.3687C30.2493 25.1399 30.1638 24.9192 30.0091 24.7487C28.9273 23.1664 27.4667 21.8712 25.7564 20.9778C24.046 20.0844 22.1387 19.6203 20.203 19.6265V19.6195Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M20.2674 17.2239C18.3441 17.2201 16.4504 16.7566 14.7488 15.8731C13.0471 14.9895 11.5882 13.7124 10.4971 12.1511C10.3151 11.9603 10.2139 11.7083 10.2139 11.4465C10.2139 11.1847 10.3151 10.9327 10.4971 10.7419C11.5875 9.18345 13.0474 7.91088 14.75 7.03475C16.4526 6.15862 18.3463 5.7054 20.2669 5.71443C22.1874 5.72345 24.0768 6.19446 25.7708 7.08655C27.4648 7.97864 28.9123 9.26485 29.9877 10.8335C30.1419 11.0029 30.2271 11.2224 30.2271 11.45C30.2271 11.6776 30.1419 11.8971 29.9877 12.0665C28.9136 13.6392 27.4674 14.9305 25.7739 15.8291C24.0804 16.7276 22.1905 17.2063 20.2674 17.2239ZM24.4986 11.5169C24.5184 10.6769 24.2839 9.85012 23.825 9.14208C23.366 8.43404 22.7034 7.8769 21.9218 7.54176C21.1402 7.20662 20.2749 7.10869 19.4366 7.2605C18.5983 7.4123 17.8248 7.80695 17.215 8.39404C16.6052 8.98113 16.1868 9.73404 16.013 10.5566C15.8393 11.3793 15.9182 12.2342 16.2396 13.0124C16.561 13.7907 17.1104 14.4568 17.8176 14.9258C18.5249 15.3948 19.3578 15.6455 20.2102 15.6457C21.3304 15.646 22.4063 15.2142 23.2077 14.4426C24.0091 13.671 24.4724 12.6209 24.4986 11.5169Z"
|
||||
fill="white"
|
||||
/>
|
||||
<path
|
||||
d="M20.2243 29.5325C19.3932 29.5187 18.5847 29.2629 17.9006 28.7975C17.2164 28.332 16.6871 27.6777 16.3791 26.9166C16.0711 26.1554 15.9981 25.3216 16.1694 24.5197C16.3406 23.7179 16.7485 22.9838 17.3417 22.4098C17.9349 21.8357 18.687 21.4473 19.5034 21.2933C20.3199 21.1394 21.1643 21.2267 21.9305 21.5444C22.6968 21.862 23.3507 22.3959 23.8101 23.0788C24.2695 23.7617 24.514 24.5632 24.5127 25.3827C24.5108 25.9337 24.3981 26.4788 24.181 26.9866C23.9638 27.4943 23.6466 27.9545 23.2477 28.3405C22.8489 28.7265 22.3762 29.0307 21.8572 29.2353C21.3382 29.4399 20.7832 29.5409 20.2243 29.5325Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg
|
||||
width="35"
|
||||
height="40"
|
||||
viewBox="0 0 35 40"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={{ position: 'absolute', top: '0px', left: '0px' }}
|
||||
>
|
||||
<path
|
||||
d="M34.5255 40H0V19.2558H34.4929L34.5255 40ZM17.2247 20.92C14.2778 20.923 11.3773 21.6347 8.78061 22.992C6.18391 24.3493 3.97138 26.3101 2.33942 28.7004C2.12351 28.9432 2.00466 29.2537 2.00466 29.5749C2.00466 29.8961 2.12351 30.2066 2.33942 30.4494C3.98188 32.8287 6.19861 34.779 8.79515 36.1292C11.3917 37.4794 14.2887 38.1882 17.232 38.1934C20.1753 38.1986 23.0749 37.5001 25.6765 36.1592C28.2781 34.8183 30.5021 32.8759 32.1535 30.5024C32.389 30.2459 32.5192 29.9138 32.5192 29.5696C32.5192 29.2254 32.389 28.8933 32.1535 28.6368C30.5066 26.2562 28.2829 24.3077 25.6791 22.9636C23.0752 21.6195 20.1715 20.9213 17.2247 20.9306V20.92Z"
|
||||
|
|
@ -100,6 +133,7 @@ export default async function handler(request: NextRequest) {
|
|||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)}
|
||||
{contentType === 'article' && (
|
||||
<div
|
||||
style={{
|
||||
|
|
@ -107,20 +141,27 @@ export default async function handler(request: NextRequest) {
|
|||
fontFamily: 'Lora',
|
||||
fontSize: '40px',
|
||||
whiteSpace: 'pre-wrap',
|
||||
paddingLeft: '40px',
|
||||
textTransform: 'uppercase',
|
||||
paddingLeft: '13px',
|
||||
}}
|
||||
>
|
||||
{siteConfigs.title.replace('Logos', '')}
|
||||
<span>{siteConfigs.title.replace('Logos ', '')}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
gap: subtitleMargin,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
fontFamily: 'Lora',
|
||||
fontSize: '64px',
|
||||
fontSize: titleFontSize,
|
||||
lineHeight: '115%',
|
||||
whiteSpace: 'pre-wrap',
|
||||
}}
|
||||
|
|
@ -132,19 +173,19 @@ export default async function handler(request: NextRequest) {
|
|||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
gap: '24px',
|
||||
fontSize: '36px',
|
||||
gap: subtitleGap,
|
||||
fontSize: subtitleFontSize,
|
||||
alignItems: 'center',
|
||||
textTransform: 'capitalize',
|
||||
fontFamily: 'Inter',
|
||||
}}
|
||||
>
|
||||
<p>
|
||||
<span>
|
||||
{contentType ??
|
||||
pagePath.replace(/^\/+/, '').replace(/\/+/, ' | ')}
|
||||
</p>
|
||||
{date && <p>∙</p>}
|
||||
{date && <p>{`${day} ${month} ${year}`}</p>}
|
||||
</span>
|
||||
{date && <span>∙</span>}
|
||||
{date && <span>{`${day} ${month} ${year}`}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue