mirror of
https://github.com/wavetermdev/docusaurus-og.git
synced 2026-08-05 13:46:35 -07:00
feat: use new marks for og image generator
This commit is contained in:
Hossein Mehrabi
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.7 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 3.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg width="71" height="80" viewBox="0 0 71 80" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M70.0208 80H0.969727V38.5117H69.9555L70.0208 80ZM35.4191 41.84C29.5254 41.846 23.7243 43.2695 18.5309 45.984C13.3376 48.6985 8.91249 52.6202 5.64856 57.4009C5.21675 57.8865 4.97905 58.5074 4.97905 59.1498C4.97905 59.7923 5.21675 60.4133 5.64856 60.8988C8.93348 65.6575 13.3669 69.558 18.56 72.2584C23.7531 74.9587 29.5471 76.3763 35.4337 76.3868C41.3203 76.3972 47.1196 75.0003 52.3227 72.3184C57.5259 69.6366 61.9739 65.7517 65.2766 61.0048C65.7477 60.4918 66.0082 59.8276 66.0082 59.1392C66.0082 58.4509 65.7477 57.7867 65.2766 57.2736C61.983 52.5125 57.5356 48.6155 52.3279 45.9273C47.1202 43.2391 41.3127 41.8425 35.4191 41.8612V41.84Z" fill="white"/>
|
||||
<path d="M35.615 34.6319C29.759 34.6206 23.9931 33.2258 18.8118 30.5673C13.6306 27.9088 9.1884 24.0659 5.86624 19.368C5.31234 18.794 5.00394 18.0358 5.00394 17.248C5.00394 16.4602 5.31234 15.702 5.86624 15.128C9.18655 10.4385 13.6316 6.60944 18.8156 3.9732C23.9996 1.33696 29.7658 -0.0267592 35.6135 0.000397793C41.4612 0.0275548 47.2138 1.44479 52.3718 4.12905C57.5297 6.81332 61.9371 10.6835 65.2114 15.4035C65.6809 15.9131 65.9406 16.5738 65.9406 17.2585C65.9406 17.9433 65.6809 18.6039 65.2114 19.1135C61.9411 23.8457 57.5377 27.7313 52.3813 30.435C47.225 33.1386 41.4706 34.5791 35.615 34.6319ZM48.4981 17.4599C48.5587 14.9323 47.8447 12.4445 46.4473 10.314C45.0498 8.18358 43.0323 6.50717 40.6524 5.49876C38.2725 4.49034 35.638 4.19568 33.0854 4.65245C30.5328 5.10922 28.1779 6.2967 26.3212 8.06323C24.4645 9.82976 23.1903 12.0952 22.6613 14.5704C22.1323 17.0456 22.3725 19.6182 23.3512 21.9598C24.3299 24.3014 26.0027 26.3058 28.156 27.7171C30.3094 29.1283 32.8456 29.8825 35.4409 29.8832C38.8517 29.8841 42.1276 28.5847 44.5677 26.2631C47.0078 23.9414 48.4186 20.7818 48.4981 17.4599Z" fill="white"/>
|
||||
<path d="M35.4838 71.668C32.9532 71.6262 30.4917 70.8568 28.4086 69.4563C26.3255 68.0558 24.7138 66.0868 23.7759 63.7966C22.838 61.5065 22.6159 58.9975 23.1373 56.5847C23.6588 54.172 24.9007 51.9632 26.7069 50.2359C28.5131 48.5086 30.803 47.3399 33.289 46.8766C35.7749 46.4133 38.3459 46.6761 40.679 47.632C43.0121 48.5878 45.0032 50.1941 46.402 52.249C47.8008 54.3038 48.545 56.7156 48.5411 59.1813C48.5355 60.8392 48.1923 62.4796 47.5312 64.0074C46.87 65.5351 45.9042 66.9199 44.6896 68.0813C43.4751 69.2428 42.0361 70.1579 40.4558 70.7736C38.8756 71.3893 37.1856 71.6933 35.4838 71.668Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="125" height="40" viewBox="0 0 125 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M104.969 20.0001C104.969 27.7697 104.969 39.8954 104.969 39.8954C58.1357 39.8954 64.8858 20.0001 24.9689 19.9999C24.9689 27.7696 24.9689 39.8954 24.9689 39.8954H4.96879V19.9999C4.96879 19.9999 -14.948 19.9997 24.9689 19.9999C24.9689 12.2303 24.9689 0.104675 24.9689 0.104675C71.4692 0.104675 64.8859 20.0001 104.969 20.0001C104.969 12.2305 104.969 0.104675 104.969 0.104675H124.97V20.0001C124.97 20.0001 112.78 20.0001 104.969 20.0001Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 566 B |
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 652 KiB |
@@ -0,0 +1,8 @@
|
||||
<svg width="68" height="82" viewBox="0 0 68 82" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M32.36 15.1352C30.6998 12.17 28.2023 9.71796 25.1563 8.06245L21.2881 6.03209C21.2881 6.03209 25.7585 -0.460552 31.364 1.30206C36.9694 3.06467 35.209 14.8228 34.0509 19.3075" fill="black"/>
|
||||
<path d="M48.111 28.6555C47.6909 22.0275 45.479 15.6205 41.6948 10.07C43.5735 8.8407 45.8675 8.34611 48.111 8.68671C49.2397 8.88932 50.3033 9.34406 51.2165 10.0144C52.1297 10.6848 52.8668 11.5521 53.369 12.5466C54.0721 14.3463 54.2952 16.2872 54.0176 18.1914C53.9995 19.0553 53.8512 19.9121 53.5775 20.7349C53.3871 21.2504 53.1385 21.7442 52.8363 22.2075C52.4502 22.8173 52.0332 23.3974 51.5854 23.9478C50.4273 25.4873 49.2691 27.1383 48.111 28.6555Z" fill="#999999"/>
|
||||
<path d="M13.4579 3.35706C18.1566 3.58876 22.6613 5.23542 26.3366 8.06479C29.9732 10.6752 34.2351 16.0969 34.0498 19.2206C33.8645 22.3442 26.0818 37.9622 25.549 46.8645C25.0163 55.7668 26.9066 63.8326 28.4491 68.4957C30.8731 72.099 43.6538 81.0013 43.6538 81.0013C43.6538 81.0013 39.3079 81.0013 33.297 78.8817C30.0461 78.1787 26.0016 76.0098 23.8216 73.5827C11.7537 62.2931 12.3164 53.8147 12.3627 37.9735C12.3627 26.4608 15.2741 20.4701 15.6679 16.1417C16.0617 11.8133 18.2576 10.1008 16.3533 5.69976L13.4579 3.35706Z" fill="#1A1A1A"/>
|
||||
<path d="M34.8148 14.1959C34.069 18.8435 32.601 23.3563 30.4602 27.5828C28.4669 32.0426 26.765 36.6179 25.3643 41.2821C23.4946 48.4246 24.0206 57.3715 25.364 62.3442C27.9472 71.906 33.2603 79.2343 43.6546 80.9966C38.6402 77.1536 35.1073 72.0038 33.425 66.0479C32.4499 62.9783 32.1176 59.7525 32.4476 56.5582C32.7777 53.3638 33.7634 50.2644 35.3476 47.4401C36.227 45.8522 37.1935 44.3106 38.2429 42.8216L47.1607 29.4347C47.6112 28.8424 47.9484 28.1775 48.1567 27.4713C48.3004 26.734 48.3004 25.9774 48.1567 25.2401C46.909 18.5627 43.9824 12.2812 39.6327 6.94469C37.0848 3.82107 33.5641 1.00842 29.4411 1.00842C31.3154 1.13604 33.0582 2.18562 33.7494 3.86568C35.1403 7.01925 35.0845 10.8294 34.8148 14.1959Z" fill="#808080"/>
|
||||
<path d="M61.4481 35.0036C61.4481 36.4454 62.6388 37.918 63.283 38.7658C64.662 40.5809 67.4523 43.005 67.4523 43.7636C67.406 44.2321 67.1843 44.4556 66.5921 44.8729C65.849 45.3966 64.5882 46.1063 64.5882 46.1063C64.5882 46.1063 64.8149 46.9394 65.325 47.5224C65.8663 48.1409 66.6403 48.8803 65.7151 49.7431C64.7899 50.6058 64.3679 50.8475 64.3679 50.8475C64.3679 50.8475 64.7741 51.1588 65.136 51.6395C65.4979 52.1202 65.5442 52.5654 65.5761 53.0675C65.4835 54.1607 64.0242 54.607 63.4915 55.5887C63.2583 56.1396 63.1862 57.4749 63.283 58.0625C63.4605 59.7836 62.7152 60.2267 61.9627 60.8291C61.2102 61.4315 60.3874 61.4885 59.5305 61.4315C57.222 61.4315 51.9604 60.8153 48.7775 62.3993C43.7793 64.8868 44.2045 75.9335 43.6542 80.9988C35.3738 78.3401 31.5723 63.5651 31.5728 58.0625C31.5732 52.5598 32.9946 48.7165 35.5336 44.6755C40.3206 38.0565 44.9533 31.363 49.4314 24.5952C52.1341 20.6845 53.2441 16.791 53.1296 12.1119C53.1296 12.1119 56.9841 16.7162 58.7893 19.1735C60.4639 21.3556 62.4374 26.676 62.7152 29.4926C62.929 31.6603 61.4481 33.5617 61.4481 35.0036Z" fill="#CCCCCC"/>
|
||||
<path d="M43.6545 80.9986C28.2295 80.3627 7.95729 71.2482 2.88866 49.6284C-2.17996 28.0085 3.51983 13.0376 5.75329 8.9324C7.98676 4.82721 11.703 2.58038 15.3583 3.64423C22.0293 5.58533 14.0164 22.0739 13.2451 32.036C12.4739 41.9981 13.2451 52.1721 18.3134 62.9821C23.3816 73.792 31.9755 80.5172 43.6545 80.9986Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
@@ -47,6 +47,10 @@ const options: ImageGeneratorOptions = {
|
||||
],
|
||||
}
|
||||
|
||||
const SIDE_IMAGE_WIDTH = options.width / 2
|
||||
const SIDE_IMAGE_HEIGHT = options.height
|
||||
const LOGO_HEIGHT = 80
|
||||
|
||||
const Layout: React.FC<{
|
||||
logo?: React.ReactNode
|
||||
image?: React.ReactNode
|
||||
@@ -106,9 +110,7 @@ const Layout: React.FC<{
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', height: '120px', overflow: 'hidden' }}>
|
||||
{logo}
|
||||
</div>
|
||||
<div style={{ display: 'flex', overflow: 'hidden' }}>{logo}</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: '54px', display: 'flex' }}>{title}</div>
|
||||
{footerItems.length > 0 && (
|
||||
@@ -156,9 +158,7 @@ const Layout: React.FC<{
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<div style={{ display: 'flex', height: '120px', overflow: 'hidden' }}>
|
||||
{logo}
|
||||
</div>
|
||||
<div style={{ display: 'flex', overflow: 'hidden' }}>{logo}</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: '72px', display: 'flex' }}>{title}</div>
|
||||
<div
|
||||
@@ -202,7 +202,9 @@ const docsImageRenderer = imageRendererFactory(
|
||||
<span>{doc.version.label}</span>
|
||||
),
|
||||
]}
|
||||
logo={logo && <img src={logo.src as any} style={{ height: 120 }} />}
|
||||
logo={
|
||||
logo && <img src={logo.src as any} style={{ height: logo.height }} />
|
||||
}
|
||||
image={
|
||||
image && (
|
||||
<img
|
||||
@@ -250,7 +252,9 @@ const blogImageRenderer = imageRendererFactory(
|
||||
.map((author) => author.name)
|
||||
.join(', ')}`,
|
||||
]}
|
||||
logo={logo && <img src={logo.src as any} style={{ height: 120 }} />}
|
||||
logo={
|
||||
logo && <img src={logo.src as any} style={{ height: logo.height }} />
|
||||
}
|
||||
image={
|
||||
image && (
|
||||
<img
|
||||
@@ -281,7 +285,9 @@ const pagesImageRenderer = imageRendererFactory(
|
||||
<Layout
|
||||
title={metadata.title}
|
||||
footer={url.host}
|
||||
logo={logo && <img src={logo.src as any} style={{ height: 120 }} />}
|
||||
logo={
|
||||
logo && <img src={logo.src as any} style={{ height: logo.height }} />
|
||||
}
|
||||
image={
|
||||
image && (
|
||||
<img
|
||||
@@ -297,11 +303,8 @@ const pagesImageRenderer = imageRendererFactory(
|
||||
},
|
||||
)
|
||||
|
||||
const getLogo = async (siteConfig: DocusaurusConfig, outDir: string) => {
|
||||
const logo: any = (siteConfig.themeConfig as any).navbar.logo
|
||||
|
||||
return await loadImage(outDir, logo.src, { height: 120 })
|
||||
}
|
||||
const getLogo = async (siteConfig: DocusaurusConfig, outDir: string) =>
|
||||
await loadImage(outDir, '/theme/image/logo-og.svg', { height: LOGO_HEIGHT })
|
||||
|
||||
const getPageImage = async (
|
||||
type: 'docs' | 'blog' | 'page',
|
||||
@@ -324,8 +327,8 @@ const getPageImage = async (
|
||||
|
||||
if (typeof image === 'string' && image.length > 0)
|
||||
return await loadImage(outDir, image, {
|
||||
width: options.width / 2,
|
||||
height: options.height,
|
||||
width: SIDE_IMAGE_WIDTH,
|
||||
height: SIDE_IMAGE_HEIGHT,
|
||||
fit: 'cover',
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user